All about CSS colors. Video tutorial

#1 · April 1, 2020, 8:10 pm

Additionally to the visual color picker, we can define colors in VisualNEO Web using any of the CSS valid options:

English color name: red, blue, green...
HTML hexadecimal value: #ff0000, #00ff00...
Red, green, blue decimal values (from 0 to 255): rgb(10,34,219)
Red, green, blue and alpha transparency (0 to 1): rgba(10,34,219,.5)
Hue (0 to 360), saturation and lightness percentage: hsl(30,60%,30%)
Hue, saturation, lightness and alpha transparency: hsla(120,10%,40%,.3)

In this tutorial we will see how to use them in VisualNEO Web by creating a complete color choosing application. Do you want to take the challenge? Sample app attached.

Uploaded files:

You need to login to have access to uploads.

Vadim, asmat and YASIN have reacted to this post.

#2 · April 1, 2020, 8:42 pm

Luis, you really have no limits. You can do anything! You are a magician. I would rather say, a very intelligent magician with real magic tricks.

Under your supervision, we can learn anything. It's a beauty! I'm really happy that you show us your expertise so that we can move forward. That's great!

You are the father of many programmers in my opinion. Tell the virus you don't have time to take care of it, ok? Or, give him a tutorial so that he has at least five years to study and that we never see him again. What do you say about that?

Thank you very much Luis! You're the best!

Vadim and Darbdenral have reacted to this post.

#3 · April 1, 2020, 8:48 pm

I have another special request Luis.
It could be used as an idea for another tutorial when you have time.
Make a selection menu with a "highlight" menu bar that moves over each choice (mouse or keyboard arrow) and by clicking on it, an action occurs.

It could be a list or a scroll as seen on iphone phones.

A +

Roger :)

#4 · April 2, 2020, 3:09 am

Thanks luishp,

I learn new things using "alpha" in VisualNEO web.

I suggest below small and fast color-picker for those who interested in designing.

Uploaded files:

You need to login to have access to uploads.

#5 · April 2, 2020, 3:52 am

@asmat Thanks! It is appreciated!

asmat has reacted to this post.

#6 · April 2, 2020, 4:31 am

Hi, while using alpha transparency option is good, I recalled while testing my project doing some chartings, the alpha transparency value was not 'factored' in when I passed SetVar values to the function. It could be my script. Anyway, when I changed to use alpha-transparency to hex without changing the script, the problem is solved. So, in case you've had issue with alpha transparency values... go for hex (like #00ff00) instead.

#7 · April 2, 2020, 8:55 am

@rocote, thanks for the panegyric! LOL
@asmat, great tool, thanks for sharing!
@ronnie what do you mean with "the alpha transparency value was not 'factored'"?

#8 · April 3, 2020, 2:58 am

Hi @luishp, I remembered I did something like

SetVar [Color1] “rgba(255,0,0,0.5)”

and then in the Chart area, I added

data1: $App.Color1;

the transparency doesn’t work. Could be my limited knowledge in JS. Anyway, I’ve since used hex wherever possible if I need to use global Color settings

#9 · April 3, 2020, 8:40 am

the transparency doesn’t work. Could be my limited knowledge in JS. Anyway, I’ve since used hex wherever possible if I need to use global Color settings

I think it could be a limit on the specific Chart library you were using.

#10 · April 3, 2020, 3:55 pm

@luishp

Thank you very much!!!!!

All about CSS colors. Video tutorial - Forum

All about CSS colors. Video tutorial