Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] Material Design CSS für ioBroker.vis

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

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

    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      LordAdragon last edited by

      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 Reply Last reply Reply Quote 0
      • O
        ok1 last edited by

        @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

        Meistertr O 2 Replies Last reply Reply Quote 0
        • Meistertr
          Meistertr Developer @ok1 last edited by

          @ok1 dem Problem kann ich mich anschließen.

          1 Reply Last reply Reply Quote 0
          • D
            DJNick134 @tempestas last edited by

            @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 😕

            sigi234 1 Reply Last reply Reply Quote 0
            • sigi234
              sigi234 Forum Testing Most Active @DJNick134 last edited by

              @DJNick134

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

              D 1 Reply Last reply Reply Quote 0
              • D
                DJNick134 @sigi234 last edited by

                @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

                Glasfaser 1 Reply Last reply Reply Quote 0
                • Glasfaser
                  Glasfaser @DJNick134 last edited by

                  @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 1 Reply Last reply Reply Quote 0
                  • O
                    ok1 @ok1 last edited by

                    @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 Reply Last reply Reply Quote 0
                    • D
                      DJNick134 @Glasfaser last edited by

                      @Glasfaser Super, vielen dank!

                      1 Reply Last reply Reply Quote 0
                      • D
                        davimas last edited by

                        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 Reply Last reply Reply Quote 0
                        • P
                          Pittini Developer @davimas last edited by

                          @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 Reply Last reply Reply Quote 1
                          • D
                            davimas @Pittini last edited by

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

                            P 1 Reply Last reply Reply Quote 0
                            • P
                              Pittini Developer @davimas last edited by

                              @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 Reply Last reply Reply Quote 1
                              • D
                                davimas @Uhula last edited by

                                @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 Reply Last reply Reply Quote 0
                                • S
                                  Snapergy last edited by

                                  @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 Reply Last reply Reply Quote 0
                                  • K
                                    K_o_bold @davimas last edited by

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

                                    1 Reply Last reply Reply Quote 0
                                    • D
                                      dos1973 @Snapergy last edited by

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

                                      S 1 Reply Last reply Reply Quote 0
                                      • S
                                        Snapergy @dos1973 last edited by

                                        @dos1973
                                        den gibt es leider nicht als vertikalen slider 😞

                                        1 Reply Last reply Reply Quote 0
                                        • nukleuz
                                          nukleuz last edited by

                                          Gibt es schon das Update für die Chips?

                                          1 Reply Last reply Reply Quote 0
                                          • K
                                            K_o_bold last edited by K_o_bold

                                            So wie es aussieht, ist Uhula in diesem Forum nicht mehr so aktiv. Schade, denn die Chips sehen echt gut aus...

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            416
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            111
                                            650
                                            187507
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo