From b400e5be3cae7aae03b7282977e8bdebea5563b8 Mon Sep 17 00:00:00 2001 From: Pfeifer Date: Fri, 4 Jul 2025 11:53:15 +0200 Subject: [PATCH] Font End using Bulma and MQTT.js for functionality --- web/.gitkeep | 0 web/img/favicon.ico | Bin 0 -> 24382 bytes web/index.html | 58 +++++++++++++++ web/main.css | 66 +++++++++++++++++ web/main.js | 168 ++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 292 insertions(+) create mode 100644 web/.gitkeep create mode 100644 web/img/favicon.ico create mode 100644 web/index.html create mode 100644 web/main.css create mode 100644 web/main.js diff --git a/web/.gitkeep b/web/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/web/img/favicon.ico b/web/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..1fdd43ace4d59979be1d146357b6ad34fba80937 GIT binary patch literal 24382 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 + + + + + IDFC + + + + + + + + +
+
+

The M5 - MQTT Project

+

by Patrik, Hazel and Reinhold

+
+
+
+
+ + + + + + + + +
+
+
+ +
+
+
+
+
+
+ +
+
+
+ + diff --git a/web/main.css b/web/main.css new file mode 100644 index 0000000..963c5ce --- /dev/null +++ b/web/main.css @@ -0,0 +1,66 @@ +input[type="radio"] { + display: none; +} + +label { + padding-bottom: 7px; +} + +input[type="radio"]:checked + label { + font-weight: bold; + padding-bottom: 5px; + border-bottom: 2px solid hsl(142, 52%, 96%); +} + +.inline-grid { + display: inline-grid; +} + +#connection-grid { + grid-template-columns: max-content auto; +} + +#toaster { + position: absolute; + translate: -50%; + top: 10px; + left: 50%; + max-height: 50%; + overflow: hidden; +} + +.toast { + --duration: 3s; + background-color: rgba(0, 209, 178, .5); + display: flex; + justify-content: center; + align-items: center; + padding: 2px 10px 3px; + margin: 3px; + border-radius: 10px; + min-width: 70px; + color: white; + opacity: 0; + max-height: 40px; + animation: blend var(--duration); +} + +@keyframes blend { + 0% { + opacity: 0; + max-height: 40px; + } + 20% { + opacity: 1; + } + 80% { + opacity: 1; + } + 90% { + max-height: 40px; + } + 100% { + opacity: 0; + max-height: 0px; + } +} diff --git a/web/main.js b/web/main.js new file mode 100644 index 0000000..1c2c82c --- /dev/null +++ b/web/main.js @@ -0,0 +1,168 @@ +//const url = 'mqtt://tplinkwifi.net'; +let client; + +window.addEventListener('DOMContentLoaded', (event) => { + const tabs = document.querySelector('#tabs'); + tabs.addEventListener('change', (event) => { + if (event.target.type != 'radio') { + return; + } + + switchTab(); + }); + + const buttonSubmit = document.querySelector('#connection-submit'); + buttonSubmit.addEventListener('click', (event) => { + if (client) { + client.end(); + } + const broker = document.querySelector('#connection-broker').value; + const topic = document.querySelector('#connection-topic').value; + connect(broker, topic); + buttonSubmit.classList.add('is-loading'); + }); + + // start + document.querySelector('#connection-broker').value = 'test.mosquitto.org:8081'; + document.querySelector('#connection-topic').value = 'test/2'; + document.querySelector('#connection-submit').click(); + +}); + +function createChart(data) { + const elm = document.querySelector('#chart'); + while (elm.childElementCount > 0) { + elm.firstElementChild.remove(); + } + + const ctx = document.createElement('canvas'); + elm.appendChild(ctx); + + // generate labels + const labels = []; + for (i = 1; i <= data.length; i++) { + labels.push(i); + } + + const gridColor = '#4f4f4f'; + new Chart(ctx, { + type: 'line', + data: { + labels: labels, + datasets: [{ + data: data, + borderColor: '#d1fff8' + }] + }, + options: { + scales: { + x: { + grid: { + color: gridColor + }, + ticks: { + color: gridColor + } + }, + y: { + grid: { + color: gridColor + }, + ticks: { + color: gridColor + } + } + }, + plugins: { + legend: { + display: false + } + } + } + }); +} + +function loadValues(data) { + let elm = document.querySelector('#values'); + + while (elm.childElementCount > 0) { + elm.firstElementChild.remove(); + } + + for (let i = 0; i < data.length; i++) { + const val = document.createElement('span'); + val.innerText = data[i]; + val.classList.add('is-align-self-center'); + + const cell = document.createElement('div'); + cell.classList.add('cell', 'tag', 'has-background-dark'); + cell.appendChild(val); + + elm.appendChild(cell); + } +} + +function switchTab() { + const buttons = tabs.querySelectorAll('input[type="radio"]'); + const block = document.querySelector('#block'); + + for (let i = 0; i < buttons.length; i++) { + const name = buttons[i].getAttribute('data-tab'); + const container = block.querySelector(`.container[data-tab="${name}"]`); + if (buttons[i].checked) { + container.style.setProperty('display', 'block'); + } else { + container.style.setProperty('display', 'none'); + } + } +} + +function connect(broker, topic) { + client = mqtt.connect('wss://' + broker); + const options = { retain: false, qos: 1 }; + const submitButton = document.querySelector('#connection-submit'); + + client.on('connect', () => { + if (client.connected) { + toast('connected'); + submitButton.classList.remove('is-loading'); + } + }); + + client.on('close', () => { + console.log('close'); + toast('connection closed'); + submitButton.classList.remove('is-loading'); + }); + + client.on('error', (err) => { + console.error(err); + toast('error'); + submitButton.classList.remove('is-loading'); + }); + + client.on('message', (topic, message) => { + console.log(message); + toast('message received'); + submitButton.classList.remove('is-loading'); + const tab = document.querySelector('#chart-tab'); + tab.checked = true; + switchTab(); + createChart(message); + loadValues(message); + }); + client.subscribe(topic, options); +} + +function toast(message) { + const duration = 3; + const elm = document.createElement('p'); + elm.innerText = message; + elm.classList.add('toast'); + document.querySelector('#toaster').appendChild(elm); + + elm.style.setProperty('--duration', duration + 's'); + setTimeout(() => { + elm.remove(); + }, duration * 1000); +}