WEB MQTT – First UI elements

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.

WEB MQTT – Add first UI elements to the dashboard
MQTT.FX desktop MQTT 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.
https://rundebugrepeat.com/web-mqtt-create-and-connect-client/

To add a new UI element click on the “Add new UI element” button

WEB MQTT – 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.

WEB MQTT – Add new UI element form – add label tab

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.

WEB MQTT – Label added, UI config mode

To edit or delete the UI element you have to be in UI config mode and click on the buttons below the element.

WEB MQTT – Edit or Delete UI 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.

WEB MQTT – Label moved, Enable/Disable UI config button
WEB MQTT – Label re-positioned

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
WEB MQTT – Add new Button Form

Re-position the button next to the label with the drag and drop method.

WEB MQTT – Button moved next to the label

With the MQTT.fx I connected to the same MQTT broker and subscribed to the same path where my button will send the message.

MQTT.FX – Connected to the same broker and subscribed to the path

After I clicked on the button the message will appear in the other MQTT client as a received message.

MQTT.FX – Message received

With this method you can add multiple buttons to the interactive dashboard to send pre-defined messages.

Leave a Reply

Your email address will not be published. Required fields are marked *