-
Notifications
You must be signed in to change notification settings - Fork 7
/
SDK-Depth-REST-Example-V1.html
113 lines (90 loc) · 2.59 KB
/
SDK-Depth-REST-Example-V1.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
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Depth Gauge</title>
<meta name="viewport" content="width=device-width">
<style>
.container {
width: 640px;
margin: 0 auto;
text-align: center;
}
.gauge {
width: 640px;
height: 640px;
}
a:link.button,
a:active.button,
a:visited.button,
a:hover.button {
margin: 30px 5px 0 2px;
padding: 7px 13px;
}
</style>
<script src="depthLibrary/raphael-2.1.4.min.js"></script>
<script src="depthLibrary/justgage.js"></script>
<script>
// Start by defining the depth gauge "dg1"
document.addEventListener("DOMContentLoaded", function(event) {
var dg1 = new JustGage({
id: "dg1",
value : 0,
min: 0,
max: 100,
decimals: 1,
title: "Depth",
label: "Meters",
gaugeWidthScale: 0.6,
customSectors: [{
color : "#ff0000",
lo : 0,
hi : 10
},{
color : "#00ff00",
lo : 10,
hi : 100
}],
counter: true
});
// Refresh the guage reading every second
setInterval(function() {
dg1.refresh(depthForGauge);
}, 1000);
});
</script>
<script>
// First ask user what Address iKommunicate has or address of another server
var addr = prompt("Please enter iKommunicate or Server Address", "i.e. 192.168.1.20 or demo.signalk.org");
// Ideally you would get the IP address automatically using Bonjour/mDNS
// Define the global variables
var dataDiv = document.getElementById('data');
var depthForGauge = 0;
function updateDisplay(event) {
// Convert the JSON Message in to an Object
var depthRaw = JSON.parse(event.target.responseText);
// Extract the Depth Value you want i.e. change belowKeel to belowSurface or belowTransducer
var depth = depthRaw.belowKeel.value;
// Reduce the number resolution to 3 places i.e. 0.01 to 999
depthForGauge = depth.toPrecision(3);
// Set a timer that triggers a new REST API call after 1 second
setTimeout(fetchDataFromRestApi, 1000);
}
//use the XTMLHttp set of commands to get the JSON Message of depth via a REST API call
function fetchDataFromRestApi() {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", updateDisplay);
// Build the URL from the addr the user entered and the Signal K branch you want to get
oReq.open("GET", "http://" + addr + "/signalk/v1/api/vessels/self/environment/depth");
oReq.send();
}
fetchDataFromRestApi();
</script>
</head>
<body>
<div class="container">
<div id="dg1" class="gauge"></div>
<p id="dg1_text">0-10 is red, 11-100 is Green</p>
</div>
</body>
</html>