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

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 220.7k 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.
  • O Offline
    O Offline
    ok1
    schrieb am zuletzt editiert von
    #105

    @ok1:

    Zum anderen gibt es noch einen Darstellungsfehler auf dem Tablet unter Android Chrome (die Darstellung auf dem Desktop Chrome ist ok). Der erste Aufruf des Dialogs funktioniert wie erwartet. Schließt man den Dialog über "Close" und öffnet den Dialog erneut, dann erscheint der Content nur zum Teil und ist nach oben verschoben. Über die Wisch-Geste kann man den Content dann nach unten ziehen. Es scheint auf dem Tablet eine Fehlberechnung des Content-Bereichs beim 2. Aufruf zu geben zu geben. Zudem ändert der "Close"-Button beim 2. Aufruf seine Farbe. `
    Den Darstellungsfehler konnte ich fixen. Es lag in einem Missverständnis über das Setzen der Auflösung unter "Tools" im VIS-Editor. Nachdem ich für den darzustellenden View im Dialog die Auflösung von Tablet-Auflösung auf "nicht definiert" gesetzt habe funktioniert die Dialog-Darstellung einwandfrei.

    Es bleibt damit noch das Problem der nicht übereinander liegenden, gestackten Dialoge.

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

      @ok1:

      Es bleibt damit noch das Problem der nicht übereinander liegenden, gestackten Dialoge. `
      Das Dialog-Stacking schau ich mir mal an. jquery-UI kann es eigentlich. Ob aber vis es auch unterstützt, werde ich mal untersuchen.

      Alternativ kannst du aber versuchen auf das Dialog-Stacking zu verzichten in dem du auf deinem Main-Screen die Schaltfläche nicht wie bisher zum Öffnen des Konfigurationsdialogs und von dort aus weiter zur Graphanzeige designst, sondern die Schaltfläche im Main-Screen lediglich ein Kontextmenü öffnet, mit den beiden Einträgen "Konfiguration" und "Verlauf" (Kontextmenü wie es im Material Design für die FLOT Anpassung verwendet wird). Oder eben im Main-Screen zwei Schaltflächen.

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

      1 Antwort Letzte Antwort
      0
      • E Offline
        E Offline
        ErazorVIP
        schrieb am zuletzt editiert von
        #107

        Hallo,

        ich hätte nochmal eine Frage bezüglich der CSS Klasse.

        Ich habe jetzt ein Image hinzugefügt mit 2 Systembildern…

        Jetzt möchte ich gerne "mdui-red-blink" verwenden.. Das soll aber nur bei Systembild 2 passieren.

        Hat jemand eine Idee wie ich das am besten umsetzen kann?

        Wenn ich "mdui-red-blink" bei Generell und CSS Klasse eintrage habe ich ja das Ergebnis bei beiden Bildern. :?: :?:

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

          @ErazorVIP:

          Hallo,

          ich hätte nochmal eine Frage bezüglich der CSS Klasse.

          Ich habe jetzt ein Image hinzugefügt mit 2 Systembildern…

          Jetzt möchte ich gerne "mdui-red-blink" verwenden.. Das soll aber nur bei Systembild 2 passieren.

          Hat jemand eine Idee wie ich das am besten umsetzen kann?

          Wenn ich "mdui-red-blink" bei Generell und CSS Klasse eintrage habe ich ja das Ergebnis bei beiden Bildern. :?: :?: ` Du musst das unter den Reiter widget eintragen und nicht bei view. Dann geht es

          Gesendet von meinem Handy

          1 Antwort Letzte Antwort
          0
          • E Offline
            E Offline
            ErazorVIP
            schrieb am zuletzt editiert von
            #109

            @Meistertr:

            @ErazorVIP:

            Hallo,

            ich hätte nochmal eine Frage bezüglich der CSS Klasse.

            Ich habe jetzt ein Image hinzugefügt mit 2 Systembildern…

            Jetzt möchte ich gerne "mdui-red-blink" verwenden.. Das soll aber nur bei Systembild 2 passieren.

            Hat jemand eine Idee wie ich das am besten umsetzen kann?

            Wenn ich "mdui-red-blink" bei Generell und CSS Klasse eintrage habe ich ja das Ergebnis bei beiden Bildern. :?: :?: ` Du musst das unter den Reiter widget eintragen und nicht bei view. Dann geht es

            Gesendet von meinem Handy `

            Ja das habe ich unter Widget eingetragen:

            ~~![](</s><URL url=)http://up.picr.de/30746075bk.png" />

            ~~![](</s><URL url=)http://up.picr.de/30746076ix.png" />

            Das Problem ist halt nur ich möchte es nur bei ein Systembild haben wenn der Signalzustand auf true springt z.B.!~~~~

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

              @ErazorVIP:

              Das Problem ist halt nur ich möchte es nur bei ein Systembild haben wenn der Signalzustand auf true springt z.B.! `
              CSS Klassen, die nur für die Signalbilder gelten sollen, sind dort unter der Eigenschaft "Klassen[x]" einzugeben. Z.B. "Klassen[0]" = "mdui-red-blink"

              Damit blinkt dann das Signalbild, nicht das Widget! Letzteres ist auch via CSS-Klassen nicht erreichbar, da die Signale eigene HTML-Elemente auf gleicher Ebene wie das Widget selbst sind.

              Eine Lösung, wo das Widget selbst den Blink-Style annimmt, wäre folgende: Du legst über dein Widget eine identische Kopie, setzt dort als CSS-Klasse für das Widget "mdui-red-blink" und unter "Sichtbarkeit" setzt du die Eigenschaft so, dass dieses Widget nur sichtbar ist, wenn dein gewünschter State gesetzt ist.

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

              1 Antwort Letzte Antwort
              0
              • S Offline
                S Offline
                speedy78
                schrieb am zuletzt editiert von
                #111

                Also erstmal vielen dank für diese Arbeit. Sieht sehr gut aus.

                Jetzt habe ich nur eine Frage wie fange ich am besten an mit dem VIS Editor umzugehen. Hat jemand vielleicht eine Anleitung damit man mal richtig darein kommt um dann das hier besser umsetzen zu können.

                Vielen dank im voraus.

                ( Neuling )

                1 Antwort Letzte Antwort
                0
                • E Offline
                  E Offline
                  ErazorVIP
                  schrieb am zuletzt editiert von
                  #112

                  @Uhula:

                  @ErazorVIP:

                  Das Problem ist halt nur ich möchte es nur bei ein Systembild haben wenn der Signalzustand auf true springt z.B.! `
                  CSS Klassen, die nur für die Signalbilder gelten sollen, sind dort unter der Eigenschaft "Klassen[x]" einzugeben. Z.B. "Klassen[0]" = "mdui-red-blink"

                  Damit blinkt dann das Signalbild, nicht das Widget! Letzteres ist auch via CSS-Klassen nicht erreichbar, da die Signale eigene HTML-Elemente auf gleicher Ebene wie das Widget selbst sind.

                  Eine Lösung, wo das Widget selbst den Blink-Style annimmt, wäre folgende: Du legst über dein Widget eine identische Kopie, setzt dort als CSS-Klasse für das Widget "mdui-red-blink" und unter "Sichtbarkeit" setzt du die Eigenschaft so, dass dieses Widget nur sichtbar ist, wenn dein gewünschter State gesetzt ist. ` Danke, coole Projekt [emoji3]

                  Gesendet von meinem SM-G935F mit Tapatalk

                  1 Antwort Letzte Antwort
                  0
                  • O Offline
                    O Offline
                    ok1
                    schrieb am zuletzt editiert von
                    #113

                    @Uhula:

                    @ok1:

                    Es bleibt damit noch das Problem der nicht übereinander liegenden, gestackten Dialoge. `
                    Das Dialog-Stacking schau ich mir mal an. jquery-UI kann es eigentlich. Ob aber vis es auch unterstützt, werde ich mal untersuchen.

                    . `
                    Hallo Uhula,

                    ich möchte kurz nachfragen, ob Du bereits nach dem Dialog-Stacking schauen konntest.

                    Wenn man die Dialog-Boxen als "nicht modal" öffnet, dann lassen sich die beiden übereinander liegenden Dialoge mit Click auf den jeweiligen Dialog nach vorne holen.

                    Was mir bislang nicht gelungen ist, ist dieses beim Öffnen eines neuen Dialogs über das MD-Script und Javascript- bzw. JQuery-Funktionen zu automatisieren. Es klemmt beim Selektieren der gesamten Box incl. Inhalt und der MoveToTop-Funktion von JQuery beim dialogopen-Event von JQuery. Für jede Hilfe bin ich dankbar !

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

                      Insperiert von uhula Arbeite ich mich wie schon gesagt nun auch immer tiefer in css ein hier mal ein kleiner Vorgeschmack, falls jemand Interesse hat, kann ich es gerne (nach Fertigstellung) zur Verfügung stellen.

                      Eine Frage hab ich dies bezüglich noch:

                      1: wie kann am einfachsten den wert eines Buttons abfragen unter den scripten z.B jqui icon State?

                      2: wie kann ich aus den Reiter scripte heraus ein object in iobroker schalten?
                      1768_2017-10-28_17h42_05.gif

                      1 Antwort Letzte Antwort
                      0
                      • BluefoxB Offline
                        BluefoxB Offline
                        Bluefox
                        schrieb am zuletzt editiert von
                        #115

                        Wäre so was interessant? Aber nicht umsonst :? ca. 10€ ?

                        Es ist GIF. Klick das Bild an.
                        48_pinpad.gif

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

                          @Bluefox:

                          Wäre so was interessant? Aber nicht umsonst :? ca. 10€ ?

                          Es ist GIF. Klick das Bild an. `
                          gefällt mir, aber als Pineingabe für mich nicht interessant, arbeite nun schon fast ein jahr an meiner visu und nun wo ich langsam auch css anfange sehe ich unbegrenzte Möglichkeiten :) Arbeite gerade noch an einem zweiten Pinpad…
                          1768_2017-10-28_19h59_02.gif

                          1 Antwort Letzte Antwort
                          0
                          • BluefoxB Offline
                            BluefoxB Offline
                            Bluefox
                            schrieb am zuletzt editiert von
                            #117

                            @Meistertr:

                            @Bluefox:

                            Wäre so was interessant? Aber nicht umsonst :? ca. 10€ ?

                            Es ist GIF. Klick das Bild an. gefällt mir, aber als Pineingabe für mich nicht interessant, arbeite nun schon fast ein jahr an meiner visu und nun wo ich langsam auch css anfange sehe ich unbegrenzte Möglichkeiten :) Arbeite gerade noch an einem zweiten Pinpad…
                            Kannst du daraus Widgets machen?

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

                              @uhula für meine handyversion finde ich das light theme besser als dark beim ändern des lnav background ist mir aufgefallen, dass die abdunklung des Hintergrundes auch den lnach background beeinflusst, kann ich das irgendwie ändern?

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

                                @Bluefox:

                                @Meistertr:

                                @Bluefox:

                                Wäre so was interessant? Aber nicht umsonst :? ca. 10€ ?

                                Es ist GIF. Klick das Bild an. gefällt mir, aber als Pineingabe für mich nicht interessant, arbeite nun schon fast ein jahr an meiner visu und nun wo ich langsam auch css anfange sehe ich unbegrenzte Möglichkeiten :) Arbeite gerade noch an einem zweiten Pinpad…
                                Kannst du daraus Widgets machen? ` Ich versuch mich mal dran

                                Gesendet von meinem Handy

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

                                  @ok1:

                                  Hallo Uhula, ich möchte kurz nachfragen, ob Du bereits nach dem Dialog-Stacking schauen konntest. `
                                  Nein, leider noch nicht, ich bin ein paar Tage nicht zu Hause, und im Urlaub gehöre ich meiner Frau allein ;-)

                                  @Meistertr:

                                  für meine handyversion finde ich das light theme besser `
                                  Am Anfang hatte ich ein Light-Theme umgesetzt, dann aber verworfen, weil ich hier nur Dark-Themes gesehen habe (Tablets). Fürs Handy ein ein Light-Theme sicher interessant. Kommt auf die ToDo Liste.

                                  @Meistertr:

                                  beim ändern des lnav background ist mir aufgefallen, dass die abdunklung des Hintergrundes auch den lnach background beeinflusst, kann ich das irgendwie ändern? `
                                  lnach? Ich verstehe das Problem leider nicht.

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

                                  1 Antwort Letzte Antwort
                                  0
                                  • F Offline
                                    F Offline
                                    FlyingM
                                    schrieb am zuletzt editiert von
                                    #121

                                    Hallo,

                                    Danke für die Arbeit. HTML & CSS ist nicht gerade meine Welt :D aber es funktioniert so für mich schon ganz gut. Der Backround von meinem Slider sieht nur etwas zu breit aus? Ich kann ich das so schmal machen wie bei dir? Wenn ich die Höhe des Widgets ändere, wird auch der Punkt klein.

                                    VG

                                    Michael
                                    3938_unbenannt.png

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

                                      @FlyingM:

                                      Der Backround von meinem Slider sieht nur etwas zu breit aus? Ich kann ich das so schmal machen wie bei dir? `
                                      Du musst hier mit zwei Widgets arbeiten, eines für den Slider und eines, dahinter, für den Verlaufshintergrund. Letzteres für den Hintergrund ist ein normales basic-HTML Widget, wo du dann die background-Eigenschaft setzt.

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

                                      1 Antwort Letzte Antwort
                                      0
                                      • B Offline
                                        B Offline
                                        Bongo
                                        schrieb am zuletzt editiert von
                                        #123

                                        Danke Uhula, für die tolle Arbeit. Für mich ist das Wichtigste, dass es responsive ist. So muss man die Visualisierung nicht für PC, Tablet und Handy machen muss. Ich habe mein angefangenes Projekt umgeschmissen und mit dem Material Design angefangen.

                                        Ich würde aber gerne aus hqwidgets "Window and Schutter" benutzen. Aber die ganze anzeige wird durch den Container begrenzt:
                                        3400_rolladen1.png
                                        3400_rolladen2.png
                                        Ich habe schon versucht in den Einstellungen des Widgets den Z-Index anzupassen aber das brachte nichts.

                                        Gibt es dafür eine Lösung? Oder muss ich mir was anderes aussuchen?

                                        Was nehmt ihr für den Rolladen?

                                        Gruß
                                        Bongo

                                        Script - Die sprechende Kaffeemaschine – Home Connect
                                        Script - JUDO Wasserenthärtung - Connectivity-Modul API

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

                                          @Uhula:

                                          Was nehmt ihr für den Rolladen? `
                                          Die hq-Widgets wirst du kaum ins Material Design zwingen können, es sei denn, sie haben eigene CSS Klassen, die du anpassen kannst.

                                          Für Blinds (Jalousien) kannst du zb ein "jqui-Radiobuttons Valuelist" Widget verwenden, wenn dir feste Stufen und die Textdarstellung ausreichen.
                                          3336_wz_jalousien.png
                                          Ich persönlich mag die Textdarstellung, da es nie vorkommt, dass ich die Jalousien auf 14% oder 97% absenken möchte. Außerdem kann man die Fixpunkte frei festlegen.

                                          Zur Visualisierung könnte man zusätzlich noch ein "basic bar"-Widget nutzen, siehe das vertikale Beispiel hier: https://iobroker.net:8080/vis/index.htm … moBargraph

                                          Oder alternativ ein "jqui-Slider horizontal" bzw. "jqui-Slider vertical" Widget.

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

                                          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

                                          735

                                          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