Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Praktische Anwendungen (Showcase)
    4. VIS von Sigi234

    NEWS

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    VIS von Sigi234

    This topic has been deleted. Only users with topic management privileges can see it.
    • sigi234
      sigi234 Forum Testing Most Active @Salzer Michael last edited by

      @salzer-michael sagte in VIS von Sigi234:

      @sigi234
      Hello

      Hast du vielleicht den Icon Ordner "Dishwasher" für die Spüler View oder n link zum download ?

      https://github.com/inventwo/ioBroker.vis-icontwo

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

        Hallo Sigi! Ich möchte zuerst meine Begeisterung für deine Arbeit aussprechen und mich bei dir einfach nur bedanken für so eine großartige Leistung!!!

        Ich bin erst seit ein paar Tagen beim ioBroker dabei und versuche mich so langsam zurechtzufinden. Deswegen direkt Mal die wichtigste Frage )) das, was du hier reinstellst.. sind das die Skripte? wie kann ich die in meinem Vis visualisieren? Gibt es dafür eine Anleitung?

        Ich bedanke mich im Voraus.

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

          @kgb
          Danke, das Meiste sind Views die du als View importieren musst.
          Runterladen:
          Rechtsklick auf Link --> speichern unter --> mit vernünftigem Editor öffnen (zB Notepad++)
          Alles markieren, kopieren und unter Punkt 2 einfügen.

          Screenshot (3970)_LI.jpg

          Screenshot (3969)_LI.jpg

          Teilweise brauchst du dann noch die entsprechenden Adapter, Widgets und Skripte.

          Negalein K 2 Replies Last reply Reply Quote 0
          • Negalein
            Negalein Global Moderator @sigi234 last edited by Negalein

            @sigi234 sagte in VIS von Sigi234:

            Screenshot (3970)_LI.jpg

            1617208224423-screenshot-3562.png

            Griasde! 🙂

            Kannst du mir diese Views schicken?

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

              @negalein sagte in VIS von Sigi234:

              Kannst du mir diesen View schicken?

              Ist Online. 😀

              Negalein 2 Replies Last reply Reply Quote 0
              • Negalein
                Negalein Global Moderator @sigi234 last edited by

                @sigi234 sagte in VIS von Sigi234:

                Ist Online. 😀

                Merci
                Muss ich gleich nachschaun.

                Hast du den Betriebsstunden auch schon mit Inventwo?

                sigi234 1 Reply Last reply Reply Quote 0
                • Negalein
                  Negalein Global Moderator @sigi234 last edited by

                  @sigi234 sagte in VIS von Sigi234:

                  Ist Online.

                  war mit Edit zu langsam und du mit Upload zu schnell 😁

                  kannst du den Pegelalarm in Inventwo auch noch uploaden?

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

                    @negalein sagte in VIS von Sigi234:

                    Hast du den Betriebsstunden auch schon mit Inventwo?

                    Nein, noch nicht.

                    Negalein 1 Reply Last reply Reply Quote 0
                    • Negalein
                      Negalein Global Moderator @sigi234 last edited by

                      @sigi234 sagte in VIS von Sigi234:

                      Nein, noch nicht.

                      Ok, dann werd ich den versuchen selbst zu basteln.

                      Hast du noch die Icons und das Hintergrundbild dieser Views?
                      Edit vis (2).png Edit vis (3).png Edit vis (4).png

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

                        @negalein sagte in VIS von Sigi234:

                        Hast du noch die Icons und das Hintergrundbild dieser Views?

                        101.jpg

                        Hast du vis-icontwo installiert?

                        icons.zip

                        Negalein 1 Reply Last reply Reply Quote 0
                        • Negalein
                          Negalein Global Moderator @sigi234 last edited by

                          @sigi234 sagte in VIS von Sigi234:

                          Hast du vis-icontwo installiert?

                          gerade am installieren 🙂

                          1 Reply Last reply Reply Quote 0
                          • K
                            Kosta @sigi234 last edited by

                            @sigi234 Vielen vielen Dank. Ich habe schon ein paar Sachen umsetzen können. Klappt sehr gut! 👍

                            1 Reply Last reply Reply Quote 0
                            • K
                              KHK @sigi234 last edited by

                              @sigi234

                              ich probiere mich an deiner VIEW für Web-Speedy - habe aber ein Problem in der Form, dass die linke Tabelle nicht dargestellt wird - im Origiinal-Download wird als Viewname " Tabelle_WebSpeedy" angegeben. Ich verstehe nicht, auf was sich dieser View bezieht? Ich kann die erzeugte Tabelle über den Button PopUp Tabelle aufrufen. Verwiesen wird hier auf das Objekt "{javascript.0.Tabellen.Web-Speedy-Test.VISAnzeige}".
                              Die Frage stellt sich mir nur, was muss ich angeben, dass ich die Tabelle in dem "View-Widget" sehen kann?

                              Negalein sigi234 2 Replies Last reply Reply Quote 0
                              • Negalein
                                Negalein Global Moderator @KHK last edited by Negalein

                                @khk sagte in VIS von Sigi234:

                                Verwiesen wird hier auf das Objekt "{javascript.0.Tabellen.Web-Speedy-Test.VISAnzeige}".
                                Die Frage stellt sich mir nur, was muss ich angeben, dass ich die Tabelle in dem "View-Widget" sehen kann?

                                du benötigst dieses Script

                                  //@liv-in-sky 2020  16.2.-13:42
                                 // orginal template für tabelle: https://forum.iobroker.net/topic/28021/html-table-f%C3%BCr-vis-oder-iqontrol-js-und-blockly/152
                                 
                                 
                                //HIER WIRD PFAD UND FILENAME DEFINIERT
                                const path = "/htmlexample.html";                   //FIlenamen definieren
                                const home ='vis.0'                                 //wo soll das file im iobroker-file-system liegen ? (oder z.b auch iqontrol.meta)
                                let   braucheEinFile=true;                          // bei true wird ein file geschrieben
                                let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
                                //let dpVIS="0_userdata.0.Tabellen.Web-Speedy-Test"         //WICHTIG wenn braucheEinVISWidget auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget
                                //let mySchedule=" */20 * * * * * ";                       //jede minute  
                                let anzahlMessung=8;
                                let neuOben=true;
                                 
                                var symbolLink="🌎";
                                //---------------------------------------
                                 
                                //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 5
                                var htmlFeld1='Zeit';       var Feld1lAlign="center";                     // überschrift Tabellen Spalte1 und  Ausrichtung left,right or center
                                var htmlFeld2='DL';        var Feld2lAlign="center";                      // überschrift Tabellen Spalte2 und  Ausrichtung left,right or center
                                var htmlFeld3='UL';         var Feld3lAlign="center";                    // überschrift Tabellen Spalte3 und  Ausrichtung left,right or center
                                var htmlFeld4='Ping';        var Feld4lAlign="center";                    // überschrift Tabellen Spalte4 und  Ausrichtung left,right or center
                                var htmlFeld5='Server';        var Feld5lAlign="center";                    // überschrift Tabellen Spalte5 und  Ausrichtung left,right or center
                                var htmlFeld6='Dauer';        var Feld6lAlign="center";                    // überschrift Tabellen Spalte5 und  Ausrichtung left,right or center
                                 
                                 
                                //-----------------------------------
                                 
                                 
                                 
                                //hier werden die styles für die tabelle definiert
                                //ÜBERSCHRIFT ÜBER TABELLE
                                let   htmlUberschrift=false;                           // mit Überschrift über der tabelle
                                let   htmlSignature=false;                              // anstatt der Überscghrift eine signature: - kleiner - anliegend
                                const htmlFeldUeber='WebSpeedy';              // Überschrift und Signature
                                const htmlFarbUber="white";                         // Farbe der Überschrift
                                const htmlSchriftWeite="normal";                       // bold, normal - Fettschrift für Überschrift
                                const htmlÜberFontGroesse="18px";                       // schriftgröße überschrift
                                //MEHRERE TABELLEN NEBENEINANDER
                                let   mehrfachTabelle=1;                              // bis zu 4 Tabellen werden nebeneinander geschrieben-  verkürzt das Ganze, dafür etwas breiter - MÖGLICH 1,2,3,oder 4 !!!
                                const trennungsLinie="2";                             //extra trennungslinie bei mehrfachtabellen - evtl auf 0 stellen, wnn htmlRahmenLinien auf none sind
                                const farbetrennungsLinie="white";
                                const htmlFarbZweiteTabelle="white";                // Farbe der Überschrift bei jeder 2.ten Tabelle
                                const htmlFarbTableColorUber="#BDBDBD";               // Überschrift in der tabelle - der einzelnen Spalten
                                //ÜBERSCHRIFT SPALTEN
                                const UeberSchriftHöhe="35";                          //Überschrift bekommt mehr Raum - darunter und darüber - Zellenhöhe
                                const LinieUnterUeberschrift="2";                   // Linie nur unter Spaltenüberschrift - 
                                const farbeLinieUnterUeberschrift="white";
                                const groesseUeberschrift=16;
                                const UeberschriftStyle="normal"                     // möglich "bold"
                                //GANZE TABELLE
                                let abstandZelle="1";
                                let farbeUngeradeZeilen="#000000";                     //Farbe für ungerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                let farbeGeradeZeilen="#151515";                        //Farbe für gerade Zeilenanzahl - Hintergrund der Spaltenüberschrift bleibt bei htmlFarbTableColorGradient1/2
                                let weite="auto";                                     //Weite der Tabelle
                                let zentriert=true;                                   //ganze tabelle zentriert
                                const backgroundAll="#000000";                        //Hintergrund für die ganze Seite - für direkten aufruf oder iqontrol sichtber - keine auswirkung auf vis-widget
                                const htmlSchriftart="RobotoCondensed-Light";
                                const htmlSchriftgroesse="14px";
                                //FELDER UND RAHMEN
                                let   UeberschriftSpalten=true;                // ein- oder ausblenden der spatlen-überschriften
                                const htmlFarbFelderschrift="#D8D8D8";                  // SchriftFarbe der Felder
                                const htmlFarbFelderschrift2="#BDBDBD";                 // SchriftFarbe der Felder für jede 2te Tabelle
                                const htmlFarbTableColorGradient1="#424242";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
                                const htmlFarbTableColorGradient2="#424242";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
                                const htmlFarbTableBorderColor="grey";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
                                let htmlRahmenLinien="none";                            // Format für Rahmen: MÖGLICH: "none" oder "all" oder "cols" oder "rows"
                                const htmlSpalte1Weite="auto";                   //  Weite der ersten beiden  Spalten oder z.b. 115px
                                // HIER NICHTS  ÄNDERN
                                 
                                let borderHelpBottum;
                                let borderHelpRight;
                                let htmlcenterHelp;
                                let htmlcenterHelp2;
                                 
                                if(htmlRahmenLinien=="rows") {borderHelpBottum=1;borderHelpRight=0;}
                                if(htmlRahmenLinien=="cols") {borderHelpBottum=0;borderHelpRight=1;}
                                if(htmlRahmenLinien=="none") {borderHelpBottum=0;borderHelpRight=0;}
                                if(htmlRahmenLinien=="all")  {borderHelpBottum=1;borderHelpRight=1;}
                                zentriert ? htmlcenterHelp="auto" : htmlcenterHelp="left";
                                zentriert ? htmlcenterHelp2="center" : htmlcenterHelp2="left";
                                 
                                 
                                const htmlZentriert='<center>'
                                const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">"+
                                                   "<style> * {  margin: 0;} body {background-color: "+backgroundAll+"; margin: 0 auto;  }"+
                                                   " p {padding-top: 10px; padding-bottom: 10px; text-align: "+htmlcenterHelp2+"}"+
                                                  // " div { margin: 0 auto;  margin-left: auto; margin-right: auto;}"+
                                                   " td { padding:"+abstandZelle+"px; border:0px solid "+htmlFarbTableBorderColor+";  border-right:"+borderHelpRight+"px solid "+htmlFarbTableBorderColor+";border-bottom:"+borderHelpBottum+"px solid "+htmlFarbTableBorderColor+";}"+ 
                                                   " table { width: "+weite+";  margin: 0 "+htmlcenterHelp+"; border:1px solid "+htmlFarbTableBorderColor+"; border-spacing=\""+abstandZelle+"0px\" ; }"+   // margin macht center
                                                   "td:nth-child(1) {width: "+htmlSpalte1Weite+"}"+"td:nth-child(2) {width:"+htmlSpalte1Weite+"}"+
                                                   " </style></head><body> <div>";
                                //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";                    
                                const htmlTabStyle= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"2px\" cellspacing=\""+abstandZelle+"\" cellpadding=\""+abstandZelle+"\" width=\""+weite+"\" rules=\""+htmlRahmenLinien+"\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                                      "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
                                const htmlTabUeber1="<tr height=\""+UeberSchriftHöhe+"\" style=\"color:"+htmlFarbTableColorUber+"; font-size: "+groesseUeberschrift+"px; font-weight: "+UeberschriftStyle+" ;  border-bottom: "+LinieUnterUeberschrift+"px solid "+farbeLinieUnterUeberschrift+" \">";
                                const htmlTabUeber3="</tr>";
                                 
                                 
                                //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 5
                                 
                                 
                                var htmlTabUeber2="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+">&ensp;"+htmlFeld2+"&ensp;</td><td  align="+Feld3lAlign+">&ensp;"+htmlFeld3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+htmlFeld4+"&ensp;</td><td  align="+Feld5lAlign+">&ensp;"+htmlFeld5+"&ensp;</td><td  align="+Feld6lAlign+">&ensp;"+htmlFeld6+"&ensp;</td>";
                                var htmlTabUeber2_1="<td width="+htmlSpalte1Weite+" align="+Feld1lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td width="+htmlSpalte1Weite+" align="+Feld2lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+
                                                   "&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                                                   "&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld5+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld6+"&ensp;</td>";
                                                       //------------------------------------------------------
                                const dpPrefix = "javascript."+ instance +".";
                                 
                                var myMessung=[];
                                var htmlOut="";
                                var mix;
                                var counter;
                                var val1; var val2; var val0; var val3; var val4; var val5; 
                                var htmlTabUeber="";
                                function writeHTML(){
                                 
                                 
                                 
                                htmlOut="";
                                 
                                counter=-1;
                                htmlTabUeber="";
                                switch (mehrfachTabelle) { 
                                   case 1: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber3;  break;
                                   case 2: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                   case 3: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2+htmlTabUeber2+htmlTabUeber3; break;
                                   case 4: htmlTabUeber=htmlTabUeber1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber2+htmlTabUeber2_1+htmlTabUeber3; break;
                                }; 
                                if (!UeberschriftSpalten) {htmlTabUeber=""}  
                                 
                                //--------------------------------------------------------------------------------------------------------------------------------------------------
                                //---------hier kommt eure schleife rein counter++, tabelleBind() und tabelleFinish() müssen so integriert bleiben !!!------------------------------
                                //---------alle valx werte müssen von euch bestimmt werden - val0,val1,val2,val3,val4!!!------------------------------------------------------------
                                //--------------------------------------------------------------------------------------------------------------------------------------------------
                                 
                                myMessung=getState(dpPrefix+"Tabellen.Web-Speedy-Test.Messungen").val
                                let myTime= formatDate(getDateObject(getState("web-speedy.0.Results.Last_Run").val ), "SS:mm:ss") //getState("web-speedy.0.Results.Last_Run").val          
                                let myDL=((getState("web-speedy.0.Results.speeds.download_Mb").val).toFixed(2))+" MB/s"
                                let myUL=((getState("web-speedy.0.Results.speeds.upload_Mb").val).toFixed(2))+" MB/s"
                                let myPing=(getState("web-speedy.0.Results.server.ping").val)+" ms"
                                let myServer=getState("web-speedy.0.Results.server.sponsor").val +" / "+getState("web-speedy.0.Results.server.location").val
                                let myDur=getState("web-speedy.0.test_duration").val+" s"
                                 
                                 
                                let help=[myTime,myDL,myUL,myPing,myServer,myDur]
                                 
                                if (myMessung.length>=anzahlMessung) myMessung.shift()
                                              myMessung.push(help)
                                 
                                setState(dpPrefix+"Tabellen.Web-Speedy-Test.Messungen", myMessung)               
                                if (neuOben){
                                //for (var i=0;i<myMessung.length;i++) {           // hier eigene schleife definieren
                                for (var i=myMessung.length-1; i>=0;i--) {           // hier eigene schleife definieren
                                       
                                       
                                          counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                                          val0=myMessung[i][0]
                                          val1=myMessung[i][1]
                                          val2=myMessung[i][2]
                                          val3=myMessung[i][3]
                                          val4=myMessung[i][4]
                                          val5=myMessung[i][5]
                                 
                                     tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
                                 
                                   } //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!
                                } else { 
                                   
                                        for (var i=0;i<myMessung.length;i++) {           // hier eigene schleife definieren
                                          counter++;                                       // SEHR WICHTIG - MUSS IN JEDER SCHLEIFE INTEGRIERT SEIN
                                          val0=myMessung[i][0]
                                          val1=myMessung[i][1]
                                          val2=myMessung[i][2]
                                          val3=myMessung[i][3]
                                          val4=myMessung[i][4]
                                          val5=myMessung[i][5]
                                 
                                     tabelleBind(); //HIER NICHTS ÄNDERN : HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT  - diese function muss als letztes in der eigenen schleife aufgerufen werden
                                 
                                   };
                                   } //Schleifen Ende - je nach schleifenart muss hier etwas geändert werden !!!!!!!!!}
                                     tabelleFinish(); // AB HIER NICHTS ÄNDERN - tabelle fertigstellen
                                }
                                //-------------------------------------------------------------------------------------------------------------------------------------------------
                                //--------------------------------------------------Ende der schleife------------------------------------------------------------------------------
                                //-------------------------------------------------------------------------------------------------------------------------------------------------
                                 
                                 
                                //MAIN:
                                 
                                on({id: "web-speedy.0.running", val: false}, function (obj) {
                                  writeHTML();
                                   if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
                                });
                                 
                                createState(dpPrefix+"Tabellen.Web-Speedy-Test.Messungen", [],  { name: 'Web-Speedy-Test', desc: 'Web-Speedy-Test', type: 'array',read: true, write: true }); 
                                createState(dpPrefix+"Tabellen.Web-Speedy-Test.VISAnzeige", "<center><p style=\"color:white\"> kommt gleich .....</p>",  { name: 'VISAnzeige', desc: 'VIS mit Binding im HTML Widget', type: 'string',read: true, write: true }); 
                                 
                                //schedule(mySchedule,  function () {
                                // writeHTML();
                                // if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
                                //});
                                 
                                // writeHTML();
                                 
                                   				 function tabelleBind(){
                                     //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 5 Felder definiert, braucht man hier 5 Werte
                                   
                                       switch (mehrfachTabelle) {  
                                        case 1:  if(counter%2==0) {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>"; break; } else
                                                                  {  htmlOut=htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>"; break;}
                                       
                                        case 2:  if(counter%4==0){
                                                if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                                              else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} break;
                                                   }else{
                                                 if(counter%2==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                                              else {htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} break;}
                                                                   
                                        case 3:  if(counter%2==0)   {
                                                  if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                                              else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                                               else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>";}
                                                                         } break;}else{
                                                 if(counter%3==0 )  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                                              else { if(counter%3==1 )  { htmlOut = htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                                               else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td></tr>";}
                                                                         } break;}
                                 
                                 
                                        case 4:   if(counter%8==0)   {
                                                  if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeGeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val3+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                                                  else {if(counter%4==1 )  { htmlOut = htmlOut+"<td  align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                                               else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+" >&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} 
                                                                                                 else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td>&ensp;"+val1+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>";}}
                                                                         } break;}else{
                                                  if(counter%4==0)  {htmlOut = htmlOut+"<tr bgcolor=\""+farbeUngeradeZeilen+"\"><td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val3+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>"; } 
                                                                  else {if(counter%4==1 )  { htmlOut = htmlOut+"<td  align="+Feld1lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\"  border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"; color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td>";} 
                                                                               else    {if(counter%4==3)  { htmlOut= htmlOut+"<td align="+Feld1lAlign+"  style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align="+Feld2lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align="+Feld3lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align="+Feld4lAlign+" style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td><td align="+Feld5lAlign+">&ensp;"+val4+"&ensp;</td><td align="+Feld6lAlign+" style=\" color:"+htmlFarbFelderschrift2+"\">&ensp;"+val5+"&ensp;</td></tr>";} 
                                                                                                 else    {htmlOut = htmlOut+"<td align="+Feld1lAlign+" >&ensp;"+val0+"&ensp;</td><td>&ensp;"+val1+"&ensp;</td><td align="+Feld2lAlign+">&ensp;"+val2+"&ensp;</td><td align="+Feld3lAlign+">&ensp;"+val3+"&ensp;</td><td align="+Feld4lAlign+">&ensp;"+val4+"&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+";\" align="+Feld6lAlign+">&ensp;"+val5+"&ensp;</td>";}}
                                                                         } break;}                       
                                 
                                     } //switch ende
                                 
                                 
                                 
                                }
                                 
                                function tabelleFinish() {
                                 
                                      // tabelle fertigstellen
                                switch (mehrfachTabelle) {  
                                       case 1:    break;
                                 
                                       case 2:    
                                                  if(counter%2==0)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                                
                                                  break;
                                 
                                       case 3:   if(counter%3==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                                                 if(counter%3==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");        
                                                 if(counter%3==0)      htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td  style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                               
                                                  break;
                                       case 4:   if(counter%4==3)  htmlOut = htmlOut.replace(/<\/td>$/, "</td></tr>");
                                                 if(counter%4==2)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");
                                                 if(counter%4==1)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");    
                                                 if(counter%4==0)  htmlOut = htmlOut.replace(/<\/td>$/, "</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td style=\" border-right: "+trennungsLinie+"px solid "+farbetrennungsLinie+"\">&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>");      
                                                 break; }
                                     
                                                    var htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: "+htmlÜberFontGroesse+"; font-weight:"+htmlSchriftWeite+ "\">"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss");+"</p>"; 
                                       var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 70%; text-align: center;\" >"+"Speedtest"+"&ensp;&ensp;direkt: <a href=\"https:\/\/"+ "www.speedtest.net/" + "\" target=\"_blank\" onclick=\"window.open(this.href,this.target,\'width=760,height=640\'); return false;\">"+symbolLink+"</a></div>"
                                                                                                                                                                                                     
                                        if (!htmlSignature) htmlUnter="";
                                          //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                                           var htmlOutVIS="";
                                         //  htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>";
                                            if (htmlUberschrift) 
                                                { zentriert ? htmlOutVIS=htmlZentriert+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter : htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter ;
                                 
                                              } else {
                                               zentriert ?  htmlOutVIS=htmlZentriert+htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter :  htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"+htmlUnter;
                                 
                                                 }
                                 
                                // log("bin raus aus tabelleBind");
                                           if (braucheEinVISWidget) setState(dpPrefix+"Tabellen.Web-Speedy-Test.VISAnzeige", htmlOutVIS );
                                 
                                 var htmlUnter= "<div  style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-size: 80%;  text-align: center; \" >"+htmlFeldUeber+"&ensp;&ensp;Last Update: "+formatDate(getDateObject((parseFloat((new Date().getTime())))), "SS:mm:ss")+"</div>"
                                 var htmlEnd="</table>"+htmlUnter+"</div></body>";
                                 if (!htmlSignature) htmlUnter="";
                                 
                                 //mit oder ohne überschrift - zentriert oder links
                                htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
                                 //log(htmlOut);
                                 
                                 
                                 
                                }
                                
                                K 1 Reply Last reply Reply Quote 0
                                • sigi234
                                  sigi234 Forum Testing Most Active @KHK last edited by

                                  @khk
                                  https://forum.iobroker.net/topic/30226/html-tabelle-für-webspeedy-adapter-vis-iqontrol

                                  1 Reply Last reply Reply Quote 0
                                  • K
                                    KHK @Negalein last edited by KHK

                                    @negalein

                                    ds Script habe ich - muss sagen, ich bin totaler Laie in Javascript -
                                    wo ich aber dran hänge ist, dass bei der Definition des Pfadbzw. Filenamen. Dieser im Beispiel genannte Pfad "/htmlexample.html" - ich gehe davon aus, dass ich hier einen Dateinamen angeben muss - ist das dann der in der Widget anzugebene Viewname? Ich finde diese Datei in dem Pfad vis.0, aber wie muss ich das jetzt im Widget hinterlegen?
                                    wie gesagt, über den Button "PopUp Tabelle" wird mir als sep. Fenster ja auch die Tabelle ausgegeben, aber nicht in der Tabelle des Views/Widget...

                                    Negalein 1 Reply Last reply Reply Quote 0
                                    • Negalein
                                      Negalein Global Moderator @KHK last edited by Negalein

                                      @khk sagte in VIS von Sigi234:

                                      wo ich aber dran hänge

                                      ich verwende das Script nicht mehr.
                                      Die .html war für Iqontrol, glaub ich gedacht.

                                      Hab gerade noch die View der Tabelle gefunden.
                                      Nimm ein Basic-HTML Widget und füge unter Allgemein ---> HTML {javascript.0.Tabellen.Web-Speedy-Test.VISAnzeige} (Pfad kann bei dir etwas anders aussehen) ein (inklusive der geschweiften Klammern).
                                      Im Editor siehst du die Tabelle noch nicht. Erst in der Runtime!

                                      K 1 Reply Last reply Reply Quote 0
                                      • K
                                        KHK @Negalein last edited by KHK

                                        @negalein said in VIS von Sigi234:

                                        {javascript.0.Tabellen.Web-Speedy-Test.VISAnzeige}

                                        Super - herzlichen Dank ....einfach, man muss es halt nur wissen!!!!

                                        Ich habe noch einen Effekt, wo ich auch nicht weiter komme. In der grafischen Darstellung de Geschwindigkeiten tritt folgender Effekt auf:
                                        17-07-_2021_08-16-44.jpg

                                        Die eingeblendeten Zahlen in den "Ergebnis-Grafiken" bleiebn kontinuierlich, während dieser "Grafik-Fehler" in den aktuellen Geschwindigkeiten nach einen Neu-Aufruf der View verschwindet - taucht wieder auf, wenn ich mehrmals manuell einen Geschwindigkeitstest aufrufe.
                                        Finde keinen Hinweis, ob es eine Einstellungsache ist oder ob es ein Problem der Grafik(karte) ist...

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

                                          @khk

                                          Einstellungssache

                                          K 1 Reply Last reply Reply Quote 0
                                          • K
                                            KHK @sigi234 last edited by

                                            @sigi234 said in VIS von Sigi234:

                                            Einstellungssache

                                            an welchen Stellen?

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            977
                                            Online

                                            31.7k
                                            Users

                                            79.6k
                                            Topics

                                            1.3m
                                            Posts

                                            ode abfrage vis vis projekte
                                            151
                                            1344
                                            515193
                                            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