Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

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

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.1k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    936

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

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

Scheduled Pinned Locked Moved Visualisierung
650 Posts 111 Posters 231.1k Views 68 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • 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
    wrote on last edited by
    #638

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

    1 Reply Last reply
    0
    • W Offline
      W Offline
      webseb79
      wrote on last edited by
      #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 Replies Last reply
      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
        wrote on last edited by 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 Reply Last reply
        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
          wrote on last edited by 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 Reply Last reply
          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
            wrote on last edited by
            #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 Reply Last reply
            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
              wrote on last edited by
              #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 Reply Last reply
              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
                wrote on last edited by
                #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 Reply Last reply
                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
                  wrote on last edited by
                  #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 Reply Last reply
                  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
                    wrote on last edited by
                    #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 Reply Last reply
                    0
                    • S Offline
                      S Offline
                      SMARTY.ML
                      wrote on last edited by
                      #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 Reply Last reply
                      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.
                        wrote on last edited by 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 Reply Last reply
                        0
                        • UhulaU Offline
                          UhulaU Offline
                          Uhula
                          wrote on last edited by 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 Reply Last reply
                          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
                            wrote on last edited by
                            #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 & System Update ---> sudo apt update, iob stop, sudo apt full-upgrade
                            ° Node.js Fixer ---> iob nodejs-update
                            ° Fixer ---> iob fix

                            1 Reply Last reply
                            0
                            Reply
                            • Reply as topic
                            Log in to reply
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes


                            Support us

                            ioBroker
                            Community Adapters
                            Donate

                            319

                            Online

                            32.6k

                            Users

                            82.2k

                            Topics

                            1.3m

                            Posts
                            Community
                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                            ioBroker Community 2014-2025
                            logo
                            • Login

                            • Don't have an account? Register

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Home
                            • Recent
                            • Tags
                            • Unread 0
                            • Categories
                            • Unreplied
                            • Popular
                            • GitHub
                            • Docu
                            • Hilfe