HTML Color Picker won't open

I was planning to use an HTML color input for setting up colors in my extension.

dlg.set_html '<input type="color">'

In Chrome it works just fine.

But in SketchUp UI::HTMLDialog clicking the color picker doesn’t open the selection popup. (Tested in 2018, and 2020)

image

Does anyone know of a solution?


https://bitbucket.org/chromiumembedded/cef/pull-requests/175/implement-color-picker-issue-899/diff

1 Like

That really stinks. (And I did do some google searching before positing this question)

So the only option is to use a third party control? Any recommendations?

At one time I had the code for Chameleon which was implemented in JavaScript.

Looks like …

Wheel Mode Triangle Mode

Oh I guess it is still available …

Chameleon Color Picker

Chameleon is completely free, and licensed under the openest of open source licenses, the BSD license. This means you can even include it in a closed-source commercial product, so you don’t have to pay someone a lot of money to build a color picker for you, which would probably suck anyway.

Chameleon JS code

Thanks

I’ve also been looking at Vanilla-Picker.

That might have an advantage with an alpha control? I think I remember trying to tweak Chameleon to add an alpha slider.

A pile of work for something that I was expecting to work ‘out of the box’.

In my case I didn’t need the alpha control, but its a simple boolean property to turn it on or off.

IS that what Vanilla Picker looks like ?

The gif makes the color gradient look blotchy.

Here is what it looks like by default.

And here is what it looks like with a few style changes. The default was a bit to big and blocky for my taste.

1 Like

Looks good. Is that in a HtmlDialog of it’s own, or a child popup of a HtmlDialog ?
I guess it must be a popup as it has no border or window caption bar.

1 Like

It’s actually just a div at the very end of the body, with a high z-index. The rest is all done in JavaScript. I learned a lot about HTML and JavaScript yesterday! :weary:

<div id="color_picker" style="position: absolute; top: 0px; z-index: 10000;"></div>
1 Like