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

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

Community Forum

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

NEWS

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

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

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

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

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

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

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

    @homoran deutsch geht nicht

    eigentlich alles z.b.

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

    mit: 6,#14f54b

    Image 3.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

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

      @homoran deutsch geht nicht

      eigentlich alles z.b.

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

      mit: 6,#14f54b

      Image 3.png

      HomoranH Do not disturb
      HomoranH Do not disturb
      Homoran
      Global Moderator Administrators
      wrote on last edited by
      #22

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

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

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

      kein Support per PN! - Fragen im Forum stellen -
      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
      Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
      der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

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

        @homoran deutsch geht nicht

        eigentlich alles z.b.

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

        mit: 6,#14f54b

        Image 3.png

        HomoranH Do not disturb
        HomoranH Do not disturb
        Homoran
        Global Moderator Administrators
        wrote on last edited by
        #23

        @liv-in-sky

        EDIT:

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

        kein Support per PN! - Fragen im Forum stellen -
        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
        Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
        der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

        1 Reply Last reply
        0
        • HomoranH Homoran

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

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

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

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

          @homoran sagte in led kreis für vis:

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

          nur die farbe

          @homoran sagte in led kreis für vis:

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

          true

          @homoran sagte in led kreis für vis:

          alles bunt keine erkennbare Funktion. Was muss da rein?

          einfach bunt reinschreiben (oder irgnedetwas) - reagiert auf aktualisierung

          @homoran sagte in led kreis für vis:

          Anzahl LEDsEIN: keine Wirkung

          6,#14f54b anzahl und farbe durch komma getrennt

          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

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

            @homoran sagte in led kreis für vis:

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

            nur die farbe

            @homoran sagte in led kreis für vis:

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

            true

            @homoran sagte in led kreis für vis:

            alles bunt keine erkennbare Funktion. Was muss da rein?

            einfach bunt reinschreiben (oder irgnedetwas) - reagiert auf aktualisierung

            @homoran sagte in led kreis für vis:

            Anzahl LEDsEIN: keine Wirkung

            6,#14f54b anzahl und farbe durch komma getrennt

            HomoranH Do not disturb
            HomoranH Do not disturb
            Homoran
            Global Moderator Administrators
            wrote on last edited by
            #25

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

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

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

            kein Support per PN! - Fragen im Forum stellen -
            Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
            Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
            der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

            liv-in-skyL 1 Reply Last reply
            0
            • HomoranH Homoran

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

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

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

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

              @homoran seltsam - habe gerade keine idee

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

              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

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

                @homoran seltsam - habe gerade keine idee

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

                HomoranH Do not disturb
                HomoranH Do not disturb
                Homoran
                Global Moderator Administrators
                wrote on last edited by
                #27

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

                habe gerade keine idee

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

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

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

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

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

                kein Support per PN! - Fragen im Forum stellen -
                Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
                der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                liv-in-skyL 1 Reply Last reply
                0
                • HomoranH Homoran

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

                  habe gerade keine idee

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

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

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

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

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

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

                  @homoran sagte in led kreis für vis:

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

                  entweder eine ähnliche farbe eingeben oder "tranparent"

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

                  Image 4.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

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

                    @homoran sagte in led kreis für vis:

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

                    entweder eine ähnliche farbe eingeben oder "tranparent"

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

                    Image 4.png

                    HomoranH Do not disturb
                    HomoranH Do not disturb
                    Homoran
                    Global Moderator Administrators
                    wrote on last edited by
                    #29

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

                    Probier ich noch mal

                    kein Support per PN! - Fragen im Forum stellen -
                    Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                    Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
                    der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                    liv-in-skyL 1 Reply Last reply
                    0
                    • HomoranH Homoran

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

                      Probier ich noch mal

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

                      @homoran

                      für bunt hätte ich noch

                      Image 5.png

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

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

                      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

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

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

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

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

                        möglichkeiten der standard led anzeige

                        AApossis (94).gif

                        Lautstärke Anzeige:

                        AApossis (95).gif

                        beispiel bei pegelanzeige:

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

                        einstellbar:

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

                        siehe mehr unter:

                        
                        //@liv-in-sky 15.8.2021-15:00
                        
                        let  dpVISnew="LED1RingVIS";                            // Datenpunkte unter javascript.x.Tabellen@Liv.LED1RingVIS
                        
                        let ansichtFormat=1;                                //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                                                           //- 1 ist rund, 2 ist quer, 3 ist hoch form
                        
                        let styleLEDsVER;
                        let styleLEDsnew;
                        let scriptLEDnew; 
                        let styleLEDsViele;
                                      
                        let DatapointArr=["javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus",
                        "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser",
                        "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat",
                        "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander",
                        "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation"];                                  
                        
                        async function mainLED(){
                             
                           await needDP().then(  async function () { 
                                             
                        
                        
                        //ALLE EINSTELLUNGEN IN DEN DATENPUNKTEN
                        
                        let grundfarbe="transparent";                         //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen
                        
                        
                        
                        let groessePunkteHoehe=15;                           //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                        let groessePunkteWeite=15;                           //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                        let groesseGesamtHoehe=170;                          //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                        let groesseGesamtWeite=170;                          //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                        let rundung="rund";
                        let shadowLED=false;
                        let abstandLEDs=3;
                        let animationLED=false;
                        
                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser")) {
                           let PunkteArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(',')
                           groessePunkteHoehe=Number(PunkteArr[1]);
                           groessePunkteWeite=Number(PunkteArr[0]); 
                            await wait(2000);}
                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt")) {
                           let GeamtArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt").val.split(',')
                            groesseGesamtHoehe=Number(GeamtArr[0])
                            groesseGesamtWeite=Number(GeamtArr[1])  }
                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus")) {
                           let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus").val;
                            grundfarbe=ledAusFarbe; }  
                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat")) {
                           let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat").val;
                            ansichtFormat=ledAusFarbe; }  
                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat")) {
                           let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat").val;
                            rundung=ledAusFarbe; }   
                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten")) {
                           let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten").val;
                            shadowLED=ledAusFarbe; }   
                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander")) {
                           let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander").val;
                            abstandLEDs=ledAusFarbe; } 
                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation")) {
                           let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation").val;
                            animationLED=ledAusFarbe; }  
                            
                        
                        
                        let ansichtFormatVERHOR="inline-block";
                        let schattenLeds=`width: ${groessePunkteWeite}px;`;
                        if(shadowLED) schattenLeds=`--width: ${groessePunkteWeite}px;
                           width: var(--width);
                           box-shadow: inset 2px 2px  calc(var(--width) * 0.3) #aaa;` ;                           
                        let rotation="";
                        let borderRadius="50%";
                        ansichtFormat==2 ?  ansichtFormatVERHOR="flex" :  ansichtFormatVERHOR="inline-block"
                        ansichtFormat==2 ? rotation="" : rotation=`transform: rotate(180deg); `
                        if (rundung=="rund") {borderRadius="50%";} else if(rundung=="eckig") {borderRadius="0%";} else if (rundung=="abgerundet") {borderRadius="20%";}
                        let animater=`}`
                        if (animationLED) {animater=`animation: zoom-in-zoom-out 1.5s ;
                           	}
                               @keyframes zoom-in-zoom-out { 0% { transform: scale(1, 1);}
                                                            50% { transform: scale(1.3, 1.3); }
                                                           100% { transform: scale(1, 1); }       
                                                           }`} 
                        
                        styleLEDsVER=`#outer${dpVISnew}{
                        		display: ${ansichtFormatVERHOR} ;
                               ${rotation}
                               } 			
                           	.inner${dpVISnew}{
                           	height: ${groessePunkteHoehe}px;
                           	${schattenLeds}
                           	background: ${grundfarbe};
                           	border-radius: ${borderRadius};
                               align-items: center;
                               margin-right: ${String(abstandLEDs)}px;
                               margin-top: 8px;
                               margin-left: ${String(abstandLEDs)}px;                       
                           	
                           	}`
                        
                         styleLEDsViele=`#outer${dpVISnew}{
                        		display: flex;
                               flex-flow: row wrap;
                              /* justify-content: space-around;*/
                               } 			
                           	.inner${dpVISnew}{
                           	height: ${groessePunkteHoehe}px;
                               ${schattenLeds}
                           	background: ${grundfarbe};
                           	border-radius: ${borderRadius};
                               /*animation: 7s infinite alternate slidein;*/
                               align-items: center;
                              /* box-shadow: inset 3px 3px 3px #FFF;*/
                              / box-shadow: inset 50% 50% silver;*/
                               /*blur(4px);*/
                               /*border: 2px;*/
                               margin-right: ${String(abstandLEDs)}px;
                               margin-top: 8px;
                               margin-left: ${String(abstandLEDs)}px;                      
                           	
                           	${animater}`      
                               
                        styleLEDsnew=`#outer${dpVISnew} {
                        		position: absolute;
                           	height: ${groesseGesamtHoehe}px;
                           	width: ${groesseGesamtWeite}px;
                               transform: rotate(-90deg);
                               } 			
                           	.inner${dpVISnew}{
                           	position: absolute;
                           	height: ${groessePunkteHoehe}px;
                           	${schattenLeds}
                           	background: ${grundfarbe};
                           	border-radius: ${borderRadius};
                           	display: flex; 
                           	align-items: center;
                           	justify-content: center;
                           	}`
                        
                        scriptLEDnew=`var outer = document.getElementById('outer${dpVISnew}');
                           	var outerWidth = document.getElementById('outer${dpVISnew}').offsetWidth;
                           	var outerHeight = document.getElementById('outer${dpVISnew}').offsetHeight;
                           	for(var i = 0; i < outer.children.length; i++){
                           	var r = outerWidth / 2 - outer${dpVISnew}.children[i].offsetWidth / 2;
                           	var phi = i / outer${dpVISnew}.children.length;
                           	var x = r * Math.cos(phi * 2 * Math.PI) + r;
                           	var y = r * Math.sin(phi * 2 * Math.PI) + r;
                           	outer${dpVISnew}.children[i].style.left = x+'px';
                           	outer${dpVISnew}.children[i].style.top = y+'px';
                           	console.log(outer${dpVISnew}.children[i].style.left);
                           	}`
                        
                         
                            AlleLedsAus(ansichtFormat);
                        })
                        }
                        
                        
                           async function needDP(){
                        
                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDAnzahl", 15,{type: "number", name: "Anzahl LEDs", role: "value", read: true, write: true, } ); } 
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDFormat"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDFormat", "rund",{type: "string", name: "Format Punkte -rund-eckig-abgerundet", role: "value", read: true, write: true, } ); } 
                           
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDAbstandZueinander", 3,{type: "number", name: "Seitlicher LED Abstand Zueinander", role: "value", read: true, write: true, } ); } 
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDDurchmesser", "15,15",{type: "string", name: "Durchmesser Punkte", role: "value", read: true, write: true, } ); } 
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetDurchmesserGesamt", "200,200",{type: "string", name: "Durchmesser Gesamt", role: "value", read: true, write: true, } ); }         
                            
                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDs", "#14f54b",{type: "string", name: "Alle LEDs in einer Farbe", role: "value", read: true, write: true, } ); }
                        
                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDStandardFarbeAus", "#3f3f3f",{type: "string", name: "Standard Led Farbe Aus", role: "value", read: true, write: true, } ); }   
                           
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsAUS"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsAUS", false,{type: "boolean", name: "Alle LEDs AUS", role: "value", read: true, write: true, } ); }
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl", "4,red",{type: "string", name: "Anzahl LEDs EIN", role: "value", read: true, write: true, } ); } 
                        
                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern", '[{"number":3,"color":"red"}]',{type: "string", name: "Einzelne LEDs Steuern", role: "value", read: true, write: true, } ); }    
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsBunt", "bunt",{type: "string", name: "Alle LEDs Bunt", role: "value", read: true, write: true, } ); }  
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDSchatten"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".LEDSchatten", false,{type: "boolean", name: "Alle LEDs mit Schatten", role: "value", read: true, write: true, } ); }     
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern-Animation", false,{type: "boolean", name: "Animation - Einzelne LEDs Steuern", role: "value", read: true, write: true, } ); }   
                        
                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen", "regenbogen",{type: "string", name: "Alle LEDs Regenbogen", role: "value", read: true, write: true, } ); }         
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt", role: "value", read: true, write: true, } ); } 
                           
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetAnzeigeFormat", 1,{type: "number", name: "Anzeige Format - rund-quer-hoch-eckig", role: "value", read: true, write: true, } ); }  
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel", 3,{type: "number", name: "Anzeige Pegel", role: "value", read: true, write: true, } ); }  
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt Pegel", role: "value", read: true, write: true, } ); }   
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat", "rund",{type: "string", name: "Pegel Punkte Format -rund -eckig", role: "value", read: true, write: true, } ); } 
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse", "19,6",{type: "string", name: "AnzeigePegel Punkte Groesse", role: "value", read: true, write: true, } ); }
                        
                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat", "zweispaltig",{type: "string", name: "AnzeigePegel Usage Format ", role: "value", read: true, write: true, } ); }    
                        
                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand"))) {
                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand", "5,5",{type: "string", name: "AnzeigePegel Punkte Abstand", role: "value", read: true, write: true, } ); }            
                             }
                        
                          
                        
                        
                            
                        
                            function AlleLedsAus(ansichtFormat) {
                               
                               let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
                              
                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                               for (let i=0;i<menge;i++){
                                   augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew}"></div>`
                               }
                               augabeHilfe=augabeHilfe+`</div>`;
                        
                               let ausgabe;
                               switch (ansichtFormat) { 
                                      case 1:  ausgabe="<style>"+styleLEDsnew+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                      case 2:  ausgabe="<style>"+styleLEDsVER+`</style>`+augabeHilfe; break;
                                      case 3:  ausgabe="<style>"+styleLEDsVER+`</style>`+augabeHilfe; break; 
                                      case 4:  ausgabe="<style>"+styleLEDsViele+`</style>`+augabeHilfe; break; 
                                      }
                            
                        
                            
                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                        
                        
                            }
                        
                            function alleLedsEIN(ansichtFormat) {
                                 let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
                               let colorAll= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs").val;
                             
                               let newColorStyle=`.inner1${dpVISnew}{  			 background: ${colorAll};}`;
                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                             
                               for (let i=0;i<menge;i++){
                                  augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`
                               }
                               augabeHilfe=augabeHilfe+`</div>`;
                          
                              let ausgabe;
                               switch (ansichtFormat) { 
                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                      case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break;
                                      }
                        
                            
                        
                            
                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                            }
                        
                            function LEDsEINAnzahl(ansichtFormat) {
                                
                               let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
                               let mengeArr= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl").val.split(',');
                            
                               let newColorStyle=`.inner1${dpVISnew}{  			 background: ${mengeArr[1]};}`;
                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                            
                               for (let i=0;i<menge;i++){
                                   if(i<Number(mengeArr[0])) {augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`} 
                                                         else {  augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew}"></div>`}
                               }
                               augabeHilfe=augabeHilfe+`</div>`;
                              
                                let ausgabe;
                               switch (ansichtFormat) { 
                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                                      }
                        
                           
                        
                           
                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                            }
                        
                            function alleLedsRegenbogen(ansichtFormat) {
                                  let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
                               let colorAll= `linear-gradient(red 20%, yellow 40%, orange 60%, cyan 80%)`;
                             
                               let newColorStyle=`.inner1${dpVISnew}{  			 background-image: ${colorAll};}`;
                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                             
                               for (let i=0;i<menge;i++){
                                  augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`;
                               }
                               augabeHilfe=augabeHilfe+`</div>`;
                              
                                let ausgabe;
                               switch (ansichtFormat) { 
                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                                      }
                        
                        
                            
                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                        
                            }
                        
                            function alleLedsBunt(ansichtFormat) {
                                  let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
                             
                               let newColorStyle=`.inner1${dpVISnew}{  			 background: #0AD0E6;} .inner2${dpVISnew}{  			 background: #F2DD23;} 
                                                  .inner3${dpVISnew}{  			 background: #63F285;} .inner4${dpVISnew}{  			 background: #E60A62;}`;
                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                             
                               for (let i=0;i<menge;i++){
                                
                                   if(i%4==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner4${dpVISnew} "></div>`}  
                                   else if (i%3==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner3${dpVISnew} "></div>`  } 
                                   else if (i%2==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner2${dpVISnew} "></div>`  } 
                                   else if (i%1==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`  }
                                  
                               }
                               augabeHilfe=augabeHilfe+`</div>`;
                               let ausgabe;
                               switch (ansichtFormat) { 
                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                                      }
                        
                           
                        
                            
                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                        
                            } 
                        
                           function einzelneLedsSteuern(ansichtFormat) {
                                
                              let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDAnzahl").val;
                               let mengeArr= JSON.parse(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern").val);
                               let pictureSizeBreite=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(','))[0];
                               let pictureSizeHoehe=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDDurchmesser").val.split(','))[1];
                           
                               let newColorStyle="";
                          
                               for (let i=0;i<mengeArr.length;i++){
                               newColorStyle=newColorStyle+`.inner${(i+1)}${dpVISnew}{  			 background: ${mengeArr[i].color};}`
                               }
                              
                               
                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                               let arrHelper=[];
                             
                               for (let i=0;i<menge;i++){
                                    arrHelper.push(`<div class="inner${dpVISnew} "></div>`)}
                                for (let i=0;i<mengeArr.length;i++){
                              //  log(JSON.stringify(mengeArr[i]))
                                    if(mengeArr[i].hasOwnProperty("picture")) {/*log(mengeArr[i].picture);*/ arrHelper[(mengeArr[i].number)-1]=   `<div class="inner${dpVISnew} inner${i+1}${dpVISnew} "><img src='${mengeArr[i].picture}' width='${pictureSizeBreite}px' height='${pictureSizeHoehe}px'></div>`}
                                    else {arrHelper[(mengeArr[i].number)-1]=   `<div class="inner${dpVISnew} inner${i+1}${dpVISnew} "></div>`}  }
                                  
                               for (let i=0;i<menge;i++){
                                     augabeHilfe=augabeHilfe+arrHelper[i] }
                                     
                             
                                                       
                               
                               augabeHilfe=augabeHilfe+`</div>`;
                               let ausgabe;
                               switch (ansichtFormat) { 
                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                      case 4:  ausgabe="<style>"+styleLEDsViele+newColorStyle+`</style>`+augabeHilfe; break; 
                                      }
                        
                                
                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                            }
                        
                        
                        mainLED();
                        //Pegel(12)
                        
                        
                         on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsAUS", val: true}, function (obj) { 
                         if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  AlleLedsAus(ansichtFormat);
                        
                         setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsAUS",false)
                         });
                        
                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".LEDsEINAnzahl",  change: "any"}, function (obj) { 
                         
                         if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  LEDsEINAnzahl(ansichtFormat);                                
                                                                         
                        
                         });
                        
                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs",  change: "any"}, function (obj) { 
                         
                         if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  alleLedsEIN(ansichtFormat);
                        
                         });
                        
                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt",  change: "any"}, function (obj) { 
                         
                        if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))   alleLedsBunt(ansichtFormat);
                        
                         });
                        
                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen",  change: "any"}, function (obj) { 
                         
                         if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  alleLedsRegenbogen(ansichtFormat);
                        
                         });
                        
                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern",  change: "any"}, function (obj) { 
                         
                         if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))  einzelneLedsSteuern(ansichtFormat);
                        
                         });
                        
                         on({id: DatapointArr,  change: "any"}, function (obj) { 
                         
                         mainLED();
                        
                         });
                        
                         on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel",  change: "any"}, function (obj) { 
                          var value = obj.state.val;
                           Pegel(value);                                
                           });
                        
                        
                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat",  change: "any"}, function (obj) { 
                         var value = obj.state.val;
                        // if(value=="rund" || value=="eckig") {
                        
                         Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
                           });
                        
                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse",  change: "any"}, function (obj) { 
                         var value = obj.state.val;
                        // if(value=="rund" || value=="eckig") {
                        
                         Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
                           });
                        
                         on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand",  change: "any"}, function (obj) { 
                         var value = obj.state.val;
                        // if(value=="rund" || value=="eckig") {
                        
                         Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
                           });  
                        
                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat",  change: "any"}, function (obj) { 
                         var value = obj.state.val;
                        // if(value=="rund" || value=="eckig") {
                        
                         Pegel(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.Pegel").val);                               
                           });      
                        
                        
                        
                        async function Pegel(myStufe){
                              if (!existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand")) {
                              await wait(4000);}
                             let punkteGroesseBreite=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse").val.split(','))[0];
                             let punkteGroesseHoehe=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteGroesse").val.split(','))[1];
                             let punkteAbstandHorizontal=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand").val.split(','))[0];
                             let punkteAbstandVertikal=(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PunkteAbstand").val.split(','))[1];
                        
                             let PegelPunkteFormat=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.PegelPunkteFormat").val;
                             let borderRadiosPunkte ;
                             if (PegelPunkteFormat=="eckig") {borderRadiosPunkte = ""} else {borderRadiosPunkte = `border-radius: 50%; `;}
                             if (PegelPunkteFormat=="rund") borderRadiosPunkte = `border-radius: 50%; `;
                        
                             let usage=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.UsageFormat").val;
                        
                         let arrMitColor=[  `<li class="flex-item${dpVISnew} more-color-red${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew} more-color-red${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew} more-color-red${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew} more-color-red${dpVISnew}"></li>`,
                         `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-yellow${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                        `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                         `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                        `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                        `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew} more-color-green${dpVISnew}"></li>`]
                        
                         let arrOhneColor=[`<li class="flex-item${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew}"></li>`,
                         `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`,
                           `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`,
                        `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`,
                         `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`,
                        `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`,
                        `<li class="flex-item${dpVISnew}"></li>`,
                          `<li class="flex-item${dpVISnew}"></li>`]
                        
                        let stylePegel=`<style>
                        
                        .flex-container${dpVISnew} {
                         
                         display: flex;
                         flex-flow: row wrap;
                         justify-content: space-around;
                         
                         padding: 2px;
                         margin: 3px;
                         list-style: none;
                        }
                        
                        .flex-item${dpVISnew} {
                         ${borderRadiosPunkte}  
                         background: #3f3f3f;
                        /* padding: 15px; */
                         width: ${punkteGroesseBreite}px;
                         height: ${punkteGroesseHoehe}px;
                         margin-top: ${punkteAbstandVertikal}px; /*5*/
                         margin-left: ${punkteAbstandHorizontal}px; /*15*/
                         margin-right: ${punkteAbstandHorizontal}px; /*15*/
                         margin-bottom: ${punkteAbstandVertikal}px; /*8*/
                         line-height: 15px;
                         color: white;
                         font-weight: bold;
                         font-size: 3em;
                         text-align: center;
                         
                        
                        }
                        .more-color-red${dpVISnew}{
                        background: linear-gradient(11deg, rgba(179,75,62,1) 0%, rgba(157,66,50,1) 26%, rgba(239,215,218,1) 75%, rgba(228,21,89,1) 100%);
                        ${borderRadiosPunkte}
                          box-shadow: 1px 1px 2px 2px red;
                        }
                        
                        .more-color-yellow${dpVISnew}{
                        background: linear-gradient(11deg, rgba(249,249,152,0.947835799358806) 0%, rgba(249,243,84,1) 26%, rgba(238,239,215,1) 75%, rgba(238,242,53,1) 100%);
                        ${borderRadiosPunkte}
                          box-shadow: 1px 1px 2px 2px #b8ba48;
                        }
                        
                        .more-color-green${dpVISnew}{
                        background: linear-gradient(11deg, rgba(117,190,147,1) 0%, rgba(108,198,121,1) 26%, rgba(215,239,215,1) 75%, rgba(59,183,44,1) 100%);
                        ${borderRadiosPunkte}
                          box-shadow: 1px 1px 3px 3px green;
                        }
                        
                        
                        </style><ul class="flex-container${dpVISnew}">`;
                        //myStufe=myStufe/2;
                        let myHTMLText="";
                        
                        
                        if(usage=="zweispaltig") {
                          let arrMitColorReverse=arrMitColor.reverse(); 
                          for(let i=arrOhneColor.length-1;i>=0;i-=2){
                         //  log(i.toString())
                          if(i-(myStufe*2) >= 0 ) { myHTMLText=myHTMLText+arrOhneColor[i]+arrOhneColor[i-1];} 
                          else {  myHTMLText=myHTMLText+arrMitColorReverse[i]+arrMitColorReverse[i-1];} }
                        
                        } else if(usage=="einspaltig"){
                           let arrMitColorReverse=arrMitColor.reverse();
                          myHTMLText="";
                          for(let i=arrOhneColor.length-1;i>=0;i-=2){
                          //log(i.toString() + "  "+ arrMitColorReverse[i])
                          if(i-(myStufe*2) >= 0 ) { myHTMLText=myHTMLText+arrOhneColor[i];} 
                          else {  myHTMLText=myHTMLText+arrMitColorReverse[i];} }
                        
                        } else if (usage=="akku"){
                          myHTMLText="";
                          log("akku")
                          for(let i=arrOhneColor.length-1;i>=0;i-=2){
                           // log(i.toString() + "  "+ arrMitColor[i] )
                          if(i-(myStufe*2) >= 0 ) { myHTMLText=myHTMLText+arrOhneColor[i];} 
                          else {  myHTMLText=myHTMLText+arrMitColor[i];} }
                        }
                        let ausgabe=stylePegel+myHTMLText+`</ul>`;
                        
                        // log(ausgabe)
                        
                        setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigePegel.WidgetPegelAusgabe",ausgabe);
                        
                        
                         }
                        
                        
                        
                        
                        
                        
                        
                         
                         
                        

                        beispiel view von @sigi234

                        1628341532240-screenshot-4104.png

                        weitere beispiele:

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

                        beispiel als uhrzeit mit bildern (zahlen 0-9)

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

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

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

                        AApossis (181).gif

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

                        @liv-in-sky

                        Cool, gehen auch LED Balken Horizontal und Vertikal?

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

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

                          @homoran

                          für bunt hätte ich noch

                          Image 5.png

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

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

                          HomoranH Do not disturb
                          HomoranH Do not disturb
                          Homoran
                          Global Moderator Administrators
                          wrote on last edited by
                          #32

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

                          sieht schon ganz gut aus.
                          LED_DOTs_006.png

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

                          kein Support per PN! - Fragen im Forum stellen -
                          Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                          Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
                          der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

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

                            @liv-in-sky

                            Cool, gehen auch LED Balken Horizontal und Vertikal?

                            HomoranH Do not disturb
                            HomoranH Do not disturb
                            Homoran
                            Global Moderator Administrators
                            wrote on last edited by
                            #33

                            @sigi234 sagte in led kreis für vis:

                            @liv-in-sky

                            Cool, gehen auch LED Balken Horizontal und Vertikal?

                            ...und dann noch mit WLED die einzelnen Punkte synchronisieren 😂

                            kein Support per PN! - Fragen im Forum stellen -
                            Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                            Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
                            der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

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

                              @liv-in-sky

                              Cool, gehen auch LED Balken Horizontal und Vertikal?

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

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

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

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

                              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

                              HomoranH 1 Reply Last reply
                              1
                              • HomoranH Homoran

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

                                sieht schon ganz gut aus.
                                LED_DOTs_006.png

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

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

                                @homoran

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

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

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

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

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

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

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

                                  HomoranH Do not disturb
                                  HomoranH Do not disturb
                                  Homoran
                                  Global Moderator Administrators
                                  wrote on last edited by Homoran
                                  #36

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

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

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

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

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

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

                                  kein Support per PN! - Fragen im Forum stellen -
                                  Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                  Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
                                  der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                                  sigi234S 1 Reply Last reply
                                  0
                                  • HomoranH Homoran

                                    @sigi234 sagte in led kreis für vis:

                                    @liv-in-sky

                                    Cool, gehen auch LED Balken Horizontal und Vertikal?

                                    ...und dann noch mit WLED die einzelnen Punkte synchronisieren 😂

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

                                    @homoran sagte in led kreis für vis:

                                    @sigi234 sagte in led kreis für vis:

                                    @liv-in-sky

                                    Cool, gehen auch LED Balken Horizontal und Vertikal?

                                    ...und dann noch mit WLED die einzelnen Punkte synchronisieren 😂

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

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

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

                                    @homoran sagte in led kreis für vis:

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

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

                                    morgen gehts weiter

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

                                    1 Reply Last reply
                                    0
                                    • HomoranH Homoran

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

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

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

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

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

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

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

                                      @homoran sagte in led kreis für vis:

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

                                      👍

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

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

                                        neues script - bitte testen
                                         
                                        ab jetzt ein standard html widget verwenden - nicht das vom post davor - bzw. einfach nur das rotate aus dem transform-feld entfernen
                                         
                                        was geht
                                         
                                        AApossis (94).gif
                                         
                                        die setting dp reagieren jetzt direkt bei änderung
                                         
                                        AApossis (92).gif
                                         
                                         
                                        ein paar beispiele
                                        die rotation der leds ist in einem anderen script erzeugt worden, welches die dp steuert
                                        AApossis (90).gif AApossis (89).gif AApossis (93).gif
                                         
                                         
                                        es gibt einen neuen datenpunkt für für einzelne LEDs - die müssen im JSON format in den dp geschrieben werden z.b.

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

                                        zum installieren

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

                                        
                                        //@liv-in-sky 4.8.2021-10:30
                                        
                                        let  dpVISnew="LED1RingVIS";                            // Datenpunkte unter javascript.x.Tabellen@Liv.LED1RingVIS
                                        
                                        let ansichtFormat=1;                                //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                                                                           //- 1 ist rund, 2 ist quer, 3 ist hoch form
                                        
                                        let styleLEDsVER;
                                        let styleLEDsnew;
                                        let scriptLEDnew; 
                                                      
                                        let DatapointArr=["javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus",
                                        "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte",
                                        "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl"];                                  
                                        
                                        async function mainLED(){
                                             
                                           await needDP().then(  function () { 
                                        
                                        
                                        
                                        //ALLE EINSTELLUNGEN IN DEN DATENPUNKTEN
                                        
                                        let grundfarbe="transparent";                         //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen
                                        
                                        
                                        
                                        let groessePunkteHoehe=15;                           //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                        let groessePunkteWeite=15;                           //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                        let groesseGesamtHoehe=170;                          //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                        let groesseGesamtWeite=170;                          //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                        
                                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte")) {
                                           let PunkteArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte").val.split(',')
                                           groessePunkteHoehe=Number(PunkteArr[0])
                                           groessePunkteWeite=Number(PunkteArr[1]) }
                                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt")) {
                                           let GeamtArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt").val.split(',')
                                            groesseGesamtHoehe=Number(GeamtArr[0])
                                            groesseGesamtWeite=Number(GeamtArr[1])  }
                                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus")) {
                                           let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus").val;
                                            grundfarbe=ledAusFarbe; }  
                                          if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat")) {
                                           let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat").val;
                                            ansichtFormat=ledAusFarbe; }  
                                        
                                        
                                        let ansichtFormatVERHOR="inline-block";
                                                                   
                                        let rotation="";
                                        
                                        ansichtFormat==2 ?  ansichtFormatVERHOR="flex" :  ansichtFormatVERHOR="inline-block"
                                        ansichtFormat==2 ? rotation="" : rotation=`transform: rotate(180deg); `
                                        
                                        styleLEDsVER=`#outer${dpVISnew}{
                                        		display: ${ansichtFormatVERHOR} ;
                                               ${rotation}
                                               } 			
                                           	.inner${dpVISnew}{
                                           	height: ${groessePunkteHoehe}px;
                                           	width: ${groessePunkteWeite}px;
                                           	background: ${grundfarbe};
                                           	border-radius: 50%;
                                               align-items: center;
                                               margin-right: 5px;
                                               margin-top: 8px;
                                               margin-left: 5px;                       
                                           	
                                           	}`
                                               
                                        styleLEDsnew=`#outer${dpVISnew} {
                                        		position: absolute;
                                           	height: ${groesseGesamtHoehe}px;
                                           	width: ${groesseGesamtWeite}px;
                                               transform: rotate(-90deg);
                                               } 			
                                           	.inner${dpVISnew}{
                                           	position: absolute;
                                           	height: ${groessePunkteHoehe}px;
                                           	width: ${groessePunkteWeite}px;
                                           	background: ${grundfarbe};
                                           	border-radius: 50%;
                                           	display: flex; 
                                           	align-items: center;
                                           	justify-content: center;
                                           	}`
                                        
                                        scriptLEDnew=`var outer = document.getElementById('outer${dpVISnew}');
                                           	var outerWidth = document.getElementById('outer${dpVISnew}').offsetWidth;
                                           	var outerHeight = document.getElementById('outer${dpVISnew}').offsetHeight;
                                           	for(var i = 0; i < outer.children.length; i++){
                                           	var r = outerWidth / 2 - outer${dpVISnew}.children[i].offsetWidth / 2;
                                           	var phi = i / outer${dpVISnew}.children.length;
                                           	var x = r * Math.cos(phi * 2 * Math.PI) + r;
                                           	var y = r * Math.sin(phi * 2 * Math.PI) + r;
                                           	outer${dpVISnew}.children[i].style.left = x+'px';
                                           	outer${dpVISnew}.children[i].style.top = y+'px';
                                           	console.log(outer${dpVISnew}.children[i].style.left);
                                           	}`
                                        
                                         
                                            alleLedsAus(ansichtFormat);
                                        })
                                        }
                                        
                                        
                                           async function needDP(){
                                        
                                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".Anzahl", 15,{type: "number", name: "Anzahl LEDs", role: "value", read: true, write: true, } ); } 
                                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".DurchmesserPunkte", "15,15",{type: "string", name: "Durchmesser Punkte", role: "value", read: true, write: true, } ); } 
                                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".DurchmesserGesamt", "200,200",{type: "string", name: "Durchmesser Gesamt", role: "value", read: true, write: true, } ); }         
                                            
                                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDs", "#14f54b",{type: "string", name: "Alle LEDs", role: "value", read: true, write: true, } ); }
                                        
                                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus", "#3f3f3f",{type: "string", name: "Standard Led Farbe Aus", role: "value", read: true, write: true, } ); }   
                                           
                                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".alleLEDsAUS", false,{type: "boolean", name: "Alle LEDs AUS", role: "value", read: true, write: true, } ); }
                                        
                                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN", "4,red",{type: "string", name: "Anzahl LEDs EIN", role: "value", read: true, write: true, } ); } 
                                        
                                            if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern", '[{"number":3,"color":"red"}]',{type: "string", name: "Einzelne LEDs Steuern", role: "value", read: true, write: true, } ); }    
                                        
                                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsBunt", "bunt",{type: "string", name: "Alle LEDs Bunt", role: "value", read: true, write: true, } ); }  
                                        
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen", "regenbogen",{type: "string", name: "Alle LEDs Regenbogen", role: "value", read: true, write: true, } ); }         
                                        
                                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt", role: "value", read: true, write: true, } ); } 
                                           
                                           if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat"))) {
                                               await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeFormat", 1,{type: "number", name: "Anzeige Format - rund-quer-hoch", role: "value", read: true, write: true, } ); }  
                                            
                                             }
                                        
                                          
                                        
                                        
                                            
                                        
                                            function alleLedsAus(ansichtFormat) {
                                               
                                               let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                              
                                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                               for (let i=0;i<menge;i++){
                                                   augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew}"></div>`
                                               }
                                               augabeHilfe=augabeHilfe+`</div>`;
                                        
                                               let ausgabe;
                                               switch (ansichtFormat) { 
                                                      case 1:  ausgabe="<style>"+styleLEDsnew+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                      case 2:  ausgabe="<style>"+styleLEDsVER+`</style>`+augabeHilfe; break;
                                                      case 3:  ausgabe="<style>"+styleLEDsVER+`</style>`+augabeHilfe; break; 
                                                      }
                                            
                                        
                                            
                                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                        
                                        
                                            }
                                        
                                            function alleLedsEIN(ansichtFormat) {
                                                 let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                               let colorAll= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs").val;
                                             
                                               let newColorStyle=`.inner1${dpVISnew}{  			 background: ${colorAll};}`;
                                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                             
                                               for (let i=0;i<menge;i++){
                                                  augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`
                                               }
                                               augabeHilfe=augabeHilfe+`</div>`;
                                          
                                              let ausgabe;
                                               switch (ansichtFormat) { 
                                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                      }
                                        
                                            
                                        
                                            
                                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                            }
                                        
                                            function anzahlLEDsEIN(ansichtFormat) {
                                                
                                               let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                               let mengeArr= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN").val.split(',');
                                            
                                               let newColorStyle=`.inner1${dpVISnew}{  			 background: ${mengeArr[1]};}`;
                                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                            
                                               for (let i=0;i<menge;i++){
                                                   if(i<Number(mengeArr[0])) {augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`} 
                                                                         else {  augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew}"></div>`}
                                               }
                                               augabeHilfe=augabeHilfe+`</div>`;
                                              
                                                let ausgabe;
                                               switch (ansichtFormat) { 
                                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                      }
                                        
                                           
                                        
                                           
                                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                            }
                                        
                                            function alleLedsRegenbogen(ansichtFormat) {
                                                  let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                               let colorAll= `linear-gradient(red 20%, yellow 40%, orange 60%, cyan 80%)`;
                                             
                                               let newColorStyle=`.inner1${dpVISnew}{  			 background-image: ${colorAll};}`;
                                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                             
                                               for (let i=0;i<menge;i++){
                                                  augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`;
                                               }
                                               augabeHilfe=augabeHilfe+`</div>`;
                                              
                                                let ausgabe;
                                               switch (ansichtFormat) { 
                                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                      }
                                        
                                        
                                            
                                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                        
                                            }
                                        
                                            function alleLedsBunt(ansichtFormat) {
                                                  let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                             
                                               let newColorStyle=`.inner1${dpVISnew}{  			 background: #0AD0E6;} .inner2${dpVISnew}{  			 background: #F2DD23;} 
                                                                  .inner3${dpVISnew}{  			 background: #63F285;} .inner4${dpVISnew}{  			 background: #E60A62;}`;
                                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                             
                                               for (let i=0;i<menge;i++){
                                                
                                                   if(i%4==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner4${dpVISnew} "></div>`}  
                                                   else if (i%3==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner3${dpVISnew} "></div>`  } 
                                                   else if (i%2==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner2${dpVISnew} "></div>`  } 
                                                   else if (i%1==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`  }
                                                  
                                               }
                                               augabeHilfe=augabeHilfe+`</div>`;
                                               let ausgabe;
                                               switch (ansichtFormat) { 
                                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                      }
                                        
                                           
                                        
                                            
                                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                        
                                            } 
                                        
                                           function einzelneLedsSteuern(ansichtFormat) {
                                                
                                              let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                               let mengeArr= JSON.parse(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern").val);
                                           
                                               let newColorStyle="";
                                          
                                               for (let i=0;i<mengeArr.length;i++){
                                               newColorStyle=newColorStyle+`.inner${(i+1)}${dpVISnew}{  			 background: ${mengeArr[i].color};}`
                                               }
                                              
                                               
                                               let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                               let arrHelper=[];
                                             
                                               for (let i=0;i<menge;i++){
                                                    arrHelper.push(`<div class="inner${dpVISnew} "></div>`)}
                                                for (let i=0;i<mengeArr.length;i++){
                                                
                                        
                                                    arrHelper[(mengeArr[i].number)-1]=   `<div class="inner${dpVISnew} inner${i+1}${dpVISnew} "></div>`}  
                                                  
                                               for (let i=0;i<menge;i++){
                                                     augabeHilfe=augabeHilfe+arrHelper[i] }
                                                     
                                             
                                                                       
                                               
                                               augabeHilfe=augabeHilfe+`</div>`;
                                               let ausgabe;
                                               switch (ansichtFormat) { 
                                                      case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                      case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                      case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                      }
                                        
                                                
                                               setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                            }
                                        
                                        mainLED();
                                        
                                        
                                         on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS", ack: false, val: true}, function (obj) { 
                                         
                                         alleLedsAus(ansichtFormat);
                                        
                                         setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS",false)
                                         });
                                        
                                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN", ack: false, change: "any"}, function (obj) { 
                                         
                                         anzahlLEDsEIN(ansichtFormat);                                
                                                                                         
                                        
                                         });
                                        
                                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs", ack: false, change: "any"}, function (obj) { 
                                         
                                         alleLedsEIN(ansichtFormat);
                                        
                                         });
                                        
                                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt", ack: false, change: "any"}, function (obj) { 
                                         
                                         alleLedsBunt(ansichtFormat);
                                        
                                         });
                                        
                                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen", ack: false, change: "any"}, function (obj) { 
                                         
                                         alleLedsRegenbogen(ansichtFormat);
                                        
                                         });
                                        
                                        on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern", ack: false, change: "any"}, function (obj) { 
                                         
                                         einzelneLedsSteuern(ansichtFormat);
                                        
                                         });
                                        
                                         on({id: DatapointArr, ack: false, change: "any"}, function (obj) { 
                                         
                                         mainLED();
                                        
                                         });
                                        
                                        
                                        
                                        
                                        
                                        
                                         
                                        

                                        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

                                        HomoranH sigi234S 2 Replies Last reply
                                        1
                                        • liv-in-skyL liv-in-sky

                                          neues script - bitte testen
                                           
                                          ab jetzt ein standard html widget verwenden - nicht das vom post davor - bzw. einfach nur das rotate aus dem transform-feld entfernen
                                           
                                          was geht
                                           
                                          AApossis (94).gif
                                           
                                          die setting dp reagieren jetzt direkt bei änderung
                                           
                                          AApossis (92).gif
                                           
                                           
                                          ein paar beispiele
                                          die rotation der leds ist in einem anderen script erzeugt worden, welches die dp steuert
                                          AApossis (90).gif AApossis (89).gif AApossis (93).gif
                                           
                                           
                                          es gibt einen neuen datenpunkt für für einzelne LEDs - die müssen im JSON format in den dp geschrieben werden z.b.

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

                                          zum installieren

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

                                          
                                          //@liv-in-sky 4.8.2021-10:30
                                          
                                          let  dpVISnew="LED1RingVIS";                            // Datenpunkte unter javascript.x.Tabellen@Liv.LED1RingVIS
                                          
                                          let ansichtFormat=1;                                //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                                                                             //- 1 ist rund, 2 ist quer, 3 ist hoch form
                                          
                                          let styleLEDsVER;
                                          let styleLEDsnew;
                                          let scriptLEDnew; 
                                                        
                                          let DatapointArr=["javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus",
                                          "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt","javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte",
                                          "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl"];                                  
                                          
                                          async function mainLED(){
                                               
                                             await needDP().then(  function () { 
                                          
                                          
                                          
                                          //ALLE EINSTELLUNGEN IN DEN DATENPUNKTEN
                                          
                                          let grundfarbe="transparent";                         //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen
                                          
                                          
                                          
                                          let groessePunkteHoehe=15;                           //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                          let groessePunkteWeite=15;                           //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                          let groesseGesamtHoehe=170;                          //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                          let groesseGesamtWeite=170;                          //Datenpunkt einstellung hat höhere priorität - bitte dort bestimmen und script neustarten
                                          
                                            if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte")) {
                                             let PunkteArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte").val.split(',')
                                             groessePunkteHoehe=Number(PunkteArr[0])
                                             groessePunkteWeite=Number(PunkteArr[1]) }
                                            if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt")) {
                                             let GeamtArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt").val.split(',')
                                              groesseGesamtHoehe=Number(GeamtArr[0])
                                              groesseGesamtWeite=Number(GeamtArr[1])  }
                                            if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus")) {
                                             let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus").val;
                                              grundfarbe=ledAusFarbe; }  
                                            if (existsState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat")) {
                                             let ledAusFarbe=getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat").val;
                                              ansichtFormat=ledAusFarbe; }  
                                          
                                          
                                          let ansichtFormatVERHOR="inline-block";
                                                                     
                                          let rotation="";
                                          
                                          ansichtFormat==2 ?  ansichtFormatVERHOR="flex" :  ansichtFormatVERHOR="inline-block"
                                          ansichtFormat==2 ? rotation="" : rotation=`transform: rotate(180deg); `
                                          
                                          styleLEDsVER=`#outer${dpVISnew}{
                                          		display: ${ansichtFormatVERHOR} ;
                                                 ${rotation}
                                                 } 			
                                             	.inner${dpVISnew}{
                                             	height: ${groessePunkteHoehe}px;
                                             	width: ${groessePunkteWeite}px;
                                             	background: ${grundfarbe};
                                             	border-radius: 50%;
                                                 align-items: center;
                                                 margin-right: 5px;
                                                 margin-top: 8px;
                                                 margin-left: 5px;                       
                                             	
                                             	}`
                                                 
                                          styleLEDsnew=`#outer${dpVISnew} {
                                          		position: absolute;
                                             	height: ${groesseGesamtHoehe}px;
                                             	width: ${groesseGesamtWeite}px;
                                                 transform: rotate(-90deg);
                                                 } 			
                                             	.inner${dpVISnew}{
                                             	position: absolute;
                                             	height: ${groessePunkteHoehe}px;
                                             	width: ${groessePunkteWeite}px;
                                             	background: ${grundfarbe};
                                             	border-radius: 50%;
                                             	display: flex; 
                                             	align-items: center;
                                             	justify-content: center;
                                             	}`
                                          
                                          scriptLEDnew=`var outer = document.getElementById('outer${dpVISnew}');
                                             	var outerWidth = document.getElementById('outer${dpVISnew}').offsetWidth;
                                             	var outerHeight = document.getElementById('outer${dpVISnew}').offsetHeight;
                                             	for(var i = 0; i < outer.children.length; i++){
                                             	var r = outerWidth / 2 - outer${dpVISnew}.children[i].offsetWidth / 2;
                                             	var phi = i / outer${dpVISnew}.children.length;
                                             	var x = r * Math.cos(phi * 2 * Math.PI) + r;
                                             	var y = r * Math.sin(phi * 2 * Math.PI) + r;
                                             	outer${dpVISnew}.children[i].style.left = x+'px';
                                             	outer${dpVISnew}.children[i].style.top = y+'px';
                                             	console.log(outer${dpVISnew}.children[i].style.left);
                                             	}`
                                          
                                           
                                              alleLedsAus(ansichtFormat);
                                          })
                                          }
                                          
                                          
                                             async function needDP(){
                                          
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".Anzahl", 15,{type: "number", name: "Anzahl LEDs", role: "value", read: true, write: true, } ); } 
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserPunkte"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".DurchmesserPunkte", "15,15",{type: "string", name: "Durchmesser Punkte", role: "value", read: true, write: true, } ); } 
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".DurchmesserGesamt"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".DurchmesserGesamt", "200,200",{type: "string", name: "Durchmesser Gesamt", role: "value", read: true, write: true, } ); }         
                                              
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDs", "#14f54b",{type: "string", name: "Alle LEDs", role: "value", read: true, write: true, } ); }
                                          
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".StandardLedFarbeAus", "#3f3f3f",{type: "string", name: "Standard Led Farbe Aus", role: "value", read: true, write: true, } ); }   
                                             
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".alleLEDsAUS", false,{type: "boolean", name: "Alle LEDs AUS", role: "value", read: true, write: true, } ); }
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN", "4,red",{type: "string", name: "Anzahl LEDs EIN", role: "value", read: true, write: true, } ); } 
                                          
                                              if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern", '[{"number":3,"color":"red"}]',{type: "string", name: "Einzelne LEDs Steuern", role: "value", read: true, write: true, } ); }    
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsBunt", "bunt",{type: "string", name: "Alle LEDs Bunt", role: "value", read: true, write: true, } ); }  
                                          
                                                if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen", "regenbogen",{type: "string", name: "Alle LEDs Regenbogen", role: "value", read: true, write: true, } ); }         
                                          
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".WidgetAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt", role: "value", read: true, write: true, } ); } 
                                             
                                             if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzeigeFormat"))) {
                                                 await createStateAsync("Tabellen@Liv."+dpVISnew+".AnzeigeFormat", 1,{type: "number", name: "Anzeige Format - rund-quer-hoch", role: "value", read: true, write: true, } ); }  
                                              
                                               }
                                          
                                            
                                          
                                          
                                              
                                          
                                              function alleLedsAus(ansichtFormat) {
                                                 
                                                 let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                                 for (let i=0;i<menge;i++){
                                                     augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew}"></div>`
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                          
                                                 let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+`</style>`+augabeHilfe; break; 
                                                        }
                                              
                                          
                                              
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                          
                                          
                                              }
                                          
                                              function alleLedsEIN(ansichtFormat) {
                                                   let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                 let colorAll= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs").val;
                                               
                                                 let newColorStyle=`.inner1${dpVISnew}{  			 background: ${colorAll};}`;
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                               
                                                 for (let i=0;i<menge;i++){
                                                    augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                            
                                                let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                              
                                          
                                              
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                              }
                                          
                                              function anzahlLEDsEIN(ansichtFormat) {
                                                  
                                                 let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                 let mengeArr= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN").val.split(',');
                                              
                                                 let newColorStyle=`.inner1${dpVISnew}{  			 background: ${mengeArr[1]};}`;
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                              
                                                 for (let i=0;i<menge;i++){
                                                     if(i<Number(mengeArr[0])) {augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`} 
                                                                           else {  augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew}"></div>`}
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                                
                                                  let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                             
                                          
                                             
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                              }
                                          
                                              function alleLedsRegenbogen(ansichtFormat) {
                                                    let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                 let colorAll= `linear-gradient(red 20%, yellow 40%, orange 60%, cyan 80%)`;
                                               
                                                 let newColorStyle=`.inner1${dpVISnew}{  			 background-image: ${colorAll};}`;
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                               
                                                 for (let i=0;i<menge;i++){
                                                    augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`;
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                                
                                                  let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                          
                                              
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                          
                                              }
                                          
                                              function alleLedsBunt(ansichtFormat) {
                                                    let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                               
                                                 let newColorStyle=`.inner1${dpVISnew}{  			 background: #0AD0E6;} .inner2${dpVISnew}{  			 background: #F2DD23;} 
                                                                    .inner3${dpVISnew}{  			 background: #63F285;} .inner4${dpVISnew}{  			 background: #E60A62;}`;
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                               
                                                 for (let i=0;i<menge;i++){
                                                  
                                                     if(i%4==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner4${dpVISnew} "></div>`}  
                                                     else if (i%3==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner3${dpVISnew} "></div>`  } 
                                                     else if (i%2==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner2${dpVISnew} "></div>`  } 
                                                     else if (i%1==0)  { augabeHilfe=augabeHilfe+`<div class="inner${dpVISnew} inner1${dpVISnew} "></div>`  }
                                                    
                                                 }
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                                 let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                             
                                          
                                              
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                          
                                              } 
                                          
                                             function einzelneLedsSteuern(ansichtFormat) {
                                                  
                                                let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".Anzahl").val;
                                                 let mengeArr= JSON.parse(getState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern").val);
                                             
                                                 let newColorStyle="";
                                            
                                                 for (let i=0;i<mengeArr.length;i++){
                                                 newColorStyle=newColorStyle+`.inner${(i+1)}${dpVISnew}{  			 background: ${mengeArr[i].color};}`
                                                 }
                                                
                                                 
                                                 let augabeHilfe=`<div id="outer${dpVISnew}">`;
                                                 let arrHelper=[];
                                               
                                                 for (let i=0;i<menge;i++){
                                                      arrHelper.push(`<div class="inner${dpVISnew} "></div>`)}
                                                  for (let i=0;i<mengeArr.length;i++){
                                                  
                                          
                                                      arrHelper[(mengeArr[i].number)-1]=   `<div class="inner${dpVISnew} inner${i+1}${dpVISnew} "></div>`}  
                                                    
                                                 for (let i=0;i<menge;i++){
                                                       augabeHilfe=augabeHilfe+arrHelper[i] }
                                                       
                                               
                                                                         
                                                 
                                                 augabeHilfe=augabeHilfe+`</div>`;
                                                 let ausgabe;
                                                 switch (ansichtFormat) { 
                                                        case 1:  ausgabe="<style>"+styleLEDsnew+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLEDnew+`</script>`; break;
                                                        case 2:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break;
                                                        case 3:  ausgabe="<style>"+styleLEDsVER+newColorStyle+`</style>`+augabeHilfe; break; 
                                                        }
                                          
                                                  
                                                 setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".WidgetAusgabe",ausgabe);
                                              }
                                          
                                          mainLED();
                                          
                                          
                                           on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS", ack: false, val: true}, function (obj) { 
                                           
                                           alleLedsAus(ansichtFormat);
                                          
                                           setState("javascript." + instance + ".Tabellen@Liv."+dpVISnew+".alleLEDsAUS",false)
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AnzahlLEDsEIN", ack: false, change: "any"}, function (obj) { 
                                           
                                           anzahlLEDsEIN(ansichtFormat);                                
                                                                                           
                                          
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDs", ack: false, change: "any"}, function (obj) { 
                                           
                                           alleLedsEIN(ansichtFormat);
                                          
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsBunt", ack: false, change: "any"}, function (obj) { 
                                           
                                           alleLedsBunt(ansichtFormat);
                                          
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".AlleLEDsRegenbogen", ack: false, change: "any"}, function (obj) { 
                                           
                                           alleLedsRegenbogen(ansichtFormat);
                                          
                                           });
                                          
                                          on({id: "javascript." + instance + ".Tabellen@Liv."+dpVISnew+".EinzelneLEDsSteuern", ack: false, change: "any"}, function (obj) { 
                                           
                                           einzelneLedsSteuern(ansichtFormat);
                                          
                                           });
                                          
                                           on({id: DatapointArr, ack: false, change: "any"}, function (obj) { 
                                           
                                           mainLED();
                                          
                                           });
                                          
                                          
                                          
                                          
                                          
                                          
                                           
                                          

                                          HomoranH Do not disturb
                                          HomoranH Do not disturb
                                          Homoran
                                          Global Moderator Administrators
                                          wrote on last edited by
                                          #40

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

                                          neues script - bitte testen

                                          DANKE!

                                          im Code ist noch ein Spoiler-Tag in der letzten Zeile - führt zu Fehler

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

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

                                          Neugier!

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

                                          nicht das vom post davor - bzw. einfach nur das rotate aus dem transform-feld entfernen

                                          ich versuch es mal

                                          kein Support per PN! - Fragen im Forum stellen -
                                          Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                          Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton oben rechts. Danke!
                                          der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                                          liv-in-skyL 1 Reply Last reply
                                          0

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

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

                                          With your input, this post could be even better 💗

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          349

                                          Online

                                          32.8k

                                          Users

                                          82.7k

                                          Topics

                                          1.3m

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

                                          • Don't have an account? Register

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