Skip to main content
A
Accelero1-Visitor
1-Visitor
November 4, 2018
Solved

rgba color parameter alpha channel doesn't work

  • November 4, 2018
  • 2 replies
  • 3571 views

 

Hi, I just had some issues with getting an app parameter to change the color of a model item to work. Eventually I found out there are some problems with the alpha channel. 

 

I'm using Vuforia Studio 8.3.5.3961 and in the preview it only displays colors fully opaque, even when I set the alpha channel to 0. It's simply ignored, but on my Iphone 5s IOS 12.1(16B92) in Vuforia View  8.3.50, it doesn't display any color when the alpha channel is not set to 1. Unfortunately I cannot test this on another device. 

 

Can anyone reproduce this issue on her/his device? And are there any known issues/bugs, that can cause this? 

 

Thanks in advance for any help. 

Best answer by RolandRaytchev

I did some furhter tests:

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1);"); //brown
$scope.setWidgetProp("modelItem-1", "opacity", "0.3"); //set transparency to 0.3
//or this will also work
$scope.setWidgetProp("modelItem-1", "opacity", 0.3); //set transparency to 0.3

So seems that the better approach is to use for the transparency setting the opacity property. This is also the supported way to to set the transparency  - and here also the setting of the alpha channel.  Because the effect of this code on android device is the same: 

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1);"); //brown
$scope.setWidgetProp("modelItem-1", "opacity", "0.3"); //set transparency to 0.3

with the call of

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,0.3);"); //currently work only on Android device

 On all other devices (IOS and HoloLens)  the "alpha channel" setting will be ignored (it could be only = 1  - displayed or = 0 hidden)

Therefore , I think, is better if you  set the opacity modelItem property , because this will work  on the same way on all devices:

$scope.view.wdg['modelItem-1']['color'] = "rgba(128,0,0, 1);";//brown
$scope.view.wdg['modelItem-1']['opacity'] = 0.5;//set transparency to 0.5
//or for the same 
$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1);"); //brown
$scope.setWidgetProp("modelItem-1", "opacity", 0.5); //set transparency to 0.5

 

2 replies

R
RolandRaytchev21-Topaz I
21-Topaz I
November 6, 2018

Hi,

so could you give ,please, an example how did you set the value? Directly via the property or in inside the javascript?

example:

... via javascript calling the script like :

$scope.setWidgetProp("modelItem-1", "color",  "rgba(128,0,0, 0.3)"); 

2018-11-06_10-27-12.jpg

So on the preview it seems that no transparancy is shown - means the transp. is ignored

So  tried also 

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,0)"); //brown
and $scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1)");

but the same result in preview as shown in the picuture above.

So tested now on devices -> on IOS and  Android

On android Galaxy S9+ the transperancy was working fine -> so the call 

$scope.setWidgetProp("modelItem-1", "color",  "rgba(128,0,0, 0.3)");

the modelitem-1 is displayed with the correct value of transparency

I tested the same code on IOS  but it was not working. Means it did not display transparency but also the color was not set.

So with  furter tests I found that on IOS seems to work only if the value is transp is 0 or 1

so the call 

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1)");

will be displayed correctly in brown color

and the call

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,0)");

will make the modelitem invisible!

 

R
RolandRaytchev21-Topaz IAnswer
21-Topaz I
November 6, 2018

I did some furhter tests:

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1);"); //brown
$scope.setWidgetProp("modelItem-1", "opacity", "0.3"); //set transparency to 0.3
//or this will also work
$scope.setWidgetProp("modelItem-1", "opacity", 0.3); //set transparency to 0.3

So seems that the better approach is to use for the transparency setting the opacity property. This is also the supported way to to set the transparency  - and here also the setting of the alpha channel.  Because the effect of this code on android device is the same: 

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1);"); //brown
$scope.setWidgetProp("modelItem-1", "opacity", "0.3"); //set transparency to 0.3

with the call of

$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,0.3);"); //currently work only on Android device

 On all other devices (IOS and HoloLens)  the "alpha channel" setting will be ignored (it could be only = 1  - displayed or = 0 hidden)

Therefore , I think, is better if you  set the opacity modelItem property , because this will work  on the same way on all devices:

$scope.view.wdg['modelItem-1']['color'] = "rgba(128,0,0, 1);";//brown
$scope.view.wdg['modelItem-1']['opacity'] = 0.5;//set transparency to 0.5
//or for the same 
$scope.setWidgetProp("modelItem-1", "color", "rgba(128,0,0,1);"); //brown
$scope.setWidgetProp("modelItem-1", "opacity", 0.5); //set transparency to 0.5

 

    J
    jmikesell1-Visitor
    1-Visitor
    November 6, 2018

    Yeah @RolandRaytchev has it. The alpha channel seems to be ignored and you have to change the opacity value. It makes sense that the opacity value is THE control for modelItem transparency as you need to set that independent of color. The real question is why Studio uses rgba instead of just rgb. Seems like the A is unused.

    Terms & ConditionsCookie settingsAccessibility statement