Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

  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.3k

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

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uivismaterial css
717 Beiträge 74 Kommentatoren 178.1k Aufrufe 77 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • UhulaU Uhula

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

    Date.toLocaleString()

    Ja, ist recht einfach. Basis ist ein Basci-HTML Widget. Du nutzt dann das vis-Binding und musst unter "HTML" eintragen (natürlich mit deinem State):

    {0_userdata.0.example_state;date(DD.MM.YYYY hh:mm)}
    

    41446e39-2aec-48de-96ae-2519659b4e80-image.png

    Weitere Binding-Infos

    jpgorganizerJ Offline
    jpgorganizerJ Offline
    jpgorganizer
    schrieb am zuletzt editiert von
    #193

    @Uhula said in [Projekt] MDCSS v2: Material Design CSS Version 2:

    ;date(DD.MM.YYYY hh:mm)}

    manomanoman --- das hab ich doch schon mal gemacht. Habe nicht mehr dran gedacht, dass man bei den Bindings auch Funktionen hat. Danke für die Hilfe.

    Grüße
    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 Antwort Letzte Antwort
    0
    • T Offline
      T Offline
      Tirador
      schrieb am zuletzt editiert von
      #194

      Ich würde gerne den Chips Radio-Button zur Steuerung meiner OSRAM-Schaltsteckdosen über Deconz verwenden.
      Kurioserweise ändert das den Wert, allerdings werden die Dosen nicht geschaltet.

      Ich habe testweise nun zwei andere Schalter in das Widget aufgenommen (die oberen zwei im Screenshot). Beide schalten auch die Steckdosen richtig.

      2020-03-14 14_52_34-vis.png

      Wenn ich den Chip-Schalter schalte erhalte ich auch eine Fehlermeldung im Log:

      2020-03-14 14_58_28-logs - ioBroker.png

      Ich denke das Widget müsste also statt den Werten 0 oder 1 ein true oder false senden. Allerdings kann man dies ja nirgendwo konfigurieren. Mache ich etwas grundlegend falsch?

      Export der Widgets:

      Widget Bool-Schalter funktionierend (auf dem Screenshot der gelbe oben):

      [{"tpl":"tplValueBoolCheckbox","data":{"oid":"deconz.0.Groups.5.on","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,"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,"html_append":"<label for=\"{wid}_checkbox\"><label>","class":"mdui-switch mdui-amber-acc","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},"style":{"left":"192px","top":"48px","width":"48px","height":"30px","z-index":1},"widgetSet":"basic"}]
      

      Widget ChipDesign Schalter (leider nicht funktionierend):

      [{"tpl":"tplJquiRadio","data":{"oid":"deconz.0.Groups.5.on","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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","off_text":"aus","on_text":"ein","padding":"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-red mdui-red-acc mdui-chips-outlined","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},"style":{"left":"168px","top":"136px","width":"","height":"32px"},"widgetSet":"jqui"}]
      

      bilberryB 1 Antwort Letzte Antwort
      0
      • T Tirador

        Ich würde gerne den Chips Radio-Button zur Steuerung meiner OSRAM-Schaltsteckdosen über Deconz verwenden.
        Kurioserweise ändert das den Wert, allerdings werden die Dosen nicht geschaltet.

        Ich habe testweise nun zwei andere Schalter in das Widget aufgenommen (die oberen zwei im Screenshot). Beide schalten auch die Steckdosen richtig.

        2020-03-14 14_52_34-vis.png

        Wenn ich den Chip-Schalter schalte erhalte ich auch eine Fehlermeldung im Log:

        2020-03-14 14_58_28-logs - ioBroker.png

        Ich denke das Widget müsste also statt den Werten 0 oder 1 ein true oder false senden. Allerdings kann man dies ja nirgendwo konfigurieren. Mache ich etwas grundlegend falsch?

        Export der Widgets:

        Widget Bool-Schalter funktionierend (auf dem Screenshot der gelbe oben):

        [{"tpl":"tplValueBoolCheckbox","data":{"oid":"deconz.0.Groups.5.on","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,"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,"html_append":"<label for=\"{wid}_checkbox\"><label>","class":"mdui-switch mdui-amber-acc","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},"style":{"left":"192px","top":"48px","width":"48px","height":"30px","z-index":1},"widgetSet":"basic"}]
        

        Widget ChipDesign Schalter (leider nicht funktionierend):

        [{"tpl":"tplJquiRadio","data":{"oid":"deconz.0.Groups.5.on","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,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","off_text":"aus","on_text":"ein","padding":"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-red mdui-red-acc mdui-chips-outlined","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},"style":{"left":"168px","top":"136px","width":"","height":"32px"},"widgetSet":"jqui"}]
        

        bilberryB Offline
        bilberryB Offline
        bilberry
        schrieb am zuletzt editiert von
        #195

        @Tirador
        Du hast das Widget "Radiobuttons on/off" eingesetzt. Probiers mal mit der Widget "Radiobuttons ValueList". Dort kannst Du nämlich Deine nötigen Schaltwerte explizit als "0" und "1" (oder bei Bedarf ganz andere) selbst hinterlegen.

        T 1 Antwort Letzte Antwort
        0
        • bilberryB bilberry

          @Tirador
          Du hast das Widget "Radiobuttons on/off" eingesetzt. Probiers mal mit der Widget "Radiobuttons ValueList". Dort kannst Du nämlich Deine nötigen Schaltwerte explizit als "0" und "1" (oder bei Bedarf ganz andere) selbst hinterlegen.

          T Offline
          T Offline
          Tirador
          schrieb am zuletzt editiert von
          #196

          @bilberry Danke für den Tipp. Leider bringt das auch nicht das gewünschte Verhalten. Ich habe nun alle Kombinationen zwischen on/off, true, false, 0 oder 1 en durch. Eventuell ist dies kein Visualisierungsproblem. Ich werde im deconz-Adapter forschen.

          1 Antwort Letzte Antwort
          0
          • T Offline
            T Offline
            Tirador
            schrieb am zuletzt editiert von
            #197

            Ich kriege bestimmte Material Icons nicht angezeigt.
            Ist das ein Problem, dass nicht alle Icons in der Schriftart verfügbar sind, oder das die Schriftart im Demo-Projekt nicht aktuell ist.

            Beispielsweise die Badewanne:

            2020-03-15 12_35_23-Icons - Material Design.png

            https://material.io/resources/icons/?style=baseline

            Hat jemand eine Idee?

            UhulaU 1 Antwort Letzte Antwort
            0
            • T Tirador

              Ich kriege bestimmte Material Icons nicht angezeigt.
              Ist das ein Problem, dass nicht alle Icons in der Schriftart verfügbar sind, oder das die Schriftart im Demo-Projekt nicht aktuell ist.

              Beispielsweise die Badewanne:

              2020-03-15 12_35_23-Icons - Material Design.png

              https://material.io/resources/icons/?style=baseline

              Hat jemand eine Idee?

              UhulaU Offline
              UhulaU Offline
              Uhula
              schrieb am zuletzt editiert von
              #198

              @Tirador Die icon-Fonts wurden von der offiziellen Github Seite icon-font herunter geladen. Die sind 4 Jahre alt. Es kann durchaus sein, dass Google zwischenzeitlich die Icons erweitert hat, den icon-font aber nicht aktualisiert hat.

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

              mrFenyxM T 2 Antworten Letzte Antwort
              0
              • UhulaU Uhula

                @Tirador Die icon-Fonts wurden von der offiziellen Github Seite icon-font herunter geladen. Die sind 4 Jahre alt. Es kann durchaus sein, dass Google zwischenzeitlich die Icons erweitert hat, den icon-font aber nicht aktualisiert hat.

                mrFenyxM Offline
                mrFenyxM Offline
                mrFenyx
                schrieb am zuletzt editiert von
                #199

                @Uhula Ich habe neuere Versionen vom Materia Icons Font gefunden aber ich weiß nicht was ich damit tun soll oder auch wie ich hineinschauen kann um zu sehen welche Icons dabei sind. Ich habe versucht die alten mit den neueren einfach zu ersetzen aber ich kriege weiterhin nur die alten Icons. Ideen?

                UhulaU 1 Antwort Letzte Antwort
                0
                • mrFenyxM mrFenyx

                  @Uhula Ich habe neuere Versionen vom Materia Icons Font gefunden aber ich weiß nicht was ich damit tun soll oder auch wie ich hineinschauen kann um zu sehen welche Icons dabei sind. Ich habe versucht die alten mit den neueren einfach zu ersetzen aber ich kriege weiterhin nur die alten Icons. Ideen?

                  UhulaU Offline
                  UhulaU Offline
                  Uhula
                  schrieb am zuletzt editiert von
                  #200

                  @mrFenyx Bei dem Font handelt es sich um einen anderen Material Design Font. Im MDCSS ist nur der Original WebFont von Google drin, wobei es sich bei deinem geposteten um einen Open Source WebFont handelt, welcher neben den 900 Icons aus dem Google WebFont weitere 4500 Icons enthält. Damit wächst die Dateigröße von 60kb auf 350kb an - und das gesuchte "bathtub" Icon konnte ich auch darin nicht entdecken.

                  Außerdem scheint die Nutzung eine andere zu sein, statt "<i class='material-icons'>home</i>" muss man die dazugehörige CSS Datei (noch einmal 350 kb) nutzen und "<span class="mdi mdi-home"></span>" eingeben.

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

                  Stephan SchleichS 1 Antwort Letzte Antwort
                  0
                  • UhulaU Uhula

                    @mrFenyx Bei dem Font handelt es sich um einen anderen Material Design Font. Im MDCSS ist nur der Original WebFont von Google drin, wobei es sich bei deinem geposteten um einen Open Source WebFont handelt, welcher neben den 900 Icons aus dem Google WebFont weitere 4500 Icons enthält. Damit wächst die Dateigröße von 60kb auf 350kb an - und das gesuchte "bathtub" Icon konnte ich auch darin nicht entdecken.

                    Außerdem scheint die Nutzung eine andere zu sein, statt "<i class='material-icons'>home</i>" muss man die dazugehörige CSS Datei (noch einmal 350 kb) nutzen und "<span class="mdi mdi-home"></span>" eingeben.

                    Stephan SchleichS Offline
                    Stephan SchleichS Offline
                    Stephan Schleich
                    schrieb am zuletzt editiert von
                    #201

                    @Uhula Kann es sein das der Popup Hintergrund fix auf weiß eingestellt ist?
                    Ich habe eine View mit schwarzen Hintergrund die lediglich im Popup weiß angezeigt wird. - wo ändere ich das?

                    UhulaU 1 Antwort Letzte Antwort
                    0
                    • Stephan SchleichS Stephan Schleich

                      @Uhula Kann es sein das der Popup Hintergrund fix auf weiß eingestellt ist?
                      Ich habe eine View mit schwarzen Hintergrund die lediglich im Popup weiß angezeigt wird. - wo ändere ich das?

                      UhulaU Offline
                      UhulaU Offline
                      Uhula
                      schrieb am zuletzt editiert von
                      #202

                      @Stephan-Schleich Jein. Der Popup-Hintergrund passt sich schon an den Hintergrund an, aber hier wird derjenige angenommen, der im mdui-content gesetzt ist (ich gehe mal davon aus, dass dein Popup im mdui_card ist). Also in der Farb-Konfiguration im abar mdio-config Widget der Farbwert aus "content_color":"#xxxxxx". Dem card-/content-view direkt über die view-Eigenschaften zugewiesene Farben hingegen haben keine Bedeutung (Grund: Das kann ich im CSS nicht je card unterscheiden)

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

                      1 Antwort Letzte Antwort
                      1
                      • D Offline
                        D Offline
                        der-eine
                        schrieb am zuletzt editiert von der-eine
                        #203

                        @Uhula hast Du Dir schon mal diese beiden Adapter angesehen? Zwecks gegebenen Anlass...

                        Nina (Notfall-Informations- und Nachrichten-App):
                        https://github.com/TA2k/ioBroker.nina

                        Coronavirus Statistics:
                        https://github.com/iobroker-community-adapters/ioBroker.coronavirus-statistics

                        Evtl auch interessant um mit Deinen Skripten aufgewertet zu werden? :man-shrugging:

                        UhulaU 1 Antwort Letzte Antwort
                        0
                        • UhulaU Uhula

                          @Tirador Die icon-Fonts wurden von der offiziellen Github Seite icon-font herunter geladen. Die sind 4 Jahre alt. Es kann durchaus sein, dass Google zwischenzeitlich die Icons erweitert hat, den icon-font aber nicht aktualisiert hat.

                          T Offline
                          T Offline
                          Tirador
                          schrieb am zuletzt editiert von Tirador
                          #204

                          @Uhula Ich habe jetzt extra einen Font Viewer (FontForge) heruntergeladen, um das Mysterium aufzuspüren.

                          Google hat ja zwei Wege um die Icon Fonts einzubinden.

                          Über den ersten Weg erhält man die URL zum Stylesheet:

                          2020-03-16 21_30_38-Material Icons Guide - Google Design.png

                          Wenn man das Stylesheet im Browser aufruft erhält man die URL zum Webfont:

                          2020-03-16 21_31_07-Mozilla Firefox.png

                          Über die URL kann man den Font herunterladen.

                          Im Font Viewer kann ich die Badewanne sehen im Webfont:

                          2020-03-16 21_32_09-MaterialIcons-Regular  flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 (UnicodeFull).png

                          Die Dateien unterscheiden sich auch in der Größe signifikant. 44 KB ist die woff2-Datei von Github. Die woff2-Datei über den Google-Link ist 60 KB groß!

                          Ich habe jetzt auf der offiziellen Google Github Seite auch Infos gefunden, dass das Projekt durch Google nicht mehr gewartet wird.
                          Siehe Postings hier z.B.: https://github.com/google/material-design-icons/issues/951#issuecomment-539881377

                          Ein Nachfolgeprojekt scheint dieses zu sein:

                          https://github.com/material-icons/material-icons-font

                          Eventuell kann man dies nun als Grundlage nehmen oder die neue Datei von den Google Servern verwenden. Die Icons sind ja grundsätzlich unter der gleichen Lizenz.

                          UhulaU 1 Antwort Letzte Antwort
                          0
                          • T Tirador

                            @Uhula Ich habe jetzt extra einen Font Viewer (FontForge) heruntergeladen, um das Mysterium aufzuspüren.

                            Google hat ja zwei Wege um die Icon Fonts einzubinden.

                            Über den ersten Weg erhält man die URL zum Stylesheet:

                            2020-03-16 21_30_38-Material Icons Guide - Google Design.png

                            Wenn man das Stylesheet im Browser aufruft erhält man die URL zum Webfont:

                            2020-03-16 21_31_07-Mozilla Firefox.png

                            Über die URL kann man den Font herunterladen.

                            Im Font Viewer kann ich die Badewanne sehen im Webfont:

                            2020-03-16 21_32_09-MaterialIcons-Regular  flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 (UnicodeFull).png

                            Die Dateien unterscheiden sich auch in der Größe signifikant. 44 KB ist die woff2-Datei von Github. Die woff2-Datei über den Google-Link ist 60 KB groß!

                            Ich habe jetzt auf der offiziellen Google Github Seite auch Infos gefunden, dass das Projekt durch Google nicht mehr gewartet wird.
                            Siehe Postings hier z.B.: https://github.com/google/material-design-icons/issues/951#issuecomment-539881377

                            Ein Nachfolgeprojekt scheint dieses zu sein:

                            https://github.com/material-icons/material-icons-font

                            Eventuell kann man dies nun als Grundlage nehmen oder die neue Datei von den Google Servern verwenden. Die Icons sind ja grundsätzlich unter der gleichen Lizenz.

                            UhulaU Offline
                            UhulaU Offline
                            Uhula
                            schrieb am zuletzt editiert von
                            #205

                            @Tirador Ich habe mir alle Font-Lösungen angesehen. Gegenüber dem original Google Material Icons WebFont, welcher intuitiv mit Ligaturen arbeitet, man die Icons also mit "Namen" angeben kann, muss man bei allen anderen Fonts entweder den den Char-Code angeben oder über eine enorm große CSS Datei gehen, welche für jedes (!) Icon zusätzlich eine CSS Anweisung hat.

                            Beispiel, zeichnen des home-Icons:

                            * (a) Google Material Icons WebFont: <i class="mdui-icon">home</i>
                            * (b) Alternativer WebFont: <i class="mdui-mdi">&#xF02DC;</i>
                            * (c) Alternativer WebFont mit CSS: <i class="mdui-mdi mdi-icon-home"></i>
                            

                            Die zusätzliche CSS-Datei (c) ist für mich keine Option, da diese selbst bis zu 200 kbyte gross sein kann und meine CSS um mehrere 1000 Zeilen erweitert.

                            Ich habe das MDCSS v2.3 so erweitert, dass man optional (muss man in der CSS freigeben) auch mit den Material Design Icon Webfont (Templarian) nach (b) arbeiten kann. Dann stehen weitere 5000 (!) Icons zur Verfügung. Eine Übersicht alle möglichen Icons mit Angabe der Char-Nummer ist vorhanden. Da finden sich auch einige, die in der Homeautomation sinnvoll sind. Nachteil: Der WebFont hat weitere 380 kByte, die an den Browser übertragen werden, auch wenn man nur ein einziges Icon daraus verwendet. Das "bathtub" Icon ist da aber nicht drin ;- )

                            Wer mag, könnte auch mit dem Material Icons Font (cyberalien) so verfahren, den habe ich aber nicht aufgenommen, da er lediglich den originalen Google Webfont erweitert um wenige Icons wiedergibt, aber auch keine Ligaturen bietet.

                            Ich bin bisher mit den 900 Icons aus dem Google Webfont ausgekommen, die ich simple via (a) nutzen kann. Zumal man alternativ für Einzelfälle immer noch mit PNG-Bildern als <img> arbeiten kann.

                            MDCSS v2.3 coroniert in den nächsten Tagen.

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

                            mrFenyxM 1 Antwort Letzte Antwort
                            1
                            • D der-eine

                              @Uhula hast Du Dir schon mal diese beiden Adapter angesehen? Zwecks gegebenen Anlass...

                              Nina (Notfall-Informations- und Nachrichten-App):
                              https://github.com/TA2k/ioBroker.nina

                              Coronavirus Statistics:
                              https://github.com/iobroker-community-adapters/ioBroker.coronavirus-statistics

                              Evtl auch interessant um mit Deinen Skripten aufgewertet zu werden? :man-shrugging:

                              UhulaU Offline
                              UhulaU Offline
                              Uhula
                              schrieb am zuletzt editiert von
                              #206

                              @der-eine Den NINA hatte ich mal laufen, dann aber wieder deinstalliert. Alles zum (temporären) Corona schau ich mir direkt auf den entsprechenden Sites an. Insofern: Nein, an eine solche coronierte Umsetzung habe ich noch nicht gedacht. Und auch keine Zeit, da ich erst noch eine Adapter-Übersicht, eine Homematic-State-Übersicht usw. abbilden möchte. Sorry.

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

                              1 Antwort Letzte Antwort
                              0
                              • D Offline
                                D Offline
                                der-eine
                                schrieb am zuletzt editiert von
                                #207

                                @Uhula alles gut. War nur ein Vorschlag. :blush:

                                1 Antwort Letzte Antwort
                                0
                                • UhulaU Uhula

                                  @Tirador Ich habe mir alle Font-Lösungen angesehen. Gegenüber dem original Google Material Icons WebFont, welcher intuitiv mit Ligaturen arbeitet, man die Icons also mit "Namen" angeben kann, muss man bei allen anderen Fonts entweder den den Char-Code angeben oder über eine enorm große CSS Datei gehen, welche für jedes (!) Icon zusätzlich eine CSS Anweisung hat.

                                  Beispiel, zeichnen des home-Icons:

                                  * (a) Google Material Icons WebFont: <i class="mdui-icon">home</i>
                                  * (b) Alternativer WebFont: <i class="mdui-mdi">&#xF02DC;</i>
                                  * (c) Alternativer WebFont mit CSS: <i class="mdui-mdi mdi-icon-home"></i>
                                  

                                  Die zusätzliche CSS-Datei (c) ist für mich keine Option, da diese selbst bis zu 200 kbyte gross sein kann und meine CSS um mehrere 1000 Zeilen erweitert.

                                  Ich habe das MDCSS v2.3 so erweitert, dass man optional (muss man in der CSS freigeben) auch mit den Material Design Icon Webfont (Templarian) nach (b) arbeiten kann. Dann stehen weitere 5000 (!) Icons zur Verfügung. Eine Übersicht alle möglichen Icons mit Angabe der Char-Nummer ist vorhanden. Da finden sich auch einige, die in der Homeautomation sinnvoll sind. Nachteil: Der WebFont hat weitere 380 kByte, die an den Browser übertragen werden, auch wenn man nur ein einziges Icon daraus verwendet. Das "bathtub" Icon ist da aber nicht drin ;- )

                                  Wer mag, könnte auch mit dem Material Icons Font (cyberalien) so verfahren, den habe ich aber nicht aufgenommen, da er lediglich den originalen Google Webfont erweitert um wenige Icons wiedergibt, aber auch keine Ligaturen bietet.

                                  Ich bin bisher mit den 900 Icons aus dem Google Webfont ausgekommen, die ich simple via (a) nutzen kann. Zumal man alternativ für Einzelfälle immer noch mit PNG-Bildern als <img> arbeiten kann.

                                  MDCSS v2.3 coroniert in den nächsten Tagen.

                                  mrFenyxM Offline
                                  mrFenyxM Offline
                                  mrFenyx
                                  schrieb am zuletzt editiert von
                                  #208

                                  @Uhula said in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                  Das "bathtub" Icon ist da aber nicht drin ;- )

                                  Könnte man aber das hier benutzen :P
                                  740aca98-dde2-4c89-a73f-937e89dcaeb2-image.png

                                  1 Antwort Letzte Antwort
                                  0
                                  • Stephan SchleichS Offline
                                    Stephan SchleichS Offline
                                    Stephan Schleich
                                    schrieb am zuletzt editiert von
                                    #209

                                    Kann es sein das die css styles "mdui-flow mdui-fastest mdui-blue-acc" nicht mehr funktionieren?

                                    UhulaU 1 Antwort Letzte Antwort
                                    0
                                    • Stephan SchleichS Stephan Schleich

                                      Kann es sein das die css styles "mdui-flow mdui-fastest mdui-blue-acc" nicht mehr funktionieren?

                                      UhulaU Offline
                                      UhulaU Offline
                                      Uhula
                                      schrieb am zuletzt editiert von
                                      #210

                                      @Stephan-Schleich "Nicht mehr" in Abgrenzung wozu? Zur v1.8? Von 2.0 auf 2.2? Hast du zwischenzeitlich neue Adapter installiert? In meinem MD_Demo funktionieren sie noch.

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

                                      Stephan SchleichS 1 Antwort Letzte Antwort
                                      0
                                      • UhulaU Uhula

                                        @Stephan-Schleich "Nicht mehr" in Abgrenzung wozu? Zur v1.8? Von 2.0 auf 2.2? Hast du zwischenzeitlich neue Adapter installiert? In meinem MD_Demo funktionieren sie noch.

                                        Stephan SchleichS Offline
                                        Stephan SchleichS Offline
                                        Stephan Schleich
                                        schrieb am zuletzt editiert von Stephan Schleich
                                        #211

                                        @Uhula Ich glaub es war damals noch die 2.1 nun hab ich die 2.2 und nun wird es nicht mehr angezeigt

                                        c70ce997-b5d8-4131-bde8-f9ff5ef98de7-image.png

                                        sigi234S 1 Antwort Letzte Antwort
                                        0
                                        • Stephan SchleichS Stephan Schleich

                                          @Uhula Ich glaub es war damals noch die 2.1 nun hab ich die 2.2 und nun wird es nicht mehr angezeigt

                                          c70ce997-b5d8-4131-bde8-f9ff5ef98de7-image.png

                                          sigi234S Online
                                          sigi234S Online
                                          sigi234
                                          Forum Testing Most Active
                                          schrieb am zuletzt editiert von sigi234
                                          #212

                                          @Stephan-Schleich

                                          Geht bei mir.

                                          Version: v2.2 10.03.2020

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

                                          Stephan SchleichS 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          748

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe