Skip to content

Commit 89b3ffe

Browse files
jtguggedaljtguggedal
committed
Add nRF91 demo
1 parent 004058f commit 89b3ffe

8 files changed

+2904
-0
lines changed

‎nrf91-demo/backdoor.html

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>nRF91 Seek & Find</title>
5+
<meta name="viewport" content="initial-scale=1.0">
6+
<meta charset="utf-8">
7+
<link rel="icon" type="image/ico" href="img/favicon.ico">
8+
9+
<style>
10+
/* Always set the map height explicitly to define the size of the div
11+
* element that contains the map. */
12+
#map {
13+
height: 100%;
14+
}
15+
.center {
16+
margin: 0;
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
transform: translate(-50%, -50%);
21+
}
22+
.text-center {
23+
text-align: center;
24+
padding-left: 10px;
25+
padding-right: 10px;
26+
}
27+
.text-title {
28+
font-size: 2.9em; /* 40px/16=2.5em */
29+
font-weight: bold;
30+
color: #00abd1;
31+
}
32+
.image-margin {
33+
margin-top: 50px;
34+
margin-left: auto;
35+
margin-right: auto;
36+
}
37+
38+
/* Optional: Makes the sample page fill the window. */
39+
html, body {
40+
height: 100%;
41+
margin: 0;
42+
padding: 0;
43+
font-family: monospace;
44+
font-size: 120%;
45+
font-weight: 500;
46+
}
47+
48+
#waiting {
49+
display: none;
50+
}
51+
52+
#active {
53+
display: block;
54+
}
55+
56+
.normal-font {
57+
font-size: 16px;
58+
font-weight: normal;
59+
}
60+
61+
62+
</style>
63+
</head>
64+
<body>
65+
<div id="waiting" class="center text-center">
66+
<p class="text-center text-title">SEEK &amp; FIND</p>
67+
<p class="text-center">Please talk to the guys in the light blue shirts about how to join.</p>
68+
<p class="text-center">This game is made for Maker Faire 2018 in Trondheim. It demonstrates cellular IoT with a nRF91 DK connected to the Telia NB-IoT network.</p>
69+
<div id="connectionStatus" class="text-center normal-font">CONNECTING...</div>
70+
<img src="img/nordic.gif" class="image-margin">
71+
</div>
72+
<div id="map"></div>
73+
<script>
74+
var waiting = document.getElementById("waiting");
75+
var active = document.getElementById("map");
76+
var connectionStatus = document.getElementById("connectionStatus");
77+
var map;
78+
79+
function initMap() {
80+
map = new google.maps.Map(document.getElementById('map'), {
81+
center: {lat: 63.4303487, lng: 10.397108},
82+
zoom: 18.25
83+
});
84+
85+
//marker = new google.maps.Marker({position: {lat: 63.4303487, lng: 10.397108}, map: map});
86+
circle = new google.maps.Circle({
87+
center: {lat: 63.4303487, lng: 10.397108},
88+
map: map,
89+
radius: 15,
90+
strokeColor: '#068ea7',
91+
strokeOpacity: 0.8,
92+
strokeWeight: 2,
93+
fillColor: '#0bd3f7',
94+
fillOpacity: 0.65
95+
});
96+
}
97+
98+
</script>
99+
<script src="js/paho-mqtt.js" type="text/javascript"></script>
100+
<script src="js/nrf91-paho-mqtt-client-backdoor.js" type="text/javascript"></script>
101+
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJ8jSOHKmgfnPQo9HR9e1Z_WNrA0LyubQ&callback=initMap"
102+
async defer></script>
103+
</body>
104+
</html>

‎nrf91-demo/img/favicon.ico

26.1 KB
Binary file not shown.

‎nrf91-demo/img/nordic.gif

7.62 KB
Loading

‎nrf91-demo/index.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>nRF91 Seek & Find</title>
5+
<meta name="viewport" content="initial-scale=1.0">
6+
<meta charset="utf-8">
7+
<link rel="icon" type="image/ico" href="img/favicon.ico">
8+
9+
<style>
10+
/* Always set the map height explicitly to define the size of the div
11+
* element that contains the map. */
12+
#map {
13+
height: 100%;
14+
}
15+
.center {
16+
margin: 0;
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
transform: translate(-50%, -50%);
21+
}
22+
.text-center {
23+
text-align: center;
24+
padding-left: 10px;
25+
padding-right: 10px;
26+
}
27+
.text-title {
28+
font-size: 2.9em; /* 40px/16=2.5em */
29+
font-weight: bold;
30+
color: #00abd1;
31+
}
32+
.image-margin {
33+
margin-top: 50px;
34+
margin-left: auto;
35+
margin-right: auto;
36+
}
37+
38+
/* Optional: Makes the sample page fill the window. */
39+
html, body {
40+
height: 100%;
41+
margin: 0;
42+
padding: 0;
43+
font-family: monospace;
44+
font-size: 120%;
45+
font-weight: 500;
46+
}
47+
48+
#waiting {
49+
display: block;
50+
}
51+
52+
#active {
53+
display: none;
54+
}
55+
56+
.normal-font {
57+
font-size: 16px;
58+
font-weight: normal;
59+
}
60+
61+
62+
</style>
63+
</head>
64+
<body>
65+
<div id="waiting" class="center text-center">
66+
<p class="text-center text-title">SEEK &amp; FIND</p>
67+
<p class="text-center">Please talk to the guys in the light blue shirts about how to join.</p>
68+
<p class="text-center">This game is made for Maker Faire 2018 in Trondheim. It demonstrates cellular IoT with a nRF91 DK connected to the Telia NB-IoT network.</p>
69+
<div id="connectionStatus" class="text-center normal-font">CONNECTING...</div>
70+
<img src="img/nordic.gif" class="image-margin">
71+
</div>
72+
<div id="map"></div>
73+
<script>
74+
var waiting = document.getElementById("waiting");
75+
var active = document.getElementById("map");
76+
var connectionStatus = document.getElementById("connectionStatus");
77+
var map;
78+
79+
80+
function initMap() {
81+
map = new google.maps.Map(document.getElementById('map'), {
82+
center: {lat: 63.4303487, lng: 10.397108},
83+
zoom: 18.25
84+
});
85+
active.style.display = "none";
86+
87+
//marker = new google.maps.Marker({position: {lat: 63.4303487, lng: 10.397108}, map: map});
88+
circle = new google.maps.Circle({
89+
center: {lat: 63.4303487, lng: 10.397108},
90+
map: map,
91+
radius: 15,
92+
strokeColor: '#068ea7',
93+
strokeOpacity: 0.8,
94+
strokeWeight: 2,
95+
fillColor: '#0bd3f7',
96+
fillOpacity: 0.65,});
97+
}
98+
99+
</script>
100+
<script src="js/paho-mqtt.js" type="text/javascript"></script>
101+
<script src="js/nrf91-paho-mqtt-client.js?2" type="text/javascript"></script>
102+
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJ8jSOHKmgfnPQo9HR9e1Z_WNrA0LyubQ&callback=initMap"
103+
async defer></script>
104+
</body>
105+
</html>

‎nrf91-demo/js/nrf91-paho-mqtt-client-backdoor.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
var random = Math.floor(Math.random() * 1000001); // returns a random integer from 0 to 1000.000
2+
// Create a client instance
3+
var client = new Paho.MQTT.Client('5.189.130.26', Number(1897), random.toString());
4+
5+
// set callback handlers
6+
client.onConnectionLost = onConnectionLost;
7+
client.onMessageArrived = onMessageArrived;
8+
9+
// connect the client
10+
client.connect({
11+
onSuccess:onConnect
12+
});
13+
14+
15+
// called when the client connects
16+
function onConnect() {
17+
// Once a connection has been made, make a subscription and send a message.
18+
console.log("Connected to WebSocket");
19+
client.subscribe("publish/plain");
20+
message = new Paho.MQTT.Message("Ping");
21+
message.destinationName = "publish/plain";
22+
client.send(message);
23+
client.subscribe("maker_faire/switch");
24+
client.subscribe("maker_faire/gps");
25+
connectionStatus.innerHTML = "CONNECTED as " + random;
26+
}
27+
28+
// called when the client loses its connection
29+
function onConnectionLost(responseObject) {
30+
if (responseObject.errorCode !== 0) {
31+
console.log("onConnectionLost:" + responseObject.errorMessage);
32+
alert("WebSocket connection lost. "+responseObject.errorMessage);
33+
connectionStatus.innerHTML = "CONNECTION LOST";
34+
}
35+
}
36+
37+
// called when a message arrives
38+
function onMessageArrived(message) {
39+
console.log("Message Arrived: " + message.payloadString);
40+
console.log("Topic: " + message.destinationName);
41+
console.log("..")
42+
43+
if(message.destinationName === "maker_faire/gps")
44+
{
45+
const nmeaString = message.payloadString;
46+
if (nmeaString.split(",")[2].length > 0) {
47+
const latLng = parseNmeaString(nmeaString);
48+
updateMap(latLng);
49+
}
50+
}
51+
}
52+
53+
function updateMap(latLng) {
54+
circle.setCenter(new google.maps.LatLng(latLng));
55+
map.setCenter(latLng);
56+
}
57+
58+
function parseNmeaString(str) {
59+
const gpsData = str.split(",");
60+
console.log(gpsData);
61+
62+
const gpsLat = gpsData[2];
63+
const gpsLatDeg = parseInt(gpsLat.substring(0, 2));
64+
const gpsLatMins = (parseFloat(gpsLat.substring(2))) / 60;
65+
console.log(gpsLatMins)
66+
67+
68+
const gpsLatitude = gpsLatDeg + gpsLatMins;
69+
70+
const gpsLong = gpsData[4];
71+
const gpsLongDeg = parseInt(gpsLong.substring(1, 3));
72+
const gpsLongMins = (parseFloat(gpsLong.substring(3))) / 60;
73+
74+
gpsLongitude = gpsLongDeg + gpsLongMins;
75+
76+
return {
77+
lat: gpsLatitude,
78+
lng: gpsLongitude
79+
};
80+
}

‎nrf91-demo/js/nrf91-paho-mqtt-client.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
var random = Math.floor(Math.random() * 1000001); // returns a random integer from 0 to 1000.000
2+
// Create a client instance
3+
var client = new Paho.MQTT.Client('5.189.130.26', Number(1897), random.toString());
4+
5+
// set callback handlers
6+
client.onConnectionLost = onConnectionLost;
7+
client.onMessageArrived = onMessageArrived;
8+
9+
// connect the client
10+
client.connect({
11+
onSuccess:onConnect
12+
});
13+
14+
15+
// called when the client connects
16+
function onConnect() {
17+
// Once a connection has been made, make a subscription and send a message.
18+
console.log("Connected to WebSocket");
19+
client.subscribe("publish/plain");
20+
message = new Paho.MQTT.Message("Ping");
21+
message.destinationName = "publish/plain";
22+
client.send(message);
23+
client.subscribe("maker_faire/switch");
24+
client.subscribe("maker_faire/gps");
25+
connectionStatus.innerHTML = "CONNECTED as " + random;
26+
}
27+
28+
// called when the client loses its connection
29+
function onConnectionLost(responseObject) {
30+
if (responseObject.errorCode !== 0) {
31+
console.log("onConnectionLost:" + responseObject.errorMessage);
32+
alert("WebSocket connection lost. "+responseObject.errorMessage);
33+
connectionStatus.innerHTML = "CONNECTION LOST";
34+
}
35+
}
36+
37+
// called when a message arrives
38+
function onMessageArrived(message) {
39+
console.log("Message Arrived: " + message.payloadString);
40+
console.log("Topic: " + message.destinationName);
41+
console.log("..")
42+
43+
if(message.destinationName === "maker_faire/gps")
44+
{
45+
const nmeaString = message.payloadString;
46+
if (nmeaString.split(",")[2].length > 0) {
47+
const latLng = parseNmeaString(nmeaString);
48+
updateMap(latLng);
49+
}
50+
}
51+
52+
if ((message.destinationName === "maker_faire/switch") && (message.payloadString === "1"))
53+
{
54+
waiting.style.display = 'none';
55+
active.style.display = 'block';
56+
57+
}
58+
else if ((message.destinationName === "maker_faire/switch") && (message.payloadString === "0")) {
59+
waiting.style.display = 'block';
60+
active.style.display = 'none';
61+
}
62+
}
63+
64+
function updateMap(latLng) {
65+
circle.setCenter(new google.maps.LatLng(latLng));
66+
map.setCenter(latLng);
67+
}
68+
69+
function parseNmeaString(str) {
70+
const gpsData = str.split(",");
71+
console.log(gpsData);
72+
73+
const gpsLat = gpsData[2];
74+
const gpsLatDeg = parseInt(gpsLat.substring(0, 2));
75+
const gpsLatMins = (parseFloat(gpsLat.substring(2))) / 60;
76+
console.log(gpsLatMins)
77+
78+
79+
const gpsLatitude = gpsLatDeg + gpsLatMins;
80+
81+
const gpsLong = gpsData[4];
82+
const gpsLongDeg = parseInt(gpsLong.substring(1, 3));
83+
const gpsLongMins = (parseFloat(gpsLong.substring(3))) / 60;
84+
85+
gpsLongitude = gpsLongDeg + gpsLongMins;
86+
87+
return {
88+
lat: gpsLatitude,
89+
lng: gpsLongitude
90+
};
91+
}

0 commit comments

Comments
 (0)