forked from FRCDashboard/FRCDashboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (69 loc) · 2.83 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FRC Dashboard</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Clock that shows up in top left -->
<div id="timer">2:15</div>
<header>
<!-- Tells whether robot is connected to dashboard. -->
<div id="robot-state">Unknown state</div>
<button id="tuning-button">Tuning</button>
</header>
<!-- You'll need to mess around with the CSS of #camera (found in css/style.css) to get it to work.
More explanation in that CSS rule. -->
<div id="camera"></div>
<div id="tuning" style="display: none;">
<input type="text" placeholder="Property" id="name">
<input type="text" placeholder="Value" id="value">
<button id="set">Set</button>
<button id="get">Get</button>
</div>
<!-- The main body of the dashboard, by default contains the gyro monitor and the robot diagram -->
<article>
<!-- Gyroscope -->
<svg id="gyro">
<circle cx="85" cy="85" r="83" />
<circle cx="85" cy="85" r="50" />
<rect id="gyro-arm" x="80" y="5" width="10" height="80" />
<text id="gyro-number" x="90" y="115">0º</text>
</svg>
<!-- Example robot diagram, arm moves when encoder value changes -->
<svg id="robot-diagram" width="332" height="450">
<text x="40" y="340">Example SVG Robot Diagram</text>
<rect x="75" y="360" width="230" height="40" />
<rect x="85" y="370" width="210" height="40" />
<rect id="robot-arm" x="5" y="375" width="80" height="10" />
<circle cx="100" cy="410" r="25" />
<circle cx="260" cy="410" r="25" />
<rect x="60" y="380" width="250" height="30" />
<text x="185" y="405" id="team" text-anchor="middle">####</text>
</svg>
</article>
<!-- The sidebar of the dashboard. Designed for smaller control elements like selection boxes and small buttons. -->
<aside>
<!-- Example button which toggles /SmartDashboard/exampleValue NetworkTables value.
The <p> below then says the value. -->
<div id="example-section">
<button id="example-button">Change example value</button>
<p id="example-readout">Value is undefined</p>
</div>
<!-- Autonomous selector -->
<div class="select-container">
<select id="auto-select">
<option>No auto modes found</option>
<!-- This gets populated by JS -->
</select>
</div>
<div>
<p>Adjust arm height</p>
<input id="arm-position" type="range" min="0" max="1200" value="770">
</div>
</aside>
<script src="/networktables/networktables.js"></script>
<script src="ui.js"></script>
</body>
</html>