NEWS
Bilder alle x Sekunden wechseln
-
Ich möchte meinen Mähroboter symbolisch im Übersichtsview herumfahen lassen.
Dafür habe ich jetzt testweise 6 Bilder produziert, wo Dolly (=Ladroid S) immer an einer ander Stelle positioniert ist. In einem "basic-Image 8" kann ich x Bilder je nach bestimmten Wert einblenden. Ich suche jetzt eine elegante Lösung die Bilder alle 1-3 Sekunden zu wechseln. Mir widerstrebt aus Performancegründen ein Script zu schreiben, dass einen Datenpunkt alle 1-3 Sekunden mit einem anderen Wert befüllt. Eine Schleife wäre auch eine Möglichkeit.
Wisst ihr, oder habt ihr eine Idee für, einen eleganteren Weg?
LG, mxa
-
Wenn die Liste der Bilder dynamisch sein soll, kannst du ja in einen datenpunkt eine Array mit allen Bildpfaden als Json schreiben.
Ein Skript in der visualisierung mit settimeout oder setinterval wechselt dann alle paar Sekunden das Bild . -
Wenn die Liste der Bilder dynamisch sein soll, kannst du ja in einen datenpunkt eine Array mit allen Bildpfaden als Json schreiben.
Ein Skript in der visualisierung mit settimeout oder setinterval wechselt dann alle paar Sekunden das Bild .@OliverIO Hi!
Ja ........ hmhmm ....... da habe ich mich wohl mit den "Script schreiben" ein wenig zu weit rausgelehnt. Besser wäre gewesen, ich kann mir in Blockly was zusammenklicken.
@OliverIO sagte in Bilder alle x Sekunden wechseln:
Wenn die Liste der Bilder dynamisch sein soll, kannst du ja in einen datenpunkt eine Array mit allen Bildpfaden als Json schreiben.
Da steige ich schon aus.
@OliverIO sagte in Bilder alle x Sekunden wechseln:
Ein Skript in der visualisierung mit settimeout oder setinterval wechselt dann alle paar Sekunden das Bild .
Das klingt sehr vernünftig, da ja die Arbeit aus das jeweilige Device ausgelagert wird. Aber leider, das ist mir eine Nummer zu groß.
Lieben Dank Oliver für deine Idee!
LG, mxa -
Ich finde, blockly ist nur vermeintlich einfacher wie Java Skript,
Da ja man nur die symbolische Repräsentation von Javasvript befehlen zusammenklickt
Mach doch einfach mal ein JavaScript Tutorial durch und du wirst sehen, das es gar nicht so schwer ist. -
habe mal etwas getestet - mit bindings
ein widget mit einem datenpunkt als img-quelle
im datenpunkt (string/text) steht die quelle des bildes -
jetzt kannst du ganz simple ein blockly schreiben: trigger alle 25 sekunden
und dann schreibe in den datenpunkt deinen dateipfad, ; schreibe deinen dateipfad (verzögert 5 sek), schreibe datenpfad (verzögert 10 sek,,, bis alle 5 bilder durch sind
vielleicht solltest du nicht alle 5 sekunden nehmen - eher einen größeren zeitraum
nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html
-
habe mal etwas getestet - mit bindings
ein widget mit einem datenpunkt als img-quelle
im datenpunkt (string/text) steht die quelle des bildes -
jetzt kannst du ganz simple ein blockly schreiben: trigger alle 25 sekunden
und dann schreibe in den datenpunkt deinen dateipfad, ; schreibe deinen dateipfad (verzögert 5 sek), schreibe datenpfad (verzögert 10 sek,,, bis alle 5 bilder durch sindvielleicht solltest du nicht alle 5 sekunden nehmen - eher einen größeren zeitraum
@liv-in-sky Servus!
Ja, das war auch mein erster gedanklicher Ansatz, aber ich wollte eben aus performanten Gründen eine elegantere Lösung.
Oliver hat recht, seinen Lösungsansatz finde ich gut.
Oliver hat leider auch recht, ich sollt mich endlich bei JS von copy/paste und try/error verabschieden und z.B. mich da durcharbeiten :-)Abef jedenfalls ganz lieben Dank für deinen Vorschlag, ich schaue mal wie weit ich komme. Bei
bin ich schon, da wird es ja jetzt schon interessant :-?LG, mxa
-
Hallo,
ich würde auch auf jeden Fall ein Skript nutzen. Man kann nun überlegen, was das Skript übernehmen soll und was das Widget.
Natürlich kann ein Skript alles übernehmen und den URL zum Bild alle paar Sekunden in einen Datenpunkt schreiben.Man kann aber auch per Skript einfach nur eine aufsteigende Zahl in einen Datenpunkt schreiben. Sagen wir 1 bis 10, Wechsel alle 1s. Dann könnten mehrere Widgets in VIS damit gesteuert werden. Ich nenne das Rolle.
/* Skript zählt ganze Zahlen hoch bis Maxwert, dann Reset auf Minwert */ const idNummer = "VIS.Webcam.Rotation.Nummer"; // Pfad zum Datenpunkt const delay = 1; // Verzögerung beim Hochzählen in Sekunden const min = 0; // minimaler Wert const max = 10 // maximaler Wert // ab hier nix mehr ändern createState(idNummer, min, { // Datenpunkt erstellen name: 'VIS Webcam (rotierend) Nummer', desc: 'aufsteigende Nummer', def: min, type: 'number' }); // Rolle let x = min; setInterval(function () { x = x + 1; // neue Version setState(idNummer, x); // neue Version // setState(idNummer, x+1); // Alte Version vor Korrektur durch OliverO if (x == max) x = min-1; }, delay * 1000);Jetzt kannst du mit den "8er"-Widgets darauf reagieren.
Oder über die Sichtbarkeit nur bei Wert >= 5 etwas anzeigen lassen (5s an, 5s aus) oder über gerade/ungerade im Sekundentakt blinken.Gruß
PixioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil
-
Hallo,
ich würde auch auf jeden Fall ein Skript nutzen. Man kann nun überlegen, was das Skript übernehmen soll und was das Widget.
Natürlich kann ein Skript alles übernehmen und den URL zum Bild alle paar Sekunden in einen Datenpunkt schreiben.Man kann aber auch per Skript einfach nur eine aufsteigende Zahl in einen Datenpunkt schreiben. Sagen wir 1 bis 10, Wechsel alle 1s. Dann könnten mehrere Widgets in VIS damit gesteuert werden. Ich nenne das Rolle.
/* Skript zählt ganze Zahlen hoch bis Maxwert, dann Reset auf Minwert */ const idNummer = "VIS.Webcam.Rotation.Nummer"; // Pfad zum Datenpunkt const delay = 1; // Verzögerung beim Hochzählen in Sekunden const min = 0; // minimaler Wert const max = 10 // maximaler Wert // ab hier nix mehr ändern createState(idNummer, min, { // Datenpunkt erstellen name: 'VIS Webcam (rotierend) Nummer', desc: 'aufsteigende Nummer', def: min, type: 'number' }); // Rolle let x = min; setInterval(function () { x = x + 1; // neue Version setState(idNummer, x); // neue Version // setState(idNummer, x+1); // Alte Version vor Korrektur durch OliverO if (x == max) x = min-1; }, delay * 1000);Jetzt kannst du mit den "8er"-Widgets darauf reagieren.
Oder über die Sichtbarkeit nur bei Wert >= 5 etwas anzeigen lassen (5s an, 5s aus) oder über gerade/ungerade im Sekundentakt blinken.Gruß
PixHI @pix!
Vorab, ganz lieben Dank. An so etwas habe ich über Blockly gedacht, aber noch nicht begonnen. Dein Script habe ich für meine Voraussetzungen angepaßt, aber es tut nicht. Ich sitze jetzt schon seit Stunden um den Fehler zu finden, steige aber nicht dahinter.Hier das abgewandelte Script:
Was passiert, oder eben auch nicht:
Ich starte das Script, nach Ablauf der ersten Verzögerung wird mein DP auf 1 geändert. Die verwendeten delayzeiten passen, das funktioniert. Nach Ablauf der nächsten Verzögerung blinkt der DP wieder auf und bleibt aber beharlich auf 1. Ist sicher ganz trivial, ich habe auch schon stundenlang hier herumgesucht und probiert, auch hier, komme aber nicht weiter. Ich habe das Gefühl, die function() startet bei jedem Durchlauf mit "let x = min", auch ein ändern auf "var" hilft nicht.@pix, wo muss ich was ändern?
LG, mxa
-
Hallo mxa,
der Ablauf bei Deinem Skript ist so:
- Skriptstart x wird mit min befüllt, also 0
- Intervall startet
- Datenpunkt wird sofort mit 0 + 1, also 1 beschrieben
- Prüfung, ob x schon max erreicht hat, wenn ja x wieder mit min (0) füllen
- 5 * 1000ms warten und Intervall wieder starten
Sollte gehen. Du hast meine Zeile 24 (deine Zeile 26) abgewandelt. Das minus 1 sorgt dafür, dass der Datenpunkt auch wirklich den Minimalwert bekommt, denn setState() schreibt ja sofort x+1
Ich sehe ein Problem in deinem State / Datenpunkt.
Es ist in meinen Augen nicht gut, Datenpunkte außerhalb des Javascript-Adapters (vermutlich von Hand) anzulegen. Du solltest dabei unbedingt auf den Typ und ggf. auf die Rolle achten. Läuft denn mein Skript bei dir, wenn du nur die Anpassungenconst delay = 5; // Verzögerung beim Hochzählen in Sekunden const min = 0; // minimaler Wert const max = 9; // maximaler Wertvornimmst?
Gruß
Pix -
HI @pix!
Vorab, ganz lieben Dank. An so etwas habe ich über Blockly gedacht, aber noch nicht begonnen. Dein Script habe ich für meine Voraussetzungen angepaßt, aber es tut nicht. Ich sitze jetzt schon seit Stunden um den Fehler zu finden, steige aber nicht dahinter.Hier das abgewandelte Script:
Was passiert, oder eben auch nicht:
Ich starte das Script, nach Ablauf der ersten Verzögerung wird mein DP auf 1 geändert. Die verwendeten delayzeiten passen, das funktioniert. Nach Ablauf der nächsten Verzögerung blinkt der DP wieder auf und bleibt aber beharlich auf 1. Ist sicher ganz trivial, ich habe auch schon stundenlang hier herumgesucht und probiert, auch hier, komme aber nicht weiter. Ich habe das Gefühl, die function() startet bei jedem Durchlauf mit "let x = min", auch ein ändern auf "var" hilft nicht.@pix, wo muss ich was ändern?
LG, mxa
-
Eine Frage zu deinem ursprünglichen Anwendungsfall:
Sind die 6 Bilder immer fix oder ändern die sich immer wieder mal?
Ist das eine Abbildung deines Mähroboters, der auf dem Bildschirm rumfährt
aber halt nur symbolisch ohne irgendein realen Hintergrund?Dann könntest du auch mal noch unter CSS-Animationen schauen.
Wenn da keine dynamischen Daten beteiligt sind,
dann kannst du das rein im Browser laufen lassen
Hier ein Beispiel: https://codepen.io/mmzzba/pen/VpRbjzMeine Adapter und Widgets
TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
Links im Profil -
@metaxa
der fehler liegt daran, dass du zwar 1 zu x addierst,
das ergebnis aber nicht wieder in x abspeicherst.
deswegen bleibt x immer 0setInterval(function () { x = x + 1; setState(idNummer, x ); if (x == max) x = min; }, delay * 1000);@OliverIO Du hast natürlich recht, werde das oben mal für Nachbauer korrigieren https://forum.iobroker.net/post/270338
Danke! Ist passiert, weil ich meinen (funktionierenden) Code nicht komplett kopiert habe, um ihn zu vereinfachen. Ein x++ ist rausgeflutscht.
ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil
-
@OliverIO Du hast natürlich recht, werde das oben mal für Nachbauer korrigieren https://forum.iobroker.net/post/270338
Danke! Ist passiert, weil ich meinen (funktionierenden) Code nicht komplett kopiert habe, um ihn zu vereinfachen. Ein x++ ist rausgeflutscht.
@pix & @OliverIO!
Lieben Dank Euch beiden! Was mich jetzt nur so ärgert, ich sitze stundenlang und behirne es einfach nicht, finde den offensichtlichen Fehler nicht. Zeile eingefügt und schon läuft es astrein, nichmals großes Danke!Aus der Not ein Tugend gemacht, hatte ich mich dann im Frust in Blockly versucht:
Script 1:
Script 2:
Da habe ich mich ausgetobt, denn das hätte meine JS-Anfängerschritte völlig überfordert. Aber, jetzt werde ich eine Mischung machen, denn der Intervall im Blockly .... sieht sehr anfällig aus und ich habe Angst, dass der irgendwann mal hängen bleibt.
LG, mxa
-
Eine Frage zu deinem ursprünglichen Anwendungsfall:
Sind die 6 Bilder immer fix oder ändern die sich immer wieder mal?
Ist das eine Abbildung deines Mähroboters, der auf dem Bildschirm rumfährt
aber halt nur symbolisch ohne irgendein realen Hintergrund?Dann könntest du auch mal noch unter CSS-Animationen schauen.
Wenn da keine dynamischen Daten beteiligt sind,
dann kannst du das rein im Browser laufen lassen
Hier ein Beispiel: https://codepen.io/mmzzba/pen/VpRbjz@OliverIO sagte in Bilder alle x Sekunden wechseln:
Hier ein Beispiel: https://codepen.io/mmzzba/pen/VpRbjz
Ja, genau ...... da bin ich Kilometer weit enfernt. Genau soetwas wäre natürlich das Sahnehäubchen. Wenn ich das dann schaffe, wohin mit der CSS, wie aufrufen, wie und wo ?????. Die Baustelle ist mir um mehrere Schuhgrößen zu groß :-)
Wenn meine Dolly mal über meine Tablets tuckelt, dann mache ich mir um meinen künftigen Job und mein Einkommen keine Sorgen mehr.
Ich bleibe mal bei meinem Leisten, die kann ich gegebenenfalls dann auch selbst anpassen.
LG, mxa
-
@OliverIO sagte in Bilder alle x Sekunden wechseln:
Hier ein Beispiel: https://codepen.io/mmzzba/pen/VpRbjz
Ja, genau ...... da bin ich Kilometer weit enfernt. Genau soetwas wäre natürlich das Sahnehäubchen. Wenn ich das dann schaffe, wohin mit der CSS, wie aufrufen, wie und wo ?????. Die Baustelle ist mir um mehrere Schuhgrößen zu groß :-)
Wenn meine Dolly mal über meine Tablets tuckelt, dann mache ich mir um meinen künftigen Job und mein Einkommen keine Sorgen mehr.
Ich bleibe mal bei meinem Leisten, die kann ich gegebenenfalls dann auch selbst anpassen.
LG, mxa
@metaxa schau dir mal das beispiel mit dem codepen link an,
da kannst du auch direkt drin spielen
bei self.html ist jeder einzelne befehl erklärt und direkt mit beispielen hinterlegt
css wird nicht aufgerufen, sondern ist im Browser einfach da.
Damit wird mittlerweile eine komplette Webseite formatiert und wurde
in den Jahren mit immer mehr Funktionen gefüllt.
Support us
608
Online32.7k
Benutzer82.4k
Themen1.3m
Beiträge