-
Notifications
You must be signed in to change notification settings - Fork 4
/
autoManualFO.htm
70 lines (54 loc) · 2.16 KB
/
autoManualFO.htm
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
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
.ticks {
font: 10px sans-serif;
}
.track,
.track-inset,
.track-overlay {
stroke-linecap: round;
}
.track {
stroke: #000;
stroke-opacity: 0.3;
stroke-width: 12px;
}
.track-inset {
stroke: #ddd;
stroke-width: 8px;
}
.track-overlay {
pointer-events: stroke;
stroke-width: 50px;
stroke: transparent;
}
.handle {
stroke: #000;
stroke-opacity: 0.5;
stroke-width: 1.25px;
}
</style>
</head>
<body>
<center>
<svg id=mySVG width=600 height=600 >
<foreignObject id="AutoManualFO" width="200" height="150">
<div id="AutoManualDiv" class='noselect' style='border-radius:10px;background:skyblue;width:200px;border:3px solid blue'>
<table style="width:100%" >
<tr><td><input id="signalInValue" style='border:inset 3px;font-size:110%;text-align:center;font-weight:bold;color:lime;background:black;width:100px' value="50%" type="text" /> <button style="border-radius:5px;background:lime;border:4px inset;width:80px" id="autoButton">Auto</button></td></tr>
<tr>
<td>
<svg id="autoManualSVG" width="190" height="40"><g class="slider" transform="translate(15 20)"><line class="track" x1="0" x2="160"/><line class="track-inset" x1="0" x2="160"/><g class="ticks" transform="translate(0,18)"><text x="0" text-anchor="middle">0%</text><text x="32" text-anchor="middle">20%</text><text x="64" text-anchor="middle">40%</text><text x="96" text-anchor="middle">60%</text><text x="128" text-anchor="middle">80%</text><text x="160" text-anchor="middle">100%</text></g><circle id="dragHandle" cx="75" class="handle" fill="white" r="9"/><line class="track-overlay" x1="0" x2="160" /></g></svg>
</td>
</tr>
<tr><td align=right><button style='border-radius:5px;background:darkorange;border:4px outset;width:80px' id="manualButton">Manual</button> <input id="signalOutValue" style='border:inset 3px;font-size:110%;text-align:center;font-weight:bold;color:lime;background:black;width:100px' value="50%" type="text" /></td></tr>
</table>
</div>
</foreignObject>
</svg>
</center>
</body>
</html>