Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Skripten / Logik
  4. Blockly
  5. PNG zum "blinken bringen", mittels Blockly-Pause ... (?)

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.6k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.1k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.9k

PNG zum "blinken bringen", mittels Blockly-Pause ... (?)

Geplant Angeheftet Gesperrt Verschoben Blockly
15 Beiträge 8 Kommentatoren 239 Aufrufe 6 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • T topsurfer

    Hallo,
    ich wollte kalte Aussen-Temperaturen in meiner VIS etwas auffälliger gestalten,
    ein blinkendes Symbol neben dem aktuellen Temperaturwert soll angezeigt werden.

    Gibt es transparente, blinkende PNG's? Bin unsicher.
    Passendes (transparentes) GIF habe ich nicht gefunden.

    Da hab ich ein kleines Blockly erstellt, welches über einen DP und der Sichtbarkeit in VIS das ausgewählte Symbol dann ein- und ausblendet.
    Funktioniert.
    Ist aber quick & dirty :-(

    2025-11-20_200956.png

    Nutze auch "Pause", dass sollte man ja wohl vermeiden.
    Aber ich will ja bewußt serielle Abarbeitung, daher hier OK?

    Oder hat jemand eine andere Idee?

    CyberraphC Offline
    CyberraphC Offline
    Cyberraph
    schrieb am zuletzt editiert von
    #2

    @topsurfer
    Ich bin zwar auch ein blutiger Anfänger, aber mit meinen Erfahrungen bislang....

    Sowas denke ich sollte man am besten direkt mit einem CSS lösen.

    Ich habe zum Beispiel einen Button, der mir einen eigenen Datenpunkt true oder false setzt in der VIS.
    Der setzt eine Timeranzeige in Gang oder stoppt diese.
    Und diesen DP verbinde ich dann mit dem CSS, den ich der Timeranzeige gegeben habe.
    Und tadda -> bei 1 fängt die Timeranzeige zu blinken an.

    83c5d462-a720-4e80-9014-12ba55dcf30d-grafik.png

    234bcc43-e692-4521-a5e9-70de57b74a33-grafik.png

    2c44b740-1b7e-46ae-80ed-b3e9deab7ec5-grafik.png

    Dies war auch nur einer meiner ersten Versuche.

    Tipp:
    Kann immer nur wieder diese Seite empfehlen zum Schmöckern, wie CSS und Co. so funktionieren.
    https://www.w3schools.com/

    Zum Beispiel für das CSS, das ich hier verwendet habe "animation:"
    https://www.w3schools.com/css/css3_animations.asp

    Den ganzen Block hatte ich mir damals per Google wo gefunden.
    Und später bin ich auf w3schools gekommen, womit man etwas mehr dahintersteigt.

    Vielleicht hilft dies weiter ;-)

    Beste Grüße!

    io-Broker Neuling 2024 :-)

    Bislang jedoch einiges an Beiträgen und Grundlagen eingeflößt, um etwas besser emporzuirren.

    1 Antwort Letzte Antwort
    1
    • liv-in-skyL Offline
      liv-in-skyL Offline
      liv-in-sky
      schrieb am zuletzt editiert von
      #3

      du kannst im css bereich in der vis z.b.sowas speichern https://drishtantregmi.medium.com/how-to-create-a-blinking-effect-using-css-961726592621

      im widget selbst unter css klasse (ganz oben im setting-bereich gibst du dann wie im beispiel blink-class ein - dann blink das picture immer

      nun schreibst du ein binding in dieses css klasse rein z.b. {0_userdata.0.dein_pfad...} - schreibst du nun in den datenpunkt blink-class rein blinkt das bild . dann machst du noch eine eigene klasse (z.b. unsichtbar-class) , die opacity setzt und somit das bild unsichtbar macht - schreibst du dann unsichtbar-class in den datenpunkt, verschwindet das picture.

      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

      1 Antwort Letzte Antwort
      1
      • AsgothianA Offline
        AsgothianA Offline
        Asgothian
        Developer
        schrieb am zuletzt editiert von
        #4

        Fangen wir vorne an:

        • warum einen Heartbeat der in den meisten Fällen nichts macht ? (NA Temp aktuell Aussen >= 0) ?
        • warum eine Pause, wenn ein Intervall genau so gut geht.

        Das Ziel Blockly sieht so aus:

        Screenshot 2025-11-20 at 21.37.50.png

        Ansonsten ist die CSS Lösung natürlich eleganter als der Blink DP.

        A.

        ioBroker auf RPi4 - Hardware soweit wie möglich via Zigbee.
        "Shit don't work" ist keine Fehlermeldung, sondern ein Fluch.

        1 Antwort Letzte Antwort
        1
        • T Offline
          T Offline
          topsurfer
          schrieb am zuletzt editiert von
          #5

          Danke euch!

          Das mit dem css, da tue ich mich schwer; beim Blockly-Code kann ich diesen "nachvollziehen" und auch selber mal was ändern und ergänzen, weil ich das (meistens) verstehe.

          CSS ist bestimmt kein Hexenwerk, aber trotzdem, PHP, JAVA, HTML5; alles Themen die "nach meiner Zeit" aufkamen (Pascal, Assembler, HTML, ...). Man kann sich nicht in jedes Thema einarbeiten.

          Wenn das mit dem Blockly (hab den Code von Asgotian übernommen) keine große Systembelastung ist, werde ich diesen verwenden.

          1 Antwort Letzte Antwort
          0
          • T topsurfer

            Hallo,
            ich wollte kalte Aussen-Temperaturen in meiner VIS etwas auffälliger gestalten,
            ein blinkendes Symbol neben dem aktuellen Temperaturwert soll angezeigt werden.

            Gibt es transparente, blinkende PNG's? Bin unsicher.
            Passendes (transparentes) GIF habe ich nicht gefunden.

            Da hab ich ein kleines Blockly erstellt, welches über einen DP und der Sichtbarkeit in VIS das ausgewählte Symbol dann ein- und ausblendet.
            Funktioniert.
            Ist aber quick & dirty :-(

            2025-11-20_200956.png

            Nutze auch "Pause", dass sollte man ja wohl vermeiden.
            Aber ich will ja bewußt serielle Abarbeitung, daher hier OK?

            Oder hat jemand eine andere Idee?

            Dr. BakteriusD Online
            Dr. BakteriusD Online
            Dr. Bakterius
            Most Active
            schrieb am zuletzt editiert von
            #6

            @topsurfer sagte in PNG zum "blinken bringen", mittels Blockly-Pause ... (?):

            ein blinkendes Symbol neben dem aktuellen Temperaturwert soll angezeigt werden.

            Dafür braucht es kein Blockly und kein CSS. Das kann das Widget 'basic - Image' in der VIS.

            Screenshot 2025-11-21 131553.png

            Bei 'Allgemein' die 'Quelle' einfach leer lassen und nur bei den 'Signalbildern' die Einstellungen vornehmen. Dort kannst du auch die Größe, Position und Bedingungen einstellen.

            1 Antwort Letzte Antwort
            3
            • T Offline
              T Offline
              topsurfer
              schrieb am zuletzt editiert von
              #7

              Super Online Dr. Bakterius,
              eine so einfache Lösung will hier niemand sehen ;-)

              Nee, Spaß beiseite, super,
              danke für den Tipp!

              Den Blink- Rhythmus kann man aber nicht dort einstellen, oder?

              Dr. BakteriusD 1 Antwort Letzte Antwort
              0
              • T topsurfer

                Super Online Dr. Bakterius,
                eine so einfache Lösung will hier niemand sehen ;-)

                Nee, Spaß beiseite, super,
                danke für den Tipp!

                Den Blink- Rhythmus kann man aber nicht dort einstellen, oder?

                Dr. BakteriusD Online
                Dr. BakteriusD Online
                Dr. Bakterius
                Most Active
                schrieb am zuletzt editiert von
                #8

                @topsurfer sagte in PNG zum "blinken bringen", mittels Blockly-Pause ... (?):

                Den Blink- Rhythmus kann man aber nicht dort einstellen, oder?

                Nein, dafür braucht es dann eine andere Lösung.

                1 Antwort Letzte Antwort
                0
                • H Offline
                  H Offline
                  hoschi2007
                  schrieb am zuletzt editiert von hoschi2007
                  #9

                  Für die vis1 gibt es das Universal Widget von vis-inventwo wo mal den Blinkintervall einstellen kann. Unter vis2 funktioniert dieses auch. Mittlerweile gibt es vis2-inventwo, habe aber damit noch nicht gearbeitet

                  skvarelS 1 Antwort Letzte Antwort
                  1
                  • Ro75R Offline
                    Ro75R Offline
                    Ro75
                    schrieb am zuletzt editiert von
                    #10

                    Das "Blinken" ist alles schön und gut. Allerdings, egal welche Variante genutzt wird (habe alle selbst mal probiert und genutzt) - gibt es einen Haken. Alle Varianten sind sehr ressourcenintensiv - sprich die CPU-Last steigt (schon bei einem Blinken) um einiges.

                    Ro75.

                    SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen

                    1 Antwort Letzte Antwort
                    1
                    • AsgothianA Offline
                      AsgothianA Offline
                      Asgothian
                      Developer
                      schrieb am zuletzt editiert von
                      #11

                      Klar - das Blinken erfordert Aktion jede Sekunde. Das kostet :)

                      ioBroker auf RPi4 - Hardware soweit wie möglich via Zigbee.
                      "Shit don't work" ist keine Fehlermeldung, sondern ein Fluch.

                      Ro75R 1 Antwort Letzte Antwort
                      0
                      • H hoschi2007

                        Für die vis1 gibt es das Universal Widget von vis-inventwo wo mal den Blinkintervall einstellen kann. Unter vis2 funktioniert dieses auch. Mittlerweile gibt es vis2-inventwo, habe aber damit noch nicht gearbeitet

                        skvarelS Online
                        skvarelS Online
                        skvarel
                        Developer
                        schrieb am zuletzt editiert von
                        #12

                        @hoschi2007 sagte in PNG zum "blinken bringen", mittels Blockly-Pause ... (?):

                        Für die vis1 gibt es das Universal Widget von vis-inventwo wo mal den Blinkintervall einstellen kann. Unter vis2 funktioniert dieses auch. Mittlerweile gibt es vis2-inventwo, habe aber damit noch nicht gearbeitet

                        Ja, auch bei unseren VIS2 Widgest gibt es das Blinken

                        d4c72f65-87c8-40db-be68-1b97f46e6e72-image.png

                        #TeamInventwo
                        • vis-inventwo & vis-2-widgets-inventwo
                        • vis-icontwo & vis-2-widgets-icontwo

                        1 Antwort Letzte Antwort
                        1
                        • AsgothianA Asgothian

                          Klar - das Blinken erfordert Aktion jede Sekunde. Das kostet :)

                          Ro75R Offline
                          Ro75R Offline
                          Ro75
                          schrieb am zuletzt editiert von Ro75
                          #13

                          @Asgothian sagte in PNG zum "blinken bringen", mittels Blockly-Pause ... (?):

                          Das kostet :)

                          Ja das kostet tatsächlich ordentlich CPU Zeit. Egal ob die VIS Runtime auf einem Debian oder Ubuntu System läuft. Mit TOP oder HTOP ist ganz deutlich zu sehen, das die Browser-Instanze deutlich mehr CPU Zeit schluckt. Systeme die von Hause aus schwächer sind, kommen da an ihre Grenzen, selbst mit nur einem oder zwei blinkenden Teilen via CSS oder Widget.

                          Ro75.

                          SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen

                          1 Antwort Letzte Antwort
                          0
                          • T Offline
                            T Offline
                            topsurfer
                            schrieb am zuletzt editiert von
                            #14

                            Sorry, hab wenig Ahnung.
                            Was ist denn die "Browser-Instance"?

                            Ki meint:

                            "Eine ioBroker "Browser-Instanz" ist eine
                            spezielle Instanz des VIS-Adapters, die auf einem Client-Gerät (z. B. einem Tablet oder Smartphone) läuft und die Darstellung (View) Ihrer ioBroker-Visualisierung übernimmt. Anstatt nur einen spezifischen Adapter zu steuern, stellt diese Instanz eine Schnittstelle dar, die es Ihnen ermöglicht, über eine Browser-ID auf eine bestimmte View zuzugreifen und diese über den ioBroker-Server zu steuern"

                            Also belastend für den Client, als Tablet oder Handy deiner Meinung nach?

                            Auf dem Server (wo iobroker läuft, bei mir Ubuntu) selbst kann ich mit #top nix sehen, dass der etwas mitbekommt wenn da 6 Icons "blinken".
                            Alles mit vis* hat weiterhin 0% CPU-Zeit

                            Ro75R 1 Antwort Letzte Antwort
                            0
                            • T topsurfer

                              Sorry, hab wenig Ahnung.
                              Was ist denn die "Browser-Instance"?

                              Ki meint:

                              "Eine ioBroker "Browser-Instanz" ist eine
                              spezielle Instanz des VIS-Adapters, die auf einem Client-Gerät (z. B. einem Tablet oder Smartphone) läuft und die Darstellung (View) Ihrer ioBroker-Visualisierung übernimmt. Anstatt nur einen spezifischen Adapter zu steuern, stellt diese Instanz eine Schnittstelle dar, die es Ihnen ermöglicht, über eine Browser-ID auf eine bestimmte View zuzugreifen und diese über den ioBroker-Server zu steuern"

                              Also belastend für den Client, als Tablet oder Handy deiner Meinung nach?

                              Auf dem Server (wo iobroker läuft, bei mir Ubuntu) selbst kann ich mit #top nix sehen, dass der etwas mitbekommt wenn da 6 Icons "blinken".
                              Alles mit vis* hat weiterhin 0% CPU-Zeit

                              Ro75R Offline
                              Ro75R Offline
                              Ro75
                              schrieb am zuletzt editiert von
                              #15

                              @topsurfer sagte in PNG zum "blinken bringen", mittels Blockly-Pause ... (?):

                              Also belastend für den Client, als Tablet oder Handy deiner Meinung nach?

                              ja.

                              Ro75.

                              SERVER = Beelink U59 16GB DDR4 RAM 512GB SSD, FB 7490, FritzDect 200+301+440, ConBee II, Zigbee Aqara Sensoren + NOUS A1Z, NOUS A1T, Philips Hue ** ioBroker, REDIS, influxdb2, Grafana, PiHole, Plex-Mediaserver, paperless-ngx (Docker), MariaDB + phpmyadmin *** VIS-Runtime = Intel NUC 8GB RAM 128GB SSD + 24" Touchscreen

                              1 Antwort Letzte Antwort
                              0
                              Antworten
                              • In einem neuen Thema antworten
                              Anmelden zum Antworten
                              • Älteste zuerst
                              • Neuste zuerst
                              • Meiste Stimmen


                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              823

                              Online

                              32.4k

                              Benutzer

                              81.5k

                              Themen

                              1.3m

                              Beiträge
                              Community
                              Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                              ioBroker Community 2014-2025
                              logo
                              • Anmelden

                              • Du hast noch kein Konto? Registrieren

                              • Anmelden oder registrieren, um zu suchen
                              • Erster Beitrag
                                Letzter Beitrag
                              0
                              • Home
                              • Aktuell
                              • Tags
                              • Ungelesen 0
                              • Kategorien
                              • Unreplied
                              • Beliebt
                              • GitHub
                              • Docu
                              • Hilfe