https://github.com/nopnop2002/esp-idf-mqtt-chart
MQTT data visualization using esp-idf
https://github.com/nopnop2002/esp-idf-mqtt-chart
esp-idf esp32 mqtt visualization
Last synced: 3 months ago
JSON representation
MQTT data visualization using esp-idf
- Host: GitHub
- URL: https://github.com/nopnop2002/esp-idf-mqtt-chart
- Owner: nopnop2002
- License: mit
- Created: 2023-12-22T22:35:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-18T20:38:28.000Z (10 months ago)
- Last Synced: 2025-02-14T06:33:34.467Z (5 months ago)
- Topics: esp-idf, esp32, mqtt, visualization
- Language: C
- Homepage:
- Size: 32.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# esp-idf-mqtt-chart
MQTT data visualization using esp-idf.
Display MQTT data in a chart.
I was inspired by [this](https://blog.postman.com/postman-supports-mqtt-apis/).
I used [this](https://github.com/Molorius/esp32-websocket) component.
This component can communicate directly with the browser.
I use [this](https://plotly.com/javascript/) Graphing Library.
# Software requirements
ESP-IDF V5.0 or later.
ESP-IDF V4.4 release branch reached EOL in July 2024.
ESP-IDF V5.1 is required when using ESP32-C6.
# Installation
```
git clone https://github.com/nopnop2002/esp-idf-mqtt-chart
cd esp-idf-mqtt-chart/
git clone https://github.com/Molorius/esp32-websocket components/websocket
idf.py set-target {esp32/esp32s2/esp32s3/esp32c2/esp32c3/esp32c6}
idf.py menuconfig
idf.py flash monitor
```
# Configuration
## WiFi Setting
You can connect using the mDNS hostname instead of the IP address.
## Broker Setting
MQTT broker is specified by one of the following.
- IP address
```192.168.10.20```
- mDNS host name
```mqtt-broker.local```
- Fully Qualified Domain Name
```broker.emqx.io```
You can download the MQTT broker from [here](https://github.com/nopnop2002/esp-idf-mqtt-broker).
Specifies the username and password if the server requires a password when connecting.
# Supported MQTT data formats
- JSON data format
MQTT payload is in JSON format as shown below.
You can check it working using mqtt_json.sh.
```
{
"sin": 0,
"cos": -1,
"tan": 0,
}
```
- Simple data format
MQTT payload is a simple number.
You can check it working using mqtt_simple.sh.
# How to use
- Start this application.
- Start ```mqtt_json.sh``` or ```mqtt_simple.sh```.
- Enter the following in the address bar of your web browser.
```
http:://{IP of ESP32}/
or
http://esp32-server.local/
```
- You can change the number of X-axis.
- You can change the Y-axis range to auto scale or manual scale.
# Built-in menu
You can use the built-in menu.
Download plot as PNG/Zoom Area/Pan/Zoom In/Zoom Out/Hover/Tooltips.
# WEB Pages
WEB pages are stored in the html folder.
You can change it as you like.
# Limitations
Up to 3 axes can be displayed at one time.