Achtung, das nachfolgende Tutorial wird nicht mehr supported!

Tutorial Kachel Uhr + Wetter (optional: Müllabfuhr)

Diese Kachel ermöglicht die Darstellung der Digitaluhr, des aktuellen Wetters, der Wettervorschau, sowie optional der Müllabfuhr.
Die Steuerung der Anzeige Müllabfuhr erfolgt im Skript über den folgenden Schalter (Standard = false = aus):

show_waste = false;

Vorgehensweise:

1. Icons zu iQontrol hinzufügen
   waste_icons.zip

2. Skript für Erzeugung der Datenpunkte
   --> als neues Skript einfügen und einmal laufen lassen
   script_createDP.txt

3. Astro Skript für Unterscheidung Tag / Nacht und Anzeige Sonne / Mond-Icon
   --> als neues Skript einfügen und laufen lassen
   script_astro.txt

4. Den kompletten Inhalt der Datei clock.js in den Datenpunkt '0_userdata.0.Zeit.clock_html_js' schreiben.
   clock.js

5. Den kompletten Inhalt der Datei clock.css in den Datenpunkt '0_userdata.0.Zeit.clock_html_css' schreiben.
   clock.css

6. Skript für Erzeugung der notwendigen clock.js und clock.css Dateien im Ordner "iqontrol.meta".
   --> als neues Skript einfügen und einmal laufen lassen (die Datenpunkte aus 2. müssen existieren)
   script_createFiles.txt

7. Skript zur Darstellung der Uhr / Wetter Kachel
   --> als neues Skript einfügen, noch NICHT starten
   script_clock.txt
   Bevor ihr das Skript startet, müsst ihr ggf. einige Anpassungen vornehmen:

• IP des Rechners eintragen auf dem ioBroker läuft

let ip                  = '192.x.x.x';

• Im Skript werden die Icons aus dem Ordner "./../iqontrol.meta/userimages/usericons/Abfallentsorgung/" gezogen. Wenn der bei euch anders heißt, bitte anpassen.

• Für die Müllabführ habe ich eine ical Instanz (Kalender) und erstelle darauf basierend drei Datenpunkte in denen die verbleibenden Tage als String eingetragen werden, bspw. 21 Tage oder 2 Tage oder morgen (= 1 Tag) oder heute.
  Dafür existieren die folgenden drei Datenpunkte, die auch im Skript verwendet werden, wenn ihr die show_waste=true gesetzt habt. ggf. müsst ihr hier Anpassungen vornehmen.

0_userdata.0.Abfallentsorgung.Restabfall
0_userdata.0.Abfallentsorgung.Papiertonne
0_userdata.0.Abfallentsorgung.Gelber_Sack

8. Ihr benötigt eine Widget Kachel mit Background_HTML = Datenpunkt = 0_userdata.0.Zeit.clock_html.
   Für die Nutzung der Müllabfuhr muss zwingend die folgende Option in den Kacheleinstellungen aktiviert sein:
   

Als Größe empfehle ich 3x2, das sieht dann so aus (hoffentlich bei allen...):

9. Wenn ihr "show_waste=true" gesetzt habt, könnt ihr auf die Mülltonnen bzw. das Müllauto klicken, um den Button "0_userdata.0.Abfallentsorgung.Popup_Trigger" auf true zu setzen. Dahinter muss dann natürlich eine Folgeverarbeitung, als Beispiel könnte die so aussehen:
   script_popup.txt

Good to know:

• die aktuelle Konfiguration der Dateien clock.css und clock.js könnt ihr euch unter folgenden Links anschauen (Achtung IP auf euren Rechner anpassen) --> einfach im Browser als URL aufrufen

http://192.x.x.x:8082/iqontrol.meta/clock.js
http://192.x.x.x:8082/iqontrol.meta/clock.css

• wenn ihr den Inhalt der Dateien clock.js oder clock.css ändern wollt, müsst ihr den Inhalt der zugehörigen Datenpunkte clock_html_js bzw. clock_html_css ändern und anschließend einmalig das Skript aus 6. "script_createFiles.txt" ausführen, damit die Dateien im Ordner "iQontrol.meta" neu geschrieben werden.

So, das war`s erstmal von meiner Seite, mehr fällt mir momentan nicht ein.

Dann möchte ich meine iQontrol Visualisierung auch mal kurz zeigen

Kurz vorab:
Die Hauptansicht besteht nur aus einer View (Seite) und läuft unter der Instanz iqontrol.0, alle Verknüpfungen (Rollladen, Staubsauger, Sonos etc.) sind einzelne Instanzen, die per Popup aus der Main-View aufgerufen werden.

Seitdem ich diese „modulare“ Trennung habe, laden die Seiten schneller und ich habe auch keine Probleme mehr beim Import/Export der Konfiguration der einzelnen Instanzen.

So nun aber mal zu den Views.

Hauptseite (Main-View):

Rollladen:

Staubsauger (Roborock S50):

Fenster:

Licht:

Klingel:

Raspberry PI:

Sonos:

Das war's erstmal, sind nicht alle Views, aber die wichtigsten bzw. die auch aktiv wirklich genutzt werden.

In diesem Sinne, alles Gute und bleibt gesund!!!

Ich habe die Uhr Darstellung nochmal überarbeitet und Uhrzeit sowie Datum/Wochentag in extra "Boxen" gepackt.
Damit kann der Text nicht mehr nach links, rechts oder oben "wegrutschen", sondern bewegt sich nur innerhalb dieser Boxen.

Im Beispiel hier haben die Boxen eine Hintergrundfarbe und einen Rahmen, siehe Uhr links im Screenshot.
Beides lässt sich natürlich pro Box steuern bzw. auch ganz deaktivieren, siehe Uhr rechts im Screenshot.

Außerdem habe ich die Funktion noch etwas kommentiert, damit auch andere User verstehen, welche CSS Eigenschaft was macht. Für mich war das bis vor einigen Tagen auch Neuland...

Der neue Datenpunkt "0_userdata.0.Zeit.HTML_Uhrzeit_und_Datum_V4" wird automatisch angelegt.

Hier das komplette Skript:

fctInit();

schedule("*/10 * * * * *", function () {
  setState('0_userdata.0.Zeit.HTML_Uhrzeit_und_Datum_V4', fctUhrzeitDatum_V4());
})

function fctInit(){
    createString('0_userdata.0.Zeit.HTML_Uhrzeit_und_Datum_V4');
    setState('0_userdata.0.Zeit.HTML_Uhrzeit_und_Datum_V4', fctUhrzeitDatum_V4());
}

function createString(dp_name) {
    createState(
        dp_name, 
        "", 
        {
            name: "iQontrol Uhr",
            role: "value",
            read: true, 
            write: true, 
            desc: "manuell erzeugt", 
            type: "string", 
            def: ""
        });
}

function fctUhrzeitDatum_V4() {
    let Uhrzeit                 = String(formatDate(new Date(), "hh:mm"));
    let Datum                   = String(formatDate(new Date(), "DD.MM.YYYY"));
    let Wochentag               = String(formatDate(new Date(), "WW", "de"));
	
    let str_color_body      = '#005c78';
    let str_color_cell      = '#47575c';
    let str_color_font      = 'White';
    let str_position_font   = 'center'
    let str_HTML            = '';
    let str_HTML_style      = '';

    str_HTML_style = str_HTML_style + '<style>';
    str_HTML_style = str_HTML_style + 'body {background-color:' + str_color_body + ';}';
    str_HTML_style = str_HTML_style + 'article {display: flex;}';

    str_HTML_style = str_HTML_style + 'section {';
    //Rahmenfarbe und abgerundete Rahmenecken
    str_HTML_style = str_HTML_style + 'border-radius:5px;border-collapse:separate;border-color:Black;';
    //Hier kann der Rahmen der Section bestimmt werden. 0px = aus / 1px = dünner Rahmen usw.
    str_HTML_style = str_HTML_style + 'border:0px solid gainsboro;';
    //Außenabstand der Section nach oben, links und rechts
    str_HTML_style = str_HTML_style + 'margin-top:1vw;margin-left:14vw;margin-right:3vw;';
    //Innenabstände in der Section
    str_HTML_style = str_HTML_style + 'padding:0vw;';
    str_HTML_style = str_HTML_style + 'flex:1;';
    str_HTML_style = str_HTML_style + '}';

    str_HTML_style = str_HTML_style + 'p {';
    //Rahmenfarbe und abgerundete Rahmenecken
    str_HTML_style = str_HTML_style + 'border-radius:5px;border-collapse:separate;border-color:White;';
    //Hier kann der Rahmen der Boxen bestimmt werden. 0px = aus / 1px = dünner Rahmen usw.
    str_HTML_style = str_HTML_style + 'border:0px solid gainsboro;';
    //Außenabstand der Box nach oben
    str_HTML_style = str_HTML_style + 'margin:-1vw;';
    //Innenabstände in der Box
    str_HTML_style = str_HTML_style + 'padding:1vw;';
    //Zeilenhöhe
    str_HTML_style = str_HTML_style + 'line-height:1;';
    //Textausrichtung
    str_HTML_style = str_HTML_style + 'text-align:' + str_position_font + ';';
    //Wer keine Hintergrundfarbe für die Boxen will, kommentiert die nachfolgende Zeile aus oder löscht sie.
    str_HTML_style = str_HTML_style + 'background-color:' + str_color_cell + ';';
    //Schriftfarbe
    str_HTML_style = str_HTML_style + 'color:' + str_color_font + ';';
    str_HTML_style = str_HTML_style + '}';
    
    //Hier habt ihr die Möglichkeit, CSS Eigenschaften für jede Box einzeln einzutragen.
    //Bspw. könnt ihr hier eine separate Hintergrundfarbe einstellen, siehe box_datum, Hintergrundfarbe = rot
    //Außerdem steuert ihr hier die Schriftgrößen der einzelnen Boxen
    str_HTML_style = str_HTML_style + '.box_uhr {font-size:16vw;}';
    str_HTML_style = str_HTML_style + '.box_datum {font-size:6vw;background-color:red;}';
    str_HTML_style = str_HTML_style + '</style>';

    str_HTML = str_HTML_style;
    str_HTML = str_HTML + '<html><body><article><section>';
    str_HTML = str_HTML + '<p class="box_uhr"><b>' + Uhrzeit + ' Uhr</b></p>';
    str_HTML = str_HTML + '<p class="box_datum"><i>' + Wochentag + ', ' + Datum + '</i></p>';
    str_HTML = str_HTML + '</section></article></body></html>';

    return str_HTML;
}

Einmal mehr herzlichen Dank für die Ent- und Weiterentwicklung von iQontrol!!!

@vepman @dslraser

1. Die Remote Control ist in der MediaPlayer Kachel enthalten, kann optional ausgeblendet werden.
2. Für Farbtasten, Zahlen und das Trackpad (Direction) nutzt man einen DUMMY Datenpunkt (bei mir als type=string, bspw. 0_userdata.0.Heimkino.Aktionen.TV.Zahlen).
   Wenn man dann die Zahl 1 drückt, bekommt iQontrol den String "1" zurück, darauf muss man dann entsprechend reagieren und den Datenpunkt für "drücke 1" auslösen.
   --> dies setzt man um, indem man bei dem man den DUMMY Datenpunkt für Zahlen einfügt und dann rechts auf den Schraubenschlüssel drückt:
   

In der Target-Value List gibt man dann die Datenpunkte an, die bei den entsprechend zurückgelieferten Strings ausgeführt werden sollen:

Für das Trackpad habe ich den Datenpunkt "0_userdata.0.Heimkino.Aktionen.TV.Navigation" angelegt und die Config dahinter sieht so aus:

Bei allen anderen REMOTE_* Datenpunkten in der Mediaplayer Kachel gibt man einfach direkt die zu steuernden Datenpunkte an.

Ich hoffe das hilft euch ein bisschen weiter

@s-bormann sagte in Test Adapter iQontrol 1.2.x:

@blackeagle998 Hi, das ganze sieht schon ziemlich gut aus! Ggf. kann das noch mit eingebaut werden, um den Text bei Skalierung passend zu halten?: https://css-tricks.com/fitting-text-to-a-container/
VG!

Da hast du mich aber angefixt, jetzt ist einiges vereinfacht, bei mir funktioniert die Skalierung wunderbar.

@sigi234 @DocGame @CrazyFloyd @frankthegreat
Die Ausgabe erfolgt jetzt in einem neuen Datenpunkt "0_userdata.0.Zeit.HTML_Uhrzeit_und_Datum_V3", der wird automatisch bei Skriptstart angelegt, das muss nicht mehr manuell erfolgen!

Die Textausrichtung könnt ihr mit der Variablen "Schriftposition" einstellen, aktuell steht diese auf "center".
Sollte irgendwas mit den Größen bei euch nicht passen, müsst ihr mit den Werten "font-size:15vw" (Uhr) bzw. "font-size:6vw" (Datum) spielen bis es vernünftig aussieht.

Alles kopieren und als neues Skript einfügen:

fctInit();

schedule("*/10 * * * * *", function () {
  setState('0_userdata.0.Zeit.HTML_Uhrzeit_und_Datum_V3', fctUhrzeitDatum_V3());
})

function fctInit(){
    createString('0_userdata.0.Zeit.HTML_Uhrzeit_und_Datum_V3');
}

function createString(name) {
    createState(
        name, 
        "", 
        {
            name: "iQontrol Uhr V3",
            role: "value",
            read: true, 
            write: true, 
            desc: "manuell erzeugt", 
            type: "string", 
            def: ""
    });
}

function fctUhrzeitDatum_V3() {
	let Uhrzeit                 = String(formatDate(new Date(), "hh:mm"));
	let Datum                   = String(formatDate(new Date(), "DD.MM.YYYY"));
	let Wochentag               = String(formatDate(new Date(), "WW", "de"));
	
	let Hintergrundfarbe        = '#0489B1';
	let Schriftfarbe            = 'White';
    let Schriftposition         = 'center'
    //let Schriftposition         = 'right'

    let str_HTML                = '';
    let str_HTML_style          = '';

    str_HTML_style = str_HTML_style + '<style>';
    str_HTML_style = str_HTML_style + '.body {background-color:' + Hintergrundfarbe + ';}';
    str_HTML_style = str_HTML_style + '.content {';
    str_HTML_style = str_HTML_style + 'color:' + Schriftfarbe + ';';
    str_HTML_style = str_HTML_style + 'text-align:' + Schriftposition + ';';
    str_HTML_style = str_HTML_style + 'background-color:' + Hintergrundfarbe + ';}';
    str_HTML_style = str_HTML_style + '.fittext1 {font-size:15vw;line-height: 1;}';
    str_HTML_style = str_HTML_style + '.fittext2 {font-size:6vw;margin-top: 0;}';
    str_HTML_style = str_HTML_style + '</style>';

    str_HTML = str_HTML_style;
    str_HTML = str_HTML + '<html><body class="body">';
    str_HTML = str_HTML + '<div class="content">';
    str_HTML = str_HTML + '<span class="fittext1"><b>' + Uhrzeit + ' Uhr</b></span><br>';
    str_HTML = str_HTML + '<span class="fittext2"><i>' + Wochentag + ', ' + Datum + '</i></span>';
    str_HTML = str_HTML + '</div></body></html>';

	return str_HTML;
}

Hier stand Unsinn.

Aufruf zum voten für einen SOMFY Adapter über die SOMFY API "so open":
https://github.com/ioBroker/AdapterRequests/issues/240

Jeder der dafür ist, dass wir einen SOMFY Adapter brauchen, sollte unter oben genanntem Link im ersten Beitrag mit voten.

Warum das ganze:
Wegen der offenen SOMFY API "so open" habe ich Apollon77 gebeten, sich das mal anzuschauen und darüber nachzudenken, einen solchen Adapter zu erstellen. Dazu habe ich folgende Antwort erhalten:

Also Leute, auf geht's, ich hoffe auf rege Beteiligung!!!

DirtyAtze created this issue in ioBroker/AdapterRequests

closed Somfy Tahoma Adapter #240

@vepman
Eine Popup Kachel anlegen, meinen oben geposteten HTML Code kopieren und im Feld "HTML" einfügen, fertig.

Aufruf zum voten für einen SOMFY Adapter über die SOMFY API "so open":
https://github.com/ioBroker/AdapterRequests/issues/240

Jeder der dafür ist, dass wir einen SOMFY Adapter brauchen, sollte unter oben genanntem Link im ersten Beitrag mit voten.

Warum das ganze:
Wegen der offenen SOMFY API "so open" habe ich Apollon77 gebeten, sich das mal anzuschauen und darüber nachzudenken, einen solchen Adapter zu erstellen. Dazu habe ich folgende Antwort erhalten:

Also Leute, auf geht's, ich hoffe auf rege Beteiligung!!!

DirtyAtze created this issue in ioBroker/AdapterRequests

closed Somfy Tahoma Adapter #240

@tp1de
Doch das funktioniert über die Weboberfläche.
Ich möchte das aber aus einer eigenen Visualisierung heraus auslösen können.

@tp1de
Gibt es eine Möglichkeit das ems-esp per Datenpunkt oder HTTP Befehl neuzustarten?
Auf der Weboberfläche gibt es einen Button für den Restart, ich schaffe es aber nicht, dass von außen auszulösen.

@merlin123
Hast du einen Datenpunkt ems-esp.0.notifications und der hat als Wert ein leeres Array []?
Wenn ja, dann werden dort die Fehler hinein geschrieben, allerdings bleiben die da nicht drin stehen.
Ich habe neben dem EMS-ESP auch noch ein KM200 im Einsatz und da ist das Verhalten exakt so:
Heizung hat einen Fehler, der Datenpunkt notifications erhält kurz einen Wert mit dem Fehlercode und wird danach wieder geleert.

Schau doch mal in der Störungshistorie deiner Heizung, da müssten die Fehler ja drin stehen.
Bei einer Buderus muss man den Menü Button gedrückt halten, dann kommt das Service Menü, da in den Unterpunkt Diagnose und da auf die Störmeldungen. Ist jetzt aus dem Kopf, dürfte aber in etwa hinhauen.

@tp1de
Hi, meine Wärmepumpe wirft bei der Enteisung manchmal einen Fehler, den ich aktiv am Bedienelement (Buderus RC300) bestätigen muss, danach klickt es innen kurz und die WP läuft normal weiter.
Gibt es über die Datenpunkte eine Möglichkeit diese Bedienfeld-Bestätigung, also den Druck des Menübuttons zu bestätigen?
Bisher habe ich dazu keinen geeigneten DP gefunden, aber bei der Masse kann man das ja schon mal übersehen.

@m1k3f15h

let arr_schedules = [];
arr_schedules.push(
   schedule('0 2 * * *', async function () {
      // Inhalt der schedule Anweisung
   };
);

So würdest du einfach ein schedule in das Array packen, weißt dann aber nicht, auf welchem Index es liegt, außer du zählst vorher oder hinterher die Array Länge.
Löschen kannst du dann wie folgt:

// alle Schedules im Array löschen:
arr_schedules.forEach(el => {
   clearSchedule(el);
});

// oder gezielt das Schedule auf bspw. Index zwei (Array Index startet immer bei 0):
clearSchedule(arr_schedules[2]);

Hoffe das bringt dich etwas weiter.

@mriceg
https://forum.iobroker.net/topic/8169/anfrage-tahoma-somfy-io-adapter/448

Schau mal ob das hilft.

@tp1de
Hi, ich möchte gerne den Systemdruck überwachen und laut KM200 Schnittstellenbeschreibung, sollte dieser unter /heatSources/systemPressure oder alternativ /system/appliance/systemPressure verfügbar sein.
Leider existieren diese Datenpunkte nicht. Liefert das KM200 diese nicht oder kannst du die irgendwie mit ausgeben?

Danke vorab!

@tp1de
Moin, der Datenpunkt notifications bleibt solange befüllt, wie die Fehlermeldung an der Heizung angezeigt wird. Bestätige ich diese an der Heizung wird der Datenpunkt wieder ein leeres Array.

Perfekt so, besten Dank!

@tp1de

[{"cat":"-1","act":"A","dcd":"H01","ccd":5451,"orig":"8","t":"2023-11-18T19:04:20","dlv":"8","fc":"19"}]

dcd und ccd sind die Fehlerbezeichnungen.

Der Datenpunkt ist wieder ein leeres Array, allerdings weiß ich nicht, ob der geleert wurde, als ich an der Heizung die Fehlermeldung bestätigt habe. Muss ich beim nächsten Mal prüfen.

@tp1de
Kam grade die erste Fehlermeldung und der Datenpunkt wurde wie gewünscht befüllt, funktioniert also wieder.
Echt tausend Dank für die schnelle Anpassung, das erleichtert mir einiges!