Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. LED Anzeige für VIS - Akku,Pegel,Kreis

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    18
    1
    795

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    18
    1
    6.2k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.6k

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

Scheduled Pinned Locked Moved Visualisierung
79 Posts 3 Posters 4.1k Views 12 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • liv-in-skyL liv-in-sky

    ein script für eine led anzeige in der vis - benötigt ein html-standard widget mit binding auf den datenpunkt

    • die datenpunkte des scriptes sollen durch andere scripte (js,blockly) angesprochen werden - damit wird die anzeige für die vis erzeugt - ähnlich wie bei einem adapter
    • es ist eine reine anzeige - keine "rücksteuerung vom widget zu einen dp möglich
    • bei diesem script ist es wichtig, nachdem man die settings in den dp definiert hat, dass die "breite" des widgets richtig definiert wird - das widget ist innen responsive - dh. durch das ändern der breite des html-standard-widgets, wird die liste der leds/punkte neu angeordnet
    • das script kann für einen pegelanzeige und gleichteitig für eine standard ledanzeige genutzt werden - benötigt man ein zweites widget, muss ein neues script eingerichtet werden und unter der variablen: dpVISnew ein neuer name eingetragen werden

    die datenpunkte sind unter: javascript.0.Tabellen@Liv.LED1RingVIS
    das script braucht keine settings - wird alles über dp gesteuert bzw eingestellt

    möglichkeiten der standard led anzeige

    AApossis (94).gif

    Lautstärke Anzeige:

    AApossis (95).gif

    beispiel bei pegelanzeige:

    • einspaltig lautstärke pegel (leise unten grün und laut - oben rot)
    • zweispaltig lautstärke pegel
    • akku anzeige (farben gedreht - unten rot oben grün))
    • die pegelanzeige hat feste farben und schatten - es können werte von 0 bis 10 eingetragen werden - für das volume von zb. alexa, muss ein script auf das volume von dem echo device getriggert sein und der volume-wert durch 10 geteilt werden - dieser wert wird dann in den dp geschrieben
      AApossis (96).gif

    einstellbar:

    • anzahl punkte
    • durchmesser des hauptkreises
    • farben der punkte
    • anzahl "leuchtender" punkte in bestimmter farbe

    siehe mehr unter:

    
    //@liv-in-sky 15.8.2021-15:00
    
    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 styleLEDsViele;
                  
    let DatapointArr=["javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus",
    "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser",
    "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat",
    "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander",
    "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation"];                                  
    
    async function mainLED(){
         
       await needDP().then(  async 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 rundung="rund";
    let shadowLED=false;
    let abstandLEDs=3;
    let animationLED=false;
    
      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser")) {
       let PunkteArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(',')
       groessePunkteHoehe=Number(PunkteArr[1]);
       groessePunkteWeite=Number(PunkteArr[0]); 
        await wait(2000);}
      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt")) {
       let GeamtArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt").val.split(',')
        groesseGesamtHoehe=Number(GeamtArr[0])
        groesseGesamtWeite=Number(GeamtArr[1])  }
      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus")) {
       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus").val;
        grundfarbe=ledAusFarbe; }  
      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat")) {
       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat").val;
        ansichtFormat=ledAusFarbe; }  
      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat")) {
       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat").val;
        rundung=ledAusFarbe; }   
      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten")) {
       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten").val;
        shadowLED=ledAusFarbe; }   
      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander")) {
       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander").val;
        abstandLEDs=ledAusFarbe; } 
      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation")) {
       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation").val;
        animationLED=ledAusFarbe; }  
        
    
    
    let ansichtFormatVERHOR="inline-block";
    let schattenLeds=`width: ${groessePunkteWeite}px;`;
    if(shadowLED) schattenLeds=`--width: ${groessePunkteWeite}px;
       width: var(--width);
       box-shadow: inset 2px 2px  calc(var(--width) * 0.3) #aaa;` ;                           
    let rotation="";
    let borderRadius="50%";
    ansichtFormat==2 ?  ansichtFormatVERHOR="flex" :  ansichtFormatVERHOR="inline-block"
    ansichtFormat==2 ? rotation="" : rotation=`transform: rotate(180deg); `
    if (rundung=="rund") {borderRadius="50%";} else if(rundung=="eckig") {borderRadius="0%";} else if (rundung=="abgerundet") {borderRadius="20%";}
    let animater=`}`
    if (animationLED) {animater=`animation: zoom-in-zoom-out 1.5s ;
       	}
           @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1);}
                                        50% { transform: scale(1.3, 1.3); }
                                       100% { transform: scale(1, 1); }       
                                       }`} 
    
    styleLEDsVER=`#outer${dpVISnew}{
    		display: ${ansichtFormatVERHOR} ;
           ${rotation}
           } 			
       	.inner${dpVISnew}{
       	height: ${groessePunkteHoehe}px;
       	${schattenLeds}
       	background: ${grundfarbe};
       	border-radius: ${borderRadius};
           align-items: center;
           margin-right: ${String(abstandLEDs)}px;
           margin-top: 8px;
           margin-left: ${String(abstandLEDs)}px;                       
       	
       	}`
    
     styleLEDsViele=`#outer${dpVISnew}{
    		display: flex;
           flex-flow: row wrap;
          /* justify-content: space-around;*/
           } 			
       	.inner${dpVISnew}{
       	height: ${groessePunkteHoehe}px;
           ${schattenLeds}
       	background: ${grundfarbe};
       	border-radius: ${borderRadius};
           /*animation: 7s infinite alternate slidein;*/
           align-items: center;
          /* box-shadow: inset 3px 3px 3px #FFF;*/
          / box-shadow: inset 50% 50% silver;*/
           /*blur(4px);*/
           /*border: 2px;*/
           margin-right: ${String(abstandLEDs)}px;
           margin-top: 8px;
           margin-left: ${String(abstandLEDs)}px;                      
       	
       	${animater}`      
           
    styleLEDsnew=`#outer${dpVISnew} {
    		position: absolute;
       	height: ${groesseGesamtHoehe}px;
       	width: ${groesseGesamtWeite}px;
           transform: rotate(-90deg);
           } 			
       	.inner${dpVISnew}{
       	position: absolute;
       	height: ${groessePunkteHoehe}px;
       	${schattenLeds}
       	background: ${grundfarbe};
       	border-radius: ${borderRadius};
       	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+".LEDAnzahl"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDAnzahl", 15,{type: "number", name: "Anzahl LEDs", role: "value", read: true, write: true, } ); } 
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDFormat", "rund",{type: "string", name: "Format Punkte -rund-eckig-abgerundet", role: "value", read: true, write: true, } ); } 
       
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander", 3,{type: "number", name: "Seitlicher LED Abstand Zueinander", role: "value", read: true, write: true, } ); } 
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDDurchmesser", "15,15",{type: "string", name: "Durchmesser Punkte", role: "value", read: true, write: true, } ); } 
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt", "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 in einer Farbe", role: "value", read: true, write: true, } ); }
    
        if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus", "#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+".LEDsEINAnzahl"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl", "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+".LEDSchatten"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDSchatten", false,{type: "boolean", name: "Alle LEDs mit Schatten", role: "value", read: true, write: true, } ); }     
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation", false,{type: "boolean", name: "Animation - Einzelne LEDs Steuern", 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+".WidgetAnzeigeFormat"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat", 1,{type: "number", name: "Anzeige Format - rund-quer-hoch-eckig", role: "value", read: true, write: true, } ); }  
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel", 3,{type: "number", name: "Anzeige Pegel", role: "value", read: true, write: true, } ); }  
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt Pegel", role: "value", read: true, write: true, } ); }   
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat", "rund",{type: "string", name: "Pegel Punkte Format -rund -eckig", role: "value", read: true, write: true, } ); } 
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse", "19,6",{type: "string", name: "AnzeigePegel Punkte Groesse", role: "value", read: true, write: true, } ); }
    
        if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat", "zweispaltig",{type: "string", name: "AnzeigePegel Usage Format ", role: "value", read: true, write: true, } ); }    
    
       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand"))) {
           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand", "5,5",{type: "string", name: "AnzeigePegel Punkte Abstand", role: "value", read: true, write: true, } ); }            
         }
    
      
    
    
        
    
        function AlleLedsAus(ansichtFormat) {
           
           let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").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; 
                  case 4:  ausgabe="<style>"+styleLEDsViele+`</style>`+augabeHilfe; break; 
                  }
        
    
        
           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
    
    
        }
    
        function alleLedsEIN(ansichtFormat) {
             let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").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; 
                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break;
                  }
    
        
    
        
           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
        }
    
        function LEDsEINAnzahl(ansichtFormat) {
            
           let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
           let mengeArr= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl").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;
                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                  }
    
       
    
       
           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
        }
    
        function alleLedsRegenbogen(ansichtFormat) {
              let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").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;
                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                  }
    
    
        
           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
    
        }
    
        function alleLedsBunt(ansichtFormat) {
              let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").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;
                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                  }
    
       
    
        
           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
    
        } 
    
       function einzelneLedsSteuern(ansichtFormat) {
            
          let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
           let mengeArr= JSON.parse(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern").val);
           let pictureSizeBreite=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(','))[0];
           let pictureSizeHoehe=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(','))[1];
       
           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++){
          //  log(JSON.stringify(mengeArr[i]))
                if(mengeArr[i].hasOwnProperty("picture")) {/*log(mengeArr[i].picture);*/ arrHelper[(mengeArr[i].number)-1]=   `<div class="inner${dpVISnew} inner${i+1}${dpVISnew} "><img src='${mengeArr[i].picture}' width='${pictureSizeBreite}px' height='${pictureSizeHoehe}px'></div>`}
                else {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;
                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                  }
    
            
           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
        }
    
    
    mainLED();
    //Pegel(12)
    
    
     on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsAUS", val: true}, function (obj) { 
     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  AlleLedsAus(ansichtFormat);
    
     setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsAUS",false)
     });
    
    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl",  change: "any"}, function (obj) { 
     
     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  LEDsEINAnzahl(ansichtFormat);                                
                                                     
    
     });
    
    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs",  change: "any"}, function (obj) { 
     
     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  alleLedsEIN(ansichtFormat);
    
     });
    
    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt",  change: "any"}, function (obj) { 
     
    if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))   alleLedsBunt(ansichtFormat);
    
     });
    
    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen",  change: "any"}, function (obj) { 
     
     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  alleLedsRegenbogen(ansichtFormat);
    
     });
    
    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern",  change: "any"}, function (obj) { 
     
     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  einzelneLedsSteuern(ansichtFormat);
    
     });
    
     on({id: DatapointArr,  change: "any"}, function (obj) { 
     
     mainLED();
    
     });
    
     on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel",  change: "any"}, function (obj) { 
      var value = obj.state.val;
       Pegel(value);                                
       });
    
    
    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat",  change: "any"}, function (obj) { 
     var value = obj.state.val;
    // if(value=="rund" || value=="eckig") {
    
     Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
       });
    
    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse",  change: "any"}, function (obj) { 
     var value = obj.state.val;
    // if(value=="rund" || value=="eckig") {
    
     Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
       });
    
     on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand",  change: "any"}, function (obj) { 
     var value = obj.state.val;
    // if(value=="rund" || value=="eckig") {
    
     Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
       });  
    
      on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat",  change: "any"}, function (obj) { 
     var value = obj.state.val;
    // if(value=="rund" || value=="eckig") {
    
     Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
       });      
    
    
    
    async function Pegel(myStufe){
          if (!existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand")) {
          await wait(4000);}
         let punkteGroesseBreite=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse").val.split(','))[0];
         let punkteGroesseHoehe=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse").val.split(','))[1];
         let punkteAbstandHorizontal=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand").val.split(','))[0];
         let punkteAbstandVertikal=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand").val.split(','))[1];
    
         let PegelPunkteFormat=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat").val;
         let borderRadiosPunkte ;
         if (PegelPunkteFormat=="eckig") {borderRadiosPunkte = ""} else {borderRadiosPunkte = `border-radius: 50%; `;}
         if (PegelPunkteFormat=="rund") borderRadiosPunkte = `border-radius: 50%; `;
    
         let usage=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.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 stylePegel=`<style>
    
    .flex-container${dpVISnew} {
     
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
     
     padding: 2px;
     margin: 3px;
     list-style: none;
    }
    
    .flex-item${dpVISnew} {
     ${borderRadiosPunkte}  
     background: #3f3f3f;
    /* 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=stylePegel+myHTMLText+`</ul>`;
    
    // log(ausgabe)
    
    setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe",ausgabe);
    
    
     }
    
    
    
    
    
    
    
     
     
    

    beispiel view von @sigi234

    1628341532240-screenshot-4104.png

    weitere beispiele:

    AApossis (100).gif AApossis (98).gif

    beispiel als uhrzeit mit bildern (zahlen 0-9)

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

    neues script für LED's mit Zahlen und zum Schalten von Datenpunkten:

    siehe https://forum.iobroker.net/post/749984

    AApossis (181).gif

    sigi234S Online
    sigi234S Online
    sigi234
    Forum Testing Most Active
    wrote on last edited by sigi234
    #59

    @liv-in-sky

    Hallo, Irgendwas stimmt bei mir nicht? Bekomme es nur sehr Gross hin, die Led haben was mit der Anzahl zu tun?

    Anzahl Regler = Anzahl Led ?

    Screenshot (4077).pngScreenshot (4081).png

    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
    Immer Daten sichern!

    liv-in-skyL 1 Reply Last reply
    0
    • sigi234S sigi234

      @liv-in-sky

      Hallo, Irgendwas stimmt bei mir nicht? Bekomme es nur sehr Gross hin, die Led haben was mit der Anzahl zu tun?

      Anzahl Regler = Anzahl Led ?

      Screenshot (4077).pngScreenshot (4081).png

      liv-in-skyL Offline
      liv-in-skyL Offline
      liv-in-sky
      wrote on last edited by
      #60

      @sigi234

      beim regler kannst du die anzahl der leds nicht bestimmen - die ist fix - du bestimmst dort, wieviel leds leuchten soll

      wenn du zweispaltig willst, musst du das widget etwas breiter machen

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

      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

      sigi234S 2 Replies Last reply
      0
      • liv-in-skyL liv-in-sky

        @sigi234

        beim regler kannst du die anzahl der leds nicht bestimmen - die ist fix - du bestimmst dort, wieviel leds leuchten soll

        wenn du zweispaltig willst, musst du das widget etwas breiter machen

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

        sigi234S Online
        sigi234S Online
        sigi234
        Forum Testing Most Active
        wrote on last edited by sigi234
        #61

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

        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
        Immer Daten sichern!

        liv-in-skyL 3 Replies Last reply
        0
        • sigi234S 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-skyL Offline
          liv-in-skyL Offline
          liv-in-sky
          wrote on last edited by liv-in-sky
          #62

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

          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

          sigi234S 1 Reply Last reply
          1
          • sigi234S 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-skyL Offline
            liv-in-skyL Offline
            liv-in-sky
            wrote on last edited by
            #63

            @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

            nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

            1 Reply Last reply
            0
            • sigi234S 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-skyL Offline
              liv-in-skyL Offline
              liv-in-sky
              wrote on last edited by liv-in-sky
              #64

              @sigi234

              klappt

              Image 2.png

              nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

              1 Reply Last reply
              0
              • liv-in-skyL 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>
                

                sigi234S Online
                sigi234S Online
                sigi234
                Forum Testing Most Active
                wrote on last edited by
                #65

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

                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                Immer Daten sichern!

                1 Reply Last reply
                1
                • liv-in-skyL liv-in-sky

                  @sigi234

                  beim regler kannst du die anzahl der leds nicht bestimmen - die ist fix - du bestimmst dort, wieviel leds leuchten soll

                  wenn du zweispaltig willst, musst du das widget etwas breiter machen

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

                  sigi234S Online
                  sigi234S Online
                  sigi234
                  Forum Testing Most Active
                  wrote on last edited by sigi234
                  #66

                  @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

                  Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                  Immer Daten sichern!

                  liv-in-skyL 1 Reply Last reply
                  0
                  • sigi234S 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-skyL Offline
                    liv-in-skyL Offline
                    liv-in-sky
                    wrote on last edited by
                    #67

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

                    nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                    sigi234S 1 Reply Last reply
                    0
                    • liv-in-skyL liv-in-sky

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

                      sigi234S Online
                      sigi234S Online
                      sigi234
                      Forum Testing Most Active
                      wrote on last edited by
                      #68

                      @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

                      Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                      Immer Daten sichern!

                      liv-in-skyL 2 Replies Last reply
                      0
                      • sigi234S sigi234

                        @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-skyL Offline
                        liv-in-skyL Offline
                        liv-in-sky
                        wrote on last edited by liv-in-sky
                        #69

                        @sigi234

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

                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                        1 Reply Last reply
                        0
                        • sigi234S sigi234

                          @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-skyL Offline
                          liv-in-skyL Offline
                          liv-in-sky
                          wrote on last edited by
                          #70

                          @sigi234

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

                          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                          sigi234S 1 Reply Last reply
                          0
                          • liv-in-skyL liv-in-sky

                            @sigi234

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

                            sigi234S Online
                            sigi234S Online
                            sigi234
                            Forum Testing Most Active
                            wrote on last edited by sigi234
                            #71

                            @liv-in-sky

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

                            Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                            Immer Daten sichern!

                            liv-in-skyL 1 Reply Last reply
                            0
                            • sigi234S sigi234

                              @liv-in-sky

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

                              liv-in-skyL Offline
                              liv-in-skyL Offline
                              liv-in-sky
                              wrote on last edited by liv-in-sky
                              #72

                              @sigi234

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

                              nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                              sigi234S 1 Reply Last reply
                              0
                              • liv-in-skyL 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

                                sigi234S Online
                                sigi234S Online
                                sigi234
                                Forum Testing Most Active
                                wrote on last edited by
                                #73

                                @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

                                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                Immer Daten sichern!

                                liv-in-skyL 1 Reply Last reply
                                0
                                • sigi234S sigi234

                                  @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-skyL Offline
                                  liv-in-skyL Offline
                                  liv-in-sky
                                  wrote on last edited by
                                  #74

                                  @sigi234 Ja genau

                                  Die Blocklys können aber alle in einem Script sein

                                  Jedes Script braucht in der variable dpVisnew einen eigenen Namen

                                  nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                  1 Reply Last reply
                                  0
                                  • liv-in-skyL liv-in-sky

                                    ein script für eine led anzeige in der vis - benötigt ein html-standard widget mit binding auf den datenpunkt

                                    • die datenpunkte des scriptes sollen durch andere scripte (js,blockly) angesprochen werden - damit wird die anzeige für die vis erzeugt - ähnlich wie bei einem adapter
                                    • es ist eine reine anzeige - keine "rücksteuerung vom widget zu einen dp möglich
                                    • bei diesem script ist es wichtig, nachdem man die settings in den dp definiert hat, dass die "breite" des widgets richtig definiert wird - das widget ist innen responsive - dh. durch das ändern der breite des html-standard-widgets, wird die liste der leds/punkte neu angeordnet
                                    • das script kann für einen pegelanzeige und gleichteitig für eine standard ledanzeige genutzt werden - benötigt man ein zweites widget, muss ein neues script eingerichtet werden und unter der variablen: dpVISnew ein neuer name eingetragen werden

                                    die datenpunkte sind unter: javascript.0.Tabellen@Liv.LED1RingVIS
                                    das script braucht keine settings - wird alles über dp gesteuert bzw eingestellt

                                    möglichkeiten der standard led anzeige

                                    AApossis (94).gif

                                    Lautstärke Anzeige:

                                    AApossis (95).gif

                                    beispiel bei pegelanzeige:

                                    • einspaltig lautstärke pegel (leise unten grün und laut - oben rot)
                                    • zweispaltig lautstärke pegel
                                    • akku anzeige (farben gedreht - unten rot oben grün))
                                    • die pegelanzeige hat feste farben und schatten - es können werte von 0 bis 10 eingetragen werden - für das volume von zb. alexa, muss ein script auf das volume von dem echo device getriggert sein und der volume-wert durch 10 geteilt werden - dieser wert wird dann in den dp geschrieben
                                      AApossis (96).gif

                                    einstellbar:

                                    • anzahl punkte
                                    • durchmesser des hauptkreises
                                    • farben der punkte
                                    • anzahl "leuchtender" punkte in bestimmter farbe

                                    siehe mehr unter:

                                    
                                    //@liv-in-sky 15.8.2021-15:00
                                    
                                    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 styleLEDsViele;
                                                  
                                    let DatapointArr=["javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus",
                                    "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser",
                                    "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat",
                                    "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander",
                                    "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation"];                                  
                                    
                                    async function mainLED(){
                                         
                                       await needDP().then(  async 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 rundung="rund";
                                    let shadowLED=false;
                                    let abstandLEDs=3;
                                    let animationLED=false;
                                    
                                      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser")) {
                                       let PunkteArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(',')
                                       groessePunkteHoehe=Number(PunkteArr[1]);
                                       groessePunkteWeite=Number(PunkteArr[0]); 
                                        await wait(2000);}
                                      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt")) {
                                       let GeamtArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt").val.split(',')
                                        groesseGesamtHoehe=Number(GeamtArr[0])
                                        groesseGesamtWeite=Number(GeamtArr[1])  }
                                      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus")) {
                                       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus").val;
                                        grundfarbe=ledAusFarbe; }  
                                      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat")) {
                                       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat").val;
                                        ansichtFormat=ledAusFarbe; }  
                                      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat")) {
                                       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat").val;
                                        rundung=ledAusFarbe; }   
                                      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten")) {
                                       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten").val;
                                        shadowLED=ledAusFarbe; }   
                                      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander")) {
                                       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander").val;
                                        abstandLEDs=ledAusFarbe; } 
                                      if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation")) {
                                       let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation").val;
                                        animationLED=ledAusFarbe; }  
                                        
                                    
                                    
                                    let ansichtFormatVERHOR="inline-block";
                                    let schattenLeds=`width: ${groessePunkteWeite}px;`;
                                    if(shadowLED) schattenLeds=`--width: ${groessePunkteWeite}px;
                                       width: var(--width);
                                       box-shadow: inset 2px 2px  calc(var(--width) * 0.3) #aaa;` ;                           
                                    let rotation="";
                                    let borderRadius="50%";
                                    ansichtFormat==2 ?  ansichtFormatVERHOR="flex" :  ansichtFormatVERHOR="inline-block"
                                    ansichtFormat==2 ? rotation="" : rotation=`transform: rotate(180deg); `
                                    if (rundung=="rund") {borderRadius="50%";} else if(rundung=="eckig") {borderRadius="0%";} else if (rundung=="abgerundet") {borderRadius="20%";}
                                    let animater=`}`
                                    if (animationLED) {animater=`animation: zoom-in-zoom-out 1.5s ;
                                       	}
                                           @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1);}
                                                                        50% { transform: scale(1.3, 1.3); }
                                                                       100% { transform: scale(1, 1); }       
                                                                       }`} 
                                    
                                    styleLEDsVER=`#outer${dpVISnew}{
                                    		display: ${ansichtFormatVERHOR} ;
                                           ${rotation}
                                           } 			
                                       	.inner${dpVISnew}{
                                       	height: ${groessePunkteHoehe}px;
                                       	${schattenLeds}
                                       	background: ${grundfarbe};
                                       	border-radius: ${borderRadius};
                                           align-items: center;
                                           margin-right: ${String(abstandLEDs)}px;
                                           margin-top: 8px;
                                           margin-left: ${String(abstandLEDs)}px;                       
                                       	
                                       	}`
                                    
                                     styleLEDsViele=`#outer${dpVISnew}{
                                    		display: flex;
                                           flex-flow: row wrap;
                                          /* justify-content: space-around;*/
                                           } 			
                                       	.inner${dpVISnew}{
                                       	height: ${groessePunkteHoehe}px;
                                           ${schattenLeds}
                                       	background: ${grundfarbe};
                                       	border-radius: ${borderRadius};
                                           /*animation: 7s infinite alternate slidein;*/
                                           align-items: center;
                                          /* box-shadow: inset 3px 3px 3px #FFF;*/
                                          / box-shadow: inset 50% 50% silver;*/
                                           /*blur(4px);*/
                                           /*border: 2px;*/
                                           margin-right: ${String(abstandLEDs)}px;
                                           margin-top: 8px;
                                           margin-left: ${String(abstandLEDs)}px;                      
                                       	
                                       	${animater}`      
                                           
                                    styleLEDsnew=`#outer${dpVISnew} {
                                    		position: absolute;
                                       	height: ${groesseGesamtHoehe}px;
                                       	width: ${groesseGesamtWeite}px;
                                           transform: rotate(-90deg);
                                           } 			
                                       	.inner${dpVISnew}{
                                       	position: absolute;
                                       	height: ${groessePunkteHoehe}px;
                                       	${schattenLeds}
                                       	background: ${grundfarbe};
                                       	border-radius: ${borderRadius};
                                       	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+".LEDAnzahl"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDAnzahl", 15,{type: "number", name: "Anzahl LEDs", role: "value", read: true, write: true, } ); } 
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDFormat", "rund",{type: "string", name: "Format Punkte -rund-eckig-abgerundet", role: "value", read: true, write: true, } ); } 
                                       
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander", 3,{type: "number", name: "Seitlicher LED Abstand Zueinander", role: "value", read: true, write: true, } ); } 
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDDurchmesser", "15,15",{type: "string", name: "Durchmesser Punkte", role: "value", read: true, write: true, } ); } 
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt", "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 in einer Farbe", role: "value", read: true, write: true, } ); }
                                    
                                        if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus", "#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+".LEDsEINAnzahl"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl", "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+".LEDSchatten"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDSchatten", false,{type: "boolean", name: "Alle LEDs mit Schatten", role: "value", read: true, write: true, } ); }     
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation", false,{type: "boolean", name: "Animation - Einzelne LEDs Steuern", 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+".WidgetAnzeigeFormat"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat", 1,{type: "number", name: "Anzeige Format - rund-quer-hoch-eckig", role: "value", read: true, write: true, } ); }  
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel", 3,{type: "number", name: "Anzeige Pegel", role: "value", read: true, write: true, } ); }  
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt Pegel", role: "value", read: true, write: true, } ); }   
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat", "rund",{type: "string", name: "Pegel Punkte Format -rund -eckig", role: "value", read: true, write: true, } ); } 
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse", "19,6",{type: "string", name: "AnzeigePegel Punkte Groesse", role: "value", read: true, write: true, } ); }
                                    
                                        if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat", "zweispaltig",{type: "string", name: "AnzeigePegel Usage Format ", role: "value", read: true, write: true, } ); }    
                                    
                                       if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand"))) {
                                           await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand", "5,5",{type: "string", name: "AnzeigePegel Punkte Abstand", role: "value", read: true, write: true, } ); }            
                                         }
                                    
                                      
                                    
                                    
                                        
                                    
                                        function AlleLedsAus(ansichtFormat) {
                                           
                                           let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").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; 
                                                  case 4:  ausgabe="<style>"+styleLEDsViele+`</style>`+augabeHilfe; break; 
                                                  }
                                        
                                    
                                        
                                           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                    
                                    
                                        }
                                    
                                        function alleLedsEIN(ansichtFormat) {
                                             let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").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; 
                                                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break;
                                                  }
                                    
                                        
                                    
                                        
                                           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                        }
                                    
                                        function LEDsEINAnzahl(ansichtFormat) {
                                            
                                           let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
                                           let mengeArr= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl").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;
                                                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                                                  }
                                    
                                       
                                    
                                       
                                           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                        }
                                    
                                        function alleLedsRegenbogen(ansichtFormat) {
                                              let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").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;
                                                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                                                  }
                                    
                                    
                                        
                                           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                    
                                        }
                                    
                                        function alleLedsBunt(ansichtFormat) {
                                              let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").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;
                                                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                                                  }
                                    
                                       
                                    
                                        
                                           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                    
                                        } 
                                    
                                       function einzelneLedsSteuern(ansichtFormat) {
                                            
                                          let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
                                           let mengeArr= JSON.parse(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern").val);
                                           let pictureSizeBreite=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(','))[0];
                                           let pictureSizeHoehe=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(','))[1];
                                       
                                           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++){
                                          //  log(JSON.stringify(mengeArr[i]))
                                                if(mengeArr[i].hasOwnProperty("picture")) {/*log(mengeArr[i].picture);*/ arrHelper[(mengeArr[i].number)-1]=   `<div class="inner${dpVISnew} inner${i+1}${dpVISnew} "><img src='${mengeArr[i].picture}' width='${pictureSizeBreite}px' height='${pictureSizeHoehe}px'></div>`}
                                                else {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;
                                                  case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                                                  }
                                    
                                            
                                           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                        }
                                    
                                    
                                    mainLED();
                                    //Pegel(12)
                                    
                                    
                                     on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsAUS", val: true}, function (obj) { 
                                     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  AlleLedsAus(ansichtFormat);
                                    
                                     setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsAUS",false)
                                     });
                                    
                                    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl",  change: "any"}, function (obj) { 
                                     
                                     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  LEDsEINAnzahl(ansichtFormat);                                
                                                                                     
                                    
                                     });
                                    
                                    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs",  change: "any"}, function (obj) { 
                                     
                                     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  alleLedsEIN(ansichtFormat);
                                    
                                     });
                                    
                                    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt",  change: "any"}, function (obj) { 
                                     
                                    if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))   alleLedsBunt(ansichtFormat);
                                    
                                     });
                                    
                                    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen",  change: "any"}, function (obj) { 
                                     
                                     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  alleLedsRegenbogen(ansichtFormat);
                                    
                                     });
                                    
                                    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern",  change: "any"}, function (obj) { 
                                     
                                     if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  einzelneLedsSteuern(ansichtFormat);
                                    
                                     });
                                    
                                     on({id: DatapointArr,  change: "any"}, function (obj) { 
                                     
                                     mainLED();
                                    
                                     });
                                    
                                     on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel",  change: "any"}, function (obj) { 
                                      var value = obj.state.val;
                                       Pegel(value);                                
                                       });
                                    
                                    
                                    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat",  change: "any"}, function (obj) { 
                                     var value = obj.state.val;
                                    // if(value=="rund" || value=="eckig") {
                                    
                                     Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
                                       });
                                    
                                    on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse",  change: "any"}, function (obj) { 
                                     var value = obj.state.val;
                                    // if(value=="rund" || value=="eckig") {
                                    
                                     Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
                                       });
                                    
                                     on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand",  change: "any"}, function (obj) { 
                                     var value = obj.state.val;
                                    // if(value=="rund" || value=="eckig") {
                                    
                                     Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
                                       });  
                                    
                                      on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat",  change: "any"}, function (obj) { 
                                     var value = obj.state.val;
                                    // if(value=="rund" || value=="eckig") {
                                    
                                     Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
                                       });      
                                    
                                    
                                    
                                    async function Pegel(myStufe){
                                          if (!existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand")) {
                                          await wait(4000);}
                                         let punkteGroesseBreite=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse").val.split(','))[0];
                                         let punkteGroesseHoehe=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse").val.split(','))[1];
                                         let punkteAbstandHorizontal=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand").val.split(','))[0];
                                         let punkteAbstandVertikal=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand").val.split(','))[1];
                                    
                                         let PegelPunkteFormat=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat").val;
                                         let borderRadiosPunkte ;
                                         if (PegelPunkteFormat=="eckig") {borderRadiosPunkte = ""} else {borderRadiosPunkte = `border-radius: 50%; `;}
                                         if (PegelPunkteFormat=="rund") borderRadiosPunkte = `border-radius: 50%; `;
                                    
                                         let usage=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.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 stylePegel=`<style>
                                    
                                    .flex-container${dpVISnew} {
                                     
                                     display: flex;
                                     flex-flow: row wrap;
                                     justify-content: space-around;
                                     
                                     padding: 2px;
                                     margin: 3px;
                                     list-style: none;
                                    }
                                    
                                    .flex-item${dpVISnew} {
                                     ${borderRadiosPunkte}  
                                     background: #3f3f3f;
                                    /* 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=stylePegel+myHTMLText+`</ul>`;
                                    
                                    // log(ausgabe)
                                    
                                    setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe",ausgabe);
                                    
                                    
                                     }
                                    
                                    
                                    
                                    
                                    
                                    
                                    
                                     
                                     
                                    

                                    beispiel view von @sigi234

                                    1628341532240-screenshot-4104.png

                                    weitere beispiele:

                                    AApossis (100).gif AApossis (98).gif

                                    beispiel als uhrzeit mit bildern (zahlen 0-9)

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

                                    neues script für LED's mit Zahlen und zum Schalten von Datenpunkten:

                                    siehe https://forum.iobroker.net/post/749984

                                    AApossis (181).gif

                                    sigi234S Online
                                    sigi234S Online
                                    sigi234
                                    Forum Testing Most Active
                                    wrote on last edited by
                                    #75

                                    @liv-in-sky

                                    Es wird schon!

                                    Screenshot (4104).png

                                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                    Immer Daten sichern!

                                    liv-in-skyL 1 Reply Last reply
                                    1
                                    • sigi234S sigi234

                                      @liv-in-sky

                                      Es wird schon!

                                      Screenshot (4104).png

                                      liv-in-skyL Offline
                                      liv-in-skyL Offline
                                      liv-in-sky
                                      wrote on last edited by
                                      #76

                                      @sigi234

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

                                      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                      1 Reply Last reply
                                      0
                                      • liv-in-skyL Offline
                                        liv-in-skyL Offline
                                        liv-in-sky
                                        wrote on last edited by
                                        #77

                                        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

                                        nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                        1 Reply Last reply
                                        1
                                        • liv-in-skyL Offline
                                          liv-in-skyL Offline
                                          liv-in-sky
                                          wrote on last edited by
                                          #78

                                          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

                                          nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

                                          1 Reply Last reply
                                          2

                                          Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                                          Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                                          With your input, this post could be even better 💗

                                          Register Login
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          443

                                          Online

                                          32.8k

                                          Users

                                          82.7k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe