Skip to content
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] MDCSS v2: Material Design CSS Version 2

NEWS

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

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

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Scheduled Pinned Locked Moved Visualisierung
material uivismaterial css
717 Posts 74 Posters 177.3k Views 77 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • bilberryB Offline
    bilberryB Offline
    bilberry
    wrote on last edited by
    #129

    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.

    GlasfaserG 1 Reply Last reply
    0
    • XsevX Xsev

      @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?

      Dominik F.D Offline
      Dominik F.D Offline
      Dominik F.
      wrote on last edited by
      #130

      @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.

      XsevX 1 Reply Last reply
      0
      • bilberryB bilberry

        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.

        GlasfaserG Offline
        GlasfaserG Offline
        Glasfaser
        wrote on last edited by
        #131

        @bilberry

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

        Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

        bilberryB 1 Reply Last reply
        0
        • GlasfaserG Glasfaser

          @bilberry

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

          bilberryB Offline
          bilberryB Offline
          bilberry
          wrote on last edited by
          #132

          @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"}]

          GlasfaserG 1 Reply Last reply
          0
          • bilberryB bilberry

            @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"}]

            GlasfaserG Offline
            GlasfaserG Offline
            Glasfaser
            wrote on last edited by Glasfaser
            #133

            @bilberry

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

            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

            bilberryB 1 Reply Last reply
            0
            • GlasfaserG Glasfaser

              @bilberry

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

              bilberryB Offline
              bilberryB Offline
              bilberry
              wrote on last edited by
              #134

              @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"}]
              

              GlasfaserG 1 Reply Last reply
              0
              • bilberryB bilberry

                @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"}]
                

                GlasfaserG Offline
                GlasfaserG Offline
                Glasfaser
                wrote on last edited by
                #135

                @bilberry

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

                Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                bilberryB 1 Reply Last reply
                0
                • GlasfaserG Glasfaser

                  @bilberry

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

                  bilberryB Offline
                  bilberryB Offline
                  bilberry
                  wrote on last edited by
                  #136

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

                  sigi234S GlasfaserG 2 Replies Last reply
                  0
                  • bilberryB bilberry

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

                    sigi234S Online
                    sigi234S Online
                    sigi234
                    Forum Testing Most Active
                    wrote on last edited by
                    #137

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

                    muss also auch ein Rand zu sehen sein

                    Wenn man MD installiert hat schon

                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                    Immer Daten sichern!

                    1 Reply Last reply
                    0
                    • bilberryB bilberry

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

                      GlasfaserG Offline
                      GlasfaserG Offline
                      Glasfaser
                      wrote on last edited by
                      #138

                      @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

                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                      bilberryB 1 Reply Last reply
                      1
                      • GlasfaserG Glasfaser

                        @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

                        bilberryB Offline
                        bilberryB Offline
                        bilberry
                        wrote on last edited by
                        #139

                        @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.

                        GlasfaserG 1 Reply Last reply
                        0
                        • Dominik F.D Dominik F.

                          @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.

                          XsevX Offline
                          XsevX Offline
                          Xsev
                          wrote on last edited by
                          #140

                          @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.

                          bilberryB 1 Reply Last reply
                          0
                          • XsevX Xsev

                            @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.

                            bilberryB Offline
                            bilberryB Offline
                            bilberry
                            wrote on last edited by
                            #141

                            @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.

                            XsevX 1 Reply Last reply
                            0
                            • bilberryB bilberry

                              @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.

                              XsevX Offline
                              XsevX Offline
                              Xsev
                              wrote on last edited by Xsev
                              #142

                              @bilberry
                              Ja ich hab aktuell den basic bool in Verwendung.

                              Der Button wechselt von Blau nach Grün (Symbol für an/aus immo identisch) das geht auch super soweit.

                              Was mich hald wundert, warum das nicht auf allen Geräten identisch ist. Wie gesagt beim Nexus geht es so aber bei meinem Handy (Xiaomi) und neueren Tabletts (Huawai) hab ich das Problem ebenfalls.

                              So sieht bei mir der export aus

                              [{"tpl":"tplBulbOnOffCtrl","data":{"oid":"shelly.0.SHSW-25#8CAAB5057D8E#1.Relay0.Switch","g_fixed":true,"g_visibility":true,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":"0","visibility-groups-action":"hide","icon_off":"/vis.0/2020a/Icons/light_ceiling_spots.png","icon_on":"/vis.0/2020a/Icons/light_ceiling_spots.png","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,"class":"{val:shelly.0.SHSW-25#8CAAB5057D8E#1.Relay0.Switch;val==\"true\"? \"mdui-green-glow\": \"mdui-blue-glow\"}","visibility-oid":""},"style":{"left":"110px","top":"335px","width":"80px","height":"80px","border-width":"1px","border-style":"solid","border-color":"#b0ffa4","z-index":"4","border-radius":"15px","background":"","background-color":""},"widgetSet":"basic"}]``
                              1 Reply Last reply
                              0
                              • bilberryB bilberry

                                @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.

                                GlasfaserG Offline
                                GlasfaserG Offline
                                Glasfaser
                                wrote on last edited by
                                #143

                                @bilberry

                                Sorry ...mehr kann ich dir nicht helfen..
                                Das mit dem Icon kann kommen , da ich nicht (noch nicht ) Design CSS v2 habe nur die v1.

                                Bei mir ist er so

                                aus.JPG
                                Aber das hat sich ja jetzt erledigt , da es auch ohne CSS bei dir nicht geht ....

                                Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                                Dominik F.D 1 Reply Last reply
                                0
                                • GlasfaserG Glasfaser

                                  @bilberry

                                  Sorry ...mehr kann ich dir nicht helfen..
                                  Das mit dem Icon kann kommen , da ich nicht (noch nicht ) Design CSS v2 habe nur die v1.

                                  Bei mir ist er so

                                  aus.JPG
                                  Aber das hat sich ja jetzt erledigt , da es auch ohne CSS bei dir nicht geht ....

                                  Dominik F.D Offline
                                  Dominik F.D Offline
                                  Dominik F.
                                  wrote on last edited by
                                  #144

                                  Hallo zusammen,
                                  ich würde gerne das Pop Up Menü aus der Demo dafür nutzen um Views zu wechseln, weiß aber nicht was ich einstellen soll in den Untermenüs. Hat jemand einen Tipp für mich?

                                  UhulaU 1 Reply Last reply
                                  0
                                  • UhulaU Offline
                                    UhulaU Offline
                                    Uhula
                                    wrote on last edited by
                                    #145

                                    @der-eine Wie versprochen: [Vorlage] MDCSS v2: ping-Adapter in vis anzeigen

                                    Uhula - Leise und Weise
                                    Ex: ioBroker on Gigabyte NUC Proxmox

                                    D 1 Reply Last reply
                                    0
                                    • Dominik F.D Dominik F.

                                      Hallo zusammen,
                                      ich würde gerne das Pop Up Menü aus der Demo dafür nutzen um Views zu wechseln, weiß aber nicht was ich einstellen soll in den Untermenüs. Hat jemand einen Tipp für mich?

                                      UhulaU Offline
                                      UhulaU Offline
                                      Uhula
                                      wrote on last edited by
                                      #146

                                      @Dominik-F Die "menu-items" müssen nur vom Typ "jqui - navigation - item" sein, wie im lnav, aber nicht "mdui-navitem" zuweisen, sondern "mdui-menuitem" (und die anderen CSS der menu-items) - das müsste funktionieren.

                                      Uhula - Leise und Weise
                                      Ex: ioBroker on Gigabyte NUC Proxmox

                                      Dominik F.D 1 Reply Last reply
                                      0
                                      • UhulaU Uhula

                                        @Dominik-F Die "menu-items" müssen nur vom Typ "jqui - navigation - item" sein, wie im lnav, aber nicht "mdui-navitem" zuweisen, sondern "mdui-menuitem" (und die anderen CSS der menu-items) - das müsste funktionieren.

                                        Dominik F.D Offline
                                        Dominik F.D Offline
                                        Dominik F.
                                        wrote on last edited by
                                        #147

                                        @Uhula

                                        Dank dir, habe es jetzt hinbekommen. Jetzt hab ich nur noch ein kleines Problem und zwar möchte ich das in der tnav verwenden und da kommen bei mir ganz komische Dinge herraus. Im Hochformat am Handy ist die tnav nicht mehr zu sehen, im Querformat ist sie ganz Rechts angeordnet und wenn ich dann das Menü öffne erscheint das Links daneben anstatt untereinander

                                        UhulaU 1 Reply Last reply
                                        0
                                        • UhulaU Uhula

                                          @der-eine Wie versprochen: [Vorlage] MDCSS v2: ping-Adapter in vis anzeigen

                                          D Offline
                                          D Offline
                                          der-eine
                                          wrote on last edited by
                                          #148

                                          @Uhula MEGA!! Danke Dir vor allem hätte ich nicht damit gerechnet, dass es so schnell geht.👍

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          308

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe