NEWS
[gelöst]animierter Schnee - mir fehlt der letzte Gedanke
-
CSS Allgemein / opacity:
{a:sensor1;b:sensor2;a <= "0" && b == "1" ? 1 :: 0} ```` `
Nur um sicher zu gehen; ich habe in den CSS Allgemein im Feld opacity folgendes eingegeben:
{a:hm-rpc.0.LEQ9999999.1.TEMPERATURE;b:hm-rpc.1.CUX0304142.1.STATE;a <= "0" && b == "1" ? 1 :: 0}
Wäre das so richtig?
Aber egal was ich versuche, das Script startet immer - besser gesagt, die Flocken sind immer da.
Ich stelle gerade fest, dass meine Browser machen, was sie wollen. Wenn ich 20x reload ohne Cache drücke, dann kommt mal Schnee, mal nicht.
Firefox will gar nichts mehr darstellen. Ich glaube, hier macht mir der Cache immer weider mal ein x für ein u vor.
Frage: Wie kann ich den Ausdruck oben mit den Sensoren "sehen" - also wo/in welcher Datei ist er drinnen als Wert? Ich habe nicht eine CSS gefunden (F12 im Chrome), wo die opacity überhaupt drinnen ist. Ich möchte es gerne wie üblich mit chrome oder FF analysieren.
-
Hallo Fitti,
bei dem Code von "Bluefox" braucht man kein Html Widget.
Einfach bei Skripte einfügen und es schneit. Vielen dank dafür Bluefox
Wie man deine Bedingungen einfügt weiß ich leider nicht.
Ich denke auch das es nicht über die Sichtbarkeit gehen wird.
Eher über eine if abfrage im Skript..
-
Dann h~~@Home4.0:~~
bei dem Code von "Bluefox" braucht man kein Html Widget.
Einfach bei Skripte einfügen und es schneit. Vielen dank dafür Bluefox `
Dann ist es ja identisch zu meinem Skript.Das verlinkte Script von Bluefox ist einfach zu mächtig.
Mein kopiertes ist da doch wesentlich schlanker und verbraucht weniger ressourcen.
Ich hatte auch schon das Skript angepasst
// init flake
…
el.style.opacity = '1.0';
Das geht auch - aber wie nur in Abhängigkeit mit meinen beiden Sensoren? :?
Selbst wenn ich die Zeile oben mit if Abhängigkeiten auf die Sensoren hinbekomme --> müsste das skript ja bei Bedarf sich dann Abschalten.
Hier ist die Crux, weshalb ich einen Teil auf ein Widget ausgelagert hatte.
Nun gut... man könnte auch ein animiertes Gif im Widget verwenden. Nur da klappt es ja auch nicht mit den beiden Sensoren, wie oben beschrieben.
-
Nun gut… man könnte auch ein animiertes Gif im Widget verwenden. Nur da klappt es ja auch nicht mit den beiden Sensoren, wie oben beschrieben. `
Schrieb's und machte das Ganze noch performanter und einfacher. Nur drei kleine Bilder und ein bissl CSS3.Und das Ganze sieht schon mal genial aus. Butterweich und nahezu keine Ressourcen 8-) .
Das geht sogar im Editor. :ugeek:
<u>Klick das Bild für eine Animation:</u>
578_leiserieseltderschnee.gif -
Auch nicht schlecht.
Kannst du denn die gif's in den Vordergrund legen und trotzdem alles bedienen?
-
Jain. Es sieht zwar so aus, aber durch den z-index kann man das steuern. Jedoch es geht alles, so wie ich es mir wünsche. Und ich habe wirklich eine Menge an Buttons drauf. Die opacity mit zwei Aktoren habe ich nun auch hinbekommen:
{mytemp:hm-rpc.0.LEQ999999.1.TEMPERATURE;rainsignal:hm-rpc.1.CUX0304142.1.STATE;mytemp <= "3.0" && rainsignal == "true" ? 1 : 0}
(klick Bild für Animation) Die kleinen Grafikfehler kommen vom Rendern der Animation.
578_snowing_ii.gif -
ich habe eine config seite da drin kann ich die design farbe usw einstellen.
Es wäre doch möglich eine Checkbox einzufügen für den Schnee.
Einer einen Tip wie ich das machen kann?
-
ich habe eine config seite da drin kann ich die design farbe usw einstellen.
Es wäre doch möglich eine Checkbox einzufügen für den Schnee.
Einer einen Tip wie ich das machen kann? `
Ich bin nicht ganz sicher, das Komma an der richtigen Stelle zu lesen…
(also was Du genau meinst, verstehe ich nicht).
Jedoch: Durch eine Checkbox kannst Du doch eine Variable setzen.
Und diese kannst Du dann wieder über die Opacity, so wie in der Beispielcodezeile gezeigt, abfragen.
Oder wenn es nur eine einzige Abfrage ist, dann über die "Sichtbarkeit" gehen.
-
checkbox schnee an oder schnee aus
-
<u><size size="150">Anleitung zum Nachbauen</size></u>
Für die, die es auch nachbauen wollen, hier der Link zum Ideengeber: https://fastwp.de/2677/
Das Ganze besteht einfach nur aus drei PNG Bilder mit Alphakanal (transparenter Hintergrund) (unter dem Link herunter ladbar).
Das Ganze besteht also nur aus drei PNG-Bilder, etwas CSS und einem Widget zur Steuerung der Größe der Bilder und der Sichtbarkeit.
Ich habe die Bilder mittels Dateimanager in vis rein geladen.
Im CSS Bereich habe ich dann folgendes eingegeben:
#w00207 { background-image:url('http://192.168.123.321:8082/vis.0/main/img/schnee1.png'),url('http://192.168.123.321:8082/vis.0/main/img/schnee2.png'),url('http://192.168.123.321:8082/vis.0/main/img/schnee3.png'); -webkit-animation:schnee 2s linear infinite; -moz-animation:schnee 2s linear infinite; -ms-animation:schnee 2s linear infinite; animation:schnee 2s linear infinite; } @keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%{background-position:500px 1000px,400px 400px,300px 300px}}@-moz-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%{background-position:500px 1000px,400px 400px,300px 300px}}@-webkit-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%{background-position:500px 1000px,400px 400px,300px 300px;}}@-ms-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%{background-position:500px 1000px,400px 400px,300px 300px}}
#w00207 ist dabei das HTML Widget, welches ich dafür angelegt habe.
Hinweis: Bei mir zeigt der CSS Bereich Fehler an, die aber ignoriert werden können.
Ich weiß nicht, ob der Bilder-Aufruf nicht noch einfacher als mit der gesamten URL erfolgen kann, aber so mache ich es seit Jahren und es geht. Natürlich lasse ich iobroker nicht aus mein Haus raus, weshalb hier auch keine Probleme zu erwarten sind.
Das HTML-Widget ist wie gesagt nur zur Größenbestimmung und der Sichtbarkeits-Steuerung vorhanden.
Der Schnee soll nur angezeigt werden, wenn die Temperatur unter 3°C sinkt und der Regenmelder Regen/Schnee erkennt.
Hier noch einmal zur Vollständigkeit meine CSS Allgemein opacity:
{mytemp:hm-rpc.0.LEQ999999.1.TEMPERATURE;rainsignal:hm-rpc.1.CUX0304142.1.STATE;mytemp <= "3.0" && rainsignal == "true" ? 1 : 0}
Die Last ist erstaunlich gering.
Durch die z-index Variable kann man schön die Ebene bestimmen, wo der Schnee sein soll. Somit funktionieren auch noch Buttons oder andere Widgets.
Viel Spaß, falls es jemand nachbauen möchte.
So long,