MQTT Tiles widgets

A detailed guide into all widgets available in the MQTT Tiles dashboard builder.

MQTT Tiles is a powerful dashboarding tool offering immense flexibility and visual diversity. The key informational blocks in MQTT TIles are called widgets. Below we will look at the usage examples and specifics of the widgets currently available in the tool.

Content

Prerequisites

General info

Text widgets:

  • Text — a block of textual information

  • Multi text — similar to Text but allows displaying data from several topics in a single widget

  • Static text — displays hardcoded text explicitly typed into it

  • Text area — input area to type the text into

Indicators:

Action widgets:

  • Toggle —  a common ON/OFF switch

  • Button — action switch

  • Slider — a slider scale to pick the value from a range

  • Radio button — multiposition switch

Map widgets:

Advanced:

  • Multiplier — allows generating a set of similar widgets based on the wildcard topic

  • Complex — configurable block that can include data of different types

  • Formula — allows consuming data from multiple topics, assigning variables, and creating an HTML template for the resulting message

  • Iframe — displays the content from a link in the payload

  • Color — allows picking color from the palette

  • Scheme — allows adding a scheme image and putting other widgets on it (can be used for a floor plan, electric circuit, conceptual diagram, and more).

Prerequisites

  • Active connection to the MQTT broker (read more about connections here)

  • A board to add widgets to (read more about boards here)

General info

The minimal widget configuration requires an MQTT topic to get the data from. For action widgets (such as toggle or button) you will also need to specify an action topic (see corresponding sections below). 

If the data comes from flespi, you can use a handy wizard to select the specific flespi entity in your account, select the section within the entity, and pick the desired parameter(s). 

Note: if you pick several parameters at this step, only the last one will show.

The wizard works with the two main “data-carrying” entities in flespi — devices (check also devices API) and calculators (check also calculators API).

flespi topic wizard

Or you can type in (copy-paste) any valid topic that carries the value you need.

Text

This is a basic widget for displaying textual data. Enter the source topic.

Use the Prefix and Postfix fields to add static text before and after extracted value.

Use Math expression field to post-process the value you get from the topic. This field has full math.js support.

Use Format value as drop-down to show the resulting value in a specific format (string, JSON, markdown, etc.).

mqtt tiles text widget config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

Multitext

Similar to the Text widget above but allows subscribing to multiple topics and showing the values from these topics in a single block of text.

Use the Prefix and Postfix fields to add static text before and after extracted value.

Use the Math expression field to post-process the value you get from the topic. This field has full math.js support. In the expression round(%value%, 2) the %value% placeholder will be replaced with real value from MQTT message payload.

Use Format value as drop-down to show the resulting value in a specific format (string, JSON, markdown, etc.).

mqtt tiles multi text widget config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles multi text widget

Static text

This widget does not take the value from the topic — it shows the static text you manually type in it. It can be a title, a description, a comment, and the like.

Use Format value as drop-down to show the resulting values in a specific format (string, preformatted, markdown, or JSON).

Use the Text field to type in the actual text you want to display.

mqtt tiles static text widget config

And here's the result:

mqtt tiles static text widget

Textarea

This widget allows typing a multi-line block of text and publishing it to the specified topic.

Save last status on server toggle allows storing the last state in the retained message and never lose it if the MQTT session ends.

mqtt tiles text area widget config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles text area widget

Radial gauge

This is a widget showing the value from the specified topic on the circular scale.

mqtt tiles radial gauge widget config

Then you need to define the min and max values on the gauge. These can be typed manually or taken from the MQTT topics.

The Low level, Mid level, and High level values will color sectors on the gauge differently to make them more distinct.

mqtt tiles radial gauge widget min max values

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles radial gauge widget

Linear gauge

This is a widget showing the value from the specified topic on the linear scale.

mqtt tiles linear gauge widget config

Then you need to define the min and max values on the gauge. These can be typed manually or taken from the MQTT topics.

The Low level, Mid level, and High level values will color sectors on the gauge differently to make them more distinct.

mqtt tiles linear gauge widget min max values

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles linear gauge widget

Status indicator

This widget allows showing different icons depending on the value of the specified parameter from a selected topic.

mqtt tiles status indicator widget config

Then you need to choose the statuses to be assigned to the indicator depending on the value of the parameter (see Payload path above) being checked. For each status, you set an icon and its color. 

Use the Math expression field to post-process the value you get from the topic. This field has full math.js support.

mqtt tiles status indicator widget items config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles status indicator widget

Toggle

A two-position switch to enable/disable something or perform switching between two modes.

mqtt tiles toggle widget config

Save last status on server toggle allows storing the last state in the retained message and never lose it if the MQTT session ends.

 toggle can be set up in two modes — Default (a simple one) and Command (more advanced and flexible).

mqtt tiles toggle widget default mode config

In Default mode, the true and false values are published to the same topic. In Command mode, you can specify different MQTT topics for true and false values.

mqtt tiles toggle widget command mode config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles toggle widget

Button

Clicking on this widget will initiate publishing into the specified topic(s) and, consequently, respective actions.

You can specify the Button label and an Icon to make the button better reflect its purpose.

Then you enter the topic to which the Payload below will be published upon button press.

mqtt tiles button widget config

Here's our button:

mqtt tiles button widget

Slider

This widget represents a slider scale to pick the value from a range and publish the selected value into the specified topic. 

mqtt tiles slider widget config

The min and max values for the range can be specified either manually or with the respective MQTT topics.

mqtt tiles slider widget min max values

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles slider widget

Radio button

With this widget, you can prompt the user to pick a single value from the list of options and publish the selection into the specified topic.

Save last status on server toggle allows storing the last state in the retained message and never lose it if the MQTT session ends.

mqtt tiles radio button widget config

The widget can be configured in Default and Command modes. In Default mode, you can only give a meaningful name to the item and specify the value to be published to the topic specified above. In Command mode, in addition to what the Default mode offers, you can also specify the distinct action topic and the action payload to be published.

mqtt tiles radio button widget command mode config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles radio button widget

Map (location)

A widget showing the dot on the map based on the location values taken from the specified topics.

The text you type into the Name field will show as a title for the map pin.

Latitude settings and Longitude settings sections require entering or picking the valid MQTT topics for the latitude and longitude values.

mqtt tiles map location widget latitude config


mqtt tiles map location widget longitude config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles map location widget

Map (route)

This widget shows a route track on the map based on the interval containing the route parameter in its configuration.

In the Route settings pick or type in the proper topic to extract the route value. For instance, the last interval from the flespi calculator can be taken from here: flespi/state/gw/calcs/+/devices/+/last.

mqtt tiles map route widget config

It’s important to specify the correct path to the route parameter:

mqtt tiles map route widget path config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles map route widget

Multiplier

This widget allows creating multiple copies of like widgets for several similar sources.

The Group layer setting allows selecting on which level of the topic hierarchy the multiplication should take place.

mqtt tiles multiplier widget config

The Multiplied widget render logic field can accept math to apply to the values before showing them in the widget.

Note that the Multiplier widget only works with some types of widgets listed in the Widget multiplier type drop-down.

mqtt tiles multiplier widget type config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles multiplier widget

Complex

This widget allows building collections of mini-widgets by extracting values from JSON taken from a specified topic. 

mqtt tiles complex widget config

You can add Text, Knob, and Progress into the complex widget.

mqtt tiles complex widget items config

Note, to address value names including a dot, use the following syntax: $[‘xxx.yyy’].

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles complex widget

Formula

This is an advanced widget allowing complex calculations on values taken from different topics with the use of variables.

mqtt tiles formula widget config

Variables allow configuring flexible mathematical expressions.

The output value format can be defined in the template with references to specific variables and message parameters. 

mqtt tiles formula widget variables config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles formula widget

Iframe

The widget allows embedding another document within the current MQTT Tiles board.

The widget can work either in Integration mode or in Show mode. In Integration mode, you can specify the link to the page to show in the iframe as well as the two advanced settings — ready message and init message.

mqtt tiles iframe widget config


Ready message from iframe field allows specifying what would be the indication that the iframe is ready for further interaction. 

Init message to iframe allows sending initial configuration to iframe before starting further interaction.

In the Show mode, you are only allowed to specify the topic to get the link from.

mqtt tiles iframe widget integration mode config

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

mqtt tiles iframe widget

Color

The widget allows picking and publishing the color code in a suitable format to the specified topic.

mqtt tiles color widget config

The colorpicker can have a Simple (a circular palette with a pointer) and Advanced (more precise with input) layout. The widget supports HEX, RGB, and HSV color codes.

mqtt tiles iframe widget simple mode config

The Value template field allows specifying the schema to publish the selected value in the format suitable for consumption on the receiving end.

Save last status on server toggle allows storing the last state in the retained message and never lose it if the MQTT session ends.

When the Show last update time toggle is ON, the widget adds the time of the last value refresh in the bottom left corner.

Simple and Advanced modes:

mqtt tiles iframe widget simple mode mqtt tiles iframe widget advanced mode

Scheme

The widget allows adding a custom image (BTW, you can use it to simply show a static image on the dashboard) and placing other widgets (label, text, toggle, indicator) in the specific positions on the image to reproduce a certain plan or diagram.

mqtt tiles scheme widget

If the source topic comes from the flespi MQTT broker, you can use the flespi topic helper button to pick it. 

mqtt tiles scheme widget config

You can also apply some math (put into the Math expression field) to the incoming value before showing it.

Also, you can add different icons (Items list) to show for different values.

***

If you think MQTT Tiles is missing a widget that can solve your (or someone else’s) need more elegantly, let us know.


See also
MQTT bridge is a very useful tool when you need to separate and partially isolate parts of your system, as well as not be fully dependent on a third-party MQTT broker.
How to achieve MQTT bridging functionality in flespi