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] MDCSS v2: Material Design CSS Version 2

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.5k

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

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uivismaterial css
717 Beiträge 74 Kommentatoren 178.4k Aufrufe 77 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 Uhula

    @der-eine Das Script für die ioBroker Log ist schon da: [Vorlage] MDCSS v2: ioBroker Log in vis anzeigen - viel Erfolg!

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

    @Uhula danke für den Hinweis. Werd ich morgen mal implementieren. :grinning:

    Habe es heute in meinen iobroker und VIS eingesetzt. Leider bekomme ich weder beim LogTR064 noch bei den Logfiles Daten in den Datenpunkten. VIS-View auch so eingefügt aber keine Anzeige. Hab ich was übersehen zu konfigurieren? Konnte in der Doku im Skript noch im Wiki was finden.

    BastelritiusB D 2 Antworten Letzte Antwort
    0
    • D der-eine

      @Uhula danke für den Hinweis. Werd ich morgen mal implementieren. :grinning:

      Habe es heute in meinen iobroker und VIS eingesetzt. Leider bekomme ich weder beim LogTR064 noch bei den Logfiles Daten in den Datenpunkten. VIS-View auch so eingefügt aber keine Anzeige. Hab ich was übersehen zu konfigurieren? Konnte in der Doku im Skript noch im Wiki was finden.

      BastelritiusB Offline
      BastelritiusB Offline
      Bastelritius
      schrieb am zuletzt editiert von
      #172

      Hallo,

      gibt es eine Möglichkeit andere Icons zu verwenden als die Material icons?
      Ich möchte gern die mfd Icons (png oder svg) verwenden.
      Ich habe den Knopftext von "<i class="material-icons">looks_4</i>" in " <img src=http://localhost:8082/icons-mfd-png/vent_ventilation.png width=40> geändert. Das funktioniert soweit auch, aber die icons sind nun weiß. Ich möchte sie gern schwarz haben?

      Danke

      UhulaU 1 Antwort Letzte Antwort
      0
      • D der-eine

        @Uhula danke für den Hinweis. Werd ich morgen mal implementieren. :grinning:

        Habe es heute in meinen iobroker und VIS eingesetzt. Leider bekomme ich weder beim LogTR064 noch bei den Logfiles Daten in den Datenpunkten. VIS-View auch so eingefügt aber keine Anzeige. Hab ich was übersehen zu konfigurieren? Konnte in der Doku im Skript noch im Wiki was finden.

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

        @der-eine sagte in [Projekt] Material Design CSS v2:

        @Uhula danke für den Hinweis. Werd ich morgen mal implementieren. :grinning:

        Edit:

        Habe es heute in meinen iobroker und VIS eingesetzt. Leider bekomme ich weder beim LogTR064 noch bei den Logfiles Daten in den Datenpunkten. VIS-View auch so eingefügt aber keine Anzeige. Hab ich was übersehen zu konfigurieren? Konnte in der Doku im Skript noch im Wiki was finden.

        UhulaU 1 Antwort Letzte Antwort
        0
        • BastelritiusB Bastelritius

          Hallo,

          gibt es eine Möglichkeit andere Icons zu verwenden als die Material icons?
          Ich möchte gern die mfd Icons (png oder svg) verwenden.
          Ich habe den Knopftext von "<i class="material-icons">looks_4</i>" in " <img src=http://localhost:8082/icons-mfd-png/vent_ventilation.png width=40> geändert. Das funktioniert soweit auch, aber die icons sind nun weiß. Ich möchte sie gern schwarz haben?

          Danke

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

          @Bastelritius PNGs lassen sich in der Farbgestaltung durch CSS nicht beeinflussen, wenn du schwarze PNGs haben möchtest, müssen diese im Original bereits schwarz sein.
          Bei der Nutzung der "materila-icons" ist das anders, weil es sich dort nicht um Bilddaten, sondern um einen Font (praktisch "Buchstaben") handelt, der ist durch CSS manipulierbar.

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

          1 Antwort Letzte Antwort
          0
          • D der-eine

            @der-eine sagte in [Projekt] Material Design CSS v2:

            @Uhula danke für den Hinweis. Werd ich morgen mal implementieren. :grinning:

            Edit:

            Habe es heute in meinen iobroker und VIS eingesetzt. Leider bekomme ich weder beim LogTR064 noch bei den Logfiles Daten in den Datenpunkten. VIS-View auch so eingefügt aber keine Anzeige. Hab ich was übersehen zu konfigurieren? Konnte in der Doku im Skript noch im Wiki was finden.

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

            @der-eine Nein, es sind eigentlich keine Konfigurationen notwendig. Welche Einträge erscheinen denn im ioBroker Log wenn du die serverseitigen Scripte startest?
            Du hast eine aktuelle ioBroker Inst? Die "0_userdata.0"-States gibt es im ioBroker noch nicht so lange, glaube erst seit Okt 2019. Version habe ich im Mom nicht zur Hand.

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

            D 1 Antwort Letzte Antwort
            0
            • mickymM mickym

              Nur zur Info:

              Ich weiß nicht, ob das schon mal wo erwähnt wurde - die Shapes funktionieren nicht unter IOS - egal welchen Browser man nimmt (Edge, Chrome oder Safari).
              Ich habs auf einem iPhone und iPad probiert. Wahrscheinlich eine Inkompatibilität von IOS.
              Unter Windows 10 ist alles gut. :)

              IMG_0007.PNG

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

              @mickym iOS ist böse, leider kann ich das nicht testen, da ich komplett apple-free bin ;-) Auf der anderen Seite ist auch der Safari webkit-basiert, wie Chrome.

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

              1 Antwort Letzte Antwort
              0
              • UhulaU Uhula

                @der-eine Nein, es sind eigentlich keine Konfigurationen notwendig. Welche Einträge erscheinen denn im ioBroker Log wenn du die serverseitigen Scripte startest?
                Du hast eine aktuelle ioBroker Inst? Die "0_userdata.0"-States gibt es im ioBroker noch nicht so lange, glaube erst seit Okt 2019. Version habe ich im Mom nicht zur Hand.

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

                @Uhula iobroker 3.7.8;
                0_userdata.0 habe ich in Objekten.
                Diese Meldungen kommen

                Bildschirmfoto 2020-03-11 um 15.42.56.png

                P UhulaU 2 Antworten Letzte Antwort
                0
                • D der-eine

                  @Uhula iobroker 3.7.8;
                  0_userdata.0 habe ich in Objekten.
                  Diese Meldungen kommen

                  Bildschirmfoto 2020-03-11 um 15.42.56.png

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

                  @der-eine sagte in [Projekt] Material Design CSS v2:

                  Diese Meldungen kommen

                  Evtl hilfreich - onLog() ist erst ab Javascript 4.3.0 verfügbar.:

                  https://forum.iobroker.net/topic/28098/javascript-findet-onlog-nicht/3?fbclid=IwAR3HZdwCw6qLP8RBOtt1VrpQlivYgpT3Vpyh4hNpMRXBGLuaL_Ul_qZd-cg

                  1 Antwort Letzte Antwort
                  0
                  • D der-eine

                    @Uhula iobroker 3.7.8;
                    0_userdata.0 habe ich in Objekten.
                    Diese Meldungen kommen

                    Bildschirmfoto 2020-03-11 um 15.42.56.png

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

                    @der-eine onLog() ist erst ab Javascript 4.3.0 Adapter verfügbar, da musst du den erst updaten. Siehe auch: onLog

                    lol - Pittini war schneller

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

                    1 Antwort Letzte Antwort
                    0
                    • D Offline
                      D Offline
                      der-eine
                      schrieb am zuletzt editiert von der-eine
                      #180

                      @Pittini @Uhula danke für den Hinweis werde ich gleich mal testen. Erst mal schauen, wie man richtig Updatet JS 4.3.0 wird wahrscheinlich erst mit Admin 4.0 angezeigt.

                      Edit:
                      Das hat funktioniert. Danke jetzt läufts. :+1:

                      1 Antwort Letzte Antwort
                      0
                      • mickymM mickym

                        @Uhula
                        Danke - schon OK. Ich weiß, dass Dokumentation immer lästig ist. Aber ich habe bewusst mit einer leeren Vorlage begonnen und dann mit der Anleitung zu verstehen.

                        Ich habe inzwischen dank @OliverIO das mit der automatischen Titel in der abar hinbekommen.

                        Allerdings scheine ich ein Problem mit Farben generell zu haben. ;)
                        Zumindest ist der View, den ich zuerst erstellt habe heller, als die Seiten/Views die ich danach gemacht habe, obwohl diese erst mal die gleichen content und card Views als Inhalt habe.

                        Screenshot.png

                        Eigenartig ;)

                        Aber nochmal mein Kompliment an Deine Arbeit! Und vielen Dank - auch für Deinen Support hier.

                        mickymM Online
                        mickymM Online
                        mickym
                        Most Active
                        schrieb am zuletzt editiert von mickym
                        #181

                        @mickym said in [Projekt] Material Design CSS v2:

                        Screenshot.png

                        So ich habe leider doch ein Problem mit dem Titel auf der aktuellen Seite.
                        Ich hätte gerne in der abar nicht einen starren Text wie "MD-Demo" - sondern den Titel der aktuellen Seite.
                        Ich hatte es anfangs mit dem kleinen Script von @OliverIO versucht und ich habe meine pageTitel Seiten immer als Titel View benannt und wollte die statt des starren Textes ausgeben.

                        Ich hatte dazu erst auf dem abarMain View ein HTML Widget mit folgendem Script implementiert:

                        <p id="viewtest"</p>
                        <script>
                        $('#viewtest').html(vis.activeView);
                        </script>
                        

                        Das hat aber nur beim ersten Aufruf der Seite funktioniert. Sobald ich dann auf eine andere Seite navigiert habe - hat sich der Titel nicht aktualisiert.

                        Dann kam der Tipp - ich sollte einfach "{view}" eingeben. Das hat aber den Effekt, dass dann als Seitentitel immer nur abarMain drin steht - was ja streng genommen auch richtig ist.
                        Ich kann das HTML Widget aber auch nicht in die entsprechenden MainViews platzieren, da es dann nicht sichtbar - von der abar überschrieben wird.

                        Ich bin leider kein Webentwickler und meine HTML Kenntnisse sind sehr bescheiden - aber es muss doch möglich sein aus dem document.referrer irgendwie den String/Seitennamen nach dem Projektnamen zu extrahieren?

                        Das kann doch eigentlich keine große Sache sein - nur mir fehlen die Kenntnisse. :(

                        Am Besten wäre eigentlich wenn man von dem TopView einfach ein Datenfeld - wie Name oder sowas als Anzeige verwenden könnte.

                        Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                        UhulaU 2 Antworten Letzte Antwort
                        0
                        • mickymM mickym

                          @mickym said in [Projekt] Material Design CSS v2:

                          Screenshot.png

                          So ich habe leider doch ein Problem mit dem Titel auf der aktuellen Seite.
                          Ich hätte gerne in der abar nicht einen starren Text wie "MD-Demo" - sondern den Titel der aktuellen Seite.
                          Ich hatte es anfangs mit dem kleinen Script von @OliverIO versucht und ich habe meine pageTitel Seiten immer als Titel View benannt und wollte die statt des starren Textes ausgeben.

                          Ich hatte dazu erst auf dem abarMain View ein HTML Widget mit folgendem Script implementiert:

                          <p id="viewtest"</p>
                          <script>
                          $('#viewtest').html(vis.activeView);
                          </script>
                          

                          Das hat aber nur beim ersten Aufruf der Seite funktioniert. Sobald ich dann auf eine andere Seite navigiert habe - hat sich der Titel nicht aktualisiert.

                          Dann kam der Tipp - ich sollte einfach "{view}" eingeben. Das hat aber den Effekt, dass dann als Seitentitel immer nur abarMain drin steht - was ja streng genommen auch richtig ist.
                          Ich kann das HTML Widget aber auch nicht in die entsprechenden MainViews platzieren, da es dann nicht sichtbar - von der abar überschrieben wird.

                          Ich bin leider kein Webentwickler und meine HTML Kenntnisse sind sehr bescheiden - aber es muss doch möglich sein aus dem document.referrer irgendwie den String/Seitennamen nach dem Projektnamen zu extrahieren?

                          Das kann doch eigentlich keine große Sache sein - nur mir fehlen die Kenntnisse. :(

                          Am Besten wäre eigentlich wenn man von dem TopView einfach ein Datenfeld - wie Name oder sowas als Anzeige verwenden könnte.

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

                          @mickym Dein Script wird nur genau 1x ausgeführt, danach nie wieder (da kein reload der Page mehr stattfindet, nur noch AJAX Manipulationen). Wie das CSS Script müsstest du also die DOM Änderungen überwachen (Mutation-Observer) und darauf reagieren. Einfacher wäre es, wenn du das Script erweiterst: Funktion _onChangePage() im Bereich "// favicon anpassen" ...

                          Soll der komplette View-Name angezeigt werden? Ich nenne die bei mir immer pageVorgarten, pageHeizung usw. würde also die ersten vier Zeichen abschneiden wollen. Ich schau am WoEnde mal, ob ich was ähnliches implementieren kann wie beim favicon.

                          Du kannst auch auf jeder page-View ein Widget korrekt positionieren, musst diesem aber eine z-order zuweisen, die größer ist die vom abar. Sieht beim Öffnen der lnav dann vielleicht nicht gut aus.

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

                          1 Antwort Letzte Antwort
                          0
                          • mickymM mickym

                            @mickym said in [Projekt] Material Design CSS v2:

                            Screenshot.png

                            So ich habe leider doch ein Problem mit dem Titel auf der aktuellen Seite.
                            Ich hätte gerne in der abar nicht einen starren Text wie "MD-Demo" - sondern den Titel der aktuellen Seite.
                            Ich hatte es anfangs mit dem kleinen Script von @OliverIO versucht und ich habe meine pageTitel Seiten immer als Titel View benannt und wollte die statt des starren Textes ausgeben.

                            Ich hatte dazu erst auf dem abarMain View ein HTML Widget mit folgendem Script implementiert:

                            <p id="viewtest"</p>
                            <script>
                            $('#viewtest').html(vis.activeView);
                            </script>
                            

                            Das hat aber nur beim ersten Aufruf der Seite funktioniert. Sobald ich dann auf eine andere Seite navigiert habe - hat sich der Titel nicht aktualisiert.

                            Dann kam der Tipp - ich sollte einfach "{view}" eingeben. Das hat aber den Effekt, dass dann als Seitentitel immer nur abarMain drin steht - was ja streng genommen auch richtig ist.
                            Ich kann das HTML Widget aber auch nicht in die entsprechenden MainViews platzieren, da es dann nicht sichtbar - von der abar überschrieben wird.

                            Ich bin leider kein Webentwickler und meine HTML Kenntnisse sind sehr bescheiden - aber es muss doch möglich sein aus dem document.referrer irgendwie den String/Seitennamen nach dem Projektnamen zu extrahieren?

                            Das kann doch eigentlich keine große Sache sein - nur mir fehlen die Kenntnisse. :(

                            Am Besten wäre eigentlich wenn man von dem TopView einfach ein Datenfeld - wie Name oder sowas als Anzeige verwenden könnte.

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

                            @mickym Ab der MD CSS v2.3 kannst du den page-Viewnamen leicht nutzen:

                            • mdui-page-name: Der Widgetinhalt wird nach jedem Seitenwechsel mit dem page-Viewnamen gefüllt, kann in basic-HTMLs zur Anzeige des page-Viewnamens genutzt werden
                            • mdui-page-title: Wie mdui-page-name, allerdings wird der Name noch aufbereitet. Kleinbuchstaben am Anfang werden ignoriert und '_' werden zu Leerzeichen gewandelt. "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"
                              bbe8798b-1e7f-4efb-a4a4-f79d1921800f-image.png

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

                            mickymM 1 Antwort Letzte Antwort
                            0
                            • UhulaU Uhula

                              @mickym Ab der MD CSS v2.3 kannst du den page-Viewnamen leicht nutzen:

                              • mdui-page-name: Der Widgetinhalt wird nach jedem Seitenwechsel mit dem page-Viewnamen gefüllt, kann in basic-HTMLs zur Anzeige des page-Viewnamens genutzt werden
                              • mdui-page-title: Wie mdui-page-name, allerdings wird der Name noch aufbereitet. Kleinbuchstaben am Anfang werden ignoriert und '_' werden zu Leerzeichen gewandelt. "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"
                                bbe8798b-1e7f-4efb-a4a4-f79d1921800f-image.png
                              mickymM Online
                              mickymM Online
                              mickym
                              Most Active
                              schrieb am zuletzt editiert von
                              #184

                              @Uhula Ganz lieben Dank! - Du bist echt gut. Ich werde es heute abend gleich ausprobieren. Vorher komme ich nicht dazu!! Das ist genau das, was ich wollte. :)

                              Jeder Flow bzw. jedes Script, das ich hier poste implementiert jeder auf eigene Gefahr. Flows und Scripts können Fehler aufweisen und weder der Seitenbetreiber noch ich persönlich können hierfür haftbar gemacht werden. Das gleiche gilt für Empfehlungen aller Art.

                              UhulaU 1 Antwort Letzte Antwort
                              0
                              • UhulaU Uhula

                                @Pittini Kleiner Fehler, leicht zu beheben, "background" statt "color":
                                .mdui-bnav {
                                background:var(--bnav-background) !important;
                                z-index:98;
                                border:none;
                                box-shadow:0px -2px 4px -1px rgba(0,0,0,0.45);
                                transition: left 0.25s ease;
                                }

                                @der-eine Ich habe noch nichts mit iCal erklärt - oder kann mich zumindest daran nicht erinnern. Worum geht es? Termine aus dem Kalender via Script in einen HTML-State als table zu setzen um ihn als mdui-table anzuzeigen?

                                Wenn ja, dann

                                • das Script Legt einen HTML-State unter javascript.X.ical.0.HTML an (X=Script-Instanz)
                                • es setzt ein on-Event auf den State ical.0.Data.Table
                                • wenn sich der Wert dort verändert, wird das Script ausgeführt und dieses bildet aus dem ical.0.Data.Table Inhalt dann den javascript.X.ical.0.HTML Inhalt
                                • der javascript.X.ical.0.HTML Inhalt kann als HTML Wert für eine mdui-table genutzt werden, Widget: "basic-string (unexcaped)"
                                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     = "<table style='font-size:0.9em;'><thead><tr><th style='text-align:left;'>Zeit</th><th style='text-align:left;'>Text</th><th style='text-align:left;'>Kalendar</th></tr></thead><tbody>";
                                    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+="<tr style='background:transparent; background-image: linear-gradient("+calendar.color+","+calendar.color+"); background-size: 4px 90%; background-repeat: no-repeat;'>";
                                        else
                                            html+="<tr>";
                                        html+="<td style='font-size:1.1em;'>"+entry.date+"</td>"
                                        html+="<td>"+entry.event+"</td>"
                                        html+="<td>"+entry._calName+"</td>"
                                        html+="</tr>";
                                    }
                                    html+="</body></table>";    
                                    setState(idCalHTMLtable, html);    
                                //dump( html );
                                }
                                
                                
                                on({id: idCalTable, change: "ne"}, function (obj) {
                                    iCalToHTMLTable();
                                });
                                
                                iCalToHTMLTable();
                                

                                T Offline
                                T Offline
                                Tirador
                                schrieb am zuletzt editiert von
                                #185

                                @Uhula Das Kalendarscript ist super. Das wäre doch etwas für das neue Wiki! :)

                                1 Antwort Letzte Antwort
                                0
                                • mickymM mickym

                                  @Uhula Ganz lieben Dank! - Du bist echt gut. Ich werde es heute abend gleich ausprobieren. Vorher komme ich nicht dazu!! Das ist genau das, was ich wollte. :)

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

                                  @mickym Heute abend wird nicht gehen, die v2.3 ist noch nicht online ;-) Wenn du willst, kannst du das vorhandene Script selbst ergänzen: In _onChangePage
                                  aus

                                  // favicon anpassen
                                              $("#vis_container>:not([style*='display: none']) .mdui-favicon img").each( function (index) {
                                                  if ($(this)[0].src)
                                                       $("link[rel='shortcut icon']").attr("href", $(this)[0].src);
                                              });
                                  

                                  einfach

                                  // favicon anpassen
                                              $("#vis_container>:not([style*='display: none']) .mdui-favicon img").each( function (index) {
                                                  if ($(this)[0].src)
                                                       $("link[rel='shortcut icon']").attr("href", $(this)[0].src);
                                              });
                                              
                                              // page-name anpassen
                                              let pagename = window.location.hash.substr(1,255);
                                              $(".mdui-page-name").each( function (index) {
                                                  $(this).html( pagename );
                                              });
                                              $(".mdui-page-title").each( function (index) {
                                                  // "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"
                                                  let title = '';
                                                  let c;
                                                  for (let i=0; i<pagename.length; i++) {
                                                      c = pagename[i];
                                                      if (title=='') {
                                                          if (c==c.toUpperCase()) title += c; 
                                                      } else {
                                                          if (c=='_') c = ' '; 
                                                          title += c;
                                                      }    
                                                  }
                                                  $(this).html( title );
                                              });
                                  
                                  

                                  machen.

                                  @Tirador Das Kalendarscript kommt auch noch ins Wiki, ich will es aber erst noch überarbeiten.

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

                                  mickymM 1 Antwort Letzte Antwort
                                  0
                                  • D Offline
                                    D Offline
                                    der-eine
                                    schrieb am zuletzt editiert von der-eine
                                    #187

                                    @Uhula habe mit dem Log und den TR064 Views noch anzeige Probleme. Hätte sie genau so importiert wie Du sie erstellt hast. Trotzdem werden sie so angezeigt...
                                    Habe das aktuelle Skript und CSS Projekt

                                    Icon zu nah am Text

                                    IMG_6854.jpg

                                    Hintergrundfarbe änder sich beim vergrössern

                                    IMG_6855.jpg

                                    Kennst Du dieses verhalten?

                                    1 Antwort Letzte Antwort
                                    0
                                    • T Offline
                                      T Offline
                                      Tirador
                                      schrieb am zuletzt editiert von
                                      #188

                                      Ich finde es wird langsam Zeit, dass wir einen neuen Thread eröffnen, wo wir alle unsere Widgets präsentieren.
                                      Ich fummel schon stundenlang am perfekten Layout/Design herum.
                                      Wenn wir uns auf gewissen Grundlagen (Material Design Icons als Schriftarten, Referenz auf die Konfigurationsseite etc.) einigen, könnte man die Widgets untereinander teilen.

                                      Ich meine damit auch so Basics wie:

                                      • Lampensteuerung
                                      • Heizungssteuerung
                                      • Anzeige Türen/Fenster
                                      • Anruflisten / Verpasste Anrufe
                                      • Kalendarfunktion

                                      etc.

                                      @Uhula Was meinst Du?

                                      UhulaU 1 Antwort Letzte Antwort
                                      0
                                      • T Tirador

                                        Ich finde es wird langsam Zeit, dass wir einen neuen Thread eröffnen, wo wir alle unsere Widgets präsentieren.
                                        Ich fummel schon stundenlang am perfekten Layout/Design herum.
                                        Wenn wir uns auf gewissen Grundlagen (Material Design Icons als Schriftarten, Referenz auf die Konfigurationsseite etc.) einigen, könnte man die Widgets untereinander teilen.

                                        Ich meine damit auch so Basics wie:

                                        • Lampensteuerung
                                        • Heizungssteuerung
                                        • Anzeige Türen/Fenster
                                        • Anruflisten / Verpasste Anrufe
                                        • Kalendarfunktion

                                        etc.

                                        @Uhula Was meinst Du?

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

                                        @Tirador Ja, ist eine gute Idee, ich habe damit auch bereits begonnen, zumindest mit den Scripten/Views, die ich erstellt habe. Ich gehe dabei so vor:

                                        • Die Scripte/Views spiele ich in mein Github/templates hoch (news versions sind da besser zu handhaben als hier im Forum)
                                        • Im Github/Wiki erfasse ich die Dokumentation dazu
                                        • Im Forum erzeuge ich einen neues Thema um Fragen beantworten zu können (das wiederum geht auf Github nicht gut) (Bsp: [Vorlage] MDCSS v2: tr-064 devices adapter in vis anzeigen
                                        • In diesem MDCSS c2 Thema führe ich alle Verweise auf die anderen Themen noch einmal auf (im 1.Beitrag)

                                        Da ich mein Github nicht öffnen möchte, könnt ihr da nichts hochladen. Aber ihr könnt hier im Forum ebenfalls neue Themen der Art "[Vorlage] MDCSS v2: was kann mein Script/View" erzeugen. Ich nehme dann Links im MDCCS v2 Thema mit auf. Evtl. auch im Github/Wiki (sie sollten sich dann ein wenig an die schon vorhandenen Wiki-Texte halten).

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

                                          Hi,

                                          gibt es eigentlich eine schicke Möglichkeit Datum und Uhrzeit anzeigen zu lassen. Ich meine jetzt nicht die aktuelle Zeit, sondern ich habe einen Datum/Zeit String im UTC-Format, also z.B.

                                          2020-03-12T17:04:18.872+0000
                                          

                                          und würde mir das gerne als

                                          12.03.2020 18:04
                                          

                                          anzeigen lassen. Man beachte die Stunde! Ich bin Zeitzone MEZ.

                                          Dazu wäre eine Funktion ala der Javascript Funktion

                                          Date.toLocaleString()
                                          

                                          schön. Und das dann noch gepaart mit einem Formatstring.
                                          Gibt es sowas in VIS? In MD CSS? Ideen?

                                          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

                                          UhulaU 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

                                          727

                                          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