UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?

[Homoran]

@liv-in-sky welche Farben sind denn zulässig?
gelb, yellow, gold ohne Erfolg bei AnzahlLEDsEIN 6,Farbe

[liv-in-sky]

@homoran deutsch geht nicht

eigentlich alles z.b.

• yellow, red, green, blue, lightblue, usw
• #ffffff , #14f54b , usw

mit: 6,#14f54b

[Homoran]

@liv-in-sky Danke, aber dann muss ich mir erst mal die Regeln erarbeiten ;-)

• Durchmesser des Widgets: ok (auch wenn es nicht zu den Angaben im Skript passt!)
• Durchmesser der Punkte: ok (auch wenn es nicht zu den Angaben im Skript passt!)
• Alle LEDs: keine erkennbare Funktion. Was muss da rein?
• alles aus: keine erkennbare Funktion. Was muss da rein?
• alles bunt: keine erkennbare Funktion. Was muss da rein?
• Anzahl LEDs: ok!
• Anzahl LEDsEIN: keine Wirkung

Wie stelle ich ein, dass wie viele LEDs eine Farbe, die anderen leer (z.B.=grey) sind?

[Homoran]

@liv-in-sky

EDIT:

Auf einmal ist da was :scream:
Hab aber jetzt zu viel gespielt, um sagen zu können woran es lag

[liv-in-sky]

@homoran sagte in led kreis für vis:

Alle LEDs: keine erkennbare Funktion. Was muss da rein?

nur die farbe

@homoran sagte in led kreis für vis:

alles aus: keine erkennbare Funktion. Was muss da rein?

true

@homoran sagte in led kreis für vis:

alles bunt keine erkennbare Funktion. Was muss da rein?

einfach bunt reinschreiben (oder irgnedetwas) - reagiert auf aktualisierung

@homoran sagte in led kreis für vis:

Anzahl LEDsEIN: keine Wirkung

6,#14f54b anzahl und farbe durch komma getrennt

[Homoran]

@liv-in-sky ja!
so hatte ich mir das gedacht. Hat aber keine Wirkung

Ich spiel mal was.
Alle LEDs:
silver = Regenbogen ;-)
yellow = gelb!
grey, oder clear: nix

Anzahl ein, mit Anzahl, Farbname ohne Erfolg, ich teste jetzt mal die HEX

[liv-in-sky]

@homoran seltsam - habe gerade keine idee

ich teste noch andere sachen - ich sag dir bescheid, wenn ich ein neue version des scriptes habe

[Homoran]

@liv-in-sky sagte in led kreis für vis:

habe gerade keine idee

PEBKAC!
ich hatte bei JEDER Änderung das Skript neu gestartet.

Jetzt klappt es fast so weit.
Mein Problem ist, dass das Widget so klein ist, da muss ich vielleicht das Bild etwas vergrößern.

Etwas habe ich noch nicht hinbekommen:
Wie schaffe ich, dass die nicht aktiven LEDs nicht sichtbar sind?

Stelle ich den Datenpunkt Alle LEDs:* auf einen Hexwert der annähernd passend zum Hintergrund geht das:

sobald ich aber eine Anzahl LEDs sichtbarschalte, ist der Hintergrund anders

[liv-in-sky]

@homoran sagte in led kreis für vis:

sobald ich aber eine Anzahl LEDs sichtbarschalte, ist der Hintergrund anders

entweder eine ähnliche farbe eingeben oder "tranparent"

das muss aber noch im setting gemacht werden - script ist ja noch in entwicklung

[Homoran]

@liv-in-sky hatte ich da mit transparent oder clear schon versucht.
Aber das war noch die Zeit, in der es gar nicht lief

Probier ich noch mal

[liv-in-sky]

@homoran

für bunt hätte ich noch

funktioniert aber nur bei einer led anzahl, die mit 4 teilbar ist - so wie bei dir mit 32

habe noch keine idee, wie ich das mathematisch mit beliebiger anzahl mache - ist beim nächsten update dabei

[sigi234]

@liv-in-sky

Cool, gehen auch LED Balken Horizontal und Vertikal?

[Homoran]

@liv-in-sky
nach nicht zu viel!
(sonst hab ich noch mehr Wünsche)

sieht schon ganz gut aus.

Wo sitzt denn der Anker für die Größe?
ich hab es nicht hinbekommen den Kreis zentriert zu verändern ohne dass die LEDs aus dem Zentrum liefen

[Homoran]

@sigi234 sagte in led kreis für vis:

@liv-in-sky

Cool, gehen auch LED Balken Horizontal und Vertikal?

...und dann noch mit WLED die einzelnen Punkte synchronisieren :joy:

[liv-in-sky]

@sigi234 dacht ich mir, dass die frage kommt :-) - hattest du im anderen thread gefragt

sollte nix dagegensprechen - ist aber ein anderes script bzw braucht völlig andere html settings - wollt' ich eh noch schauen, ob das funktioniert - poste es, wenn ich meine versuche abgeschlossen habe

leider kann ich aus gesundheitlichen gründen nicht mehr soviel zeit aufwenden wie früher - daher: dauert ein wenig

[liv-in-sky]

@homoran

ich denke du solltest die html-widget größe auf die selbe größe wie in den datenpunkten setzen - dann sollte das einen mittelpunkt haben

es ist eigentlich nicht geplant, die "größen" im laufenden betrieb zu ändern, denn dann müßte man im html-widget auch ein binding für die größe des html-widgets machen - damit das zentrum gleich bleibt

[Homoran]

@liv-in-sky sagte in led kreis für vis:

leider kann ich aus gesundheitlichen gründen nicht mehr soviel zeit aufwenden wie früher - daher: dauert ein wenig

Nimm dir alle Zeit - es ist ein Hobby und sollte von den gesundheitlichen Problemen ablenken! Nicht diese verstärken

@liv-in-sky sagte in led kreis für vis:

es ist eigentlich nicht geplant, die "größen" im laufenden betrieb zu ändern

Ist klar, war nur schön, dass das geht um die optimale Größe festzulegen

[liv-in-sky]

@homoran sagte in led kreis für vis:

@sigi234 sagte in led kreis für vis:

@liv-in-sky

Cool, gehen auch LED Balken Horizontal und Vertikal?

...und dann noch mit WLED die einzelnen Punkte synchronisieren :joy:

bei wled : wenn oft änderungen kommen, wird das performance vom tablet abziehen - also z.b um die sekunden , wie in einer uhr anzuzeigen, würde ich das ganze nicht nutzen - daher habe ich auch auf die sekunden in dem anderen thread verzichtet - das läuft bei meinen alten tablets nicht wirklich rund

was ich evtl noch dazu füge sind einzelne leds anzusteuern - mal schauen was sinn macht

ps: leider muss ich mir die zeit nehmen - aber wird schon wieder werden

@homoran sagte in led kreis für vis:

Ist klar, war nur schön, dass das geht um die optimale Größe festzulegen

das geht ja - umständlich - ich weiß - ich schau mal, was mir einfällt

morgen gehts weiter

[sigi234]

@homoran sagte in led kreis für vis:

Nimm dir alle Zeit - es ist ein Hobby und sollte von den gesundheitlichen Problemen ablenken! Nicht diese verstärken

:+1:

[liv-in-sky]

neues script - bitte testen
 
ab jetzt ein standard html widget verwenden - nicht das vom post davor - bzw. einfach nur das rotate aus dem transform-feld entfernen
 
was geht
 

 
die setting dp reagieren jetzt direkt bei änderung
 

 
 
ein paar beispiele
die rotation der leds ist in einem anderen script erzeugt worden, welches die dp steuert

 
 
es gibt einen neuen datenpunkt für für einzelne LEDs - die müssen im JSON format in den dp geschrieben werden z.b.

[{             "number": 4,            "color":"cyan"             },{             "number": 5,            "color":"cyan"             },{             "number": 6,            "color":"yellow"             },{             "number": 7,            "color":"cyan"             },{             "number": 8,            "color":"cyan"             }]

zum installieren

• alle existierenden datenpunkte sollten behalten werden können
• script reinkopieren (mit chrome - nicht FF)
• das widget darf nicht doppelt sein - je widget -> ein script mit anderem namen (unter dpVISnew) nötig !!!!
• alle settings in den dp einstellen - das script braucht keine änderungen

Spoiler

//@liv-in-sky 4.8.2021-10:30

let  dpVISnew="LED1RingVIS";                            // Datenpunkte unter javascript.x.Tabellen@Liv.LED1RingVIS

let ansichtFormat=1;                                //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 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"];                                  

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

  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; }  


let ansichtFormatVERHOR="inline-block";
                           
let rotation="";

ansichtFormat==2 ?  ansichtFormatVERHOR="flex" :  ansichtFormatVERHOR="inline-block"
ansichtFormat==2 ? rotation="" : rotation=`transform: rotate(180deg); `

styleLEDsVER=`#outer${dpVISnew}{
		display: ${ansichtFormatVERHOR} ;
       ${rotation}
       } 			
   	.inner${dpVISnew}{
   	height: ${groessePunkteHoehe}px;
   	width: ${groessePunkteWeite}px;
   	background: ${grundfarbe};
   	border-radius: 50%;
       align-items: center;
       margin-right: 5px;
       margin-top: 8px;
       margin-left: 5px;                       
   	
   	}`
       
styleLEDsnew=`#outer${dpVISnew} {
		position: absolute;
   	height: ${groesseGesamtHoehe}px;
   	width: ${groesseGesamtWeite}px;
       transform: rotate(-90deg);
       } 			
   	.inner${dpVISnew}{
   	position: absolute;
   	height: ${groessePunkteHoehe}px;
   	width: ${groessePunkteWeite}px;
   	background: ${grundfarbe};
   	border-radius: 50%;
   	display: flex; 
   	align-items: center;
   	justify-content: center;
   	}`

scriptLEDnew=`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);
   	}`

 
    alleLedsAus(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", "15,15",{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", "#3f3f3f",{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", 1,{type: "number", name: "Anzeige Format - rund-quer-hoch", role: "value", read: true, write: true, } ); }  
    
     }

  


    

    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+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
              case 2:  ausgabe="<style>"+styleLEDsVER+`</style>`+augabeHilfe; break;
              case 3:  ausgabe="<style>"+styleLEDsVER+`</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= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
       let mengeArr= JSON.parse(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern").val);
   
       let newColorStyle="";
  
       for (let i=0;i<mengeArr.length;i++){
       newColorStyle=newColorStyle+`.inner${(i+1)}${dpVISnew}{  			 background: ${mengeArr[i].color};}`
       }
      
       
       let augabeHilfe=`<div id="outer${dpVISnew}">`;
       let arrHelper=[];
     
       for (let i=0;i<menge;i++){
            arrHelper.push(`<div class="inner${dpVISnew} "></div>`)}
        for (let i=0;i<mengeArr.length;i++){
        

            arrHelper[(mengeArr[i].number)-1]=   `<div class="inner${dpVISnew} inner${i+1}${dpVISnew} "></div>`}  
          
       for (let i=0;i<menge;i++){
             augabeHilfe=augabeHilfe+arrHelper[i] }
             
     
                               
       
       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);
    }

mainLED();


 on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS", ack: false, val: true}, function (obj) { 
 
 alleLedsAus(ansichtFormat);

 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS",false)
 });

on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN", ack: false, change: "any"}, function (obj) { 
 
 anzahlLEDsEIN(ansichtFormat);                                
                                                 

 });

on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs", ack: false, change: "any"}, function (obj) { 
 
 alleLedsEIN(ansichtFormat);

 });

on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt", ack: false, change: "any"}, function (obj) { 
 
 alleLedsBunt(ansichtFormat);

 });

on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen", ack: false, change: "any"}, function (obj) { 
 
 alleLedsRegenbogen(ansichtFormat);

 });

on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern", ack: false, change: "any"}, function (obj) { 
 
 einzelneLedsSteuern(ansichtFormat);

 });

 on({id: DatapointArr, ack: false, change: "any"}, function (obj) { 
 
 mainLED();

 });