Für eine bessere Übersicht aktualisiere ich jetzt immer diesen Beitrag mit der aktuellsten Version.
HTMLBox für die Visualisierung und das schalten der Anwesenheit von Bewohnern
Die Box kann bis zu 5 Bewohner abbilden.
Je Bewohner kann ein Foto hinterlegt werden. Wenn der Bewohner anwesend ist wird das Foto in Farbe dargestellt, bei Abwesenheit in sw. Bei bedarf kann über das Foto der Status des Bewohners umgeschaltet werden falls mal die Smartphone Ortung nicht funktioniert hat oder wie in meinem Beispiel der Besuchermodus aktiviert werden soll.
Installationsanleitung im Script.
Skript für die HTMLBox:
<?php
/*
Installation:
1. Eine String Variable erstellen und das Variablenprofil HTMLBox zuweisen. Diesen Code hier in ein Script kopieren, anpassen und ausführen. Für jeden Bewohner muss ein Ereigniss erstellt werden das bei Variablenänderung der Bool-Variable des Bewohners dieses Script hier ausführt.
2. Ein php Script erstellen (ich nenne es jetzt einfach mal webhook). Dieses Script ist das Ziel für den Webhook. Code aus dem Forum einfügen und speichern.
3. Webhook einrichten (Kategorie Kern Instanzen/Webhook) Neuen Webhook erstellen. Im Feld Hook anwesenheit eintragen.Bei Script das eben erstellte php Script (webhook) auswählen. Speichern...
4. Fotos der Bewohner: Seitenverhältnis am besten 1:1 (quadratisch) Die Schwarzweiss Darstellung (bei Abwesenheit) wird automatisch über CSS realisiert.
Es muss also je Bewohner nur 1 Farbbild bereitgestellt werden. Die Kreisdarstellung erfolgt ebenfalls über CSS und kann in diesem Script auch konfiguriert werden. (in Zeile 115, border-radius: 50% 50% 50% 50%)
Die Bilder müssen ins entsprechende Verzeichnis eurer Symcon Installation kopiert werden. Voreingestellt ist: /user/img/bewohner/
5. In diesem Script die Anwohner konfigurieren
*/
// Anwohner 1
$bewohner1_active = true; //Anwohner ein- oder ausblenden. true = aktiv, false = deaktiviert
$bewohner1_bool = "54558"; // Variablen ID einer Bool Variable die den aktuellen Status des Bewohners enthält. true = anwesend, false = abwesend
$bewohner1_id=1; //NICHT ÄNDERN
$bewohner1 = GetValueBoolean($bewohner1_bool); //NICHT ÄNDERN
$greyscale_bewohner1 = $bewohner1 ? "0%" : "100%"; //bei abwesenheit wird das Bild des Anwohners in Graustufen abgebildet
$name_bewohner1 = "Stephan"; // Anzeigename in der Visualisierung
$image_bewohner1 = "/user/img/bewohner/ssp.png"; //Dateiname vom Foto
// Anwohner 2
$bewohner2_active = true;
$bewohner2_bool = "38676";// Variablen ID einer Bool Variable die den aktuellen Status des Bewohners enthält. true = anwesend, false = abwesend
$bewohner2_id=2;//NICHT ÄNDERN
$bewohner2 = GetValueBoolean($bewohner2_bool);//NICHT ÄNDERN
$greyscale_bewohner2 = $bewohner2 ? "0%" : "100%";
$name_bewohner2 = "Simone"; // Anzeigename
$image_bewohner2 = "/user/img/bewohner/si.png";
// Anwohner 3
$bewohner3_active = true;
$bewohner3_bool = "57762";// Variablen ID einer Bool Variable die den aktuellen Status des Bewohners enthält. true = anwesend, false = abwesend
$bewohner3_id=3;//NICHT ÄNDERN
$bewohner3 = GetValueBoolean($bewohner3_bool);//NICHT ÄNDERN
$greyscale_bewohner3 = $bewohner3 ? "0%" : "100%";
$name_bewohner3 = "Besucher"; // Anzeigename
$image_bewohner3 = "/user/img/bewohner/besucher.png";
// Anwohner 4
$bewohner4_active = false;
$bewohner4_bool = "57762";// Variablen ID einer Bool Variable die den aktuellen Status des Bewohners enthält. true = anwesend, false = abwesend
$bewohner4_id=4;//NICHT ÄNDERN
$bewohner4 = GetValueBoolean($bewohner4_bool);//NICHT ÄNDERN
$greyscale_bewohner4 = $bewohner4 ? "0%" : "100%";
$name_bewohner4 = "Besucher"; // Anzeigename
$image_bewohner4 = "/user/img/bewohner/besucher.png";
// Anwohner 5
$bewohner5_active = false;
$bewohner5_bool = "57762";// Variablen ID einer Bool Variable die den aktuellen Status des Bewohners enthält. true = anwesend, false = abwesend
$bewohner5_id=5;//NICHT ÄNDERN
$bewohner5 = GetValueBoolean($bewohner5_bool);//NICHT ÄNDERN
$greyscale_bewohner5 = $bewohner5 ? "0%" : "100%";
$name_bewohner5 = "Besucher"; // Anzeigename
$image_bewohner5 = "/user/img/bewohner/besucher.png";
//URL zum Symcon Server
$serverIP = "http://192.168.0.134:3777";
$benutzername = "Benutzername";
$passwort = "Passwort";
//Schriftgröße der Namen
$schriftgroesse= '0.8em';
//Hier die Variablen ID der String Variable mit dem HTMLBox Profil eintragen.
$htmlbox = 46220;
// Ab hier nichts mehr ändern!!!!!!!!
$html = '
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0px;
position: fixed;
width: 100%;
height: 100%;
font-size: '. $schriftgroesse .'
}
.container_anwesenheit {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 33.33%;
text-align: center;
border: 0px solid #ccc;
}
.row2 {
padding-top: 5px;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body>
<div class="container_anwesenheit row1">
';
$bewohner_data = [
[$bewohner1_active, $name_bewohner1, $image_bewohner1, $greyscale_bewohner1, $bewohner1_id, $bewohner1_bool, $benutzername, $passwort],
[$bewohner2_active, $name_bewohner2, $image_bewohner2, $greyscale_bewohner2, $bewohner2_id, $bewohner2_bool, $benutzername, $passwort],
[$bewohner3_active, $name_bewohner3, $image_bewohner3, $greyscale_bewohner3, $bewohner3_id, $bewohner3_bool, $benutzername, $passwort],
[$bewohner4_active, $name_bewohner4, $image_bewohner4, $greyscale_bewohner4, $bewohner4_id, $bewohner4_bool, $benutzername, $passwort],
[$bewohner5_active, $name_bewohner5, $image_bewohner5, $greyscale_bewohner5, $bewohner5_id, $bewohner5_bool, $benutzername, $passwort],
];
foreach ($bewohner_data as list($active, $name, $image, $greyscale, $id, $id_bool, $benutzername, $passwort)) {
if ($active) {
$name = "bewohner" . $id;
$html .= <<<HTML
<div class="box">
<img
type="button"
src="{$image}"
onclick="anwesenheit('{$name}', '{$id_bool}', '{$benutzername}', '{$passwort}')"
style="width: 80%; filter: grayscale({$greyscale}); border-radius: 50% 50% 50% 50%;"
/>
</div>
HTML;
}
}
$html .= '
</div>
<div class="container_anwesenheit row2">
';
foreach ($bewohner_data as list($active, $name)) {
if ($active) {
$html .= <<<HTML
<div class="box">{$name}</div>
HTML;
}
}
$html .= '
</div>
<script>
function anwesenheit(name, id_bool, benutzername, passwort) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
// Hier kannst du auf die Antwort des Servers reagieren, wenn nötig
if (xhttp.readyState == 4 && xhttp.status == 200) {
console.log(xhttp.responseText);
}
};
// Öffnen Sie die Anfrage mit der POST-Methode
xhttp.open("POST", "' . $serverIP . '/hook/anwesenheit");
// Setze den Content-Type Header für POST-Anfragen
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Erstelle die Daten, die du senden möchtest (hier als URL-codierter String)
var data = "name=" + encodeURIComponent(name) + "&id_bool=" + encodeURIComponent(id_bool) + "&benutzername=" + encodeURIComponent(benutzername) + "&passwort=" + encodeURIComponent(passwort);
// Sende die Anfrage mit den Daten
xhttp.send(data);
}
</script>
</body>
</html>
';
SetValueString($htmlbox, $html);
Script für den Webhook:
<?php
$erwartete_benutzername = "Benutzername"; // Setze dies auf den tatsächlichen Benutzernamen in deinem System
$erwartetes_passwort = "Passwort"; // Setze dies auf das tatsächliche Passwort in deinem System
// Überprüfe, ob die benötigten Parameter gesetzt sind
if (!isset($_POST['benutzername']) || !isset($_POST['passwort']) || !isset($_POST['id_bool']) || !isset($_POST['name'])) {
header('HTTP/1.1 400 Bad Request');
echo "Fehlende Parameter";
exit();
}
// Überprüfe die Anmeldedaten
$benutzername = $_POST['benutzername'];
$passwort = $_POST['passwort'];
if ($benutzername !== $erwartete_benutzername || $passwort !== $erwartetes_passwort) {
header('HTTP/1.1 401 Unauthorized');
echo "Ungültige Anmeldedaten";
exit();
}
// Verarbeite die Anwesenheitsinformationen
$id_bool = $_POST['id_bool'];
$bewohner = $_POST['name'];
function toggleValue($id_bool) {
$value = GetValueBoolean($id_bool);
SetValue($id_bool, !$value);
}
switch ($bewohner) {
case 'bewohner1':
toggleValue($id_bool);
break;
case 'bewohner2':
toggleValue($id_bool);
break;
case 'bewohner3':
toggleValue($id_bool);
break;
case 'bewohner4':
toggleValue($id_bool);
break;
case 'bewohner5':
toggleValue($id_bool);
break;
}
viele Spaß mit der Box und gebt gerne Feedback ob alles funktioniert hat.
Viele Grüße
Stephan
Habe die Begrüßung, Automation und Favoriten deaktiviert und 
