MQTT Visualisierte Steuerung Sensor - Versionsgeschichte

Thomas.will am 4. November 2024 um 14:21 Uhr

2024-11-04T14:21:11Z

Thomas.will: /* Die HTML Datei index.html */

2024-10-30T13:44:02Z

Die HTML Datei index.html

Thomas.will am 30. Oktober 2024 um 10:02 Uhr

2024-10-30T10:02:24Z

Thomas.will: /* Steuerungsserver starten und beim Booten aktivieren */

2024-10-30T10:01:53Z

Steuerungsserver starten und beim Booten aktivieren

Thomas.will: /* Steuerung der Geräte über HTTP */

2024-10-30T10:01:32Z

Steuerung der Geräte über HTTP

Thomas.will: /* Die HTML Datei index.html */

2024-10-30T10:00:30Z

Die HTML Datei index.html

Thomas.will: /* Konfiguration des Steuerungsservers */

2024-10-30T09:59:50Z

Konfiguration des Steuerungsservers

Thomas.will: /* Voraussetzungen */

2024-10-30T09:46:55Z

Voraussetzungen

Thomas.will: Die Seite wurde neu angelegt: „=== Voraussetzungen === Voraussetzungen für Node.js-Projekt ==== Neues Verzeichnis für den Steuerungsserver erstellen ==== '''mkdir /usr/local/contr…“

2024-10-30T09:46:18Z

Die Seite wurde neu angelegt: „=== Voraussetzungen === *Voraussetzungen für Node.js-Projekt ==== Neues Verzeichnis für den Steuerungsserver erstellen ==== *'''mkdir /usr/local/contr…“

Neue Seite

=== Voraussetzungen ===
*[[Voraussetzungen für Node.js-Projekt]]

==== Neues Verzeichnis für den Steuerungsserver erstellen ====
*'''mkdir /usr/local/control-switch'''
*'''cd /usr/local/control-switch'''

==== Initialisiere das Node.js-Projekt ====
*'''npm init -y'''

==== Installiere die benötigten Pakete ====
*'''npm install mqtt express'''

==== Konfiguration des Steuerungsservers ====
Erstelle die Datei '''switch-server.js''' im Verzeichnis '''/usr/local/control-switch''' mit folgendem Inhalt:

<pre>
const mqtt = require('mqtt');
const fs = require('fs');
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

let status = {
wohnzimmer: 'off',
schlafzimmer: 'off',
kueche: 'off',
haustuer: 'geschlossen'
};

// MQTT-Verbindung herstellen über TLS
const options = {
port: 1883,
host: 'mqtt.dkbi.int',
//protocol: 'mqtts',
//username: 'xinux',
//password: 'geheim',
//ca: fs.readFileSync('./ca.crt') // Pfad zur ca.crt
};

const client = mqtt.connect(options);

client.on('connect', () => {
console.log('Verbunden mit dem Broker');
client.subscribe('home/+/status', (err) => {
if (!err) {
console.log('Alle Topics abonniert');
}
});
});

client.on('message', (topic, message) => {
const room = topic.split('/')[1];
status[room] = message.toString();
console.log(`Status von ${room}: ${status[room]}`);
});

// API-Route für den Status der Lichter und Haustür
app.get('/status', (req, res) => {
res.send(status);
});

// Statisches Verzeichnis für die Webseite
app.use(express.static(path.join(__dirname)));

// Starte den Webserver
app.listen(port, () => {
console.log(`Webserver läuft auf http://localhost:${port}`);
});

</pre>

==== Die HTML Datei index.html====
<pre>

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haussteuerung</title>
<style>
.device {
margin: 20px;
padding: 10px;
border-radius: 10px;
text-align: center;
font-size: 1.5em;
}
.on {
background-color: green;
color: white;
}
.off {
background-color: red;
color: white;
}
.open {
background-color: blue;
color: white;
}
.closed {
background-color: gray;
color: white;
}
</style>
<script>
function fetchStatus() {
fetch('/status')
.then(response => response.json())
.then(data => {
document.getElementById('wohnzimmer').className = 'device ' + (data.wohnzimmer === 'on' ? 'on' : 'off');
document.getElementById('schlafzimmer').className = 'device ' + (data.schlafzimmer === 'on' ? 'on' : 'off');
document.getElementById('kueche').className = 'device ' + (data.kueche === 'on' ? 'on' : 'off');
document.getElementById('haustuer').className = 'device ' + (data.haustuer === 'offen' ? 'open' : 'closed');
});
}

setInterval(fetchStatus, 1000); // Alle 1 Sekunde den Status abrufen
</script>
</head>
<body>
<h1>Haussteuerung</h1>
<div id="wohnzimmer" class="device off">Wohnzimmer Licht: Aus</div>
<div id="schlafzimmer" class="device off">Schlafzimmer Licht: Aus</div>
<div id="kueche" class="device off">Küchen Licht: Aus</div>
<div id="haustuer" class="device closed">Haustür: Geschlossen</div>
</body>
</html>

</pre>

==== systemd-Unit für den Steuerungsserver erstellen ====
Erstelle die Datei '''/etc/systemd/system/control-switch.service''' mit folgendem Inhalt:

<pre>
[Unit]
Description=Home Control Switch Server

[Service]
Type=simple
WorkingDirectory=/usr/local/control-switch
ExecStart=/usr/bin/node server.js
ExecStartPost=/bin/echo "Schalt-Server gestartet"

[Install]
WantedBy=multi-user.target
</pre>

==== Steuerungsserver starten und beim Booten aktivieren ====
*'''systemctl start control-switch.service'''
*'''systemctl enable control-switch.service'''

==== Steuerung der Geräte über HTTP ====
Nun können die Geräte über den separaten Server gesteuert werden:

- Wohnzimmerlicht einschalten: `http://localhost:3001/toggle/wohnzimmer`
- Schlafzimmerlicht einschalten: `http://localhost:3001/toggle/schlafzimmer`
- Küchenlicht einschalten: `http://localhost:3001/toggle/kueche`
- Haustür öffnen: `http://localhost:3001/toggle/haustuer`

Der Server ist für die Steuerung der Geräte per HTTP zuständig und sendet die entsprechenden MQTT-Nachrichten.

← Nächstältere Version		Version vom 30. Oktober 2024, 10:01 Uhr
Zeile 191:		Zeile 191:
	*'''systemctl start control-switch.service'''		*'''systemctl start control-switch.service'''
	*'''systemctl enable control-switch.service'''		*'''systemctl enable control-switch.service'''
−
−	~~==== Steuerung der Geräte über HTTP ====~~
−	~~Nun können die Geräte über den separaten Server gesteuert werden:~~
−
−	~~- Wohnzimmerlicht einschalten: `http://localhost:3001/toggle/wohnzimmer`~~
−	~~- Schlafzimmerlicht einschalten: `http://localhost:3001/toggle/schlafzimmer`~~
−	~~- Küchenlicht einschalten: `http://localhost:3001/toggle/kueche`~~
−	~~- Haustür öffnen: `http://localhost:3001/toggle/haustuer`~~
−
−	~~Der Server ist für die Steuerung der Geräte per HTTP zuständig und sendet die entsprechenden MQTT-Nachrichten.~~

@@ Zeile 17: / Zeile 17: @@
 <pre>
 const mqtt = require('mqtt');
 const express = require('express');
@@ Zeile 23: / Zeile 22: @@
 const app = express();
 const port = 3000;
+const fs = require('fs');
 let status = {
    livingRoom: 'off',
@@ Zeile 31: / Zeile 30: @@
 };
-// MQTT connection options (without TLS for unencrypted communication)
+// MQTT-Verbindung herstellen
 const options = {
    port: 1883,
    host: 'mqtt.dkbi.int'
@@ Zeile 40: / Zeile 44: @@
 client.on('connect', () => {
-   console.log('Connected to the MQTT broker');
+   console.log('Connected to the broker');
    client.subscribe('home/+/status', (err) => {
      if (!err) {
@@ Zeile 54: / Zeile 58: @@
 });
-// Route to get the status of the lights and front door
+// API route to get the status of the lights and front door
 app.get('/status', (req, res) => {
    res.send(status);
 });
-// Route to toggle a device
+// Serve static directory for the web interface
 app.use(express.static(path.join(__dirname)));
 // Start the web server
 app.listen(port, () => {
-   console.log(`Control Center is running at http://localhost:${port}`);
+   console.log(`Control Center is running at http://0.0.0.0:${port}`);
 });
-−
 </pre>

@@ Zeile 120: / Zeile 120: @@
+     }
      .on {
-       background-color: green;
+       background-color: yellow;
-       color: white;
+       color: black;
+     }
      .off {
-       background-color: red;
+       background-color: gray;
        color: white;
+     }
      .open {
-       background-color: blue;
+       background-color: red;
        color: white;
+     }
@@ Zeile 142: / Zeile 142: @@
          .then(response => response.json())
          .then(data => {
            document.getElementById('livingRoom').className = 'device ' + (data.livingRoom === 'on' ? 'on' : 'off');
            document.getElementById('bedroom').className = 'device ' + (data.bedroom === 'on' ? 'on' : 'off');
            document.getElementById('kitchen').className = 'device ' + (data.kitchen === 'on' ? 'on' : 'off');
            document.getElementById('frontDoor').className = 'device ' + (data.frontDoor === 'open' ? 'open' : 'closed');
          });
+     }
@@ Zeile 167: / Zeile 175: @@
 </body>
 </html>

@@ Zeile 4: / Zeile 4: @@
 ==== Neues Verzeichnis für den Steuerungsserver erstellen ====
-*'''mkdir /usr/local/control-switch'''
+*mkdir /usr/local/control-switch
-*'''cd /usr/local/control-switch'''
+*cd /usr/local/control-switch
 ==== Initialisiere das Node.js-Projekt ====
-*'''npm init -y'''
+*npm init -y
 ==== Installiere die benötigten Pakete ====
-*'''npm install mqtt express'''
+*npm install mqtt express
 ==== Konfiguration des Steuerungsservers ====

@@ Zeile 189: / Zeile 189: @@
 ==== Steuerungsserver starten und beim Booten aktivieren ====
-*'''systemctl start control-switch.service'''
+*systemctl start control-switch.service
-*'''systemctl enable control-switch.service'''
+*systemctl enable control-switch.service

@@ Zeile 104: / Zeile 104: @@
 ==== Die HTML Datei index.html====
 <pre>
 <!DOCTYPE html>
-<html lang="de">
+<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-   <title>Haussteuerung</title>
+   <title>Control Center</title>
    <style>
      .device {
@@ Zeile 119: / Zeile 117: @@
        text-align: center;
        font-size: 1.5em;
+     }
      .on {
@@ Zeile 138: / Zeile 137: @@
    </style>
    <script>
      function fetchStatus() {
        fetch('/status')
          .then(response => response.json())
          .then(data => {
-           document.getElementById('wohnzimmer').className = 'device ' + (data.wohnzimmer === 'on' ? 'on' : 'off');
+           document.getElementById('livingRoom').className = 'device ' + (data.livingRoom === 'on' ? 'on' : 'off');
-           document.getElementById('schlafzimmer').className = 'device ' + (data.schlafzimmer === 'on' ? 'on' : 'off');
+           document.getElementById('bedroom').className = 'device ' + (data.bedroom === 'on' ? 'on' : 'off');
-           document.getElementById('kueche').className = 'device ' + (data.kueche === 'on' ? 'on' : 'off');
+           document.getElementById('kitchen').className = 'device ' + (data.kitchen === 'on' ? 'on' : 'off');
-           document.getElementById('haustuer').className = 'device ' + (data.haustuer === 'offen' ? 'open' : 'closed');
+           document.getElementById('frontDoor').className = 'device ' + (data.frontDoor === 'open' ? 'open' : 'closed');
          });
+     }
-     setInterval(fetchStatus, 1000); // Alle 1 Sekunde den Status abrufen
+    // Toggle a device and update its status
    </script>
 </head>
 <body>
-   <h1>Haussteuerung</h1>
+   <h1>Control Center</h1>
-   <div id="wohnzimmer" class="device off">Wohnzimmer Licht: Aus</div>
+   <div id="livingRoom" class="device off" onclick="toggleDevice('livingRoom')">Living Room Light: Off</div>
-   <div id="schlafzimmer" class="device off">Schlafzimmer Licht: Aus</div>
+   <div id="bedroom" class="device off" onclick="toggleDevice('bedroom')">Bedroom Light: Off</div>
-   <div id="kueche" class="device off">Küchen Licht: Aus</div>
+   <div id="kitchen" class="device off" onclick="toggleDevice('kitchen')">Kitchen Light: Off</div>
-   <div id="haustuer" class="device closed">Haustür: Geschlossen</div>
+   <div id="frontDoor" class="device closed" onclick="toggleDevice('frontDoor')">Front Door: Closed</div>
 </body>
 </html>

@@ Zeile 17: / Zeile 17: @@
 <pre>
 const mqtt = require('mqtt');
 const express = require('express');
 const path = require('path');
@@ Zeile 25: / Zeile 25: @@
 let status = {
-   wohnzimmer: 'off',
+   livingRoom: 'off',
-   schlafzimmer: 'off',
+   bedroom: 'off',
-   kueche: 'off',
+   kitchen: 'off',
-   haustuer: 'geschlossen'
+   frontDoor: 'closed'
 };
-// MQTT-Verbindung herstellen über TLS
+// MQTT connection options (without TLS for unencrypted communication)
 const options = {
    port: 1883,
-   host: 'mqtt.dkbi.int',
+   host: 'mqtt.dkbi.int'
 };
@@ Zeile 44: / Zeile 40: @@
 client.on('connect', () => {
-   console.log('Verbunden mit dem Broker');
+   console.log('Connected to the MQTT broker');
    client.subscribe('home/+/status', (err) => {
      if (!err) {
-       console.log('Alle Topics abonniert');
+       console.log('Subscribed to all topics');
+     }
    });
@@ Zeile 55: / Zeile 51: @@
    const room = topic.split('/')[1];
    status[room] = message.toString();
-   console.log(`Status von ${room}: ${status[room]}`);
+   console.log(`Status of ${room}: ${status[room]}`);
 });
-// API-Route für den Status der Lichter und Haustür
+// Route to get the status of the lights and front door
 app.get('/status', (req, res) => {
    res.send(status);
 });
-// Statisches Verzeichnis für die Webseite
+// Route to toggle a device
 app.use(express.static(path.join(__dirname)));
-// Starte den Webserver
+// Start the web server
 app.listen(port, () => {
-   console.log(`Webserver läuft auf http://localhost:${port}`);
+   console.log(`Control Center is running at http://localhost:${port}`);
 });
 </pre>

@@ Zeile 1: / Zeile 1: @@
 === Voraussetzungen ===
 *[[Voraussetzungen für Node.js-Projekt]]
 ==== Neues Verzeichnis für den Steuerungsserver erstellen ====

MQTT Visualisierte Steuerung Sensor - Versionsgeschichte

Thomas.will am 4. November 2024 um 14:21 Uhr

Thomas.will: /* Die HTML Datei index.html */

Thomas.will am 30. Oktober 2024 um 10:02 Uhr

Thomas.will: /* Steuerungsserver starten und beim Booten aktivieren */

Thomas.will: /* Steuerung der Geräte über HTTP */

Thomas.will: /* Die HTML Datei index.html */

Thomas.will: /* Konfiguration des Steuerungsservers */

Thomas.will: /* Voraussetzungen */

Thomas.will: Die Seite wurde neu angelegt: „=== Voraussetzungen === *Voraussetzungen für Node.js-Projekt ==== Neues Verzeichnis für den Steuerungsserver erstellen ==== *'''mkdir /usr/local/contr…“

Thomas.will: Die Seite wurde neu angelegt: „=== Voraussetzungen === Voraussetzungen für Node.js-Projekt ==== Neues Verzeichnis für den Steuerungsserver erstellen ==== '''mkdir /usr/local/contr…“