forked from SignalK/sailgauge
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (111 loc) · 3.48 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
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sailgauge</title>
<script src="dist/sailgauge.js"></script>
<script src="/signalk/v1/stream/primus.js"></script>
</head>
<style>
html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100%;
background-image: linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -o-linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -moz-linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -ms-linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(87,87,87)),
color-stop(0.5, rgb(0,0,0))
);
}
circle.perimeter {
fill: none;
stroke-dasharray: none;
stroke: white;
stroke-width:8;
}
.axis line,
.axis circle {
fill: none;
stroke: white;
stroke-dasharray: 2, 1;
}
.s1 {
background-image: linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -o-linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -moz-linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -ms-linear-gradient(bottom, rgb(87,87,87) 9%, rgb(0,0,0) 50%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.09, rgb(87,87,87)),
color-stop(0.5, rgb(0,0,0))
);
}
.s1 .rose{stroke:#A61511;fill:lightgrey}
.s1 .rose .text{stroke:#A61511;fill:#A61511}
.s1 .apparentwind{fill:lightblue;stroke:white}
.s1 .apparentwind .text{stroke:black}
.s1 .truewind{fill:lightgreen;stroke:white}
.s1 .truewind .text{stroke:black}
.s1 .positivegaugetext {stroke:#FF928F;fill:#FF928F}
.s1 .negativegaugetext {stroke:#A61511;fill:#A61511}
.s1 .sparkline {stroke:#FF928F}
.s1 circle.perimeter { stroke: #333;}
.s1 .legend {fill:white;stroke:white;font-size: 2.5em;}
.s1 .table {color:white}
.sp {
}
.sp .rose {stroke:#A63400;fill:#679fd2}
.sp .rose .text{stroke:#A63400;fill:#A63400}
.sp .apparentwind{fill:#043a6b;stroke:white}
.sp .apparentwind .text{stroke:white;fill:white}
.sp .truewind{fill:#679fd2;stroke:black}
.sp .truewind .text{stroke:black;fill:black}
.sp .positivegaugetext {stroke:#679fd2;fill:#679fd2}
.sp .sparkline {stroke:#679fd2}
.sp .boat {fill:#26537c}
.sp .mark {fill:none;stroke:#FF0000;stroke-width:8}
.sp .marktext {fill:black;stroke:black}
</style>
<body >
<div id="sailgauge" class="sp"></div>
</body>
<script>
var sailgauge = new SailGauge();
var dispatch = sailgauge.init('#sailgauge',800);
var theUrl = "ws://" + window.location.host + "/signalk/stream/v1?stream=delta";
var selfMatcher = function() {
return true;
}
function handleDelta(delta){
if (selfMatcher(delta) && delta.updates) {
delta.updates.forEach(function(update){
update.values.forEach(function(value) {
dispatch(value);
});
});
}
}
var signalk = new SignalK.Client();
signalk.connectDelta(
window.location.host,
handleDelta,
onConnect,
console.log
)
function onConnect() {
signalk.getSelfMatcher(window.location.host)
.then(function(matcher) {
selfMatcher = matcher;
});
}
</script>
</html>