MQTT Button plugin

Hi everyone,

So my goal is to create panel plugin that is just a simple button that on click sand MQTT massage to broker. Because I am total beginner I started by modifying grafana-clock-panel. I made changes in /dist/module.html (i changed clock display to button and added some java script code.) Code that I added was same as here: http://www.hivemq.com/blog/build-javascript-mqtt-web-application.

Problem that I have is how to us library for MQTT (in this case mqttws31.js). If I am doing this wrong pleas correct me.

1 Like

You will have to include the mqttws31.js file in the src directory. Create a sub directory called libs (or something similar) copy the js file in there and then import it like this in your controller:

import * as mqtt from './libs/mqttws31';

Here are some examples from other plugins: Worldmap, D3Gauge, Diagram panel

P.S. You should not be making your changes in the dist folder - that’s for generated (transpiled) code. I wrote a blog post about writing the Clock plugin that describes how to build it: https://grafana.com/blog/2016/04/08/timing-is-everything.-writing-the-clock-panel-plugin-for-grafana-3.0/

There is also some documentation on plugin development.

It is a great idea. Do you have any progres in creation of MQTT client plugin?

Hi there,

thanks for bringing this up! We’ve conducted some research around that topic and found others are looking into the same direction.

With kind regards,
Andreas.