Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Gelöst] Iconfarbe abhängig von Stromabnahme

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    [Gelöst] Iconfarbe abhängig von Stromabnahme

    This topic has been deleted. Only users with topic management privileges can see it.
    • Crazy32
      Crazy32 @liv-in-sky last edited by

      @liv-in-sky Da habe ich mich wohl nicht richtig ausgedrückt. Der kleine runde Punkt oben links in der Ecke (in Deinem Screenshot weiß) zeigt an, ob die Steckdose online ist. Das Steckdosensymbol zeigt an, ob die Steckdose eingeschaltet ist. Das Pumpensymbol soll dann zeigen, ob die Pumpe gerade pumpt oder nicht. Und da wäre mir am liebsten das mit zwei Farben darzustellen. Die eine Farbe (z.B. Rot) soll darstellen, dass die Pumpe gerade nicht läuft und die andere Farbe (Grün) soll darstellen, dass sie aktuell läuft. Das Blinken auf Deinem unteren Bild gefällt mir. Bekommt man das so hin?:
      Pumpe läuft nicht = Pumpensymbol Rot
      Pumpe läuft = Pumpensymbol Grün und blinkend wie auf dem unteren Bild. Ansonsten nur Grün.

      liv-in-sky 2 Replies Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @Crazy32 last edited by liv-in-sky

        @crazy32

        du kopierst das unter den CSS tab im vis editor

        .blink-green {
          animation: mdui-green-blink-ani 1s linear infinite;
        }
        @keyframes mdui-green-blink-ani  {
          0%,50% {filter: drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50) drop-shadow(0px 0px 4px #4CAF50); }
          51% {filter: none;}
        }
        

        Image 034.png

        dann kopierst du das (auswahl des widgets mit dem pumpen-icon):

        {myVar:fritzdect.0.DECT_116570140122.power; myVar>5 ? "blink-green" : "" }
        
        

        dahin:
        Image 035.png

        1 Reply Last reply Reply Quote 1
        • liv-in-sky
          liv-in-sky @Crazy32 last edited by

          @crazy32

          die 2te formel war leider falsch - die 5 darf nicht in anführungszeichen sein

          muss so sein:

          
          
          {myVar:fritzdect.0.DECT_116570140122.power; myVar>5 ? "blink-green" : "" }
          
           
          
          
          Crazy32 2 Replies Last reply Reply Quote 1
          • Crazy32
            Crazy32 @liv-in-sky last edited by

            @liv-in-sky Die Pumpe ist zwischenzeitlich angesprungen und das Pumpensymbol ist von Rot auf Grün gesprungen und hat geblinkt. Top! Vielen Dank 👍

            1 Reply Last reply Reply Quote 1
            • Crazy32
              Crazy32 @liv-in-sky last edited by Crazy32

              @liv-in-sky Ich muss das Thema nochmal aufgreifen. Die beiden Icons weisen ein seltsames Verhalten auf. Allerdings erst, nachdem ich in den Widgets den Code für´s blinken hinterlegt habe. Hast Du eine Ahnung was das sein könnte?

              Hier noch ein Screenshot mit den Einträgen im Widget für Pumpe 1 und ein kurzes Video, das ist besser als irgendeine Beschreibung.

              Pumpe1.png
              Der komplette Text aus dem CSS-Feld des Widgets:
              {myVar:fritzdect.0.DECT_116570140122.power; myVar>5 ? "blink-green" : "" }

              CSS.png

              https://photos.app.goo.gl/tmNkGV9kmjUXDyGg6

              liv-in-sky 1 Reply Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @Crazy32 last edited by

                @crazy32

                was nimmst du als anzeige - browser(welchen) oder die app

                Crazy32 1 Reply Last reply Reply Quote 0
                • Crazy32
                  Crazy32 @liv-in-sky last edited by Crazy32

                  @liv-in-sky Auf dem Tablet nehme ich den Kiosk Browser, auf dem Raspi läuft Vivaldi. Der Effekt ist auf beiden zu sehen.

                  liv-in-sky 1 Reply Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @Crazy32 last edited by

                    @crazy32 und in chrome auf dem pc?

                    Crazy32 1 Reply Last reply Reply Quote 0
                    • Crazy32
                      Crazy32 @liv-in-sky last edited by Crazy32

                      @liv-in-sky So, mal schnell durchgetestet. Das ist überall zu sehen, auf Vivaldi am PC, Vivaldi auf Android, Chrome auf PC, Chrome auf Android.
                      Edit: Und Firefox Nightly und Microsoft Edge

                      liv-in-sky 1 Reply Last reply Reply Quote 0
                      • liv-in-sky
                        liv-in-sky @Crazy32 last edited by

                        @crazy32 ich kann es mittlerweile nachvollziehen

                        evtl mal ein image widget nehmen - 2 verschieden pump-symbole farbig definieren/downloaden/erstellen - und dann in der bildangabe auch wieder ein binding einfügen

                        hier mal ein image-widget mit 2 bindings - einmal verschiedene bilder und einmal das blinken

                        das bild ist so angegeben - mit meinen dp:

                        {myVar:0_userdata.0.CONTROL-OWN.AAATEST.TestLogic2; myVar=="true" ? "/vis.0/armin/img/pump-green.png" : "/vis.0/armin/img/pump-red.png" }
                        

                        [{"tpl":"tplImage","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"{myVar:0_userdata.0.CONTROL-OWN.AAATEST.TestLogic2; myVar==\"true\" ? \"/vis.0/armin/img/pump-green.png\" : \"/vis.0/armin/img/pump-red.png\" }","class":"{myVar:0_userdata.0.CONTROL-OWN.AAATEST.wert1#wert1; myVar>5 ? \"blink-green\" : \"\" }"},"style":{"left":"925px","top":"386px","width":"70px","height":"72px"},"widgetSet":"basic"}]
                        

                        die pumpenbilder zum download


                        pump-green.png pump-red.png

                        scheint stabile zu laufen - auch in fully browser

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        715
                        Online

                        31.9k
                        Users

                        80.1k
                        Topics

                        1.3m
                        Posts

                        2
                        17
                        706
                        Loading More Posts
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes
                        Reply
                        • Reply as topic
                        Log in to reply
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                        The ioBroker Community 2014-2023
                        logo