Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[PeZi]

Nachdem ich zu Umsetzung meiner Hausautomation und deren Visualisierung viele Informationen aus diesem Forum nutzen konnte, möchte ich der Gemeinschaft auch etwas zurückgeben.
Da dies meine ersten Gehversuche in einem Forum sind, bitte ich um Nachsicht, wenn an der ein oder anderen Stelle Formfehler enthalten sind.
Hier mal ein erstes Foto zur Hardware meiner Visualisierung:

Verbaut ist ein 27" Touchscreen Iiyama ProLite T2754MSC, der mit der VESA-Halterung auf ein Holzbrett montiert ist. Mit diesem Brett ist die gesamte Konstruktion dann an der Wand befestigt. Da der Monitor in der Mitte deutlich "dicker" als am Rand ist, entsteht umlaufend zwischen Brett und Monitor ein ca. 3cm breiter Spalt, indem ein Raspberry Pi 4, die Netzteile sowie die Verkabelung untergebracht sind. Rechts unten seht Ihr die beiden Anschlusskabel für LAN und 230V. Auf WLAN habe ich bewusst verzichtet, da das System in meinem Fall damit zu instabil lief.
Auf dem Raspberry läuft lediglich ein Browser (Chromium) im Kiosk-Modus sowie die Treiber für den Monitor. Der IoBroker ist auf drei weiteren Raspi installiert. Dazu später mehr.
Die Einrichtung Touchscreen-Steuerung erfolgt gemäß:

Einrichtung der Touchscreen-Steuerung.pdf

Damit lässt sich dann der Monitor auch aus der Visualisierung ausschalten bzw. Helligkeit und Kontrast dimmen (z.B. für den Bildschirmschoner).

Zum oben dargestellten Home-Bildschirm:
ganz links die Navigationsleiste (In VIS als "View in Widget" umgesetzt)
oben links die Daten der PV-Anlage, darunter dein paar relevante Daten dazu,
Darunter ein Feld mit Informationen zum Wetter am Wohnort: Außentemperatur, Luftfeuchtigkeit und Luftdruck sowie jeweils rechts daneben Pfeile zum Trend.
Ganz unten ein Feld, welches die Anwesenheit der Hausbewohner anzeigt.
Diese wird über Bluetooth-Beacons am Schlüsselbund gemonitort. (Gemäß der Anzeige sind als drei Personen anwesend)
Rechts unten ein Bild der Türkamera, welches bei erkannter Bewegung auf den gesamten Monitor aufgezoomt wird.
Die übrigen Felder dürften selbsterklärend sein.

Meiner besseren Hälfte hat die "unruhige" Darstellung des Kalenders nicht gefallen (Durch die unterschiedlich breitenten Wochentage verschieben sich die übrigen Angaben in den einzelnen Zeilen unregelmäßig.
In einem Skript ist daher die Breite für die Spalte der Wochentage fix definiert. In diesem Skript sind auch die Wochentage ergänzt, da diese vom iCal-Adapter nicht zur Verfügung gestellt werden.

Das Ganze sieht aktuell jetzt so aus:

.Hier das das zugehörige Skript...

on({id: 'ical.0.data.html', change: 'any'}, function(obj) {
var terminliste=""; 
terminliste = (getState("ical.0.data.html").val);
var position = 0; //Startwert setzen
var suche = 0;
var tag = "";
var monat = "";
var tagtext="";
var laenge=terminliste.length

function wochentag(tag, monat) {
    let heute = new Date();
    if ((heute.getMonth()+1) <= monat) { //Monat wird im Bereich 0 bis 11 ausgegeben, daher "+1"
        var datumNeu = new Date(heute.getFullYear() +"," + monat +"," + tag);
    }
    else {
        var datumNeu = new Date((heute.getFullYear()+1) +", " + monat +", " + tag);
    }; 
    var tagZahl = datumNeu.getDay();
    var wochentage = ['So','Mo','Di','Mi','Do','Fr','Sa' ];
	var tagtext = wochentage[tagZahl];
    return tagtext;
}

do {
    suche = terminliste.indexOf('iCal-IOBroker">', position); 
    tag = terminliste.slice(suche+15, suche + 17);
    monat = terminliste.slice(suche+18, suche + 20);
    tagtext = '<span class="icalWochentag">' + wochentag(tag, monat) +'</span>';
    terminliste = terminliste.substring(0,suche+15) + tagtext + ' ' + terminliste.substring(suche+15,terminliste.length);
    position = suche+100;
} while (position < laenge);

setState("0_userdata.0.Termine", terminliste, true);

 });

...und das CSS zur Formatierung des Wochentags in VIS:

.icalWochentag{
    display: inline-block;
    width: 35px;
}

Dabei gibt es noch eine Baustelle, bei der ich auf Eure Hilfe hoffe:
Die Schleife läuft so lange, bis die Suchposition die Länge der Liste erreicht hat. Die Länge der Liste wird direkt nach deren Einlesen aus "ical.0.data.html" ermittelt.
In der Schleife des Skripts wird durch das Einfügen der Formatierungsinformationen der String aber mit jedem Schleifendurchlauf länger. Dadurch bricht die Schleife ab, bevor der letzte Eintrag bearbeitet wurde.
Mein Ansatz war, innerhalb der Schleife die Variable "laenge" bei jedem Durchlauf entsprechend zu vergrößern (laenge=laenge + 41;) . Da funktioniert allerdings nicht. Der Ergebnisstring ist völlige Grütze, teilweise stürzt sogar die javascript-Instanz oder gleich der ganze Raspi ab.
Habt Ihr dazu eine Idee?

Hier noch ein paar Erläuterungen zu den Inhalten im Navigationsbereich:
Der erste Button "Info" zeigt eine Liste der Telefonanrufe sowie diverse Informationen der Fritzbox.

Detail dazu in einem eigenen Topic:

https://forum.iobroker.net/topic/70697/anrufliste-und-infor-der-fritzbox

Wird fortgesetzt...