Webbased dashboard - Revision history

Kamiel: /* Een eenvoudig Operame MQTT web-dashboard maken */

2021-01-16T09:10:58Z

Een eenvoudig Operame MQTT web-dashboard maken

← Older revision		Revision as of 09:10, 16 January 2021
Line 1:		Line 1:
	== Een eenvoudig Operame MQTT web-dashboard maken ==		== Een eenvoudig Operame MQTT web-dashboard maken ==

			[[File:MQTTbasic.png\|center\|600px\|de basis dataflow in MQTT]]

	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.		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.

Kamiel: /* Stappenplan */

2021-01-16T09:10:07Z

Stappenplan

← Older revision		Revision as of 09:10, 16 January 2021
Line 28:		Line 28:

	==Stappenplan==		==Stappenplan==
			[[File:Operame-web.png\|thumb\|400px\|Het eindresultaat]]

	*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam		*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam
	*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip		*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip

Kamiel: /* Een eenvoudig Operame MQTT web-dashboard maken */

2021-01-16T09:09:51Z

Een eenvoudig Operame MQTT web-dashboard maken

← Older revision		Revision as of 09:09, 16 January 2021
Line 4:		Line 4:



	[[File:Operame-web.png\|center\|400px\|Het eindresultaat]]

Kamiel: /* Stappenplan */

2021-01-16T09:09:11Z

Stappenplan

← Older revision		Revision as of 09:09, 16 January 2021
Line 31:		Line 31:
	*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam		*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam
	*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip		*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip
	*Pas de topic naam aan in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld		*Pas de topic naam aan (zie beneden) in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld
	*Open de aangepaste HTML file in een browser door 'File/Open bestand'		*Open de aangepaste HTML file in een browser door 'File/Open bestand'

Kamiel at 09:03, 16 January 2021

2021-01-16T09:03:54Z

← Older revision		Revision as of 09:03, 16 January 2021
Line 25:		Line 25:

	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.		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>~~De code is hier te downloaden :~~		<br><br>
	https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip

	==Stappenplan==		==Stappenplan==

	*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam		*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam
	*Download de code		*Download de code - https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip
	*Pas de topic naam aan in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld		*Pas de topic naam aan in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld
	*Open de aangepaste HTML file in een browser door 'File/Open bestand'		*Open de aangepaste HTML file in een browser door 'File/Open bestand'

Kamiel: /* STappenplan */

2021-01-16T09:02:59Z

STappenplan

← Older revision		Revision as of 09:02, 16 January 2021
Line 28:		Line 28:
	https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip		https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip

	==~~STappenplan~~==		==Stappenplan==

	*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam		*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam

Kamiel at 09:02, 16 January 2021

2021-01-16T09:02:50Z

← Older revision		Revision as of 09:02, 16 January 2021
Line 27:		Line 27:
	<br><br>De code is hier te downloaden :		<br><br>De code is hier te downloaden :
	https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip		https://bin.jvnv.net/file/OJObp/gaugeMQTT.zip

			==STappenplan==

			*Stel je Operame in voor WiFi en MQTT - Noteer je topic naam
			*Download de code
			*Pas de topic naam aan in de gedownloade HTML code zodat je eigen topic erin staat ipv het voorbeeld
			*Open de aangepaste HTML file in een browser door 'File/Open bestand'

	==Verdere uitleg bij de code==		==Verdere uitleg bij de code==

Kamiel: /* Output parsing */

2021-01-16T08:59:49Z

Output parsing

← Older revision		Revision as of 08:59, 16 January 2021
Line 65:		Line 65:

	===Output parsing===		===Output parsing===
	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>		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>
	<code>		<code>
	var num = message.payloadString.replace(/[^0-9]/g,'');<br>		var num = message.payloadString.replace(/[^0-9]/g,'');<br>

Kamiel: /* Topic naam */

2021-01-16T08:59:02Z

Topic naam

← Older revision		Revision as of 08:59, 16 January 2021
Line 53:		Line 53:

	<code>		<code>
	var MQTTnames = ["operame-7cca2a",["operame-8ef212", ["operame-6bbde2a" ];		var MQTTnames = ["operame-7cca2a", "operame-8ef212", "operame-6bbde2a" ];
	</code>		</code>

Kamiel: /* Topic Naam */

2021-01-16T08:57:31Z

Topic Naam

← Older revision		Revision as of 08:57, 16 January 2021
Line 40:		Line 40:
	</code>		</code>

	===Topic ~~Naam~~===		===Topic naam===

	In deze lijst worden de te volgen topic namen opgegeven.		In deze lijst worden de te volgen topic namen opgegeven.