Sonoff Geräte als HTML Tabelle - Vis

[Latzi]

@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

[micklafisch]

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:

Nach dem schalten:

[liv-in-sky]

@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

[micklafisch]

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

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

[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

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

[liv-in-sky]

@micklafisch

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

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

bis:

hier die neue funktion:

Spoiler

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]

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

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]

@blue231181

hoffe ich erinnere mich noch richtig daran:

probier mal :

[blue231181]

@liv-in-sky Hat funktioniert, vielen Dank