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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 221.8k 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.
  • 0 0018

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

    Das dark-Theme zur Laufzeit wird automatisch durch das Setzen der Hintergrundfarben bestimmt

    Wo genau muss ich zB im MD_Simple diese Hintergrundfarbe definieren? Egal wo ich diese setze, die card Farbe bleibt auf Nicht-mdui-dark, also heller als gewollt. Greift diese automatische Anpassung auch wenn ich den Background der View auf

    linear-gradient(to right, #ffffff, #000000)
    

    setzen möchte?

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

    @0018 Zwei Optionen:
    a) Die cards werden ja im content-Bereich angezeigt, also werden sie auch in dessen Farbe angezeigt. Die content-Farbe legst du in der abar-View im Widget "mdui-config" fest. Im MD_Demo Projekt sind dort keine festen hinterlegt, sondern temporäre vis-States, die über die "Einstellungen" zur Laufzeit gesetzt werden. Für ein eigenes Projekt nicht unbedingt sinnvoll. Stattdessen kannst du aber auch im "mdui-config" Widget der abar-View direkt Farben angeben.
    Bsp:

    "primary_color":"#000000",
    "abar_color":"#121212",
    "tnav_color":"#000000",
    "bnav_color":"#000000",
    "lnav_color":"#000000",
    "rnav_color":"#000000",
    "secondary_color":"amber",
    "content_color":"#121212",
    "lnav_fixed_width":"{demo_lnav_fixed_width}",
    "lnav_fixed_open":"true"
    

    b) oder du weist deinen cards in den content-Views direkt Farben zu, und zwar über die CSS Klassen. Z.B. "mdui-lime-bg", "mdui-black-bg", "mdui-black80-bg" usw. - diese haben eine höhere Priorität als die aus den mdui-config

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

    0 1 Antwort Letzte Antwort
    0
    • D der-eine

      @Uhula das wäre der Plan. Wie muss denn die URL aussehen bzw. wie erstelle ich so eine URL?

      Habe die View aus dem Demo exportiert und in mein Projekt importiert. Hab leider schon gemerkt, dass die Steuerelemente nicht funktionieren.

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

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

      Wie muss denn die URL aussehen bzw. wie erstelle ich so eine URL?

      Hier mal ein Beispiel:
      So kommt das direkt aus Grafana, via Share > Link:

      2020-02-18 18_15_21-Window.png

      http://192.168.2.15:3000/d/_m6IgtAWk/energieverbrauch?orgId=1&refresh=1m&from=1581872899807&to=1582045699807&panelId=2&fullscreen

      Daraus mache ich dann:
      http://192.168.2.15:3000/d/_m6IgtAWk/energieverbrauch?orgId=1&refresh=1m&from=1581164832158&to=1581337632158&panelId=2&fullscreen&kiosk&theme=dark

      Und so funktionierten die Controls dann bei mir auch.

      UhulaU D 2 Antworten Letzte Antwort
      0
      • P Pittini

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

        Wie muss denn die URL aussehen bzw. wie erstelle ich so eine URL?

        Hier mal ein Beispiel:
        So kommt das direkt aus Grafana, via Share > Link:

        2020-02-18 18_15_21-Window.png

        http://192.168.2.15:3000/d/_m6IgtAWk/energieverbrauch?orgId=1&refresh=1m&from=1581872899807&to=1582045699807&panelId=2&fullscreen

        Daraus mache ich dann:
        http://192.168.2.15:3000/d/_m6IgtAWk/energieverbrauch?orgId=1&refresh=1m&from=1581164832158&to=1581337632158&panelId=2&fullscreen&kiosk&theme=dark

        Und so funktionierten die Controls dann bei mir auch.

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

        @Pittini Wundert mich, dass die mdui Controls da funktionieren, da sie eigentlich mit den "from=" und "to=" Angaben im sek-Format eigentlich nicht umgehen können. Ich habe es nur mit "&from=now-2h&to=now-0h" usw. getestet.
        Info Zeitangaben: m=min h=hour d=day w=week M=month y=year

        Edit: Geht doch, wenn man vorher einmal das Intervall "1 Stunde" ... gewählt hat, bevor man "<" und ">" nutzt.

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

        1 Antwort Letzte Antwort
        0
        • jpgorganizerJ Offline
          jpgorganizerJ Offline
          jpgorganizer
          schrieb am zuletzt editiert von jpgorganizer
          #637

          Hi zusammen,

          EDIT: ich hab mein Problem gefunden --- ich lass das aber mal stehen, vielleicht nützt es jemandem --- es geht genau so, wie ich hier geschrieben habe

          ich versuche mich gerade daran einen HTML Text (basic - html mit CSS mdui-title mdui-center-v) in der Breite (width) variabel, also in Abhängigkeit von angezeigten anderen Widgets zu gestalten.

          Dafür habe ich in der width eingetragen:

          calc(100% - {wert:meinadapter.run; wert!="run"? 50 : 100}px)
          

          Noch ein Bild vom "Problem"
          90ac18fd-3ae5-4a61-85e7-6ad44e213d58-grafik.png

          Der Text geht hinter den Stop-Button (weißes Quadrat). Dieser Button wird nur angezeigt, wenn meine Geräte laufen, deshalb frage ich den Status "run" ab. Wenn dieser Button nicht da ist (und das ist meistens der Fall), dann kann der Text bis zu dem Pfeilchen gehen und sonst soll er vorher einfach abgeschnitten werden (bzw. mehrzeilig werden).

          Wie ganz oben schon editiert. Es geht genau so - ich hatte vergessen, dass ich ja nicht links bei 0 anfange, sondern auch schon bei 100px, also sollte ich 150 bzw 200 schreiben und schon geht's

          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
          • jpgorganizerJ jpgorganizer

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

            Ich wollte ein Bild laden, welches durch ein Skript gespeichert wird. Ich kann beim Einbinden über vis leider nur solche Bilder sehen, die ich selber hochgeladen habe. Wie kann ich das umgehen?

            scheint, als ob wir beide gerade am gleichen Problem rumdoktern. Für mich habe ich die Lösung gefunden. Umgehen kannst du das Problem nicht, sondern nur Lösen :-)

            siehe https://forum.iobroker.net/topic/29642/basic-image-kein-update/7

            Oder hast du ein ganz anderes Problem?

            VG jpgorganizer

            S Offline
            S Offline
            SMARTY.ML
            schrieb am zuletzt editiert von
            #638

            @jpgorganizer bin auf die gleiche Lösung gestoßen, funktioniert

            1 Antwort Letzte Antwort
            0
            • W Offline
              W Offline
              webseb79
              schrieb am zuletzt editiert von
              #639

              @Uhula
              benutze dein Projekt schon eine Weile und bin begeistert von deiner Arbeit und deinem Wissen.
              MeinProblem was ich habe ist das Input Widget.
              Egal ob String angehakt oder nicht gibt es immer ein String zurück anstatt Number.
              Kann man mit CSS oder Skript in Vis das Input auf Typ Number festnageln?

              Danke im Voraus

              Gruß Sebastian

              jpgorganizerJ UhulaU 2 Antworten Letzte Antwort
              0
              • W webseb79

                @Uhula
                benutze dein Projekt schon eine Weile und bin begeistert von deiner Arbeit und deinem Wissen.
                MeinProblem was ich habe ist das Input Widget.
                Egal ob String angehakt oder nicht gibt es immer ein String zurück anstatt Number.
                Kann man mit CSS oder Skript in Vis das Input auf Typ Number festnageln?

                Danke im Voraus

                Gruß Sebastian

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

                deleted - wrong post

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

                  @0018 Zwei Optionen:
                  a) Die cards werden ja im content-Bereich angezeigt, also werden sie auch in dessen Farbe angezeigt. Die content-Farbe legst du in der abar-View im Widget "mdui-config" fest. Im MD_Demo Projekt sind dort keine festen hinterlegt, sondern temporäre vis-States, die über die "Einstellungen" zur Laufzeit gesetzt werden. Für ein eigenes Projekt nicht unbedingt sinnvoll. Stattdessen kannst du aber auch im "mdui-config" Widget der abar-View direkt Farben angeben.
                  Bsp:

                  "primary_color":"#000000",
                  "abar_color":"#121212",
                  "tnav_color":"#000000",
                  "bnav_color":"#000000",
                  "lnav_color":"#000000",
                  "rnav_color":"#000000",
                  "secondary_color":"amber",
                  "content_color":"#121212",
                  "lnav_fixed_width":"{demo_lnav_fixed_width}",
                  "lnav_fixed_open":"true"
                  

                  b) oder du weist deinen cards in den content-Views direkt Farben zu, und zwar über die CSS Klassen. Z.B. "mdui-lime-bg", "mdui-black-bg", "mdui-black80-bg" usw. - diese haben eine höhere Priorität als die aus den mdui-config

                  0 Offline
                  0 Offline
                  0018
                  schrieb am zuletzt editiert von 0018
                  #641

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

                  oder du weist deinen cards in den content-Views direkt Farben zu

                  Genau das mache ich ja, aber wie schaffe ich es das bei hellem content Hintergrund die cards die Backgorundfarbe des mdui-dark nehmen?

                  bluegrey.png

                  Hier in meinem Beispiel habe ich die contentfarbe in der mdui-config angepasst. Beide cards haben den mdui-bluegrey-bg. ich hätte aber gerne bei einem hellen content Hintergrund die card mit dem dunklen mdui-blue-bg.

                  Wie bzw. wo muss ich das einstellen?

                  Mfg
                  0018

                  1 Antwort Letzte Antwort
                  0
                  • W webseb79

                    @Uhula
                    benutze dein Projekt schon eine Weile und bin begeistert von deiner Arbeit und deinem Wissen.
                    MeinProblem was ich habe ist das Input Widget.
                    Egal ob String angehakt oder nicht gibt es immer ein String zurück anstatt Number.
                    Kann man mit CSS oder Skript in Vis das Input auf Typ Number festnageln?

                    Danke im Voraus

                    Gruß Sebastian

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

                    @webseb79 vis rendert immer type="text". Mit MD CSS v2.1 kannst du das übersteuern, in dem du de, Widget explizit "mdui-input mdui-input-number" zuweist. Ich patche dann "text" gegen "number" beim Wechsel einer page in das HTML-input.

                    @0018 Das geht nicht, die Farb-Zuweisungen an die cards sind immer stärker als die dahinter liegende content-Farbe. Eine Lösung für dich wäre, wenn du die Farben der cards nicht direkt zuweist, sondern über ein vis-Binding und via vis-State die Farbe setzt.
                    Bsp: Statt "mdui-bluegrey-bg" den cards "{vis.0.my_card_bg}" zuweisen. Und dann dafür sorgen, dass im State "vis.0.my_card_bg" dann entweder "mdui-bluegrey-bg" oder eben ""mdui-blue-bg" gesetzt wird.

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

                    1 Antwort Letzte Antwort
                    0
                    • P Pittini

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

                      Wie muss denn die URL aussehen bzw. wie erstelle ich so eine URL?

                      Hier mal ein Beispiel:
                      So kommt das direkt aus Grafana, via Share > Link:

                      2020-02-18 18_15_21-Window.png

                      http://192.168.2.15:3000/d/_m6IgtAWk/energieverbrauch?orgId=1&refresh=1m&from=1581872899807&to=1582045699807&panelId=2&fullscreen

                      Daraus mache ich dann:
                      http://192.168.2.15:3000/d/_m6IgtAWk/energieverbrauch?orgId=1&refresh=1m&from=1581164832158&to=1581337632158&panelId=2&fullscreen&kiosk&theme=dark

                      Und so funktionierten die Controls dann bei mir auch.

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

                      @Pittini oh sorry hab Deinen Post wohl übersehen. Danke für den Tipp. Der Link war der richtige hab übersehen, dass die Bedienelemente ein Target haben. 🙈

                      1 Antwort Letzte Antwort
                      0
                      • UhulaU Uhula

                        @der-eine Wenn du deine Grafana iFrames in der Zeitachse direkt steuern möchtest, schau dir mal das Beispiel in MD_Demo (Bedienung>Skalieren) an, dort mache ich das über ein Popupmenu, refresh dito. Allerdings muss die Grafana URL einen besonderen Aufbau haben (from / to).

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

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

                        @der-eine Wenn du deine Grafana iFrames in der Zeitachse direkt steuern möchtest, schau dir mal das Beispiel in MD_Demo (Bedienung>Skalieren) an, dort mache ich das über ein Popupmenu, refresh dito. Allerdings muss die Grafana URL einen besonderen Aufbau haben (from / to).

                        Danke. Hab es hinbekommen. 👍🏻
                        Die lnav sollte doch eigentlich nach betätigen eines Reiters wieder einklappen oder? Rufe sie oben über das Burgermenü auf aber sie klappt nicht mehr ein wenn ich was anklicke. Ist das auch eine Option?

                        UhulaU 1 Antwort Letzte Antwort
                        0
                        • D der-eine

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

                          @der-eine Wenn du deine Grafana iFrames in der Zeitachse direkt steuern möchtest, schau dir mal das Beispiel in MD_Demo (Bedienung>Skalieren) an, dort mache ich das über ein Popupmenu, refresh dito. Allerdings muss die Grafana URL einen besonderen Aufbau haben (from / to).

                          Danke. Hab es hinbekommen. 👍🏻
                          Die lnav sollte doch eigentlich nach betätigen eines Reiters wieder einklappen oder? Rufe sie oben über das Burgermenü auf aber sie klappt nicht mehr ein wenn ich was anklicke. Ist das auch eine Option?

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

                          @der-eine Jein. Wenn du in einen freien lnav Bereich klickst, dann ja. Klickst du ne Schaltfläche, dann nicht, da der Klick nicht bubbelt. IdR wird aber eine neue page geladen, so dass es nicht auffällt. Anders, wenn sich nur ein Popup/Dialog öffnet, dann bleibt lnav (leider) geöffnet.

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

                          D 1 Antwort Letzte Antwort
                          0
                          • UhulaU Uhula

                            @der-eine Jein. Wenn du in einen freien lnav Bereich klickst, dann ja. Klickst du ne Schaltfläche, dann nicht, da der Klick nicht bubbelt. IdR wird aber eine neue page geladen, so dass es nicht auffällt. Anders, wenn sich nur ein Popup/Dialog öffnet, dann bleibt lnav (leider) geöffnet.

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

                            @Uhula das stimmt, dass eine neue Seite geladen wird aber leider ist die lnav am iPhone mehr als die Hälfte der Breite des Displays groß und daher wäre es schon gut wenn sie wieder zugehen würde. Wenn’s natürlich keine Möglichkeit gibt, dann hilfst eh nichts.

                            1 Antwort Letzte Antwort
                            0
                            • S Offline
                              S Offline
                              SMARTY.ML
                              schrieb am zuletzt editiert von
                              #647

                              Ich habe eine Frage zu den Status Anzeigen. Hier werden Variablen 0-12 abgefragt und dementsprechend die HTML nach Zeile ausgewählt. Gibt es auch eine Möglichkeit direkt true/fals als Status abzugreifen? Bsp. simples Licht An/Aus

                              Dominik F.D 1 Antwort Letzte Antwort
                              0
                              • S SMARTY.ML

                                Ich habe eine Frage zu den Status Anzeigen. Hier werden Variablen 0-12 abgefragt und dementsprechend die HTML nach Zeile ausgewählt. Gibt es auch eine Möglichkeit direkt true/fals als Status abzugreifen? Bsp. simples Licht An/Aus

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

                                @SMARTY-ML

                                über das Bool HTML Widget. Ob es auch anders geht weiß ich nicht. Hier ein Beispiel aus meiner Vis:

                                [{"tpl":"tplValueBool","data":{"oid":"radar2.0.Handy_Dominik","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","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_false":"<i class=\"material-icons mdui-red\">close</i>","html_append":"","html_true":"<i class=\"material-icons mdui-green\">check</i>;","class":"mdui-state"},"style":{"left":"calc(40% - 12px)","top":"69px","width":"24px","height":"24px"},"widgetSet":"basic"}]
                                
                                1 Antwort Letzte Antwort
                                0
                                • UhulaU Offline
                                  UhulaU Offline
                                  Uhula
                                  schrieb am zuletzt editiert von Uhula
                                  #649

                                  CLOSED

                                  Bitte im Material Design CSS v2 Thema weitere Fragen stellen, diskutieren und ANregungen posten.

                                  Danke

                                  -> Moderatoren: Wie kann man eigene Themen schließen?

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

                                  NegaleinN 1 Antwort Letzte Antwort
                                  0
                                  • UhulaU Uhula

                                    CLOSED

                                    Bitte im Material Design CSS v2 Thema weitere Fragen stellen, diskutieren und ANregungen posten.

                                    Danke

                                    -> Moderatoren: Wie kann man eigene Themen schließen?

                                    NegaleinN Offline
                                    NegaleinN Offline
                                    Negalein
                                    Global Moderator
                                    schrieb am zuletzt editiert von
                                    #650

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

                                    Moderatoren: Wie kann man eigene Themen schließen?

                                    Ich hab ihn soeben geschlossen.
                                    User können das nicht.

                                    ° Node.js: 20.17.0 NPM: 10.8.2
                                    ° Proxmox, Ubuntu 22.04.3 LTS
                                    ° Fixer ---> iob fix

                                    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

                                    898

                                    Online

                                    32.4k

                                    Benutzer

                                    81.5k

                                    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