[Resolved] How to color an object across a Color Picker with color palettes (RAL)

[Luciano]

Hi,

I’d like to put in my scene a white image .png that I can to give it a differents colors, like for example a “color picker”.

Is’t possible ? There’re an example ?

Best

Luciano

[Daniel]

What aspects of a color picker are you trying to recreate? Can you explain a bit more about what you’re trying to do?

[JimScott]

@Luciano

Here is a thread on the Forum that appears to be similar to what You are asking. In particular look at the very last Hype project on the page by @strmiska. This example uses SVGs but You may see a way to shift it to “.pngs” - or decide that SVGs are the better route.

Paint exported illustrator canvas

for children i want them to let them paint canvas-figures. it seemed to work by only using hypes symbols. from illustrator i exported canvas-code and placed it in a rectangle to get the canvas. but i´m not able to pant this canvas. i tried @h_classen canvas painting tool - great work - but not what i want to do. my work is much simplier so does anyone have experiences with this? here´s my example - choose your favourite color: paintCanvas.hype.zip (644,5 KB) thanx a lot

[MarkHunte]

Here is my take on a colour picker.

This loads an image into a canvas. Then uses the pixel data of the canvas to get a colour.

The functions to find the pixel data is pulled form the internet. ( To save me writing it )

How to get the pixel color from a canvas on click or mouse event with Javascript

But has some changes to work as a colour picker.

---

Live demo

http://markosx.com/hypeTests/colourPicker

ColourPicker.hype.zip (1.6 MB)

[Luciano]

Thanks at all !!

I see your example @JimScott @MarkHunte, and I arrived here example_picker.zip (208.7 KB)
I’ve 2 problems:

• When I choose color from picker, tshirt don’t change color, but change his background because it’s a png. ( I prefer to use a svg, but problem it’s the same )
• I’d like , if it’s possible, to have a name of color ( rgb, hex, ral ) and not coordinates.

Best

[h_classen (Hans-Gerd Claßen)]

colourizeTShirt.hype.zip (59.0 KB)

a very simple example … hope you’ll get to work for your purpose

[MarkHunte]

I would just change the image so the outside of the t-shirt is white and inside transparent

ColourPicker.hype 2.zip (1.7 MB)

Personally I think now we know what you are doing @h_classen’s simple method may work better for you as you have contol over the colours that can be selected.

Also it allows for simple control when used with Mobile devices.
The example I give can be made to work with iOS ( I made a test version for that, not posted) but can get complicated.

My example will have it’s uses but if its for T-Shirts go with @h_classen’s

[h_classen (Hans-Gerd Claßen)]

often the real usecase is very unclear or even missleading when a topic is created.

it may be worth a sticky post that explains a how to ask ‘good’ questions …

[Luciano]

I’m arrived to this situation test_button_color.hype.zip (109.4 KB)
In this example i put in scene some squares of colors. But, in real, I need to put RAL color palettes ( 200/220 colors ), have u an idea ? I don’t know, a slide, a drop list of color . . . . .

[h_classen (Hans-Gerd Claßen)]

you could use html-form-elements like select …

https://forums.tumult.com/t/load-json-block-depending-on-input-value/12159/5

[MarkHunte]

Using my clone extension and a list of RAL colours ( external js file in the resources )

We can populate a Group/Div by cloning a rectangle element.
We add a click action to each clone.
Tooltip
And attributes that may be handy in knowing the chosen colour.

clone Extension_ColPallet_v1.hype.zip (97.7 KB)

[MarkHunte]

Just did a small update. Pallet need to be above your image element.

[Luciano]

Thanks thanks thanks at all, so you found my solution.

I meet a problem when I create a new layout for responsive aspect, infact when I create a second layout , function of colour don’t work in any layout, here an example testcolor.hype.zip (501.1 KB).
If I erase second layout ( in my example called “no work” ) function restart.

[MarkHunte]

This is because the original is working with and looking for element ID’s on a single scene.
ID’s also must not appear twice.

When you use mutiple scenes/Layouts you often need to use class names instead.

One issue is to know which scene’s or layout’s element with the class is wanted.

In my original code in the head there is an extension that helps track the current scene element.

The code in the Clone() is now adjusted to look for the correct class elements on the scene layout.

The elements which had id’s have now class names instead including the ‘path’ in the door.

testcolor_v2.hype.zip (523.5 KB)

[Luciano]

Thanks perfect ! All done !
A little thing, when mouse over on square color, show text " undefinited ", do u know how hide it ?
Best

[MarkHunte]

You did not use the colour name in the RAL coloursArray.js so you need to remove the three lines in the Clone()
that either declare or use the var colAttrib

[Luciano]

Yes, only I deleted this line

thisClone.title = colAttrib;

and result ok.

[Luciano]

Sorry disturb,

I’d like know if it’s possible to change scrollbar ( size, color, form ) or if it’s possible to change with arrow left and right.

Always thanks

[MarkHunte]

You would need to look up on the web for scrollbar color css.

For arrow left and right, are you talking about no scroll but have navigation arrows eitherside?

testcolor_v2 4.hype.zip (527.6 KB)

Will comment later…

[DrPopet (José Alejandro Silva Ruiz)]

Wow, just what I needed. THANKS!