Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] MDCSS v2: Material Design CSS Version 2

    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

    [Projekt] MDCSS v2: Material Design CSS Version 2

    This topic has been deleted. Only users with topic management privileges can see it.
    • Xsev
      Xsev @Uhula last edited by Xsev

      @Uhula Vielleicht kannst du mir da helfen? Gibt es vielleicht die Möglichkeit, eine Klasse (bsp. mdui-color-glow) einem Status zuzuordnen bei einfachen Bulb on/off Widgets? Damit sich die Farbe dem aktuellen Schaltzustand anpasst. Wie in deienm Beispiel mit der Werteliste für Stati.

      Aktuell nutze ich 2 Widgets übereinander über sichtbarkeit geschalten, das ist aber bei vielen Buttons relativ unpraktisch und mir kommt es auch so vor als zieht es mir ziemlich die Performance runter, da ich quasi alles doppelt habe.

      P 1 Reply Last reply Reply Quote 0
      • P
        Pittini Developer @Xsev last edited by Pittini

        @Xsev sagte in [Projekt] Material Design CSS v2:

        Gibt es vielleicht die Möglichkeit, eine Klasse (bsp. mdui-color-glow) einem Status zuzuordnen bei einfachen Bulb on/off Widgets?

        Ja, das geht. Setzt mal bei Generell/CSS Klasse sowas rein:

        {val:javascript.0.FensterUeberwachung.AlleFensterZu;val=="true"? "mdui-green-glow":  "mdui-red-glow"}  
        

        Da mußt Du aber noch den DP anpassen, also das javascript.0.FensterUeberwachung.AlleFensterZu abändern zu dem was auch in Object ID steht. Hübsch ist das allerdings nicht mit dem Bulb Widget (habs grad mal getestet damit ich Dir keinen Quatsch ezähl). Ich nehm dafür meist das Basic Bool Widget, da biste flexibler weil man da auch noch innerhalb des img Tags mit den mdui... Klassen arbeiten kann.

        Xsev 1 Reply Last reply Reply Quote 1
        • Xsev
          Xsev @Pittini last edited by

          @Pittini Danke das versuche ich später gleich mal, wenn ich wieder daheim bin. Ja ich nutz auch meist das Basic Bool Widget, hab ich verwechselt.
          Wäre genial wenn ich das alles in einem Widget unterbringen würde.

          P 1 Reply Last reply Reply Quote 0
          • P
            Pittini Developer @Xsev last edited by

            @Xsev sagte in [Projekt] Material Design CSS v2:

            Wäre genial wenn ich das alles in einem Widget unterbringen würde.

            Dasgeht definitiv, hab ich zig mal hier verwendet. Wo man auch noch rumspielen kann, ist bei Signalbilder, da haste 3 vollkommen verschiedene Möglichkeiten zusätzlich, die sich auch mit mdui... Klassen versehen lassen.

            Xsev 1 Reply Last reply Reply Quote 1
            • Xsev
              Xsev @Pittini last edited by

              @Pittini Perfekt! Das funzt genau so wie ich es mir erhofft habe!!!! Danke nochmal!!! Das macht es deutlich überschaubarer.

              Jetzt muss ich aber nochmal wegen dem bool widget fragen.

              @Pittini sagte in [Projekt] Material Design CSS v2:

              Ich nehm dafür meist das Basic Bool Widget, da biste flexibler weil man da auch noch innerhalb des img Tags mit den mdui... Klassen arbeiten kann.

              Meinst du damit, das man damit dem Bild innerhalb des Widgets nochmal einen anderen css Effekt zuordnen kann? Also das Widget leuchtet je nach Stati rot/grün aber das Logo kann z.b. Blau flashen?
              Hättest du da mal einen Beispiel Code für mich wie das ganze im HTML Tag dann aussehen müsste?

              P Dominik F. 2 Replies Last reply Reply Quote 0
              • P
                Pittini Developer @Xsev last edited by

                @Xsev sagte in [Projekt] Material Design CSS v2:

                Meinst du damit, das man damit dem Bild innerhalb des Widgets nochmal einen anderen css Effekt zuordnen kann? Also das Widget leuchtet je nach Stati rot/grün aber das Logo kann z.b. Blau flashen?

                Ja, man kann kombinieren. Aber nicht jede Kombi macht Sinn, bzw. funktioniert. Einfach probieren, geht ja nix kaputt.

                Hättest du da mal einen Beispiel Code für mich wie das ganze im HTML Tag dann aussehen müsste?

                <img class="mdui-red-blink" height=32px src='/icons-mfd-svg/scene_making_love_clean.svg'>
                
                Xsev 1 Reply Last reply Reply Quote 1
                • Xsev
                  Xsev @Pittini last edited by Xsev

                  @Pittini Super danke!

                  Lol, ich glaube wir haben das selbe Schlafzimmer Symbol 😆 👍 fehlt nur noch die Wägezelle im Bett für den Datenpunkt. 🙂

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

                    Hallo zusmmen,

                    ich möchte mich gleich nochmal in die Frage von @Xsev einklinken. Mitte Febraur hatte ich einen ähnlichen Fall hier auch schon mal geschildert. @Glasfaser hat mir damals den Tipp gegeben, den dir @Pittini nun auch geschrieben hat.
                    Ich war recht glücklich darüber. Hab das aber inzwischen wieder zurückgenommen, denn: unter Windows mit Maus-Bedienung hat das wunderbar funktioniert. Aber unter Android wurde der Taster und damit der Status vom Schaltobjekt nach dem Antippen nach ca. 1s wieder zurückgesetzt. Ich war am Verzweifen, da plötzlich meine Lampen nach den Einschalten gleich wieder aus gingen oder nach dem Ausschalten sofort wieder ein. Je nach ursprünglichen Status.
                    Ich hatte das Phänomen nicht sofort mit der geänderte Formatierung in Verbindung gebracht, da es am PC ja funktionierte. Bis ich herausgefunden habe, dass man auf dem Touch-display (zumindet unter Android) jetzt länger auf die Taster drücken muss, um den Status daueraft umzuschalten.
                    Wenn man das oben beschriebene "bedingte Binding mit Formel" rausnimmt, war dieses Phänomen verschwunden. Die Lampen schalten dann auch wieder nach kurzem Antippen.

                    Hat jemand eine Erklärung dafür. Finde es schade diese Art der Formatierung nicht auf allen Geräten wie vorgestellt nutzen zu können.

                    Glasfaser 1 Reply Last reply Reply Quote 0
                    • Dominik F.
                      Dominik F. @Xsev last edited by

                      @Xsev

                      Du kannst auch 2 Widgets übereinander legen und das über die Sichtbarkeit regeln. Du machst das eine Widget nur sichbar wenn der Status True ist und das andere wenn der Status false ist und stellst die Widgets entsprechend ein mit glühen oder ohne etc.

                      Xsev 1 Reply Last reply Reply Quote 0
                      • Glasfaser
                        Glasfaser @bilberry last edited by

                        @bilberry

                        Gib mir mal dein Widget zum Testen, ich habe viellleicht da was , muss es aber anhand deines Probieren ob es geht !

                        bilberry 1 Reply Last reply Reply Quote 0
                        • bilberry
                          bilberry @Glasfaser last edited by

                          @Glasfaser: freut mich, dass Du Dich dem Thema noch mal annimmst.

                          mein Button - formatiert für Status "Aus"
                          aus.JPG


                          [{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"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","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,"html_false":"<i class="material-icons">power_settings_new</i>","html_true":"<i class="material-icons">power_settings_new</i>","class":"mdui-button-outlined mdui-grey"},"style":{"left":"91px","top":"169px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

                          mein Button - formatiert für Status "Ein"
                          ein.JPG

                          [{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"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","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,"html_false":"<i class="material-icons">power_settings_new</i>","html_true":"<i class="material-icons">power_settings_new</i>","class":"mdui-button-outlined mdui-lime mdui-green-glow"},"style":{"left":"169px","top":"169px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

                          Glasfaser 1 Reply Last reply Reply Quote 0
                          • Glasfaser
                            Glasfaser @bilberry last edited by Glasfaser

                            @bilberry

                            Setze bitte es in Code im Spoiler , Das Widget enthält so Fehler!
                            q.JPG

                            bilberry 1 Reply Last reply Reply Quote 0
                            • bilberry
                              bilberry @Glasfaser last edited by

                              @Glasfaser

                              ach so, dass kann man verschachteln - wieder was gelernt 😉

                              AUS

                              [{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"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","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,"html_false":"<i class=\"material-icons\">power_settings_new</i>","html_true":"<i class=\"material-icons\">power_settings_new</i>","class":"mdui-button-outlined mdui-grey"},"style":{"left":"104px","top":"234px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]
                              


                              EIN

                              [{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"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","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,"html_false":"<i class=\"material-icons\">power_settings_new</i>","html_true":"<i class=\"material-icons\">power_settings_new</i>","class":"mdui-button-outlined mdui-lime mdui-green-glow"},"style":{"left":"182px","top":"234px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]
                              

                              Glasfaser 1 Reply Last reply Reply Quote 0
                              • Glasfaser
                                Glasfaser @bilberry last edited by

                                @bilberry

                                Hast du noch ein Widget dahinter , da der Rand nicht da ist !?

                                bilberry 1 Reply Last reply Reply Quote 0
                                • bilberry
                                  bilberry @Glasfaser last edited by

                                  @Glasfaser
                                  nein, das ist ein einziges "BASIC bool HTML" und nur mit mdui-button-outlined formatiert - muss also auch ein Rand zu sehen sein

                                  sigi234 Glasfaser 2 Replies Last reply Reply Quote 0
                                  • sigi234
                                    sigi234 Forum Testing Most Active @bilberry last edited by

                                    @bilberry sagte in [Projekt] Material Design CSS v2:

                                    muss also auch ein Rand zu sehen sein

                                    Wenn man MD installiert hat schon

                                    1 Reply Last reply Reply Quote 0
                                    • Glasfaser
                                      Glasfaser @bilberry last edited by

                                      @bilberry

                                      Zustand AUS :
                                      aus.JPG

                                      Zustand AN :
                                      an.JPG

                                      [{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","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,"html_false":"<i class=\"material-icons\">power_settings_new</i>","html_true":"<i class=\"mdui-lime\" </i><i class=\"mdui-green-glow\" </i><i class=\"material-icons\">power_settings_new</i>","class":"mdui-grey ","min":"false","max":"true","comment":"","name":""},"style":{"left":"407px","top":"55px","width":"64px","height":"64px","cursor":"pointer","background":"","position":"","text-align":"center","line-height":"4.4","box-shadow":" {val:javascript.0.Lichtszenen.AmbiLichtWohnz;val==\"true\"? \"0px 0px 11px 4px lightgreen\":  \" \"}","z-index":"1","border-width":"1px","border-style":"outset","border-radius":"1px"},"widgetSet":"basic"}]
                                      

                                      Datenpunkt für den Effekt hier auch anpassen :

                                      aa.JPG

                                      bilberry 1 Reply Last reply Reply Quote 1
                                      • bilberry
                                        bilberry @Glasfaser last edited by

                                        @Glasfaser
                                        Danke für Deine Mühen!

                                        Bei wird zwar das Icon noch nicht zentriert dargestellt, aber das kann man ja offenbar unter "line-height" noch anpassen.
                                        button.JPG

                                        Der Effekt beim Schalten funktioniert auch. Das ist also noch ein weiterer Weg zum gewünschten Ziel zu kommen. 🙂

                                        ABER, jetzt habe ich leider wieder das Phänomen, dass auf Tablet und Handy (Android / Firefox) ein zu kurzes Antippen dazu führt, dass der Schaltzustand nach einem kurzen Augenblick in den vorherigen Zustand zurückfällt. 😞
                                        Ich kann mir das nicht zu richtig erklären.

                                        Glasfaser 1 Reply Last reply Reply Quote 0
                                        • Xsev
                                          Xsev @Dominik F. last edited by

                                          @Dominik-F
                                          Ja danke aber das hatte ich, das Problem ist die Überschaubarkeit und die Menge an Widgets das wird dann leider alles verdoppelt.

                                          @bilberry Das "Problem" mit dem fester antippen habe ich jetzt auch, also kurz tippen und das Licht geht sofort wieder aus, fest drücken und es geht. Verstehe auch nicht wirklich warum, liegt das an den Geräten? Ich habe ein altes Nexus Tab da geht es Problemlos, bei den neueren Geräten ist es wie du beschreibst.

                                          bilberry 1 Reply Last reply Reply Quote 0
                                          • bilberry
                                            bilberry @Xsev last edited by

                                            @Xsev
                                            na da bin ich ja beruhigt, dass ich nicht der einzige bin... 😉

                                            Zwei übereinanderliegende Widgets versuche ich auch nach Möglichkeit zu vermeiden. Ich kann Dir aber mal kurz beschreiben wie ich mir derzeit beholfen habe:

                                            Ich habe ein "basic bool HTML"-Widget verwendet.
                                            CSS Kalsse: mdui-button-outlined
                                            HTML bei false <i class="material-icons mdui-grey">power_settings_new</i>
                                            HTML bei true <i class="material-icons mdui-green-glow mdui-lime">power_settings_new</i>

                                            Dann leuchtet zumindest das Icon, aber leider nicht der Rahmen.

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            632
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            74
                                            717
                                            144062
                                            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