You might be aware that we in flespi contribute to the development of MQTT infrastructure quite a bit — so far we have offered a cloud MQTT 5.0 broker, an MQTT 5.0-ready MQTT.js client library, a developer-friendly MQTT playground called MQTT Board.
Now we are adding MQTT Tiles to the list.
MQTT Tiles is a highly customizable IoT dashboard getting data for visualization from MQTT topics.
Managing switches, monitoring dynamic values on a scale, adding action buttons, embedding videos, and more — just arrange the widgets on the board, set up source MQTT topics, and enjoy a good-looking and value-bringing picture.
Let’s see what it takes to create a new IoT dashboard.
Since dashboards in MQTT Tiles rely on subscriptions to MQTT topics to get data for visualization, we need to establish a connection to an MQTT broker first. Click on the plus icon in My connections pane on the left.
By default, you are prompted to connect to the flespi MQTT broker via MQTT 5.0 using your flespi token.
Note: there is a handy Login icon to the right of the Username textbox that will offer you to pick one of the existing flespi tokens (if any).
Obviously, you are not limited to the flespi MQTT broker and can go with any other option on the market supporting WSS protocol. Just specify the correct Host and credentials, and pick the proper MQTT version (very few brokers these days have the complete support of MQTT 5.0 that flespi offers).
Notice that once you create a new connection, you should click on it to enable (it will turn green).
Now that you have a connection to the broker, we can start putting together your first board.
Boards are collections of widgets that serve as masks for the data obtained through connections. You can “apply” the same board to multiple connections to see (and compare) the same set of parameters or values coming from different sources (e.g. development and production environments).
To create a new board, click on the plus icon in the bottom right corner. Give it a meaningful name and start stuffing it with widgets.
Click Full board view icon on the board card to open the current board for editing.
By clicking on the star icon in the top right corner of the widget you are attaching this widget to the tile board view:
This feature enables you to consult some key values without opening the board.
If you want to prevent accidental board editing, you may lock it by clicking the lock icon in the top right corner of the full board view:
Widgets are the flesh and bones of a dashboard — they make the board visually attractive and informative. Since MQTT Tiles is at the active stage of development, we have a basic set of widgets implemented to date. But we’ll be constantly adding new ones (your suggestions are highly appreciated).
Here’s what we have for now:
Toggle — a common ON/OFF switch
Text — a block of text / indicator
Button — action switch
Radial gauge — a speedometer-like scale
Linear gauge — a thermometer-like scale
Iframe — displays the content from a link in the payload
Radio button — multiposition switch
To make a widget operable, you need to specify the MQTT topic or topics it should subscribe to and get the data from.
Action widgets, such as toggles and buttons, also require the action topics to be specified to publish into them when triggered:
Widgets are easily resizable — just drag the bottom right corner of the widget to reshape it.
Creating dashboards is ultimately done to facilitate perception of information that you consult regularly by presenting it in the visual form. Creating and editing dashboards is a much less frequent action.
Here’s what you can do to make your board usable by more than one person or from more that one place.
Saving to broker
You can save the board configuration to the broker to be able to use or share it later. Click on the three-dots icon and pick the Save to broker option.
The saved boards are available in a separate collapsible pane on top:
If you choose to download the saved board (by clicking the Download icon), you will be prompted to replace the existing one with the same name (if one exists) or save this board with a different name:
If you want to share the link to the board with someone, click on the Share icon on the board tile:
The link will be copied to the clipboard. Send to the interested parties to let them view the dashboard and interact with the action widgets. Board editing will not be allowed.
Note: To be able to share the board you have to be logged in with a Standard or ACL token — sharing is not allowed for Master tokens. The ACL for the mqtt topic xflespifront/mqtttiles/boards/+ should be explicitly created with publish/subscribe allowed to make sharing work.
You will also most likely need another ACL(s) to specific MQTT topics to be able to get the data or publish updates. For example, the token with the following ACLs allows access to the flespi platform counters:
This is a link to the sample dashboard constructed using the above token:
MQTT Tiles is a flexible tool empowering easy visualization of data from MQTT topics. Use it to grasp the data in a more convenient form, manage actionable elements to trigger changes, and share the views with the world.
We’d be glad to hear your feedback and stories about the needs you are trying to cover with the tool.