-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
139 lines (112 loc) · 9.11 KB
/
index.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=1440">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" type="image/jpg" href="Images/icon.png"/>
<title>Wiper Mechanism</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/GH_ribbon.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<a target="_blank" class="github-fork-ribbon" href="https://github.com/jatin-47/Wiper-Mechanism" data-ribbon="Star me on GitHub" title="Fork me on GitHub">Star me on GitHub</a>
<h1 class="display-6 text-center bg-info bg-gradient py-1 fw-normal" style="margin-bottom: 30px;">Wiper Mechanism Simulation</h1>
<div class="container mx-5 pb-5">
<div class="row">
<div class="col-xl-7 col-md-12">
<canvas id="wiper" width="690" height="1000"></canvas>
</div>
<div class="col-xl-5 col-md-12">
<div class="row">
<div class="text-center">
<button id="animation" class="btn btn-success my-2 w-50 mx-2" onclick="animPD.toggleAnim(); update_butt();">Start animation</button>
<button class="btn btn-warning w-25 my-2 mx-2" onclick="reset();">Reset</button>
<div id="msg"></div>
</div>
</div>
<hr class="mt-0">
<div class="row">
<div class="col-xl-12 col-md-12">
<h5 style="color: rgb(226, 47, 47);"><u>Actuator (Motor)</u> :-</h5>
<label>Angular Speed (ω)</label><b>:</b>
<span id="w_val" class="border rounded bg-ligth">2 rad/s</span>
<input type="range" id="omegaslider" class="form-range pt-3 ms-3" style="width: 170px;" min="-9" max="9" value="2" step="0.01" oninput=setOmega()><br>
<hr>
<h5 style="color: rgb(226, 47, 47);"><u>4-Bar Mechanism</u> :-</h5>
<label>Motor Bar Length</label><b>:</b>
<span id="motor_bar_val" class="border rounded bg-ligth">0.6 m</span>
<input type="range" id="motor_bar" class="form-range pt-3 ms-3" style="width: 170px;" min="0.1" max="3" value="0.6" step="0.1" oninput="setmotor();"><br>
<label>Coupler Bar Length</label><b>:</b>
<span id="coupler_bar_val" class="border rounded bg-ligth">2.8 m</span>
<input type="range" id="coupler_bar" class="form-range pt-3 ms-3" style="width: 170px;" min="0.1" max="3" value="2.8" step="0.1" oninput="setcoupler();"><br>
<label>Output Bar Length</label><b>:</b>
<span id="output_bar_val" class="border rounded bg-ligth">1.6 m</span>
<input type="range" id="output_bar" class="form-range pt-3 ms-3" style="width: 170px;" min="0.1" max="3" value="1.6" step="0.1" oninput="setoutput();"><br>
<label>Base Bar Length</label><b>:</b>
<span id="base_bar_val" class="border rounded bg-ligth"></span>
<input type="range" id="base_bar" class="form-range pt-3 ms-3" style="width: 170px;" min="0.1" max="4" value="" step="0.1" disabled>
<button data-bs-toggle="tooltip" data-bs-placement="top" title="This length is fixed.">
<i>i</i></button><br>
<hr>
<h5 style="color: rgb(226, 47, 47);"><u>Wiper</u> :-</h5>
<label style="width: 115px;">Delta Angle (δ)</label>
<div class="d-inline-block form-check form-switch" style="vertical-align: middle;" >
<input class="form-check-input" type="checkbox" checked onclick="animPD.toggleOption('delta_label')">
</div>
<b style="margin-left: -8px;" >:</b>
<span id="delta_val" class="border rounded bg-ligth">10º</span>
<input type="range" id="delta" class="form-range pt-3 ms-3" style="width: 170px;" min="-30" max="30" value="10" step="1" oninput="setdelta();">
<button data-bs-toggle="tooltip" data-bs-placement="top" title="Controls the positioning of the Area wiped.">
<i>i</i></button><br>
<label>Wiper Bar Length</label><b>:</b>
<span id="wiper_bar_val" class="border rounded bg-ligth">4 m</span>
<input type="range" id="wiper_bar" class="form-range pt-3 ms-3" style="margin-bottom: 26px; width: 170px;" min="2" max="4.4" value="4" step="0.1" oninput="setwiper();"><br>
<label>Area Wiped</label><b>:</b>
<span id="area_val" class="border rounded bg-ligth mb-1">0 m<sup>2</sup></span><br>
<label>Speed</label><b>:</b>
<span id="speed_val" class="border rounded bg-ligth">0 m/s</span>
<div class="d-inline-block form-check form-switch ms-3" style="vertical-align: middle; padding: 0px; position:relative;">
<input class="form-check-input" style="margin-top: 6px; position: absolute; left: 50px;" type="checkbox" id="flexSwitchCheckDefault1" onclick="animPD.toggleOption('velocity');">
<label class="btn text-white form-check-label fw-normal" for="flexSwitchCheckDefault1" style="width: 170px; padding: 1px 10px; margin: 0px 0px; background-color: rgba(2, 177, 2, 0.795); text-align: right;">
Velocity Vector
</label>
</div>
<button data-bs-toggle="tooltip" data-bs-placement="top" title="Green vectors represents velocity.">
<i>i</i>
</button>
<br>
<label>|Net Acceleration|</label><b>:</b>
<span id="acc_val" class="border rounded bg-ligth" style="margin-top: 2px;" >0 m/s<sup>2</sup></span>
<div class="d-inline-block form-check form-switch ms-3" style="vertical-align: middle; padding: 0px; position:relative;">
<input class="form-check-input" style="margin-top: 6px; position: absolute; left: 50px;" type="checkbox" id="flexSwitchCheckDefault" onclick="animPD.toggleOption('acceleration');">
<label class="btn text-white form-check-label fw-normal" for="flexSwitchCheckDefault" style="width: 170px; padding: 1px 10px; margin: 0px 0px; background-color: rgba(150, 0, 150, 0.699); text-align: right;">
Acc Vectors
</label>
</div>
<button data-bs-toggle="tooltip" data-bs-placement="top" title="Dark pink vector represents the net acceleration and light pink vectors represents centripetal acceleration (ac) and tangential acceleration (at).">
<i>i</i>
</button>
<br>
<label>|a<sub>c</sub>| (Centripetal)</label><b>:</b>
<span id="cent_val" class="border rounded bg-ligth" style=" margin-top: 2px;">0 m/s<sup>2</sup>
</span>
<button data-bs-toggle="tooltip" data-bs-placement="top" title="Can be verified by calculating (speed)^2/(wiper bar length) from above.">
<i>i</i>
</button>
<br>
<label>|a<sub>t</sub>| (Tangential)</label><b>:</b>
<span id="tan_val" class="border rounded bg-ligth" style=" margin-top: 4px;">0 m/s<sup>2</sup></span>
<br>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="js/sylvester.js"></script>
<script src="js/PrairieDraw.js"></script>
<script src="js/script.js"></script>
</body>
</html>