Happy to see the spectrum code integrated!

During our work on this we noticed that spectrum supports both hex and rgb and we thought this would be cool functionality to include for the widget.

Heres our plan of attack, build an update function that converts the field schema to support longer varchars.

Potentially we can also provide a conversion setting that would translate one to the other or force all to one or the other using phps dechex() hexdec()

Thoughts?

CommentFileSizeAuthor
#15 Screen Shot 2014-12-18 at 02.08.14.png32 KByannickoo
#15 Screen Shot 2014-12-18 at 02.04.27.png16.48 KByannickoo
#15 Screen Shot 2014-12-18 at 02.03.50.png61.25 KByannickoo
#9 color_field-rgba-support-1989204-9.patch7.81 KByannickoo
#8 support_alpha_values-1989204-8.patch7.81 KBaxe312

Comments

targoo’s picture

targoo commented

First of all thanks for the interest in this module!

I think we should always store the value in hex6 but we could have helpers to convert from one format to another one.

HEW6 to RGB
HEX6 to HSL...

I might change the schema though to record the transparency property.

StGalant’s picture

StGalant commented

My "alpha hack" for CSS Declaration:

For rgb column and "Plain Text" widget's color field i changed the length to 22 and disabled validation of its value.
Now can enter any text such as "rgba(255,255,255,0.75)".

Rough but simple :)

DaneMacaulay’s picture

DaneMacaulay commented

There much to be gained here allowing rgba as these values can be used to provide inline styles for user editable content. As StGalant points out its ez. Perhaps we can maintain the validation function, but build it to validate more intelligently.

azuledu’s picture

azuledu commented

Any news about supporting alpha values? It would be a great feature!
Thanks.

inteja’s picture

inteja commented

Ditto. Would be great to have.

inteja’s picture

inteja commented

This may help some people when it comes to alpha values: https://drupal.org/comment/8308885#comment-8308885

targoo’s picture

targoo commented
Issue summary: View changes

Thanks inteja for the feedback.
I will be working soon on the alpha support.
Cheers,

axe312’s picture

axe312 commented
Assigned: Unassigned » axe312
Status: Active » Needs review
StatusFileSize
new support_alpha_values-1989204-8.patch7.81 KB

Hey there,

here is a patch which introduces a new field type: color field with alpha. It supports plain text and the spectrum selector widget. Please review and test!

yannickoo’s picture

yannickoo
Location Berlin
commented
StatusFileSize
new color_field-rgba-support-1989204-9.patch7.81 KB

Thanks man for that patch! The regex is crazy and it works great (customize it and see)!

I was confused about your widget description Format rgba(255, 255, 255, 0.99). Why you are using that syntax instead of the syntax from color_field_field_widget_info (which is rgba(255, 255, 255, 1))? I "fixed" that in the attached patch.

Another mentionable thing is that you are using strings when exposing booleans to the JavaScript: $settings['show_alpha'] = 'false'; and $settings['show_alpha'] = 'true';. This was also fixed in the patch.

Sorry for that ugly code comments but Dreditor is not working since drupal.org moved to www.drupal.org :/

axe312’s picture

axe312 commented

Thx for the review and the fixed patch. Had no hussle to apply it again :)

I've used rgba(255, 255, 255, 0.99) to make clear that it is supporting alpha values with the precision of 2. I took this precision, because more is very unusual and the tinycolor library used by the spectrum color picker also uses 2 decimals after the dot.

Unfortunately, the w3c definition of the alpha value does not limit the precision, even numbers above 1 and below 0 are valid:
http://www.w3.org/wiki/CSS3/Color/opacity#alphavalue

davidwbarratt’s picture

davidwbarratt commented

Why are the rgba values being stored in a single varchar column? Why not have 4 columns (3 int, 1 decimal)? seems like it would be better database design, also have less characters and less chance for something random to get inserted into the database.

Thanks!

yannickoo’s picture

yannickoo
Location Berlin
commented

Nice input David!

targoo’s picture

targoo commented
Status: Needs review » Needs work

I'm very keen to keep the color into 2 DB columns (color and opacity). See more on http://www.w3.org/TR/css3-color/#color

The color should use the 6 RGB hex values and the opacity will just be a float.

Why I like the 6 RGB hex values format:

1) HTML5 is using the same format.

The value is a string representing a color which is exactly seven characters long, consisting of the following parts, in exactly the following order:
A "#" character.
Six characters in the range 0–9, a–f, and A–F.

More on http://www.w3.org/TR/html-markup/input.color.html

2) Most people are really use to the well know color format #F0F8FF, #7FFF00 and you know what they represent as soon as you see them.

3) Migration from before and after the Alfa implementation will be easier.

4) Validation of the 6 RGB hex values is also trivial: preg_match('/^#[a-f0-9]{6}$/i

5) HEX is more compact.

6) Older browsers like IE5 doesn’t support rgb :-p [jokes]

targoo’s picture

targoo commented

Good news folks...

Branch 7.x.2.x now support the opacity value.

Give it a try and report any issues.

Not yet ready for production but very close now.

We should have a beta version within a month...

yannickoo’s picture

yannickoo
Location Berlin
commented
StatusFileSize
new Screen Shot 2014-12-18 at 02.03.50.png61.25 KB
new Screen Shot 2014-12-18 at 02.04.27.png16.48 KB
new Screen Shot 2014-12-18 at 02.08.14.png32 KB

Cool!

So the current version adds a new field setting:

This is how the widget looks like:

And it seems like the field formatters does not support this right now, I think this is what targoo means with "but very close now" :)

targoo’s picture

targoo commented

No I am working on the formatters but that easier than the widget ;-)

Thanks for the first tests. Much appreciate.

Did you migrate from 7.x-1.x ? No issue regarding the migration ?

yannickoo’s picture

yannickoo
Location Berlin
commented

I checked 7.x-2.x branch on simplytest.me, sorry :D

yannickoo’s picture

yannickoo
Location Berlin
commented
Assigned: axe312 » Unassigned
Status: Needs work » Active
targoo’s picture

targoo commented
Status: Active » Closed (fixed)

Hi,

7.x-2.x supports now the latest spectrum widget and the color opacity. spectrum requires jQuery 1.7.2 so make sure to upgrade you jQuery.

Thanks,