Skip to content
  • Home
  • 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
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] MDCSS v2: Material Design CSS Version 2

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.2k

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.5k

[Projekt] MDCSS v2: Material Design CSS Version 2

Scheduled Pinned Locked Moved Visualisierung
material uivismaterial css
717 Posts 74 Posters 182.9k 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.
  • Dominik F.D Dominik F.

    @tom57

    Schick mir mal hier dein Projekt, dann schaue ich mir das morgen mal an.

    Meine abar sieht so aus: Habe die Widgets exportiert

    [{"tpl":"tplHtml","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,"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,"html":"\"primary_color\":\"#000000\",\n\"abar_color\":\"#121212\",\n\"tnav_color\":\"#000000\",\n\"bnav_color\":\"#000000\",\n\"lnav_color\":\"#000000\",\n\"rnav_color\":\"#000000\",\n\"secondary_color\":\"amber\",\n\"content_color\":\"#121212\",\n\"lnav_fixed_width\":\"{0_userdata.0.mdui.vis.lnav_fixed_width}\",\n\"lnav_fixed_open\":\"true\"\n\"color1\":\"\",\n\"color1_dark\":\"\",\n\"color2\":\"\",\n\"color2_dark\":\"\",\n\"color3\":\"\",\n\"color3_dark\":\"\"\n\n","class":"mdui-label xdui-config","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"104px","top":"536px","width":"542px","height":""},"widgetSet":"basic"},{"tpl":"tplHtml","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,"html":"\"primary_color\":\"{0_userdata.0.mdui.vis.primary_color}\",\n\"abar_color\":\"{0_userdata.0.mdui.vis.abar_color}\",\n\"tnav_color\":\"{0_userdata.0.mdui.vis.tnav_color}\",\n\"bnav_color\":\"{0_userdata.0.mdui.vis.bnav_color}\",\n\"lnav_color\":\"{0_userdata.0.mdui.vis.lnav_color}\",\n\"rnav_color\":\"{0_userdata.0.mdui.vis.lnav_color}\",\n\"secondary_color\":\"{0_userdata.0.mdui.vis.secondary_color}\",\n\"content_color\":\"{0_userdata.0.mdui.vis.content_color}\",\n\"lnav_fixed_width\":\"{0_userdata.0.mdui.vis.lnav_fixed_width}\",\n\"lnav_fixed_open\":\"true\",\n\"color1\":\"{0_userdata.0.mdui.vis.color1}\",\n\"color1_dark\":\"{0_userdata.0.mdui.vis.color1_dark}\",\n\"color2\":\"{0_userdata.0.mdui.vis.color2}\",\n\"color2_dark\":\"{0_userdata.0.mdui.vis.color2_dark}\",\n\"color3\":\"{0_userdata.0.mdui.vis.color3}\",\n\"color3_dark\":\"{0_userdata.0.mdui.vis.color3_dark}\"\n\n","class":"mdui-label mdui-config"},"style":{"left":"104px","top":"216px","width":"434px","height":"307px"},"widgetSet":"basic"},{"tpl":"tplHtml","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,"html":"\"primary_color\":\"\",\n\"abar_color\":\"\",\n\"tnav_color\":\"\",\n\"lnav_color\":\"\",\n\"rnav_color\":\"\",\n\"secondary_color\":\"\",\n\"content_color\":\"\",\n\"lnav_fixed_width\":\"{0_userdata.0.mdui.vis.lnav_fixed_width}\",\n\"lnav_fixed_open\":\"true\"\n\"color1\":\"\",\n\"color1_dark\":\"\",\n\"color2\":\"\",\n\"color2_dark\":\"\",\n\"color3\":\"\",\n\"color3_dark\":\"\"\n\n","class":"mdui-label xdui-config"},"style":{"left":"104px","top":"104px","width":"542px","height":"","opacity":""},"widgetSet":"basic"}]
    
    T Offline
    T Offline
    tp1de
    wrote on last edited by tp1de
    #628

    @Dominik-F sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

    Schick mir mal hier dein Projekt, dann schaue ich mir das morgen mal an.
    Meine abar sieht so aus: Habe die Widgets exportiert

    Danke werde ich Morgen mal vergleichen und dann ggfs. Dir das Projekt schicken ....

    T 1 Reply Last reply
    0
    • T tp1de

      @Dominik-F sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

      Schick mir mal hier dein Projekt, dann schaue ich mir das morgen mal an.
      Meine abar sieht so aus: Habe die Widgets exportiert

      Danke werde ich Morgen mal vergleichen und dann ggfs. Dir das Projekt schicken ....

      T Offline
      T Offline
      tp1de
      wrote on last edited by tp1de
      #629

      @Dominik-F
      So ich bin einen Schritt weiter:
      Ich muss die Hintergrundfarbe für jeden content view setzten, um den Farbwechsel-Effekt zu vermeiden. Ich habe mal für alle content-views

      mdui-black-bg
      

      gesetzt und es funktioniert nun einwandfrei.

      Nun frage ich mich allerdings, wo überall ich die mdi-Farbinformationen setzten muss - Ist das so richtig?

      1. Cards: Nur für ggfs. einzelne Elemente
      2. Content: Für die contentview selber ggfs. den Hintergrund
        und für die cards alle css mdui-attribute inkl. Farben
      3. Page: Keine css Farb-Info
      Dominik F.D 1 Reply Last reply
      0
      • T tp1de

        @Dominik-F
        So ich bin einen Schritt weiter:
        Ich muss die Hintergrundfarbe für jeden content view setzten, um den Farbwechsel-Effekt zu vermeiden. Ich habe mal für alle content-views

        mdui-black-bg
        

        gesetzt und es funktioniert nun einwandfrei.

        Nun frage ich mich allerdings, wo überall ich die mdi-Farbinformationen setzten muss - Ist das so richtig?

        1. Cards: Nur für ggfs. einzelne Elemente
        2. Content: Für die contentview selber ggfs. den Hintergrund
          und für die cards alle css mdui-attribute inkl. Farben
        3. Page: Keine css Farb-Info
        Dominik F.D Offline
        Dominik F.D Offline
        Dominik F.
        wrote on last edited by
        #630

        @tom57

        Das ist das was ich dir geschrieben habe, habe mich da wohl undeutlich ausgedrückt.

        Ich habe für folgendes Farben gesetzt die ich im Menü auswählen kann:

        Unbenannt.PNG

        Unbenannt.PNG

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

          @tom57

          Das ist das was ich dir geschrieben habe, habe mich da wohl undeutlich ausgedrückt.

          Ich habe für folgendes Farben gesetzt die ich im Menü auswählen kann:

          Unbenannt.PNG

          Unbenannt.PNG

          T Offline
          T Offline
          tp1de
          wrote on last edited by tp1de
          #631

          @Dominik-F sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

          Ich habe für folgendes Farben gesetzt die ich im Menü auswählen kann:

          Ja klar, dass war bei mir auch so. Nur führt z.B. die Content Color nicht dazu, dass bei mir auch alle Hintergründe so dargestellt werden, bzw. diese ändern sich nach 30 Sekunden. Da greift dann wahrscheinlich irgendein Script. Das betrifft insbesondere den Hintergrund der content pages.

          Nur wenn ich die Farb-Attribute noch einmal manuell in den Content-Pages zuordne, dann funktioniert es stabil.

          1 Reply Last reply
          0
          • S Offline
            S Offline
            Spampunk
            wrote on last edited by
            #632

            Hallo zusammen,
            mit mdui-show-hint kann ich ja in Zusammenhang mit mdui-range-x-y den Fortschritt eines Sliders anzeigen lassen. Ich würde das gerne etwas modifizieren und zur Anzeige von Minuten und Sekunden im Format mm:ss verwenden wollen.

            Im Spotify-Adapter ist die Dauer des Tracks in Millisekunden angegeben. Diesen kann ich auch mit einem Binding verwenden, um den Maximalwert des Sliders dynamisch zu ändern. Dann werden natürlich auch die Millisekunden im Slider-Objekt angezeigt:

            screenshot.png

            Was muss ich denn dafür machen? Geht das überhaupt?

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

              Hallo zusammen,
              mit mdui-show-hint kann ich ja in Zusammenhang mit mdui-range-x-y den Fortschritt eines Sliders anzeigen lassen. Ich würde das gerne etwas modifizieren und zur Anzeige von Minuten und Sekunden im Format mm:ss verwenden wollen.

              Im Spotify-Adapter ist die Dauer des Tracks in Millisekunden angegeben. Diesen kann ich auch mit einem Binding verwenden, um den Maximalwert des Sliders dynamisch zu ändern. Dann werden natürlich auch die Millisekunden im Slider-Objekt angezeigt:

              screenshot.png

              Was muss ich denn dafür machen? Geht das überhaupt?

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

              Hallo zusammen,

              ich habe folgendes Widget:

              [{"tpl":"tplValueBool","data":{"oid":"scene.0.Gute_Nacht.Gute_Nacht","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","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":" mdui-state mdui-center-v ","html_true":"<div class=\"mdui-green-bg\"><img src='/icons-mfd-png/scene_night.png' width=\"30px\" height=\"30px\">eingeschaltet</div>","html_false":"<div class=\"mdui-red-bg\"><img src='/icons-mfd-png/scene_night.png' width=\"30px\" height=\"25px\">ausgeschaltet</div>","html_append":""},"style":{"left":"calc(78% - 75px)","top":"117px","width":"150px","height":"30px"},"widgetSet":"basic"}]
              

              Hier nochmal als Bildes geht um das mittlere rechte Widget:
              Unbenannt.PNG

              Mein Problem mit dem Widget ist, dass es eigentlich rot sein müsste und ausgeschaltet dort stehen sollte, wie das obere rechte Widget.
              Das Problem liegt wohl an dem Datenpunkt, der uncertain ist. Ich bekomme es auch mit bindings nicht hin, dass es bei true grün und eingeschaltet ist, und bei false und uncertain rot und ausgeschaltet. kann mir jemand helfen?

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

                Hallo zusammen,

                ich habe folgendes Widget:

                [{"tpl":"tplValueBool","data":{"oid":"scene.0.Gute_Nacht.Gute_Nacht","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","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":" mdui-state mdui-center-v ","html_true":"<div class=\"mdui-green-bg\"><img src='/icons-mfd-png/scene_night.png' width=\"30px\" height=\"30px\">eingeschaltet</div>","html_false":"<div class=\"mdui-red-bg\"><img src='/icons-mfd-png/scene_night.png' width=\"30px\" height=\"25px\">ausgeschaltet</div>","html_append":""},"style":{"left":"calc(78% - 75px)","top":"117px","width":"150px","height":"30px"},"widgetSet":"basic"}]
                

                Hier nochmal als Bildes geht um das mittlere rechte Widget:
                Unbenannt.PNG

                Mein Problem mit dem Widget ist, dass es eigentlich rot sein müsste und ausgeschaltet dort stehen sollte, wie das obere rechte Widget.
                Das Problem liegt wohl an dem Datenpunkt, der uncertain ist. Ich bekomme es auch mit bindings nicht hin, dass es bei true grün und eingeschaltet ist, und bei false und uncertain rot und ausgeschaltet. kann mir jemand helfen?

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

                Okay, scheint wohl ein unlösbares Problem zu sein.

                @Uhula
                Kann man mit deinem CSS den mdui-Switch invertieren? Habe momentan das Problem das ich 3 States bei einem Datenpunkt habe. True, False,Uncertain. Uncertain wird anscheinend wie True angesehen und der mdui-switch soll bei uncertain oder false in diesem Fall false anzeigen.
                Hast du eine Idee?

                1 Reply Last reply
                0
                • F Offline
                  F Offline
                  fritzke316
                  wrote on last edited by
                  #635

                  @Uhula

                  Mit welcher Variable wird denn das Umschalten der Schriften von schwarz auf weiß gesteuert?
                  Ich würde damit auch gerne das Invertieren meiner .png Icons steuern, wenn das möglich ist?

                  jpgorganizerJ 1 Reply Last reply
                  0
                  • F fritzke316

                    @Uhula

                    Mit welcher Variable wird denn das Umschalten der Schriften von schwarz auf weiß gesteuert?
                    Ich würde damit auch gerne das Invertieren meiner .png Icons steuern, wenn das möglich ist?

                    jpgorganizerJ Offline
                    jpgorganizerJ Offline
                    jpgorganizer
                    wrote on last edited by jpgorganizer
                    #636

                    Hallo zusammen,

                    ich würde gerne einen Time Picker (https://material.io/archive/guidelines/components/pickers.html#pickers-usage etwas runterscrollen) nutzen, aber gerade keine Idee ob und wie. Hat jemand einen Tipp für mich?

                    b534ead3-154a-420c-ba61-54dcac52424a-grafik.png

                    Danke
                    jpgorganizer

                    Edit 28.12.20: niemand eine Idee?
                    Ich habe es für mich gelöst, zwar anders wie ursprünglich gedacht, aber für mich ok.

                    Bitte keine Fragen per PN, die gehören ins Forum!

                    ioBroker
                    smartgarden Adapter für GARDENA smart system
                    Plattform: Raspberry Pi OS Linux 12 (bookworm), Node.js: v18.18.2, NPM: 9.8.1

                    jpgorganizerJ 1 Reply Last reply
                    0
                    • foxriver76F Do not disturb
                      foxriver76F Do not disturb
                      foxriver76
                      Developer
                      wrote on last edited by
                      #637

                      Hi,

                      gibt es eine Möglichkeit, auch negative Zahlen in mdui-range-min-max zu nutzen?

                      Falls nein, gibt es eine Chance dass du es rein packst @Uhula? ;-)

                      beste Grüße

                      fox

                      Videotutorials & mehr

                      Hier könnt ihr mich unterstützen.

                      1 Reply Last reply
                      0
                      • nukleuzN Offline
                        nukleuzN Offline
                        nukleuz
                        wrote on last edited by
                        #638

                        Hallo zusammen,

                        erst einmal: Super Arbeit!!!

                        Bei mir wird mdui-state im Frontend nicht angezeigt.
                        Ich nutze das MDSimple - dort die States mit Vorgabe der Werteliste.
                        Im VIS-Editor sieht alles super aus - nur halt im VIS-Frontend nicht.

                        Sonst scheint alles wunderbar zu funktionieren...

                        Hat jemand einen Rat?

                        Danke und ach ja, frohes Neuses! :)

                        Intel NUC -> ProxMox -> Debian -> ioBroker (Master)| RPI3B+ -> rtl_433 (Slave) | CCU2

                        1 Reply Last reply
                        1
                        • jpgorganizerJ jpgorganizer

                          Hallo zusammen,

                          ich würde gerne einen Time Picker (https://material.io/archive/guidelines/components/pickers.html#pickers-usage etwas runterscrollen) nutzen, aber gerade keine Idee ob und wie. Hat jemand einen Tipp für mich?

                          b534ead3-154a-420c-ba61-54dcac52424a-grafik.png

                          Danke
                          jpgorganizer

                          Edit 28.12.20: niemand eine Idee?
                          Ich habe es für mich gelöst, zwar anders wie ursprünglich gedacht, aber für mich ok.

                          jpgorganizerJ Offline
                          jpgorganizerJ Offline
                          jpgorganizer
                          wrote on last edited by jpgorganizer
                          #639

                          Hi @Uhula,

                          ich versuche gerade mit mdui-click?action:setValue(mystate,abc 123) in den state zu schreiben, aber es steht immer nur ab drin. Sogar das c fehlt schon.

                          Kann es sein, dass hier nur Werte ohne Blank zulässig sind?

                          VG jpgorganizer

                          Edit:

                          habe das Problem gefunden. Es liegt an der Funktion

                          // liefert den suffix einer gegebenen class zurück
                          // Bsp: mdui-target-w00002 -> w00002
                          //      mdui-range-100-200 -> 100-200
                          function _getSuffix( s, classname ) {
                              let suf = "";
                              if (s.includes(classname)) {
                                  suf = s.substr(s.indexOf(classname)+classname.length,1000)+" ";
                                  suf = suf.substr(0,suf.indexOf(" "));
                              }
                              return suf;    
                          }
                          

                          und da an der o.a. Codezeile 8. Dort wird bei dem Blank abgeschnitten .... hmmm, muss das so sein. Wenn ja warum?

                          Ich mach mir mal eine Fkt _getSuffixWithBlank und ruf die an der relevanten Stelle auf, aber an allen anderen Stellen lass ich es mal so wie es ist

                          VG jpgorganizer

                          Bitte keine Fragen per PN, die gehören ins Forum!

                          ioBroker
                          smartgarden Adapter für GARDENA smart system
                          Plattform: Raspberry Pi OS Linux 12 (bookworm), Node.js: v18.18.2, NPM: 9.8.1

                          jpgorganizerJ 1 Reply Last reply
                          0
                          • jpgorganizerJ jpgorganizer

                            Hi @Uhula,

                            ich versuche gerade mit mdui-click?action:setValue(mystate,abc 123) in den state zu schreiben, aber es steht immer nur ab drin. Sogar das c fehlt schon.

                            Kann es sein, dass hier nur Werte ohne Blank zulässig sind?

                            VG jpgorganizer

                            Edit:

                            habe das Problem gefunden. Es liegt an der Funktion

                            // liefert den suffix einer gegebenen class zurück
                            // Bsp: mdui-target-w00002 -> w00002
                            //      mdui-range-100-200 -> 100-200
                            function _getSuffix( s, classname ) {
                                let suf = "";
                                if (s.includes(classname)) {
                                    suf = s.substr(s.indexOf(classname)+classname.length,1000)+" ";
                                    suf = suf.substr(0,suf.indexOf(" "));
                                }
                                return suf;    
                            }
                            

                            und da an der o.a. Codezeile 8. Dort wird bei dem Blank abgeschnitten .... hmmm, muss das so sein. Wenn ja warum?

                            Ich mach mir mal eine Fkt _getSuffixWithBlank und ruf die an der relevanten Stelle auf, aber an allen anderen Stellen lass ich es mal so wie es ist

                            VG jpgorganizer

                            jpgorganizerJ Offline
                            jpgorganizerJ Offline
                            jpgorganizer
                            wrote on last edited by jpgorganizer
                            #640

                            fyi, was ich zu mdui-click rausgefunden habe - ob dies das gewünschte Verhalten ist/war oder nicht, das muss jemand anderes bewerten

                            • es geht nur eine Action: schon vor längerem erkannt (und damals auch für mich behoben - ich glaube ich habe es damals auch gepostet)
                            • bei Action setValue(state,value) darf kein Blank im Wert sein, der in den State geschrieben werden soll
                            • wenn man ein Widget jqui - navigation - Icon nimmt, dort wie vorgesehen eine View zum Navigieren angibt und zusätzlich dann eine Action setValue(state,value) dazu schreibt, dann funktioniert dies bei mir nur im Browser auf dem PC (Firefox); auf dem Handy mit Chrome funktioniert das setValue(state,value) dann nicht. Nimmt man den Wert bei View zum Navigieren raus und macht eine weitere Action changeView(destview) dazu, dann geht es in beiden Fällen (man beachte aber den ersten Aufzählungspunkt.

                            Ich habe dies heute Abend für mich so festgestellt. Evtl. gibt es weitere Randbedingungen wann dies geschieht und wann auch nicht. Diese sind mir dann aber nicht bewusst geworden. Ich habe für die ersten beiden Aufzählungspunkte das Script angepasst, so dass dies nun funktioniert und eben keine Einschränkung mehr da ist. Der dritte Aufzählungspunkt erfordert keine Scriptänderung, sondern wäre evtl. was für die Doku.

                            @Uhula, falls du die Änderungen möchtest, dann kann ich dir das schicken. Evtl. kannst du davon etwas in deinen Standard oder auch in die Doku übernehmen

                            @all, Ihr könnt das ja mal bei euch ausprobieren. Evtl. ist das alles nur bei mir und ich habe irgendwo etwas (unbewusst) verstellt und stoße nun auf solche Dinge

                            VG jpgorganizer

                            Bitte keine Fragen per PN, die gehören ins Forum!

                            ioBroker
                            smartgarden Adapter für GARDENA smart system
                            Plattform: Raspberry Pi OS Linux 12 (bookworm), Node.js: v18.18.2, NPM: 9.8.1

                            1 Reply Last reply
                            0
                            • V Offline
                              V Offline
                              Volker859
                              wrote on last edited by
                              #641

                              Hallo zusammen,

                              ich bin neu hier im Forum und blutiger Anfänger in Sachen ioBroker.
                              Vor einigen Tagen habe ich die Doku "Material Design CSS" gelesen und mich gefragt, ob es möglich ist, Cards in der Content-View unabhängig von der Bildschirmgröße jeweils zentriert anordnen bzw. anzeigen zu lassen.

                              Über eine Antwort würde ich mich freuen.

                              P 1 Reply Last reply
                              0
                              • V Volker859

                                Hallo zusammen,

                                ich bin neu hier im Forum und blutiger Anfänger in Sachen ioBroker.
                                Vor einigen Tagen habe ich die Doku "Material Design CSS" gelesen und mich gefragt, ob es möglich ist, Cards in der Content-View unabhängig von der Bildschirmgröße jeweils zentriert anordnen bzw. anzeigen zu lassen.

                                Über eine Antwort würde ich mich freuen.

                                P Offline
                                P Offline
                                Pittini
                                Developer
                                wrote on last edited by
                                #642

                                @Volker859 sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                Hallo zusammen,

                                ich bin neu hier im Forum und blutiger Anfänger in Sachen ioBroker.
                                Vor einigen Tagen habe ich die Doku "Material Design CSS" gelesen und mich gefragt, ob es möglich ist, Cards in der Content-View unabhängig von der Bildschirmgröße jeweils zentriert anordnen bzw. anzeigen zu lassen.

                                Über eine Antwort würde ich mich freuen.

                                Das geht grundsätzlich immer, unabhängig vom Material Design. Du gibst bei left und top Eigenschaft keine direkte Angabe sondern ne berechnete. Sieht so aus: calc(50% - XYpx) - XY ist die halbe widthangabe des widgets, der Card oder was auch immer.

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

                                  @Volker859 sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                  Hallo zusammen,

                                  ich bin neu hier im Forum und blutiger Anfänger in Sachen ioBroker.
                                  Vor einigen Tagen habe ich die Doku "Material Design CSS" gelesen und mich gefragt, ob es möglich ist, Cards in der Content-View unabhängig von der Bildschirmgröße jeweils zentriert anordnen bzw. anzeigen zu lassen.

                                  Über eine Antwort würde ich mich freuen.

                                  Das geht grundsätzlich immer, unabhängig vom Material Design. Du gibst bei left und top Eigenschaft keine direkte Angabe sondern ne berechnete. Sieht so aus: calc(50% - XYpx) - XY ist die halbe widthangabe des widgets, der Card oder was auch immer.

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

                                  @Pittini

                                  Du kennst dich ja auch sehr gut mit MD V2 aus,

                                  Ich würde die Card EG Temperaturen gerne unterhalb der anderen beiden Cards anordnen. Hast du eine Idee wie ich das hinbekomme?

                                  Unbenannt.PNG

                                  P S 2 Replies Last reply
                                  0
                                  • Dominik F.D Dominik F.

                                    @Pittini

                                    Du kennst dich ja auch sehr gut mit MD V2 aus,

                                    Ich würde die Card EG Temperaturen gerne unterhalb der anderen beiden Cards anordnen. Hast du eine Idee wie ich das hinbekomme?

                                    Unbenannt.PNG

                                    P Offline
                                    P Offline
                                    Pittini
                                    Developer
                                    wrote on last edited by
                                    #644

                                    @Dominik-F Gesamtbereich kleiner machen, dann müßte das responsive greifen. Oder responsive abschalten und manuell platzieren.

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

                                      @Dominik-F Gesamtbereich kleiner machen, dann müßte das responsive greifen. Oder responsive abschalten und manuell platzieren.

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

                                      @Pittini

                                      Mein Problem ist, das ich das ganze zusätzlich auf dem Handy noch nutze. Da ist der Bereich ja kleiner und es passt alles.
                                      Wenn ich den Gesamtbereich kleiner mache, dann passen viele andere Views nicht mehr, da ist alles so aufgebaut, dass immer 3 Cards nebeneinander passen.

                                      Ich kann daher auch die Cards nicht breiter machen, dass die sich automatisch nach unten schiebt.

                                      Hast du noch eine andere Idee?

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

                                        @Pittini

                                        Mein Problem ist, das ich das ganze zusätzlich auf dem Handy noch nutze. Da ist der Bereich ja kleiner und es passt alles.
                                        Wenn ich den Gesamtbereich kleiner mache, dann passen viele andere Views nicht mehr, da ist alles so aufgebaut, dass immer 3 Cards nebeneinander passen.

                                        Ich kann daher auch die Cards nicht breiter machen, dass die sich automatisch nach unten schiebt.

                                        Hast du noch eine andere Idee?

                                        P Offline
                                        P Offline
                                        Pittini
                                        Developer
                                        wrote on last edited by
                                        #646

                                        @Dominik-F Naja, dann ist das ein "Wasch mich aber mach mich nicht nass" Problem. Da fällt mir nur ein nen zusätzlichen anderen View zumachen.

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

                                          @Dominik-F Naja, dann ist das ein "Wasch mich aber mach mich nicht nass" Problem. Da fällt mir nur ein nen zusätzlichen anderen View zumachen.

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

                                          @Pittini

                                          Ja, das hatte ich befürchtet. Ich danke dir

                                          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

                                          775

                                          Online

                                          32.5k

                                          Users

                                          81.7k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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