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.
  • UhulaU Offline
    UhulaU Offline
    Uhula
    schrieb am zuletzt editiert von
    #154

    @Zeus110577:

    Wieso untypisch? `
    Weil Apps dieses Feature so gut wie nicht nutzen und Google es in seinem MD auch nicht propagiert. MaterializeCSS schon.
    @Zeus110577:

    Ich weiß könnte auch eher in nem iCal Post gehören, aber vielleicht hatte hier schon jemand anderes die Problematik `
    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. Wenn dich das Script interessiert:

    ! ````
    var idCal = "ical.0";
    var idCalTrigger = idCal + ".data.trigger";
    var idCalTable = idCal + ".data.table";
    var idCalHTML = idCal + ".data.html";
    var idCalHTMLtable = idCal + ".html";
    ! createState(idCalHTMLtable, " ");
    ! function iCalToHTMLTable() {
    var html = "

    
    `"; var calTable = getState(idCalTable); var inst = getObject("system.adapter."+idCal); var instopt = inst.native; var calendar = {}; for (var i = 0; i < calTable.val.length; i++) { var entry = calTable.val[i]; if ( entry._calName != calendar.name ) { calendar = {}; for (var c = 0; c < instopt.calendars.length; c++ ) { if (entry._calName == instopt.calendars[c].name ) { calendar = instopt.calendars[c]; break; } } } if (calendar.color !== "") html+="``"; else html+="``"; html+="``" html+="``" html+="``" html+="``"; } html+="`
    
    | Zeit | Text | Kalendar |
    | --- | --- | --- |
    | "+entry.date+" | "+entry.event+" | "+entry._calName+" |
    
    `"; setState(idCalHTMLtable, html); //dump( html ); } on({id: idCalTable, change: "ne"}, function (obj) { iCalToHTMLTable(); }); iCalToHTMLTable();`  ![3336_ical.png](/assets/uploads/files/3336_ical.png) [/i]

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

    1 Antwort Letzte Antwort
    0
    • Z Offline
      Z Offline
      Zeus110577
      schrieb am zuletzt editiert von
      #155

      Super, an genau sowas hab ich gedacht.

      Danke dir

      1 Antwort Letzte Antwort
      0
      • 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
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          702

                                          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