forked from TomKopp/DesignHub17VibrationGui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (107 loc) · 5.2 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>
<title>DesgiHub17VibrationGui</title>
<link rel="stylesheet" type="text/css" href="src/styles.css">
</head>
<body>
<!-- #F24C47 - orange red / accent -->
<!-- #ECECEC - light grey / accent -->
<!-- #393637 - dark grey / bg -->
<!-- #656363 - mid grey / el body color -->
<svg id="ring" width="800" height="600" viewBox="-420 -320 840 640" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="SVGID_1_" cx="0" cy="0" r="191" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#575756"></stop>
<stop offset="0.1648" style="stop-color:#50504F"></stop>
<stop offset="0.6095" style="stop-color:#424140"></stop>
<stop offset="1" style="stop-color:#393637"></stop>
</radialGradient>
<path id="segment" d="M 123.74 123.74
A 175 175 0 0 0 175 0
l 75 0
A 250 250 0 0 1 177 177
Z" />
<path id="fill" d="M 123.74 123.74
A 175 175 0 0 0 175 0" fill="transparent" />
</defs>
<g data-segmentId="6" data-angle="-22.5">
<text transform="translate(275, 10)" fill="#FFF">⇩</text>
<g class="segment">
<use href="#segment" style="fill:#656363; stroke:#656363; stroke-width:0" transform="translate(20, 0) rotate(-22.5)" />
<use href="#fill" class="fill" transform="translate(20, 0) rotate(-22.5)" style="stroke: #ECECEC; stroke-width: 90;" />
</g>
<text transform="translate(275, -10)" fill="#FFF">⇧</text>
</g>
<g data-segmentId="5" data-angle="22.5">
<text transform="translate(190, 230)" fill="#FFF">⇩</text>
<g class="segment">
<use href="#segment" style="fill:#656363; stroke:#656363; stroke-width:0" transform="translate(14.14, 14.14) rotate(22.5)" />
<use href="#fill" class="fill" transform="translate(14.14, 14.14) rotate(22.5)" style="stroke: #ECECEC; stroke-width: 90;" />
</g>
<text transform="translate(190, 210)" fill="#FFF">⇧</text>
</g>
<g data-segmentId="4" data-angle="67.5">
<text transform="translate(0, 310)" fill="#FFF">⇩</text>
<g class="segment">
<use href="#segment" style="fill:#656363; stroke:#656363; stroke-width:0" transform="translate(0, 20) rotate(67.5)" />
<use href="#fill" class="fill" transform="translate(0, 20) rotate(67.5)" style="stroke: #ECECEC; stroke-width: 90;" />
</g>
<text transform="translate(0, 290)" fill="#FFF">⇧</text>
</g>
<g data-segmentId="3" data-angle="112.5">
<text transform="translate(-200, 230)" fill="#FFF">⇩</text>
<g class="segment">
<use href="#segment" style="fill:#656363; stroke:#656363; stroke-width:0" transform="translate(-14.14, 14.14) rotate(112.5)" />
<use href="#fill" class="fill" transform="translate(-14.14, 14.14) rotate(112.5)" style="stroke: #ECECEC; stroke-width: 90;" />
</g>
<text transform="translate(-200, 210)" fill="#FFF">⇧</text>
</g>
<g data-segmentId="2" data-angle="157.5">
<text transform="translate(-285, 10)" fill="#FFF">⇩</text>
<g class="segment">
<use href="#segment" style="fill:#656363; stroke:#656363; stroke-width:0" transform="translate(-20, 0) rotate(157.5)" />
<use href="#fill" class="fill" transform="translate(-20, 0) rotate(157.5)" style="stroke: #ECECEC; stroke-width: 90;" />
</g>
<text transform="translate(-285, -10)" fill="#FFF">⇧</text>
</g>
<g data-segmentId="1" data-angle="202.5">
<text transform="translate(-200, -210)" fill="#FFF">⇩</text>
<g class="segment">
<use href="#segment" style="fill:#656363; stroke:#656363; stroke-width:0" transform="translate(-14.14, -14.14) rotate(202.5)" />
<use href="#fill" class="fill" transform="translate(-14.14, -14.14) rotate(202.5)" style="stroke: #ECECEC; stroke-width: 90;" />
</g>
<text transform="translate(-200, -230)" fill="#FFF">⇧</text>
</g>
<g data-segmentId="0" data-angle="247.5">
<text transform="translate(0, -280)" fill="#FFF">⇩</text>
<g class="segment">
<use href="#segment" style="fill:#656363; stroke:#656363; stroke-width:0" transform="translate(0, -20) rotate(247.5)" />
<use href="#fill" class="fill" transform="translate(0, -20) rotate(247.5)" style="stroke: #ECECEC; stroke-width: 90;" />
</g>
<text transform="translate(0, -300)" fill="#FFF">⇧</text>
</g>
<g data-segmentId="7" data-angle="292.5">
<text transform="translate(190, -210)" fill="#FFF">⇩</text>
<g class="segment">
<use href="#segment" style="fill:#656363; stroke:#656363; stroke-width:0" transform="translate(14.14, -14.14) rotate(292.5)" />
<use href="#fill" class="fill" transform="translate(14.14, -14.14) rotate(292.5)" style="stroke: #ECECEC; stroke-width: 90;" />
</g>
<text transform="translate(190, -230)" fill="#FFF">⇧</text>
</g>
<circle cx="0" cy="0" r="191" style="fill:url(#SVGID_1_)" />
</svg>
<div id="controlPanel">
<button id="recordExample"><b>Record</b> Example</button>
<button id="startExample"><b>Start</b> Example</button>
<button id="switchEdgy"><b>Switch</b> Edgyness</button>
<button id="playPause">Play / Pause</button>
</div>
<div id="connectionStatus">
<span>Not connected</span>
</div>
<script src="src/socket.io.slim.js"></script>
<script src="src/motor.js"></script>
<script src="src/index.js"></script>
</body>
</html>