https://operame.nl/api.php?action=feedcontributions&user=Kamiel&feedformat=atomOperame - User contributions [en]2024-03-28T23:59:14ZUser contributionsMediaWiki 1.35.0https://operame.nl/index.php?title=Webbased_dashboard&diff=310Webbased dashboard2021-01-16T09:10:58Z<p>Kamiel: /* Een eenvoudig Operame MQTT web-dashboard maken */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
[[File:MQTTbasic.png|center|600px|de basis dataflow in MQTT]]<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br><br />
<br />
==Stappenplan==<br />
[[File:Operame-web.png|thumb|400px|Het eindresultaat]]<br />
*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam<br />
*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
*Pas de topic naam aan (zie beneden) in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld<br />
*Open de aangepaste HTML file in een browser door 'File/Open bestand'<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De MQTT-topic data van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=309Webbased dashboard2021-01-16T09:10:07Z<p>Kamiel: /* Stappenplan */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br><br />
<br />
==Stappenplan==<br />
[[File:Operame-web.png|thumb|400px|Het eindresultaat]]<br />
*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam<br />
*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
*Pas de topic naam aan (zie beneden) in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld<br />
*Open de aangepaste HTML file in een browser door 'File/Open bestand'<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De MQTT-topic data van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=308Webbased dashboard2021-01-16T09:09:51Z<p>Kamiel: /* Een eenvoudig Operame MQTT web-dashboard maken */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br><br />
<br />
==Stappenplan==<br />
<br />
*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam<br />
*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
*Pas de topic naam aan (zie beneden) in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld<br />
*Open de aangepaste HTML file in een browser door 'File/Open bestand'<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De MQTT-topic data van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=307Webbased dashboard2021-01-16T09:09:11Z<p>Kamiel: /* Stappenplan */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br><br />
<br />
==Stappenplan==<br />
<br />
*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam<br />
*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
*Pas de topic naam aan (zie beneden) in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld<br />
*Open de aangepaste HTML file in een browser door 'File/Open bestand'<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De MQTT-topic data van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=306Webbased dashboard2021-01-16T09:03:54Z<p>Kamiel: </p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br><br />
<br />
==Stappenplan==<br />
<br />
*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam<br />
*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
*Pas de topic naam aan in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld<br />
*Open de aangepaste HTML file in een browser door 'File/Open bestand'<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De MQTT-topic data van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=305Webbased dashboard2021-01-16T09:02:59Z<p>Kamiel: /* STappenplan */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Stappenplan==<br />
<br />
*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam<br />
*Download de code<br />
*Pas de topic naam aan in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld<br />
*Open de aangepaste HTML file in een browser door 'File/Open bestand'<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De MQTT-topic data van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=304Webbased dashboard2021-01-16T09:02:50Z<p>Kamiel: </p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==STappenplan==<br />
<br />
*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam<br />
*Download de code<br />
*Pas de topic naam aan in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld<br />
*Open de aangepaste HTML file in een browser door 'File/Open bestand'<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De MQTT-topic data van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=303Webbased dashboard2021-01-16T08:59:49Z<p>Kamiel: /* Output parsing */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De MQTT-topic data van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=302Webbased dashboard2021-01-16T08:59:02Z<p>Kamiel: /* Topic naam */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=301Webbased dashboard2021-01-16T08:57:31Z<p>Kamiel: /* Topic Naam */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=300Webbased dashboard2021-01-16T08:57:16Z<p>Kamiel: /* Topic selectie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic Naam===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=299Webbased dashboard2021-01-16T08:56:28Z<p>Kamiel: /* Topic selectie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier als voorbeeld "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=298Webbased dashboard2021-01-16T08:54:48Z<p>Kamiel: /* De Subscribe-client (een Javascripted webpagina) */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de Subscribe-client niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=297Webbased dashboard2021-01-16T08:54:23Z<p>Kamiel: /* De Subscribe-client (een Javascripted webpagina) */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald Topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=296Webbased dashboard2021-01-16T08:53:57Z<p>Kamiel: /* De Subscribe-ing client (een Javascripted webpagina) */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=295Webbased dashboard2021-01-16T08:53:35Z<p>Kamiel: /* De broker */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dit een snelle en eenvoudige oplossing. We passen in deze handleiding een openbare broker toe. <br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de rest van de instellingen default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=294Webbased dashboard2021-01-16T08:52:04Z<p>Kamiel: /* De publishing client (oftewel de Sensor). */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber HTML code aangepast worden)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=293Webbased dashboard2021-01-16T08:50:51Z<p>Kamiel: /* De publishing client (oftewel de Sensor). */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plug van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=MQTT&diff=292MQTT2021-01-16T08:49:41Z<p>Kamiel: </p>
<hr />
<div>Het Operame sensorbord heeft de mogelijkheid om gemeten waarden periodiek te versturen. Dit is een voorziening die het mogelijk maakt om de gemeten CO2 waarden te verzamelen in een database of realtime zichtbaar te maken op een (web)dashboard. <br />
<br />
Het transportsysteem dat voor het vervoer van sensor naar database of dashboard gebruikt wordt heet MQTT (een acroniem voor MQ Telemetry Transport). MQTT is een ideaal voor communicatie tussen kleine, data genererende, beperkt intelligente apparaten en de vele ‘geïnteresseerden’ die de data ‘afnemen’. Zowel ‘aanbieders’ als ‘afnemers’ van data noemen we in MQTT ‘clients’ aangegeven hieronder met de blauwe vierkantjes.<br />
<br />
[[File:MQTTbasic.png|center|600px|de basis dataflow in MQTT]]<br />
<br />
Omdat er vele data genererende sensors kunnen zijn en er meestal ook vele ‘afnemers’ zijn, zou het aantal verbindingen enorm oplopen als deze 1 op 1 verbonden zouden zijn. Om dit te voorkomen heeft MQTT een middenlaag; de broker, hierboven aangegeven door de ronde vorm. <br />Simpelweg komt het er op het volgende neer:<br />
<br />
*Een sensor (die noemen we vanaf nu de Publisher Client) meldt zich bij de broker en zegt ‘onder deze naam ga ik de komende tijd data aanbieden, succes ermee’. De naam waaronder hij zijn data gaat inleveren noemen we het ‘Topic’. Verder merken we op dat de Publisher-client maar 1 connectie heeft te onderhouden (nl met de broker) ongeacht waar de data uiteindelijk uitkomt of nodig is.<br />
*Een of meer afnemers (dashboard, loggende database etc), die we ‘Subscriber client’ noemen, melden zich bij de broker en zegt/zeggen ‘ik wil graag een ‘abonnement’ op dit specifieke ‘Topic’. Vanaf dat moment zal de broker elke keer als er nieuwe data is binnen dit topic deze aan alle ‘geabonneerden’ meedelen.<br />
<br /><br />
<br />
[[File:MQTT-nobroker.png|thumb||center|600px|Onwerkbaar veel verbindingen zonder broker]]<br />
<br />
<br /><br />
Verder merken we op dat door de toevoeging van de broker zowel de Publisher client als de ‘subscriber client’ maar 1 connectie heeft te onderhouden (nl met de broker) ongeacht het aantal sensoren of het aantal plaatsen waar de data uiteindelijk nodig is. <br />
<br /><br />
<br />
[[File:MQTT-withbroker.png||thumb|center|600px|Minder verbinding te administreren met een MQTT broker]]<br />
<br />
Klik hier om met MQTT je eigen [[webbased dashboard]] maken</div>Kamielhttps://operame.nl/index.php?title=Handleiding_voor_gevorderden&diff=291Handleiding voor gevorderden2021-01-16T08:46:52Z<p>Kamiel: /* Privacy */</p>
<hr />
<div><br />
<br />
== Met MQT en HTML een Dashboard maken ==<br />
<br />
[[File:Operame-web.png|thumb|Het eindresultaat]]<br />
Operame heeft WiFi (staat standaard uit) en ondersteuning voor [[MQTT]] (staat ook standaard uit), en daarmee kun je de CO2-meter periodiek de waarden laten versturen naar een server. Je zou dat bijvoorbeeld kunnen gebruiken om grafieken te maken van alle lokalen, om centraal te monitoren waar de ventilatie nog verbeterd moet worden. In deze handleiding leggen we je uit hoe [[MQTT]] werkt en hoe je een [[webbased dashboard]] kunt maken om meerde Operame's gelijktijdig en live kunt monitoren.<br />
<br />
== Overwegingen ==<br />
<br />
=== Privacy ===<br />
Aan de CO2-waarde kun je zien of er iemand aanwezig is. In een ruimte die langdurig leeg is, maar die nog wel (een beetje) ventilatie heeft, zal de CO2 uiteindelijk weer op het basisniveau van rond de 420 PPM uitkomen. Daalt het CO2-niveau sneller, dan staat er waarschijnlijk een raam open. Omgekeerd zou men de conclusie kunnen trekken dat bij stijgende CO2 waarden het lokaal 'bevolkt' is en de ramen dicht staan. Dit is allemaal misschien geen probleem om te monitoren voor een klaslokaal, maar het is goed om er even bij stil te staan.<br />
<br />
In de MQTT voorbeelden worden publieke brokers gebuikt waarmee de gemeten resultaten defacto openbaar zijn. Meestal geen issue maar toch.<br />
<br />
=== Beveiliging ===<br />
IoT staat voor Internet of Things. Operame is een typisch (onveilig) IoT-apparaat en stuurt de CO2-meetwaarden zonder versleuteling naar de MQTT-server. Het ondersteunt ook geen authenticatie op de MQTT broker. Daarom staat deze functionaliteit standaard uitgeschakeld. Wil je deze dingen beveiligen, dan zal dat op netwerkniveau moeten, met bijvoorbeeld een apart WiFi-netwerk, client isolation, en een firewall. Ook hier geldt dat het misschien niet zo'n ramp is als iemand je meetwaarden kan zien of verstoren, maar dat het wel goed is om er even bij stil te staan.</div>Kamielhttps://operame.nl/index.php?title=Handleiding_voor_gevorderden&diff=290Handleiding voor gevorderden2021-01-16T08:44:38Z<p>Kamiel: /* Privacy */</p>
<hr />
<div><br />
<br />
== Met MQT en HTML een Dashboard maken ==<br />
<br />
[[File:Operame-web.png|thumb|Het eindresultaat]]<br />
Operame heeft WiFi (staat standaard uit) en ondersteuning voor [[MQTT]] (staat ook standaard uit), en daarmee kun je de CO2-meter periodiek de waarden laten versturen naar een server. Je zou dat bijvoorbeeld kunnen gebruiken om grafieken te maken van alle lokalen, om centraal te monitoren waar de ventilatie nog verbeterd moet worden. In deze handleiding leggen we je uit hoe [[MQTT]] werkt en hoe je een [[webbased dashboard]] kunt maken om meerde Operame's gelijktijdig en live kunt monitoren.<br />
<br />
== Overwegingen ==<br />
<br />
=== Privacy ===<br />
Aan de CO2-waarde kun je zien of er iemand aanwezig is. In een ruimte die langdurig leeg is, maar die nog wel (een beetje) ventilatie heeft, zal de CO2 namelijk uiteindelijk weer op het basisniveau van rond de 420 PPM uitkomen. Daalt het CO2-niveau sneller, dan staat er waarschijnlijk een raam open. Omgekeerd zou men de conclusie kunnen trekken dat bij stijgende CO2 waarden het lokaal 'bevolkt' is. Dit is allemaal misschien geen probleem om te monitoren voor een klaslokaal, maar het is goed om er even bij stil te staan.<br />
<br />
In de MQTT voorbeelden worden publieke brokers gebuikt waarmee de gemeten resultaten defacto openbaar zijn. Meestal geen issue maar toch.<br />
<br />
=== Beveiliging ===<br />
IoT staat voor Internet of Things. Operame is een typisch (onveilig) IoT-apparaat en stuurt de CO2-meetwaarden zonder versleuteling naar de MQTT-server. Het ondersteunt ook geen authenticatie op de MQTT broker. Daarom staat deze functionaliteit standaard uitgeschakeld. Wil je deze dingen beveiligen, dan zal dat op netwerkniveau moeten, met bijvoorbeeld een apart WiFi-netwerk, client isolation, en een firewall. Ook hier geldt dat het misschien niet zo'n ramp is als iemand je meetwaarden kan zien of verstoren, maar dat het wel goed is om er even bij stil te staan.</div>Kamielhttps://operame.nl/index.php?title=Handleiding_voor_gevorderden&diff=289Handleiding voor gevorderden2021-01-16T08:41:27Z<p>Kamiel: /* Met MQTT en een HTML Dashboard maken */</p>
<hr />
<div><br />
<br />
== Met MQT en HTML een Dashboard maken ==<br />
<br />
[[File:Operame-web.png|thumb|Het eindresultaat]]<br />
Operame heeft WiFi (staat standaard uit) en ondersteuning voor [[MQTT]] (staat ook standaard uit), en daarmee kun je de CO2-meter periodiek de waarden laten versturen naar een server. Je zou dat bijvoorbeeld kunnen gebruiken om grafieken te maken van alle lokalen, om centraal te monitoren waar de ventilatie nog verbeterd moet worden. In deze handleiding leggen we je uit hoe [[MQTT]] werkt en hoe je een [[webbased dashboard]] kunt maken om meerde Operame's gelijktijdig en live kunt monitoren.<br />
<br />
== Overwegingen ==<br />
<br />
=== Privacy ===<br />
Aan de CO2-waarde kun je zien of er iemand aanwezig is. In een ruimte die langdurig leeg is, maar die nog wel (een beetje) ventilatie heeft, zal de CO2 namelijk uiteindelijk weer op het basisniveau van rond de 420 PPM uitkomen. Daalt het CO2-niveau sneller, dan staat er waarschijnlijk een raam open. Dit is allemaal misschien geen probleem om te monitoren voor een klaslokaal, maar het is goed om er even bij stil te staan.<br />
<br />
In de MQTT voorbeelden worden publieke brokers gebuikt waarmee de gemeten resultaten defacto openbaar zijn. Meestal geen issue maar toch.<br />
<br />
=== Beveiliging ===<br />
IoT staat voor Internet of Things. Operame is een typisch (onveilig) IoT-apparaat en stuurt de CO2-meetwaarden zonder versleuteling naar de MQTT-server. Het ondersteunt ook geen authenticatie op de MQTT broker. Daarom staat deze functionaliteit standaard uitgeschakeld. Wil je deze dingen beveiligen, dan zal dat op netwerkniveau moeten, met bijvoorbeeld een apart WiFi-netwerk, client isolation, en een firewall. Ook hier geldt dat het misschien niet zo'n ramp is als iemand je meetwaarden kan zien of verstoren, maar dat het wel goed is om er even bij stil te staan.</div>Kamielhttps://operame.nl/index.php?title=Handleiding_voor_gevorderden&diff=288Handleiding voor gevorderden2021-01-16T08:40:33Z<p>Kamiel: /* Beveiliging */</p>
<hr />
<div><br />
<br />
== Met MQTT en een HTML Dashboard maken ==<br />
<br />
[[File:Operame-web.png|thumb|Het eindresultaat]]<br />
Operame heeft WiFi (staat standaard uit) en ondersteuning voor [[MQTT]] (staat ook standaard uit), en daarmee kun je de CO2-meter periodiek de waarden laten versturen naar een server. Je zou dat bijvoorbeeld kunnen gebruiken om grafieken te maken van alle lokalen, om centraal te monitoren waar de ventilatie nog verbeterd moet worden. In deze handleiding leggen we je uit hoe [[MQTT]] werkt en hoe je een [[webbased dashboard]] kunt maken om meerde Operame's gelijktijdig en live kunt monitoren.<br />
<br />
== Overwegingen ==<br />
<br />
=== Privacy ===<br />
Aan de CO2-waarde kun je zien of er iemand aanwezig is. In een ruimte die langdurig leeg is, maar die nog wel (een beetje) ventilatie heeft, zal de CO2 namelijk uiteindelijk weer op het basisniveau van rond de 420 PPM uitkomen. Daalt het CO2-niveau sneller, dan staat er waarschijnlijk een raam open. Dit is allemaal misschien geen probleem om te monitoren voor een klaslokaal, maar het is goed om er even bij stil te staan.<br />
<br />
In de MQTT voorbeelden worden publieke brokers gebuikt waarmee de gemeten resultaten defacto openbaar zijn. Meestal geen issue maar toch.<br />
<br />
=== Beveiliging ===<br />
IoT staat voor Internet of Things. Operame is een typisch (onveilig) IoT-apparaat en stuurt de CO2-meetwaarden zonder versleuteling naar de MQTT-server. Het ondersteunt ook geen authenticatie op de MQTT broker. Daarom staat deze functionaliteit standaard uitgeschakeld. Wil je deze dingen beveiligen, dan zal dat op netwerkniveau moeten, met bijvoorbeeld een apart WiFi-netwerk, client isolation, en een firewall. Ook hier geldt dat het misschien niet zo'n ramp is als iemand je meetwaarden kan zien of verstoren, maar dat het wel goed is om er even bij stil te staan.</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=287Webbased dashboard2021-01-15T14:54:01Z<p>Kamiel: /* Een eenvoudig Operame MQTT web-dashboard maken */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|400px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=286Webbased dashboard2021-01-15T14:53:45Z<p>Kamiel: /* Een eenvoudig Operame MQTT web-dashboard maken */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscribing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=285Webbased dashboard2021-01-15T14:52:46Z<p>Kamiel: </p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [[MQTT]] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=284Webbased dashboard2021-01-15T14:52:21Z<p>Kamiel: /* Een eenvoudig Operame MQTT web-dashboard maken */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de [MQTT] uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=283Webbased dashboard2021-01-15T14:51:26Z<p>Kamiel: /* De Subscribe-ing client (een Javascripted webpagina) */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hier te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=282Webbased dashboard2021-01-15T14:51:10Z<p>Kamiel: /* De publishing client (oftewel de Sensor). */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi aan boord (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriber code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=281Webbased dashboard2021-01-15T14:12:54Z<p>Kamiel: </p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Handleiding_voor_gevorderden&diff=280Handleiding voor gevorderden2021-01-15T14:12:14Z<p>Kamiel: /* Met MQTT en een HTML Dashboard maken */</p>
<hr />
<div><br />
<br />
== Met MQTT en een HTML Dashboard maken ==<br />
<br />
[[File:Operame-web.png|thumb|Het eindresultaat]]<br />
Operame heeft WiFi (staat standaard uit) en ondersteuning voor [[MQTT]] (staat ook standaard uit), en daarmee kun je de CO2-meter periodiek de waarden laten versturen naar een server. Je zou dat bijvoorbeeld kunnen gebruiken om grafieken te maken van alle lokalen, om centraal te monitoren waar de ventilatie nog verbeterd moet worden. In deze handleiding leggen we je uit hoe [[MQTT]] werkt en hoe je een [[webbased dashboard]] kunt maken om meerde Operame's gelijktijdig en live kunt monitoren.<br />
<br />
== Overwegingen ==<br />
<br />
=== Privacy ===<br />
Aan de CO2-waarde kun je zien of er iemand aanwezig is. In een ruimte die langdurig leeg is, maar die nog wel (een beetje) ventilatie heeft, zal de CO2 namelijk uiteindelijk weer op het basisniveau van rond de 420 PPM uitkomen. Daalt het CO2-niveau sneller, dan staat er waarschijnlijk een raam open. Dit is allemaal misschien geen probleem om te monitoren voor een klaslokaal, maar het is goed om er even bij stil te staan.<br />
<br />
In de MQTT voorbeelden worden publieke brokers gebuikt waarmee de gemeten resultaten defacto openbaar zijn. Meestal geen issue maar toch.<br />
<br />
=== Beveiliging ===<br />
IoT staat voor Internet of Things. De S in IoT staat voor Security. Operame is een typisch IoT-apparaat en stuurt de CO2-meetwaarden zonder versleuteling naar de MQTT-server. Het ondersteunt ook geen authenticatie op de MQTT broker. Daarom staat deze functionaliteit standaard uitgeschakeld. Wil je deze dingen beveiligen, dan zal dat op netwerkniveau moeten, met bijvoorbeeld een apart WiFi-netwerk, client isolation, en een firewall. Ook hier geldt dat het misschien niet zo'n ramp is als iemand je meetwaarden kan zien of verstoren, maar dat het wel goed is om er even bij stil te staan.</div>Kamielhttps://operame.nl/index.php?title=Handleiding_voor_gevorderden&diff=279Handleiding voor gevorderden2021-01-15T14:12:01Z<p>Kamiel: /* Met MQTT en een HTML Dashboard maken */</p>
<hr />
<div><br />
<br />
== Met MQTT en een HTML Dashboard maken ==<br />
<br />
[[File:Operame-web.png|thumb|Het eindresultaat]]<br />
Operame heeft WiFi (staat standaard uit) en ondersteuning voor [[MQTT]] (staat ook standaard uit), en daarmee kun je de CO2-meter periodiek de waarden laten versturen naar een server. Je zou dat bijvoorbeeld kunnen gebruiken om grafieken te maken van alle lokalen, om centraal te monitoren waar de ventilatie nog verbeterd moet worden. In deze handleiding leggen we je uit hoe [[MQTT]] werkt en hoe je een [[webbased dashboard]] kunt maken om meerde Operame gelijktijdig en live kunt monitoren.<br />
<br />
== Overwegingen ==<br />
<br />
=== Privacy ===<br />
Aan de CO2-waarde kun je zien of er iemand aanwezig is. In een ruimte die langdurig leeg is, maar die nog wel (een beetje) ventilatie heeft, zal de CO2 namelijk uiteindelijk weer op het basisniveau van rond de 420 PPM uitkomen. Daalt het CO2-niveau sneller, dan staat er waarschijnlijk een raam open. Dit is allemaal misschien geen probleem om te monitoren voor een klaslokaal, maar het is goed om er even bij stil te staan.<br />
<br />
In de MQTT voorbeelden worden publieke brokers gebuikt waarmee de gemeten resultaten defacto openbaar zijn. Meestal geen issue maar toch.<br />
<br />
=== Beveiliging ===<br />
IoT staat voor Internet of Things. De S in IoT staat voor Security. Operame is een typisch IoT-apparaat en stuurt de CO2-meetwaarden zonder versleuteling naar de MQTT-server. Het ondersteunt ook geen authenticatie op de MQTT broker. Daarom staat deze functionaliteit standaard uitgeschakeld. Wil je deze dingen beveiligen, dan zal dat op netwerkniveau moeten, met bijvoorbeeld een apart WiFi-netwerk, client isolation, en een firewall. Ook hier geldt dat het misschien niet zo'n ramp is als iemand je meetwaarden kan zien of verstoren, maar dat het wel goed is om er even bij stil te staan.</div>Kamielhttps://operame.nl/index.php?title=Handleiding_voor_gevorderden&diff=278Handleiding voor gevorderden2021-01-15T14:11:18Z<p>Kamiel: /* Met MQTT en HTML je eigen Dashboard maken */</p>
<hr />
<div><br />
<br />
== Met MQTT en een HTML Dashboard maken ==<br />
<br />
[[File:Operame-web.png|thumb|Het eindresultaat]]<br />
Operame heeft WiFi (staat standaard uit) en ondersteuning voor [[MQTT]] (staat ook standaard uit), en daarmee kun je de CO2-meter periodiek de waarden laten versturen naar een server. Je zou dat bijvoorbeeld kunnen gebruiken om grafieken te maken van alle lokalen, om centraal te monitoren waar de ventilatie nog verbeterd moet worden. In deze handleiding leggen we je uit hoe [[MQTT]] werkt en hoe je je eigen [[webbased dashboard]] kunt maken om meerde Operame gelijktijdig en live kunt monitoren.<br />
<br />
== Overwegingen ==<br />
<br />
=== Privacy ===<br />
Aan de CO2-waarde kun je zien of er iemand aanwezig is. In een ruimte die langdurig leeg is, maar die nog wel (een beetje) ventilatie heeft, zal de CO2 namelijk uiteindelijk weer op het basisniveau van rond de 420 PPM uitkomen. Daalt het CO2-niveau sneller, dan staat er waarschijnlijk een raam open. Dit is allemaal misschien geen probleem om te monitoren voor een klaslokaal, maar het is goed om er even bij stil te staan.<br />
<br />
In de MQTT voorbeelden worden publieke brokers gebuikt waarmee de gemeten resultaten defacto openbaar zijn. Meestal geen issue maar toch.<br />
<br />
=== Beveiliging ===<br />
IoT staat voor Internet of Things. De S in IoT staat voor Security. Operame is een typisch IoT-apparaat en stuurt de CO2-meetwaarden zonder versleuteling naar de MQTT-server. Het ondersteunt ook geen authenticatie op de MQTT broker. Daarom staat deze functionaliteit standaard uitgeschakeld. Wil je deze dingen beveiligen, dan zal dat op netwerkniveau moeten, met bijvoorbeeld een apart WiFi-netwerk, client isolation, en een firewall. Ook hier geldt dat het misschien niet zo'n ramp is als iemand je meetwaarden kan zien of verstoren, maar dat het wel goed is om er even bij stil te staan.</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=277Webbased dashboard2021-01-15T12:57:52Z<p>Kamiel: /* Topic selectie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze waarde (hier "operame-7cca2a") aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=276Webbased dashboard2021-01-15T12:57:06Z<p>Kamiel: /* Topic selectie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=275Webbased dashboard2021-01-15T12:56:55Z<p>Kamiel: /* Topic selectie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=274Webbased dashboard2021-01-15T12:56:45Z<p>Kamiel: /* Topic selectie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=273Webbased dashboard2021-01-15T12:56:37Z<p>Kamiel: /* Topic selectie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<br />
<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=272Webbased dashboard2021-01-15T12:56:17Z<p>Kamiel: /* Topic selectie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=271Webbased dashboard2021-01-15T12:54:18Z<p>Kamiel: /* De Subscribe-ing client (een Javascripted webpagina) */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br><br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=270Webbased dashboard2021-01-15T12:54:08Z<p>Kamiel: /* De Subscribe-ing client (een Javascripted webpagina) */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br>De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=269Webbased dashboard2021-01-15T12:53:55Z<p>Kamiel: /* De Subscribe-ing client (een Javascripted webpagina) */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=268Webbased dashboard2021-01-15T12:53:33Z<p>Kamiel: /* Verdere uitleg bij de code */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br />
==Verdere uitleg bij de code==<br />
<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=267Webbased dashboard2021-01-15T12:53:20Z<p>Kamiel: /* De Subscribe-ing client (een Javascripted webpagina) */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. <br>Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br />
==Verdere uitleg bij de code==<br />
De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=266Webbased dashboard2021-01-15T12:36:27Z<p>Kamiel: /* Output parsing */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br />
==Verdere uitleg bij de code==<br />
De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br><br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=265Webbased dashboard2021-01-15T12:35:58Z<p>Kamiel: /* Broker definitie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br />
==Verdere uitleg bij de code==<br />
De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=264Webbased dashboard2021-01-15T12:35:48Z<p>Kamiel: /* Broker definitie */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br />
==Verdere uitleg bij de code==<br />
De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
<br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=263Webbased dashboard2021-01-15T12:34:11Z<p>Kamiel: /* Topics */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br />
==Verdere uitleg bij de code==<br />
De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topic selectie===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
// Create a client instance<br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=262Webbased dashboard2021-01-15T12:33:58Z<p>Kamiel: /* Broker */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br />
==Verdere uitleg bij de code==<br />
De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topics===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker definitie===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
// Create a client instance<br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamielhttps://operame.nl/index.php?title=Webbased_dashboard&diff=261Webbased dashboard2021-01-15T12:33:31Z<p>Kamiel: /* De broker */</p>
<hr />
<div>== Een eenvoudig Operame MQTT web-dashboard maken ==<br />
<br />
Uit de uitleg blijkt dat we 3 onderdelen nodig hebben; een Publishing client (Het Operame sensorboard dus), een broker en een Subscibing client (het dashboard dus). We werken ze in volgorde af.<br />
<br />
<br />
[[File:Operame-web.png|center|600px|Het eindresultaat]]<br />
<br />
<br />
=== De publishing client (oftewel de Sensor zelf). ===<br />
[[File:MQTTcfg.png|thumb|MQTT settings in Operame]]<br />
<br />
Operame heeft WiFi (al staat deze standaard uit) en ondersteuning voor MQTT (staat ook standaard uit). De configuratie van beide gaat via een tijdelijke WiFi connectie. Om deze te activeren druk je op het knopje boven de USB plus van het board en Operame maakt een nieuw wifi-netwerk. De naam (SSID) hiervan is Operame-xxxx waarbij xxxx een uniek nummer is. <br />
<br />
Op dit netwerk kun je (bijv. met een smartphone) verbinden om vervolgens via de "login"-pagina zowel de wifi-connectie met je WLAN alsook de MQTT-instellingen configureren. Zet met de vinkjes zowel Wifi als MQTT ‘aan’. Vul vervolgens hier, naast je Wifi gegevens (SSID, password) als broker ‘test.mosquitto.org’ in en laat vooralsnog de rest op default staan. '''Noteer de topic naam (die moet later in de subscriper code)!'''<br />
<br />
===De broker===<br />
<br />
Het is goed mogelijk je eigen broker op te zetten bijvoorbeeld met een Raspberry, docker etc in combinatie met de open software van https://mosquitto.org. Dit vereist wel enige tijd en technische kennis. <br />
Een snellere en simpeler methode is gebruik te maken van een openbare MQTT broker op het Internet. Hiermee publiceer je wel je data openbaar maar voor niet kritische gegevens en in ‘uitprobeer’ situaties is dis een snelle en eenvoudige oplossing. We zetten in deze handleiding deze dus in.<br />
<br />
Door op de Operame aan te geven dat we als broker ‘test.mosquitto.org’ gaan inzetten is de Broker operationeel. Verder hebben we de boel default laten staan en dan zal de het board de data onder de ‘Topic’-naam ‘ operame-xxxxx’ publiceren en dus voor de subscriber ook onder deze naam beschikbaar komen op de broker. <br />
Hoewel aan MQTT een heleboel te configureren valt is bovenstaande initieel voldoende.<br />
<br />
===De Subscribe-ing client (een Javascripted webpagina)===<br />
<br />
Dit is het onderdeel dat bij de broker een abonnement neemt op een bepaald topic en daarmee vanaf dan alle data van dat topic gaat ontvangen. In dit geval is de cliënt niet meer dan een HTML file die het abonnement op een specifiek topic ‘neemt’, de data van dat topic ontvangt en deze op een ‘analoge meter’ in een browser laat zien. Bij deze de html/javascipt file welke eenvoudig als ‘open bestand in een browser kan worden geopend.<br />
<br />
==Verdere uitleg bij de code==<br />
De code is hiet te downloaden :<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip<br />
<br />
De code maakt voor de MQTT verbinding gebruikt van de Eclipse Paho JavaScript MQTT Client en de Google Charts library.<br />
<br />
<code><br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script><br />
</code><br><br />
<code><br />
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script><br />
</code><br />
<br />
===Topics===<br />
<br />
In deze lijst worden de te volgen topic namen opgegeven.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ['''"operame-7cca2a"''']; // Expand with more (max 3) subscriptions if needed<br />
</code><br />
<br />
'''<em>LET OP: Pas deze (hier "operame-7cca2a") waarde aan zodat deze gelijk is aan de topic naam zoals je die op de Operame hebt ingesteld</em>'''<br />
<br />
Het script ‘abonneert’ zich standaard op 1 topic maar kan in deze vorm tot 3 topics worden uitgebreid.<br />
<br />
<code><br />
<script><br />
// MQTT variables<br />
var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ]; <br />
</code><br />
<br />
===Broker===<br />
In de volgende regel wordt de broker opgegeven (en behoeft geen aanpassing):<br><br />
<code><br />
// Create a client instance<br />
client = new Paho.MQTT.Client("test.mosquitto.org", 8080,"");<br />
</code><br />
<br />
De gebuikte library gebruikt websockets (IP over HTTP) als mechanisme dus de poort moet i.p.v. de gebruikelijke MQTT poort 1883 nu de websockets poort 8080 zijn.<br />
<br />
===Output parsing===<br />
De output van de Operame bestaat uit een string die de CO2 waarde laat volgen door de tekst ‘ PPM’. De volgende regel stript de letters uit de tekst en zet deze om naar een echt getal. (geen aanpassing nodig)<br><br />
<code><br />
var num = message.payloadString.replace(/[^0-9]/g,'');<br />
MQTTvalues[i] = Number(num);<br />
</code><br />
<br />
===Gebruik van de voorbeeldcode===<br />
Zoals gezegd is, naast het aanpassen van de topic namen, het openen van de HTML file in een browser middels Open/Bestand genoeg. Wel is i.v.m. connectie naar de MQTT Internet Broker en het sideloaden van de publieke libraries een werkende Internetverbinding vereist.<br />
<br />
Laat het gebruikte Javascript je niet intimideren! Happy hacking!<br />
<br />
=== De HTML/JS Code ===<br />
<br />
https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip</div>Kamiel