Skip to content
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. LED Anzeige für VIS - Akku,Pegel,Kreis

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.2k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    1.9k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    15
    1
    2.2k

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
79 Beiträge 3 Kommentatoren 3.5k Aufrufe 12 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • liv-in-skyL liv-in-sky

    @sigi234

    du machst dir ein blockly, welches die dp ansteuert

    du trickest auf den lautstärke dp und schreibst einen wert zwischen 0-12 in den dp "javascript.0.Tabellen@Liv.LED1RingVIS.AnzeigeRegler.Regler"

    evtl muss dein blockly die werte umrechnen

    sigi234S Online
    sigi234S Online
    sigi234
    Forum Testing Most Active
    schrieb am zuletzt editiert von
    #56

    @liv-in-sky

    Ok, Danke, und wenn ich die Regler-Punkte kleiner will? Hängen die anderen DP mit dem Regler zusammen?

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

    liv-in-skyL 1 Antwort Letzte Antwort
    0
    • sigi234S sigi234

      @liv-in-sky

      Ok, Danke, und wenn ich die Regler-Punkte kleiner will? Hängen die anderen DP mit dem Regler zusammen?

      liv-in-skyL Offline
      liv-in-skyL Offline
      liv-in-sky
      schrieb am zuletzt editiert von
      #57

      @sigi234

      nee - der regler kann nur rund und eckig - bin noch nicht fertig - wolle morgen noch ein paar settings dazufügen

      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 Antwort Letzte Antwort
      1
      • liv-in-skyL Offline
        liv-in-skyL Offline
        liv-in-sky
        schrieb am zuletzt editiert von liv-in-sky
        #58

        neues script im ersten post

        anzeige für pegel und akku hinzugefügt:

        akku ist einspaltig, unten rot und oben grün - werte 0-10 in den dp schreiben
        pegel: ein- oder zweispaltig - unten grün und oben rot - werte 0-10 in den dp schreiben -
        dp: javascript.0.Tabellen@Liv.LED1RingVIS.AnzeigeRegler.Regler

        AApossis (96).gif

        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 - daher muss die breite des widget bei einspaltig und akku geringer sein, als bei zweispaltig
        beispiel:
        AApossis (97).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 Antwort Letzte Antwort
        2
        • 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
          schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antworten Letzte Antwort
            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
              schrieb am zuletzt editiert von 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 Antworten Letzte Antwort
              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
                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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
                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antworten Letzte Antwort
                            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
                              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                              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
                                schrieb am zuletzt editiert von
                                #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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                  0
                                  • sigi234S sigi234

                                    @liv-in-sky

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

                                    liv-in-skyL Offline
                                    liv-in-skyL Offline
                                    liv-in-sky
                                    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                    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
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      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
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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
                                          schrieb am zuletzt editiert von
                                          #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 Antwort Letzte Antwort
                                          1
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          377

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe