transparentOption on color tag (element)

[jasontinnin]

It appears that this attribute has been removed. Is this on purpose?

[JeffryBooher]

Do you mean the <color> parameter tag?

[jasontinnin]

Yes, that's what I meant.

[JeffryBooher]

I don't see that the <color> ever supported a transparent attribute. Do you mean supportsNoneColor?

    "color": {
        "attributes": [
            "formatHexColor", 
            "label", 
            "defaultValue", 
            "name", 
            "rgbColor", 
            "supportsNoneColor",
            "toolTip"
        ],
        "context": ["parameters", "section"]    
    },

[JeffryBooher]

Ah, it looks like it was never properly documented but it is still supported in Muse.

[JeffryBooher]

Yeah, the transparentOption attribute was never documented but I will add this soon.

[jasontinnin]

OK cool no worries

What is this supposed to look like? I can't get it to work.

[JeffryBooher]

The transparencyOption allows for the alpha channel of an RGB color value to be controlled through a numeric input field with value stepper in the OOUI; you need two tags: one for the color picker and one for the numeric input for the alpha value; you need to specify rgbColor=true so the result is written as rgba(r,g,b,a) and the a value comes from the transparent option.

Here's an example to play with in a mucow:

<color name="bgColor3" label="BG Color 3" rgbColor="true" transparentOption="transparency3" supportsNoneColor="true" defaultValue="0, 0, 0"/>
<number name="transparency3" label="BG Transparency" min="0" max="1" step="0.1" snap="0.01" defaultValue="0.6" />

bgColor3 will be replaced with rgba(0,0,0,0.6) at code generation time.

That's not what I'm getting. What am I doing wrong?

<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget name="widget" formatNumber="4" creator="Your name" isResizable="false" defaultWidth="150" defaultHeight="100" localization="none">
    
    <parameters>
        <color name="bgColor3" label="BG Color 3" rgbColor="true" transparentOption="transparency3" supportsNoneColor="true" defaultValue="0, 0, 0"/>
        <number name="transparency3" label="BG Transparency" min="0" max="1" step="0.1" snap="0.01" defaultValue="0.6" />
    </parameters>
    
    <pageItemHTML>
    <![CDATA[
        <p>{param_bgColor3}</p>
        <p>{param_transparency3}</p>
        <p>{param_bgColor3}{param_transparency3}</p>
    ]]>  
    </pageItemHTML>
    
</HTMLWidget>

The above code is just outputting:

0,0,0
0.6
0,0,0 0.6

And none of them enable a transparency dial in when the color parameter is opened in the OOUI

[JeffryBooher]

right, you need to write it as rgba({param_bgColor3},{param_transparency3});

e.g.

.myClass { background-color: rgba({param_bgColor3},{param_transparency3}); }

Okay but what is the point of the transparentOption? If you remove that part, you get the same results. In the example below, you get the same results, the only difference is that the example that uses transparentOption uses a little bit more code:

<?xml version="1.0" encoding="UTF-8"?>
<HTMLWidget name="widget" formatNumber="4" creator="Your name" isResizable="false" defaultWidth="150" defaultHeight="100" localization="none">
    
    <parameters>
        <color name="color1" label="BG Color 3" rgbColor="true" transparentOption="trans1" supportsNoneColor="true" defaultValue="0, 0, 0"/>
        <number name="color1" label="BG Transparency" min="0" max="1" step="0.1" snap="0.01" defaultValue="0.6" />
        
        <color name="color2" label="BG Color 3" rgbColor="true" supportsNoneColor="true" defaultValue="0, 0, 0"/>
        <number name="trans2" label="BG Transparency" min="0" max="1" step="0.1" snap="0.01" defaultValue="0.6" />
    </parameters>
    
    <headHTML>
    <![CDATA[
    <style>
    .firstClass {
        background-color: rgba({param_color1},{param_trans1});
    }
    
    .secondClass {
        background-color: rgba({param_color2},{param_trans2});
    }
    </style>  
    ]]>    
    </headHTML>
    
</HTMLWidget>

Is there a difference?

[JeffryBooher]

Yes, the color picker will set the value for the transparent option when "no" color is selected so you will a 0 for transparency so that the RGBA parameter for transparent is correctly set. In the latter case, you won't get that.