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

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    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 🙂

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

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        500
                        Online

                        31.7k
                        Users

                        79.6k
                        Topics

                        1.3m
                        Posts

                        javascript monitoring template
                        33
                        629
                        98217
                        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