-
Notifications
You must be signed in to change notification settings - Fork 0
/
wheelSize.html
115 lines (113 loc) · 3.86 KB
/
wheelSize.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wheel size</title>
<script src = "plotly-latest.min.js"></script>
</head>
<style>
ul {
list-style-type: none;
padding: unset;
}
li {
float: left;
}
li a {
display: block;
padding: 5px;
color: black;
text-decoration: none;
font-size: 18px;
}
ul li a.activeBar {
background-color: lightskyblue;
}
ul li a.bar {
background-color: lightgrey;
opacity: 1;
transition: background-color .5s;
}
a.bar:hover {
background-color: lightskyblue;
}
.button {
background-color: lightgrey;
border: none;
padding: 10px 25px;
cursor: pointer;
border-radius: 5%;
}
</style>
<body>
<ul>
<li style=""><a href="index.html" class="bar">Drag Force/Wheel Force/Gear ranges</a></li>
<li><a href="wheelSize.html" class="activeBar">Wheel Size</a> </li>
<li><a href="units.html" class="bar">Unit conversion</a> </li>
<li><a href="about.html" class="bar">About</a> </li>
</ul>
<br><br>
<form id = "wheelSizeForm" method = "get">
Old wheel
<label for = "oldWidth"></label>
Width: <input id = "oldWidth" type = "number" style="width: 50px"/>
<label for = "oldHeight"></label>
Aspect ratio (profile): <input id = "oldHeight" type = "number" style="width: 50px"/>
<label for = "oldDim"></label>
Diameter: <input id = "oldDim" type = "number" style="width: 50px"/>
<br><br>
New wheel:
<label for = "newWidth"></label>
Width: <input id = "newWidth" type = "number" style="width: 50px"/>
<label for = "newHeight"></label>
Aspect ratio (profile): <input id = "newHeight" type = "number" style="width: 50px"/>
<label for = "newDim"></label>
Diameter: <input id = "newDim" type = "number" style="width: 50px"/>
<br><br>
<button type="button" id="applyOld" class = "button" onclick="wheelSizeFunction()">apply</button>
<br><br>
<p id = "oldWheelHeight"></p>
<p id = "newWheelHeight"></p>
<p id = "ratio"></p>
<p id = "speedError%"></p>
<from method = "get">
<button type="button" id = "plotButton" class = "button" onclick = "plot()">Plot</button>
</from>
<p id = "plot"></p>
</form>
<script>
var ratio = 0;
function wheelSizeFunction() {
var oldWidth = document.getElementById("oldWidth").value;
var oldHeight = document.getElementById("oldHeight").value;
var oldDim = document.getElementById("oldDim").value;
var newWidth = document.getElementById("newWidth").value;
var newHeight = document.getElementById("newHeight").value;
var newDim = document.getElementById("newDim").value;
var oldSize = (oldWidth * oldHeight / 50) + (oldDim * 25.4);
var newSize = (newWidth * newHeight / 50) + (newDim * 25.4);
ratio = (oldSize / newSize);
document.getElementById("oldWheelHeight").innerText = "old wheel height = " + oldSize.toFixed(3);
document.getElementById("newWheelHeight").innerText = "new wheel height = " + newSize.toFixed(3);
document.getElementById("ratio").innerText = "old to new size ratio = " + ratio.toFixed(3);
document.getElementById("speedError%").innerText = "Speed error = " + ((ratio - 1) * 100).toFixed(3) + "%";
}
function plot() {
var v = new Array(300);
var speedDif = new Array(300);
for (let i = 0; i < v.length; i++) {
v[i] = i + 1;
speedDif[i] = v[i] * ratio;
console.log(v[i]);
}
var data = {
x: v, y: speedDif
};
var layout = {
xaxis: { title: "Old speed on speedometer [km/h]" }, yaxis: { title: "New speed on speedometer [km/h]"}
}
Plotly.newPlot("plot", [data], layout);
}
</script>
</body>
</html>