Ich möchte hier mein ioBroker SmartHome vorstellen. Da dies nur durch sehr viel Hilfe durch das Forum und anderer diverser Beiträge möglich war, kann ich vielleicht auch die ein oder andere Anregung weitergeben geben.

• Hauptseite (bei längerer Inaktivität wird per Script immer auf diese Seite geschaltet)
• Obere Zeile ist die Menueleiste (aktuell 9 Bereiche, diese werden alle weiter unten beschrieben
• Links oben Telefonliste der Fritz-Box laut tr-64 Adapter
• daneben ein paar Zustandsanzeigen
• in der Mitte werden Daten aus openWeather-Adapter visualisiert
• ganz rechts aktuelle Daten des Außenfühlers (HomeMatic-Adapter)
• Mitte der Verbrauch Shelly-Adapter (es steht gerade was auf dem Herd)
• daneben die Weltkugel (farbig ping zu google ok, grau keine Antwort)

• sofern ein Mülltermin im Kalender (outlook) erkannt wird, wird dieser Alert angezeigt
• auch wenn nicht angenommene Anrufe von der Fritzbox gemeldet werden, wird ein Alert angezeigt, beim jeweiligen quittieren wird der Alert wieder ausgeblendet

• hier kann ich verschiedene Lichtquellen schalten, überwiegend HomeMatic-Adapter aber auch Shelly etc.
• Gewisse Lichtsteuerungen laufen auch per Script, z.B. wenn Garage geöffnet wird, werden auch bestimmte Lichter angeschaltet
• Die Scripte liefen früher in der HomeMatic, ich habe diese aber alle auf ioBroker umgestellt (javascript ist mir irgendwie vertrauter als die Scripte der HomeMatic)

• Alles Homematic HeizkörperThermostate oder Fußboden-Stellmotoren mit Wandthermostaten.
• Hier sehe ich die Temperaturen in den Räumen
• Hier kann ich alle Sollvorgaben ändern (+ oder –Taste)
• Sehe die Ventilöffnungen
• Sehe die Luftfeuchtigkeit, sofern diese vom HomeMatic-Adapter geliefert werden (Nicht bei Heizkörperthermostaten, nur bei Wandthermostaten ???????)
• Kann den Modus ändern
• Habe einen Script wo ich die Sollvorgaben zeitlich steuern kann (Nachtabsenkung) zeige den aktuellen Zustand an und kann Ausnahmen definieren.
• Hier ist mit Scripten alles möglich

• Hier bekomme ich den Überblick über meine Heizungsanlage
• Die Werte kommen über
• E-Bus WOLF-Adapter (Gastherme und Sonnenkollektoren, MIscher)
• LEDA wasserführender Kachelofen (CAN-Bus-Adapter)
• Shelly Temperatursensoren
• Per Script ermittelte Brenner-Statistik-Daten
• Hier kann ich auch die Gastherme (Heizkreis oder Warmwasser) in den Stand-By- oder Automatik-Modus schalten

• Statistikseite (alle Heizungsdaten laufen in eine Datenbank und können per Flot-Visualisiert werden
• Es sieht erst mal nach einer Spielerei aus, aber mit Hilfe der Garfik habe ich erkannt, dass das Relais der Sonnekollektorsteuerung festgeklebt war und ich nachts das Dach geheizt habe ().
• Auch kann ich ganz gut sehen, wenn es notwendig ist den Kachelofen zu nutzen.
• Alles läuft über einen SQL-Adapter in eine Heidi-Datenbank
• Iobroker läuft auf einem Mini-PC mit Windows 11
• Zur Visualisierung habe ich ein nicht genutzte iPad genutzt, welches ich mit einer Wandhalterung im Treppenhaus-Bereich untergebracht habe

• Eine Übersicht über die Tür- und Fensterkontakte
• Rolladensteuerungen inbegriffen

• Stromverbrauch mit Shelly-Adapter und einer Summierung per Script

@homoran Hallo, also das Ganze ist etwas vom, "für wen, welche Visualisierung" zur Diskussion über responsiv Design geworden.
Meine persönliche Meinung hierzu ist, dass ich bisher noch kein gutes Design gesehen habe, welches auf einem PC-Monitor genauso gut funktioniert wie auf einem Handy. Wer sich mein Design mal angesehen hat, wie soll ich sowas auf einem Handy darstellen und warum sollte ich. Was sollen z. B. Diagramme die den Stromverbrauch oder die Temperaturen des Pufferspeichers über mehrere Tage darstellen, auf meinem Handy.
Bei meinem Wandtablet ist es wichtig, dass ich die Schalter (z.B. für die Außenbeleuchtung) immer an der exakt gleichen Stelle habe, da sonst eine Bedienung umständlich ist. Also für mich bedeutet das, zumindest zwei Designs zu pflegen, einmal für Handy (optimiertes Design auf die wichtigsten Funktionen die ich dort brauche) und einmal für den Rest.

@efxz da es ja sicherlich nicht auf jede Heizung passt, hier auch die AI-Datei zum anpassen / ändern: Pufferspeicher.ai

@meute
ich habe hier mal ein Bild meiner VIS Start-Seite:

Alles was dort zu sehen ist ist mit den Basic-Widgets aufgebaut. Ich hatte erst den Fehler gemacht, alle möglichen Widgets zu suchen und da gibt es wirklich sehr viel Schrott oder zumindest welche die nicht mehr funktionsfähig sind.
Wenn man versucht alles mit den Basic-Elementen und etwas JavaScript aufzubauen kann man eigentlich gute Ergebnisse mit VIS erreichen.

@pix
Hallo pix, kurz aber trotzdem super erklärt, da merkt man, dass jemand Ahnung hat und das Ganze auch schon mal umgesetzt hat, was ich manches mal bei anderen Einträgen vermisse. Ich habe damit mein modales Popup-Fenster erstellt, was mich immer einen Tag vorher erinnert die richtige Mülltonne rauszustellen und was auch nur verschwindet wenn ich bestätige, dass die Mülltonne drausen ist, gerade das mit der Sichtbarkeit über JS setzen und den z-Index waren wichtige hilfreiche Anmerkungen. Danke und Gruß Pim@PI

@meute Hallo, ich habe mich am Anfang mit VIS schwer getan, aber nach etwas Einarbeitungszeit komme ich ganz gut klar und man kann wirklich alles was man in html machen kann auch umsetzen. Bezüglich deiner Frage nach Beispielen hier meine VIS: https://forum.iobroker.net/topic/62971/smarthome-visualisierung-auf-ipad-mit-wandhalterung einfach mal anschauen!

@mcm1957 ok, ich werde das Thema dann als Issue auf der Adapterseite eintragen, also vielen Dank für die schneller und kompetenten Rückmeldung, Danke!

@mcm1957 habe es dann doch mit der iobroker UI hinbekommen!

@mcm1957 als ich jetzt im Log nachgesehen habe, ist mir folgende Warnung aufgefallen, hat aber wahrscheinlich nichts mit meinem Problem zu tun?

warn ical has an invalid jsonConfig: [{"instancePath":"/items/_calendars/items/calendars/items/5","schemaPath":"#/items/allOf/6/then/allOf/1/additionalProperties","keyword":"additionalProperties","params":{"additionalProperty":"width"},"message":"must NOT have additional properties"},{"instancePath":"/items/_calendars/items/calendars","schemaPath":"#/patternProperties/%5E.%2B/allOf/27/if","keyword":"if","params":{"failingKeyword":"then"},"message":"must match "then" schema"},{"instancePath":"/items/_calendars","schemaPath":"#/properties/items/patternProperties/%5E.%2B/allOf/9/if","keyword":"if","params":{"failingKeyword":"then"},"message":"must match "then" schema"},{"instancePath":"","schemaPath":"#/if","keyword":"if","params":{"failingKeyword":"then"},"message":"must match "then" schema"}]

@mcm1957 so, ich habe den Adapter auf 1.16.1 geupdatet, aber am Ergebnis hat sich nichts geändert, soll ich mal eine Musterdatei zur Verfügung stellen (:-))

@mcm1957 ok, ich versuche mal die Version zu installieren, habe das aber immer nur über iobroker gemacht, aber ich versuche und melde mich wieder!

Hallo, ich bin mir unsicher wo ich mein Problem anbringe, ob es wirklich ein Problem des Adapters ist kann ich aktuell gar nicht sagen.

Also ich benutze den iCal Adapter schon seit längerem und bisher ist mir das Problem gar nicht aufgefallen, alle Termine auf die ich geachtet habe, sind auch korrekt angekommen. (Hauptsächlich Müllabfuhranzeige und ein paar andere Termine) Jetzt hatte ich etwas Zeit und habe gesehen, dass jährlich wiederkehrenden Termine nicht auftauchen.

Ich habe etwas recherchiert, irgendwo habe ich gefunden, dass bei outlook ein Problem wäre weil dort z. B. 1.12.2024 0:00 als Start und 1.12.2024 0:00 als Ende steht und der Adapter dann meint dass der Termin ja 0 Sekunden lang ist und daher nicht existiert. Aber auch wenn ich 1.12.2024 23:59 eintrage wird der Termin nicht angezeigt.

Ich habe dann die debugstufe beim Adapter aktiviert und es werden dann alle Termine im Log angezeigt, auch die jährlichen Termine, aber beim ical.0.data.table oder auch ical.0.data.text fehlen die jährlichen Termine.

Kann mir hier einer weiterhelfen, vielleicht ist es ja nur ein versteckter Schalter etc.

• Adaptername: iCal Kalender
• Link zu Adapterrepository: https://github.com/hobbyquaker/ccu.io/tree/master/adapter/ical
• Adapterversion: 1.15.0
• js-controller Version: 6.0.9
• Admin Version: 7.1.5
• Hardwaresystem: Pi4
• Arbeitsspeicher: 3,7 GB
• Festplattenart: SD-Karte
• Betriebssystem: linux
• Nodejs-Version: 18.19.0
• NPM-Version: 10.2.3
• Installationsart: Skript
• Image, Docker genutzt: Nein

@homoran Hallo, also das Ganze ist etwas vom, "für wen, welche Visualisierung" zur Diskussion über responsiv Design geworden.
Meine persönliche Meinung hierzu ist, dass ich bisher noch kein gutes Design gesehen habe, welches auf einem PC-Monitor genauso gut funktioniert wie auf einem Handy. Wer sich mein Design mal angesehen hat, wie soll ich sowas auf einem Handy darstellen und warum sollte ich. Was sollen z. B. Diagramme die den Stromverbrauch oder die Temperaturen des Pufferspeichers über mehrere Tage darstellen, auf meinem Handy.
Bei meinem Wandtablet ist es wichtig, dass ich die Schalter (z.B. für die Außenbeleuchtung) immer an der exakt gleichen Stelle habe, da sonst eine Bedienung umständlich ist. Also für mich bedeutet das, zumindest zwei Designs zu pflegen, einmal für Handy (optimiertes Design auf die wichtigsten Funktionen die ich dort brauche) und einmal für den Rest.

@meute Hallo, ich habe mich am Anfang mit VIS schwer getan, aber nach etwas Einarbeitungszeit komme ich ganz gut klar und man kann wirklich alles was man in html machen kann auch umsetzen. Bezüglich deiner Frage nach Beispielen hier meine VIS: https://forum.iobroker.net/topic/62971/smarthome-visualisierung-auf-ipad-mit-wandhalterung einfach mal anschauen!

@efxz da es ja sicherlich nicht auf jede Heizung passt, hier auch die AI-Datei zum anpassen / ändern: Pufferspeicher.ai

@efxz ViewHeizung.txt mal ein Versuch! die Datei als .txt, hoffentlich nutzt es auch was.