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);