Farbcode aus einem jQuery Color Picker übergeben und auslesen

Dragosius

Erfahrenes Mitglied
Hallo zusammen,

ich habe folgenden jQuery Color-Picker gefunden und der gefällt mir wirklich sehr gut:
https://codepen.io/interactive/pen/iaEbK

Ich habe da nur 2 Fragen dazu, eventuell kann mir da jemand weiterhelfen?
- Wie kann ich eine Farbe beim erstmaligen Aufruf übergeben, die standardmäßig ausgewählt ist? Ich sehe leider nur Kooridinaten, die bringen mir aber leider nicht so viel.
- Wie kann ich den ausgewählten Farbcode in einem (PHP-)Variable speichern? (Damit ich den Farbcode dann mit PHP weiterverarbeiten kann?


Vielen Dank
 

Sempervivum

Erfahrenes Mitglied
Ich habe mich mal der ersten Frage angenommen. Es wird dort nicht nur mit Koordinaten sondern auch mit Farben gearbeitet und zwar vorzugsweise mit hsl. Weil rgb-Werte anschaulicher sind, habe ich den Code so erweitert, dass man rgb-Werte als Parameter übergeben kann. Dabei war es erforderlich, die rgb-Werte nach hsv zu konvertieren. Die Funktion, die das tut, habe ich von Stackoverflow übernommen.
https://codepen.io/Sempervivum/pen/QWqwVNW
Ganz am Anfang das rgb-Objekt als Parameter hinzu gefügt:
Code:
jQuery.fn.pickify = function (rgb) {
und ganz am Ende, basierend auf den rgb-Werten, die Elemente des Pickers eingestellt:
Code:
                    if (rgb) {
                        // rgb-Werte nach hsv konvertieren:
                        const hsv = rgb2hsv(rgb.r, rgb.g, rgb.b)
                        // Farben der Darstellung einstellen;
                        changeColour(hsv, true, false)
                        // Slider für den Farbton einstellen:
                        $rainbow.slider("value", hsv.h);
                        // Position des Anzeigers für Sättigung
                        // und Helligkeit einstellen:
                        $choice.css({ 'left': hsv.s * 1.8, 'top': (100 - hsv.v) * 1.8 })
                        // Hintergrundfarbe einstellen:
                        changeHue(hsv.h)
                        // die hsv-Werte im data-Attribut speichern:
                        $picker.attr('data-hsv', hsv.h + ',' + hsv.s + ',' + hsv.v)
                    }
Dann kannst Du bei der Initialisierung die rgb-Werte übergeben:
Code:
            $('.picker').pickify({ r: 127, g: 255, b: 127 });
Die Werte sollten dann im data-Attribut des Pickers zur Verfügung stehen.

Was die zweite Frage betrifft, so ist es zunächst mal so, dass die Werte nur clientseitig bzw. im Browser zur Verfügung stehen. Damit PHP sie auch kennt, müsstest Du sie mit Ajax an das Skript übertragen und ggf. in einer Session-Variablen speicheren.
 

Dragosius

Erfahrenes Mitglied