MQTT Visualisierte Steuerung Aktor: Unterschied zwischen den Versionen

Aus Xinux Wiki
Zur Navigation springen Zur Suche springen
Zeile 74: Zeile 74:
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Control Center</title>
+
   <title>Devices</title>
 
   <style>
 
   <style>
 
     .device {
 
     .device {
Zeile 83: Zeile 83:
 
       font-size: 1.5em;
 
       font-size: 1.5em;
 
     }
 
     }
     .on {
+
     .lamp-on {
       background-color: green;
+
       background-color: yellow;
 +
      color: black;
 +
    }
 +
    .lamp-off {
 +
      background-color: gray;
 
       color: white;
 
       color: white;
 
     }
 
     }
     .off {
+
     .door-open {
 
       background-color: red;
 
       background-color: red;
 
       color: white;
 
       color: white;
 
     }
 
     }
     .open {
+
     .door-closed {
      background-color: blue;
 
      color: white;
 
    }
 
    .closed {
 
 
       background-color: gray;
 
       background-color: gray;
 
       color: white;
 
       color: white;
Zeile 105: Zeile 105:
 
         .then(response => response.json())
 
         .then(response => response.json())
 
         .then(data => {
 
         .then(data => {
           document.getElementById('livingRoom').className = 'device ' + (data.livingRoom === 'on' ? 'on' : 'off');
+
           document.getElementById('livingRoom').className = 'device ' + (data.livingRoom === 'on' ? 'lamp-on' : 'lamp-off');
           document.getElementById('bedroom').className = 'device ' + (data.bedroom === 'on' ? 'on' : 'off');
+
           document.getElementById('bedroom').className = 'device ' + (data.bedroom === 'on' ? 'lamp-on' : 'lamp-off');
           document.getElementById('kitchen').className = 'device ' + (data.kitchen === 'on' ? 'on' : 'off');
+
           document.getElementById('kitchen').className = 'device ' + (data.kitchen === 'on' ? 'lamp-on' : 'lamp-off');
           document.getElementById('frontDoor').className = 'device ' + (data.frontDoor === 'open' ? 'open' : 'closed');
+
           document.getElementById('frontDoor').className = 'device ' + (data.frontDoor === 'open' ? 'door-open' : 'door-closed');
 
         });
 
         });
 
     }
 
     }
Zeile 116: Zeile 116:
 
</head>
 
</head>
 
<body>
 
<body>
   <h1>Control Center</h1>
+
   <h1>Devices</h1>
   <div id="livingRoom" class="device off">Living Room Light: Off</div>
+
   <div id="livingRoom" class="device lamp-off">Living Room Light</div>
   <div id="bedroom" class="device off">Bedroom Light: Off</div>
+
   <div id="bedroom" class="device lamp-off">Bedroom Light</div>
   <div id="kitchen" class="device off">Kitchen Light: Off</div>
+
   <div id="kitchen" class="device lamp-off">Kitchen Light</div>
   <div id="frontDoor" class="device closed">Front Door: Closed</div>
+
   <div id="frontDoor" class="device door-closed">Front Door</div>
 
</body>
 
</body>
 
</html>
 
</html>

Version vom 30. Oktober 2024, 13:41 Uhr

Voraussetzungen

Neues Verzeichnis für das Projekt erstellen

  • mkdir /usr/local/control
  • cd /usr/local/control

Initialisiere das Node.js-Projekt

  • npm init -y

Installiere die benötigten Pakete

  • npm install mqtt express

Konfiguration des Node.js-Servers

Erstelle die Datei server.js im Verzeichnis /usr/local/control mit folgendem Inhalt:

const mqtt = require('mqtt');
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

let status = {
  livingRoom: 'off',
  bedroom: 'off',
  kitchen: 'off',
  frontDoor: 'closed'
};

// MQTT-Verbindung herstellen
const client = mqtt.connect('mqtt://mqtt.dkbi.int:1883', {
  // username: 'xinux',
  // password: 'secret'
});

client.on('connect', () => {
  console.log('Connected to the broker');
  client.subscribe('home/+/status', (err) => {
    if (!err) {
      console.log('Subscribed to all topics');
    }
  });
});

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

// API route to get the status of the lights and front door
app.get('/status', (req, res) => {
  res.send(status);
});

// 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://0.0.0.0:${port}`);
});

HTML-Datei erstellen

Erstelle eine Datei index.html im selben Verzeichnis, die den Status der Lichter und des Haustüröffners anzeigt und eine visuelle Darstellung mit Farben bietet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Devices</title>
  <style>
    .device {
      margin: 20px;
      padding: 10px;
      border-radius: 10px;
      text-align: center;
      font-size: 1.5em;
    }
    .lamp-on {
      background-color: yellow;
      color: black;
    }
    .lamp-off {
      background-color: gray;
      color: white;
    }
    .door-open {
      background-color: red;
      color: white;
    }
    .door-closed {
      background-color: gray;
      color: white;
    }
  </style>
  <script>
    function fetchStatus() {
      fetch('/status')
        .then(response => response.json())
        .then(data => {
          document.getElementById('livingRoom').className = 'device ' + (data.livingRoom === 'on' ? 'lamp-on' : 'lamp-off');
          document.getElementById('bedroom').className = 'device ' + (data.bedroom === 'on' ? 'lamp-on' : 'lamp-off');
          document.getElementById('kitchen').className = 'device ' + (data.kitchen === 'on' ? 'lamp-on' : 'lamp-off');
          document.getElementById('frontDoor').className = 'device ' + (data.frontDoor === 'open' ? 'door-open' : 'door-closed');
        });
    }

    setInterval(fetchStatus, 1000); // Fetch status every second
  </script>
</head>
<body>
  <h1>Devices</h1>
  <div id="livingRoom" class="device lamp-off">Living Room Light</div>
  <div id="bedroom" class="device lamp-off">Bedroom Light</div>
  <div id="kitchen" class="device lamp-off">Kitchen Light</div>
  <div id="frontDoor" class="device door-closed">Front Door</div>
</body>
</html>

systemd-Unit erstellen

Erstelle eine Datei /etc/systemd/system/control.service mit folgendem Inhalt:

[Unit]
Description=Home Control Center

[Service]
Type=simple
WorkingDirectory=/usr/local/control
ExecStart=/usr/bin/node server.js
ExecStartPost=/bin/echo "Home Control Center Start"

[Install]
WantedBy=multi-user.target

Server starten

systemd-Service starten

  • systemctl start control.service

systemd-Service beim Booten starten lassen

  • systemctl enable control.service

Öffne deinen Browser und gehe zu

MQTT-Nachrichten senden

Zuerst definieren wir die Variable für den MQTT-Server:

Definiere die Variable für den MQTT-Server

  • export MQTTSERVER=mqtt.dkbi.int

Licht im Wohnzimmer einschalten

  • mosquitto_pub -h $MQTTSERVER -t home/wohnzimmer/status -m "on"

Licht im Wohnzimmer ausschalten

  • mosquitto_pub -h $MQTTSERVER -t home/wohnzimmer/status -m "off"

Haustür öffnen

  • mosquitto_pub -h $MQTTSERVER -t home/haustuer/status -m "offen"

Haustür schließen

  • mosquitto_pub -h $MQTTSERVER -t home/haustuer/status -m "geschlossen"