forked from rawify/Stewart.js
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdefault.html
116 lines (110 loc) · 5.35 KB
/
default.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stewart Platform</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
var $images
var createSVGImage
var SVGS = [];
</script>
</head>
<body>
<script src="node_modules/bezier-js/bezier.js"></script>
<script src="node_modules/p5/lib/p5.min.js"></script>
<script src="node_modules/quaternion/quaternion.min.js"></script>
<script src="main.js"></script>
<script src="platform.js"></script>
<script src="animation.js"></script>
<div style="justify-content: space-evenly;" class="container">
<div>
<h3>Loaded SVG's (click on them to run animation)</h3>
<div id="images">
</div>
</div>
<div id="currentServoAngles">
<h3>Current servo angles and laser state</h3>
</div>
</div>
<hr>
<div class="container">
<div id="canvas"></div>
<div id="tweak-values">
<div class = "tweaker" id = "textToSVG">
<h3 style="text-align: center;">Convert text to SVG</h3>
<p style="margin: 0px;">Draw personalized text onto the wall</p>
<div id="textToDrawContainer">
<div style="display: flex; flex-direction: column; width: 80%;">
<input type="text" class="inputField" placeholder="Enter your text here" id="textToDrawInput" name="textToDrawInput" style="width: 100%;">
<div style="margin-top: 5px;">
<span>Choose font: </span>
<select style="height: auto; font-size: 12px;" name="fontSelector" id="fontSelector">
<option value="sans1Stroke">Regular</option>
<option value="script1Stroke">Hand-written</option>
</select>
</div>
</div>
<button style="flex-grow: 2; margin-left: 5px;" id="drawTextBtn">Draw</button>
</div>
</div>
<hr>
<div class = "tweaker" id = "platformParameters">
<h3 style="text-align: center;">Tweak parameters (mm)</h3>
<div id="tweak-parameters-opts">
<div style="width: 70%;">
<div class="tweakParameter">
<label for="distanceToWallInput">Distance to wall:</label>
<input type="number" class="inputField" id="distanceToWallInput" name="distanceToWallInput" min="200" max="10000">
</div>
<div class="tweakParameter">
<label for="rotationAxisOffsetInput">Rotation axis offset:</label>
<input type="number" class="inputField" id="rotationAxisOffsetInput" name="rotationAxisOffsetInput" min="0" max="500" step="5">
</div>
<div class="tweakParameter">
<label for="drawingSizeInput">Drawing size:</label>
<input type="number" class="inputField" id="drawingSizeInput" name="drawingSizeInput" min="50" max="1000" step="10">
<button type="button" id="maxSizeBtn">Max.</button>
</div>
<div class="tweakParameter">
<label for="drawingSpeedInput">Drawing speed:</label>
<input type="number" class="inputField" id="drawingSpeedInput" name="drawingSpeedInput" min="0.1" max="1" step="0.1">
</div>
</div>
<button style="flex-grow: 2; padding: 0px; margin: 5px 0px;" id="tweakParametersBtn">Apply Changes</button>
</div>
</div>
<hr>
<div class = "tweaker" id="camera-angles">
<h3 style="text-align: center;">Change camera position</h3>
<div id="camera-btn-container">
<button class="camera-button" id="defaultView">Default view</button>
<button class="camera-button" id="frontView">Front view</button>
<button class="camera-button" id="sideView">Side view</button>
<button class="camera-button" id="topView">Top view</button>
<button class="camera-button" id="logoView">SVG view</button>
<button class="camera-button" id="sphereView">Wall view</button>
<button class="camera-button" id="platformView">Platform view</button>
</div>
</div>
<hr>
<div class = "tweaker" id="servo-angles">
<h3 style="text-align: center;">Servo angles of current animation</h3>
<div class="servo-angles-content">
<div class="checkboxWithButton" style="width: 65%;">
<button style="width: 100%;" id="getAnimationAnglesBtn"><u>Download</u> formatted servo angles</button>
<div class="inner-checkbox">
<label for="animationAnglesType" style="font-size: 12px;">Original angles</label>
<input type="checkbox" id="animationAnglesType" name="animationAnglesType" style="margin-right: 15px;">
<label for="redundantRowsCheckbox" style="font-size: 12px;">Remove redundant rows</label>
<input type="checkbox" id="redundantRowsCheckbox" name="redundantRowsCheckbox">
</div>
</div>
<button style="width: 35%;" id="getHighestServoValuesBtn"><u>Log</u> highest servo angles</button>
</div>
</div>
</div>
</div>
<script src="textToSvg.js"></script>
</body>
</html>