How the MQTTfy Dashboard Works

MQTT is the primary protocol for real-time data in MQTTfy. Our platform acts as an MQTT client, subscribing to topics to receive data and publishing to topics to send commands. Here’s a breakdown of the configuration settings:

Broker URL & Port

This is the address of your MQTT broker. For browser-based connections, MQTTfy exclusively uses the secure WebSocket protocol (WSS), so your URL should be the domain name or IP address of your broker, and the port should be the one configured for WSS traffic (commonly 8083, 8084, or 443).

Topic

The heart of MQTT. For display widgets (like gauges or text), this is the topic the widget will subscribe to. For control widgets (like buttons), this is the topic it will publish to. MQTTfy supports wildcards (+ and #) for subscribing, allowing a single widget to listen to multiple data streams.

QoS (Quality of Service)

Determines the reliability of message delivery. MQTTfy supports QoS 0 (at most once), QoS 1 (at least once), and QoS 2 (exactly once). For most dashboarding purposes, QoS 0 or 1 is sufficient.

Authentication

You can provide a username and password to securely connect to brokers that require authentication.

Retain Flag (Publishing)

When you use a widget like a Button or Slider to publish a message, you can set the "Retain" flag. This tells the broker to hold onto that message and deliver it to any new subscribers immediately upon connection. This is useful for persisting state, like the last-known position of a switch.

Beyond real-time protocols, MQTTfy can poll any RESTful API to fetch and display data. This is perfect for integrating weather data, stock prices, or information from your own web services.

API URL

The full endpoint URL you want to query (e.g., https://api.example.com/v1/status).

Method

Supports GET for fetching data and POST for sending data or requesting data with a specific query in the body.

Headers

You can provide a JSON object for custom headers, which is essential for authentication. For example, to use a Bearer token, you would enter: {"Authorization": "Bearer YOUR_API_TOKEN"}.

Polling Interval

Determines how frequently the widget will make a request to the API, specified in milliseconds. A value of 5000 means the widget will fetch new data every 5 seconds. Setting it to 0 will fetch the data only once when the widget loads.

Data Path (JSONPath)

This is a powerful feature for parsing complex JSON responses. If your API returns {"data": {"sensors": [{"id": "temp1", "value": 25.5}]}}, you could use a data path like data.sensors[0].value to extract just the temperature reading of 25.5.

MQTTfy leverages the Web Bluetooth API to connect directly to Bluetooth Low Energy (BLE) peripherals from your browser. This enables wireless, local dashboards without needing an internet connection or an intermediary gateway.

Device & Service Discovery

Using the Bluetooth Manager in the header, you can scan for nearby BLE devices. Once a device is found, you can connect to it and discover its available "Services" and "Characteristics," each identified by a unique UUID.

Service & Characteristic UUIDs

In BLE, a "Service" is a collection of "Characteristics". A characteristic is where the actual data lives (e.g., a temperature reading, a battery level). When configuring a BLE widget, you will select the device, the service UUID, and the characteristic UUID you want to read from or write to.

Reading Data

For display widgets, the dashboard subscribes to notifications from a characteristic. Whenever the BLE device updates the characteristic's value, the data is automatically sent to the widget and displayed.

Writing Data

For control widgets like buttons or sliders, the dashboard writes data directly to a characteristic. For example, sending the value 1 might turn on an LED, while sending 0 turns it off.

Data Parsing

BLE devices transmit data as raw bytes. MQTTfy provides built-in parsers to automatically convert this data into human-readable formats, such as UTF-8 text or various numeric types (integers, floats).

The AI Assistant is a powerful tool integrated into the dashboard to help you work more efficiently. It can help in several ways:

Configuration Help

Stuck on how to configure a widget? Ask the AI. For example, you can ask, "How do I connect to a public HiveMQ broker?" and it will provide you with the correct URL, port, and example topics.

Data Interpretation

If a widget is displaying raw data (like a JSON string), you can ask the AI to interpret it. For example: "Explain this JSON payload: {'temp': 25, 'unit': 'C'}". The AI will respond with a human-readable explanation, like "This data indicates a temperature of 25 degrees Celsius."

Troubleshooting

If a widget isn't working as expected, describe the problem to the AI. It can suggest common issues to check, such as incorrect topic subscriptions, broker connection problems, or invalid data paths for API responses.

Learning & Exploration

Use the AI to learn about IoT concepts. Ask questions like "What is the difference between QoS 1 and QoS 2?" or "What is a good use case for a Bar Chart widget?" to deepen your understanding of the platform and the technologies it uses.