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] Material Design CSS für ioBroker.vis

NEWS

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 221.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.
  • D Offline
    D Offline
    dos1973
    schrieb am zuletzt editiert von
    #377

    jetzt wollte ich mich auch mal daran versuchen, aber ich bekomme keines der bsp Projekt importiert?!

    VIS meldet erfolgreich, dann findet er keinerlei JSON Dateien und ich lande auf das Standard Projekt. Gibt es etwas zu beachten?

    1 Antwort Letzte Antwort
    0
    • L Offline
      L Offline
      Lumpenhund
      schrieb am zuletzt editiert von
      #378

      Hi Leute,

      erstmal "Hut ab" sehr gelungenes Design.
      Ein Problem tritt bei mir auf welches ich trotz viel Suchen und probieren nicht lösen konnte. Vielleicht kann mir jemand auf die Sprünge helfen.
      Die Schriftart des mdui-select lässt sich nicht anpassen. Ganzheitlich wird ja Roboto verwendet, aber im Selector scheint eine Standard Schrift hinterlegt zu sein, die sich nicht ändern lässt. Hat da jemand Erfahrungen...Hier mal ein Screenshot.. ich hoffe es wird klar:
      schrift.JPG
      Danke und Grüße

      1 Antwort Letzte Antwort
      0
      • L Offline
        L Offline
        Lumpenhund
        schrieb am zuletzt editiert von
        #379

        der Vollständigkeit halber:
        habe es gefunden. Der Eintrag muss in der mdui-select select erfolgen:

        .mdui-select select  {
          color : rgba(255,255,255,1);
          height:100% !important;
          font-size:1em !important;
          font-family: Roboto, Arial;
          background: rgba(0,0,0,0);
          border: none;
          outline: none;
          border-bottom : 2px solid rgba(255,255,255,0.54);
          width:100%;
        }
        
        

        nun passt es...
        Grüße

        1 Antwort Letzte Antwort
        1
        • L Offline
          L Offline
          LordAdragon
          schrieb am zuletzt editiert von
          #380

          Hey Leute,

          ich benötige einen Switch der nicht wie "basic bool checkbox" true/false setzt sondern 0/1. Wie kann ich das anstellen, stehe gerade irgendwie auf dem Schlauch.

          Grüße

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

            @Uhula
            Hallo, ich nutze ja schon länger Dein MD CSS Framework. Mittlerweile hat sich darauf ein umfangreiches Projekt entwickelt.
            Das Problem ist nur, dass die Ladezeiten auf dem Samsung Tablet A10 immer länger werden - im Moment vom Reload der Seite bis zur Anzeige im Browser 20-30sec. Solange ist die Seite weiss. Im PC-Browser (Chrome wie auch auf dem A10 Tablet) lädt die Seite in ca. 3-5 sec.

            Auffällig ist beim Debuggen im Browser das Auftreten vieler jquery-Meldungen in der Browser-Console:

            jquery-1.11.2.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
            

            In Deinen MD_Demo Projekt sind das ca. 50 Meldungen und die Seite lädt in ca.3 sec, was gefühlt ok ist.
            In meinem größeren Projekt laufen derzeit 300 Meldungen auf, und die Ladezeit geht wie oben beschrieben gegen eine halbe Minute.

            Meine Frage ist, ob Du diese Meldungen evtl. kennst, ob diese kritisch für die Performance sind und ggf. einen Tipp hast, wie man sie weg bekommt.

            Ich habe zum Vergleich mal andere jquery-Seiten im Debugger mitlaufen lassen, da tauchen die o.g. Meldungen nicht auf und laden auch als jquery-Seiten schnell im Mobile-Chrome.

            Ich bin für jeden Tipp dankbar, VG ok

            MeistertrM O 2 Antworten Letzte Antwort
            0
            • O ok1

              @Uhula
              Hallo, ich nutze ja schon länger Dein MD CSS Framework. Mittlerweile hat sich darauf ein umfangreiches Projekt entwickelt.
              Das Problem ist nur, dass die Ladezeiten auf dem Samsung Tablet A10 immer länger werden - im Moment vom Reload der Seite bis zur Anzeige im Browser 20-30sec. Solange ist die Seite weiss. Im PC-Browser (Chrome wie auch auf dem A10 Tablet) lädt die Seite in ca. 3-5 sec.

              Auffällig ist beim Debuggen im Browser das Auftreten vieler jquery-Meldungen in der Browser-Console:

              jquery-1.11.2.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
              

              In Deinen MD_Demo Projekt sind das ca. 50 Meldungen und die Seite lädt in ca.3 sec, was gefühlt ok ist.
              In meinem größeren Projekt laufen derzeit 300 Meldungen auf, und die Ladezeit geht wie oben beschrieben gegen eine halbe Minute.

              Meine Frage ist, ob Du diese Meldungen evtl. kennst, ob diese kritisch für die Performance sind und ggf. einen Tipp hast, wie man sie weg bekommt.

              Ich habe zum Vergleich mal andere jquery-Seiten im Debugger mitlaufen lassen, da tauchen die o.g. Meldungen nicht auf und laden auch als jquery-Seiten schnell im Mobile-Chrome.

              Ich bin für jeden Tipp dankbar, VG ok

              MeistertrM Offline
              MeistertrM Offline
              Meistertr
              Developer
              schrieb am zuletzt editiert von
              #382

              @ok1 dem Problem kann ich mich anschließen.

              1 Antwort Letzte Antwort
              0
              • T tempestas

                Hallo,

                Uhula nutzt dieses Skript

                ! ```
                `// http://forum.iobroker.net/viewtopic.php?f=30&t=7739&hilit=material+design+kalender&start=140
                // Posting von Uhula, 17.12. 11:52h
                ! var idCal = "ical.X"; // hier deine ical instanz (x ersetzen)
                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();! angezeigt wird es dann mit einem basic html widget, bei dem du unter CSS mdui-table2 einträgst. ! Bei html kommt dann ![code]{javascript.0.ical.x.html}[/code]` rein, wobei X deine Ical Instanz ist.
                ! Mehrere Kalender gehen, indem du in der ical Instanz mehrere Kalender einfügst. Das wird dann entsprechend dargestellt[/i]

                D Offline
                D Offline
                DJNick134
                schrieb am zuletzt editiert von
                #383

                @tempestas said in [Projekt] Material Design CSS für ioBroker.vis:

                var idCal = "ical.X"; // hier deine ical instanz (x ersetzen) 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();

                Wenn ich das Skript bei mir starte kommen immer folgende Fehler im log:

                javascript.0	2019-10-14 18:32:16.658	error	(12704) at process._tickCallback (internal/process/next_tick.js:189:7)
                javascript.0	2019-10-14 18:32:16.658	error	(12704) at <anonymous>:null:null
                javascript.0	2019-10-14 18:32:16.658	error	(12704) at promise.then (/opt/iobroker/node_modules/standard-as-callback/built/index.js:19:49)
                javascript.0	2019-10-14 18:32:16.658	error	(12704) at tryCatcher (/opt/iobroker/node_modules/standard-as-callback/built/utils.js:11:23)
                javascript.0	2019-10-14 18:32:16.658	error	(12704) at client.get (/opt/iobroker/node_modules/iobroker.js-controller/lib/states/statesInRedis.js:434:21)
                javascript.0	2019-10-14 18:32:16.657	error	(12704) at adapter.getForeignState (/opt/iobroker/node_modules/iobroker.javascript/main.js:828:17)
                javascript.0	2019-10-14 18:32:16.657	error	(12704) at createProblemObject (/opt/iobroker/node_modules/iobroker.javascript/main.js:1237:17)
                javascript.0	2019-10-14 18:32:16.657	error	(12704) at prepareScript (/opt/iobroker/node_modules/iobroker.javascript/main.js:1184:37)
                javascript.0	2019-10-14 18:32:16.656	error	(12704) at compile (/opt/iobroker/node_modules/iobroker.javascript/main.js:961:28)
                javascript.0	2019-10-14 18:32:16.655	error	(12704) at Object.createScript (vm.js:80:10)
                javascript.0	2019-10-14 18:32:16.655	error	(12704) SyntaxError: Invalid or unexpected token
                javascript.0	2019-10-14 18:32:16.654	error	(12704) ^
                javascript.0	2019-10-14 18:32:16.654	error	(12704) var html = "
                javascript.0	2019-10-14 18:32:16.654	error	(12704) script.js.common.Kalender.iCal_to_HTML compile failed: at script.js.common.Kalender.iCal_to_HTML:8
                

                Weiß jemand wo der Fehler im Skript ist? Komme nicht weiter :/

                sigi234S 1 Antwort Letzte Antwort
                0
                • D DJNick134

                  @tempestas said in [Projekt] Material Design CSS für ioBroker.vis:

                  var idCal = "ical.X"; // hier deine ical instanz (x ersetzen) 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();

                  Wenn ich das Skript bei mir starte kommen immer folgende Fehler im log:

                  javascript.0	2019-10-14 18:32:16.658	error	(12704) at process._tickCallback (internal/process/next_tick.js:189:7)
                  javascript.0	2019-10-14 18:32:16.658	error	(12704) at <anonymous>:null:null
                  javascript.0	2019-10-14 18:32:16.658	error	(12704) at promise.then (/opt/iobroker/node_modules/standard-as-callback/built/index.js:19:49)
                  javascript.0	2019-10-14 18:32:16.658	error	(12704) at tryCatcher (/opt/iobroker/node_modules/standard-as-callback/built/utils.js:11:23)
                  javascript.0	2019-10-14 18:32:16.658	error	(12704) at client.get (/opt/iobroker/node_modules/iobroker.js-controller/lib/states/statesInRedis.js:434:21)
                  javascript.0	2019-10-14 18:32:16.657	error	(12704) at adapter.getForeignState (/opt/iobroker/node_modules/iobroker.javascript/main.js:828:17)
                  javascript.0	2019-10-14 18:32:16.657	error	(12704) at createProblemObject (/opt/iobroker/node_modules/iobroker.javascript/main.js:1237:17)
                  javascript.0	2019-10-14 18:32:16.657	error	(12704) at prepareScript (/opt/iobroker/node_modules/iobroker.javascript/main.js:1184:37)
                  javascript.0	2019-10-14 18:32:16.656	error	(12704) at compile (/opt/iobroker/node_modules/iobroker.javascript/main.js:961:28)
                  javascript.0	2019-10-14 18:32:16.655	error	(12704) at Object.createScript (vm.js:80:10)
                  javascript.0	2019-10-14 18:32:16.655	error	(12704) SyntaxError: Invalid or unexpected token
                  javascript.0	2019-10-14 18:32:16.654	error	(12704) ^
                  javascript.0	2019-10-14 18:32:16.654	error	(12704) var html = "
                  javascript.0	2019-10-14 18:32:16.654	error	(12704) script.js.common.Kalender.iCal_to_HTML compile failed: at script.js.common.Kalender.iCal_to_HTML:8
                  

                  Weiß jemand wo der Fehler im Skript ist? Komme nicht weiter :/

                  sigi234S Online
                  sigi234S Online
                  sigi234
                  Forum Testing Most Active
                  schrieb am zuletzt editiert von
                  #384

                  @DJNick134

                  Das fehlt was beim Skript. Von wo hat du es und was soll es machen?

                  Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                  Immer Daten sichern!

                  D 1 Antwort Letzte Antwort
                  0
                  • sigi234S sigi234

                    @DJNick134

                    Das fehlt was beim Skript. Von wo hat du es und was soll es machen?

                    D Offline
                    D Offline
                    DJNick134
                    schrieb am zuletzt editiert von
                    #385

                    @sigi234 Habs hier aus dem Forum kopiert. Mit dem Skript sollen die iCal Daten in eine HTML Datei gepackt werden, damit diese später in der Vis als Tabelle (Cards) angezeigt werden können

                    GlasfaserG 1 Antwort Letzte Antwort
                    0
                    • D DJNick134

                      @sigi234 Habs hier aus dem Forum kopiert. Mit dem Skript sollen die iCal Daten in eine HTML Datei gepackt werden, damit diese später in der Vis als Tabelle (Cards) angezeigt werden können

                      GlasfaserG Offline
                      GlasfaserG Offline
                      Glasfaser
                      schrieb am zuletzt editiert von
                      #386

                      @DJNick134

                      Wurde zerstückelt , bei der Forum´s Umstellung

                      hier was funktioniert:

                      // Posting von Uhula, 17.12. 11:52h
                      
                      var idCal = "ical.x";						// hier deine ical instanz (x ersetzen)
                      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:1.0em;'><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.0em;'>"+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();
                      
                      

                      Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                      D 1 Antwort Letzte Antwort
                      0
                      • O ok1

                        @Uhula
                        Hallo, ich nutze ja schon länger Dein MD CSS Framework. Mittlerweile hat sich darauf ein umfangreiches Projekt entwickelt.
                        Das Problem ist nur, dass die Ladezeiten auf dem Samsung Tablet A10 immer länger werden - im Moment vom Reload der Seite bis zur Anzeige im Browser 20-30sec. Solange ist die Seite weiss. Im PC-Browser (Chrome wie auch auf dem A10 Tablet) lädt die Seite in ca. 3-5 sec.

                        Auffällig ist beim Debuggen im Browser das Auftreten vieler jquery-Meldungen in der Browser-Console:

                        jquery-1.11.2.min.js:3 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
                        

                        In Deinen MD_Demo Projekt sind das ca. 50 Meldungen und die Seite lädt in ca.3 sec, was gefühlt ok ist.
                        In meinem größeren Projekt laufen derzeit 300 Meldungen auf, und die Ladezeit geht wie oben beschrieben gegen eine halbe Minute.

                        Meine Frage ist, ob Du diese Meldungen evtl. kennst, ob diese kritisch für die Performance sind und ggf. einen Tipp hast, wie man sie weg bekommt.

                        Ich habe zum Vergleich mal andere jquery-Seiten im Debugger mitlaufen lassen, da tauchen die o.g. Meldungen nicht auf und laden auch als jquery-Seiten schnell im Mobile-Chrome.

                        Ich bin für jeden Tipp dankbar, VG ok

                        O Offline
                        O Offline
                        ok1
                        schrieb am zuletzt editiert von
                        #387

                        @ok1 sagte in [Projekt] Material Design CSS für ioBroker.vis:

                        Meine Frage ist, ob Du diese Meldungen evtl. kennst, ob diese kritisch für die Performance sind und ggf. einen Tipp hast, wie man sie weg bekommt.

                        Ich habe die Meldungen nun mit folgendem jquery- Code in VIS- Scripte wegbekommen:

                        jQuery.event.special.touchstart = {
                          setup: function( _, ns, handle ){
                            if ( ns.includes("noPreventDefault") ) {
                              this.addEventListener("touchstart", handle, { passive: false });
                            } else {
                              this.addEventListener("touchstart", handle, { passive: true });
                            }
                          }
                        };
                        jQuery.event.special.touchmove = {
                          setup: function( _, ns, handle ){
                            if ( ns.includes("noPreventDefault") ) {
                              this.addEventListener("touchmove", handle, { passive: false });
                            } else {
                              this.addEventListener("touchmove", handle, { passive: true });
                            }
                          }
                        };
                        

                        Leider hat sich dadurch an der schlechten Performance des Projekts insgesamt nichts geändert. Das Problem sind scheinbar die vielen

                        [Violation] 'setTimeout' handler took 101ms
                        

                        zu sein. Auf dem Desktop-PC sind es jeweils nur 10-100ms pro 'setTimeout' handler, auf dem Tablet A9.7 (SM-T555) sind es 500 - 2000 ms. Diese timeouts addieren sich dann zu Gesamtladezeiten von 20-30 sec.

                        Auslöser der Timeouts ist die setTimeout- Funktion in Zeile 938 in vis.js:

                        if (!wait) {
                                       if (!hidden) $view.show();
                                       setTimeout(function () {
                                           $('#visview_' + viewDiv).trigger('rendered');
                                           if (callback) callback(viewDiv, view);
                                       }, 0);
                        }
                        

                        Die Ladezeit der gleichen Seite auf einem neueren Sony Mobile halbierte sich z.B. auf 10 sec. Andere Sites mit viel mehr zu ladenden Elementen lassen sich gut und schnell auf dem Tablet absurfen. Es scheint somit am speziellen Aufbau der Material Design Frameworkseite und an der CPU/RAM-Leistung des Tablets zu liegen.

                        1 Antwort Letzte Antwort
                        0
                        • GlasfaserG Glasfaser

                          @DJNick134

                          Wurde zerstückelt , bei der Forum´s Umstellung

                          hier was funktioniert:

                          // Posting von Uhula, 17.12. 11:52h
                          
                          var idCal = "ical.x";						// hier deine ical instanz (x ersetzen)
                          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:1.0em;'><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.0em;'>"+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();
                          
                          
                          D Offline
                          D Offline
                          DJNick134
                          schrieb am zuletzt editiert von
                          #388

                          @Glasfaser Super, vielen dank!

                          1 Antwort Letzte Antwort
                          0
                          • D Offline
                            D Offline
                            davimas
                            schrieb am zuletzt editiert von
                            #389

                            Danke für das Projekt - ich habe mir sogar die Anleitung ausgedruckt und lese immer wieder in der Mittagspause.

                            Zwei Einsteigerfragen, wie ändere ich die Farbe der lnav?
                            Bei der abar geht es mit "mdui-black-bg" Zugabe auf der Startpage, jedoch bekomm ich es nicht bei der lnav hin.

                            Desweiteren sind die Farben ja festgelegt - und hätte gerne die abar in plüschrosa ;-))) Also habe ich in der CSS Klasse das "mdui-abar" weggemacht und so den Hintergrund farblich angepasst. Macht es jetzt was aus wenn die "abar" nicht als solche "festgelegt" ist?

                            by,
                            David

                            P 1 Antwort Letzte Antwort
                            0
                            • D davimas

                              Danke für das Projekt - ich habe mir sogar die Anleitung ausgedruckt und lese immer wieder in der Mittagspause.

                              Zwei Einsteigerfragen, wie ändere ich die Farbe der lnav?
                              Bei der abar geht es mit "mdui-black-bg" Zugabe auf der Startpage, jedoch bekomm ich es nicht bei der lnav hin.

                              Desweiteren sind die Farben ja festgelegt - und hätte gerne die abar in plüschrosa ;-))) Also habe ich in der CSS Klasse das "mdui-abar" weggemacht und so den Hintergrund farblich angepasst. Macht es jetzt was aus wenn die "abar" nicht als solche "festgelegt" ist?

                              by,
                              David

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

                              @davimas Wenn Du die vordefinierten Farben nicht magst, dann dort ändern wo se definiert sind und nicht iwelche Verrenkungen machen welche iwann zu Problemen führen (können) Definiert sind se im CSS Bereich.
                              Inked2019-11-25 11_02_05-Window_LI.jpg

                              D 1 Antwort Letzte Antwort
                              1
                              • P Pittini

                                @davimas Wenn Du die vordefinierten Farben nicht magst, dann dort ändern wo se definiert sind und nicht iwelche Verrenkungen machen welche iwann zu Problemen führen (können) Definiert sind se im CSS Bereich.
                                Inked2019-11-25 11_02_05-Window_LI.jpg

                                D Offline
                                D Offline
                                davimas
                                schrieb am zuletzt editiert von
                                #391

                                @Pittini
                                Perfekt - Danke hat funktioniert. Und die Schriftfarbe der Textes/Menü in der lnav?

                                P 1 Antwort Letzte Antwort
                                0
                                • D davimas

                                  @Pittini
                                  Perfekt - Danke hat funktioniert. Und die Schriftfarbe der Textes/Menü in der lnav?

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

                                  @davimas said in [Projekt] Material Design CSS für ioBroker.vis:

                                  Und die Schriftfarbe der Textes/Menü in der lnav?

                                  Jedes mdui-blabla hat eine Entsprechung in der CSS Datei, mußt halt dort nach dem gewünschten mdui-xxx suchen.

                                  1 Antwort Letzte Antwort
                                  1
                                  • UhulaU Uhula

                                    Vorab-Info:
                                    Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

                                    087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

                                    D Offline
                                    D Offline
                                    davimas
                                    schrieb am zuletzt editiert von
                                    #393

                                    @Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

                                    Vorab-Info:
                                    Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

                                    087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

                                    Hey,

                                    sind die schon irgendwo verfügbar? Die CSS Klasse habe ich nicht gefunden in der Demo......

                                    by,
                                    David

                                    K 1 Antwort Letzte Antwort
                                    0
                                    • S Offline
                                      S Offline
                                      Snapergy
                                      schrieb am zuletzt editiert von
                                      #394

                                      @Uhula
                                      erst einmal vielen Dank für das schöne Design via CSS. Ich habe mir den Switch und den Slider für meine Visualisierung "rausgepickt". Jetzt habe ich eine Frage bzgl. der Machbarkeit an dich. Ich hätte gern beim Slider ein Label, welcher mit dem Knopf beim Vertical Slider mitläuft und den aktuellen Wert darstellt (siehe Discrete Slider vom Google Material Design). Ich hatte dazu auch schon einen Thread eröffnet, aber dort konnte mir keiner weiterhelfen.

                                      Aktuell behelfe ich mir mit einer Krücke, welche den Wert in einem statischen HTML aus einem Datenobjekt ausliest. Dies ist aber immer mit einem kleinen Delay verbunden, welches sich als unschön und nicht gerade Userfreundlich darstellt.

                                      D 1 Antwort Letzte Antwort
                                      0
                                      • D davimas

                                        @Uhula said in [Projekt] Material Design CSS für ioBroker.vis:

                                        Vorab-Info:
                                        Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

                                        087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

                                        Hey,

                                        sind die schon irgendwo verfügbar? Die CSS Klasse habe ich nicht gefunden in der Demo......

                                        by,
                                        David

                                        K Offline
                                        K Offline
                                        K_o_bold
                                        schrieb am zuletzt editiert von
                                        #395

                                        @davimas ,
                                        @Uhula , das wäre echt super, wenn auch Chips zur Verfügung gestellt werden.

                                        1 Antwort Letzte Antwort
                                        0
                                        • S Snapergy

                                          @Uhula
                                          erst einmal vielen Dank für das schöne Design via CSS. Ich habe mir den Switch und den Slider für meine Visualisierung "rausgepickt". Jetzt habe ich eine Frage bzgl. der Machbarkeit an dich. Ich hätte gern beim Slider ein Label, welcher mit dem Knopf beim Vertical Slider mitläuft und den aktuellen Wert darstellt (siehe Discrete Slider vom Google Material Design). Ich hatte dazu auch schon einen Thread eröffnet, aber dort konnte mir keiner weiterhelfen.

                                          Aktuell behelfe ich mir mit einer Krücke, welche den Wert in einem statischen HTML aus einem Datenobjekt ausliest. Dies ist aber immer mit einem kleinen Delay verbunden, welches sich als unschön und nicht gerade Userfreundlich darstellt.

                                          D Offline
                                          D Offline
                                          dos1973
                                          schrieb am zuletzt editiert von
                                          #396

                                          @Snapergy
                                          Nimm doch einfach den DiscreteSlider aus dem MaterialDesign Adapter...?!

                                          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

                                          747

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          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