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

liv-in-sky

hier das script und widget - wenn du die javascript instance 0 hast, funktioniert das widget , ansonsten im widget den datenpunkt anpassen

im moment mußt du nichts im setting des scriptes ändern !
läuft über datenpunkte
wie erwähnt, nach browser refresh einfach einen der folgenden datenpunkte triggern, dann kommt der kreis

Image 1.png

bei AnzahlLEDSEIN : das format : <anzahl,farbe>

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"{javascript.0.Tabellen@Liv.LED1RingVIS.WidgetAusgabe}"},"style":{"left":"240px","top":"630px","width":"313px","height":"279px","transform":"rotate(-90deg)"},"widgetSet":"basic"}]



//@liv-in-sky 2.8.2021-16:20

let  dpVIS="LED1RingVIS"                            // datenpunkte unter javascript.x.Tabellen@Liv.LED1RingVIS
let LEDname="LED1";

let grundfarbe="silver";
let groessePunkteHoehe=15;
let groessePunkteWeite=15;
let groesseGesamtHoehe=170;
let groesseGesamtWeite=170;

if (existsObject("javascript." + instance + ".Tabellen@Liv."+dpVIS+".DurchmesserPunkte")) {
  let PunkteArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".DurchmesserPunkte").val.split(',')
   groessePunkteHoehe=Number(PunkteArr[0])
   log(groessePunkteHoehe.toString())
   groessePunkteWeite=Number(PunkteArr[1])
}
  if (existsObject("javascript." + instance + ".Tabellen@Liv."+dpVIS+".DurchmesserGesamt")) {
   let GeamtArr=getState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".DurchmesserGesamt").val.split(',')
   

groesseGesamtHoehe=Number(GeamtArr[0])
groesseGesamtWeite=Number(GeamtArr[1])


  }




let styleLEDs=`#outer${dpVIS}{
		position: relative;
   	height: ${groesseGesamtHoehe}px;
   	width: ${groesseGesamtWeite}px; //250px;
   	/*border: 1px solid red;*/
   	} 			
   	.inner${dpVIS}{
   	position: absolute;
   	/*	border: 1px solid black; */
   	height: ${groessePunkteHoehe}px;
   	width: ${groessePunkteWeite}px;
   	background: ${grundfarbe};
   	border-radius: 50%;
   	display: flex; /* or inline-flex */
   	align-items: center;
   	justify-content: center;
   	}`
let scriptLED=`/*setTimeout(function () { */
   	var outer = document.getElementById('outer${dpVIS}');
   	var outerWidth = document.getElementById('outer${dpVIS}').offsetWidth;
   	var outerHeight = document.getElementById('outer${dpVIS}').offsetHeight;
   	for(var i = 0; i < outer.children.length; i++){
   	var r = outerWidth / 2 - outer${dpVIS}.children[i].offsetWidth / 2;
   	var phi = i / outer${dpVIS}.children.length;
   	var x = r * Math.cos(phi * 2 * Math.PI) + r;
   	var y = r * Math.sin(phi * 2 * Math.PI) + r;
   	outer${dpVIS}.children[i].style.left = x+'px';
   	outer${dpVIS}.children[i].style.top = y+'px';
   	console.log(outer${dpVIS}.children[i].style.left);
   	} 			/*}, 10000);*/`

//setStateDelayed("javascript." + instance + ".Tabellen@Liv."+dpVIS+".JSONVis",JSON.stringify(makeJsonWidget),1000 )}

  



   async function needDP(){
   
   if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Anzahl"))) {
       await createStateAsync("Tabellen@Liv."+dpVIS+".Anzahl", 7,{type: "number", name: "Anzahl LEDs", role: "value", read: true, write: true, } ); } 
   if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".DurchmesserPunkte"))) {
       await createStateAsync("Tabellen@Liv."+dpVIS+".DurchmesserPunkte", "170,170",{type: "string", name: "Durchmesser Punkte", role: "value", read: true, write: true, } ); } 
   if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".DurchmesserGesamt"))) {
       await createStateAsync("Tabellen@Liv."+dpVIS+".DurchmesserGesamt", "15,15",{type: "string", name: "Durchmesser Gesamt", role: "value", read: true, write: true, } ); }         
    
    if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".AlleLEDs"))) {
       await createStateAsync("Tabellen@Liv."+dpVIS+".AlleLEDs", "gold",{type: "string", name: "Alle LEDs", role: "value", read: true, write: true, } ); }
   
   if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".AlleLEDsAUS"))) {
       await createStateAsync("Tabellen@Liv."+dpVIS+".AlleLEDsAUS", false,{type: "boolean", name: "Alle LEDs AUS", role: "value", read: true, write: true, } ); }

   if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".AnzahlLEDsEIN"))) {
       await createStateAsync("Tabellen@Liv."+dpVIS+".AnzahlLEDsEIN", "4,red",{type: "string", name: "Anzahl LEDs EIN", role: "value", read: true, write: true, } ); } 

   if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".AlleLEDsBunt"))) {
       await createStateAsync("Tabellen@Liv."+dpVIS+".AlleLEDsBunt", "bunt",{type: "string", name: "Alle LEDs Bunt", role: "value", read: true, write: true, } ); }       

   if (!(await existsStateAsync("javascript." + instance + ".Tabellen@Liv."+dpVIS+".WidgetAusgabe"))) {
       await createStateAsync("Tabellen@Liv."+dpVIS+".WidgetAusgabe", "",{type: "string", name: "Widget VIS Datenpunkt", role: "value", read: true, write: true, } ); }    

     }

  

    

    function AlleLedsAus() {
       
       let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Anzahl").val;
       let farbe=grundfarbe;
       let augabeHilfe=`<div id="outer${dpVIS}">`;
       for (let i=0;i<menge;i++){
           augabeHilfe=augabeHilfe+`<div class="inner${dpVIS}"></div>`
       }
       augabeHilfe=augabeHilfe+`</div>`
      

       let ausgabe="<style>"+styleLEDs+`</style>`+augabeHilfe+"<script>"+scriptLED+`</script>`

    
       setState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".WidgetAusgabe",ausgabe)


    }

    function alleLedsEIN() {
         let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Anzahl").val;
       let colorAll= getState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".AlleLEDs").val;
       let farbe=grundfarbe;
       let newColorStyle=`.inner1${dpVIS}{  			 background: ${colorAll};}`
       let augabeHilfe=`<div id="outer${dpVIS}">`;
     
       for (let i=0;i<menge;i++){
          augabeHilfe=augabeHilfe+`<div class="inner${dpVIS} inner1${dpVIS} "></div>`
       }
       augabeHilfe=augabeHilfe+`</div>`
      

       let ausgabe="<style>"+styleLEDs+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLED+`</script>`

    
       setState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".WidgetAusgabe",ausgabe)
    }

    function anzahlLEDsEIN() {
        
       let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Anzahl").val;
       let mengeArr= getState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".AnzahlLEDsEIN").val.split(',');
       let farbe=grundfarbe;
       let newColorStyle=`.inner1${dpVIS}{  			 background: ${mengeArr[1]};}`
       let augabeHilfe=`<div id="outer${dpVIS}">`;
       log(mengeArr[0])
       for (let i=0;i<menge;i++){
           if(i<Number(mengeArr[0])) {augabeHilfe=augabeHilfe+`<div class="inner${dpVIS} inner1${dpVIS} "></div>`} 
                                 else {  augabeHilfe=augabeHilfe+`<div class="inner${dpVIS}"></div>`}
       }
       augabeHilfe=augabeHilfe+`</div>`
      

       let ausgabe="<style>"+styleLEDs+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLED+`</script>`

   
       setState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".WidgetAusgabe",ausgabe)
    }

    function alleLedsBunt() {
          let menge= getState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".Anzahl").val;
       let colorAll= `linear-gradient(red 20%, yellow 40%, orange 60%, cyan 80%)`;
       let farbe=grundfarbe;
       let newColorStyle=`.inner1${dpVIS}{  			 background-image: ${colorAll};}`
       let augabeHilfe=`<div id="outer${dpVIS}">`;
     
       for (let i=0;i<menge;i++){
          augabeHilfe=augabeHilfe+`<div class="inner${dpVIS} inner1${dpVIS} "></div>`
       }
       augabeHilfe=augabeHilfe+`</div>`
      

       let ausgabe="<style>"+styleLEDs+newColorStyle+`</style>`+augabeHilfe+"<script>"+scriptLED+`</script>`

    
       setState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".WidgetAusgabe",ausgabe)

    }






async function mainLED(){
    
   await needDP();

    
    log("ee")
    alleLedsBunt();
}

mainLED()

 on({id: "javascript." + instance + ".Tabellen@Liv."+dpVIS+".AlleLEDsAUS", ack: false, val: true}, function (obj) { 
 
 AlleLedsAus();
 setState("javascript." + instance + ".Tabellen@Liv."+dpVIS+".AlleLEDsAUS",false)
 });

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

 });

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

 });

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

 });

liv-in-sky

@homoran

als beispiel der ansteuerung

Image 2.png

Homoran

@liv-in-sky ich habe gerade im Skript versucht die Werte an die gewünschte Größe anzupassen.
Das ist irgendwie in die Hose gegangen

Am Skript muss/darf ich erst einmal gar nichts ändern?

liv-in-sky

@homoran

wenn du die größe anpassen willst - musst du das script neustarten, nachdem du die dp geändert hast

das script wird nur auf die farben getriggert - die einstellungen/größen bleiben ja eigentlich gleich

Homoran

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

musst du das script neustarten, nachdem du die dp geändert hast

nee, ich hatte direkt im Skript die LED 15->5 und das Widget 170->88 gesetzt

liv-in-sky

@homoran

nee - im script ist eigentlich nichts zu ändern - außer man will das als zweites widget benutzen, dann muss dpVIS geändert werden

nicht überall -aber meist gewinnen die datenpunkte das setting, nicht das setting im script

Homoran

@liv-in-sky OK - also noch mal neu, denn ich habe keine Datenpunkte.
Woher das Widget es dann nimmt weiß ich nicht

Oder ist der Inhalt der DPs so groß, dass das Verzeichnis erst in einer Stunde aufklappt?

EDIT:
Reload hilft

liv-in-sky

@homoran da müssen datenpunkte sein

unter javascript.x.Tabellen@Liv.LED1RingVIS

EDIT: ok

Homoran

@liv-in-sky jo, sind da, aber LED und Gesamt größe vertauscht im Vergleich zum Skript

liv-in-sky

@homoran datenpunkte zählen

liv-in-sky

@homoran die bunten leds habe ich anders gelöst, als in deiner beschreibung im anderen thread- ich wollte nicht "rumrechnen", um zu bestimmen, wieviele leds ich in welcher farbe bei bunt machen muss

Homoran

@liv-in-sky 8

liv-in-sky

@homoran 9

Homoran

@liv-in-sky

bei 8 DPs jetzt nach der Beschriftung der states (nicht im Skript)

liv-in-sky

@homoran ach du meinst 8 verschiedene farben - ich wollte es allgemein halten, weil bei dir die 32 die anzahl der leds ist (das ist einfach) - die brechnung bei einer beliebigen anzahl leds ist mir momentan zu kompliziert

bin verwirrt - ja es sind 8 dp

also geht es nicht - sehe nix auf deinem bild ? poste mal den inhalt von : javascript.0.Tabellen@Liv.LED1RingVIS.WidgetAusgabe

Homoran

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

sehe nix auf deinem bild ?

Brille??

passt weitestgehend. - SUPER!

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

oste mal den inhalt von : javascript.0.Tabellen@Liv.LED1RingVIS.WidgetAusgabe

<style>#outerLED1RingVIS{		position: relative;   	height: 90px;   	width: 90px; //250px;   	/*border: 1px solid red;*/   	} 			   	.innerLED1RingVIS{   	position: absolute;   	/*	border: 1px solid black; */   	height: 7.7px;   	width: NaNpx;   	background: silver;   	border-radius: 50%;   	display: flex; /* or inline-flex */   	align-items: center;   	justify-content: center;   	}.inner1LED1RingVIS{  			 background-image: linear-gradient(red 20%, yellow 40%, orange 60%, cyan 80%);}</style><div id="outerLED1RingVIS"><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div><div class="innerLED1RingVIS inner1LED1RingVIS "></div></div><script>/*setTimeout(function () { */   	var outer = document.getElementById('outerLED1RingVIS');   	var outerWidth = document.getElementById('outerLED1RingVIS').offsetWidth;   	var outerHeight = document.getElementById('outerLED1RingVIS').offsetHeight;   	for(var i = 0; i < outer.children.length; i++){   	var r = outerWidth / 2 - outerLED1RingVIS.children[i].offsetWidth / 2;   	var phi = i / outerLED1RingVIS.children.length;   	var x = r * Math.cos(phi * 2 * Math.PI) + r;   	var y = r * Math.sin(phi * 2 * Math.PI) + r;   	outerLED1RingVIS.children[i].style.left = x+'px';   	outerLED1RingVIS.children[i].style.top = y+'px';   	console.log(outerLED1RingVIS.children[i].style.left);   	} 			/*}, 10000);*/</script>

liv-in-sky

@homoran gut versteckt

Homoran

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

liv-in-sky

@homoran deutsch geht nicht

eigentlich alles z.b.

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

mit: 6,#14f54b

Image 3.png

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?

NEWS

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

Support us

404
Online

31.9k
Users

80.2k
Topics

1.3m
Posts

NEWS

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

Support us

404Online

31.9kUsers

80.2kTopics

1.3mPosts

404
Online

31.9k
Users

80.2k
Topics

1.3m
Posts