Universeller HSL Slider mit Farbkalibration

Hallo zusammen

Nach mehreren Versuchen mit diversen Colorpickern mußte ich feststellen das die Dinger zwar hübsch aussehen, aber mittels Touchscreen einfach nicht sinnvoll zu bedienen sind.

Darum hab ich mich entschlossen zu den guten alten Slidern zurückzukehren.
Aber diesmal welche für den HSV Farbmodus.
Warum ?
Mit HSV ( Farbeton - Sättigung -Helligkeit) läßt sich eine gewünschte Lichtstimmung sehr viel besser einstellen als wie sonst im Forum üblich per RGB. Vorteile:

  • der Farbton kann ohne rumzumischen direkt angefahren werden
  • mit dem Sättigungsregler wählt man zwischen Weiß über Pastell bis Disco-bunt
  • dimmen geht ganz bequem per dediziertem Regler

Ich steuere damit China RGB Stripes welche an ein DMX Controllern hängen.-
Die Farben haben recht unterschiedliche Intensität, ein R=255/G=255/B=255 ergibt eher ein Hellblau als ein Weiß. Das Verhältnis bleibt beim dimmen auch nicht konstant und verschiebt sich erst zu grün, und dann zu rot.

Um das zu verbessern hab ich einen kleinen Weißabgleich eingebaut.
Damit bleibt der eingestellte Farbton über den kompletten Dimmbereich viel besser konstant.
Erst bei ganz geringer Helligkeit schlägt die niedrigere Einsatzspannungen der roten LED zu. Ansonsten finde ich das sehr brauchbar.

Im Script sind mal meine Werte drinnen, ihr solltet sie an eure Leuchtmittel anpassen.
Anleitung für Abgleich ist im Script.

Die Slider werden komplett per HTML/CSS erzeugt. Dadurch sind sie voll skalierbar und sollten bei allen Bildschirmgrößen oder Auflösungen funktionieren.
Sie funktionieren auch besser als die WF eigenen Slider. Sie „sliden“ nämlich wirklich, (Wert ändert sich während ziehen) und nicht nur beim loslassen so wie bei den IPS Originalen.

Wer Lust und Laune hat kann auch das Aussehen ganz simpel durch editieren der CSS Tags in der sliders.php tunen.
Getestet hab ich mit Chrome bzw. diversen Webkit basierenden Android Browsern.
Für FF muß vermutlich noch an der CSS gefeilt werden.

Installation kommt im nächsten Post.

Die Installation ist ganz einfach, daher hab mir daher den Aufwand eines eigenen Installationsscipt gespart:

1.) Dateien aus der beiligenden HSL.zip nach …/webfront/user/HSL kopieren

2.) an beliebiger Stelle ein Dummy Modul erstellen und darin die Variablen lt. Screenshot erstellen.
Auf exakte Schreibweise achten !!!
„SliderFrame“ ist ein String vom Typ ~HTMLBox, alle anderen ganz normale Integer

3.) in die Variable „SliderFrame“ diesen String reinschreiben

<iframe src="user/HSL/sliders.php?id=xxxxx&hue=29&sat=54&light=0" border="0" frameborder="0" style= "width: 100%; height: 130px;"/></iframe>

Anstatt xxxxx in obigem String müßt ihr die ID des Dummymodules einsetzen, bei mir ist das 55037

4.) Dann noch das Script „setRGBHardware“ anlegen
In der ersten Zeile die ID der RGB Instanz die ihr steuern wollt eintragen

5.) ggfls. die Konstanten für den Weißableich anpassen, der Werteberech geht von 0 bis 1. Was soviel wie 0-100% entspricht.

6.) falls ihr kein DMX sondere eine andere RGB Hardware verwendet (zb. RGBW868) habt so sind ab Zeile 48/49/50 die passenden Befehle einzutragen. Denke das ist eh selbsterklärend.

// ID of RGB instance you want to control
$RGBInstanceID = 34265 /*[Licht\RGB-Chouch]*/;

// ========= White Balance  ====================== 
// Set Saturation control to Minimum
// Set Brightness control to 100% 
// modify this constants until you get proper white
$r100=1;    // red
$g100=0.7;  // green
$b100=0.6;  // blue

// Do the same again, but set Brightness control to 10%
// modify this constants until you get proper white
$r10=1;     // red
$g10=0.92;  // green
$b10=0.92;  // blue


// nothing to be changed below this line
//===================================================================
$InstId = IPS_GetParent($_IPS['SELF']);
$HSV[0] = GetValue(IPS_GetObjectIDByName("HueSlider",$InstId));
$HSV[1] = GetValue(IPS_GetObjectIDByName("SaturationSlider",$InstId)) / 100;
$HSV[2] = GetValue(IPS_GetObjectIDByName("BrightnessSlider",$InstId)) / 100;

// convert to HSV to RGB
$RGB= hsv2rgb($HSV);

//  set brightness to 0 if it is below 10% ( better handling at some browser)
// can be deleted if you dont like it
if ($HSV[2] <0.10){
	$HSV[2] = 0;
	}
// set saturation to 1% if below 1% (avoid all dark at 0% brightness)
// can be deleted if you dont like it
if ($HSV[1] < 0.01){
	$HSV[1] = 0.01;
	}

// Scale Channels to get propper White balance
$red = $RGB[0]*(((($r10-$r100)/0.9)*(1-$HSV[2]))+$r100);
$green = $RGB[1]*(((($g10-$g100)/0.9)*(1-$HSV[2]))+$g100);
$blue = $RGB[2]*(((($b10-$b100)/0.9)*(1-$HSV[2]))+$b100);


// Now set the hardware
DMX_SetValue($RGBInstanceID,1,$red);         // set value for red channel
DMX_SetValue($RGBInstanceID,2,$green);     // set value for green channel
DMX_SetValue($RGBInstanceID,3,$blue);       // set value for blue channel


// Module for Colorspace conversion
// Credits to http://www.zend.com//code/codex.php?ozid=1403&single=1
function hsv2rgb($hsv)
    {
        if (!$hsv[1]) {
            if ($hsv[0] === null) {
                $rgb[0] = $rgb[1] = $rgb[2] = $hsv[2];
            } else {
                return false;
            }
        } else {
            if ($hsv[0] == 360) {
                $hsv[0] = 0;
            }
            $hsv[0] /= 60;
            $i = floor($hsv[0]);
            $f = $hsv[0] - $i;
            $p = $hsv[2] * (1 - $hsv[1]);
            $q = $hsv[2] * (1 - ($hsv[1] * $f));
            $t = $hsv[2] * (1 - ($hsv[1] * (1 - $f)));
            switch ($i) {
                case 0:
                    $rgb[0] = $hsv[2];
                    $rgb[1] = $t;
                    $rgb[2] = $p;
                    break;
                case 1:
                    $rgb[0] = $q;
                    $rgb[1] = $hsv[2];
                    $rgb[2] = $p;
                    break;
                case 2:
                    $rgb[0] = $p;
                    $rgb[1] = $hsv[2];
                    $rgb[2] = $t;
                    break;
                case 3:
                    $rgb[0] = $p;
                    $rgb[1] = $q;
                    $rgb[2] = $hsv[2];
                    break;
                case 4:
                    $rgb[0] = $t;
                    $rgb[1] = $p;
                    $rgb[2] = $hsv[2];
                    break;
                case 5:
                    $rgb[0] = $hsv[2];
                    $rgb[1] = $p;
                    $rgb[2] = $q;
                    break;
            }
        }
        for ($c=0; $c<3; $c++) {
            $rgb[$c] = round($rgb[$c] * 255);
        }
        return $rgb;
    }

HSL.zip (3.69 KB)

Eingebaut in eine WF Seite und garniert mit ein paar Buttons kann das dann zb. so aussehen:

Hallo bbernhard,

installiert aber die Color Slider werden nicht dargestellt.
Ansonsten keine Fehlermeldung.
Haste eine Ahnung was das sein kann?

Danke

Nachtrag 15:36

Problem sitz vor dem PC
es klappert, Script im falschen verzeichnis
Danke

Ich habe mir heute auch mal den HSL Slider angeschaut. Das mit der Sättigung ist schön wenn man viel mit Weißlicht aus RGB arbeitet. Bisher arbeite ich mehr mit gedimmten Farblicht. Ich glaube das muss erst mal der Familienrat entscheiden.
Zwei Kleinigkeiten sind mir aufgefallen.
Wenn man den Sättigungs Slider ganz nach links schiebt, also weiß, ist er 0 und alles ist dunkel.
Wenn man die Farben anderweitig verstellt, z.B. durch ein Programm, stimmen die Slider nicht mehr mit den Werten überein. Auch ein anklicken der Slider ändert nichts. Erst ein verschieben bringt die richtigen Werte.
Sonst aber gute Arbeit. Danke.

Servus

Das mit dem Sättigungsslider sehe ich so hier nicht. Wennst dir das Script ansiehst, dann findest eine Zeile an der der Minimumwert überschrieben wird. Damit kannst das anpassen.

Das Updaten der Sliders wenn die Werte von extern gesetzt werden funktioniert.
Die Sliders.php kann entsprechende Übergabeparameter richtig verarbeiten.
Hatte nur bei mir die ganzen ID’s der Einfachheit halber hardgecodet, und noch keine Lust das auf generisch erzeugte Id umzubasteln. Darum hatte ichs auch nicht gepostet.

Als Bsp. hier ein kleines Script:


$HSVModuleId = 34743;

$hue = 50;
$saturation = 80;
$light = 100;

SetValue(47300 /*[Programe\Lichtsteuerung\RGB\HSV Slider\SliderIFrame]*/, '<iframe src="user/picker/picker.php?id='.$HSVModuleId.'&hue='.$huse.'&sat='.$saturation.'&light='.$light.'" border="0" frameborder="0" style= "width: 100%; height: 130px;"/></iframe>');

Die Id mußt halt auf deine umbauen und die SetValue … Zeile in dein externes Script übernehmen.

gruß
bb

Das mit dem SaturationsSlider verstehe ich nicht. Wenn er 0 ist müsste RGB 100% sein wenn ich jegliche Korrekturen entferne. Die handling Korrekturen bringen da auch nichts.
Anbei ein paar Bilder damit du mich richtig verstehst.
Das mit dem Updaten der Slider verstehe ich auch nicht. Was ist $HSVModuleId, SliderIFrame, picker.php? Und die Übergabeparameter sind doch RGB.

Servus

OK, im SetRGBhardware Script muß es irgendwo diese Zeilen geben:

// set saturation to 1% if below 1% (avoid all dark at 0% brightness)
// can be deleted if you dont like it
if ($HSV[1] < 0.01){
    $HSV[1] = 0.01;
    }

Die sollten eigentlich bei 0% Sliderstellung den Wert auf 1% überschreiben. Spiel mal damit rum.

Zum updaten der Slider: Du hast nicht versucht zu verstehen wie das funktioniert, oder ?
Die beiden Variablen hast ja bei der Erstinstallation schon mal in der Hand gehabt:
Hier ein passender Screenshot zum Beispielscript. Da welche ID was ist.

Wie kommst du darauf das Übergabeparameter RGB sind? Wir sprechen von einem HSL Slider.

Oder möchtest du: Die RGB Variablen deiner Hardwareinstanz von einem exteren Script beschreiben, und die HSL Slider sollen sich entsprechend ändern ? Ginge natürlich auch man müßte halt nochmals eine RGB -> HSL Umwandlung dazuwischen hängen. Aber warum willst das machen ?
Beschreibe doch einfach die HSV Variablen.

gruß
bb

Da auch ein

// set saturation to 0 if below 1% ( better handling at soem browser)
// can be deleted if you dont like it
if ($HSV[1] < 0.01){
    $HSV[1] = 0.01;
    }

keine Änderung bringt muss ich noch wo anders einen Fehler haben.

Dein obiges Beispiel hat mich nur durcheinander gebracht da die Schreibweise und IDs anders war als im ersten Beitrag. Der letzte Screenshot sieht schon besser aus.
Und Ja ich habe viele Scripte wie Szenen, Thermometer, und Licht Programme die die RGB Werte der Hardwareinstanz beschreiben.

Es geht ja für mich nicht nur um diesen DMX Bereich sondern zukünftig auch für meine anderen Systeme wie Chromoflex und RGBW-868 die alle bisjetzt RGB(W) Werte beschreiben.

EDIT: Hab den Fehler.
Dein Scribt oben stimmt nicht. Das

// convert to HSV to RGB
$RGB= hsv2rgb($HSV);

muss nach den Zeilen

if ($HSV[1] < 0.01){
$HSV[1] = 0.2;
}

kommen.

Ja klar, sorry mein Fehler.
Wie gesagt, ich hab das gepostete Script bei mir ganz anders im Einsatz. Hab nicht gemerkt das die Forumsvariante falsch ist.

gruß
bb

moin,

ich habe alles soweit installiert und eingerichtet aber am Strahler tut sich nix.

bewege ich die Slider sehe ich die neuen Werte im Webfront, auch das RGB Script wird ausgefuehrt aber der Strahler macht nichts.

wenn ich ein Kanal vom Strahler per Hand (Script) aendere dann geht das. also funktioniert die Uebergabe vom RGB-Script zum DMX-Ausgang nicht. Die ID hab ich aber angepasst.

mein Strahler reagiert ab ch3 (RGB also bis ch5), solch einen Wert meine ich im RGB Script gefunden zu haben, bei DMX_SetValue… dort habe ich aus 1-3, 3-5 gemacht (obwohl im Script steht ab einer bestimmten Zeile nicht mehr aendern), aber bei beiden Einstellungen tut sich nichts.

hat da jemand eine Idee?

Edit:
ich habe das RGB Script mal kopiert und in sehr vereinfachter Form in ein neues Script gepackt, wenn ich das ausfuehre, kommt am Strahler auch was an, also im Moment kann ich das Problem nicht loesen.

// ID of RGB instance you want to control
$RGBInstanceID = 11033 /[DMX\DMX Ausgang]/;

// Scale Channels to get propper White balance
$red = 0;
$green = 255;
$blue = 0;

// Now set the hardware
DMX_SetValue ($RGBInstanceID,3,$red); // set value for red channel
DMX_SetValue ($RGBInstanceID,4,$green); // set value for green channel
DMX_SetValue ($RGBInstanceID,5,$blue); // set value for blue channel

In der DMX Instance wird die DMX Startadresse und die Anzahl der Kanäle (i.d.R.3) eingetragen.
Mit dem DMX_SetValue Befehl wird die DMX_Instance ID und die anzusprechene Kanalnummer eingetragen.
Bei drei Kanälen also immer

DMX_SetValue($RGBInstanceID,1,$red);       // set value for red channel
DMX_SetValue($RGBInstanceID,2,$green);     // set value for green channel
DMX_SetValue($RGBInstanceID,3,$blue);      // set value for blue channel

Und deine Startadresse in der DMX Instance müsste dann 1 oder 4 oder 7 usw sein.
Also solltest du deine DMX Instance mal überprüfen.

Hallo Heiner,

vielen Dank das klang auch erst mal logisch, nur leider war es das nicht.
Ich habe auch den DMX-Ausgang geloescht und neu angelegt, ohne Erfolg.
Start ist jetzt 3-5 bzw. hatte ich auch schon 3-8, es wird trotzdem ab ch1 angelegt.

Per Hand kann ich die IntegerVariablen im Webfront veraendern und dann tut sich auch am Strahler was.
Aber irgendwie uebergibt das Script nichts an den DMX-Ausgang.

Die Frage ist auch immer noch, warum geht bei mir erst ab ch3 was, wenn es doch eigentlich ab ch1 gehen sollte…?
(Das ist auch im DMX Configurator so)

Edit: nachdem ich in der DMX-Instanz Startadresse 3 habe, kann ich zumindest nun mit ch1 Rot steuern (per Hand)

Start ist jetzt 3-5 bzw. hatte ich auch schon 3-8, es wird trotzdem ab ch1 angelegt.

Ich verstehe kein nix.
Die Adresse und die Anzahl der Kanäle im Par muß natürlich auch passen. Dann kannst du in der DMX Instance alle Kanäle testweise einschalten und die Par Leuchte muss weiss leuchten.
Sollte es im DMX4ALL-Configurator richtig funktionieren weiss ich auch nicht weiter.
PS: Da du hier Mehrgleisig arbeitest hier noch eine Erweiterung. Im Par kann man i.d.R. auch den Modus einstellen. Allso ob 3Kanäle oder mehr.

ok, hab ich ein wenig wild formuliert.
Die Steuerung von IPS ueber den DMX-Ausgang funktioniert.
Ich kann alle Farben mischen. (siehe Anhang, Webfront)
Im Bild sieht man ch1 auf 100% somit leuchtet mein Strahler Rot, was auch funktioniert. Die Werte fuer ch1- ch3 kann ich ueber das Webfront aendern, synchron dazu aendert sich auch die Farbe am Strahler (PAR)
Jedoch sieht man unten die HSL-Slider, wenn ich da dran rumschiebe passiert oben nichts.

Das Script vom HSL-Slider uebergibt es intern nicht an den DMX-Ausgang.
Im Script steht:
// ID of RGB instance you want to control
$RGBInstanceID = 47631 /[DMX\DMX Ausgang]/;

mehr muss da doch erstmal nicht rein oder? (also, was ich anpassen muss)

Moin,

cooler Slider :0) würde den auch gerne nutzen … problem nur … ich habe die philips hue und keinen plan wie ich das ganze umstricken muss. Hat einer das ding schon am laufen mit den Hue’s?

Danke

Andreas

Sag mal wie kann ich in deinem Punkt 3. in eine Variable einen String reinschreiben. Steh leider auf dem schlauch.

Dafür das ganze Ding zitieren :eek:

Variable doppelklicken, Wert editieren, alternativ über Skript mit „SetValueString“

Vielen Dank für die schnelle Antwort

Mal ne ganz komische Frage,

geht das auch als vertikaler Fader ?

LG
Sascha

Servus

ja geht, aber nur mit Chrome. Die anderen Browser können das nicht.

Diese Zeile mußt in die sliders.php inden Bereich wo die CSS der einzelnen Slider definiert wird reinkopieren.

-webkit-appearance: slider-vertical;

ggfls. sind auch noch andere CSS Teile anzupassen. Bin jetzt Offline, hab niht alles auswendig im Kopf.

Das saturation.png Bild ( das ist das Hintergrundbild für den Saturation slider mußt wahrscheinlich auch drehen.

gruß
bb