MQTT Button plugin

Grafana Plugin Development
1

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
2

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.

3

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

4

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.

5

Hi again,

coming from Using Grafana for submitting downlink commands - #6 by geeks-r-us - Benutzerschnittstelle / User interface / API - Hiveeyes, I wanted to share with you that @geeks-r-us is conceiving a nice MQTT Panel Plugin for Grafana. It is

a panel to enable Grafana to fulfill simple control tasks via MQTT.

and currently provides three types of control elements: A text input element, a switch element and a slider element.

With kind regards,
Andreas.

6

Hi i have installed this plugin. But when i go to use it. It says there is an error.
Please can anyone help?

7

An error message often means that there is a problem of some sort somewhere.

A clue to what the problem is, and maybe where it is, is often given by the
detail in the error message itself.

Someone here might have an idea how to resolve the problem if you tell us what
the error message is.

Antony.

1 Like
8

Hello all,

i try to send mqtt data from Grafana to Node-Red.
Unfortunally it doesn´t work.
In my case this Test Button is not active.
I try different IP, Ports etc.
I would be very happy about your help!

kind regards,
Marco

mqttbutton
mqttbutton764Ă—996 43.2 KB

9

Do you definitely have a WebSockets server running on port 1883? That looks like the standard (default) MQTT port. Your browser can only communicate with the MQTT broker over the WebSockets protocol, so you’ll need to make sure you enable that on the broker (usually on a different port).

1 Like
10

okay thanks! I´ll setup a WebSocket Server and try it again. :+1:

11

Hi!
Is this plugin working?
Someone knows an alternative for a slider?

Thanks

12

Hi,

I’m using docker in order to test mqtt-panel plugin :
docker run -d -p 3000:3000 -e “GF_INSTALL_PLUGINS=https://github.com/geeks-r-us/mqtt-panel/releases/download/v1.0.7/geeksrus-mqtt-panel-1.0.7.zip;mqtt-panel” --name=grafana grafana/grafana

I don’t see the plugin in grafana, never …

Someone could help me please ?

using : v8.5.0 grafana

Thanks