-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (106 loc) · 4.62 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="./css/phone.css" />
<link rel="stylesheet" type="text/css" href="./css/spirograph.css" />
<link rel="stylesheet" type="text/css" href="./css/SpiroPlotter.css" />
<link rel="stylesheet" type="text/css" href="./css/RotaryDial.css" />
<link rel="stylesheet" type="text/css" href="./css/lcdDisplay.css" />
<script src="./javascript/SpiroGraph.js"></script>
<script src="./javascript/SpiroPlotter.js"></script>
<script src="./javascript/SpiroPlotterArms.js"></script>
<script src="./javascript/RotaryDial.js"></script>
<script src="./javascript/lcd.js"></script>
<title>Spiro Plotter</title>
</head>
<body>
<div style = "float: left">
<div id ="spirograph"></div>
<div style = "clear:both width: 100%; text-align: center; margin:auto">
<button style = "width: 100px; height: 50px", onclick = Spirograph.start()>Start</button>
<button style = "width: 100px; height: 50px", onclick = Spirograph.saveImage()>Save</button>
</div>
</div>
<div id = "controlPanel">
<div id = "speedControls" style = "float:left; text-align: center">
<div class = "dialPanel">
<div id = "masterSpeedDisplay"></div>
<div id = "masterSpeedDial"></div>
<div class = 'label'>Master Speed</div>
</div>
<div class = "dialPanel">
<div id = "arm2SpeedDisplay"></div>
<div id = "arm2SpeedDial"></div>
<div class = 'label'>Arm 2 Speed</div>
</div>
<div class = "dialPanel">
<div id = "arm3SpeedDisplay"></div>
<div id = "arm3SpeedDial"></div>
<div class = 'label'>Arm 3 Speed</div>
</div>
<div>
<div id = "lengthControls" style = "float:left">
<div class = "dialPanel">
<div id = "arm2LengthDisplay"></div>
<div id = "arm2LengthDial"></div>
<div class = 'label'>Arm 2 Length</div>
</div>
<div class = "dialPanel">
<div id = "arm3LengthDisplay"></div>
<div id = "arm3LengthDial"></div>
<div class = 'label'>Arm 3 Length</div>
</div>
<div id = "options" style = "text-align: left; float: left; margin-left: 40px; margin-top: 30px;">
<div>
<span>Pen Type</span>
<ul>
<li><input type="radio" name="pen" value="pencil" onclick = Spirograph.selectPenType(this)>Pencil</li>
<li><input type="radio" name="pen" value="round" onclick = Spirograph.selectPenType(this)>Round</li>
<li><input type="radio" name="pen" value="calligraphy" onclick = Spirograph.selectPenType(this)>Calligraphy</li>
</ul>
</div>
<div>
<span>Color</span>
<ul>
<li><input type="radio" name="color" value="rainbow" onclick = Spirograph.selectPenColor(this)>Ranbow</li>
<li><input type="radio" name="color" value="black" onclick = Spirograph.selectPenColor(this)>Black</li>
</ul>
</div>
<div>
<span>Complexity</span>
<ul>
<li><input type="radio" name="complexity" value=0 onclick = setComplexity(this.value)>Low</li>
<li><input type="radio" name="complexity" value=1 onclick = setComplexity(this.value)>Medium</li>
<li><input type="radio" name="complexity" value=2 onclick = setComplexity(this.value)>High</li>
</ul>
</div>
<div>
<div>
</div>
</body>
<script>
var setComplexity = function (complexity) {
arm2SpeedDial.setStep(complexity);
arm3SpeedDial.setStep(complexity);
};
var setValue = function (display) {
return function (object) {
display.setValue(object.value);
this.dialChanging(object)
}.bind(Spirograph)
}
Spirograph.renderInto("spirograph");
var dialSize = 150;
var masterSpeedDisplay = new LCD('masterSpeedDisplay');
var masterSpeedDial = new RotaryDial("masterSpeedDial", 1, 500, 0, dialSize, setValue(masterSpeedDisplay),null, 100);
var arm2SpeedDisplay = new LCD('arm2SpeedDisplay');
var arm2SpeedDial = new RotaryDial("arm2SpeedDial",-100, 100, 0, dialSize, setValue(arm2SpeedDisplay),null, -14);
var arm3SpeedDisplay = new LCD('arm3SpeedDisplay');
var arm3SpeedDial = new RotaryDial("arm3SpeedDial", -100, 100, 0, dialSize, setValue(arm3SpeedDisplay),null, 10);
var arm2LengthDisplay = new LCD('arm2LengthDisplay');
var arm2LengthDial = new RotaryDial("arm2LengthDial" ,0, 4, 2,dialSize, setValue(arm2LengthDisplay), null, 1);
var arm3LengthDisplay = new LCD('arm3LengthDisplay');
var arm3LengthDial = new RotaryDial("arm3LengthDial", 0, 4, 2,dialSize, setValue(arm3LengthDisplay),null, 2);
</script>
</html>