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.6k 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.
  • Q Offline
    Q Offline
    Qlink
    schrieb am zuletzt editiert von
    #156

    Klasse Projekt !

    Weiter so !

    Beste Grüße

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

      Ich bräuchte mal einen Gedankenanstoß oder vielleicht sogar ein Beispiel.

      Mit dem Programm DeviceCounter wurden Datenpunkte zur Übersicht der Gerätestatus erzeugt:
      3400_devicecounter.png
      Als Beispiel für Licht kann ich mit Total und Counter (Anzahl wie viele Lampen an sind) ausgeben. Aber wie zeige ich die Lampennamen an, die in einer Liste mit unterschiedlichen Einträgen vorhanden sind.
      3400_devicecounter2.png
      Ich habe mit vorgestellt, den Counter als „container – Button – view“. Aber ich bekomme den Counter (16) nicht als Button hin.

      Vielleicht hat jemand eine Idee.

      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
        #158

        @Qlink:

        Vielleicht hat jemand eine Idee. `
        Die Namen sollen also nur informtiv angezeigt werden? Du könntest dann ein basic HTML Widget nehmen und den Datenpunkt on_lihgts_Hue.list zuweisen. Die Eigenschaft y-offset des Widgets auf "auto" setzen, damit du im Bedarfsfall scrollen kannst. Als CSS kannst mdui-value zuweisen.

        Wer baut on_lihgts_Hue.list auf? Hast du Einfluss darauf? Wenn ja, kannst du dort mit
        z.B. Zeilenumbrüche einfügen. Sollte das nicht gehen, könntest du dir einen weiteren Datenüunkt anlegen und per Script auf die Änderung von on_lihgts_Hue.list reagieren: Dort dann on_lihgts_Hue.list auslesen und in den neuen Datenpunkt, inkl HTML Formatierung schreiben.

        Oder wie sollen die Namen angezeigt werden?

        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
          #159

          Danke für die Antwort.

          HTML Widget ist klar. Zeilenumbrüche sind schon drin.

          @Uhula:

          Oder wie sollen die Namen angezeigt werden? `

          Es sind ja mehrere Status die angezeigt werden sollen. Um Platz zu sparen sollen die betroffenen Geräte nur angezeigt werden, wenn es welche gibt. Deshalb meine Idee mit einem Button wenn der Counter größer 0 ist. Bei Klick soll sich ein Fenster mit der Liste öffnen. Oder wie bei einem Menü, wie die Liste nach unter "heraus scrollt".

          Aber generell bin ich offen für Ideen. Es soll nur nicht viel Platz verbrauchen.

          Gruß
          Bongo

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

          1 Antwort Letzte Antwort
          0
          • A Offline
            A Offline
            aldoa1
            schrieb am zuletzt editiert von
            #160

            Ich finde nicht, wie ich das Projekt ordentlich importieren kann.

            Wenn ich die simple- oder demo-zip importiere, sehe ich nur die Demoview.

            Wie muss ich vorgehen?

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

              @Bongo:

              Aber generell bin ich offen für Ideen. Es soll nur nicht viel Platz verbrauchen. `
              In dem Fall würde ich

              o eine View cardHueLightsOn erstellen,

              o auf der lediglich ein basic HTML Widget mit dem Text liegt

              o left=0 top=0 width=100% height=100% overflow-y=auto

              diese View wird später in einem modalen Dialog angezeigt.

              In deinem Anzeigeview setzt du ein "jqui Container Button - view in jqui Dialog" Widget mit

              o mdui-flatbutton als CSS zuweisen

              o {deine.variable} als Knopftext

              o Dialog Viewname cardHueLightsOn

              o Abmessungen des Dialogs nach Wunsch

              Dann wird die on-Anzahl in dem Widget angezeigt und beim Klick/Tap öffnet sich ein Dialog mit den Details.

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

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

                @aldoa1:

                Ich finde nicht, wie ich das Projekt ordentlich importieren kann. Wenn ich die simple- oder demo-zip importiere, sehe ich nur die Demoview. Wie muss ich vorgehen? `
                Im Vis "Setup | Projektexport/-import | Import" aufrufen, danach die ZIP Datei MD_Demo.zip angeben und als MD_Demo importieren. Mit MD_simple wiederholen. Anschließend sollten beide Projekte im Vis unter "Setup | Projekte" vorhanden sein. Bei mir läuft Vis Version 1.0.4.

                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
                  #163

                  @Uhula:

                  In dem Fall würde ich

                  o eine View cardHueLightsOn erstellen,

                  o auf der lediglich ein basic HTML Widget mit dem Text liegt

                  o left=0 top=0 width=100% height=100% overflow-y=auto

                  diese View wird später in einem modalen Dialog angezeigt.

                  In deinem Anzeigeview setzt du ein "jqui Container Button - view in jqui Dialog" Widget mit

                  o mdui-flatbutton als CSS zuweisen

                  o {deine.variable} als Knopftext

                  o Dialog Viewname cardHueLightsOn

                  o Abmessungen des Dialogs nach Wunsch

                  Dann wird die on-Anzahl in dem Widget angezeigt und beim Klick/Tap öffnet sich ein Dialog mit den Details. `

                  Genauso habe ich es mir vorgestellt. Super, Danke.

                  Mein Problem war, dass ich nicht wusste, dass man {variablen} in Text- und HTML-Feldern setzen kann.

                  Nur noch eine Kleinigkeit. Wie kann ich den Text eines raisedbutton in die Mitte der Zeile bringen?
                  3400_devicecounter04.png

                  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
                    #164

                    Ein vertikales Zentrieren gibt es im CSS so nicht, du kannst es über die Lineheight (Font) Eigenschaft versuchen, alternativ eine eigene CSS Klasse und der CSS Eigenschaft zuweisen.

                    Bsp:

                    .mdui-center-vertical {

                    display:flex;

                    justify-content: center;

                    align-items: center;

                    }

                    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
                      #165

                      @Uhula:

                      Ein vertikales Zentrieren gibt es im CSS so nicht, du kannst es über die Lineheight (Font) Eigenschaft versuchen, alternativ eine eigene CSS Klasse und der CSS Eigenschaft zuweisen.

                      Bsp:

                      .mdui-center-vertical {

                      display:flex;

                      justify-content: center;

                      align-items: center;

                      } `
                      Das hat leider keine Änderung gebracht.

                      Was aber eine Änderung gebracht hat ist, dass ich statt „container – Button – view“ das „container – Icon– view“ genommen habe. Dabei aber kein Icon ausgewählt habe sondern die Variable in das Text-Feld geschrieben habe. Jetzt sieht es so aus wie ich es mir vorgestellt habe:
                      3400_devicecounter05.png

                      Gruß
                      Bongo

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

                      1 Antwort Letzte Antwort
                      0
                      • S Offline
                        S Offline
                        Sven2013
                        schrieb am zuletzt editiert von
                        #166

                        Hallo Uhula,

                        so langsam klappt es mit dem einfuchsen in dein Design. Hier habe ich noch eine Frage:

                        ` > Ich reagiere auf die Änderungen der JSON-Table des iCal und erzeuge daraus dann einen neuen Datenpunkt, der meine Struktur enthält. Diese wird dann im MD als Tabelle dargstellt. Kalenderfarben werden als schmaler linker Streifen übernommen.

                        Ich habe mit deinem Script ein java.Script erstellt, das mir nun den Datenpunkt mit der Tabelle richtig ausgibt. Aber wie bekomme ich den Datenpunkt unter dem bsic-html widget eingetragen? mein Datenpunkt heißt: javascript.0.ical.0.html

                        ein <javascript.0.ical.0.html>geht leider nicht…

                        Danke Gruß Sven</javascript.0.ical.0.html> `

                        1 Antwort Letzte Antwort
                        0
                        • ruhr70R Offline
                          ruhr70R Offline
                          ruhr70
                          schrieb am zuletzt editiert von
                          #167

                          @Sven2013:

                          ein <javascript.0.ical.0.html>geht leider nicht…</javascript.0.ical.0.html> `

                          Hast Du mal {javascript.0.ical.0.html} probiert?

                          Adapter: Fritzbox, Unify Circuit
                          Skripte: dynamic hue, Bluetooth Scan, Multi-Ereignisliste

                          1 Antwort Letzte Antwort
                          0
                          • S Offline
                            S Offline
                            Sven2013
                            schrieb am zuletzt editiert von
                            #168

                            Hast Du mal {javascript.0.ical.0.html} probiert?

                            Ja habe ich, aber dann steht im Widget einfach nur: {javascript.0.ical.0.html}

                            kein Inhalt. Obwohl der Datenpunkt mit Inhalten gefüllt ist.

                            Gruß Sven

                            1 Antwort Letzte Antwort
                            0
                            • S Offline
                              S Offline
                              Sven2013
                              schrieb am zuletzt editiert von
                              #169

                              Nehme alles zurück, in der View Ansicht steht dann alles. Es ist nur im Edit nicht zu sehen.

                              Danke

                              Gruß Sven

                              1 Antwort Letzte Antwort
                              0
                              • S Offline
                                S Offline
                                Sven2013
                                schrieb am zuletzt editiert von
                                #170

                                Ein frohes neues Jahr und viele tolle Projekte für 2018…

                                ich versuche card views zu löschen, doch dies gelingt mir einfach nicht. Mein Vorgehen ist im edit Modus auf View und dann auf den "Mülleimer"! Dann kommt die Frage View löschen? Dieses bestätige ich mit "ja"! Und dann ist der View immer noch da.

                                Was mache ich falsch? Oder kann ich Views auch aus dem Speicherordner löschen?

                                Gruß Sven

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

                                  @ruhr70:

                                  Echt klasse. Mit dem MD Projekt hat man wieder was zu tun ;-)

                                  Eine Kleinigkeit ist mir aufgefallen.

                                  Unter iOS (sowohl auf dem iPhone, als auch auf dem iPad) öffnet sich der rechte Bereich nicht nach links in den Content, sondern wird rechts angehangen.

                                  Das sieht erst einmal so aus, als ob sich gar nichts öffnet. Wenn man dann mit dem Finger nach links wischt, sieht man auch den Bereich.

                                  Auf allen anderen Geräten funktioniert es wunderbar:

                                  2017-12-10 simple md.png

                                  Ich bin begeistert! `

                                  sieht so toll aus! Bin auch total begeistert!

                                  Darf für FB offizielle Seite als Vis Beispiel verwenden???

                                  1 Antwort Letzte Antwort
                                  0
                                  • ruhr70R Offline
                                    ruhr70R Offline
                                    ruhr70
                                    schrieb am zuletzt editiert von
                                    #172

                                    @Bluefox:

                                    Darf für FB offizielle Seite als Vis Beispiel verwenden??? `

                                    Falls Du mein Beispiel meintest…. alles was im Forum von mir ist kann frei verwendet werden.

                                    Was mich an dem Material Design CSS reizt sind besonders zwei Punkte:

                                    1.) Karten können flexibel angezeigt werden

                                    2.) Ein Projekt kann auf allen Geräten angezeigt werden.

                                    Die überladenden Karten für mich sind OK, da ich die Karten nur einblende, wenn sie auch etwas "zu sagen haben".

                                    D.h. im "Normalfall" werden nur die Uhrzeit und das Wetter eingeblendet.

                                    Alle anderen Karten werden Situationsbedingt eingeblendet.

                                    Die Anzeige läuft als Info auf den Tablets 24h und in Browser Tabs.

                                    Im Beispiel hier gibt es zum STandard (uhrzeit und Wetter) noch aktuelle Meldungen zum Unwetter:
                                    327_2018-01-03_material_status.png

                                    Diese Karten werden nicht angzeigt und nur bei Bedarf automatisch eingeblendet:
                                    327_2018-01-03_material_nicht_angezeigt.png

                                    Übersicht VIS über bisher definierte Karten für die Statusseite:
                                    327_2018-01-03_material_vis.png

                                    Adapter: Fritzbox, Unify Circuit
                                    Skripte: dynamic hue, Bluetooth Scan, Multi-Ereignisliste

                                    1 Antwort Letzte Antwort
                                    0
                                    • D Offline
                                      D Offline
                                      DKM
                                      schrieb am zuletzt editiert von
                                      #173

                                      Zu iCal

                                      Danke für deinen Code mit der Formatierung, hat mir echt weitergeholfen. Leider habe ich von CSS keinen Plan, daher auch nur ne kurze Frage:

                                      Kann man mit deinem Code auch den heutigen Termin in rot und andere Termine in den nächsten drei Tagen in orange färben?

                                      Grüße aus BY

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

                                        @DKM:

                                        Kann man mit deinem Code auch den heutigen Termin in rot und andere Termine in den nächsten drei Tagen in orange färben? `
                                        Kann man. Hintergrund- oder Schriftfarbe? Alle Zellen oder nur eine bestimmte?

                                        Wenn die ganze Zeile betroffen sein soll, dann ist in der Anweisung die Formatierung zu ergänzen, sonst in der gewünschten Anweisung.

                                        Bsp:

                                        Mit wird zB die ganze Zeile rot hinterlegt.

                                        Mit wird zB die Schriftfarbe für die Zeile rot.

                                        Mit wird zB die Zelle rot hinterlegt.

                                        Mit wird zB die Schriftfarbe für die Zelle rot.

                                        Wenn es nur für heute/morgen gelten soll, musst du via Script das entry.date entsprechend abfragen und die oben genannten Formatanweisungen nur dann setzen.

                                        @ruhr70:

                                        Übersicht VIS über bisher definierte Karten für die Statusseite: `
                                        Fleißig!

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

                                        1 Antwort Letzte Antwort
                                        0
                                        • D Offline
                                          D Offline
                                          DKM
                                          schrieb am zuletzt editiert von
                                          #175

                                          @Uhula:

                                          @DKM:

                                          Kann man mit deinem Code auch den heutigen Termin in rot und andere Termine in den nächsten drei Tagen in orange färben? `
                                          Kann man. Hintergrund- oder Schriftfarbe? Alle Zellen oder nur eine bestimmte?

                                          Wenn die ganze Zeile betroffen sein soll, dann ist in der Anweisung die Formatierung zu ergänzen, sonst in der gewünschten Anweisung.

                                          Bsp:

                                          Mit wird zB die ganze Zeile rot hinterlegt.

                                          Mit wird zB die Schriftfarbe für die Zeile rot.

                                          Mit wird zB die Zelle rot hinterlegt.

                                          Mit wird zB die Schriftfarbe für die Zelle rot.

                                          Wenn es nur für heute/morgen gelten soll, musst du via Script das entry.date entsprechend abfragen und die oben genannten Formatanweisungen nur dann setzen. `

                                          Danke für den Tip,

                                          ich habe mir bereits eine Funktion zusammenkopiert, welche aus 'new Date()' das Datum in DD.MM.YYYY anzeigt. Da ja Heute, Morgen und Übermorgen als Text dargestellt werden, habe ich versucht es mir leicht zu machen und folgende if-Abfrage geschrieben:

                                          if (entry.date.toString() === "Heute")
                                          

                                          Doch diese wird immer mit False beantwortet. Wie schon gesagt, bin ich totaler Anfänger was JS angeht. Vielleicht könntest Du mir dort auch nochmal auf die Sprünge helfen. Ich vermute es liegt daran, dass entry.date ein Objekt ist (daher auch das .toString() ). Wenn ich den entry.date so abfrage (console.log usw.) wird mir Heute angezeigt :S

                                          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

                                          716

                                          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