Farbe für RGB Strahler im Webfront bestimmen?

[Helmut]

Bin iM im RGB Strahler Fieber, DESHALB.

Gibt es eine Möglichkeit eine Farbauswahl per Webfront zu machen?

Also nicht per einzelnen Wert für Rot, Blau oder Grün, sondern "auf Einmal".

So ala Farbkreis und die daraus resultierenden Farbwerte in Variable zu bringen?

Gruß Helmut

[hirschbrat]

Hallo,

ich habe mir ein Funk RGB controller auf JeeNode Basis gebaut. Hierzu benutze ich eine Farbleiste mit Werten von 0 - 1024. Im WebFront habe ich einen Slider über die Farbleiste (in HTMLBox eingebettetes Bild) gesetzt.
Stellt man den Slider auf einen bestimmten Wert, wird die entsprechende Farbe (die der Position in der Farbleiste entspricht) gesetzt.
(Vielleicht ist es im angehängten Screenshot verständlicher)

Eine Umrechnung von den Werten 0-1023 in die einzelnen RGB-Werte findet man im Arduino-Quellcode dieses Blog-Eintrages: Home of the generic nerd: Arduino Mood light controller

[Helmut]

Jo, danke, interessante Lösung.

Muß mal sehen, ob ich die Umrechnung in mein Brain bekomme.

Könntest du den Slidercode und die Anbindung liefern, machst du das als Html-Popup?


Hatte auch im Kopf:

Ein Bild mit einem Farbkreis ähnlich Diesem Bild und nach dem Muster von dem Unwetterscript die Farbpixel auslesen.
Dazu reich mein Brain aber nicht......

Gruß Helmut

[hirschbrat]

Zitat von Helmut

Könntest du den Slidercode und die Anbindung liefern, machst du das als Html-Popup?

Der Slider ist eine einfache Integer-Variable mit entsprechendem Variablenprofil. Als Aktionsskript habe ich ein Skript, dass dann den Wert (0 - 1023) über die Serielle Schnittstelle an den JeeLink sendet.
Die Farbumrechnung findet dann im µC statt.

Ich habe die Umrechnung mal in ein PHP Script gebaut - ich hoffe es funktioniert so weit, musste nämlich eine map-funktion, wie es sie bei Arduino gibt erst nachstellen. (bei colorVal einen Wert zwischen 0 und 1023 eingeben und am ende gibt das Skript die RGB Werte aus - die Farben entsprechen der Farbleiste aus dem o.g. Blog)

Ursprünglich hatte ich vor eine Image map über die Farbleiste zu legen und dann mit einem POST Befehl die zugehörigen Werte aus der Farbleiste beim Klick auf eine bestimmte Farbe auszuwerten. Das alles sollte dann in eine HTMLBox - ich weiß aber nicht ob aus der HTMLBox auch POST-Befehle gesendet werden können.
Bin aber bisher nicht dazu gekommen, und die Lösung mit der Slider-Variablen ist auch ganz praktikabel - auch wenn es natürlich besser geht.

PHP-Code:

<?
$colorVal = 550;

// RED > ORANGE > YELLOW
if ($colorVal >= 0 && $colorVal <= 170) {
    $redPwr = 255;
    $bluePwr = 0;
    $greenPwr = map($colorVal, 0, 170, 0, 255);
}

// YELLOW > LIME?? > GREEN
if ($colorVal > 170 && $colorVal <= 341) {
    $greenPwr = 255;
    $bluePwr = 0;
    $redPwr = map($colorVal, 341, 170, 0, 255);
}

// GREEN > TURQOUISE
if ($colorVal > 341 && $colorVal <= 511) {
    $greenPwr = 255;
    $redPwr = 0;
    $bluePwr = map($colorVal, 341, 511, 0, 255);
}

// TURQOUISE > BLUE
if ($colorVal > 511 && $colorVal <= 682) {
    $bluePwr = 255;
    $redPwr = 0;
    $greenPwr = map($colorVal, 682, 511, 0, 255);
}

// BLUE > PURPLE
if ($colorVal > 682 && $colorVal <= 852) {
    $bluePwr = 255;
    $greenPwr = 0;
    $redPwr = map($colorVal, 682, 852, 0, 255);
}

// PURPLE > RED
if ($colorVal > 852 && $colorVal <= 1023) {
    $redPwr = 255;
    $greenPwr = 0;
    $bluePwr = map($colorVal, 1023, 852, 0, 255);
}

echo "R ".$redPwr."\n";
echo "G ".$greenPwr."\n";
echo "B ".$bluePwr."\n";


function map($Value, $min, $max, $new_min, $new_max)
{
    $range = $max - $min;
    $new_range = $new_max - $new_min;
    $scaling = $new_range / $range;
    $new_Value = round(($Value - $min)*$scaling);
    if ($range < 0)
    {
        $new_Value = round(($Value - $max)*$scaling);
        $new_Value = $new_max + $new_Value;
    }
    //if ($new_Value > $new_max) $new_Value = $new_max;
    //if ($new_Value < $new_min) $new_Value = $new_min;
    return $new_Value;
}

?>

[Helmut]

Spitze,
Script funktioniert, jetzt muß ich so einen Slider noch ins Webfront kriegen....

Vielen Dank dafür!!!

Wie hast du Den realisiert, gibt es Den als Profil, finde ich nicht?

Edit, erste Post erneut gelesen. Muß mal die HTML-Farbbildgeschichte begreifen.

Dann muß das Farbbild die gleiche Größe wie der Slider haben, oder kann man die Dinger übereinanderlegen?





Gruß Helmut

[hirschbrat]

Hallo,

bevor es Missverständnisse gibt: Die Farbe wähle ich bisher nicht direkt durch klicken auf das Farbband, sondern durch klicken auf den Slider der Integervariable (im Bild meines ersten Posts also ein klick auf die obere Leiste). Das Farbband ist nur dafür da, dass ich in etwa weiß, welchen Wert ich am Slider für eine bestimmte Farbe auswählen muss.

Das Variablenprofil hab ich angelegt mit den Werten: Min = 0; Max = 1024; Schrittweite = 1; Suffix = %;

Den Farbbalken habe ich in einer HTMLBox mit dem Inhalt:
<img src="user/colour_bar.png" width="100%" height="35" align="middle" >
eingebunden.

[Helmut]

Zitat von hirschbrat

Hallo,

bevor es Missverständnisse gibt: Die Farbe wähle ich bisher nicht direkt durch klicken auf das Farbband, sondern durch klicken auf den Slider der Integervariable (im Bild meines ersten Posts also ein klick auf die obere Leiste). Das Farbband ist nur dafür da, dass ich in etwa weiß, welchen Wert ich am Slider für eine bestimmte Farbe auswählen muss.

Das Variablenprofil hab ich angelegt mit den Werten: Min = 0; Max = 1024; Schrittweite = 1; Suffix = %;

Habe ich auch so verstanden, wäre zwar besser mit dem Zusammenlegen, nur wie macht man so ein Farbbild da rein?

Gruß Helmut, der jetzt eine Kreislaufschwäche bekommt...gute Nacht und nochmal vielen Dank!

[Helmut]

So, die Geschichte mit der HTML-Box habe ich auch hinbekommen.

Nur rechts und links trifft es den Balken nicht so recht.

Wie könnte man das besser hinbekommen?

Kenne mich mit HTML nicht aus:
kann man das Bild mit einem HTML-Parameter auch um 10% nach rechts versetzt anfangen lassen?

Gruß Helmut

[hirschbrat]

Hallo,

um rechts und links bestimmte Abstände hinzubekommen, könnte man transparente Pixel einfügen oder die Farbleiste in eine Tabelle einfügen, wobei die rechte und linke Spalte eine definierte Pixelgröße haben.

So sollte es passen:

<TABLE width="100%"><TR><TD width="65px"></TD><TD><img src="user/colour_bar.png" width="100%" height="35" align="middle" ></TD><TD width="65px"></TD></TR></TABLE>

[Helmut]

Jo,
das und das PNG mit 95% hat geholfen, SUPER. Vielen DANK!!

Gruß Helmut