Garagentor in Vis darstellen (animiert) (Homematic)

Lenz2k3

Hallo!

Ich bin momentan dabei mir eine Visualisierung für meine Homematic mit iobroker.vis zu erstellen.

Erst einmal vorweg: Ich bin ein absoluter ioBroker-Neuling :D

Nun möchte ich gerne ein Widget so programmieren, dass es mir den Status des Garagentores anzeigt (Offen, geschlossen, Geht auf, Geht zu, angehalten). Dafür habe ich bereits eine funktionstüchtige Systemvariable in Homematic erstellt. Weiterhin möchte ich dies gerne animiert darstellen lassen. In vis habe ich auch schon super schicke Icons gefunden (Mfd icons as PNG) Dort gibt es ein Garagentor in verschiedenen Positionen (10 Prozent, 20 Prozent, usw).

Weiterhin soll das Widget auch anklickbar sein, also gleichzeitig als Button dienen. (Das könnte man ja später mit einem zweiten Widget lösen, welches unsichtbar über dem ersten liegt? Das ist wohl die einfachste Lösung?)

Hat jemand eine Idee wie man bzw. ich das möglichst sauber und einfach umsetzen kann? Brauche ich dazu javascript? Oder lässt sich das mit CSS lösen? Ich stehe leider total auf dem schlauch :(

In Homematic habe ich auch bereits eine Integer-Variable welche mir anzeigt, wie weit das Tor geöffnet ist. Die könnte man ja auch nutzen?

Vielen Dank und viele Grüße!

Der Lenz :ugeek:

Lenz2k3

Edit:

Gibt es nicht sogar ein Widget welches mir das relativ leicht anzeigen kann? Geht sowas nicht mit ValueList, der dann die "Prozentangaben-Variable" ausliest und einfach nur entsprechende Bilder anzeigt? Garagentor 10 Prozent -> Bild 1, Garagentor 20 Prozent Bild 2… usw.?

Die Prozentzahl bräuchte man ja in der Variable nicht mal. Ich könnte das ja in Homematic so einstellen, dass er einfach zahlen von eins bis zehn in die Variable schreibt...Nur in vis, weiß ich noch nicht so recht weiter :(

Bluefox

Passt diese widget für dich nicht?
48_2016-03-16_16_40_10-iobroker.vis.png

Wenn du es aber animiert haben willst, dann es ist eher so wie hqWidgets Shutter, oder?

Da kannst du diesen widget kopieren und alles abschneiden oder ausblenden, was du nicht brauchst.

Lenz2k3

Doch, das sieht super aus das Widget. Wie heißt das denn? Das habe ich nicht gefunden…

Edit: Ahhhh habs gefunden. Hatte die entsprechende Bibliothek nicht installiert

~~@Bluefox:~~

Da kannst du diesen widget kopieren und alles abschneiden oder ausblenden, was du nicht brauchst. `

Was meinst du damit? Und welches Widget genau?

Bluefox

~~@Lenz2k3:~~

Doch, das sieht super aus das Widget. Wie heißt das denn? Das habe ich nicht gefunden…

Edit: Ahhhh habs gefunden. Hatte die entsprechende Bibliothek nicht installiert

~~@Bluefox:~~

Da kannst du diesen widget kopieren und alles abschneiden oder ausblenden, was du nicht brauchst. `

Was meinst du damit? Und welches Widget genau? `
Ich meine Widget set hqWidgets und widget Shutter.

Es ist aber nicht SO trivial. ;)

Lenz2k3

So!

Ich habe es jetzt mit dem Standard-Widget "stateful image 8" hinbekommen.

Funktioniert super, jedoch wird wohl die SysVar der CCU 2 zu selten ausgelesen. Daher läuft das Tor nicht flüssig hoch sondern springt nur von auf nach zu oder vielleicht zeigt es auch noch mal einen Zwischenschritt an. Durch die Updatezeit im Widget verändert sich jedoch nichts. Wo stelle ich den Wert denn ein? Oder sollte man den nicht zu niedrig wählen? Ich hätte das gerne jede Sekunde oder alle zwei Sekunden (max) ausgelesen… :( Oder hat Polling in rega was damit zu tun? Der Wert steht aber auf 30 Sekunden. Das scheint mir aber deutlich öfter ausgelesen zu werden....stehe mal wieder auf dem Schlauch

Спасйбо!

pix

Hallo,

dieses Problem habe ich auch. Bei geht es aber um den CUxD-Timer. Die Werte werden nicht schnell genug in ioBroker eingelesen. Wie auch bei mir damals, geht es bei dir aber um eine Komfortfunktion (bzw. es geht um die coole Optik). Dafür würde ich nicht an der Kommunikation zwischen ioBroker und CCU basteln. Never change a …..

Versuch es mit GIF + PNG.

Du baust

ein GIF "Tor_gehtauf.gif", das geladen wird, wenn das Tor sich öffnet,
ein GIF "Tor_gehtzu.gif" für das Schliessen.
Dazu ein PNG, wenn Tor ganz offen steht (oder vorhandenes Icon kopieren) "Tor_stehtauf.png",
ein PNG, wenn Tor ganz zu steht "Tor_stehtzu.png" und
ein PNG, das Tor irgendwo dazwischen angehalten hat "Tor_stehthalb.png".

PNG deshalb, weil sich im Icon nix bewegt, wenn das Tor sich nicht bewegt und ein transparenter Hintergrund möglich ist.

Du könntest dann ein Javascript anlegen:

! ````
createState('Status.Garage.Tor.Icon', '', {
name: 'Zustand des Garagentores URL zum Icon',
type: 'string'
});
var idIcon = 'Status.Garage.Tor.Icon',
idGaragentor = 'DATENPUNKT GARAGENTOR'; // mit ID einfügen
! var urlIcon_geht_auf = '/vis.0/main/img/Tor_gehtauf.gif', // Du musst das Bild vorher in VIS hochladen
urlIcon_geht_zu = '/vis.0/main/img/Tor_gehtzu.gif',
urlIcon_steht_auf = '/vis.0/main/img/Tor_stehtauf.png' ,
urlIcon_steht_halb = '/vis.0/main/img/Tor_stehthalb.png' ,
urlIcon_steht_zu = '/vis.0/main/img/Tor_stehtzu.png' ;
! // ich gehe davon aus (wie Homematic Rolladenaktor):
// Tor zu 0%
// Tor offen 100%
on( idGaragentor, function (data) {
if (data.state.val > data.oldState.val) { // Tor geht auf, bewegt sich
setState(idIcon, urlIcon_geht_auf);
// kein Log, da sich der Logeintrag mehrfach wiedeholen würde
} else if (data.state.val == data.oldState.val || data.state.val > 99) { // Tor steht auf
setState(idIcon, urlIcon_steht_auf);
log('Garagentor ist ganz auf');
} else if (data.state.val < data.oldState.val) { // Tor geht zu, bewegt sich
setState(idIcon, urlIcon_geht_zu);
// kein Log, da sich der Logeintrag mehrfach wiedeholen würde
} else if (data.state.val == data.oldState.val || data.state.val < 2) { // Tor steht zu
setState(idIcon, urlIcon_steht_zu);
log('Garagentor ist ganz zu');
} else if (data.state.val == data.oldState.val || data.state.val < 99 || data.state.val > 2) { // Tor steht "halb" auf/zu [irgendwo zwischen nicht ganz auf und nicht ganz zu]
setState(idIcon, urlIcon_steht_halb);
log('Garagentor ist halb auf/zu');
}
});

Und schließlich packst du in ein IMG-Widget an die Stelle für den Pfad einfach {javascript.0.Status.Garage.Tor.Icon}

>! ````
[{"tpl":"tplImage","data":{"visibility-cond":"==","visibility-val":1,"refreshInterval":"0","refreshOnWakeUp":"false","refreshOnViewChange":"false","gestures-offsetX":0,"gestures-offsetY":0,"gestures-swiping-value":"","gestures-rotating-value":"","gestures-pinching-value":"","gestures-swipeRight-value":"","gestures-swipeLeft-value":"","gestures-swipeUp-value":"","gestures-swipeDown-value":"","gestures-rotateLeft-value":"","gestures-rotateRight-value":"","gestures-pinchIn-value":"","gestures-pinchOut-value":"","src":"{javascript.0.Status.Garage.Tor.Icon}"},"style":{"left":"209px","top":"726px","z-index":"40","background":"green"},"widgetSet":"basic"}]

Vorraussetzung, damit das Skript läuft:

Du hast die 5 Bilder mit den verwendeten Namen erstellt und in das Verzeichnis /vis.0/main/img/ kopiert oder mit VIS hochgeladen (ggf. Verzeichnis anpassen)
Du hast das Skript in Javascript Instanz 0 laufen
Dein Garagentor liefert bei geschlossenem Zustand 0% und bei offenem Zustand 100% (sonst nur falsche Darstellung)

Gruß

Pix

Lenz2k3

Hallo pix!

Das ist ja der absolute Wahnsinn wieviel Mühe Du dir gegeben hast! Tausend Dank dafür! Wirklich eine "Rundum-Sorglos-Behandlung".

Diese Variante werde ich vermutlich umsetzen. Dann werde ich mir mal die entsprechenden Bilder basteln :mrgreen:

Natürlich wäre es schöner gewesen in dem Icon direkt sehen zu können wie weit das Tor auf bzw zu ist. Aber in der Regel benötigt man es ja nicht! Ich lass das Tor ja schließlich immer ganz aufgehen!

Gibt es denn da keine dramatischen Verzögerungen mit der Javascript-Lösung? Schließlich muss da ja die System-Variable der CCU auch ausgelesen werden. Wann merkt er denn dann das er sich bereits öffnet oder das er angehalten wurde?

Viele Grüße,

Der Lenz

//Edit: Ich hab es jetzt nochmal mit dem Polling probiert. Wenn ich es auf 1 Sekunde stelle scheint es zu klappen. Ich möchte aber nicht, dass er ständig die CCU "nervt" und würde es daher lieber mit dem Trigger im CCU-Programm auslösen. Das funktioniert bei mir aber garnicht… :x

manne

Hallo,

Mir hat deine Idee mit dem JavaScript sehr gefallen, doch leider bekomme ich es nicht zum laufen, bestimmt ist der Datenpunkt nicht richtig gewählt.

IMG-Widget ist angelegt.

Die Bilder sind im richtigen Ordner angelegt

JavaScript.0 läuft

ein neues Skript habe ich angelegt mit dem Namen " Status.Garage.Tor.Icon " und dein komplettes Skript rein kopiert.

und über ID einfügen habe ich meine ID eingefügt idGaragentor = '"hm-rpc.0.MEQ0652701.1.LEVEL"/Markiese:1.LEVEL/'; // mit ID einfügen

doch leider ändert sich nichts.

was habe ich da falsch gemacht Java ist neu für mich

vielen Dank

pix

Hallo,

hab nicht viel Zeit, kannst du zum Test mal diese FUnktion anfügen?

on( idGaragentor, function (data) {

    log(data.state.val);
    log(data.oldState.val);
});

Und bitte poste, was geloggt wird, bei Bewegung des Tores.

Gruß

Pix

manne

Hallo,

vielen dank für deine Antwort ich habe es gleich eingefügt.

der Log sieht so aus:

10:04:37.193 [info] javascript.0 script.js.Status_Garage_Tor_Icon: 100

10:04:37.193 [info] javascript.0 script.js.Status_Garage_Tor_Icon: 80

10:04:37.381 [info] javascript.0 script.js.Status_Garage_Tor_Icon: 80

10:04:37.381 [info] javascript.0 script.js.Status_Garage_Tor_Icon: 100

10:04:52.350 [info] javascript.0 script.js.Status_Garage_Tor_Icon: 100

10:04:52.350 [info] javascript.0 script.js.Status_Garage_Tor_Icon: 80

eine Verbindung habe hin bekommen.

doch es werden nur die beiden gif´s angezeigt und keines der 3 png´s bei Animirten gift würden sie nicht stoppen

hier mal den JavaCode den ich eingefügt habe:

! createState('Status.Garage.Tor.Icon', '', { name: 'Zustand des Garagentores URL zum Icon', type: 'string' }); var idIcon = 'Status.Garage.Tor.Icon', idGaragentor = 'hm-rpc.0.MEQ0652701.1.LEVEL'/*Markiese:1.LEVEL*/; // mit ID einfügen ! var urlIcon_geht_auf = '/vis.0/main/img/Tor_gehtauf.gif', // Du musst das Bild vorher in VIS hochladen urlIcon_geht_zu = '/vis.0/main/img/Tor_gehtzu.gif', urlIcon_steht_auf = '/vis.0/main/img/Tor_stehtauf.png' , urlIcon_steht_halb = '/vis.0/main/img/Tor_stehthalb.png' , urlIcon_steht_zu = '/vis.0/main/img/Tor_stehtzu.png' ; ! // ich gehe davon aus (wie Homematic Rolladenaktor): // Tor zu 0% // Tor offen 100% on( idGaragentor, function (data) { if (data.state.val > data.oldState.val) { // Tor geht auf, bewegt sich setState(idIcon, urlIcon_geht_auf); // kein Log, da sich der Logeintrag mehrfach wiedeholen würde } else if (data.state.val == data.oldState.val || data.state.val > 99) { // Tor steht auf setState(idIcon, urlIcon_steht_auf); log('Garagentor ist ganz auf'); } else if (data.state.val < data.oldState.val) { // Tor geht zu, bewegt sich setState(idIcon, urlIcon_geht_zu); // kein Log, da sich der Logeintrag mehrfach wiedeholen würde } else if (data.state.val == data.oldState.val || data.state.val < 2) { // Tor steht zu setState(idIcon, urlIcon_steht_zu); log('Garagentor ist ganz zu'); } else if (data.state.val == data.oldState.val || data.state.val < 99 || data.state.val > 2) { // Tor steht "halb" auf/zu [irgendwo zwischen nicht ganz auf und nicht ganz zu] setState(idIcon, urlIcon_steht_halb); log('Garagentor ist halb auf/zu'); } log(data.state.val); log(data.oldState.val); }); !

vielen Dank Manne

pix

Hallo Mann,

Log sieht gut aus, kannst die beiden Zeilen wieder rausnehmen oder auskommentieren.

Sollte ich da Klammern vergessen haben?

! createState('Status.Garage.Tor.Icon', '', { name: 'Zustand des Garagentores URL zum Icon', type: 'string' }); var idIcon = 'Status.Garage.Tor.Icon', idGaragentor = 'hm-rpc.0.MEQ0652701.1.LEVEL'/*Markiese:1.LEVEL*/; // mit ID einfügen ! var urlIcon_geht_auf = '/vis.0/main/img/Tor_gehtauf.gif', // Du musst das Bild vorher in VIS hochladen urlIcon_geht_zu = '/vis.0/main/img/Tor_gehtzu.gif', urlIcon_steht_auf = '/vis.0/main/img/Tor_stehtauf.png' , urlIcon_steht_halb = '/vis.0/main/img/Tor_stehthalb.png' , urlIcon_steht_zu = '/vis.0/main/img/Tor_stehtzu.png' ; ! // ich gehe davon aus (wie Homematic Rolladenaktor): // Tor zu 0% // Tor offen 100% on( idGaragentor, function (data) { if (data.state.val > data.oldState.val) { // Tor geht auf, bewegt sich setState(idIcon, urlIcon_geht_auf); // kein Log, da sich der Logeintrag mehrfach wiedeholen würde } else if ((data.state.val == data.oldState.val) || (data.state.val > 99)) { // Tor steht auf setState(idIcon, urlIcon_steht_auf); log('Garagentor ist ganz auf'); } else if (data.state.val < data.oldState.val) { // Tor geht zu, bewegt sich setState(idIcon, urlIcon_geht_zu); // kein Log, da sich der Logeintrag mehrfach wiedeholen würde } else if ((data.state.val == data.oldState.val) || (data.state.val < 2)) { // Tor steht zu setState(idIcon, urlIcon_steht_zu); log('Garagentor ist ganz zu'); } else if ((data.state.val == data.oldState.val) || (data.state.val < 99) || (data.state.val > 2)) { // Tor steht "halb" auf/zu [irgendwo zwischen nicht ganz auf und nicht ganz zu] setState(idIcon, urlIcon_steht_halb); log('Garagentor ist halb auf/zu'); } //log(data.state.val); //log(data.oldState.val); }); !
Gruß,

Pix

manne

Hallo Pix,

kannst du mir noch sagen warum die png's nicht angezeigt werden.

gruß Manne

manne

Hallo,

ich habe mal ein bisschen herum experimentiert und mal eine Frage

wie kann ich in dem Skript eine abfange einbauen vom zustand des working

das Garagentor bewegt sich working = true

des Garagentor Steht working = false

ich möchte versuchen ein gif bei true laufen zu lassen

sonst nach deinem Script zb. bei 25% ein bild anzeigen lassen

gruß Manne

pix

~~@manne:~~

Hallo Pix,

kannst du mir noch sagen warum die png's nicht angezeigt werden.

gruß Manne `
Ist denn die Logausgabe korrekt, wenn das Tor sich bewegt? Steht, Fährt auf, Fährt zu oder so?

Deine zweite Frage im obigen Post habe ich gelesen. Theoretisch bewegt sich das Tor immer, wenn ein neuer Wert gesendet wird. Aber wenn es müsste eine Verzögerung eingebaut werden, damit die Variable nicht ständig von true auf false auf true springt, falls die Werte zu langsam reinkommen.

Sonst einfach so:

! ````
createState('Status.Garage.Tor.Icon', '', {
name: 'Zustand des Garagentores URL zum Icon',
type: 'string'
});
var idIcon = 'Status.Garage.Tor.Icon',
idGaragentor = 'hm-rpc.0.MEQ0652701.1.LEVEL'/Markiese:1.LEVEL/; // mit ID einfügen
! var urlIcon_geht_auf = '/vis.0/main/img/Tor_gehtauf.gif', // Du musst das Bild vorher in VIS hochladen
urlIcon_geht_zu = '/vis.0/main/img/Tor_gehtzu.gif',
urlIcon_steht_auf = '/vis.0/main/img/Tor_stehtauf.png' ,
urlIcon_steht_halb = '/vis.0/main/img/Tor_stehthalb.png' ,
urlIcon_steht_zu = '/vis.0/main/img/Tor_stehtzu.png' ;
! var working;
! // ich gehe davon aus (wie Homematic Rolladenaktor):
// Tor zu 0%
// Tor offen 100%
on( idGaragentor, function (data) {
if (data.state.val > data.oldState.val) { // Tor geht auf, bewegt sich
setState(idIcon, urlIcon_geht_auf);
working = true;
// kein Log, da sich der Logeintrag mehrfach wiedeholen würde
} else if ((data.state.val == data.oldState.val) || (data.state.val > 99)) { // Tor steht auf
setState(idIcon, urlIcon_steht_auf);
log('Garagentor ist ganz auf');
working = false;
} else if (data.state.val < data.oldState.val) { // Tor geht zu, bewegt sich
setState(idIcon, urlIcon_geht_zu);
working = true;
// kein Log, da sich der Logeintrag mehrfach wiedeholen würde
} else if ((data.state.val == data.oldState.val) || (data.state.val < 2)) { // Tor steht zu
setState(idIcon, urlIcon_steht_zu);
working = false;
log('Garagentor ist ganz zu');
} else if ((data.state.val == data.oldState.val) || (data.state.val < 99) || (data.state.val > 2)) { // Tor steht "halb" auf/zu [irgendwo zwischen nicht ganz auf und nicht ganz zu]
setState(idIcon, urlIcon_steht_halb);
working = false;
log('Garagentor ist halb auf/zu');
}
//log(data.state.val);
//log(data.oldState.val);
});


Gruß

Pix

PS: Warum die PNG nicht gezeigt werden, weiß ich nicht. Sind die Pfade und Dateinamen auch korrekt?

manne

Hallo,

ich habe mal das Skript geändert wie ich es gerne haben möchte doch es geht nicht da ich nicht weis wie ich working anbfragen muß.

! ````
createState('Status.Garage.Tor.Icon', '', {
name: 'Zustand des Garagentores URL zum Icon',
type: 'string'
});
var idIcon = 'Status.Garage.Tor.Icon',
idGaragentor = 'hm-rpc.0.MEQ0652701.1.LEVEL'/Markiese:1.LEVEL/;
! var urlIcon_0 = '/vis.0/main/img/Tor_0.png',
urlIcon_10 = '/vis.0/main/img/Tor_10.png',
urlIcon_20 = '/vis.0/main/img/Tor_20.png' ,
urlIcon_30 = '/vis.0/main/img/Tor_30.png' ,
urlIcon_100 = '/vis.0/main/img/Tor_100.png',
urlIcon_geht_auf = '/vis.0/main/img/Tor_gehtauf.gif';
! var working = "hm-rpc.0.MEQ0652701.1.WORKING"/Markiese:1.WORKING/;
! // ich gehe davon aus (wie Homematic Rolladenaktor):
// Tor zu 0%
// Tor offen 100%
on( idGaragentor, function (data) {

if (working = true) { setState(idIcon, urlIcon_geht_auf); }  else  

if (data.state.val === 0) { setState(idIcon, urlIcon_0); }
if (data.state.val == 10) { setState(idIcon, urlIcon_10); } 
if (data.state.val == 20) { setState(idIcon, urlIcon_20); } 
if (data.state.val == 30) { setState(idIcon, urlIcon_30); } 
if (data.state.val == 100) { setState(idIcon, urlIcon_100); }

! log('neu ' + data.state.val);
log('alt ' + data.oldState.val);
! });
! ````

die einzelnen Bilder werden angezeigt nur das gif jetzt nicht.

gruß Manne

Community Forum

NEWS

Garagentor in Vis darstellen (animiert) (Homematic)

Support us

704

32.6k

82.0k

1.3m