Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Tester
    4. Adaption von Material Design Widgets an MD und mehr Widgets

    NEWS

    • 15. 05. Wartungsarbeiten am ioBroker Forum

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    Adaption von Material Design Widgets an MD und mehr Widgets

    This topic has been deleted. Only users with topic management privileges can see it.
    • EdgarM
      EdgarM Developer last edited by EdgarM

      Aktuelle Test Version 0.2.0
      Veröffentlichungsdatum 05.08.2020
      Github Link https://github.com/EdgarM73/ioBroker.vis-material

      Der Adapter Material Widgets von nisiode ist scheinbar schon lange nicht mehr angepasst worden hat mir aber trotzdem sehr gut gefallen, weil er recht einfach zu verwenden ist.

      Ich habe auf Basis eines Forks von pix-- selber einen Fork erstellt und nochmal erweitert.

      Es gibt jetzt folgende Widgets im Adapter:
      ListDoor
      ListWindow
      ListWindowShutter
      ListTemperature
      ListHumidity
      ListOccupancy
      ListLight
      ListLightDimmer

      Außerdem habe ich noch folgende Anpassung am Design vorgenommen:
      Ein weissen Layer mit opacity 0.08 über jedem Widget ( https://material.io/design/color/dark-theme.html#usage )

      Ausserdem habe ich einen Bug "gefixt", der den Adapter inkompatibel mit dem Material Design von Uhula ( https://github.com/Uhula/ioBroker-Material-Design-Style ) gemacht hat ( die Material Design CSS Klassen heissen jetzt mduiw ).

      Ich denke, man könnte noch mehr daraus machen und vor allem die beiden ( also Uhula css und den Adapter ) zusammenfügen, da man dann einfach das MD benutzen kann.

      Wer testen möchte darf mir gerne hier Infos geben und ich werde versuchen zu liefern.

      @Scrounger , wenn du Lust und Zeit hast, könnten wir das doch verbinden, oder? 🙂

      grüße
      E

      sigi234 qqolli 6 Replies Last reply Reply Quote 4
      • sigi234
        sigi234 Forum Testing Most Active @EdgarM last edited by

        @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

        Ausserdem habe ich einen Bug "gefixt", der den Adapter inkompatibel mit dem Material Design von Uhula ( https://github.com/Uhula/ioBroker-Material-Design-Style ) gemacht hat ( die Material Design CSS Klassen heissen jetzt mduiw ).

        SEHR GUT!

        Ich denke, man könnte noch mehr daraus machen und vor allem die beiden ( also Uhula css und den Adapter ) zusammenfügen, da man dann einfach das MD benutzen kann.

        Bin ich dafür.

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

          @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

          Der Adapter Material Widgets von nisiode ist scheinbar schon lange nicht mehr angepasst

          Sollte man den "Alten" deinstallieren?

          Erledigt.

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

            @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

            Wer testen möchte darf mir gerne hier Infos geben und ich werde versuchen zu liefern.

            Ok, Wünsche:

            Werte anpassbar - Name, Farbe (bei false/true - Rot/Grün) , Schrift und Größe
            Icons änderbar - Größe, Position

            Anregung:

            Icons von Licht unterschiedlich

            VIEW in Bearbeitung:

            Screenshot (245).png

            EdgarM 1 Reply Last reply Reply Quote 1
            • EdgarM
              EdgarM Developer @sigi234 last edited by

              @sigi234 said in Adaption von Material Design Widgets an MD und mehr Widgets:

              @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

              Der Adapter Material Widgets von nisiode ist scheinbar schon lange nicht mehr angepasst

              Sollte man den "Alten" deinstallieren?

              Erledigt.

              zum Testen auf jeden Fall.

              Danach werde ich meine Änderungen versuchen in den Main zurückzubringen.

              1 Reply Last reply Reply Quote 0
              • EdgarM
                EdgarM Developer @sigi234 last edited by

                @sigi234 Das sieht ja toll aus bei dir 😉

                Es gibt bereits unter "Signalbilder" die Möglichkeit bedingte Symbole anzuzeigen die man auch platzieren kann.

                Ich habe z.b. leere Batterie und "zu warm" als Signalbild benutzt.

                Farbe und ähnliches möchte ich gerne passend zum Material Dark theme implementieren, das widget soll also rot werden bei Fehlern oder Alarm.

                Größe der Icons sind bereits anpassbar in vis.

                Kommt aber noch.

                grüße
                E

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

                  @EdgarM

                  Gibt es was Neues?

                  EdgarM 1 Reply Last reply Reply Quote 0
                  • EdgarM
                    EdgarM Developer @sigi234 last edited by

                    @sigi234
                    nichts bedeutendes leider. jetzt bin ich bis Sonntag auch noch unterwegs.
                    Als nächstes möchte ich versuchen, den Adapter so umzuschreiben, dass er die css klassen von mdcss benutzt, damit es nicht 2 Mal definiert sein muss.

                    Hatte bisher nur bedingt Erfog 😞

                    grüße

                    EdgarM 1 Reply Last reply Reply Quote 0
                    • EdgarM
                      EdgarM Developer @EdgarM last edited by

                      @sigi234

                      Ich habe nun die Entwicklung soweit abgeschlossen, dass sie meiner Meinung nach sauber testbar ist.

                      Folgende Widgets sind jetzt dabei:

                      • Door
                      • Window
                      • Shutter
                      • Temperature
                      • Humidity
                      • Occupancy
                      • Light
                      • LightsDim

                      Folgende Eigenschaften sind konfigurierbar:

                      • Text Farbe
                      • Icon
                      • Farbe des semi-transparenten Overlays

                      Es gibt zwar noch einige Möglichkeiten, das zu verbessern aber ich denke dass könnte man jetzt durchaus mergen mit dem Hauptprojekt.

                      Bitte um Feedback.

                      grüße
                      E

                      sigi234 Ruud2019 qqolli 4 Replies Last reply Reply Quote 1
                      • sigi234
                        sigi234 Forum Testing Most Active @EdgarM last edited by

                        @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

                        Folgende Widgets sind jetzt dabei:

                        Ein Multimedia Widget wäre noch interessant.😀

                        EdgarM 1 Reply Last reply Reply Quote 0
                        • EdgarM
                          EdgarM Developer @sigi234 last edited by

                          @sigi234 said in Adaption von Material Design Widgets an MD und mehr Widgets:

                          @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

                          Folgende Widgets sind jetzt dabei:

                          Ein Multimedia Widget wäre noch interessant.😀

                          Was stellst du dir denn da genau vor?

                          Wenn du es aufmalen könntest 😉

                          grüße
                          E

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

                            @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

                            Was stellst du dir denn da genau vor?

                            Alexa - On/Off
                            Speaker - On/Off
                            Verstärker - On/Off
                            Soundbar - On/Off
                            TV - On/Off
                            FireTv - On/Off

                            usw......

                            @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

                            Wenn du es aufmalen könntest

                            In diesen Adapter sind viele Beispiele:

                            vis-icontwo

                            https://github.com/inventwo/ioBroker.vis-icontwo/blob/master/README.md

                            EdgarM 1 Reply Last reply Reply Quote 0
                            • EdgarM
                              EdgarM Developer @sigi234 last edited by

                              @sigi234 Hi sigi,

                              ich werde mal sehen ob ich das diese Woche noch schaffe. Dann wäre erst mal Urlaub 😉

                              grüße
                              E

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

                                @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

                                @sigi234 Hi sigi,

                                ich werde mal sehen ob ich das diese Woche noch schaffe. Dann wäre erst mal Urlaub 😉

                                grüße
                                E

                                Kein Problem, ist ja nur ein Vorschlag.

                                1 Reply Last reply Reply Quote 0
                                • Ruud2019
                                  Ruud2019 @EdgarM last edited by

                                  @EdgarM
                                  Bei mir wird der Schalter jetzt nicht mehr angezeigt.
                                  switch.PNG

                                  1 Reply Last reply Reply Quote 0
                                  • qqolli
                                    qqolli @EdgarM last edited by

                                    @EdgarM

                                    Hallo Edgar,

                                    hab mal die Material Design Widgets de-installiert und Deine installiert. Sind wirklich gelungen 🙂

                                    Ein Problem gibt es bei mir mit dem Shutter Widget:

                                    b8173abb-caa8-4a9b-b38d-b0543c905421-image.png

                                    Ich kann es auf den View zihen aber nicht sehen, aber es wird angezeigt:

                                    057bd6fc-1c38-4311-a93d-c78e6d1d7170-image.png

                                    und ändern kann man es auch:

                                    469cb8fb-0cd2-4183-968b-0e8d4dadbba0-image.png

                                    Aber egal was ich einstelle/ändere, es wird nicht angezeigt 😞 Alle anderen Widgets gehen super.

                                    Ruud2019 EdgarM 2 Replies Last reply Reply Quote 0
                                    • Ruud2019
                                      Ruud2019 @qqolli last edited by Ruud2019

                                      @qqolli
                                      Funktioniert bei dir auch das ListLight Widget?

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

                                        @EdgarM sagte in Adaption von Material Design Widgets an MD und mehr Widgets:

                                        Ich habe nun die Entwicklung soweit abgeschlossen, dass sie meiner Meinung nach sauber testbar ist.

                                        Schaut auch bei mir komisch aus?

                                        Screenshot (385)_LI.jpg

                                        EdgarM 1 Reply Last reply Reply Quote 0
                                        • qqolli
                                          qqolli @Ruud2019 last edited by

                                          @Ruud2019

                                          Hab es gearde ausprobiert:

                                          e4b9c8bb-6528-49a9-84ba-a117f9fa6601-image.png

                                          Genauso wie bei @sigi234

                                          1 Reply Last reply Reply Quote 0
                                          • EdgarM
                                            EdgarM Developer @sigi234 last edited by

                                            @sigi234 Ja sigi, du hast recht. War mir gar nicht aufgefallen.

                                            Suche gerade den Fehler..
                                            grüße
                                            E

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            891
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

                                            material design widgets
                                            7
                                            57
                                            4244
                                            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