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

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] Material Design CSS für ioBroker.vis

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.5k

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

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

[Projekt] Material Design CSS für ioBroker.vis

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 221.0k Aufrufe 68 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.
  • blauholstenB Offline
    blauholstenB Offline
    blauholsten
    Developer
    schrieb am zuletzt editiert von
    #4

    Sieht echt Klasse aus, Applaus!!!

    Problem nur, ich werde in der nächsten Zeit weniger Zeit für die Familie haben :lol: , da ich meine Views umstellen muss. ;)

    Entwickler vom: - Viessman Adapter
    - Alarm Adapter

    1 Antwort Letzte Antwort
    0
    • ? Offline
      ? Offline
      Ein ehemaliger Benutzer
      schrieb am zuletzt editiert von
      #5

      sieht klasse aus!!!

      bitte das Beispielprojekt posten.

      Danke

      1 Antwort Letzte Antwort
      0
      • frieda99F Offline
        frieda99F Offline
        frieda99
        schrieb am zuletzt editiert von
        #6

        Tolle Arbeit!

        In der Doku wird ein zip-File erwähnt, dass man in vis importieren kann. Das kann ich aber im git-Projekt nicht finden?

        1 Antwort Letzte Antwort
        0
        • MeistertrM Offline
          MeistertrM Offline
          Meistertr
          Developer
          schrieb am zuletzt editiert von
          #7

          @frieda99:

          Tolle Arbeit!

          In der Doku wird ein zip-File erwähnt, dass man in vis importieren kann. Das kann ich aber im git-Projekt nicht finden? ` Steht ja im ersten post dass er noch nicht fertig ist

          Gesendet von meinem Handy

          1 Antwort Letzte Antwort
          0
          • UhulaU Offline
            UhulaU Offline
            Uhula
            schrieb am zuletzt editiert von
            #8

            OK. Ich werde den Style dann weiter entwickeln. Habe gerade auch mit CSS flex-boxen getestet um ein responsive Design zu bekommen. D.h. es wird dann (fast) egal sein, mit welchem Gerät man sich seinen Views ansieht, die Widgets werden automatisch je nach verfügbaren Platz angeordnet. Man muss dann z.B. nicht mehr 4 Views für 4 Auflösungen/Geräte entwerfen.

            Demobilder folgen demnächst.

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

            1 Antwort Letzte Antwort
            1
            • P Offline
              P Offline
              pix
              schrieb am zuletzt editiert von
              #9

              @Uhula:

              OK. Ich werde den Style dann weiter entwickeln. Habe gerade auch mit CSS flex-boxen getestet um ein responsive Design zu bekommen. D.h. es wird dann (fast) egal sein, mit welchem Gerät man sich seinen Views ansieht, die Widgets werden automatisch je nach verfügbaren Platz angeordnet. Man muss dann z.B. nicht mehr 4 Views für 4 Auflösungen/Geräte entwerfen.

              Demobilder folgen demnächst. `
              Da bin ich sehr gespannt. So was fehlt mir noch…

              ioBroker auf Ubuntu in Proxmox (früher Mac mini (bis OS X 10.12.6 Sierra), VIS via iOS; angeschlossen: Homematic CCU2, Homepilot 1, ConBee II, einige Wemos, Sonos, Unifi CK+Protect, Homekit, Homebridge; KEIN blockly! Github-Profil

              1 Antwort Letzte Antwort
              0
              • UhulaU Offline
                UhulaU Offline
                Uhula
                schrieb am zuletzt editiert von
                #10

                Hat leider etwas länger gedauert, dafür ist der Style nun aber auch responsible und bietet Left/Right-Navigation mit Side-Panels.

                Einen Demo-Film gibt es hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/MaterialDesign4ioBroker.mp4 (dort downloaden)

                Ein Demo-Projekt für den Import in ioBroker.vis hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Demo.zip

                Ein Simple-Projekt als Basis für eigene Projekte hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Simple.zip

                Das Handbuch hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/anleitung.pdf

                Viel Spaß!

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

                1 Antwort Letzte Antwort
                0
                • rantanplanR Offline
                  rantanplanR Offline
                  rantanplan
                  schrieb am zuletzt editiert von
                  #11

                  Super Arbeit!!!!

                  Ein rundum Komplettpacket. Hut ab!

                  Grüße

                  Rantanplan

                  CCU3 / MS Server 2019(VM) / Scripten mit Blockly

                  1 Antwort Letzte Antwort
                  0
                  • MeistertrM Offline
                    MeistertrM Offline
                    Meistertr
                    Developer
                    schrieb am zuletzt editiert von
                    #12

                    Echt hamma

                    Gesendet von meinem Handy

                    1 Antwort Letzte Antwort
                    0
                    • blauholstenB Offline
                      blauholstenB Offline
                      blauholsten
                      Developer
                      schrieb am zuletzt editiert von
                      #13

                      @Uhula:

                      Hat leider etwas länger gedauert, dafür ist der Style nun aber auch responsible und bietet Left/Right-Navigation mit Side-Panels.

                      Einen Demo-Film gibt es hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/MaterialDesign4ioBroker.mp4 (dort downloaden)

                      Ein Demo-Projekt für den Import in ioBroker.vis hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Demo.zip

                      Ein Simple-Projekt als Basis für eigene Projekte hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/ioBroker%20projects/MD_Simple.zip

                      Das Handbuch hier: https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/docs/anleitung.pdf

                      Viel Spaß! `

                      Das ist ganz ganz großes Kino!!!!

                      Entwickler vom: - Viessman Adapter
                      - Alarm Adapter

                      1 Antwort Letzte Antwort
                      0
                      • coyoteC Offline
                        coyoteC Offline
                        coyote
                        Most Active
                        schrieb am zuletzt editiert von
                        #14

                        Sieht sehr gut aus. Top Arbeit

                        Gesendet von meinem VTR-L09 mit Tapatalk

                        1 Antwort Letzte Antwort
                        0
                        • MeistertrM Offline
                          MeistertrM Offline
                          Meistertr
                          Developer
                          schrieb am zuletzt editiert von
                          #15

                          Habs gerade mal schnell getestet und mein Mund stand die ganze Zeit offen und ich bin aus dem staunen nicht heraus gekommen. echt genial was alles möglich ist..

                          Gesendet von meinem Handy

                          1 Antwort Letzte Antwort
                          0
                          • BBTownB Offline
                            BBTownB Offline
                            BBTown
                            schrieb am zuletzt editiert von
                            #16

                            @Meistertr:

                            Habs gerade mal schnell getestet und mein Mund stand die ganze Zeit offen ` das trifft den Nagel auf den Kopf.

                            Auch von mir ein heftiges "WOW !!" :o

                            und dazu ein großes Dankeschön fürs Teilen, Uhula !!

                            ioBroker auf NUC (VM debian v13 (Trixie ), node v22.21.0 npm v10.9.4, js-controller v7.0.7 jsonl/jsonl / HomeMatic CCU-2 (Wired und Funk) / Philips HUE / echo.DOT / Broadlink RM pro / SONOS

                            1 Antwort Letzte Antwort
                            0
                            • htreckslerH Offline
                              htreckslerH Offline
                              htrecksler
                              Forum Testing
                              schrieb am zuletzt editiert von
                              #17

                              @BBTown:

                              @Meistertr:

                              Habs gerade mal schnell getestet und mein Mund stand die ganze Zeit offen ` das trifft den Nagel auf den Kopf.

                              Auch von mir ein heftiges "WOW !!" :o

                              und dazu ein großes Dankeschön fürs Teilen, Uhula !! `

                              Perfekt … ganz viele Daumen hoch

                              Gruss Hermann

                              ioBroker auf Proxmox (Debian) auf IntelNuc als Produktivsystem

                              1 Antwort Letzte Antwort
                              0
                              • ? Offline
                                ? Offline
                                Ein ehemaliger Benutzer
                                schrieb am zuletzt editiert von
                                #18

                                habe innerhalb kürzester Zeit ein komplett neues Design hinbekommen.

                                bin auch begeistert… total begeistert.

                                in der Android App iobroker.vis liegt nun leider der Button zum einblenden der left navigation genau auf der gleichen Stelle wie auch der Button (drei kleine Punkte) zum aufrufen der Einstellungen der Android App.

                                Kann man den Button der Android App vielleicht an eine andere Stelle verschieben?

                                Hat jemand ähnliche Schwierigkeiten

                                1 Antwort Letzte Antwort
                                0
                                • UhulaU Offline
                                  UhulaU Offline
                                  Uhula
                                  schrieb am zuletzt editiert von
                                  #19

                                  Das mit dem Button in der ioBroker AndroidApp ist mir auch aufgefallen. Da ich aber den Fully Kiosk Browser nutze, störte es mich nicht. Zur Lösung könntest du den Menü-Button im ioBroker.vis Material Design, der sich im abar-View an der Position Left=0 befindet, einfach auf Left=48px verschieben.

                                  Die ioBroker App braucht nun mal eine Möglichkeit das Setup zu öffnen. Der Fully Kiosk Browser nutzt dazu eine Swipe-Geste vom linken Rand, eine andere Browser App einen Doppel-Tap. Wäre evtl. auch für die ioBroker App eine optionale Möglichkeit.

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

                                  1 Antwort Letzte Antwort
                                  0
                                  • kmxakK Offline
                                    kmxakK Offline
                                    kmxak
                                    Most Active
                                    schrieb am zuletzt editiert von
                                    #20

                                    Moin, echt klasse was du da gezaubert hast.

                                    Ich habe aber aktuell noch eine Frage.

                                    Habe dieses Widget das soll je nachdem welchen Wert ich bei den Signalbild eingestellt habe eine andere Textfarbe haben.

                                    [{"tpl":"tplJquiIconNav","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":true,"g_css_border":false,"g_gestures":false,"g_signals":true,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":">=","signals-val-0":"1","signals-icon-0":"","signals-icon-size-0":0,"signals-blink-0":true,"signals-horz-0":"8","signals-vert-0":"-65","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":"0","signals-icon-1":"","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":"8","signals-vert-1":"-65","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-title mdui-flatbutton","text":"","nav_view":"cardadmin-alarm","signals-oid-0":"javascript.0.zählenLowbat.anzahlLOWBAT","signals-text-0":"Smart Home","signals-text-style-0":"mdui-red","signals-text-class-0":"mdui-red","signals-oid-1":"javascript.0.zählenLowbat.anzahlLOWBAT","signals-text-1":"Smart Home"},"style":{"left":"64px","top":"16px","height":"15px","width":"100px","z-index":"0","text-align":"left","padding":"6"},"widgetSet":"jqui"}]
                                    

                                    Ich habe unter Signalbilder: CSS Textstyl [1]:

                                    Klassen [1]:

                                    Dort nimmt er aber nicht das mdui-red sondern nur oben unter css Klasse.

                                    Hast du einen Tipp für mich?

                                    Gruß Alex

                                    1 Antwort Letzte Antwort
                                    0
                                    • E Offline
                                      E Offline
                                      eastcoast
                                      schrieb am zuletzt editiert von
                                      #21

                                      Sowas habe ich mir schon lange gewünscht und mir zwischenzeitlich mit Teilen aus dem MUI CSS framework beholfen.

                                      Es gab auch schon mal einen Thread bzgl. Material Design dazu http://forum.iobroker.net/viewtopic.php?f=30&t=3812

                                      Habe mir bisher nur kurz das Demo Video angesehen…

                                      ...sind eigentlich die verwendeten Farben auch aus der offiziellen Guidline (https://material.io/guidelines/style/color.html#)?

                                      1 Antwort Letzte Antwort
                                      0
                                      • UhulaU Offline
                                        UhulaU Offline
                                        Uhula
                                        schrieb am zuletzt editiert von
                                        #22

                                        @kmxak:

                                        Ja. Dort wird eine Farbangabe erwartet, keine CSS-Klasse. Du musst deshalb dort die Material Design Farben selbst eintragen, es sind immer die 500er Colors von folgender Seite: https://material.io/guidelines/style/color.html#color-color-palette.

                                        Für "mdui-red" also z.B. #F44336

                                        Viel Erfolg!

                                        @eastcoast:

                                        Ja, es sind die https://material.io/guidelines/style/color.html#color-color-palette (primär die 500er, 800er und 900er, da dunkler Theme; weiß nicht, ob ein heller Theme überhaupt Sinn macht, da man Nachts ja kein Taschenlampentablett haben möchte :-) )

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

                                        1 Antwort Letzte Antwort
                                        0
                                        • kmxakK Offline
                                          kmxakK Offline
                                          kmxak
                                          Most Active
                                          schrieb am zuletzt editiert von
                                          #23

                                          @Uhula:

                                          @kmxak:

                                          Ja. Dort wird eine Farbangabe erwartet, keine CSS-Klasse. Du musst deshalb dort die Material Design Farben selbst eintragen, es sind immer die 500er Colors von folgender Seite: https://material.io/guidelines/style/color.html#color-color-palette.

                                          Für "mdui-red" also z.B. #F44336

                                          Viel Erfolg! `

                                          Danke dir.. mal wieder extrem zu kompliziert gedacht.

                                          Es ist anfangs etwas verwirrend wo was hinkommt aber langsam wird es. 8-)

                                          Gruß Alex

                                          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

                                          785

                                          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