Automatically translate this page?
11 April, 2019

MQTT Tiles: shareable and flexible IoT dashboards

Visualize data from MQTT topics, manage actionable controls, share for others to use.

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.

Connections

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

add mqtt connection

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

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.

create dashboard

Click Full board view icon on the board card to open the current board for editing.

Shortcuts

By clicking on the star icon in the top right corner of the widget you are attaching this widget to the tile board view:

add widget to shortcuts

This feature enables you to consult some key values without opening the board.

dashboard tile view with shortcuts

View-only mode

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:

mqtt tiles widgets

Widgets

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:

mqtt tiles create widget

Widgets are easily resizable — just drag the bottom right corner of the widget to reshape it.

Dashboard sharing

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.

save dashboard to mqtt broker

The saved boards are available in a separate collapsible pane on top:

mqtt tiles saved boards pane

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:

mqtt tiles replace board

Sharing link

If you want to share the link to the board with someone, click on the Share icon on the board tile:

mqtt tiles share dashboard

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:

flespi acl mqtt token

This is a link to the sample dashboard constructed using the above token:

shareable mqtt tiles dashboard

Voila.

***

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.

P.S. We also released a small demo video for MQTT Tiles:




Get the latest updates and monthly newsletters from flespi in your inbox

11 July, 2019 | flespi features | Anton Kulichenko

Custom naming scheme for MQTT message parameters

Map original MQTT message parameters to any notation.

Beyond MQTT 5.0: extras we added on top of the standard

Unique features incorporated in the flespi MQTT broker in addition to full MQTT 5.0 compliance.