{"id":16760389,"url":"https://github.com/roccomuso/reveal.js-mqtt-plugin","last_synced_at":"2025-04-10T17:36:55.413Z","repository":{"id":66271812,"uuid":"53066853","full_name":"roccomuso/reveal.js-mqtt-plugin","owner":"roccomuso","description":":bar_chart: MQTT plugin for reveal.js (the HTML presentation framework)","archived":false,"fork":false,"pushed_at":"2018-01-28T15:12:01.000Z","size":48,"stargazers_count":14,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T15:11:23.103Z","etag":null,"topics":["html","mqtt","plugin","presentation","reveal-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/roccomuso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-03-03T16:48:13.000Z","updated_at":"2024-11-15T23:32:22.000Z","dependencies_parsed_at":"2023-06-13T23:54:29.335Z","dependency_job_id":null,"html_url":"https://github.com/roccomuso/reveal.js-mqtt-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roccomuso%2Freveal.js-mqtt-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roccomuso%2Freveal.js-mqtt-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roccomuso%2Freveal.js-mqtt-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/roccomuso%2Freveal.js-mqtt-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/roccomuso","download_url":"https://codeload.github.com/roccomuso/reveal.js-mqtt-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248262043,"owners_count":21074236,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","mqtt","plugin","presentation","reveal-js"],"created_at":"2024-10-13T04:23:21.414Z","updated_at":"2025-04-10T17:36:55.396Z","avatar_url":"https://github.com/roccomuso.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Reveal.js MQTT plugin\n\nSimple MQTT plugin for [reveal.js](https://github.com/hakimel/reveal.js) (framework for easily creating beautiful presentations using HTML).\n\n![Image of mqtt-reveal.js](https://github.com/roccomuso/reveal.js-mqtt-plugin/blob/master/slide-example.PNG)\n\n# Installation\n\nPlace the mqtt directory within the reveal.js plugin directory - that's it. Tested with version 3.2.0 of reveal.js.\n\n# Usage\n\n**With this plugin you can easily integrate MQTT data within reveal.js**.\n\nAfter 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).\n\n```html\n\u003cscript\u003e\n    Reveal.initialize({\n\n        // ... add your other settings here ...\n\n\tmqtt_broker: '192.168.1.111', // Broker address\n\tmqtt_port: '3000', // MQTT over Web Socket port\n\tmqtt_username: '', // username [optional]\n\tmqtt_password: '', // username [optional]\n\n        // Optional reveal.js plugins\n        dependencies: [\n            // other dependencies ...\n\n            // add THIS dependencies for MQTT plugin\n            { src: 'plugin/mqtt/mqttws31.js', async: true },\n\t    { src: 'plugin/mqtt/mqtt.js', async: true }\n\n        ]\n    });\n\n\u003c/script\u003e\n```\n\nMake 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).\n\nAfter that, in the slides-section of your HTML, just create a section for your next slide. Add a mqtt attribute to your section.\n**Every \u003ccode\u003espan\u003c/code\u003e element inside the mqtt section defines a topic.**\nYou can filter incoming JSON data defining the \u003ccode\u003ejson-field\u003c/code\u003e attribute. That field will be shown when data comes from the MQTT broker.\nYou can also specify for the \u003ccode\u003espan\u003c/code\u003e element an optional attribute for QoS: \u003ccode\u003emqtt-qos\u003c/code\u003e with a number between 0 and 2, (default: 0).\n\n```html\n\u003c!-- Example of MQTT real-time temperature --\u003e\n\u003csection mqtt\u003e\n\t\u003ch1\u003eTemperature:\u003c/h1\u003e\n\t\u003ch2\u003e\n\t  \u003cspan json-field=\"temperature\"\u003e\n\t    livingroom/sensor/A\n\t  \u003c/span\u003e °\n\t\u003c/h2\u003e\n\u003c/section\u003e\n```\n\nWithout the \u003ccode\u003ejson-field\u003c/code\u003e attribute, the raw data will be printed as it is with no JSON parsing and filtering.\n\n```html\n\u003c!-- Example of MQTT raw data printing --\u003e\n\u003csection mqtt\u003e\n\t\u003ch1\u003eIncoming raw data:\u003c/h1\u003e\n\t\u003ch2\u003e\n\t  \u003cspan\u003ebedroom/sensor/B\u003c/span\u003e\n\t\u003c/h2\u003e\n\t\u003ch2\u003e\n\t  \u003cspan\u003eanother/topic/C\u003c/span\u003e\n\t\u003c/h2\u003e\n\u003c/section\u003e\n```\n\n# CSS\n\nI personally like this color for the retrieved topics data. Just add this to your CSS template:\n\n```css\n/*********************************************\n * MQTT data styling\n *********************************************/\nsection[mqtt] span {\n  padding-left: 0.15em;\n  padding-right: 0.15em;\n  color: #7E7EEA;\n}\n```\n\n\n# Credits\n\nWritter by **Rocco Musolino** [@roccomuso](https://twitter.com/roccomuso) for reveal.js\n\nThanks to the [Paho Project](https://eclipse.org/paho/clients/js/) for the beautiful JS MQTT library (mqttws31.js).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froccomuso%2Freveal.js-mqtt-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froccomuso%2Freveal.js-mqtt-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froccomuso%2Freveal.js-mqtt-plugin/lists"}