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.
    • Uhula
      Uhula last edited by

      V2.2 10.03.2020

      CSS

      • mdui-table-striped: Funktioniert nun auch bei basic-Table (JSON)
      • mdui-listitem: Überlanger Text wird nun per word-wrap umgebrochen
      • mdui-list-striped: versucht in einer mdui-list jede 2.Zeile etwas dunkler/heller einzufärben
      • color1, color2 und color3 hinzugefügt: Diese können in der mdui-config (abar-View) mit eigenen Farbwerten belegt werden und können dann wie die anderen Farben in den CSS verwendet werden. Bsp: mdui-color1, mdui-color2-bg usw.
        Angabe im mdui-config über "color1":"#ff0000", "color1_dark":"#800000", "color2":"#ff0000", "color2_dark":"#800000", "color3":"#ff0000", "color3_dark":"#800000" (dark für Verwendung im dark-Theme)

      vis-Editor

      • nothing

      script

      • nothing

      MD_Demo

      • Einstellungen um die neuen 3 frei wählbaren Farben color1-3 erweitert (werden auf der Seite "Schaltflächen" ausgewertet)

      Sonst

      • neues Verzeichnis "templates", in welchem nach und nach Vorlagen (Scrict & Views) aufgenommen werden

      GitHub

      1 Reply Last reply Reply Quote 0
      • mickym
        mickym Most Active @Uhula last edited by mickym

        @Uhula
        Ja das Problem habe ich inzwischen auch erkannt. Im Grunde wird müsste man den Font von weiß auf schwarz in Abhängigkeit der Hintergrundfarbe des Parent-Elementes umschalten und nicht alleine anhand der Farbe des content-containers.
        Damit ist der Aufwand natürlich erheblich.
        Ich habe zwar gesehen, dass Du im JS die Farben 200, 500, 700 definierst - habe auch noch nicht erblickt, was es damit auf sich hat, weil Du diese ja im CSS Teil setzt.

        Ich habe mir mal das Color Tool bzw. die empfohlenen Kombis angesehen, aber eine einfache Lösung für die empfohlenen Kombinationen wird es wohl nicht geben.

        Das mit den neuen color - Variablen entschärft ja einiges. 🙂 - Danke

        1 Reply Last reply Reply Quote 0
        • mickym
          mickym Most Active last edited by

          Nur zur Info:

          Ich weiß nicht, ob das schon mal wo erwähnt wurde - die Shapes funktionieren nicht unter IOS - egal welchen Browser man nimmt (Edge, Chrome oder Safari).
          Ich habs auf einem iPhone und iPad probiert. Wahrscheinlich eine Inkompatibilität von IOS.
          Unter Windows 10 ist alles gut. 🙂

          IMG_0007.PNG

          Uhula 1 Reply Last reply Reply Quote 0
          • D
            der-eine @Uhula last edited by der-eine

            @Uhula danke für den Hinweis. Werd ich morgen mal implementieren. 😀

            Habe es heute in meinen iobroker und VIS eingesetzt. Leider bekomme ich weder beim LogTR064 noch bei den Logfiles Daten in den Datenpunkten. VIS-View auch so eingefügt aber keine Anzeige. Hab ich was übersehen zu konfigurieren? Konnte in der Doku im Skript noch im Wiki was finden.

            Bastelritius D 2 Replies Last reply Reply Quote 0
            • Bastelritius
              Bastelritius @der-eine last edited by

              Hallo,

              gibt es eine Möglichkeit andere Icons zu verwenden als die Material icons?
              Ich möchte gern die mfd Icons (png oder svg) verwenden.
              Ich habe den Knopftext von "<i class="material-icons">looks_4</i>" in " <img src=http://localhost:8082/icons-mfd-png/vent_ventilation.png width=40> geändert. Das funktioniert soweit auch, aber die icons sind nun weiß. Ich möchte sie gern schwarz haben?

              Danke

              Uhula 1 Reply Last reply Reply Quote 0
              • D
                der-eine @der-eine last edited by

                @der-eine sagte in [Projekt] Material Design CSS v2:

                @Uhula danke für den Hinweis. Werd ich morgen mal implementieren. 😀

                Edit:

                Habe es heute in meinen iobroker und VIS eingesetzt. Leider bekomme ich weder beim LogTR064 noch bei den Logfiles Daten in den Datenpunkten. VIS-View auch so eingefügt aber keine Anzeige. Hab ich was übersehen zu konfigurieren? Konnte in der Doku im Skript noch im Wiki was finden.

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

                  @Bastelritius PNGs lassen sich in der Farbgestaltung durch CSS nicht beeinflussen, wenn du schwarze PNGs haben möchtest, müssen diese im Original bereits schwarz sein.
                  Bei der Nutzung der "materila-icons" ist das anders, weil es sich dort nicht um Bilddaten, sondern um einen Font (praktisch "Buchstaben") handelt, der ist durch CSS manipulierbar.

                  1 Reply Last reply Reply Quote 0
                  • Uhula
                    Uhula @der-eine last edited by

                    @der-eine Nein, es sind eigentlich keine Konfigurationen notwendig. Welche Einträge erscheinen denn im ioBroker Log wenn du die serverseitigen Scripte startest?
                    Du hast eine aktuelle ioBroker Inst? Die "0_userdata.0"-States gibt es im ioBroker noch nicht so lange, glaube erst seit Okt 2019. Version habe ich im Mom nicht zur Hand.

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

                      @mickym iOS ist böse, leider kann ich das nicht testen, da ich komplett apple-free bin 😉 Auf der anderen Seite ist auch der Safari webkit-basiert, wie Chrome.

                      1 Reply Last reply Reply Quote 0
                      • D
                        der-eine @Uhula last edited by der-eine

                        @Uhula iobroker 3.7.8;
                        0_userdata.0 habe ich in Objekten.
                        Diese Meldungen kommen

                        Bildschirmfoto 2020-03-11 um 15.42.56.png

                        P Uhula 2 Replies Last reply Reply Quote 0
                        • P
                          Pittini Developer @der-eine last edited by

                          @der-eine sagte in [Projekt] Material Design CSS v2:

                          Diese Meldungen kommen

                          Evtl hilfreich - onLog() ist erst ab Javascript 4.3.0 verfügbar.:

                          https://forum.iobroker.net/topic/28098/javascript-findet-onlog-nicht/3?fbclid=IwAR3HZdwCw6qLP8RBOtt1VrpQlivYgpT3Vpyh4hNpMRXBGLuaL_Ul_qZd-cg

                          1 Reply Last reply Reply Quote 0
                          • Uhula
                            Uhula @der-eine last edited by Uhula

                            @der-eine onLog() ist erst ab Javascript 4.3.0 Adapter verfügbar, da musst du den erst updaten. Siehe auch: onLog

                            lol - Pittini war schneller

                            1 Reply Last reply Reply Quote 0
                            • D
                              der-eine last edited by der-eine

                              @Pittini @Uhula danke für den Hinweis werde ich gleich mal testen. Erst mal schauen, wie man richtig Updatet JS 4.3.0 wird wahrscheinlich erst mit Admin 4.0 angezeigt.

                              Edit:
                              Das hat funktioniert. Danke jetzt läufts. 👍

                              1 Reply Last reply Reply Quote 0
                              • mickym
                                mickym Most Active @mickym last edited by mickym

                                @mickym said in [Projekt] Material Design CSS v2:

                                Screenshot.png

                                So ich habe leider doch ein Problem mit dem Titel auf der aktuellen Seite.
                                Ich hätte gerne in der abar nicht einen starren Text wie "MD-Demo" - sondern den Titel der aktuellen Seite.
                                Ich hatte es anfangs mit dem kleinen Script von @OliverIO versucht und ich habe meine pageTitel Seiten immer als Titel View benannt und wollte die statt des starren Textes ausgeben.

                                Ich hatte dazu erst auf dem abarMain View ein HTML Widget mit folgendem Script implementiert:

                                <p id="viewtest"</p>
                                <script>
                                $('#viewtest').html(vis.activeView);
                                </script>
                                

                                Das hat aber nur beim ersten Aufruf der Seite funktioniert. Sobald ich dann auf eine andere Seite navigiert habe - hat sich der Titel nicht aktualisiert.

                                Dann kam der Tipp - ich sollte einfach "{view}" eingeben. Das hat aber den Effekt, dass dann als Seitentitel immer nur abarMain drin steht - was ja streng genommen auch richtig ist.
                                Ich kann das HTML Widget aber auch nicht in die entsprechenden MainViews platzieren, da es dann nicht sichtbar - von der abar überschrieben wird.

                                Ich bin leider kein Webentwickler und meine HTML Kenntnisse sind sehr bescheiden - aber es muss doch möglich sein aus dem document.referrer irgendwie den String/Seitennamen nach dem Projektnamen zu extrahieren?

                                Das kann doch eigentlich keine große Sache sein - nur mir fehlen die Kenntnisse. 😞

                                Am Besten wäre eigentlich wenn man von dem TopView einfach ein Datenfeld - wie Name oder sowas als Anzeige verwenden könnte.

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

                                  @mickym Dein Script wird nur genau 1x ausgeführt, danach nie wieder (da kein reload der Page mehr stattfindet, nur noch AJAX Manipulationen). Wie das CSS Script müsstest du also die DOM Änderungen überwachen (Mutation-Observer) und darauf reagieren. Einfacher wäre es, wenn du das Script erweiterst: Funktion _onChangePage() im Bereich "// favicon anpassen" ...

                                  Soll der komplette View-Name angezeigt werden? Ich nenne die bei mir immer pageVorgarten, pageHeizung usw. würde also die ersten vier Zeichen abschneiden wollen. Ich schau am WoEnde mal, ob ich was ähnliches implementieren kann wie beim favicon.

                                  Du kannst auch auf jeder page-View ein Widget korrekt positionieren, musst diesem aber eine z-order zuweisen, die größer ist die vom abar. Sieht beim Öffnen der lnav dann vielleicht nicht gut aus.

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

                                    @mickym Ab der MD CSS v2.3 kannst du den page-Viewnamen leicht nutzen:

                                    • mdui-page-name: Der Widgetinhalt wird nach jedem Seitenwechsel mit dem page-Viewnamen gefüllt, kann in basic-HTMLs zur Anzeige des page-Viewnamens genutzt werden
                                    • mdui-page-title: Wie mdui-page-name, allerdings wird der Name noch aufbereitet. Kleinbuchstaben am Anfang werden ignoriert und '_' werden zu Leerzeichen gewandelt. "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"
                                      bbe8798b-1e7f-4efb-a4a4-f79d1921800f-image.png
                                    mickym 1 Reply Last reply Reply Quote 0
                                    • mickym
                                      mickym Most Active @Uhula last edited by

                                      @Uhula Ganz lieben Dank! - Du bist echt gut. Ich werde es heute abend gleich ausprobieren. Vorher komme ich nicht dazu!! Das ist genau das, was ich wollte. 🙂

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

                                        @Uhula Das Kalendarscript ist super. Das wäre doch etwas für das neue Wiki! 🙂

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

                                          @mickym Heute abend wird nicht gehen, die v2.3 ist noch nicht online 😉 Wenn du willst, kannst du das vorhandene Script selbst ergänzen: In _onChangePage
                                          aus

                                          // favicon anpassen
                                                      $("#vis_container>:not([style*='display: none']) .mdui-favicon img").each( function (index) {
                                                          if ($(this)[0].src)
                                                               $("link[rel='shortcut icon']").attr("href", $(this)[0].src);
                                                      });
                                          

                                          einfach

                                          // favicon anpassen
                                                      $("#vis_container>:not([style*='display: none']) .mdui-favicon img").each( function (index) {
                                                          if ($(this)[0].src)
                                                               $("link[rel='shortcut icon']").attr("href", $(this)[0].src);
                                                      });
                                                      
                                                      // page-name anpassen
                                                      let pagename = window.location.hash.substr(1,255);
                                                      $(".mdui-page-name").each( function (index) {
                                                          $(this).html( pagename );
                                                      });
                                                      $(".mdui-page-title").each( function (index) {
                                                          // "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"
                                                          let title = '';
                                                          let c;
                                                          for (let i=0; i<pagename.length; i++) {
                                                              c = pagename[i];
                                                              if (title=='') {
                                                                  if (c==c.toUpperCase()) title += c; 
                                                              } else {
                                                                  if (c=='_') c = ' '; 
                                                                  title += c;
                                                              }    
                                                          }
                                                          $(this).html( title );
                                                      });
                                          
                                          

                                          machen.

                                          @Tirador Das Kalendarscript kommt auch noch ins Wiki, ich will es aber erst noch überarbeiten.

                                          mickym 1 Reply Last reply Reply Quote 0
                                          • D
                                            der-eine last edited by der-eine

                                            @Uhula habe mit dem Log und den TR064 Views noch anzeige Probleme. Hätte sie genau so importiert wie Du sie erstellt hast. Trotzdem werden sie so angezeigt...
                                            Habe das aktuelle Skript und CSS Projekt

                                            Icon zu nah am Text

                                            IMG_6854.jpg

                                            Hintergrundfarbe änder sich beim vergrössern

                                            IMG_6855.jpg

                                            Kennst Du dieses verhalten?

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            613
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            74
                                            717
                                            144062
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo