Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/roccomuso/reveal.js-mqtt-plugin
:bar_chart: MQTT plugin for reveal.js (the HTML presentation framework)
https://github.com/roccomuso/reveal.js-mqtt-plugin
html mqtt plugin presentation reveal-js
Last synced: 15 days ago
JSON representation
:bar_chart: MQTT plugin for reveal.js (the HTML presentation framework)
- Host: GitHub
- URL: https://github.com/roccomuso/reveal.js-mqtt-plugin
- Owner: roccomuso
- Created: 2016-03-03T16:48:13.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-28T15:12:01.000Z (almost 7 years ago)
- Last Synced: 2025-01-04T17:46:21.280Z (18 days ago)
- Topics: html, mqtt, plugin, presentation, reveal-js
- Language: JavaScript
- Homepage:
- Size: 46.9 KB
- Stars: 14
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Reveal.js MQTT plugin
Simple MQTT plugin for [reveal.js](https://github.com/hakimel/reveal.js) (framework for easily creating beautiful presentations using HTML).
![Image of mqtt-reveal.js](https://github.com/roccomuso/reveal.js-mqtt-plugin/blob/master/slide-example.PNG)
# 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).
```html
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 }]
});```
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.
**Everyspan
element inside the mqtt section defines a topic.**
You can filter incoming JSON data defining thejson-field
attribute. That field will be shown when data comes from the MQTT broker.
You can also specify for thespan
element an optional attribute for QoS:mqtt-qos
with a number between 0 and 2, (default: 0).```html
Temperature:
livingroom/sensor/A
°
```
Without the
json-field
attribute, the raw data will be printed as it is with no JSON parsing and filtering.```html
Incoming raw data:
bedroom/sensor/B
another/topic/C
```
# CSS
I personally like this color for the retrieved topics data. Just add this to your CSS template:
```css
/*********************************************
* MQTT data styling
*********************************************/
section[mqtt] span {
padding-left: 0.15em;
padding-right: 0.15em;
color: #7E7EEA;
}
```# Credits
Writter by **Rocco Musolino** [@roccomuso](https://twitter.com/roccomuso) for reveal.js
Thanks to the [Paho Project](https://eclipse.org/paho/clients/js/) for the beautiful JS MQTT library (mqttws31.js).
## License
MIT