Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. JavaScript
    5. suche javascript und vis expertenwissen

    NEWS

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    suche javascript und vis expertenwissen

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

      ich hätte da ein frage - ich kann über ein js-script eine checkbox in einem html-widget erzeugen - also keine checkbox als widget sondern über html erzeugt !

                 if (val1==false) {val1="<input type='checkbox' id='"+val0+val1+val2+val3+"' .....
      

      weiß jemand , wie ich darauf reagieren kann - geht das über den script-tab in der vis ? geht das überhaupt

      @senger1985

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

        habe sowas gefunden

        Image 9.png

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

          @senger1985

          die id habe wir ja - die kann man ja direct gleich setzen mit der alexa-item id

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

            @liv-in-sky
            Schau mal hier. Da ist das Prinzip sichtbar.
            https://stackoverflow.com/questions/2055459/dynamically-create-checkbox-with-jquery-from-text-input

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

              @senger1985

              nimm mal das script - ist neu mit deiner zeile drin

              
              
              //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=false;                          // bei true wird ein file geschrieben - für iqontrol
              let   braucheEinVISWidget=true;                     // bei true wird ein html-tabelle in einen dp geschrieben - siehe nächste zeile
              let dpVIS="controll-own.0.AAATEST.TestHTML"         //WICHTIG wenn "braucheEinVISWidget" auf true gesetzt !!  dp zusätzlich für VIS-HTML-Basic-Widget // Datentyp: String
              let dPDELETE="controll-own.0.AAATEST.TestHTMLAuswahlDelete";                // Datentyp: Werteliste
              let dPDELETEWert="controll-own.0.AAATEST.TestHTMLAuswahlDeleteWert";        // Datentyp: String
              let dPDELETEAuswahl="controll-own.0.AAATEST.TestHTMLAuswahlDeleteAuswahl";  // Datentyp: String
              let dpANLEGEN="controll-own.0.AAATEST.Neues_ObjektTestHTMLAnlegen";         // Datentyp: String
              let mySchedule=" * * * * * ";                       //jede minute
              //---------------------------------------
              
              //HIER DIE SPALTEN ANZAHL DEFINIEREN - jede Spalte einen Wert - in diesem Beispiel sind es 4
              var htmlFeld1='Einkaufen';                            // überschrift Tabellen Spalte1
              var htmlFeld2='Finished';                              // überschrift Tabellen Spalte2
              var htmlFeld3='Created';                             // überschrift Tabellen Spalte3
              var htmlFeld4='Since...';                            // überschrift Tabellen Spalte4
              //-----------------------------------
              
              
              //hier werden die styles für die tabelle definiert
              //ÜBERSCHRIFT ÜBER TABELLE
              let   htmlUberschrift=true;                           // mit Überschrift über der tabelle
              const htmlFeldUeber="ALEXA ToDo's";              // Überschrift
              const htmlFarbUber="white";                         // Farbe der Ü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 htmlFarbZweiteTabelle="black";                // Farbe der Überschrift bei jeder 2.ten Tabelle
              const htmlFarbTableColorUber="black";               // Überschrift in der tabelle - der einzelnen Spalten
              //GANZE TABELLE
              const backgroundAll="#000000";
              const htmlSchriftart="Helvetica";
              const htmlSchriftgroesse="13px";
              //FELDER UND RAHMEN
              const htmlFarbFelderschrift="white";                  // SchriftFarbe der Felder
              const htmlFarbFelderschrift2="white";                 // SchriftFarbe der Felder für jede 2te Tabelle
              const htmlFarbTableColorGradient1="#66b8ea";          //  Gradient - Hintergrund der Tabelle - Verlauffarbe
              const htmlFarbTableColorGradient2="#5f85cf";          //  Gradient - Hintergrund der Tabelle - ist dieser Wert gleich Gradient1 gibt es keinen verlauf
              const htmlFarbTableBorderColor="#2C7FB6";             // Farbe des Rahmen - is tdieser gleich den gradienten, sind die rahmen unsichtbar
              const htmlRahmenLinien=1;                          // Format für Rahmen(Gitter)linien 1=alle - 2=nur vertikal - 3= nur horizontal - 4=keine
              
              
              // HIER NICHTS  ÄNDERN
              const htmlEnd=      '</table></body>';
              const htmlStart=    "<!DOCTYPE html><html lang=\"de\"><head><title>Vorlage</title><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\"></head><body bgcolor=\""+backgroundAll+"\">";
              //const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"</p>";
              const htmlTabStyleCol= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\"  rules=\"cols\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                    "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
              const htmlTabStyleRow= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\"  rules=\"rows\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                    "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";
              const htmlTabStyleAll= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\"  rules=\"all\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                    "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">";                                               
              const htmlTabStyleNone= "<table bordercolor=\""+htmlFarbTableBorderColor+"\" border=\"3\" cellspacing=\"3\" cellpadding=\"3\"  rules=\"none\" style=\"color:"+htmlFarbFelderschrift+";  font-size:"+htmlSchriftgroesse+
                                    "; font-family:"+htmlSchriftart+";background-image: linear-gradient(42deg,"+htmlFarbTableColorGradient2+","+htmlFarbTableColorGradient1+");\">"; 
              const htmlTabUeber1="<tr style=\"color:"+htmlFarbTableColorUber+"; font-weight: bold\">";
              const htmlTabUeber3="</tr>";
              
              
              //NICHTS ÄNDERN - abhängig von den oben definierten _Spalten - in diesem Beispiel sind es 4
              
              var htmlTabUeber2="<td  align=center>&ensp;"+htmlFeld1+"&ensp;</td><td align=center>&ensp;"+htmlFeld2+"&ensp;</td><td  align=center>&ensp;"+htmlFeld3+"&ensp;</td><td align=center>&ensp;"+htmlFeld4+"&ensp;</td>";
              var htmlTabUeber2_1="<td  align=center style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld1+"&ensp;</td><td  align=center style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld2+
                                 "&ensp;</td><td  align=center style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld3+"&ensp;</td><td  align=center style=\"color:"+htmlFarbZweiteTabelle+"\">&ensp;"+htmlFeld4+
                                 "&ensp;</td>";
              //------------------------------------------------------
              
              
              var htmlOut="";
              var mix;
              var counter;
              var myIDArr=[];
              var warte;
              var myRememberList="";
              
              
              function writeHTML(){
              
                   var htmlTabStyle;
                 switch (+htmlRahmenLinien) { 
                 case 1: htmlTabStyle=htmlTabStyleAll; break;
                 case 2: htmlTabStyle=htmlTabStyleCol; break;
                 case 3: htmlTabStyle=htmlTabStyleRow; break;
                 case 4: htmlTabStyle=htmlTabStyleNone; break;
                 
              };  
              
              htmlOut="";
              
              
              
              counter=-1;
              var 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;
              };  
              
              //HIER SIND DIE § WERTE, DIE IN DER SCHLEIFE GEFILTERET WER%DEN - Jede spalte einen wert
              var val1; var val2; var val0; var val3; var valSort; var valID; var myListWerte=""; var myListAuswahl="";
              //------------------------------------------------------------
               setState(dPDELETE,0);
              var myArr=[]; var myList=""; var myListArr=[]; myIDArr=[];
              myListArr.push('0'+":"+'choose ...'+";");
                          myListWerte=myListWerte+"choose ..."+";";
                         myListAuswahl=myListAuswahl+(0+";");
                         myIDArr.push("dummy");
              $('alexa2.0.Lists.TO_DO.items.*.value').each(function(id, i) {           // hier eigene schleife definierenalexa2.0.Lists.SHOPPING_LIST.items.0f43141e-029c-4860-bcd0-828702b0dc86.value
                         
                         val0=getState(id).val;
                         val1=getState(id.replace("value","completed")).val; 
                         val2=valSort=getState(id.replace("value","updatedDateTime")).val; 
                         valID=getState(id.replace("value","id")).val; 
                         myIDArr.push(valID);
                         var yy= (Math.round((new Date()).getTime() / 1000))-Math.round(val2/1000);
                         val2=formatDate(getDateObject(val2), "TT.MM - SS:mm:ss")
                         val3=(Math.floor( ((yy)/60/60/24) )+"d "+ Math.floor(((yy)/60/60) % 24) +"h "+ Math.floor( ((yy)/60) % 60 )+" m")
                         //if (val1==false) {val1="❌"} else{val1="✅"}
                         if (val1==false) {val1="<input type='checkbox' id='getState(id).val' value='true'>"} else{val1="<input type='checkbox' id='getState(id).val'  value='false' checked='checked'>"}
                         myArr.push([val0,val1,val2,val3,valSort]);
                         val0=val0.replace(/,/g,'-');  
                         myListArr.push((i+1)+":"+val0+";");
                         myListWerte=myListWerte+val0+";";
                         myListAuswahl=myListAuswahl+(i+1)+";";          //if (val1==false) {val1="<input type='checkbox' id='getState(id).val' value='true'>"} else{val1="<input type='checkbox' id='getState(id).val'  value='false' checked='checked'>"}
                        
              });
                     
              
                      //log (myListArr.toString());
                     for (var x=0;x<myListArr.length;x++){
                       myList=myList.concat(myListArr[x]);
                      // log(myListArr[x]);
                       //log(myList);
              
                     }
                     //log("-----------myList : "+myList)
                     if(myList!=myRememberList){
                         setState(dPDELETEWert,myListWerte);
                         setState(dPDELETEAuswahl,myListAuswahl);
                       var timeout = setTimeout(function () {
                          var obj = getObject(dPDELETE);
                          obj.common.states=myList;
                          myRememberList=myList;
                          log(myList);
                          setObject(dPDELETE, obj);
                       }, 400);
                     }
               //SORT
                               myArr.sort(function (alpha, beta) {
                            if (alpha[4] > beta[4])
                               return -11;
                            if (beta[4] > alpha[4])
                               return 1;
                            return 0;
                           });
              
                for (var x=0 ; x<myArr.length ; x++) {
                    counter++;
                   //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 2 Felder definiert, braucht man hier 2 Werte
                     val0=myArr[x][0];
                     val1=myArr[x][1];
                     val2=myArr[x][2];
                     val3=myArr[x][3];
              
                   //HIER WERDEN DIE DATEN DER SCHLEIFE ZUSAMMENGESETZT - hat man oben 4 Felder definiert, braucht man hier 4 Werte
                 
                     switch (mehrfachTabelle) {  
                       case 1:                    htmlOut=htmlOut+"<tr><td>&ensp;"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td></tr>"; break;
                      case 2:  if(counter%2==0)  {htmlOut = htmlOut+"<tr><td>&ensp;"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td>"; } 
                                            else {htmlOut = htmlOut+"<td style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} break;
                                                 
                      case 3: if(counter%3==0 )  {htmlOut = htmlOut+"<tr><td>&ensp;"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td>"; } 
                                            else { if(counter%3==1 )  { htmlOut = htmlOut+"<td style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                                             else    {htmlOut = htmlOut+"<td>&ensp;"+val0+"&ensp;</td><td align=center>&ensp;&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td></tr>";}
                                                       } break;
              
              
                      case 4: if(counter%4==0)  {htmlOut = htmlOut+"<tr><td>&ensp;"+val0+"&ensp;</td><td align=center>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td>"; } 
                                                else {if(counter%2==1 )  { htmlOut = htmlOut+"<td style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val0+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td>";} 
                                                             else    {if(counter%2==1 && counter%4==3)  { htmlOut= htmlOut+"<td style=\"color:"+htmlFarbFelderschrift2+"\"&ensp;>"+val0+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val1+"&ensp;</td><td align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val2+"&ensp;</td><td  align=center style=\"color:"+htmlFarbFelderschrift2+"\">&ensp;"+val3+"&ensp;</td></tr>";} 
                                                                               else    {htmlOut = htmlOut = htmlOut+"<td>&ensp;"+val0+"&ensp;</td><td>&ensp;"+val1+"&ensp;</td><td align=center>&ensp;"+val2+"&ensp;</td><td align=center>&ensp;"+val3+"&ensp;</td>";}}
                                                       } break;
              
                   } //switch ende
              
                  //---------------------------------------------
                 }; //Schleifen ende
                   // tabelle fertigstellen
                     switch (mehrfachTabelle) {  
                       case 1:    break;
                       case 2:    mix=Math.abs(((counter+1)%2)-mehrfachTabelle);  
                                  if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                  break;
                       case 3:    mix =Math.abs(((counter+1)%3)-mehrfachTabelle);
                                  if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');       
                                  if(mix==2)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');   
                                  break;
                       case 4:    mix=Math.abs(((counter+1)%4)-mehrfachTabelle);
                                  if(mix==1)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');
                                  if(mix==2)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td></tr>');    
                                  if(mix==3)  htmlOut = htmlOut.replace(/<\/td>$/, '</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;</td><td>&ensp;<td>&ensp;</td><td>&ensp;</td></td></tr>');      
                                  break; }
                   
                        //Ausgabe über VIS html widget - tabelle in datenpunkt schreiben - html tabelle ohne html header und body
                         var htmlOutVIS="";
                         const htmlUeber=    "<p style=\"color:"+htmlFarbUber+"; font-family:"+htmlSchriftart+"; font-weight: bold\">"+htmlFeldUeber+"&ensp;&ensp;&ensp;"+(counter+1)+"</p>";
                         htmlUberschrift ? htmlOutVIS=htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+"</table>" : htmlOutVIS=htmlTabStyle+htmlTabUeber+htmlOut+"</table>"
                         //log(htmlOutVIS);
                         if (braucheEinVISWidget) setState(dpVIS, htmlOutVIS );
              
               //mit oder ohne überschrift
               htmlUberschrift ? htmlOut=htmlStart+htmlUeber+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd : htmlOut=htmlStart+htmlTabStyle+htmlTabUeber+htmlOut+htmlEnd;
               //log(htmlOut);
              } // function ende
              
              //hier wird schleife gestartet und das file geschrieben
               
              schedule(mySchedule,  function () {
               writeHTML();
               if (braucheEinFile) {writeFile(home, path ,htmlOut, function (error) { /* log('file written');*/  });}
              }); 
              writeHTML();
              
              on({id: dPDELETE, ack: false, change: "ne"}, function (obj) { 
              
                 let a=getState(dPDELETE).val;
                 if (a!=0){
                 let toDelete=myIDArr[getState(dPDELETE).val];
                 var stateHelp="alexa2.0.Lists.TO_DO.items."+toDelete+".#delete"
                 setState(stateHelp,true);
                 var timeout = setTimeout(function () {
                 writeHTML(); }, 2000);
                 }
                 log(a+stateHelp)
                 });
              
                 on({id: dpANLEGEN, ack: false, change: "ne"}, function (obj) { 
                     log(getState(dpANLEGEN).val);
                  setState("alexa2.0.Lists.TO_DO.#New",getState(dpANLEGEN).val)
                     var timeout = setTimeout(function () {
                 writeHTML(); }, 2000);
                 });
              
              
              
              
              

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

                @OliverIO und diese art von script gehört dann in den scipt-tab der vis - richtig ?

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

                  ne da geht das nicht. bei den server skripten steht dir jquery nicht zur Verfügung geschweige die Browserlogik zur Verarbeitung. Dann musst du den Text schreiben, genauso wie du das mit der Tabelle bei
                  // Hier NICHTS ÄNDERN
                  gemacht hast.

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

                    den code, den ich gepostet habe, kannst du im vis entweder im skript-tab unterbringen
                    oder besser in einem HTML-Widget in entsprechenden script-tags. da kannst du dann auch den entsprechenden container mit einbauen, auf das sich das skript beziehen muss.

                    liv-in-sky 2 Replies Last reply Reply Quote 0
                    • liv-in-sky
                      liv-in-sky @OliverIO last edited by

                      @OliverIO kann man dann in einem script, welches in einem html widget liegt, über binding auf die datenpunkte zugreifen

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

                        @OliverIO

                        ich muss also checkboxen in meinem script erzeugen - dynamisch - verschiedene id's
                        dann noch einen datenpunkt beschreiben der ein script enthält, was diese checkboxen mit variabler id bei click abfangen (also muss mein script auch noch ein 2tes script erzeugen - welches in den datenpunkt für das htmlwidget schreibt)
                        dann müssen auch noch die datenpunkte geschaltet werden, anhand der id der checkboxen - weil die id ja von den alexa items abgekupfert ist

                        sehe ich das so ungefähr richtig

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

                          also schreiben von states aus vis:

                          function setzeWert(variablenName, Wert){
                             this.servConn._socket.emit('setState', variablenName, Wert);
                          }
                          

                          lesen von states
                          da vis da einen besonderen mechanismus hat, würde ich unsichtbare widgets setzen mit den zu lesenden datenpunkten. diese kannst du dann mit jquery lesen. da kann man auch events drauf setzen, wenn sich der wert des datenpunkt ändert.

                          erzeugen von dynamischen checkboxen:
                          ich habe dir hier mal ein htlm widget gebaut, das bei jeden knopfdruck ein neue checkbox erzeugt

                          [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<div id=\"cblist\">\n\n</div>\n<input type=\"button\" value=\"add\" id=\"btnSave\" />\n\n<script type=\"text/javascript\">\n$(document).ready(function() {\n    $('#btnSave').click(function() {\n        addCheckbox('newcb');\n    });\n});\n\nfunction addCheckbox(name) {\n   var container = $('#cblist');\n   var inputs = container.find('input');\n   var id = inputs.length+1;\ndebugger;\n   $('<input />', { \n       type: 'checkbox', \n       id: 'cb'+id, \n       value: name \n       \n   }).appendTo(container);\n   $('<label />', { \n       'for': 'cb'+id, \n       text: name \n       \n   }).appendTo(container);\n}\n</script>"},"style":{"left":"216px","top":"142px"},"widgetSet":"basic"}]
                          

                          der obige code geht direkt so nicht als cutnpaste, da der code durch eval geschickt wird und das hat wohl probleme mit der objekt-notation in einer zeile

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

                            @OliverIO wow - vielen dank, dass du dir die arbeit gemacht hast - aber das ist mir zu hoch für den moment - da muss ich erstmmal mit ganz einfachen sachen beginnen, um da dahinter zu steigen

                            deshalb

                            sorry - @senger1985 - da bin ich raus - da bleibe ich bei der jetzigen script variante

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

                              @liv-in-sky das übersteigt auch "leicht" meine Skills.
                              Das erzeugen der Checkboxen, je nachdem wie viele Artikel auf der Liste sind, habe ich ja hinbekommen, aber die Zuweisung, zu den Datenpunkten, um die Artikel dann von der Liste zu streichen, ist mir dann auch ein wenig zu hoch.

                              Aber danke an @OliverIO für die Mühe, das zu erklären.

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

                                @liv-in-sky @senger1985
                                wenn ihr Interesse habt, könnt ihr ja mal ein tutorial machen
                                https://www.w3schools.com/jquery/default.asp

                                so schwer ist es nicht und man kann mit ein paar wenigen befehlen schnell Ergebnisse erreichen.
                                Mit dem eingebauten Debugger in chrome und firefox kann man die befehle dann sogar schrittweise abarbeiten und schauen was da im einzelnen passiert

                                wie gesagt jquery ist in vis schon eingebaut

                                S 1 Reply Last reply Reply Quote 1
                                • S
                                  senger1985 @OliverIO last edited by

                                  @OliverIO danke dir, für den Link und ich werde ihn mir anschauen.
                                  jQuery ist mir aus meinen damaligen Programmierzeiten auch noch etwas bekannt, aber ganz weit hinten, in meinem Kopf.

                                  Es geht halt gerade speziell darum, Checkboxen automatisch zu generieren(was ich geschafft habe), aber dann die ID des Artikels, der auf der Alexa2-Einkaufsliste steht, mit einzubeziehen, um den Datenpunkt "completed" auf "true" zu setzen.

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

                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  871
                                  Online

                                  31.8k
                                  Users

                                  80.0k
                                  Topics

                                  1.3m
                                  Posts

                                  3
                                  15
                                  1272
                                  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