Voir la source de Real Time System Telemetry Dashboard with FireBeetle ESP32P4

{{Tuto Details
|Main_Picture=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2a.JPG
|Main_Picture_annotation={"version":"3.5.0","objects":[{"type":"image","version":"3.5.0","originX":"left","originY":"top","left":-1,"top":-3,"width":764,"height":576,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"scaleX":0.79,"scaleY":0.79,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","cropX":0,"cropY":0,"src":"https://wikifab.org/images/3/3c/Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2a.JPG","filters":[]}],"height":450.20576131687244,"width":600}
|Licences=Attribution (CC BY)
|Description=<translate>Build a real‑time system telemetry dashboard that shows your PC’s CPU, RAM, and network stats in a dark, single‑page web UI.</translate>
|Area=Electronics
|Type=Technique
|Difficulty=Easy
|Duration=2
|Duration-type=hour(s)
|Cost=15
|Currency=USD ($)
|Tags=ESP32
}}
{{Introduction
|Introduction=<translate>Build a '''real‑time system telemetry dashboard''' that shows your PC’s CPU, RAM, and network stats in a '''dark, single‑page web UI''' served by a '''DFRobot FireBeetle ESP32‑P4'''. Your PC sends newline‑terminated JSON over USB serial; the ESP32 parses it, blinks an onboard LED (pin 3) when new data arrives, and serves a responsive AJAX dashboard that updates every 5 seconds and includes a raw JSON console.</translate>
}}
{{Materials
|Material=<translate></translate>
|Tools=<translate></translate>
}}
{{Tuto Step
|Step_Title=<translate>Hardware</translate>
|Step_Content=<translate>* '''DFRobot FireBeetle ESP32‑P4''' board (or compatible ESP32‑P4 board
* USB cable (for power, programming, and serial data)
* Optional: small breadboard / jumper wires if you want to wire external LED or buttons (onboard LED uses pin 3)

'''Display / UI'''

* No OLED required for the web UI version — everything is in the browser.

'''Software on PC'''

* '''Python 3.8+'''
* Python packages: '''pyserial''', '''psutil''' (install with <code>pip install pyserial psutil</code>)

'''Arduino IDE'''

* Latest Arduino IDE or VS Code with PlatformIO
* ESP32 board support installed (Espressif package)
* Libraries: '''Arduino_JSON''' (install via Library Manager)

'''Network'''

* Local Wi‑Fi network credentials (SSID and password) for the ESP32 to host the webserver</translate>
|Step_Picture_00=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2b.JPG
}}
{{Tuto Step
|Step_Title=<translate>Get PCBs for Your Projects Manufactured</translate>
|Step_Content=<translate>You must check out [https://www.pcbway.com/ PCBWAY] for ordering PCBs online for cheap!

You get 10 good-quality PCBs manufactured and shipped to your doorstep for cheap. You will also get a discount on shipping on your first order. Upload your Gerber files onto [https://www.pcbway.com/ PCBWAY] to get them manufactured with good quality and quick turnaround time. PCBWay now could provide a complete product solution, from design to enclosure production. Check out their online Gerber viewer function. With reward points, you can get free stuff from their gift shop. Also, check out this useful blog on PCBWay Plugin for KiCad from [https://www.pcbway.com/blog/News/PCBWay_Plug_In_for_KiCad_3ea6219c.html here]. Using this plugin, you can directly order PCBs in just one click after completing your design in KiCad.</translate>
|Step_Picture_00=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2c.JPG
}}
{{Tuto Step
|Step_Title=<translate>Wiring and hardware setup</translate>
|Step_Content=<translate>=== Power and data ===

* Connect the FireBeetle to your PC using the USB cable. This provides power and the serial link for telemetry.

'''LED'''

* The sketch uses the '''onboard LED on pin 3'''. No extra wiring required unless you want an external LED — then connect LED + resistor to pin 3 and GND.

'''Notes'''

* Close Arduino Serial Monitor before running the Python sender (only one app can open the COM port at a time)
* Ensure the FireBeetle is selected as the target board in Arduino IDE and the correct COM port is chosen.</translate>
|Step_Picture_00=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2d.JPG
|Step_Picture_01=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2e.JPG
}}
{{Tuto Step
|Step_Title=<translate>Arduino sketch (webserver with AJAX dashboard)</translate>
|Step_Content=<translate>'''What it does'''

* Connects to Wi‑Fi using your SSID and password.
* Listens on USB serial (9600 baud) for newline‑terminated JSON from the PC.
* Parses JSON and stores the latest values.
* Serves a dark themed HTML dashboard at <code>http://<ESP32-IP>/</code>.
* Provides <code>/data</code> JSON endpoint used by the page’s AJAX to update UI every 5 seconds.
* Blinks onboard LED on pin 3 when new data arrives.

'''Paste and upload this sketch''' (replace <code>YOUR_SSID</code> and <code>YOUR_PASSWORD</code>):
<br /><syntaxhighlight lang="c">
#include <WiFi.h>
#include <WebServer.h>
#include <Arduino_JSON.h>

const char* ssid = "YOUR_SSID";
const char* password = "YOUR_PASSWORD";

WebServer server(80);

String host, os, boot, ramUsed, ramTotal, ip, mac;
double cpu = 0, ramPct = 0;

#define LED_PIN 3   // onboard LED pin

// Serve the main HTML page
void handleRoot() {
  String html = R"rawliteral(
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>ESP32-P4 Telemetry Dashboard</title>
    <style>
      body{background:#121212;color:#eee;font-family:Arial;text-align:center;}
      h1{color:#4cafef;}
      .card{background:#1e1e1e;padding:20px;margin:20px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.5);}
      .bar{height:20px;background:#333;border-radius:10px;overflow:hidden;margin-top:10px;}
      .fill{height:100%;background:#4caf50;text-align:right;color:#fff;padding-right:5px;}
      .gauge{width:120px;height:60px;background:#333;border-radius:120px 120px 0 0;overflow:hidden;margin:20px auto;position:relative;}
      .needle{width:4px;height:60px;background:#4cafef;position:absolute;bottom:0;left:58px;transform-origin:bottom center;}
    </style>
    <script>
      async function fetchData(){
        const res = await fetch('/data');
        const data = await res.json();
        document.getElementById('host').innerText = data.host;
        document.getElementById('os').innerText = data.os;
        document.getElementById('boot').innerText = data.boot_time;
        document.getElementById('cpu').innerText = data.cpu_percent + '%';
        document.getElementById('cpuFill').style.width = data.cpu_percent + '%';
        document.getElementById('cpuNeedle').style.transform = 'rotate('+(data.cpu_percent/100*180)+'deg)';
        document.getElementById('ram').innerText = data.ram.used + ' / ' + data.ram.total + ' ('+data.ram.percent+'%)';
        document.getElementById('ramFill').style.width = data.ram.percent + '%';
        document.getElementById('ramNeedle').style.transform = 'rotate('+(data.ram.percent/100*180)+'deg)';
        document.getElementById('ip').innerText = data.network.ip;
        document.getElementById('mac').innerText = data.network.mac;
        // Show raw JSON in console widget
        document.getElementById('console').innerText = JSON.stringify(data, null, 2);
      }
      setInterval(fetchData, 5000); // auto refresh every 5s
      window.onload = fetchData;
    </script>
  </head>
  <body>
    <h1>ESP32-P4 Telemetry Dashboard</h1>
    <div class="card">
      <h2>System Info</h2>
      <p><b>Host:</b> <span id="host"></span></p>
      <p><b>OS:</b> <span id="os"></span></p>
      <p><b>Boot Time:</b> <span id="boot"></span></p></div>
    <div class="card">
      <h2>CPU Usage</h2>
      <div class="gauge"><div id="cpuNeedle" class="needle"></div></div>
      <div class="bar"><div id="cpuFill" class="fill">0%</div></div>
      <p id="cpu"></p>
    </div>
    <div class="card">
      <h2>RAM Usage</h2>
      <div class="gauge"><div id="ramNeedle" class="needle"></div></div>
      <div class="bar"><div id="ramFill" class="fill">0%</div></div>
      <p id="ram"></p>
    </div>
    <div class="card">
      <h2>Network</h2>
      <p><b>IP:</b> <span id="ip"></span></p>
      <p><b>MAC:</b> <span id="mac"></span></p>
    </div>
    <div class="card" style="margin:20px;">
      <h2>Raw data console</h2>
      <pre id="console" style="background:#000;color:#0f0;padding:10px;border-radius:6px;height:140px;overflow:auto;">{}</pre>
    </div>
  </body>
  </html>
  )rawliteral";
  server.send(200, "text/html", html);
}

// Serve JSON data for AJAX
void handleData() {
  String json = "{";
  json += "\"host\":\"" + host + "\",";
  json += "\"os\":\"" + os + "\",";
  json += "\"boot_time\":\"" + boot + "\",";
  json += "\"cpu_percent\":" + String(cpu) + ",";
  json += "\"ram\":{\"used\":\"" + ramUsed + "\",\"total\":\"" + ramTotal + "\",\"percent\":" + String(ramPct) + "},";
  json += "\"network\":{\"ip\":\"" + ip + "\",\"mac\":\"" + mac + "\"}";
  json += "}";
  server.send(200, "application/json", json);
}

void setup() {
  Serial.begin(9600);
  pinMode(LED_PIN, OUTPUT);

  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nConnected!");
  Serial.print("ESP32 IP: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/data", handleData);
  server.begin();
}

void loop() {
  server.handleClient();

  if (Serial.available()) {
    String msg = Serial.readStringUntil('\n');
    JSONVar data = JSON.parse(msg);
    if (JSON.typeof(data) != "undefined") {
      host     = (const char*)data["host"];
      os       = (const char*)data["os"];
      boot     = (const char*)data["boot_time"];
      cpu      = double(data["cpu_percent"]);
      ramUsed  = (const char*)data["ram"]["used"];
      ramTotal = (const char*)data["ram"]["total"];
      ramPct   = double(data["ram"]["percent"]);
      ip       = (const char*)data["network"]["ip"];
      mac      = (const char*)data["network"]["mac"];

      // Blink LED when new data arrives
      digitalWrite(LED_PIN, HIGH);
      delay(100);
      digitalWrite(LED_PIN, LOW);
    }
  }
}
</syntaxhighlight>



'''Notes'''

* Replace <code>YOUR_SSID</code> and <code>YOUR_PASSWORD</code>.
* Keep Serial Monitor closed while Python is running.</translate>
|Step_Picture_00=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2f.JPG
}}
{{Tuto Step
|Step_Title=<translate>Python telemetry sender (PC side)</translate>
|Step_Content=<translate>'''What it does'''

* Collects real system stats using <code>psutil</code>.
* Formats a JSON object and sends it over USB serial to the ESP32 every 5 seconds.
* Newline terminator <code>\n</code> is required so the ESP32 can use <code>readStringUntil('\n')</code>.

 <code>pip install pyserial psutil</code>
'''Python script (run on your PC, update''' <code>PORT</code>''')'''<syntaxhighlight lang="python">
import psutil
import platform
import socket
import time
import serial
import json
from datetime import datetime

PORT = "COM8"   # Change to your ESP32 port
BAUD = 9600

def get_size(bytes, suffix="B"):
    factor = 1024.0
    for unit in ["", "K", "M", "G", "T"]:
        if bytes < factor:
            return f"{bytes:.2f}{unit}{suffix}"
        bytes /= factor

def get_ip_mac():
    ip, mac = "N/A", "N/A"
    for iface, addrs in psutil.net_if_addrs().items():
        for addr in addrs:
            if addr.family == socket.AF_INET and not addr.address.startswith("127."):
                ip = addr.address
            if hasattr(addr.family, "name") and addr.family.name in ("AF_LINK", "AF_PACKET"):
                mac = addr.address
    return ip, mac

try:
    ser = serial.Serial(PORT, BAUD, timeout=1)
    time.sleep(2)

    while True:
        uname = platform.uname()
        boot_time = datetime.fromtimestamp(psutil.boot_time()).strftime("%Y-%m-%d %H:%M:%S")
        cpu = psutil.cpu_percent(interval=None)
        ram = psutil.virtual_memory()
        disk = psutil.disk_usage('/')
        ip, mac = get_ip_mac()

        data = {
            "host": uname.node,
            "os": f"{uname.system} {uname.release}",
            "boot_time": boot_time,
            "cpu_percent": cpu,
            "ram": {
                "used": get_size(ram.used),
                "total": get_size(ram.total),
                "percent": ram.percent
            },
            "disk": {
                "used": get_size(disk.used),
                "total": get_size(disk.total),
                "percent": disk.percent
            },
            "network": {
                "ip": ip,
                "mac": mac
            }
        }

        ser.write((json.dumps(data) + "\n").encode("utf-8"))
        print("Sent:", json.dumps(data))
        time.sleep(5)

except serial.SerialException as e:
    print("Serial error:", e)
except KeyboardInterrupt:
    print("Stopped by user.")
finally:
    try:
        ser.close()
    except:
        pass
</syntaxhighlight></translate>
|Step_Picture_00=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2g.JPG
}}
{{Tuto Step
|Step_Title=<translate>Running and verification (step by step)</translate>
|Step_Content=<translate>'''Prepare hardware'''

* Connect FireBeetle to PC via USB.
* Ensure board drivers are installed and the COM port is visible.

'''Upload Arduino sketch'''

* Open Arduino IDE, paste the sketch, set board to FireBeetle ESP32‑P4, update Wi‑Fi credentials, and upload.
* After upload, open Serial Monitor briefly to see Wi‑Fi connection logs, then close it. Note the printed '''ESP32 IP'''.

'''Start Python sender'''

* Update <code>PORT</code> to the ESP32 COM port (Windows: <code>COMx</code>, Linux: <code>/dev/ttyUSB0</code>), then run the Python script.
* Confirm the script prints “Sent:” messages every 5 seconds.

'''Open dashboard'''

* In a browser on the same network, open <code>http://<ESP32-IP>/</code> (use the IP printed in Serial Monitor).
* The page will auto‑fetch <code>/data</code> every 5 seconds and update the UI.
* The raw JSON console shows the latest packet.

'''Verify LED'''

* Each time the Python script sends a new JSON packet, the onboard LED on pin 3 should blink briefly.

=== Next steps and enhancements ===

* '''Add authentication''' to the web UI (basic token or password).
* '''Send telemetry over Wi‑Fi''' (HTTP POST from Python to ESP32) to remove USB dependency.
* '''Add more metrics''': network throughput, GPU stats (via <code>GPUtil</code>), disk per‑partition details.
* '''Persist logs''' on an SD card or send to a remote server.
* '''Add manual controls''': buttons on the FireBeetle to change refresh rate or toggle panels.
* Improve visuals: use charting libraries (Chart.js) hosted locally for sparklines and history graphs.</translate>
|Step_Picture_00=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2h.JPG
|Step_Picture_01=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2i.JPG
}}
{{Tuto Step
|Step_Title=<translate>Conclusion:</translate>
|Step_Content=<translate><section id="story">
You now have a complete local telemetry solution: a Python script on your PC collects CPU, RAM, disk, and network stats and streams them as newline‑terminated JSON over USB to your DFRobot FireBeetle ESP32‑P4, which parses the data, blinks its onboard LED on new packets, and serves a dark, single‑page AJAX dashboard that updates every five seconds and includes live gauges and a raw JSON console—giving you real‑time visibility, local control and privacy, and a flexible foundation for adding authentication, Wi‑Fi telemetry, logging, or alerts.
</section></translate>
|Step_Picture_00=Real_Time_System_Telemetry_Dashboard_with_FireBeetle_ESP32P4_a2j.JPG
}}
{{Notes
|Notes=<translate></translate>
}}
{{PageLang
|SourceLanguage=none
|IsTranslation=0
|Language=en
}}
{{Tuto Status
|Complete=Published
}}