Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. LED Anzeige für VIS - Akku,Pegel,Kreis

    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

    LED Anzeige für VIS - Akku,Pegel,Kreis

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

      @liv-in-sky

      Ok, kannst du mal ein Blockly reinstellen für die Alexa Laustärke?

      Andere Frage:
      Möchte ich den Balken waagrecht soll ich transform rotate nehmen?

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

        @sigi234

        script zur anzeige von; alexa lautstärke

        <block xmlns="https://developers.google.com/blockly/xml" type="on" id="pF#%z?-}$wDG81-s,Sxk" x="-512" y="888">
         <field name="OID">alexa2.0.Echo-Devices.G090NV03742503T0.Player.volume</field>
         <field name="CONDITION">any</field>
         <field name="ACK_CONDITION"></field>
         <statement name="STATEMENT">
           <block type="debug" id="|L_`rE7V5qN?Fy(SF#KP">
             <field name="Severity">log</field>
             <value name="TEXT">
               <shadow type="text" id="T#CZT4K^W(cRL2WXbuSu">
                 <field name="TEXT">test</field>
               </shadow>
               <block type="math_arithmetic" id="_v,8ZU%g@Msp*nT5IM,+">
                 <field name="OP">DIVIDE</field>
                 <value name="A">
                   <shadow type="math_number" id="!t/k^jY5VkI+9EHjIoE-">
                     <field name="NUM">1</field>
                   </shadow>
                   <block type="on_source" id="D~$Q_~3v)r!SoPzQLfyx">
                     <field name="ATTR">state.val</field>
                   </block>
                 </value>
                 <value name="B">
                   <shadow type="math_number" id="+iqSdHCMEN#5+S1_*030">
                     <field name="NUM">10</field>
                   </shadow>
                 </value>
               </block>
             </value>
             <next>
               <block type="control" id="v)Q`(L@wtEB1[jpzrbP1">
                 <mutation xmlns="http://www.w3.org/1999/xhtml" delay_input="false"></mutation>
                 <field name="OID">javascript.0.Tabellen@Liv.LED1RingVIS.AnzeigeRegler.Regler</field>
                 <field name="WITH_DELAY">FALSE</field>
                 <value name="VALUE">
                   <block type="math_round" id="|vw_9cPpJW]vekcVi85J">
                     <field name="OP">ROUND</field>
                     <value name="NUM">
                       <shadow type="math_number" id="u-p_?)9H#2;?Hm9?5Ig6">
                         <field name="NUM">3.1</field>
                       </shadow>
                       <block type="convert_tonumber" id="/1Y6*QsV5[n9v6,~I5.Z">
                         <value name="VALUE">
                           <block type="math_arithmetic" id="[#q48F^)k$r:gE@9fkMh">
                             <field name="OP">DIVIDE</field>
                             <value name="A">
                               <shadow type="math_number" id="q9Kd0@dpiuo]8Or($j6K">
                                 <field name="NUM">1</field>
                               </shadow>
                               <block type="on_source" id="O:Z-Z~o45M!wt|~0Ru6i">
                                 <field name="ATTR">state.val</field>
                               </block>
                             </value>
                             <value name="B">
                               <shadow type="math_number" id="i:n~k2xNqtEhE)Q6fICy">
                                 <field name="NUM">10</field>
                               </shadow>
                             </value>
                           </block>
                         </value>
                       </block>
                     </value>
                   </block>
                 </value>
               </block>
             </next>
           </block>
         </statement>
        </block>
        

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

          @sigi234 sagte in LED Anzeige für VIS - Akku,Pegel,Kreis:

          Möchte ich den Balken waagrecht soll ich transform rotate nehmen?

          habe ich nicht getestet - aber könnte klappen

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

            @sigi234

            klappt

            Image 2.png

            1 Reply Last reply Reply Quote 0
            • sigi234
              sigi234 Forum Testing Most Active @liv-in-sky last edited by

              @liv-in-sky sagte in LED Anzeige für VIS - Akku,Pegel,Kreis:

              script zur anzeige von; alexa lautstärke

              Danke, ich bin ein Blockly Koffer.....😀

              1 Reply Last reply Reply Quote 1
              • sigi234
                sigi234 Forum Testing Most Active @liv-in-sky last edited by sigi234

                @liv-in-sky sagte in LED Anzeige für VIS - Akku,Pegel,Kreis:

                die abstände zwischen den led's stellst du in PunkteAbstan ein - schrib da mal "5,5" rein

                Und wie bekomme ich die Led grösser?

                Wenn ich die Lautstärke am Dot ändere werden sie je nach LS von selber grösser?

                Screenshot (4093).png

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

                  @sigi234

                  z.b. javascript.0.Tabellen@Liv.LED1RingVIS.AnzeigeRegler.PunkteGroesse

                  teste mal 20,20 - eigentlich sind das rechtecke, daher die 2 werte - im script werden die ecken dann abgerundet

                  @sigi234 sagte in LED Anzeige für VIS - Akku,Pegel,Kreis:

                  Wenn ich die Lautstärke am Dot ändere werden sie je nach LS von selber grösser?

                  das verstehe ich nicht, das bild ergibt auch keinen sinn - ich sehe zuviele punkte - ist das auf zweispaltig gesetzt? dann muss das widget etwas breiter gemacht werden - der wert paßt auch nich

                  den ganzen satz verstehe ich nicht - es ändert sich der volume wert und der durchmesser der leds verändert sich ???

                  sigi234 1 Reply Last reply Reply Quote 0
                  • sigi234
                    sigi234 Forum Testing Most Active @liv-in-sky last edited by

                    @liv-in-sky sagte in LED Anzeige für VIS - Akku,Pegel,Kreis:

                    den ganzen satz verstehe ich nicht - es ändert sich der volume wert und der durchmesser der leds verändert sich ???

                    Screenshot (4096).png

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

                      @sigi234

                      du mußt das html widget breiter machen - bis 2 spalten sichtbar sind

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

                        @sigi234

                        oder du schreibst "einspaltig" rein- javascript.0.Tabellen@Liv.LED1RingVIS.AnzeigeRegler.UsageFormat

                        sigi234 1 Reply Last reply Reply Quote 0
                        • sigi234
                          sigi234 Forum Testing Most Active @liv-in-sky last edited by sigi234

                          @liv-in-sky

                          Aha gecheckt, da geht`s um Millimeter......

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

                            @sigi234

                            ja - vielleicht fällt mir noch eine bessere lösung ein - aber wenn man erstmal alles eingestellt hat , muss man nix mehr ändern

                            sigi234 1 Reply Last reply Reply Quote 0
                            • sigi234
                              sigi234 Forum Testing Most Active @liv-in-sky last edited by

                              @liv-in-sky sagte in LED Anzeige für VIS - Akku,Pegel,Kreis:

                              @sigi234

                              ja - vielleicht fällt mir noch eine bessere lösung ein - aber wenn man erstmal alles eingestellt hat , muss man nix mehr ändern

                              Super, jetzt habe ich es begriffen. Theoretisch brauche ich dann für jedes Gerät ein Skript und ein Blockly.

                              Screenshot (4099).png

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

                                @sigi234 Ja genau

                                Die Blocklys können aber alle in einem Script sein

                                Jedes Script braucht in der variable dpVisnew einen eigenen Namen

                                1 Reply Last reply Reply Quote 0
                                • sigi234
                                  sigi234 Forum Testing Most Active @liv-in-sky last edited by

                                  @liv-in-sky

                                  Es wird schon!

                                  Screenshot (4104).png

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

                                    @sigi234

                                    schaut gur aus - ich kopiere mal dein bild in meinen erten post 🙂

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

                                      habe ein update im ersten post

                                      das alte script kann natürlich noch genutzt werden - um das neue zu testen ein weiteres script dazufügen und dann die variable dpVISnew im script mit einem neuen namen beschreiben/deklarieren

                                      ein neues format ist dazugekommen - wir im dp javascript.0.Tabellen@Liv.LED1RingVIS.WidgetAnzeigeFormat angegeben ( 1=rund, 2=quer, 3=hoch oder die neue einstellung 4=eckig)

                                      durch anpassen der widgetgröße im vis-editor können die leds angeordnet werden

                                      noch dazugekommen: ein schatten für die leds unter dem datenpunkt: javascript.0.Tabellen@Liv.LED1RingVIS.LEDSchatten

                                      sieht dann so aus:

                                      z.b ein zähler (für erinnerungen an einen monatl termin (tagezähler),...)

                                      AApossis (98).gif

                                      oder:

                                      AApossis (100).gif

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

                                        im neuen script können auch bilder geladen werden - dies funktioniert nur, wenn man die einzel LEDs steuert. dies funktioniert über ein json. wenn man ein bild an einer stelle haben will, muss man im json den bild-pfad eingeben - ist kein "key" picture im json, wird eine led angezeigt.
                                        das format eines images wird unter "javascript.0.Tabellen@Liv.LED1RingVIS.LEDDurchmesser" bestimmt (breite/höhe)

                                        [
                                          {
                                            "number": 1,
                                            "color": "tranparent",
                                            "picture": "/vis.0/armin/img/zahl/1-green.png"
                                          },
                                          {
                                            "number": 2,
                                            "color": "tranparent",
                                            "picture": "/vis.0/armin/img/zahl/0-green.png"
                                          },
                                          {
                                            "number": 3,
                                            "color": "tranparent",
                                            "picture": "/vis.0/armin/img/zahl/dp-green.png"
                                          },
                                          {
                                            "number": 4,
                                            "color": "tranparent",
                                            "picture": "/vis.0/armin/img/zahl/2-green.png"
                                          },
                                          {
                                            "number": 5,
                                            "color": "tranparent",
                                            "picture": "/vis.0/armin/img/zahl/7-green.png"
                                          }
                                        ]
                                        

                                        ein beispiel als uhrzeitanzeige - die "leds" sind in diesen fall bilder

                                        AApossis (101).gif AApossis (102).gif AApossis (103).gif

                                        mit temperatur:

                                        AApossis (104).gif

                                        • die animation kann abgeschalten werden
                                        1 Reply Last reply Reply Quote 2
                                        • liv-in-sky
                                          liv-in-sky last edited by liv-in-sky

                                          dies ist ein eigenes script - für jedes widget, braucht man ein eigenes script - damit kann man andere datenpunkte schalten (bidirektional) und anzeigen lassen. es können dp vom typ number - ganzzahlig - sein
                                          z. b

                                          • uhrzeit
                                          • minuten
                                          • themostate-soll werte
                                          • thermometer - gerundete gradzahlen)
                                            usw ...

                                          einstellungen vor script start:

                                          • rot: kannst du so belassen - wenn du ein zweites script davon installierst, muss hier wieder etwas einzigartiges stehen
                                          • grün: anfang der zahlen
                                          • schwarz: die id eines datenpunktes deiner wahl - typ number, ganze zahlen, keine komma-zahlen
                                          • blau: farbe der zahlen
                                            Image 4.png

                                          einstellungen nach script start:

                                          • rot: anzahl der zu zeigenden "bubbles"
                                          • blau: hintergrund nicht selktierter "bubbles"
                                          • schwarz: ist für das widget - binding zu diesem dp
                                          • gelb: bei 1 im kreis - bei 2 im block (werden angezeigt in abhängigkeit von widget größe)
                                          • grün: rundung der bubbles - 50 ist rund, 0 ist eckig
                                          • lila: hintergrund selktierter "bubble"
                                          • grau: größe der "bubbles"
                                          • orange: interne größe des widgets - muss abgeglichen sein mit der größe des widgets

                                          Image 3.png

                                          script import:

                                          
                                          //@liv-in-sky 27.01.2022-16:19
                                          
                                          let  dpVISnew="LED1RingNumbers1";                            // Datenpunkte unter javascript.x.Tabellen@Liv.LED1RingVIS
                                          
                                          let ansichtFormat=2;                                //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                                                                             //- 1 ist rund, 2 ist quer, 3 ist hoch form
                                          
                                          let styleLEDsVER;
                                          let styleLEDsnew;
                                          let scriptLEDnew; 
                                          let scriptLEDnew2;
                                          let styleLEDSpan;
                                          let namerStart=6;               //start der zählung
                                          let colorSchrift="white"         // schriftfarbe
                                          let colorSchriftSelected="white" 
                                          let dpToConnect="javascript." + instance + ".Tabellen@Liv."+dpVISnew+".ValueSelected";
                                                        
                                          let DatapointArr=["javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus",
                                          "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte",
                                          "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EckenRundung"];                                  
                                          let namer=namerStart;
                                          
                                          
                                          async function mainLED(){
                                               
                                             await needDP().then(  function () { 
                                          
                                          
                                          
                                          //ALLE EINSTELLUNGEN IN DEN DATENPUNKTEN
                                          
                                          let grundfarbe="transparent";                         //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen
                                          
                                          
                                          
                                          let groessePunkteHoehe=15;                           //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                          let groessePunkteWeite=15;                           //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                          let groesseGesamtHoehe=170;                          //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                          let groesseGesamtWeite=170;                          //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                          let borderRadius=25
                                          
                                            if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte")) {
                                             let PunkteArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte").val.split(',')
                                             groessePunkteHoehe=Number(PunkteArr[0])
                                             groessePunkteWeite=Number(PunkteArr[1]) }
                                            if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt")) {
                                             let GeamtArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt").val.split(',')
                                              groesseGesamtHoehe=Number(GeamtArr[0])
                                              groesseGesamtWeite=Number(GeamtArr[1])  }
                                            if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus")) {
                                             let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus").val;
                                              grundfarbe=ledAusFarbe; }  
                                            if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat")) {
                                             let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat").val;
                                              ansichtFormat=ledAusFarbe; }  
                                             if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EckenRundung")) {
                                             borderRadius=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EckenRundung").val;
                                               }    
                                          
                                          
                                          let ansichtFormatVERHOR="inline-block";
                                                                     
                                          let rotation="";
                                          // log(ansichtFormat)
                                          //ansichtFormat==2 ?  ansichtFormatVERHOR="flex" :  ansichtFormatVERHOR="inline-block" //inline-block
                                          //ansichtFormat==2 ? rotation="" : rotation=`transform: rotate(180deg); `
                                          //  ansichtFormat==3 ? rotation="" : rotation=`transform: rotate(180deg); `
                                          //log(rotation)
                                          styleLEDsVER=`#outer${dpVISnew}{
                                          		display: ${ansichtFormatVERHOR} ;
                                                 ${rotation}
                                                 } 			
                                             	.inner${dpVISnew}{
                                                   
                                             	height: ${groessePunkteHoehe}px;
                                             	width: ${groessePunkteWeite}px;
                                                
                                             	background: ${grundfarbe};
                                             	border-radius: ${borderRadius}%;
                                                 align-items: center;
                                                  margin-right: 5px;
                                                 margin-top: 4px;
                                                 margin-bottom: 4px;
                                                 margin-left: 5px;
                                                 color: ${colorSchrift};
                                                
                                                   display: inline-block;
                                                 top: 50%;
                                                  vertical-align: middle;
                                                  text-align: center;
                                                    
                                                            
                                             	
                                             	}`  //justify-content: center;   
                                                 // vertical-align: middle;
                                          
                                          styleLEDSpan=`.span${dpVISnew} {
                                                                         height: ${groessePunkteHoehe}px;
                                             	                        width: ${groessePunkteWeite}px; 
                                                                         display: block;
                                                                         text-align:center;
                                                                         margin-top: ${Math.round(groessePunkteHoehe)/5}px;
                                             
                                            
                                                 
                                          }`;       /* display: inline-block;
                                                 vertical-align: middle;
                                                 line-height: normal;
                                                 text-align: center;
                                                 justify-content: center;*/
                                                 
                                          styleLEDsnew=`#outer${dpVISnew} {
                                          		position: absolute;
                                             	height: ${groesseGesamtHoehe}px;
                                             	width: ${groesseGesamtWeite}px;
                                                 transform: rotate(-90deg);
                                                 } 			
                                             	.inner${dpVISnew}{
                                                     z-index:4;
                                             	position: absolute;
                                             	height: ${groessePunkteHoehe}px;
                                             	width: ${groessePunkteWeite}px;
                                             	background: ${grundfarbe};
                                                 color: ${colorSchrift};
                                             	border-radius: ${borderRadius}%;
                                             	display: flex; 
                                             	align-items: center;
                                             	justify-content: center;
                                                 transform: rotate(90deg)
                                             	}`  // in outer:  transform: rotate(-90deg);
                                          
                                          
                                          
                                          scriptLEDnew=`function myKreis${dpVISnew}() {var outer = document.getElementById('outer${dpVISnew}');
                                             	var outerWidth = document.getElementById('outer${dpVISnew}').offsetWidth;
                                             	var outerHeight = document.getElementById('outer${dpVISnew}').offsetHeight;
                                             	for(var i = 0; i < outer.children.length; i++){
                                             	var r = outerWidth / 2 - outer${dpVISnew}.children[i].offsetWidth / 2;
                                             	var phi = i / outer${dpVISnew}.children.length;
                                             	var x = r * Math.cos(phi * 2 * Math.PI) + r;
                                             	var y = r * Math.sin(phi * 2 * Math.PI) + r;
                                             	outer${dpVISnew}.children[i].style.left = x+'px';
                                             	outer${dpVISnew}.children[i].style.top = y+'px';
                                             	/*console.log(outer${dpVISnew}.children[i].style.left);*/
                                             	}
                                                 }
                                                 myKreis${dpVISnew}();
                                                  $(".inner${dpVISnew}").click(function() {
                                                              var matches2 = $(this).text(); 
                                                              console.log(matches2);
                                                              matches2=matches2-${namer};
                                                              vis.setValue('${dpToConnect}',matches2+${namer});
                                                              vis.setValue('javascript.${instance}.Tabellen@Liv.${dpVISnew}.Refresh',true);  });
                                                               console.log("refresh ${dpVISnew}");
                                                        
                                                  $( document ).ready(function() {
                                                            console.log( "dokument ready! von: ${dpVISnew}" );setTimeout( () => { 
                                                             myKreis${dpVISnew}();   }, 2000); 
                                          });
                                                         
                                                 `
                                          scriptLEDnew2=` $(".inner${dpVISnew}").click(function() {
                                                              var matches2 = $(this).text(); 
                                                              console.log(matches2-20);
                                                              matches2=matches2-${namer};
                                                              vis.setValue('${dpToConnect}',matches2+${namer});
                                                              vis.setValue('javascript.${instance}.Tabellen@Liv.${dpVISnew}.Refresh',true);  });
                                                              console.log("refresh ${dpVISnew}");
                                                         
                                                         
                                                 `
                                           
                                             // alleLedsAus(ansichtFormat);
                                             einzelneLedsSteuern(ansichtFormat);
                                          })
                                          }
                                          
                                          
                                             async function needDP(){
                                          
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".Anzahl", 15,{type: "number", name: "Anzahl LEDs", role: "value", read: true, write: true, } ); } 
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".DurchmesserPunkte", "35,35",{type: "string", name: "Durchmesser Punkte", role: "value", read: true, write: true, } ); } 
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".DurchmesserGesamt", "200,200",{type: "string", name: "Durchmesser Gesamt", role: "value", read: true, write: true, } ); }         
                                              
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDs", "#14f54b",{type: "string", name: "Alle LEDs", role: "value", read: true, write: true, } ); }
                                          
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus", "linear-gradient(90deg, rgba(127,210,79,1) 0%, rgba(119,237,42,1) 35%, rgba(99,177,63,1) 100%)",{type: "string", name: "Standard Led Farbe Aus", role: "value", read: true, write: true, } ); }   
                                             
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".alleLEDsAUS", false,{type: "boolean", name: "Alle LEDs AUS", role: "value", read: true, write: true, } ); }
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN", "4,red",{type: "string", name: "Anzahl LEDs EIN", role: "value", read: true, write: true, } ); } 
                                          
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern", '[{"number":3,"color":"red"}]',{type: "string", name: "Einzelne LEDs Steuern", role: "value", read: true, write: true, } ); }    
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsBunt", "bunt",{type: "string", name: "Alle LEDs Bunt", role: "value", read: true, write: true, } ); }  
                                          
                                                if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen", "regenbogen",{type: "string", name: "Alle LEDs Regenbogen", role: "value", read: true, write: true, } ); }         
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt", role: "value", read: true, write: true, } ); } 
                                             
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeFormat", 2,{type: "number", name: "Anzeige Format - rund-quer-hoch", role: "value", read: true, write: true, } ); }  
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.Regler"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeRegler.Regler", 3,{type: "number", name: "Anzeige Regler", role: "value", read: true, write: true, } ); }  
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.WidgetReglerAusgabe"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeRegler.WidgetReglerAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt Regler", role: "value", read: true, write: true, } ); }   
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.ReglerPunkteFormat"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeRegler.ReglerPunkteFormat", "rund",{type: "string", name: "Regler Punkte Format -rund -eckig", role: "value", read: true, write: true, } ); } 
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteGroesse"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteGroesse", "19,6",{type: "string", name: "AnzeigeRegler Punkte Groesse", role: "value", read: true, write: true, } ); }
                                          
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.UsageFormat"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeRegler.UsageFormat", "zweispaltig",{type: "string", name: "AnzeigeRegler Usage Format ", role: "value", read: true, write: true, } ); }    
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteAbstand"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteAbstand", "15,15",{type: "string", name: "AnzeigeRegler Punkte Abstand", role: "value", read: true, write: true, } ); }   
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".ValueSelected"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".ValueSelected", 0,{type: "number", name: "ValueSelected", role: "value", read: true, write: true, } ); }    
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Refresh"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".Refresh", false,{type: "boolean", name: "Refresh", role: "value", read: true, write: true, } ); }     
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".ValueSelectedColor"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".ValueSelectedColor", "linear-gradient(90deg, rgba(96,86,227,1) 0%, rgba(47,128,212,1) 35%, rgba(0,212,255,1) 100%)",{type: "string", name: "ValueSelectedColor", role: "value", read: true, write: true, } ); } 
                                          
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EckenRundung"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".EckenRundung", 40,{type: "number", name: "EckenRundung (%)", role: "value", read: true, write: true, } );
                                                 allSubs() } else {allSubs()}
                                          
                                               }
                                          
                                            
                                          
                                          
                                              
                                          
                                              function alleLedsAus(ansichtFormat) {
                                                 
                                                 let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                                 for (let i=0;i<menge;i++){
                                                     augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew}"></div>`
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                          
                                                 let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+styleLEDSpan+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+styleLEDSpan+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+styleLEDSpan+`</style>`+augabeHilfe; break; 
                                                        }
                                              
                                          
                                              
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                          
                                          
                                              }
                                          
                                              function alleLedsEIN(ansichtFormat) {
                                                   let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                 let colorAll= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs").val;
                                               
                                                 let newColorStyle=`.inner1${dpVISnew}{  			 background: ${colorAll};}`;
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                               
                                                 for (let i=0;i<menge;i++){
                                                    augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                            
                                                let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                              
                                          
                                              
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                              }
                                          
                                              function anzahlLEDsEIN(ansichtFormat) {
                                                  
                                                 let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                 let mengeArr= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN").val.split(',');
                                              
                                                 let newColorStyle=`.inner1${dpVISnew}{  			 background: ${mengeArr[1]};}`;
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                              
                                                 for (let i=0;i<menge;i++){
                                                     if(i<Number(mengeArr[0])) {augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`} 
                                                                           else {  augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew}"></div>`}
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                                
                                                  let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                             
                                          
                                             
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                              }
                                          
                                              function alleLedsRegenbogen(ansichtFormat) {
                                                    let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                 let colorAll= `linear-gradient(red 20%, yellow 40%, orange 60%, cyan 80%)`;
                                               
                                                 let newColorStyle=`.inner1${dpVISnew}{  			 background-image: ${colorAll};}`;
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                               
                                                 for (let i=0;i<menge;i++){
                                                    augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`;
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                                
                                                  let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                          
                                              
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                          
                                              }
                                          
                                              function alleLedsBunt(ansichtFormat) {
                                                    let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                               
                                                 let newColorStyle=`.inner1${dpVISnew}{  			 background: #0AD0E6;} .inner2${dpVISnew}{  			 background: #F2DD23;} 
                                                                    .inner3${dpVISnew}{  			 background: #63F285;} .inner4${dpVISnew}{  			 background: #E60A62;}`;
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                               
                                                 for (let i=0;i<menge;i++){
                                                  
                                                     if(i%4==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner4${dpVISnew} "></div>`}  
                                                     else if (i%3==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner3${dpVISnew} "></div>`  } 
                                                     else if (i%2==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner2${dpVISnew} "></div>`  } 
                                                     else if (i%1==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`  }
                                                    
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                                 let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                             
                                          
                                              
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                          
                                              } 
                                          
                                             function einzelneLedsSteuern(ansichtFormat) {
                                                  
                                               let menge;
                                                 if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl")) {
                                                  menge=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val} else {menge=5}
                                               //  let mengeArr= JSON.parse(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern").val);
                                                 let theNumberSelected=8;
                                                 if (existsState(dpToConnect)) {
                                                  theNumberSelected=getState(dpToConnect).val} 
                                          
                                               
                                                 let newColorStyle="";
                                                 let newSelected=Number(theNumberSelected)-Number(namer)+1; //log(theNumberSelected+' '+namer+' ' +  newSelected)
                                                 namer=namerStart;
                                                 namer--;
                                              //   if(theNumberSelected> && theNumberSelected< ) {}
                                            
                                               /*  for (let i=0;i<mengeArr.length;i++){
                                                 newColorStyle=newColorStyle+`.inner${(i+1)}${dpVISnew}{  			 background: ${mengeArr[i].color};}`
                                                 }*/
                                                 let backigroundi;
                                                 if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".ValueSelectedColor")) {
                                                 backigroundi=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".ValueSelectedColor").val;} else {backigroundi="red"}  
                                                 newColorStyle=newColorStyle+`.inner${(newSelected)}${dpVISnew}{  		color:${colorSchriftSelected};	 background: ${backigroundi}}`
                                                 
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                                 let arrHelper=[];
                                                 // namer=20;
                                                 let namer2=namer;
                                                 for (let i=0;i<menge;i++){
                                                      namer++
                                                      arrHelper.push(`<div class="helpingClass${dpVISnew}${namer} inner${dpVISnew}"><span class="span${dpVISnew}">${namer}</span></div>`)}
                                                 
                                                  //for (let i=0;i<mengeArr.length;i++){
                                                     // namer++
                                                   //   arrHelper[(mengeArr[i].number)-1]=   `<div class="helpingClass${dpVISnew}${namer} inner${dpVISnew} inner${i+1}${dpVISnew}">${namer2+(mengeArr[i].number)}</div>`}  
                                                    //   arrHelper[(theNumberSelected)-namer2-1]=   `<div class="helpingClass${dpVISnew}${namer} inner${dpVISnew} inner${i+1}${dpVISnew}">${theNumberSelected}</div>` }
                                                    
                                                   arrHelper[(theNumberSelected)-namer2-1]=   `<div class="helpingClass${dpVISnew}${namer} inner${dpVISnew} inner${newSelected}${dpVISnew}"><span class="span${dpVISnew}">${theNumberSelected}</span></div>`  
                                                    
                                                 for (let i=0;i<menge;i++){
                                                       augabeHilfe=augabeHilfe+arrHelper[i] }
                                                       
                                               
                                                 //  log(styleLEDSpan)                      
                                                 
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                                 let ausgabe;
                                          
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+styleLEDSpan+`</style>`+augabeHilfe+"<script>"+scriptLEDnew2+`</script>`; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+styleLEDSpan+`</style>`+augabeHilfe+"<script>"+scriptLEDnew2+`</script>`; break; 
                                                        }
                                          
                                                  
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                              }
                                          
                                          
                                          mainLED();
                                          //regler(12)
                                          //einzelneLedsSteuern(ansichtFormat);
                                          
                                          function allSubs() {
                                          /*
                                           on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS", val: true}, function (obj) { 
                                           
                                           alleLedsAus(ansichtFormat);
                                          
                                           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS",false)
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN",  change: "any"}, function (obj) { 
                                           
                                           anzahlLEDsEIN(ansichtFormat);                                
                                                                                           
                                          
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs",  change: "any"}, function (obj) { 
                                           
                                           alleLedsEIN(ansichtFormat);
                                          
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt",  change: "any"}, function (obj) { 
                                           
                                           alleLedsBunt(ansichtFormat);
                                          
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen",  change: "any"}, function (obj) { 
                                           
                                           alleLedsRegenbogen(ansichtFormat);
                                          
                                           });*/
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern",  change: "any"}, function (obj) { 
                                           
                                           einzelneLedsSteuern(ansichtFormat);
                                          
                                           });
                                          
                                           on({id: DatapointArr,  change: "any"}, function (obj) { 
                                           
                                           mainLED();
                                          
                                           });
                                          /*
                                           on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.Regler",  change: "any"}, function (obj) { 
                                            var value = obj.state.val;
                                           regler(value);                                
                                             }); */
                                          
                                            on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Refresh",  val: true}, function (obj) { 
                                            var value = obj.state.val;
                                           einzelneLedsSteuern(ansichtFormat);                               
                                             }); 
                                          
                                             on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EckenRundung",  change:"ne"}, function (obj) { 
                                            var value = obj.state.val;
                                           einzelneLedsSteuern(ansichtFormat);                               
                                             });  
                                          
                                             on({id: dpToConnect,  change:"ne"}, function (obj) { 
                                            var value = obj.state.val;
                                           einzelneLedsSteuern(ansichtFormat);                               
                                             });  
                                          /*
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.ReglerPunkteFormat",  change: "any"}, function (obj) { 
                                           var value = obj.state.val;
                                          // if(value=="rund" || value=="eckig") {
                                          
                                           regler(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.Regler").val);                               
                                             });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteGroesse",  change: "any"}, function (obj) { 
                                           var value = obj.state.val;
                                          // if(value=="rund" || value=="eckig") {
                                          
                                           regler(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.Regler").val);                               
                                             });
                                          
                                           on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteAbstand",  change: "any"}, function (obj) { 
                                           var value = obj.state.val;
                                          // if(value=="rund" || value=="eckig") {
                                          
                                           regler(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.Regler").val);                               
                                             });  
                                          
                                            on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.UsageFormat",  change: "any"}, function (obj) { 
                                           var value = obj.state.val;
                                          // if(value=="rund" || value=="eckig") {
                                          
                                           regler(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.Regler").val);                               
                                             });      
                                          */
                                          }
                                          
                                           function regler(myStufe){
                                               let punkteGroesseBreite=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteGroesse").val.split(','))[0];
                                               let punkteGroesseHoehe=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteGroesse").val.split(','))[1];
                                               let punkteAbstandHorizontal=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteAbstand").val.split(','))[0];
                                               let punkteAbstandVertikal=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.PunkteAbstand").val.split(','))[1];
                                          
                                               let reglerPunkteFormat=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.ReglerPunkteFormat").val;
                                               let borderRadiosPunkte ;
                                               if (reglerPunkteFormat=="eckig") {borderRadiosPunkte = ""} else {borderRadiosPunkte = `border-radius: 50%; `;}
                                               if (reglerPunkteFormat=="rund") borderRadiosPunkte = `border-radius: 50%; `;
                                          
                                               let usage=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.UsageFormat").val;
                                          
                                           let arrMitColor=[  `<li class="flex-item${dpVISnew} more-color-red${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew} more-color-red${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew} more-color-red${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew} more-color-red${dpVISnew}"></li>`,
                                           `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                          `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                           `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                          `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                          `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`]
                                          
                                           let arrOhneColor=[`<li class="flex-item${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew}"></li>`,
                                           `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`,
                                             `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`,
                                          `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`,
                                           `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`,
                                          `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`,
                                          `<li class="flex-item${dpVISnew}"></li>`,
                                            `<li class="flex-item${dpVISnew}"></li>`]
                                          
                                          let styleRegler=`<style>
                                          
                                          .flex-container${dpVISnew} {
                                           
                                           display: flex;
                                           flex-flow: row wrap;
                                           justify-content: space-around;
                                           
                                           padding: 2px;
                                           margin: 2px;
                                           list-style: none;
                                          }
                                          
                                          .flex-item${dpVISnew} {
                                           ${borderRadiosPunkte}  
                                           background: #9B9794;
                                          /* padding: 15px; */
                                           width: ${punkteGroesseBreite}px;
                                           height: ${punkteGroesseHoehe}px;
                                           margin-top: ${punkteAbstandVertikal}px; /*5*/
                                           margin-left: ${punkteAbstandHorizontal}px; /*15*/
                                           margin-right: ${punkteAbstandHorizontal}px; /*15*/
                                           margin-bottom: ${punkteAbstandVertikal}px; /*8*/
                                           line-height: 15px;
                                           color: white;
                                           font-weight: bold;
                                           font-size: 3em;
                                           text-align: center;
                                           
                                          
                                          }
                                          .more-color-red${dpVISnew}{
                                          background: linear-gradient(11deg, rgba(179,75,62,1) 0%, rgba(157,66,50,1) 26%, rgba(239,215,218,1) 75%, rgba(228,21,89,1) 100%);
                                          ${borderRadiosPunkte}
                                            box-shadow: 1px 1px 2px 2px red;
                                          }
                                          
                                          .more-color-yellow${dpVISnew}{
                                          background: linear-gradient(11deg, rgba(249,249,152,0.947835799358806) 0%, rgba(249,243,84,1) 26%, rgba(238,239,215,1) 75%, rgba(238,242,53,1) 100%);
                                          ${borderRadiosPunkte}
                                            box-shadow: 1px 1px 2px 2px #b8ba48;
                                          }
                                          
                                          .more-color-green${dpVISnew}{
                                          background: linear-gradient(11deg, rgba(117,190,147,1) 0%, rgba(108,198,121,1) 26%, rgba(215,239,215,1) 75%, rgba(59,183,44,1) 100%);
                                          ${borderRadiosPunkte}
                                            box-shadow: 1px 1px 3px 3px green;
                                          }
                                          
                                          
                                          </style><ul class="flex-container${dpVISnew}">`;
                                          //myStufe=myStufe/2;
                                          let myHTMLText="";
                                          
                                          
                                          if(usage=="zweispaltig") {
                                            let arrMitColorReverse=arrMitColor.reverse(); 
                                            for(let i=arrOhneColor.length-1;i>=0;i-=2){
                                           //  log(i.toString())
                                            if(i-(myStufe*2) >= 0 ) { myHTMLText=myHTMLText+arrOhneColor[i]+arrOhneColor[i-1];} 
                                            else {  myHTMLText=myHTMLText+arrMitColorReverse[i]+arrMitColorReverse[i-1];} }
                                          
                                          } else if(usage=="einspaltig"){
                                             let arrMitColorReverse=arrMitColor.reverse();
                                            myHTMLText="";
                                            for(let i=arrOhneColor.length-1;i>=0;i-=2){
                                            //log(i.toString() + "  "+ arrMitColorReverse[i])
                                            if(i-(myStufe*2) >= 0 ) { myHTMLText=myHTMLText+arrOhneColor[i];} 
                                            else {  myHTMLText=myHTMLText+arrMitColorReverse[i];} }
                                          
                                          } else if (usage=="akku"){
                                            myHTMLText="";
                                            //log("akku")
                                            for(let i=arrOhneColor.length-1;i>=0;i-=2){
                                             // log(i.toString() + "  "+ arrMitColor[i] )
                                            if(i-(myStufe*2) >= 0 ) { myHTMLText=myHTMLText+arrOhneColor[i];} 
                                            else {  myHTMLText=myHTMLText+arrMitColor[i];} }
                                          }
                                          let ausgabe=styleRegler+myHTMLText+`</ul>`;
                                          
                                          // log(ausgabe)
                                          
                                          setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeRegler.WidgetReglerAusgabe",ausgabe);
                                          
                                          
                                           }
                                          
                                          
                                          
                                          
                                          
                                          
                                          
                                          
                                           
                                           
                                          

                                          widget import:

                                          [{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":true,"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":"{javascript.0.Tabellen@Liv.LED1RingNumbers1.WidgetAusgabe}"},"style":{"left":"358px","top":"276px","width":"288px","height":"419px","font-size":"16px"},"widgetSet":"basic"}]
                                          

                                          AApossis (180).gif

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

                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          461
                                          Online

                                          31.9k
                                          Users

                                          80.2k
                                          Topics

                                          1.3m
                                          Posts

                                          3
                                          79
                                          3056
                                          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