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.
    • P
      Pittini Developer @Uhula last edited by

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

      Kleiner Fehler, leicht zu beheben, "background" statt "color":

      Jap, das wars, jetzt läuft alles. Danke Dir.

      1 Reply Last reply Reply Quote 0
      • R
        reini last edited by

        ich verstehe den Umstieg von V1 auf V2 noch nicht ganz - einfach den Code von CSS und Skripte gegen die neuen Codezeilen ersetzen?

        sigi234 1 Reply Last reply Reply Quote 0
        • sigi234
          sigi234 Forum Testing Most Active @reini last edited by

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

          ich verstehe den Umstieg von V1 auf V2 noch nicht ganz - einfach den Code von CSS und Skripte gegen die neuen Codezeilen ersetzen?

          Jupp

          1 Reply Last reply Reply Quote 0
          • D
            der-eine @Dominik F. last edited by der-eine

            @Uhula super genau das hab ich gemeint! 👍 Du hast im ersten Posting schon mal ein Skript zur verfügung gestellt. Dieses hat bei mir leider nicht funktioniert aber diese schon. Das meinte ich mit "erklärt". Sollte die Farbe des Kalenders bis ans Ende des Borders gehen?
            Bildschirmfoto 2020-02-24 um 13.27.09.png

            @Dominik-F ich bin zwar nicht Pittini aber evtl kann ich Dir helfen. Bei mir funktioniert das anzeigen der Diagramme.

            Bildschirmfoto 2020-02-24 um 12.46.44.png

            Den Link kopieren

            http://192.168.178.51:3000/d/gRZfcBQWz/internet?orgId=1&from=1582523296559&to=1582544896559&panelId=2&fullscreen

            und hinten noch

            &kiosk&theme=dark

            anhängen.

            http://192.168.178.51:3000/d/gRZfcBQWz/internet?orgId=1&from=1582523296559&to=1582544896559&panelId=2&fullscreen&kiosk&theme=dark

            In der Vis bei dem markiertem basic-html in jedem Bedienfeld (auch bei den 3 Punkten) das target angeben. (Widgetnr. vom iFrame)
            Bildschirmfoto 2020-02-24 um 12.56.43.png

            Dominik F. 1 Reply Last reply Reply Quote 0
            • Dominik F.
              Dominik F. @der-eine last edited by

              @der-eine

              Vielen Dank, das hat jetzt soweit funktioniert bis auf eine Sache. Die Grafanaseite ist anfangs immer schwarz und links oben ist ein Ausrufezeichen mit rotem Hintergrund. Klicke ich drauf steht dort:Invalid dimensions for Plot, width=376,164, high=0

              D P 2 Replies Last reply Reply Quote 0
              • D
                der-eine @Dominik F. last edited by der-eine

                @Dominik-F versuche mal den Link in der Dashboard Übersicht über Share zu kopieren.
                Es entstehen wohl zwei unterschiedliche links wenn man entweder direkt im Trend über Share den Link erzeugt oder im Dashboard. Vergleich mal welcher der beiden links dem von mir am ähnlichsten ist und nutze den.

                Bin gerade nicht zuhause ansonsten würd ich selber schnell schauen...

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

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

                  Die Grafanaseite ist anfangs immer schwarz und links oben ist ein Ausrufezeichen mit rotem Hintergrund. Klicke ich drauf steht dort:Invalid dimensions for Plot, width=376,164, high=0

                  Das hab ich auch und zwar immer dann wenn beim Laden der Seite die Card zusammengeklappt ist. Offenbar merkt Grafana dass zu wenig Platz zum anzeigen im collapsed Zustand ist und mault. Geht weg wenn man manuell iwas verändert (Zeitraum/Refresh) oder einfach wartet bis der normale refresh passiert.

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

                    @Pittini

                    Da sagst du was. wenn ich das mdui-unload rausnehme hab ich das nicht mehr. Was mir jedoch aufgefallen ist, ist das wenn ich das komplette Dashboard share, was ja nicht so dolle aussieht, hab ich das problem nicht.

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

                      Hi, mach ich da wider was falsch? Wenn ich von 2.0.3 auf 2.1.1 wechsele werden die Cards schmaler:

                      v2.0.3:
                      f01182ff-198f-4935-88e0-fb913a7d2bda-image.png

                      v2.1.1:
                      5ebe6fe1-0506-43e1-aca4-ae741cdcfb07-image.png

                      Ist das so normal?

                      Danke!

                      Uhula 1 Reply Last reply Reply Quote 0
                      • Uhula
                        Uhula @mrFenyx last edited by

                        @mrFenyx ja, ist es. Bis zur 2.1 haben mdui-cols-N eine Größenänderung von 10% gehabt, mdui-cols-4 konnte also 320-352 px breit sein. Das führte zu einiger Verwirrung. Deswegen habe ich diese Toleranz entfernt. Über zb mdui-cols-4-toc-5 kannst du es aber nachbilden (320-400 pcx)

                        mrFenyx Glasfaser 2 Replies Last reply Reply Quote 0
                        • mrFenyx
                          mrFenyx @Uhula last edited by

                          @Uhula Danke, hab's gefixed.

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

                            @Uhula

                            Hallo Uhula ,

                            im Thread View Adapterstatus , haben wir herrausgefunden ,
                            das es Probleme mit dem Widget ContainerIconDialog und Container Dialog
                            in Verbindung mit deinem Skript CSSv1 und wie auch CSSv2 gibt .

                            Kannst du hier weiterhelfen , da ich das Elegante Design vom Widget schon behalten wollte.
                            View Thema ist dark-hive

                            Die Select Widget öffnen nicht , bzw sind im Hintergrund , wo sie dann nicht Sichtbar sind .

                            Uhula 1 Reply Last reply Reply Quote 0
                            • Bastelritius
                              Bastelritius last edited by

                              Hallo,

                              ich habe bei mir die MD_Demo importiert. Leider funktioniert es nicht so wie es soll.

                              • Das Menü an der Seite kann ich zwar aufklappen, ich kann dort aber nichts anklicken. Beim Klick, geht das Menü wieder zu und es passiert nichts.
                                410725bd-5969-49d6-8757-bd1be66a48da-image.png

                              • Die cards kann ich auch nicht zuklappen.

                              • Den Vollbildmodus, z.b. von der Uhr kann ich zwar aktivieren, aber es sieht dann sehr komisch aus.
                                812ef0cc-f25d-40ef-a04a-ab7f37d9f333-image.png

                              Kann mir jemand sagen wodran das liegen kann?

                              Danke schon mal

                              mrFenyx 1 Reply Last reply Reply Quote 0
                              • mrFenyx
                                mrFenyx @Bastelritius last edited by

                                @Bastelritius Hi, wenn du ioBroker.vis-material benutzt dann bitte deinstallieren. Es benutzt eine alte Version von MDUI und macht alles durcheinander.

                                Bastelritius X 2 Replies Last reply Reply Quote 0
                                • Uhula
                                  Uhula @Glasfaser last edited by

                                  @Glasfaser Im Script werden click-Events auf verschiedene "mdui-" CSS classes registriert und ausgewertet. Warum das aber einen Einfluss auf die MDW haben kann, weiß ich nicht, da diese ja nicht mit "mdui-" arbeiten. Allerdings habe ich sie auch nicht installiert, so dass ich es nicht ausprobieren kann. Insofern könnte ich nur im Dunkeln stochern. Ein mischen von "mdui-" und "mdi-" (so heißen die CSS classes wohl beim MDW) kann zu solchen Problemen führen.

                                  Glasfaser Dominik F. 2 Replies Last reply Reply Quote 0
                                  • Glasfaser
                                    Glasfaser @Uhula last edited by Glasfaser

                                    @Uhula

                                    Danke für dein Beitrag ,aber leider verstehe ich es nicht !?
                                    OK .. du kannst nicht testen , aber warum passiert es erst wenn dein Script eingefügt wird .

                                    Leider ohne dein Skript ( Version CCSv1) , sieht der Widget sehr bescheiden aus .

                                    Hast du vielleicht eine andere Lösung / Vorschlag wie ich es umgehen kann oder testen kann !?

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

                                      @Uhula

                                      Ich hätte da noch eine Idee bzw. einen Vorschlag. Ich fände es cool, wenn man anstatt mdui-green vielleicht auch mdui-#02c908 eingeben könnte damit man was die Farben angeht noch etwas flexibler ist. Oder ist das vielleicht schon machbar?

                                      @der-eine
                                      Ich habe das Dashboard nun einbinden können, vielen Dank für die Hilfe. Mir fällt nur auf, dass sich die Anzeige nicht selbstständig aktualisiert und ich bevor ich Änderungen sehe erst die Anzeige einmal umstellen muss zu z.B. einer Woche und dann wieder auf 1 Tag damit es sich aktualsiert. Hast du da noch einen Tipp für mich?

                                      Uhula D 2 Replies Last reply Reply Quote 0
                                      • Uhula
                                        Uhula @Dominik F. last edited by

                                        @Dominik-F Die Farben kannst du ja direkt im Widget über die background-color bzw. font-color setzen. Sollte/müsste (häufig) funktionieren. In der mdui-(color) geht es nicht, da diese je nach gewählten light/dark-Theme sich automatisch anpassen, was bei festen Farben so nicht funktioniert.

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

                                        aber warum passiert es erst wenn dein Script eingefügt wird

                                        Genau das kann ich dir so nicht beantworten, da ich die MDW nicht kenne und somit auch die Wechselwirkungen zwischen den beiden nicht. Ohne Browser-Debugging (also bei mir Installation der MDW und Aufnahme deines Projekts) werde ich es nicht beantworten können. Da ich keine 2´zweite ioBroker Inst habe, möchte ich die MDW auch nicht installieren. Du wirst dann ohne MDCSSv1 eine Lösung nur mit MDW suchen müssen - oder ich schreibe irgendwann das Adapter-Anzeige-Script von @Scrounger so um, dass es ohne MDW und nur mit MDCSSv2 funktioniert 😉 (ist ja nur ein HTML-Code in einem State, welches dann in der vis angezeigt wird). Auf Dauer wirst du aber mit MDW und MDCSS immer bei bestimmten Konstellationen auf Probleme stoßen. Weder @Scrounger noch ich werden das so hinbekommen, dass es überall kooperativ klappt.

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

                                          @Uhula
                                          Das würde wenn ich jetzt richtig getestet habe bedeuten, dass ich von dem CSS weg müsste und das raised etc nachbauen müsste, was schade wäre
                                          Ich habe als Test dieses Widget genutzt und wollte folgende Farbe anstatt mdui-green-bg nutzen :#02c908. Das mdui-green-bg muss ich dann entfernen damit es funktioniert, das Widget sieht danach leider nicht mehr so "schön" aus

                                          [{"tpl":"tplHtml","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":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,"class":"mdui-card-raised mdui-green-bg mdui-center mdui-label","g_last_change":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":"IP: {tr-064.0.devices.raspberrypi4-io.lastIP}","comment":""},"style":{"left":"16px","top":"163px","width":"150px","height":"40px","z-index":0,"background":"","background-color":""},"widgetSet":"basic"}]
                                          
                                          Uhula 1 Reply Last reply Reply Quote 0
                                          • Stephan Schleich
                                            Stephan Schleich last edited by

                                            Ich bekomme folgende Fehlermeldung, Script ist auf die Vis angepasst.
                                            Hab ich irgendwo was vergessen?
                                            fe01824c-52b5-422e-b3cc-35346b9f9f1c-image.png

                                            Dominik F. 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            751
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

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