Openlaszlo colorTransform Issue

Question

I am using color transformation to set color on a view using this code in OL 3.3 this works perfecty fine.

obj.setColorTransform({ab: 0, aa: 100, 
                                bb: b-rB, ba: 100, 
                                gb: g-rG,  ga: 100, 
                                rb: r-rR,  ra: 100}); 

But i am facing the problem when i have upgraded it to 5.0 swf runtime

obj.setAttribute('colortransform',{ab: 0, aa: 100, 
                                bb: b-rB, ba: 100, 
                                gb: g-rG,  ga: 100, 
                                rb: r-rR,  ra: 100});  

The obj here is a view in this format,

  <view name="borders" 
              width="${parent.bg.width}"
              height="${parent.bg.height}" 
              y="10">
           <simplelayout axis="x"/>
           <view name="left" 
                 resource="border_left" 
                 stretches="height" 
                 height="${parent.height}" 
                 x="5" 
                 y="1">
              </view>
           <view name="middle" 
                 resource="border_mid" 
                 y="1"
                 stretches="width" 
                 height="${parent.height - 2}" 
                 width="${parent.width - parent.left.width - parent.right.width}">
           </view>
           <view name="right" 
                 resource="border_right" 
                 stretches="height" 
                 height="${parent.height}">
           </view>
        </view>

Any Idea why this is not working?

Answer 1

The API has changed, when the setColorTransform({}) method was deprecated in favor of the .setAttribute('colortransform', {}). Instead of ra or rb the property keys are now redMultiplier, redOffset. See the corresponding doc sections quoted below.

Another change in the API is the values. Quoting the documentation for setColorTransform():

The dictionary has the following possible keys: o.ra: percentage alpha for red component (-100 to 100); o.rb: offset for red component (-255 to 255); o.ga: percentage alpha for green component (-100 to 100); o.gb: offset for green component (-255 to 255); o.ba: percentage alpha for blue component (-100 to 100); o.bb: offset for blue component (-255 to 255); o.aa: percentage overall alpha (-100 to 100); o.ab: overall offset (-255 to 255);

Compare that with the documentation of a view's colortransform attribute:

The dictionary has the following possible keys: o.redMultiplier: multiplier for red component (0 to 1) defaults to 1 o.redOffset: offset for red component (-255 to 255) defaults to 0 o.greenMultiplier: multiplier for green component (0 to 1) defaults to 1 o.greenOffset: offset for green component (-255 to 255) defaults to 0 o.blueMultiplier: multiplier for blue component (0 to 1) defaults to 1 o.blueOffset: offset for blue component (-255 to 255) defaults to 0 o.alphaMultiplier: multiplier for alpha component (0 to 1) defaults to 1 o.alphaOffset: offset for alpha component (-255 to 255) defaults to 0

As you can see from the docs, the value range for the alpha offset changed from -100 to 100 to 0 to 1. The following syntax works when you use setAttribute:

var transformValues =
        {redMultiplier: 0 to 1,    redOffset: -255 to 255,
         greenMultiplier: 0 to 1,  greenOffset: -255 to 255,
         blueMultiplier: 0 to 1,   blueOffset: -255 to 255,
         alphaMultiplier: 0 to 1,  alphaOffset: -255 to 255}
this.setAttribute('colortransform', transformValues);