28 January, 2021

Better together: MQTT Tiles integrated into the flespi panel

Quick subscriptions, easy MQTT debugging, and instant dashboards right in the flespi admin panel.

The flespi panel is a No.1 destination for all flespi users. You create all sorts of flespi entities there, you monitor the logs, you configure calculators, and a lot more. Our frontend team puts a lot of effort to make it smooth and functional, which is quite a challenge accounting for the wealth of possible uses. Another step towards better usability involved making our MQTT-based tools (MQTT TIles and MQTT Board) available for use directly from each item’s configuration.

This functionality should be particularly helpful for those exploring MQTT as an alternative to the traditional data consumption via REST API. A more visual way of interaction facilitates understanding of the topics structure, their content, and applicability in different cases.

When you open the item’s configuration (click on a channel, device, stream, calculator, etc.) and navigate to the info tab (the leftmost one), you will see the list of Main MQTT topics. These topics can be used to get the specified information related to the given flespi item via MQTT (yes, all data in the flespi platform is available via REST API as well as via MQTT).

flespi panel main mqtt topics

Next to each topic you will find several buttons for actions to perform with the given topics.

Quick access to the MQTT Board and MQTT Tiles action buttons is also available form the device Telemetry tab:

flespi device telemetry mqtt tiles

Let’s see how to use these shortcuts and why you may want to use them.

Add to MQTT Tiles

Value: you can easily monitor the parameters of interest straight from the panel and also have fewer chances to mix up the topics.

Clicking the Add widget to MQTT TIles button will open the right-side sliding pane with the MQTT Tiles widget already subscribed to consume data from the given topic. The widget type is picked based on the content — Linear gauge (thermometer) for temperature, Radial gauge for speed, Text for timestamp, and Multiplier text for the rest.

flespi panel tiles pane widget

You can always open the widget settings to change widget type and fine-tune the configuration (three dots -> gear button):

flespi panel tiles pane widget config

Note: If you create a widget to analyze channel messages, you can replace the “+” wildcard in the topic with a specific ident to get the massages from one device only.

mqtt tiles widget channel wildcard mqtt tiles widget channel specific ident

For convenience you can maximize the MQTT TIles window by clicking the respective button in the top right corner of the pane — this will give you more room to put together and configure a pretty board.

Add to MQTT Board

Value: quickly pick and debug the needed topics to make sure the receiving application is getting the right data; tweak and get real-time updates.

As you might remember, MQTT Board is a handy tool to try and test your MQTT-based communication. Being able to check the payload of a given topic in one click helps get things right faster.

Say you want to see what the device telemetry looks like. Just click on the Add to MQTT Board button in the Device telemetry line and you’ll see the MQTT Board subscriber pane already populated with the given topic. Just click the Play button to subscribe and start getting updates:

flespi panel mqtt board pane

***

The closer interaction between the flespi panel and the MQTT tools is not a revolutionary invention. However, it does offer clear practical benefits — you can draft dashboards quicker, you can play with MQTT topics more conveniently, and you are less likely to make a typo. See it for yourself and tell us if you like it.