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.
  • UhulaU Uhula

    @der-eine Für das Verständnis müsstest du tiefer in der CSS flex-System eintauchen. Ich versuche es mal zu erklären:
    Die flex-Darstellung von Elementen teilt die Elemente je nach Breite in mehrere Zeilen auf, je Zeile sind so viele Elemente, wie breitenmäßig hineinpassen. Wie diese Elemente der Zeile sich anordnen sollen, kann man über eine CSS Eigenschaft "justify-content" festlegen. Im MD CSS v2 (mdui-flex) habe ich dafür alternativlos "flex-start" verwendet: Die Elemente ordnen sich alle vom Start (hier: links) weg an.
    Wenn du stattdessen eine andere Anordnung haben möchtest, kannst du dir eigene CSS-Anweisungen in die Projekt-CSS setzen und diese nutzen.
    Bsp:

    .mdui-flex-justify-content_center>.vis-widget-body>.vis-view-container>.vis-view,
    .mdui-flex-justify-content_center>.vis-view-container>.vis-view {
      justify-content : center;
    }
    .mdui-flex-justify-content_space-evenly>.vis-widget-body>.vis-view-container>.vis-view,
    .mdui-flex-justify-content_space-evenly>.vis-view-container>.vis-view {
      justify-content : space-evenly;
    }
    

    Wenn du im pageXX dem content-Widget dann neben "mdui-flex" auch z.B. ".mdui-flex-justify-content_space-evenly" zuweist, werden die Elemente zentriert, mit gleich verteiltem Platz drum herum dargestellt. Ich werde beide Optionen mal mit aufnehmen.

    Hier justify-content ist es recht anschaulich dargestellt (lass dich von den anderen Optionen nicht verwirren).


    Alternativ kannst du auch mit dem vorhandenen CSS eine Lösung erreichen, dann musst du den cards nur erlauben ihre Breite an den zur Verfügung stehenden Platz anzupassen. Hierzu ordnest du den cards im contXXX nicht eine feste Breit mit "mdui-cols-4-toc-4" (=320px) zu, sondern entweder "mdui-cols-4" (=320px bis 320px + 10% = 320 bis 352px) oder "mdui-cols-4-toc-5" (=320px bis 400px) zu.


    Das Arbeiten mit flex-Boxen ist leider nicht ganz simpel, es gibt viele Optionen. Ich hoffe, meine Erläuterung hilft dir.

    D Offline
    D Offline
    der-eine
    schrieb am zuletzt editiert von
    #588

    @Uhula Danke die neue CSS Zuweisung ist genau das was ich wollte.:+1:
    Übernimmst Du das in das nächste Update des CSS Projects? Ansonsten muss ich mir das irgendwo notieren damit ich das nicht vergesse wieder einzufügen.

    Habe die Varianten mit dem vorhanden CSS auch versucht. Mit "mdui-cols4-toc-4 funktioniert es auch aber mit space-evenly gefällt es mir besser. :+1:

    Bin auf Deine Anleitung gespannt. Die macht es dann nochmal einfacher das ganze zu Verstehen!

    Ja, Deine Erläuterung hat mir weiter geholfen! :+1:

    1 Antwort Letzte Antwort
    0
    • M Offline
      M Offline
      mctom
      schrieb am zuletzt editiert von
      #589

      Hallo zusammen,

      nachdem ich die gleichen Probleme wie mrFenyx hatte, kann ich nun die Demo Seite aufrufen.
      Ein kleine Problem habe ich noch.

      Der Hintergrund ist bei mir hellgrau:
      2020-02-12 21_35_10-Window.png

      Woran kann das liegen ?
      Mach ich was falsch ?

      Gruß

      Michael

      D 1 Antwort Letzte Antwort
      0
      • M mctom

        Hallo zusammen,

        nachdem ich die gleichen Probleme wie mrFenyx hatte, kann ich nun die Demo Seite aufrufen.
        Ein kleine Problem habe ich noch.

        Der Hintergrund ist bei mir hellgrau:
        2020-02-12 21_35_10-Window.png

        Woran kann das liegen ?
        Mach ich was falsch ?

        Gruß

        Michael

        D Offline
        D Offline
        der-eine
        schrieb am zuletzt editiert von der-eine
        #590

        @mctom klicke oben links auf die drei Balken —> Einstellungen und verändere die Farben. Das „Problem“ ist weiße Schrift auf weißem Hintergrund.

        M 1 Antwort Letzte Antwort
        0
        • D der-eine

          @mctom klicke oben links auf die drei Balken —> Einstellungen und verändere die Farben. Das „Problem“ ist weiße Schrift auf weißem Hintergrund.

          M Offline
          M Offline
          mctom
          schrieb am zuletzt editiert von
          #591

          @der-eine: Danke habe es angepasst.

          1 Antwort Letzte Antwort
          0
          • mrFenyxM Offline
            mrFenyxM Offline
            mrFenyx
            schrieb am zuletzt editiert von
            #592

            @Uhula ich habe eine Frage zu den Sliders. Ist es möglich die "mdui-transparent-acc" classe zu benutzen aber trotzdem dem Slider Handle eine Farbe zu geben so dass es nicht immer weiß ist?

            1 Antwort Letzte Antwort
            0
            • bilberryB Offline
              bilberryB Offline
              bilberry
              schrieb am zuletzt editiert von
              #593

              Hallo Uhula, Hallo liebe Fan-Gemeinde!
              Auch von mir erstmal herzlichen Dank an @Uhula für die neue MD-Version. Als langer treuer Leser dieses Forums habe ich bislang immer irgendwo Lösungsansätze von Euch für meine jeweiligen Herausforderungen gefunden. Doch an einer Stelle komme ich seit langem nicht weiter und hoffe auf Eure Hilfe:

              Ich möchte den Glow- bzw. den Blink-Effekt für Buttons nutzen. ABER, nur wenn dieser auf true gesetzt (also angeschaltet) wurde.
              Ich denke, der richtige Ansatz ist hier das "basic-bool HTML"-Widget. Das kann ich mit z.B. <i class="material-icons mdui-green-glow">power_settings_new</i> im Feld HTML bei 'true' auch schon fast so wie gewünscht darstellen (sh. Beispielbild). Dann leuchtet aber nur der innere Text ( in dem Fall ein Icon) aber nicht der Rahmen. Wenn der auch leuchten würde, wäre noch das i-Tüpfelchen. Wer hat eine Idee, wie ich das hinbekommen könnte?

              GlowButtons-Beispiel.png

              P GlasfaserG UhulaU 3 Antworten Letzte Antwort
              0
              • bilberryB bilberry

                Hallo Uhula, Hallo liebe Fan-Gemeinde!
                Auch von mir erstmal herzlichen Dank an @Uhula für die neue MD-Version. Als langer treuer Leser dieses Forums habe ich bislang immer irgendwo Lösungsansätze von Euch für meine jeweiligen Herausforderungen gefunden. Doch an einer Stelle komme ich seit langem nicht weiter und hoffe auf Eure Hilfe:

                Ich möchte den Glow- bzw. den Blink-Effekt für Buttons nutzen. ABER, nur wenn dieser auf true gesetzt (also angeschaltet) wurde.
                Ich denke, der richtige Ansatz ist hier das "basic-bool HTML"-Widget. Das kann ich mit z.B. <i class="material-icons mdui-green-glow">power_settings_new</i> im Feld HTML bei 'true' auch schon fast so wie gewünscht darstellen (sh. Beispielbild). Dann leuchtet aber nur der innere Text ( in dem Fall ein Icon) aber nicht der Rahmen. Wenn der auch leuchten würde, wäre noch das i-Tüpfelchen. Wer hat eine Idee, wie ich das hinbekommen könnte?

                GlowButtons-Beispiel.png

                P Offline
                P Offline
                Pittini
                Developer
                schrieb am zuletzt editiert von
                #594

                @bilberry Das is ne gute Frage. Es geht zwar simpel und unelegant mit nem 2ten Button der via sichtbarkeit geschaltet wird, aber das is mehr ein workaround. Würde mich auch freuen wenn @Uhula uns da helfen könnte, würde mir etliche übereinanderliegende Buttons ersparen.

                1 Antwort Letzte Antwort
                0
                • bilberryB bilberry

                  Hallo Uhula, Hallo liebe Fan-Gemeinde!
                  Auch von mir erstmal herzlichen Dank an @Uhula für die neue MD-Version. Als langer treuer Leser dieses Forums habe ich bislang immer irgendwo Lösungsansätze von Euch für meine jeweiligen Herausforderungen gefunden. Doch an einer Stelle komme ich seit langem nicht weiter und hoffe auf Eure Hilfe:

                  Ich möchte den Glow- bzw. den Blink-Effekt für Buttons nutzen. ABER, nur wenn dieser auf true gesetzt (also angeschaltet) wurde.
                  Ich denke, der richtige Ansatz ist hier das "basic-bool HTML"-Widget. Das kann ich mit z.B. <i class="material-icons mdui-green-glow">power_settings_new</i> im Feld HTML bei 'true' auch schon fast so wie gewünscht darstellen (sh. Beispielbild). Dann leuchtet aber nur der innere Text ( in dem Fall ein Icon) aber nicht der Rahmen. Wenn der auch leuchten würde, wäre noch das i-Tüpfelchen. Wer hat eine Idee, wie ich das hinbekommen könnte?

                  GlowButtons-Beispiel.png

                  GlasfaserG Offline
                  GlasfaserG Offline
                  Glasfaser
                  schrieb am zuletzt editiert von
                  #595

                  @bilberry

                  Versuche es mal damit , ob es dir gefällt :

                  Datenpunkt natürlich anpassen

                  {val:javascript.0.Datenpunkt.DP3;val=="true"? "mdui-green-glow":  " "}
                  
                  

                  1.JPG

                  Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                  1 Antwort Letzte Antwort
                  1
                  • UhulaU Uhula

                    Moin. Vor 10 Tagen habe ich zufällig von einem Freund erfahren, dass ioBroker auch auf der Synology NAS im Docker Container läuft. Also mal kurz installiert, eingerichtet - und schon war ich infiziert. Kompliment an alle, die daran mitgearbeitet haben!

                    Aber. Um den FAF (Frauen-Akzeptanz-Faktor) zu erhöhen (Androids Apps wie WhatsApp kommen gut an) und auch ich selbst das Material Design von Google als gelungen ansehe, im ioBroker.vis aber nichts vergleichbares zu finden war, habe ich begonnen meine eigenen CSS Anweisungen über einige basic und jqui Controls zu stülpen. Es ist kein eigener Adapter (kenne mich in JS noch zu wenig aus), sondern es sind nur CSS Anweisungen, die im Projekt auf der CSS-Registerseite eingefügt werden. Anschließend muss den basic- und jqui-Controls noch die entsprechende(n) CSS-Klasse(n) zugewiesen werden. Fertig.

                    Bilder sagen mehr, also:
                    3336_demo1.png
                    3336_demo2.png
                    Look & Feel wie eine Android-App mit App-Bar, Tab-Navigation und Bottom-Navigation; alle Farben sind über CSS-Klassen konfigurierbar.

                    <size size="85">Edit 10.10.2017</size>

                    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

                    <size size="85">Edit 17.10.2017</size>

                    Wer sich das Demo Projekt direkt, also ohne Download/Import ansehen möchte, kann dieses nun auch über die ioBroker-vis-Demo Site tun: https://iobroker.net:8080/vis/index.htm … o#_landing

                    <size size="85">HowTo-Verweise im Forum</size>

                    http://forum.iobroker.net/viewtopic.php?f=30&t=8457

                    http://forum.iobroker.net/viewtopic.php?f=30&t=8101

                    http://forum.iobroker.net/viewtopic.php?f=30&t=8122

                    http://forum.iobroker.net/viewtopic.php?f=30&t=8185

                    http://forum.iobroker.net/viewtopic.php?f=30&t=8294

                    http://forum.iobroker.net/viewtopic.php?f=30&t=10541

                    http://forum.iobroker.net/viewtopic.php?f=30&t=10540

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

                    @Uhula

                    Hallo,
                    habe die neue Version eingefügt.
                    Der Hintergrund im Editor ist jetzt weis in der Runtime Schwarz.
                    Möchte auch im Editor den Hintergrund Schwarz haben.

                    Screenshot (1683).png

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

                    GlasfaserG 1 Antwort Letzte Antwort
                    0
                    • sigi234S sigi234

                      @Uhula

                      Hallo,
                      habe die neue Version eingefügt.
                      Der Hintergrund im Editor ist jetzt weis in der Runtime Schwarz.
                      Möchte auch im Editor den Hintergrund Schwarz haben.

                      Screenshot (1683).png

                      GlasfaserG Offline
                      GlasfaserG Offline
                      Glasfaser
                      schrieb am zuletzt editiert von Glasfaser
                      #597

                      @sigi234

                      Versuche mal den Background mit :

                      rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box
                      

                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                      sigi234S 1 Antwort Letzte Antwort
                      0
                      • GlasfaserG Glasfaser

                        @sigi234

                        Versuche mal den Background mit :

                        rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box
                        
                        sigi234S Online
                        sigi234S Online
                        sigi234
                        Forum Testing Most Active
                        schrieb am zuletzt editiert von sigi234
                        #598

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

                        @sigi234

                        Versuche mal den Background mit :

                        rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box
                        

                        Leider nein.

                        Screenshot (1685).png

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

                        GlasfaserG 2 Antworten Letzte Antwort
                        0
                        • sigi234S sigi234

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

                          @sigi234

                          Versuche mal den Background mit :

                          rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box
                          

                          Leider nein.

                          Screenshot (1685).png

                          GlasfaserG Offline
                          GlasfaserG Offline
                          Glasfaser
                          schrieb am zuletzt editiert von
                          #599

                          @sigi234

                          War ja ein Versuch ..:thinking_face: .. habe das neue CSS noch nicht eingefügt um selber zu testen ..

                          Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                          1 Antwort Letzte Antwort
                          0
                          • sigi234S sigi234

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

                            @sigi234

                            Versuche mal den Background mit :

                            rgba(1, 1, 1, 1) none repeat scroll 0% 0% / auto padding-box border-box
                            

                            Leider nein.

                            Screenshot (1685).png

                            GlasfaserG Offline
                            GlasfaserG Offline
                            Glasfaser
                            schrieb am zuletzt editiert von
                            #600

                            @sigi234

                            Hier die Zeile ist dafür zuständig ..

                            .vis_container>div {
                                background: #f8f8f8 !important;
                            

                            1.JPG

                            Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                            1 Antwort Letzte Antwort
                            1
                            • bilberryB bilberry

                              Hallo Uhula, Hallo liebe Fan-Gemeinde!
                              Auch von mir erstmal herzlichen Dank an @Uhula für die neue MD-Version. Als langer treuer Leser dieses Forums habe ich bislang immer irgendwo Lösungsansätze von Euch für meine jeweiligen Herausforderungen gefunden. Doch an einer Stelle komme ich seit langem nicht weiter und hoffe auf Eure Hilfe:

                              Ich möchte den Glow- bzw. den Blink-Effekt für Buttons nutzen. ABER, nur wenn dieser auf true gesetzt (also angeschaltet) wurde.
                              Ich denke, der richtige Ansatz ist hier das "basic-bool HTML"-Widget. Das kann ich mit z.B. <i class="material-icons mdui-green-glow">power_settings_new</i> im Feld HTML bei 'true' auch schon fast so wie gewünscht darstellen (sh. Beispielbild). Dann leuchtet aber nur der innere Text ( in dem Fall ein Icon) aber nicht der Rahmen. Wenn der auch leuchten würde, wäre noch das i-Tüpfelchen. Wer hat eine Idee, wie ich das hinbekommen könnte?

                              GlowButtons-Beispiel.png

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

                              @bilberry Glasfaser hat dir im Prinzip die richtige Antwort gegeben. Der glow-Effekt muss dem ganzen Widget zugewiesen werden, nicht nur dem Icon. Da du das "schaltbar" haben möchtest, kannst du die vis-Bindingfähigkeit nutzen. Statt "mdui-button-outlined mdui-blue-glow" musst du dann "mdui-button-outlined {javascript.0.myGlow}" zuweisen. Über die Wertzuweisung an "javascript.0.myGlow" kannst dann das Glühen einschalten in dem du den Wert "mdui-blue-glow" zuweist. Natürlich auch andere Farben ;-)

                              @sigi234 Den Hintergrund des Editors setzt du im Projekt-CSS an der Stelle ".vis_container>div"

                              /* -----
                                 Design
                                 ----- */
                              
                              .vis_container>div {
                                  background: #f0f0f0 !important;
                              }
                              

                              Statt #f0f0f0 einfach z.B. #121212 zuweisen.

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

                              sigi234S bilberryB 3 Antworten Letzte Antwort
                              1
                              • UhulaU Uhula

                                @bilberry Glasfaser hat dir im Prinzip die richtige Antwort gegeben. Der glow-Effekt muss dem ganzen Widget zugewiesen werden, nicht nur dem Icon. Da du das "schaltbar" haben möchtest, kannst du die vis-Bindingfähigkeit nutzen. Statt "mdui-button-outlined mdui-blue-glow" musst du dann "mdui-button-outlined {javascript.0.myGlow}" zuweisen. Über die Wertzuweisung an "javascript.0.myGlow" kannst dann das Glühen einschalten in dem du den Wert "mdui-blue-glow" zuweist. Natürlich auch andere Farben ;-)

                                @sigi234 Den Hintergrund des Editors setzt du im Projekt-CSS an der Stelle ".vis_container>div"

                                /* -----
                                   Design
                                   ----- */
                                
                                .vis_container>div {
                                    background: #f0f0f0 !important;
                                }
                                

                                Statt #f0f0f0 einfach z.B. #121212 zuweisen.

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

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

                                @sigi234 Den Hintergrund des Editors setzt du im Projekt-CSS an der Stelle ".vis_container>div"

                                Ok geht, also hat die Einstellung use Background keinen Einfluss mehr bzw. dein css überschreibt das?

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

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

                                  @sigi234 Im Designer: Klar, lege ja auch mein Raster drauf! ;-) Btw. mit den view-Einstellungen selbst konnte ich mich nie anfreunden, die wirken im Designer nicht wie erwartet.

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

                                  D 1 Antwort Letzte Antwort
                                  0
                                  • UhulaU Uhula

                                    @sigi234 Im Designer: Klar, lege ja auch mein Raster drauf! ;-) Btw. mit den view-Einstellungen selbst konnte ich mich nie anfreunden, die wirken im Designer nicht wie erwartet.

                                    D Offline
                                    D Offline
                                    darkiop
                                    Most Active
                                    schrieb am zuletzt editiert von
                                    #604

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

                                    Btw. mit den view-Einstellungen selbst konnte ich mich nie anfreunden, die wirken im Designer nicht wie erwartet.

                                    Ich habe auch immer ein Misch-Masch aus VIS EDIT und CSS :)

                                    VIS Edit ist eigentlich so mächtig, das hätte mal einen neuen Anstrich + Modernisierung verdient :D

                                    Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

                                    1 Antwort Letzte Antwort
                                    0
                                    • P Offline
                                      P Offline
                                      Pittini
                                      Developer
                                      schrieb am zuletzt editiert von Pittini
                                      #605

                                      Ich finde ja die mdui-expand Funktion höchst interessant. Was mich allerdings grad stört, ist die Tatsache das bei Seitenrefresh die cards immer expandiert dargestellt werden, ich hätte die aber gern zusammengeklappt, am besten noch wahlweise. Gibts da ne Möglichkeit, sowas wie mdui-collapse?

                                      Dominik F.D 1 Antwort Letzte Antwort
                                      0
                                      • P Pittini

                                        Ich finde ja die mdui-expand Funktion höchst interessant. Was mich allerdings grad stört, ist die Tatsache das bei Seitenrefresh die cards immer expandiert dargestellt werden, ich hätte die aber gern zusammengeklappt, am besten noch wahlweise. Gibts da ne Möglichkeit, sowas wie mdui-collapse?

                                        Dominik F.D Offline
                                        Dominik F.D Offline
                                        Dominik F.
                                        schrieb am zuletzt editiert von
                                        #606

                                        @Pittini

                                        mdui-onload: Hierüber kann festgelegt werden, dass die dem Widget zugewiesene Funktion bereits beim Laden der Page ausgeführt werden soll. Wirkt sich nur im Zusammenhang mit mdui-toggle, mdui-expand oder mdui-fullscreen aus.

                                        in der Demoversion ist eine der Cards eingeklappt dargestellt und wenn ich das richtig verstanden habe ist dieses Widget dafür verantwortlich:

                                        [{"tpl":"tplHtml","data":{"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,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"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,"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,"html":"<i class=\"material-icons\">expand_less</i>","class":"mdui-button mdui-center mdui-expand mdui-onload"},"style":{"left":"calc(100% - 56px)","top":"16px","width":"40px","height":"40px"},"widgetSet":"basic"}]
                                        

                                        Das ist das Widget mit dem man die Cards ein und ausklappen kann.

                                        P 1 Antwort Letzte Antwort
                                        0
                                        • UhulaU Uhula

                                          @bilberry Glasfaser hat dir im Prinzip die richtige Antwort gegeben. Der glow-Effekt muss dem ganzen Widget zugewiesen werden, nicht nur dem Icon. Da du das "schaltbar" haben möchtest, kannst du die vis-Bindingfähigkeit nutzen. Statt "mdui-button-outlined mdui-blue-glow" musst du dann "mdui-button-outlined {javascript.0.myGlow}" zuweisen. Über die Wertzuweisung an "javascript.0.myGlow" kannst dann das Glühen einschalten in dem du den Wert "mdui-blue-glow" zuweist. Natürlich auch andere Farben ;-)

                                          @sigi234 Den Hintergrund des Editors setzt du im Projekt-CSS an der Stelle ".vis_container>div"

                                          /* -----
                                             Design
                                             ----- */
                                          
                                          .vis_container>div {
                                              background: #f0f0f0 !important;
                                          }
                                          

                                          Statt #f0f0f0 einfach z.B. #121212 zuweisen.

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

                                          @Pittini zwei übereinanderliegende Button war auch meine allererste Idee - aber sobald es mehrere ähnliche Buttons sein sollen, ist das kaum noch zu beherrschen
                                          Deshalb bin ich jetzt auch dankbar für den Tipp von @Glasfaser. Hab ihn gerade ausprobiert und - juhu - so funktionierts!

                                          @Uhula Dein Vorschlag ging ja im Prinzip in die gleiche Richtung, jedoch sollte ich einem Datenpunkt den String "mdui-(color)-glow" zuweisen. Genau das hatte ich mir nämlich letzte Woche auch schon mal überlegt. Aber dann müsste ich doch für jeden Button einen separaten Datenpunkt anlegen, sonst würden ja alle Buttons auf einmal glühen, wenn einer geschaltet wird. Außerdem bräuchte ich noch einen Trigger (Skript), welcher je nach Schaltzustand „glow“ oder „“ in den Datenpunkt schreibt. Oder habe ich einen Denkfehler und es geht doch noch einfacher?

                                          P 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

                                          772

                                          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