Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. Sonoff Geräte als HTML Tabelle - Vis

    NEWS

    • Neues Video "KI im Smart Home" - ioBroker plus n8n

    • Neues Video über Aliase, virtuelle Geräte und Kategorien

    • Wir empfehlen: Node.js 22.x

    Sonoff Geräte als HTML Tabelle - Vis

    This topic has been deleted. Only users with topic management privileges can see it.
    • Latzi
      Latzi @liv-in-sky last edited by

      @liv-in-sky sagte in Sonoff Geräte als HTML Tabelle - Vis:

      evtl liegt es daran, das du im namen "Temperaturen" hast - ist es möglich, das mal zu ändern z.b sonoff.0.Heizung-Temps.DS18B20-7

      das war´s - jetzt läuft es - vielen, herzlichen Dank!!!

      1 Reply Last reply Reply Quote 0
      • liv-in-sky
        liv-in-sky @Latzi last edited by

        @latzi

        ich verstehe den fehler mittlerweile - ist es möglich - das device so umzubennen, das "Temperature" nicht mehr im namen oder der id vorkommt ?

        1 Reply Last reply Reply Quote 0
        • liv-in-sky
          liv-in-sky @Latzi last edited by liv-in-sky

          @latzi

          ahh - ok - du hast es getetestet - dann ist ja alles soweit gut

          jetzt ist nur seltsam, das ich auch einen solchen habe - der aber funktioniert 🙂

          Image 004.png

          muss wohl nochmal etwas darüber nachdenken 😞

          EDIT: ich habe ja nur Temperatur im namen und nicht "Temperature(n)"

          Latzi 1 Reply Last reply Reply Quote 0
          • Latzi
            Latzi @liv-in-sky last edited by

            @liv-in-sky sagte in Sonoff Geräte als HTML Tabelle - Vis:

            EDIT: ich habe ja nur Temperatur im namen und nicht "Temperature(n)"

            so einen hab ich auch, der macht keine Probleme 😉

            1 Reply Last reply Reply Quote 0
            • M
              micklafisch last edited by

              Hallo,
              da die Zahl meiner sonoff Geräte wächst, suche ich nach einer besseren Möglichkeit das ganze in der VIS darzustellen als jedes Gerät einzeln anzulegen.

              Ich habe hierzu das letzte Script von Github hergenommen und dazu etwas modifiziert bezüglich der Spaltenauswahl. Ich bin noch nicht ganz fertig, habe aber folgendes Problem bereits jetzt:

              Sobald ich über die Spalte "Power" ein Gerät schalte zerlegt es mir die Ansicht aufgrund der ausgeblendeten Spalten bis ich das Skript stoppe und wieder starte. Danach ist wieder alles wie von mir editiert. Trotz der ganzen Auskommentierungen im Skript kann ich nicht erkennen was zwischen dem Skriptstart und dem anschalten eines Gerätes für ein Unterschied besteht.

              Vor dem schalten:
              282d8d75-cd78-432c-aa9f-18c9dca99e65-image.png

              Nach dem schalten:
              5c27a19a-612c-4031-99b2-51719ec8f2eb-image.png

              liv-in-sky 1 Reply Last reply Reply Quote 0
              • liv-in-sky
                liv-in-sky @micklafisch last edited by

                @micklafisch

                scheint ein bug zu sein

                problem - wenn man den schalter in der tabelle drückt, soll ja die anzeige so bleiben wie sie ist, ansonsten wird das ganze refreshed und die tabelle springt zur ersten zeile - das wäre etwas nervig, weil man die zeile des gerätes immer wieder suchen müßte

                dummerweise braucht das ganze beim ausblenden einer spalte aber einen ganzen refresh um das ausblenden wieder zu aktivieren

                die function, die das ganze ein und ausblenden bretreut, ist makeMyVisScripte()

                nur schnell überflogen - daher nicht ganz sicher:

                man müßte die variable spaltenAnzeigeScript + spaltenAnzeigeScriptEnd die so aussieht:

                 $(document).ready(function() { $('td:nth-child(2).toDelSONOFFTabelleVIS,th:nth-child(2).toDelSONOFFTabelleVIS').hide();
                

                wohl zusätzlich als extra function einbinden, die aufgerufen wird, wenn geschaltet wird - da document-ready anscheinend nur aufgerufen wird , wenn ein ganzer refresh kommt und der kommt beim schalten nicht

                M 1 Reply Last reply Reply Quote 0
                • M
                  micklafisch @liv-in-sky last edited by

                  @liv-in-sky
                  Vielen Dank für die Antwort. Ich habe es jetzt 5 oder 6 mal gelesen, parallel das Skript angeschaut und leider überhaupt keinen Plan was du damit meinst.

                  Die Variablen habe ich, aber die erwähnte Codezeile gibt es so bei mir nicht. Ich finde nicht einmal den Punkt wo geschaltet wird. Ich verliere in dem ganzen Quellcode völlig den Überblick. Habe schon versucht in einem 2. Anlauf mal alles "überflüssige" wie Auskommentierungen und die Flexansicht zu entfernen, aber das haut nur noch mehr quer.

                  liv-in-sky 3 Replies Last reply Reply Quote 0
                  • liv-in-sky
                    liv-in-sky @micklafisch last edited by

                    @micklafisch wenn ich zeit finde, schaue ich am WE mal, ob mein plan funktionieren würde

                    1 Reply Last reply Reply Quote 1
                    • liv-in-sky
                      liv-in-sky @micklafisch last edited by liv-in-sky

                      @micklafisch

                      ich habe dich nicht vergessen, aber ich habe wenig zeit und das script habe ich nicht wirklich gut dokumentiert.

                      irgendwie habe ich es hinbekommen, das die spalten ausgeblendet bleiben

                      im beispiel habe ich 2 spalten (online,rssi) ausgeschlossen

                      Image 191.png

                      sieht dann so aus: das müßte der fehler bei dir sein - oder - ich klicke auf einen schalter und nach dem refresh bleiben jetzt die spalten versteckt

                      sonoff-bug.gif

                      1 Reply Last reply Reply Quote 0
                      • liv-in-sky
                        liv-in-sky @micklafisch last edited by

                        @micklafisch

                        zu ändern - ganz oben diese zeile einfügen:

                        Image 185.png

                        und ganz unten ersetze die ganze funktion (aufpassen ! - mach dir vorher eine kopie des scriptes!!!!:

                        Image 187.png

                        bis:

                        Image 189.png

                        hier die neue funktion:

                        
                        async function makeMyVisScripte() {
                        
                            let valSpalte=[] ;
                           for(let kk=0;kk<val.length;kk++){
                             valSpalte.push(val[kk])
                           }
                        //log(valSpalte)
                           refreshHelperOn ? refreshHelper=`$(".tableContainer${dpVIS}").ready(function() { javaScriptFunction();$.jqueryFunctionHelp${dpVIS}(); setTimeout(function () { console.log("---------------------------document ready remove display-none sonoff");   $(".myclasstr_gerade${dpVIS}").removeAttr( 'style' ); $(".myclasstr_ungerade${dpVIS}").removeAttr( 'style' );   }, 3000)  } );` : refreshHelper="";
                           let spaltenAnzeigeScript=`$(document).ready(function() { `
                           let spaltenAnzeigeScriptEnd=` });` ;
                          
                           let helpScript=false;
                           
                             for (let ff=0;ff<(valSpalte.length);ff++){
                                                                //log(valSpalte[ff]); 
                                                                if (valSpalte[ff]=="false") { helpScript=true;
                                                                                             // nScript=`$('td:nth-child(${(ff+1)}).toDel${dpVIS},th:nth-child(${(ff+1)}).toDel${dpVIS}').hide();`
                                                                                              spaltenAnzeigeScript=spaltenAnzeigeScript.concat(`$('td:nth-child(${(ff+1)}).toDel${dpVIS},th:nth-child(${(ff+1)}).toDel${dpVIS}').hide();`) 
                                                                                              nurAusblendennScript=nurAusblendennScript.concat(`$('td:nth-child(${(ff+1)}).toDel${dpVIS},th:nth-child(${(ff+1)}).toDel${dpVIS}').hide();`)
                                                                                           //  log(spaltenAnzeigeScript)
                                                                                              if (mehrfachTabelle==2) {spaltenAnzeigeScript=spaltenAnzeigeScript.concat(`$('td:nth-child(${(ff+1+valSpalte.length)}).toDel${dpVIS},th:nth-child(${(ff+1+valSpalte.length)}).toDel${dpVIS}').hide();`) }
                                                                                              if (mehrfachTabelle==3) {spaltenAnzeigeScript=spaltenAnzeigeScript.concat(`$('td:nth-child(${(ff+1+(2*valSpalte.length))}).toDel${dpVIS},th:nth-child(${(ff+1+(2*valSpalte.length))}).toDel${dpVIS}').hide();`) }                        
                                                                }}
                                                              //  log("eins: "+ nurAusblendennScript)
                                                                 //  nurAusblendennScript=`$('td:nth-child(2).toDelSONOFFTabelleVIS,th:nth-child(2).toDelSONOFFTabelleVIS').hide();`
                                                                  // log(nurAusblendennScript)
                                                                if (!helpScript) {spaltenAnzeigeScript=spaltenAnzeigeScriptEnd=""}
                        //setTimeout(function (){
                          // await wait(1000);
                        buttonScript =   '<script> '
                                             + `function setOnOtherValue(myval) {	var Self = this;	Self.servConn.getStates(myval, (error, states) => {  /*console.log(states);*/ self.servConn.setState(myval, !states[myval].val);}  )};javaScriptFunction(); `
                            /*ueberschr.*/   + '$( "button.myButt'+dpVIS+'" ).click(function() {  $( this ).slideUp() ; setTimeout(function() { $( "button.myButt'+dpVIS+'" ).hide()  ; $( ".mySpan'+dpVIS+'" ).text(\"wait ...\")}, 500); });' //'[class*="test"]' [class~="value"]   "[class~='gerade']"
                            /*search*/       + `var allRows${dpVIS} = $("[class*='gerade${dpVIS}']");  $("input.myinputclass${dpVIS}").on("keydown keyup", function() {  allRows${dpVIS}.hide();  $("tr:contains('" + $(this).val() + "')").show(); });`
                            /*search*/       + `var allRows2${dpVIS} = $("div.divFlexBoxenEinzeln${dpVIS}"); /*console.log(allRows2${dpVIS});*/  $("input.myinputclass${dpVIS}").on("keydown keyup", function() {  allRows2${dpVIS}.hide();  $("div.divFlexBoxenEinzeln${dpVIS}:contains('" + $(this).val() + "')").show(); var $gesucht${dpVIS}=$(this).val(); vis.setValue('${welcherSpeicherOrt}.Spalte11',$(this).val()); /*console.log('val: '+$gesucht${dpVIS})*/ });`
                                         //    + `$( ".seitenleiste${dpVIS}:not(.sonderTablet${dpVIS})" ).click(function() { $( "button.myButt${dpVIS}" ).slideUp() ; setTimeout(function() { $( "button.myButt${dpVIS}" ).hide()  ; $( ".mySpan${dpVIS}" ).text(\"refresh\")}, 500); var Self = this; var myvali='${welcherSpeicherOrt}.Spalte8'; vis.setValue(myvali,true) ; vis.setValue('${welcherSpeicherOrt}.Spalte11',''); console.log("spalt8")   });`
                            /*refresh Site*/ + `$( ".refreshSie${dpVIS},.close${dpVIS}" ).click(function() { $( "button.myButt${dpVIS}" ).slideUp() ; setTimeout(function() { $( "button.myButt${dpVIS}" ).hide()  ;`
                                             + `$( ".mySpan${dpVIS}" ).text(\"refresh\")}, 200); setTimeout(function () { var Self = this; var myvali='${welcherSpeicherOrt}.Spalte8';/*console.log(myvali)*/; self.servConn.getStates(myvali, (error, states) => {  /*console.log(states);*/ self.servConn.setState(myvali, !states[myvali].val);}  ) ;}, 500);`
                                             + `vis.setValue('${welcherSpeicherOrt}.Spalte11',''); console.log("Refresh Table") ;vis.setValue('${welcherSpeicherOrt}.Spalte12','iframe_closed');vis.setValue('${welcherSpeicherOrt}.Spalte13',0);vis.setValue('${welcherSpeicherOrt}.Spalte14',0)  });`
                                        //   + `$( ".seitenleiste${dpVIS}:not(.seitenleiste${dpVIS}.sonderTablet${dpVIS})" ).click(function() {var Self = this; var myvali='javascript.${instance}.Tabellen@Liv.${dpVIS}.Spalte5'; vis.setValue(myvali,true) ; console.log("spalt5")   });`
                            /*dbclick*/      + `$( "[class*='gerade${dpVIS}']" ).dblclick(function() {var Self = this; var myvali='${welcherSpeicherOrt}.Spalte9'; self.servConn.getStates(myvali, (error, states) => {  console.log(states); self.servConn.setState(myvali, !states[myvali].val);}  ); console.log("spalt9") ;vis.setValue('${welcherSpeicherOrt}.Spalte13',0) ;vis.setValue('${welcherSpeicherOrt}.Spalte14',0) });`
                            /*dbclick*/      + `$( "[class*='divFlexBoxen${dpVIS}']" ).dblclick(function() {var Self = this; var myvali='${welcherSpeicherOrt}.Spalte9'; self.servConn.getStates(myvali, (error, states) => {  console.log(states); self.servConn.setState(myvali, !states[myvali].val);}  ); console.log("spalt9") ; vis.setValue('${welcherSpeicherOrt}.Spalte13',0);vis.setValue('${welcherSpeicherOrt}.Spalte14',0) });`
                            /*tablet*/       + `$( ".sonderTablet${dpVIS}" ).click(function() { var myvali='${welcherSpeicherOrt}.Spalte10'; self.servConn.getStates(myvali, (error, states) => {  console.log(states); self.servConn.setState(myvali, !states[myvali].val);}  ); console.log("spalt10"); vis.setValue('${welcherSpeicherOrt}.Spalte13',0);;vis.setValue('${welcherSpeicherOrt}.Spalte14',0)  });`
                           	              + `function setOnDblClickCustom( myvalue ) {	var Self = this; var objID = myvalue;	Self.servConn.getStates(objID, (error, states) => {  /*console.log(states);*/  Self.servConn.setState(objID, !states[objID].val); }); javaScriptFunction() };`
                           /*iFrame*/        + `$(".ipFlexIframe${dpVIS}").click(function() { /*console.log($(this).val());*/ $(".close${dpVIS}").text("close(x)");$(".close${dpVIS}").attr('style','color: ${farbeNichtConnected}');$(".divFlexBoxen${dpVIS}").animate({ scrollTop: 0 });
                                                $("#iframe${dpVIS}").attr('src', $(this).val()).attr('width','460').attr('frameborder','1').attr('height','780').attr('style','background: linear-gradient(${htmlGradient[0]}deg,${htmlFarbTableColorGradient2} 10%,${htmlFarbTableColorGradient1} 20%)');vis.setValue('${welcherSpeicherOrt}.Spalte12','iframe_offen'); console.log("spalt12"); }); `
                                        //   + `$( ".divFlexBoxenEinzeln${dpVIS} .retteAnsicht${dpVIS}" ).click(function() { vis.setValue('${welcherSpeicherOrt}.Spalte12','iframe_offen'); console.log("spalt12") });`   
                           /*focus tab*/     + `var row_index${dpVIS}=0;  $( ".retteAnsicht${dpVIS}" ).click(function() {  row_index${dpVIS} = $(".tableContainer${dpVIS}").scrollTop(); vis.setValue('${welcherSpeicherOrt}.Spalte13',row_index${dpVIS}); /*console.log('scrollscrollscrollscroll table: '+ $(".tableContainer${dpVIS}").scrollTop()); */ });`  //.position().top
                           /*focus flex*/    + `                          $( ".retteAnsicht${dpVIS}" ).click(function() {  row_index${dpVIS} = $(".divFlexBoxen${dpVIS}").scrollTop(); if (row_index${dpVIS} != null){  vis.setValue('${welcherSpeicherOrt}.Spalte13',row_index${dpVIS}) } ; /*console.log('scrollscrollscrollscroll flexbox: '+ $(".divFlexBoxen${dpVIS}").scrollTop());*/  });`  //.position().top
                           /*scroll all*/    + `$('.tableContainer${dpVIS}').scroll(function(){var scrollPos1${dpVIS} = $('.tableContainer${dpVIS}').scrollTop()/*;console.log(scrollPos1${dpVIS})*/;vis.setValue('${welcherSpeicherOrt}.Spalte14',scrollPos1${dpVIS})});`
                                             + `$('.divFlexBoxen${dpVIS}'  ).scroll(function(){var scrollPos1${dpVIS} = $('.divFlexBoxen${dpVIS}'  ).scrollTop()/*;console.log(scrollPos1${dpVIS})*/;vis.setValue('${welcherSpeicherOrt}.Spalte14',scrollPos1${dpVIS})});`    
                           /*holt Input DP*/ + `var gesucht${dpVIS}; var myState='${welcherSpeicherOrt}.Spalte11'; /*console.log(myState) ;*/ var Self=this; Self.servConn.getStates( myState, (error, states) => {  /*console.log('states: ' + states['${welcherSpeicherOrt}.Spalte11'].val );*/ gesucht${dpVIS} = states['${welcherSpeicherOrt}.Spalte11'].val; /*console.log("gesucht: "+ gesucht${dpVIS});*/  });`
                           /*erst. jQfunc*/  + `var jqueryFunction${dpVIS} ;   $.jqueryFunction${dpVIS} = function( _msg${dpVIS} ) {  console.log( allRows${dpVIS}[0] ); allRows${dpVIS}.hide();  $("tr:contains('" + _msg${dpVIS} + "')").show();  allRows2${dpVIS}.hide();  $("div.divFlexBoxenEinzeln${dpVIS}:contains('" + _msg${dpVIS} + "')").show();  } ; `                     
                           /*Input again*/   + `setTimeout(function(){   /*console.log('gesucht2: '+gesucht${dpVIS});*/ if (gesucht${dpVIS}!="") $.jqueryFunction${dpVIS}(gesucht${dpVIS}) ;$("#search${dpVIS}").val(gesucht${dpVIS});   }, 300);  `
                                             + `var Self=this; Self.servConn.getStates( '${welcherSpeicherOrt}.Spalte13', (error, states) => { /* console.log('states: ' + states['${welcherSpeicherOrt}.Spalte13'].val );*/ row_index${dpVIS} = states['${welcherSpeicherOrt}.Spalte13'].val; /*console.log("row_index nach dp: "+ row_index${dpVIS});*/ $(".tableContainer${dpVIS}").animate({ scrollTop: row_index${dpVIS} }, 0);  $(".divFlexBoxen${dpVIS}").animate({ scrollTop: row_index${dpVIS} },0);  });` /*$(".divFlexBoxen${dpVIS}").scrollTop(row_index);*/ 
                                       
                                             + ` $.jqueryFunctionHelp${dpVIS} = function() {console.log("in jqueryFuction" ); ${nurAusblendennScript}   } ;function javaScriptFunction() { setTimeout(function () {console.log("jetzt hide spalte"); $.jqueryFunctionHelp${dpVIS}();console.log("jetzt hide spalte fertig")  }, 5000) ; }; ` 
                                             + refreshHelper +   spaltenAnzeigeScript  +  spaltenAnzeigeScriptEnd                                                                   
                                             +'</script>'
                        
                        //.close${dpVIS} Spalte15
                        //},500)
                        }
                        

                        hoffe es klappt und funktioniert 🙂

                        blue231181 1 Reply Last reply Reply Quote 0
                        • blue231181
                          blue231181 @liv-in-sky last edited by

                          @liv-in-sky etwas ruhig hier geworden. Leider bin ich gestern erst über dieses gewaltige Script gestolpert, und hat wunderbar funktioniert es einzubinden. Vielen Dank für deine Mühe!!

                          Leider bin ich mit Javascript nicht sehr bewandert, ich hätte das ganze gerne höher in meiner VIS Ansicht. Mein Monitor hat eine Auflösung von 1920x1200 und die möchte ich auch nutzen. (Bis auf die Navigation im unteren Bereich)

                          Also habe ich das Basic HTML Widget auf 1920x1100 Pixel eingestellt, die Tabelle füllt aber von der Höhe den Bereich nicht ganz aus.

                          Screenshot 2025-09-12 094721.jpg Hier wäre noch Luft

                          Wo kann ich die Höhe der Anzeige verändern?

                          Danke im voraus und viele Grüße

                          liv-in-sky 1 Reply Last reply Reply Quote 0
                          • liv-in-sky
                            liv-in-sky @blue231181 last edited by

                            @blue231181

                            hoffe ich erinnere mich noch richtig daran:

                            probier mal :

                            Image 086.png

                            blue231181 1 Reply Last reply Reply Quote 1
                            • blue231181
                              blue231181 @liv-in-sky last edited by

                              @liv-in-sky Hat funktioniert, vielen Dank

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

                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              484
                              Online

                              32.1k
                              Users

                              80.6k
                              Topics

                              1.3m
                              Posts

                              javascript monitoring template
                              34
                              632
                              116573
                              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