Skip to content

📊 MQTT plugin for reveal.js (the HTML presentation framework)

Notifications You must be signed in to change notification settings

roccomuso/reveal.js-mqtt-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

Reveal.js MQTT plugin

Simple MQTT plugin for reveal.js (framework for easily creating beautiful presentations using HTML).

Image of mqtt-reveal.js

Installation

Place the mqtt directory within the reveal.js plugin directory - that's it. Tested with version 3.2.0 of reveal.js.

Usage

With this plugin you can easily integrate MQTT data within reveal.js.

After copying the 'mqtt' directory into the reveal.js 'plugins' directory, you also need to add this dependency to your Reveal.initialize script (which you will normally find at the end of your HTML file).

<script>
    Reveal.initialize({

        // ... add your other settings here ...

	mqtt_broker: '192.168.1.111', // Broker address
	mqtt_port: '3000', // MQTT over Web Socket port
	mqtt_username: '', // username [optional]
	mqtt_password: '', // username [optional]

        // Optional reveal.js plugins
        dependencies: [
            // other dependencies ...

            // add THIS dependencies for MQTT plugin
            { src: 'plugin/mqtt/mqttws31.js', async: true },
	    { src: 'plugin/mqtt/mqtt.js', async: true }

        ]
    });

</script>

Make sure to put the right mqtt_broker address and port. (The port needed must be the one for the WebSocket not the bare mqtt protocol one, 1883).

After that, in the slides-section of your HTML, just create a section for your next slide. Add a mqtt attribute to your section. Every span element inside the mqtt section defines a topic. You can filter incoming JSON data defining the json-field attribute. That field will be shown when data comes from the MQTT broker. You can also specify for the span element an optional attribute for QoS: mqtt-qos with a number between 0 and 2, (default: 0).

<!-- Example of MQTT real-time temperature -->
<section mqtt>
	<h1>Temperature:</h1>
	<h2>
	  <span json-field="temperature">
	    livingroom/sensor/A
	  </span> °
	</h2>
</section>

Without the json-field attribute, the raw data will be printed as it is with no JSON parsing and filtering.

<!-- Example of MQTT raw data printing -->
<section mqtt>
	<h1>Incoming raw data:</h1>
	<h2>
	  <span>bedroom/sensor/B</span>
	</h2>
	<h2>
	  <span>another/topic/C</span>
	</h2>
</section>

CSS

I personally like this color for the retrieved topics data. Just add this to your CSS template:

/*********************************************
 * MQTT data styling
 *********************************************/
section[mqtt] span {
  padding-left: 0.15em;
  padding-right: 0.15em;
  color: #7E7EEA;
}

Credits

Writter by Rocco Musolino @roccomuso for reveal.js

Thanks to the Paho Project for the beautiful JS MQTT library (mqttws31.js).

License

MIT

About

📊 MQTT plugin for reveal.js (the HTML presentation framework)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published