Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Farmer-cb]

Hallo

habe folgendes Problem

berechne den Farbcode per javascript.0

z.B. (vereinfachte Darstellung)

if (db_a==1 && db_b>5 || db_c==15) steState("javascript.0.farbcode","#00ff00")

if (db_a==22 && db_b>2 || db_c==5) steState("javascript.0.farbcode","#ffff00")

if (db_a==33 && db_b>15 || db_c==1) steState("javascript.0.farbcode","#00ffff)

das ganze wird per schedule im sekundentakt ausgeführt

wenn ich diesen Farbcode nun per binding {javascript.0.farbcode} in irgend ein Objekt (Button-Hintergrund,SVG-Fill,HTML-Hintergrund,Pump-Tank-Füllstand,etc) dann fängt dieser Hintergrund an zu flackern und ist somit nicht zu gebrauchen.

mach ich da etwas verkehrt, muss ich das evtl anders angehen???

ich hoffe ich hab mein Problem einigermassen verständlich rüber gebracht.

muss mal schaun, wie ich ein kleines Video davon machen kann.

[Marc_St]

Hallo Farmer,

ich glaube, ich verstehe Dein Problem, oder jedenfalls Dein Vorhaben.

Ich hatte heute hier (viewtopic.php?f=35&t=13917&p=189277#p189277) eine Visualisierung gezeigt, in der ich ebenfalls dynamisch die Farbkodierung anpasse. Bei mir geht's ohne Flimmern, ich passe die Farbe aber auch stufenlos und und ohne Sekundentakt, sondern einfach bei Änderung. Das mache ich so:

function color(value) {
    	var highColor = "#ff6060";
    	var lowColor = "#6060ff";
    	var highTemp = 90;
    	var lowTemp = 20;
    	if(value > highTemp) {
    		return highColor;
    	}
    	else if(value < lowTemp) {
    		return lowColor;
    	}
    	else {
    		var lr = parseInt("0x"+lowColor.substring(1,3));
    		var lg = parseInt("0x"+lowColor.substring(3,5));
    		var lb = parseInt("0x"+lowColor.substring(5,7));
    		var hr = parseInt("0x"+highColor.substring(1,3));
    		var hg = parseInt("0x"+highColor.substring(3,5));
    		var hb = parseInt("0x"+highColor.substring(5,7));
    		var cr = parseInt(lr + (hr-lr)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
    		var cg = parseInt(lg + (hg-lg)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
    		var cb = parseInt(lb + (hb-lb)*(value-lowTemp)/(highTemp-lowTemp)).toString(16);
    		cr = cr.length == 1 ? "0"+cr: cr;
    		cg = cg.length == 1 ? "0"+cg: cg;
    		cb = cb.length == 1 ? "0"+cb: cb;
    		return "#"+cr+cg+cb;
    	}

Diese Funktion rufe ich dann auf und ändere in der Darstellung einfach die Farbe eines Objektes:

document.getElementById("kollektor_fuellung").setAttribute("fill", color((document.getElementById('kollektor_temp').innerHTML)));

Vielleicht ist dieser Ansatz ohnehin der flexiblere? Jedenfalls habe ich keine Flimmerprobleme …

Marc