Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] Material Design CSS für ioBroker.vis

    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] Material Design CSS für ioBroker.vis

    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      davimas @Uhula last edited by

      @Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

      Vorab-Info:
      Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

      087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

      Hey,

      sind die schon irgendwo verfügbar? Die CSS Klasse habe ich nicht gefunden in der Demo......

      by,
      David

      K 1 Reply Last reply Reply Quote 0
      • S
        Snapergy last edited by

        @Uhula
        erst einmal vielen Dank für das schöne Design via CSS. Ich habe mir den Switch und den Slider für meine Visualisierung "rausgepickt". Jetzt habe ich eine Frage bzgl. der Machbarkeit an dich. Ich hätte gern beim Slider ein Label, welcher mit dem Knopf beim Vertical Slider mitläuft und den aktuellen Wert darstellt (siehe Discrete Slider vom Google Material Design). Ich hatte dazu auch schon einen Thread eröffnet, aber dort konnte mir keiner weiterhelfen.

        Aktuell behelfe ich mir mit einer Krücke, welche den Wert in einem statischen HTML aus einem Datenobjekt ausliest. Dies ist aber immer mit einem kleinen Delay verbunden, welches sich als unschön und nicht gerade Userfreundlich darstellt.

        D 1 Reply Last reply Reply Quote 0
        • K
          K_o_bold @davimas last edited by

          @davimas ,
          @Uhula , das wäre echt super, wenn auch Chips zur Verfügung gestellt werden.

          1 Reply Last reply Reply Quote 0
          • D
            dos1973 @Snapergy last edited by

            @Snapergy
            Nimm doch einfach den DiscreteSlider aus dem MaterialDesign Adapter...?!

            S 1 Reply Last reply Reply Quote 0
            • S
              Snapergy @dos1973 last edited by

              @dos1973
              den gibt es leider nicht als vertikalen slider 😞

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

                Gibt es schon das Update für die Chips?

                1 Reply Last reply Reply Quote 0
                • K
                  K_o_bold last edited by K_o_bold

                  So wie es aussieht, ist Uhula in diesem Forum nicht mehr so aktiv. Schade, denn die Chips sehen echt gut aus...

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

                    Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles 😉 - dann natürlich inkl. der Chips.

                    • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                    • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                    • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                    • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                    • alle material design Farben werden nun namentlich unterstützt
                    • Anpassung der MD_Demo und MD_Simple Projekte
                    • Anpassung der Dokumentation
                    • ...

                    Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                    Schöne Adventszeit noch!

                    Z D blauholsten S frieda99 5 Replies Last reply Reply Quote 5
                    • S
                      Schrauberheld last edited by Schrauberheld

                      Finde ich Mega das du noch an dem ganzen arbeitest 👍

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

                        @Uhula
                        Da warte ich aber SEHR gespannt!
                        Ich glaube da spreche ich für eine größere Gemeinde, als du ahnst!

                        D 1 Reply Last reply Reply Quote 0
                        • D
                          davimas @zahnheinrich last edited by davimas

                          @zahnheinrich

                          Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
                          https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

                          Meistertr D 2 Replies Last reply Reply Quote 0
                          • D
                            davimas @Uhula last edited by davimas

                            @Uhula

                            Wäre cool wenn man "mdui-vibrate" als Klasse hätte - so wie die anderen neuen Widgets derzeit: "vibrateOnMobilDevices""

                            1 Reply Last reply Reply Quote 0
                            • K
                              K_o_bold last edited by

                              Da is er ;-)....
                              Super...da bin ich mal gespannt..hört sich gut an.

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

                                @davimas ich nutze beides gleichzeitig, wo das eine schwächelt, punktet das andere...

                                1 Reply Last reply Reply Quote 1
                                • blauholsten
                                  blauholsten Developer @Uhula last edited by

                                  @Uhula
                                  Bedeutung dein letzter Satz der Release kommt 2019 noch😬 .....spaß bei Seite, ich freu mich riesig👏

                                  Nutze quasi deine viso schon seit dem es sie gibt

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

                                    Wir sind sehr gespannt 😎

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

                                      @Uhula
                                      vielleicht ist ja auch der Discrete Slider in vertikaler Form dabei 😉

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

                                        Da bin ich gespannt. Ich habe meine VIS auch mit dem Framework von @Uhula aufgebaut. Mir bietet es auch alle Freiheiten. Da ich mich mit CSS ganz gut auskenne, ist das genau das Richtige.

                                        @Uhula wenn Du bereits dran arbeit, wäre es Dir möglich eine HTML Drag&Drop Funktion mit einzubinden? Die ist in HTML5 bereits nativ implementiert. Es wäre klasse wenn die Container in den _cont Seiten per Drag & Drop positioniert werden können, sowie die größe per Ziehen angepasst werden kann.

                                        https://marcojakob.github.io/dart-dnd/simple_sortable/

                                        Mal als Idee, falls Du sie nicht schon hattest 😉

                                        1 Reply Last reply Reply Quote 0
                                        • D
                                          darkiop Most Active @davimas last edited by

                                          @davimas sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                          @zahnheinrich

                                          Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
                                          https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

                                          @Meistertr sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                          @davimas ich nutze beides gleichzeitig, wo das eine schwächelt, punktet das andere...

                                          Ganz genau, @Uhula s CSS ist das Framework für VIS selbst - die Widgets von @Scrounger passen/ergänzen das perfekt.

                                          Zusammen mit den Neuerungen in Uhula's Version 2 können wir da wohl was sehr brauchbares Erwarten!

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

                                            Ja, das MD-Widget Project und mein MD-CSS Project sind zwei vollkommen verschiedene Wege, ersteres setzt auf die MD web components von Google auf (welche natürlich mit installiert werden), meins hingegen spielt mit viel CSS und ein wenig Script nur mit den originalen vis Ausgaben herum, unter Nutzung der basic/HTML Komponenten.

                                            Deswegen kann ich auch im Editor solche schöne Dinge, wie Drag&Drop usw. nicht einbauen, darauf habe ich gar keinen Einfluss (da fehlt eine Script-Schnittstelle); lediglich über CSS Anweisungen kann ich den Editor leicht in der Darstellung manipulieren, so dass ein look&feel der späteren Darstellung entsteht. Für die Anordnung der cards im content habe ich aber eine Idee, wenn ich den content auf die Nutzung von flex-boxen umsetze, kann man den cards (child-elemente) dann via CSS eine Reihenfolge (order) mitgeben. Mal sehen, würde das dauernde Exportieren und Importieren der Widgets in dem Fall vermeiden.

                                            Dabei wird mein Projekt sicher nie die Perfektion der echten MD web components erreichen, dafür bleiben aber auch mehr Freiheiten, da jeder selbst die CSS und Scriptdaten direkt verändern kann. Außerdem müssen keine weiteren Componenten installiert werden. Die Adaption der MD web components für ioBroker von Scrounger sieht aber schon mal sehr gut aus, muss ich später mal testen (wenn denn der Tag nicht nur 24 Std hätte).

                                            AxelF1977 1 Reply Last reply Reply Quote 2
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            829
                                            Online

                                            31.9k
                                            Users

                                            80.1k
                                            Topics

                                            1.3m
                                            Posts

                                            111
                                            650
                                            189582
                                            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