In this short tutorial you will learn how you can UI element, like labels, buttons to the interactive dashboard and how to send pre-defined message with the button element. To show the message I will use an other MQTT desktop client, the MQTT.fx desktop client.
WARNING! You have to connect to the same broker and subscribe to the same MQTT path to saw the messages you send with the button.
To use the interactive dahsboard you have to connect to an MQTT client.
To add a new UI element click on the “Add new UI element” button
A new form will appear. Select the first tab “Label”. Add the text for the label and as an optional part, pick a color for the label.
After you added the label, the dashboard background changed. In this mode you can move and edit the UI elements. For this tutorial I will re-position the label. You can move the element using the gray area with a drag and drop method.
To edit or delete the UI element you have to be in UI config mode and click on the buttons below the element.
After you re-positioned the label to a new position click on the Enable/Disable UI config button to close the UI edit mode.
Click on the Add new UI element button to add a button. With a button you can send pre-defined message to mqtt path. Publish pre-defined messages with button click.
For this tutorial, my button settings will be the following:
- My First Button is the text of the button
- rundebugrepeat/test/button is the path where the message will be sent (you have to subscribe to the same path with the other client)
- Hello World will be the message I want to send with the button
Re-position the button next to the label with the drag and drop method.
With the MQTT.fx I connected to the same MQTT broker and subscribed to the same path where my button will send the message.
After I clicked on the button the message will appear in the other MQTT client as a received message.
With this method you can add multiple buttons to the interactive dashboard to send pre-defined messages.