-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (88 loc) · 4.22 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
<!DOCTYPE html>
<html>
<head>
<title>Speedometer</title>
<!-- UI Styling -->
<link href="styles/ui-dark.css" rel="stylesheet" />
<link href="styles/custom.css" rel="stylesheet" />
<!-- Libraries and source code -->
<script src="js/lib/base.min.js"></script>
<script src="js/lib/ui.min.js"></script>
<script src="js/lib/vue.min.js"></script>
<script src="js/lib/gauge.min.js"></script>
</head>
<body class="win-type-body">
<canvas id="speedo"
data-type="radial-gauge"
data-width="355"
data-height="355"
data-units="Km/h"
data-min-value="0"
data-start-angle="90"
data-ticks-angle="180"
data-value-box="false"
v-bind:data-value="speed"
data-max-value="220"
data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
data-minor-ticks="2"
data-stroke-ticks="true"
data-highlights="[{"from": 100, "to": 120, "color": "rgba(255, 127, 0, .75)"}]"
data-color-plate="#000"
data-color-units="#efefef"
data-color-minor-ticks="#d3d3d3"
data-color-major-ticks="#efefef"
data-color-numbers="#efefef"
data-border-shadow-width="0"
data-borders="false"
data-needle-type="arrow"
data-needle-width="2"
data-needle-circle-size="7"
data-needle-circle-outer="true"
data-needle-circle-inner="false"
data-animation-duration="300"
data-animation-rule="linear"
width="355"
height="355"
style="width: 355px; height: 355px;"></canvas>
<canvas id="compass"
data-type="radial-gauge"
data-min-value="0"
data-max-value="360"
v-bind:data-value="heading"
data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
data-minor-ticks="22"
data-ticks-angle="360"
data-start-angle="180"
data-stroke-ticks="false"
data-highlights="false"
data-color-plate="#222"
data-color-major-ticks="#f5f5f5"
data-color-minor-ticks="#ddd"
data-color-numbers="#ccc"
data-color-needle="rgba(200, 50, 50, 1)"
data-color-needle-end="rgba(200, 50, 50, .9)"
data-value-box="false"
data-value-text-shadow="false"
data-color-circle-inner="#fff"
data-color-needle-circle-outer="#ccc"
data-needle-circle-size="15"
data-needle-circle-outer="false"
data-animation-rule="linear"
data-needle-type="line"
data-needle-start="75"
data-needle-end="99"
data-needle-width="3"
data-borders="true"
data-border-inner-width="0"
data-border-middle-width="0"
data-border-outer-width="10"
data-color-border-outer="#ccc"
data-color-border-outer-end="#ccc"
data-color-needle-shadow-down="#222"
data-border-shadow-width="0"
data-animation-duration="300"
width="150" height="150"
style="width: 150px; height: 150px;"></canvas>
<script src="js/src/app.js"></script>
</body>
</html>