search

turbomatte / M5Stack_E2FS

M5Stacks with Arduino
3 stars 0 forks source link

MASTERTICKET WEB: Dokumentation Webseite #19

Closed turbomatte closed 4 months ago

turbomatte commented 6 months ago

Die Sensorwerten werden auf der Webseite Oberfläche dargestellt. Das erfolgt durch der Verbindung mit der MQTT client, der sich mit der Broker verbindet . Um einen erfolgreichen zu erstellen, man muss die vordefinierte Parameter eingeben. Jetzt kommt die Struktur der Webseite: Es soll die Sensorwerten auf eine Tabellen darstellen, es wird der Distanz der Objekt und der Belegung / Status der Parkingplatz angezeigt. Wenn es rot leuchtet, dann ist die Parking nicht frei und wenn es grün leuchtet, ist dann der Parking frei.

turbomatte commented 6 months ago

Image

turbomatte commented 6 months ago

26.04

Heute wird die Implementation der Daten, damit wir die Daten auf die Webseite abrufen können, erledigt.

Kamalsito commented 6 months ago

Der Gestaltung und Aufbau der Webseite wurde am 19.04 erledigt. Der Webseite wurde mit HTML für die Aufbau, CSS für das Design und JavaScript wird für die Einbindung mit der Broker verwendet. Der Code steht da.

Kamalsito commented 6 months ago

Änderung Javascript Code: const mqtt = require('mqtt');

/***

// Create an MQTT client instance const options = { // Clean session clean: true, connectTimeout: 4000, // Authentication clientId: 'Client69', username: 'user1', password: 'HWSFI2024!', } const client = mqtt.connect(url, options) client.on('connect', function () { console.log('Connected') // Subscribe to a topic client.subscribe('/distance/', function (err) { if (!err) { // Publish a message to a topic client.publish('/distance/', 'Hello mqtt') } }) })

Kamalsito commented 6 months ago

Eine Alternative wurde erstellt: <!DOCTYPE html>

Document
turbomatte commented 4 months ago

Kamal hat die webseite nicht mehr gemacht.

Ich habe es mit leo übernommen

Hier folgt die neue Website:

Image

Code sieht anderst aus, CSS sieht anderst aus.

Wir haben JS und HTML zusammengefasst.

Ziel ist es, eine Moderne darstellung für die Daten zu liefern.

turbomatte commented 4 months ago

Webseite 06.06. erledigt. Doku oben