pet2print: Telemetry Dashboard & Demo Data Generator

This repository is one component of the larger PET2Print capstone project (a smart desktop appliance that recycles post-consumer PET bottles into 1.75 mm 3D-printing filament). It contains the real-time telemetry dashboard that visualises the extruder's live data, plus a demo data generator for running the dashboard without the physical machine.

• Live demo: https://pet2print.netlify.app/
• Documentation: https://aspctt.github.io/pet2print/

---

Description

A self-contained, browser-based dashboard that subscribes to the extruder's telemetry over MQTT and displays it in real time. It connects to an MQTT broker (the project uses HiveMQ Cloud) over secure WebSockets, subscribes to the pet2print/telemetry topic, and renders live readouts for:

Metric	Unit	Target band
Temperature, hot-end	°C	200 ± 5
Auger speed	rpm	4 ± 1
Filament diameter	mm	1.75 ± 0.05

Each metric has a live chart of the last 60 readings with dashed target and limit lines. A card turns red as soon as its reading leaves the band.

The whole dashboard is a single index.html with MQTT.js and Chart.js bundled inline, so there is no build step and no backend.

This repo is the telemetry and visualisation layer only. The OpenCV optical measurement and the ESP32 firmware live elsewhere in the wider project; this dashboard consumes whatever is published to the telemetry topic.

Features

• Live gauges and charts for temperature, auger rpm and filament diameter, with out-of-range highlighting.
• Broker connection indicator showing idle, connecting, connected, error and disconnected states.
• Settings panel for cluster host, port, username, password, topic and WebSocket path. Values are saved to the browser's localStorage, so they persist between visits.
• Message log recording every received message with a timestamp, kept in localStorage so it survives a reload. Holds the most recent 5,000 entries and flags out-of-range values. Can be cleared on its own, or together with the saved connection settings.
• Target RPM control, a closed loop that compares the latest reported rpm against a slider target and publishes HIZLANDIR (speed up) or YAVASLAT (slow down) commands once a second until the reading is within 0.25 rpm of target. It warns before accepting a target outside the 4 ± 1 band.
• Built-in demo mode, a "Demo data" button that synthesises plausible readings entirely in the browser, with no broker and no Python needed.

How it's used

The dashboard is deployed and ready at https://pet2print.netlify.app/.

1. Open the page. It connects to the configured MQTT broker automatically.
2. Open the settings panel to enter your own HiveMQ cluster host, port, username, password and topic. These save to localStorage.
3. Publish telemetry to the topic, either from the real ESP32 firmware or from the demo generator below, and the gauges update live.

For a quick look with no broker at all, press Demo data instead.

Payload format

The dashboard expects JSON on the telemetry topic:

{ "temp": 200, "rpm": 3.8, "diameter": 1.75 }

Messages carrying none of these three keys are ignored. As a compatibility case, a message with "kaynak": "Edge_Phone" may report diameter under the key kalinlik instead, which the dashboard maps onto diameter.

Tip: set your broker credentials through the settings panel rather than hard-coding them, and avoid committing real secrets to the repository.

Repository layout

index.html                       # the dashboard (MQTT.js + Chart.js inlined, no build step)
docs/
  index.html                     # documentation site (build log + user guide, GitHub Pages)
demo_data_generation/
  fake_data.py                   # publishes mock telemetry to the broker
  start_data_generation.ps1      # Windows one-line launcher (uv run fake_data.py)
LICENSE                          # GPL-3.0 licence text
NOTICE                           # third-party components and their licences

The documentation site is served by GitHub Pages from the docs/ folder on main (repository Settings > Pages > Source: Deploy from a branch, branch main, folder /docs). It is a single static file with no build step, same as the dashboard.

Installation & running

The dashboard

It's a single static file. Either:

• open index.html directly in a browser,
• serve the folder with any static server, e.g. python3 -m http.server 8000, or
• just use the hosted version at https://pet2print.netlify.app/.

The demo data generator

fake_data.py publishes randomised temperature, rpm and diameter values to the telemetry topic every 2 seconds, so you can see the dashboard working against a real broker without the physical extruder. It uses uv and declares its dependency (paho-mqtt) inline via PEP 723 script metadata, so uv installs it automatically with no manual pip install or virtualenv needed.

uv run demo_data_generation/fake_data.py

On Windows you can instead run the launcher:

demo_data_generation\start_data_generation.ps1

Dependencies

• A modern web browser (for the dashboard)
• MQTT.js, MQTT-over-WebSocket client, bundled inline in index.html (MIT)
• Chart.js, charting library, bundled inline in index.html (MIT)
• An MQTT broker reachable over WebSockets (the project uses HiveMQ Cloud)
• uv and Python, only for the demo generator
  • paho-mqtt, fetched automatically by uv (declared inside the script)

Third-party components and their licences are listed in NOTICE.

Licensing

Copyright (c) 2026 ARAL TAN IŞIK / PET2PRINT TEAM

This work is licensed under the GNU General Public License v3.0 or (at your option) any later version. See LICENSE for the full text.

You are free to:

• Use it: unpack and run the material on any computer or device
• Redistribute it: pass on the original package in any medium
• Adapt it: reuse, modify or incorporate the source into your own works, and redistribute those

Under the following terms:

• You retain any copyright notices
• You recognise and respect any trademarks
• You do not impersonate the authors, nor redistribute a derivative that could be misrepresented as theirs
• You credit the authors and republish the copyright notices in any work where this code is used
• You relicense your work under GPL-3.0 or any later version, and comply with it in full
• You do not combine this work with GPL-incompatible works

The third-party components bundled into index.html remain under their own licences, which are permissive and GPL-compatible. See NOTICE for the full list and their copyright notices.