Add colorpicker to featured image

Question

I'm trying to add a colorpicker to the featured image meta-box.

Here is some background:
I use the featured image meta-box to place parallax background images.
Because a user is allowed to place text over the image there is a (up until now) div that holds a white background.
In the featured image box the user has the possibility to adjust the opacity of the white div see:this

Now I want to add a possibility for the user to change the white div color.

Okay so now we're here.
To do this I found a js that does this for me:here

I have the "code" implemented to the featured image meta-box and I can change the value of the color. The problem I'm having is to output a rgb value.
Here is what I did (keep in mind this is in my functions.php)

add_filter( 'admin_post_thumbnail_html', 'basic_add_opacity_to_feature_thumb_box');
function basic_add_opacity_to_feature_thumb_box( $myhtml ) {

$selected_option = get_post_meta( get_the_ID(), 'basic_opacity', true ); // get the current value
for ( $i = 0; $i <= 1; $i = $i + 0.1 ) { //loop from 0 to 1 in 0.1 increments
    $selects .= '<option value="' . $i . '" ' . selected( $selected_option, $i, false ) . '>' . $i . '</option>';
}
//create the return html, with the selects created before
return $myhtml .= '
    <script src="'.get_bloginfo('template_directory').'/js/jscolor.js"></script>
    <form>
    Opacity: 
        <select name="basic_opacity">
            ' . $selects . '
        </select><br><br>
    Color:<input class="jscolor {onFineChange:"update(this)"}" value="ffcc00">
    toRGBString = <span id="rgb-str"></span><br />
    </form>
    <script>
    function update(picker) {
        document.getElementById("rgb-str").innerHTML = picker.toRGBString();
    </script>
    ';
}

Can anyone see what I'm doing wrong?

Answer 1

Okay. Got it working....

I used the simple version:

add_filter( 'admin_post_thumbnail_html', 'basic_add_opacity_to_feature_thumb_box'); //same as before

function basic_add_opacity_to_feature_thumb_box( $myhtml ) {

$selected_option = get_post_meta( get_the_ID(), 'basic_opacity', true ); // get the current value
for ( $i = 0; $i <= 1; $i = $i + 0.1 ) { //loop from 0 to 1 in 0.1 increments
    $selects .= '<option value="' . $i . '" ' . selected( $selected_option, $i, false ) . '>' . $i . '</option>'; //add a option field, and select it if it is the one saved before
}
//create the return html, with the selects created before
return $myhtml .= '
    <script src="'.get_bloginfo('template_directory').'/js/jscolor.js"></script>
    <form>
    Transparantie: 
        <select name="basic_opacity">
            ' . $selects . '
        </select><br><br>
    Kleur:
    <div id="color">
        <input id="colorpicker" class="jscolor {onFineChange:"update(this)"}" value="FFFFFF">
        <div id="selected_color"></div>
    </div>
    </form>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $("input#colorpicker").change(function() {
                var contentString =$("input#colorpicker").css("background-color");
                $("#selected_color").html(contentString);
            });
        });
    </script>
    ';
}

After the color is selected I output the content (in RGB) to an empty div.