[gelöst]animierter Schnee - mir fehlt der letzte Gedanke

Fitti

<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,

Fitti
578_2017-12-28_23_25_11-edit_vis.png

holly200289

ich habe versucht das Skript in der Vis zu verwenden, genau so wie es hier steht, nur kommt bei mir nichts.

BananaJoe

@holly200289 hast du denn auch die Bilder hinterlegt und die URLs angepasst?

holly200289

nein ich habe schon bei googel gesucht, aber noch nichts gefunden

holly200289

Da muss ich eine vorlage hinterlegen richtig, von dieser wird alles abgeleitet ?

OliverIO

@holly200289

der thread ist zwar uralt, da aber dennoch wird nach einer lösung gefragt. hier für vis1

Schritt 1:
Skript von folgender Adresse kopieren
und im Skriptreiter von vis eintragen/ergänzen
https://www.go4u.de/files/javascript/snowflakes/snowflakes.js

Schritt2:
neues html widget platzieren

Schritt3:
folgende skripte in das html feld des html widgets eintragen.

skript ohne bedingungen

<script>
snowflakes.start();
</script>

skript mit bedingungen

ich habe hier mal 2 datenpunkte gewählt, anhand deren dann bedingt das skript gestartet oder
das skript ist nun auf datenpunkte vom typ number eingestellt.
wer bspw string datenpunkte einfügen möchte, muss um den binding ausdruck noch anführungszeichen machen. der binding ausdruck ist sozusagen als platzhalter zu sehen, an deren stelle dann der reale wert nackt eingetragen wird. im ergebnis muss gültiges javascript herauskommen, sonst funktioniert es nicht. mit F12/Console kann nach fehler gescuht werden.
eine schleife ist ebenfalls nicht ntwendig, da das skript voll automatisch bei jeder dp änderung aufgerufen wird und die aktualisierten werte eingetragen werden.

<script>
let t1 = {0_userdata.0.t1};
let t2 = {0_userdata.0.t2};
if (t1>10 && t2>10) {
    snowflakes.start();
} else {
    snowflakes.stop();
}
</script>

holly200289

@oliverio Super vielen dank das funktioniert schonmal super

holly200289

@oliverio Könnte ich das auch mit der Temperatur koppeln ?

Chaot

@oliverio Danke für die Erklärung.
Eine Frage hätte ich noch

Die Schneeflocken kommen bei mir nur auf dem Hintergrund. Ich habe den Z-Index des Html Widgets auf 50 gesetzt und immer noch den gleichen Effekt. Gibt es da einen Trick?

Edit:
In deinem Temperaturscript ist ein kleiner Fehler:

<script>
let t1 = {0_userdata.0.t1};
let t2 = {0_userdata.0.t2};
if (t1<10 && t2<10) {
    snowflakes.start();
} else {
    snowflakes.stop();
}
</script>

Es soll ja vermutlich bei Temperaturern UNTER 10°C auslösen (Zeile 4)

Chaot

@holly200289 Siehe das letzte script.
Den oder die Datenpunkte auswählen und anstelle von

0_userdata.0.t1

bzw. t2 dann deinen Datenpunkt eintragen.
In Zeile 4 dann deine Auslösetemperatur eintragen (10° ist bischen warm für Schnee)

Bei nur einem Datenpunkt sollte es dann theoretisch so funktionieren:

<script>
let t1 = {sonoff.0.BLE_Sensoren.xxxxxxx_Temperature};

if (t1<4) {
    snowflakes.start();
} else {
    snowflakes.stop();
}
</script>

OliverIO

@holly200289 sagte in [gelöst]animierter Schnee - mir fehlt der letzte Gedanke:

Könnte ich das auch mit der Temperatur koppeln ?

ja, du musst dann anhand des beispiels mit bedingungen nur deine temperatur aus dem datenpunkt auslesen und in der logik ggfs mit anpassen.

OliverIO

@chaot sagte in [gelöst]animierter Schnee - mir fehlt der letzte Gedanke:

In deinem Temperaturscript ist ein kleiner Fehler

du hast t mit temperatur interpretiert?
die logik war nur beispielhaft. ich gehe davon aus, das die logik (größer als, kleiner als) überschaubar ist und das jeder selbst dann so anpassen kann wie man will

OliverIO

@chaot sagte in [gelöst]animierter Schnee - mir fehlt der letzte Gedanke:

Die Schneeflocken kommen bei mir nur auf dem Hintergrund. Ich habe den Z-Index des Html Widgets auf 50 gesetzt und immer noch den gleichen Effekt. Gibt es da einen Trick?

ich habe mir mal den code angeschaut. die schneeflocken hängen nicht von den Einstellungen des widgets ab. sie werden dynamisch erzeugt und in das html eingefügt.

du kannst im folgenden bereich die zeile mit dem zindex ergänzen

		// init flake
		s = f.el.style;
		s.transform = 'translate(0, -' + f.size + 'px)';
		s.color = randomItemFromArray(config.color);
		s.family = randomItemFromArray(config.fontType);
		s.fontSize = f.size + 'px';
		s.zIndex = 100;

Chaot

@oliverio sagte in [gelöst]animierter Schnee - mir fehlt der letzte Gedanke:

s.zIndex = 100;

Danke das wars.
Ich war etwas irritiert, weil oben in Zeile 60 bereits ein Z-Index eingetragen ist. aber jetzt funktioniert ja alles so wie ich mir das wünsche. Ganz herzlichen Dank.

OliverIO

@chaot sagte in [gelöst]animierter Schnee - mir fehlt der letzte Gedanke:

war etwas irritiert, weil oben in Zeile 60 bereits ein Z-Index

du meinst in den uralt-posts?
da stehen 2 scripts, einmal von bluefox ein jquery plugin und eine alte version von diesem snowflakes skipt. die habe ich gar nicht probiert, sonder eine aktualisierte version des snowflakes skript gefunden.

Chaot

@oliverio
Nein, ich meinte schon das Script aus dem von dir geposteten Link.

// start snow
	function start(userConfig)
	{
		if (running)
			return;

		running = true;
		config = mergeObjects(userConfig || {}, defaultConfig);
		resize();

		// add new flakes
		while (config.amount > flakes.length)
			createFlake(flakes.length);

		// init snowflakes
		if (!initialized)
		{
			initialized = true;
			window.addEventListener('resize', resize);

			let style = document.createElement('style');
			style.innerHTML = '.js-anim-snowflake { user-select: none; position: absolute; left: 0; top: 0; zIndex: 20000; }';
			document.getElementsByTagName('head')[0].appendChild(style);

			lastInterval = time();
			window.requestAnimationFrame(move);
		}

(hier Zeile 22)

OliverIO

@chaot

ahja,
das geht auch, allerdings hat der author hier die javascript-schreibweise verwendet, die falsch ist.
bei css-Anweisungen muss man "z-index" verwenden
https://developer.mozilla.org/de/docs/Web/CSS/z-index

Chaot

@oliverio Ah, ok. Daher die verwirrung meinerseits.
Aber mit deiner Änderung funktioniert das jetzt wie gewünscht.
Bei der Gelegenheit noch gemerkt, dass mein zweiter Außensensor scheinbar seit Heiligabend ausgefallen ist. Man hat ja sonst Langeweile....

OliverIO

@chaot sagte in [gelöst]animierter Schnee - mir fehlt der letzte Gedanke:

ausgefallen

kannst ja auf internet temperatur umstellen temporär

BananaJoe

@chaot sagte in [gelöst]animierter Schnee - mir fehlt der letzte Gedanke:

@holly200289 Siehe das letzte script.
Den oder die Datenpunkte auswählen und anstelle von
0_userdata.0.t1
bzw. t2 dann deinen Datenpunkt eintragen.
In Zeile 4 dann deine Auslösetemperatur eintragen (10° ist bischen warm für Schnee)

Bei nur einem Datenpunkt sollte es dann theoretisch so funktionieren:
<script>
let t1 = {sonoff.0.BLE_Sensoren.xxxxxxx_Temperature};

if (t1<4) {
    snowflakes.start();
} else {
    snowflakes.stop();
}
</script>

wird das dann nicht nur einmal beim laden der VIS geprüft?

Community Forum

NEWS

[gelöst]animierter Schnee - mir fehlt der letzte Gedanke

Support us

759

32.4k

81.4k

1.3m