Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. Vorlagen/Ideen MüllPlan VIEW / Widget ?

    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

    Vorlagen/Ideen MüllPlan VIEW / Widget ?

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

      @moppel2810

      es geht mit jedem datenpunkt , welchen du abfragen kannst - egal ob boolean oder string oder zahl

      das beispiel ist ein schalter für einen lüfter - durch drücken ändert sich der wert - true false - also wie bei anwesenheit

      test2.gif

      das steht in der vis:

      Image 6.png
      übersetzt: wenn controll-own.0.Luefter3 ist wahr nehme "blink-bunt" aus css-klasse - sonst "blink-red" (blink bunt entspricht bei mir grün)

      {val:controll-own.0.Luefter3;val=="true"? "blink-bunt":  "blink-red"}
      

      das "blink-bunt" und "blink-red" ist in der css klasse definiert
      Image 7.png

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

        @liv-in-sky
        Geht das auch wenn ich einfach ein img in die vis einfüge oder muss ich da was spezieles nehmen?

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

          @moppel2810 müßte auch mit image funktionieren - den css eintrag unter generell im image-widget gibt es ja dort auch

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

            @liv-in-sky said in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

            {val:controll-own.0.Luefter3;val=="true"? "blink-bunt": "blink-red"}

            {val:controll-own.0.Luefter3;val=="true"? "blink-bunt": "blink-red"} da tausche ich einfach "controll-own.0.Luefter3" gegen meinen ping oder tr-064?

            wie bzw wo bekomm ich den blink code für die css klasse her?

            crunchip liv-in-sky 2 Replies Last reply Reply Quote 0
            • crunchip
              crunchip Forum Testing Most Active @moppel2810 last edited by

              @moppel2810 Das ist in dem Material Design Css Skript hinterlegt
              https://github.com/Uhula/ioBroker-Material-Design-Style

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

                @moppel2810 sagte in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

                @liv-in-sky said in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

                {val:controll-own.0.Luefter3;val=="true"? "blink-bunt": "blink-red"}

                {val:controll-own.0.Luefter3;val=="true"? "blink-bunt": "blink-red"} da tausche ich einfach "controll-own.0.Luefter3" gegen meinen ping oder tr-064?

                wie bzw wo bekomm ich den blink code für die css klasse her?

                mit dem austausch liegst du richtig - statt lüfter kannst du ping/tr064 benutzen

                weiter oben ist der im post - hier nochmal:

                für rot blinkend:

                .blink-red   {
                 animation: mdui-red-blink-ani 3s linear infinite;
                }
                @keyframes mdui-red-blink-ani  {
                 0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
                 51% {filter: none;}
                
                }
                .blink-yellow {
                 animation: mdui-yellow-blink-ani 1s linear infinite;
                }
                @keyframes mdui-yellow-blink-ani  {
                 0%,70% {filter: drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B) drop-shadow(0px 0px 4px #FFDB3B); }
                 71% {filter: none;}
                
                }
                
                
                

                für gelb-grün blinkend

                .blink-bunt   {
                 animation: mdui-bunt-blink-ani 3s linear infinite;
                   
                }
                @keyframes mdui-bunt-blink-ani {
                 8% {filter: drop-shadow(0px 0px 4px #FFFF00) drop-shadow(0px 0px 4px #FFFF00) drop-shadow(0px 0px 4px #FFFF00); }
                 30% {filter: drop-shadow(0px 0px 4px #01DF3A) drop-shadow(0px 0px 4px #01DF3A) drop-shadow(0px 0px 4px #01DF3A); }
                 60% {filter: drop-shadow(0px 0px 4px #2BF23F) drop-shadow(0px 0px 4px #2BF23F) drop-shadow(0px 0px 4px #2BF23F); }
                 0% {filter: none;}
                }
                
                .blink-lila   {
                 animation: mdui-lila-blink-ani 3s linear infinite;
                   
                }
                

                für drehend vertikal

                
                .anime { animation: turner 4s infinite linear !important}
                 
                @keyframes turner{
                   from{  transform: rotateY(0deg)   }
                   to  {  transform: rotateY(360deg) }
                }
                

                für drehend horizontal

                .anime2 { animation: turner2 4s infinite linear !important}
                 
                @keyframes turner2{
                   from{  transform: rotateX(0deg)   }
                   to  {  transform: rotateX(360deg) }
                }
                
                .player {
                   background: #273B7C !important;
                }
                
                .anime { animation: turner 4s infinite linear !important}
                 
                @keyframes turner{
                   from{  transform: rotateY(0deg)   }
                   to  {  transform: rotateY(360deg) }
                }
                
                
                

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

                  @liv-in-sky

                  was muss ich ändern das es nicht blinkt bzw nur leuchtet?
                  Hab gerade noch ein Problem und zwar funktioniert es in der vis vorschau auf dem PC aber nicht auf dem Tablet🙄

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

                    @moppel2810

                    Welches Tablet hast du?
                    Wenn es sehr alt ist, kann es sein, dass das Klassen nicht funktionieren. ZB auf meinem alten Fire HD Tablet ist das so

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

                      @moppel2810

                      leuchte dauernd:

                      .leuchte   {
                       animation: mdui-leuchte-ani 10s linear infinite;
                         
                      }
                      @keyframes mdui-leuchte-ani {
                       0%, 100% {filter: drop-shadow(0px 0px 4px #DF013A) drop-shadow(0px 0px 4px #DF013A) drop-shadow(0px 0px 4px #DF013A); }
                      
                      }
                      
                      

                      wie @tempestas schon erwähnte - ich ahbe auch ein sehr altes samsung tablet - da geht es auch nicht

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

                        @liv-in-sky

                        hab ein galaxy tablet a dachte eigentlich das es noch ok ist😞

                        T 1 Reply Last reply Reply Quote 0
                        • T
                          tempestas @moppel2810 last edited by tempestas

                          @moppel2810

                          Das habe ich auch. Diese konkrete CSS Klasse habe ich nicht un Benutzung, aber andere mit blinken und co schon, geht ohne Probleme

                          Wenn du nur einen rot leuchtenden Rahmen willst, versuch mal diese css Klasse

                          .redGlow {filter: drop-shadow(0px 0px 3px #F44336)  ; }
                          

                          im Reiter CSS im Projekt so eintragen, dann beim Widet unter CSS

                          redGlow

                          eintragen

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

                            @tempestas sagte in Vorlagen/Ideen MüllPlan VIEW / Widget ?:

                            .redGlow {filter: drop-shadow(0px 0px 3px #F44336) ; }

                            das wollte ich auch benutzen, aber bei dunklen hintergrund ist der schatten kaum erkennbar - oder kennst du noch einen trick, wie der schatten etwas "satter" wird?

                            1 Reply Last reply Reply Quote 0
                            • moppel2810
                              moppel2810 last edited by

                              Liegt an der iobroker app. Ich benutze jetzt den Fully Browser und mit dem läuft es super er zeigt alles an und hat sogar bewegungserkennung zum aktivieren des Bildschirmes.

                              1 Reply Last reply Reply Quote 0
                              • H
                                Hundefreund @ChrisXY last edited by

                                @ChrisXY
                                ich bin neu in der Materie hier ...
                                Kannst du mir deine Müllplan View /widget /scripte /Bilder, wie auf dem oberen Bild (gefällt mir sehr gut !!) ,die man für die VIS baucht noch mal linken ??

                                Vielen Dank

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

                                  @liv-in-sky
                                  Hallo ich bin hier neu in der ganzen
                                  Materie...
                                  Ich habe mir mal die 3 Scripte runtergeladen und in Vis eingebunden.
                                  Wo werden denn die Mülltonnen-Bilder
                                  eingebunden und wo sind die verschiedenen
                                  CSS scripte ?
                                  Danke schon mal...

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

                                    @Hundefreund

                                    Ich möchte jetzt keine Werbung machen ….. aber es gibt einen fertigen Adapter dafür .

                                    TrashSchedule

                                    und Widget von Sigi234

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

                                      @Hundefreund ja - kann ich nur empfehlen - vereinfacht das ganze (trashschedule)

                                      S 1 Reply Last reply Reply Quote 0
                                      • H
                                        Hundefreund @Glasfaser last edited by

                                        @Glasfaser
                                        hallo erst mal danke für die Infos,
                                        ich suche jedoch das Widget mit den 4 "echten Mülltonnen" die bei Tag 0 graphisch angehoben werden und rot
                                        eingerahmt blinken..

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

                                          @Hundefreund

                                          Meinst du Das !?

                                          uml-ani-gif11.gif

                                          ist von @liv-in-sky

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

                                            @Hundefreund

                                            bilder - der rest ist weiter vorne beschrieben


                                            muelltonneGruen (1).png muelltonneGelb.png muelltonneBraun.png muelltonneBlau.png muelltonneSchwarz.png muelltonneRot (1).png

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            695
                                            Online

                                            31.9k
                                            Users

                                            80.2k
                                            Topics

                                            1.3m
                                            Posts

                                            vis
                                            38
                                            311
                                            49576
                                            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