Difference between Preview Mode and Thingworx View

[SebastienV]

Hello,

My problem is that I have a difference between Preview Mode (where everything is working) and Thingworx View (where something is wrong). Also, my experience is in "Requires Authentification" access mode, so I don't think this is an accessibility issue.

The difference is on 3D Labels' classes. I display data in 3D Labels around a 3D Model and during the Model Loaded event I call 2 functions that change the 3D Labels' classes according to their value (to change their colour). On the Preview Mode this is working well, the 3D Labels' colour matches with their value as expected. But on Vuforia View the classes doesn't match their value, as if the functions that change the 3D Labels' classes weren't called, even if the 3D Model is loaded and the 3D Labels too (but with the wrong colour).

I also tried to call these functions with a button instead of the Model Loaded event, once again it worked with the Preview Mode, but not on Vuforia View.

If what I have done is working in Preview Mode then I can't see anything preventing it from working in Vuforia View, I am confused.

Does anyone have an idea that could fix this?

Thank you for the support.
Greetings

Sébastien

[sgreywilson]

@SebastienV 

I actually tried to use class and so far not got it to work in preview ! As there are not that many things you can change and I have a memory around setting classes on 3D labels may not work - possible bugs. Could you approach it differently say setting attributes that can be changed in UI for example

You many have already tried this 

$scope.setFontColor = function () {


$scope.view.wdg["3DLabel-2"].fontColor = "red";
$scope.view.wdg["3DLabel-1"].fontColor = "yellow";

}

Or tell me more what class attributes you are trying to set

[sgreywilson]

@SebastienV 

I did additional exploration and tried both preview and view on android mobile and had no issue (what is you device )

Attached anew project which sets the class (and now works)  and attributes. Can you see if this works for you

[SebastienV]

Thank you for your reply.

It is uncanny, when I try your ColorCheck (first and 2nd version) it works both on Preview Mode and Vuforia View, but then if I apply the same commands on my project it only works on Preview Mode and still not on Vuforia View.
I am using the 92.4.921.0th version of Vuforia View on Windows 10 Entreprise, on a Dell Latitude 7200.

But soon I could try on a classic android device, do you think this could make a difference ?

So on my project I get the same result with the 2 methods, that I try to modify only the color of the 3D Label or its class, it will only work on Preview Mode. Here are my functions, called, as you do, with a Model Loaded event:

// to change the color

$scope.colorvolt = function() {
  var voltage = $scope.view.wdg['valueDisplay-1']['value'];
  if (voltage > 24) {
    $scope.view.wdg["3DLabel-3"].fontColor = "#00AA00";
    $scope.view.wdg["3DLabel-4"].fontColor = "#00AA00";
  } else if (voltage < 23) {
    $scope.view.wdg["3DLabel-3"].fontColor = "red";
    $scope.view.wdg["3DLabel-4"].fontColor = "red";
  } else if ((voltage < 24) && (voltage > 23)) {
    $scope.view.wdg["3DLabel-3"].fontColor = "#DE7C00";
    $scope.view.wdg["3DLabel-4"].fontColor = "#DE7C00";
  }
};


$scope.colorstate = function() {
  var state = $scope.view.wdg['3DLabel-2']['text'];
  if ((state == "good") || (state == "default")) {
    $scope.view.wdg["3DLabel-2"].fontColor = "#00AA00";
  } else if (state == "charging") {
    $scope.view.wdg["3DLabel-2"].fontColor = "#00FF00";
  } else if (state == "error") {
    $scope.view.wdg["3DLabel-2"].fontColor = "black";
  }
};

____________________________________________________________
//OR
____________________________________________________________
// to change the class

$scope.colorvolt = function() {
  var voltage = $scope.view.wdg['valueDisplay-1']['value'];
  if (voltage > 24) {
     $scope.view.wdg["3DLabel-3"].class = "label_Good";
     $scope.view.wdg["3DLabel-4"].class = "label_Good";
  } else if (voltage < 23) {
    $scope.view.wdg["3DLabel-3"].class = "label_Dead";
    $scope.view.wdg["3DLabel-4"].class = "label_Dead";
  } else if ((voltage < 24) && (voltage > 23)) {
    $scope.view.wdg["3DLabel-3"].class = "label_Warning";
    $scope.view.wdg["3DLabel-4"].class = "label_Warning";
  }
};


$scope.colorstate = function() {
  var state = $scope.view.wdg['3DLabel-2']['text'];
  if ((state == "good") || (state == "default")) {
    $scope.view.wdg["3DLabel-2"].class = "label_Good";
  } else if (state == "charging") {
    $scope.view.wdg["3DLabel-2"].class = "label_Charging";
  } else if (state == "error") {
    $scope.view.wdg["3DLabel-2"].class = "label_Error";
  }
};

[sgreywilson]

I copied the code you have and tried to make a similar example. I'm not sure of the  logic but that might just be my miss understanding. I would feel better with a  final else. 

I tried in preview and android and so far its working  (see attached photo) with does not help I know.  Check the supported devices and if not listed then that makes it harder to get a fix. Can you try on Android or Ipad or Iphone. I uploaded what I changed 

[SebastienV]

Thank you for your reply.

I tried your Vuforia View experience on my device, and it works. The only difference here being that the functions are called after the Value Changed of the Text Input, instead of the Model Loaded, but in the previous version we saw that your experience also worked with this event trigger. So I don't see a difference with my project and therefore I don't understand why my version is not working.

Actually, the only difference may be due to a change of view. My experience starts with a view where we have to fill in a Text Area with a name allowing to link to a Thing (with a QR Code reader or directly by typing). Then you validate with a button that allows you to go to the second View in which with a Model Target 360 I recognize the shape of a 3D Model that I display at the same time as 3D Labels whose texts are information from the Thing. It is precisely these 3D Labels on which I apply my functions (called with Model Loaded event) allowing to change their color (or classes) according to their value. Also in this View there is a button Colors, that also call these functions, to force the call, just in case the problem came from the Model Loaded event, but apparently not.

I imagine that it is not necessarily easy to understand by reading this, so I am sending you my experience as well, even if due to the connection to ThingWorx you will not be able to make it work.

But once again what I'm having trouble is to see that it works in Preview Mode, which lets me supposed that my method is correct, and yet the display is not good on Vuforia View. As soon as possible I will try my experience on an android device, but I do not have access to it at the moment (even if your ColorCheck experience worked on my device, and as we use the same method, I would say that mine should work on my device too).

[sgreywilson]

SebastienV,

I noticed the services you are calling are in the first view - functions are not global

[SebastienV]

Thank you for your reply.

Yes I agree, but if the problem was there, yet it shouldn't work on Preview Mode either, should it?

However I have a second version of my experience where I use an application parameter to pass the name I use to launch the GetName service to the second View, as you had advised me in a previous post. Then the service is called in the second View, as the functions, and yet I get the same result: it works in Preview Mode, but not on Vuforia View.

I still don't have the permissions to try on an android device, I'll let you know as soon as it's done.

[SebastienV · Accepted solution]

@sgreywilson 

Hello,

I'm back now that I was able to test on Android and IOS devices.
Good news, the display of colors is done correctly, as in preview mode, so it seems that the problem is only due to whether or not the device supports CSS additions.

Thank you very much for the support regarding this issue.