How to read sensors via Rest API call in and display it Vuforia Studio experience project?

[RolandRaytchev]

In this particular cases we have some sensors/devices which could be accessed via WLAN/ Web  , where we need to scan /request the values via rest API call. For example from javascript it should looks like:

//this code will work
  fetch('https://jsonplaceholder.typicode.com/todos/6')
  .then(response => response.json())
  .then(json => {console.log(json); })
   .catch(error =>{ console.error(error);})
}; 

... but the same code will not work for http url

fetch('http://ip.jsontest.com/')
  .then(response => response.json())
  .then(json => {console.log(json); })
   .catch(error =>{ console.error(error);})
}; 

When I tested it my observation are that Https and http requests will work in Studio in preview mode.. But only the https request will work on both android and IOS devices. The http fetch request will not work ...

This means trying to design a solution which will call javaScript on the Vuforia view to read data will not work / or will not be stable.

Therefore, the best way /also the supported way is to get data via the External DATA panel:

Here , we need first to create a Thing with properties which could be displayed in the experience project.

The next step is to read the sensors and update the properties.

In case that we can see the sensors URLs from the thingworks instance / in this case we can use a thingworks service called by  a timer which will call in  particular interval  , so the service will  read then the  data from the sensors.

Here we need to define a service which will call a rest API to read the sensors. Here in example to simulate the call we will read a timestamp from a postman-echo service. (here in example I will create a service "testGetValue() which has an InfoTable as output )

//URL_STRING="http://postman-echo.com/time/object?timestamp=2018-6-9:8:8:4"
var year= 2010 +Math.floor((Math.random() * 10) + 1);//2011...2020
var month= Math.floor((Math.random() * 8) + 1);//1-9
var day= Math.floor((Math.random() * 18) + 10);//10-28
var hour= Math.floor((Math.random() * 24) );//1-24
var minute= Math.floor((Math.random() * 60) );//0-59
var second= Math.floor((Math.random() * 60) );//0-59
var msecond= Math.floor((Math.random() * 1000) );//0-999
//these values are only here specific to the web side not to have an error 
//calling the rest API
var URL_STRING="http://postman-echo.com/time/object?timestamp="+year+"-0"+
                 month+"-"+day+":"+hour+":"+minute+":"+second+":"+msecond;
var params = {
	proxyScheme: undefined /* STRING */,
	headers: undefined /* JSON */,
	ignoreSSLErrors: undefined /* BOOLEAN */,
	useNTLM: undefined /* BOOLEAN */,
	workstation: undefined /* STRING */,
	useProxy: undefined /* BOOLEAN */,
	withCookies: undefined /* BOOLEAN */,
	proxyHost: undefined /* STRING */,
	url: undefined /* STRING */,
	timeout: undefined /* NUMBER */,
	proxyPort: undefined /* INTEGER */,
	password: undefined /* STRING */,
	domain: "postman-echo.com" /* STRING */,
	username: undefined /* STRING */
};
params.url=URL_STRING;
// result: JSON
var json = Resources["ContentLoaderFunctions"].GetJSON(params);
//var json_string= JSON.stringify(json);
//var new_json = JSON.parse(json_string);

var params1 = {
    infoTableName: "InfoTable",
    dataShapeName : "InoTableDataShape_Time1"
};

var infotabletest = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape(params1);
infotabletest.AddRow({years:json.years,
                      months:json.months,
                      date:json.date,
                      hours:json.hours,
                      minutes:json.minutes,
                      seconds:json.seconds,
                      milliseconds:json.milliseconds});

var result = infotabletest; 
//set now the value to the properties
me.years=parseInt((infotabletest).getFirstRow().getValue('years')).toString();
me.months=parseInt((infotabletest).getFirstRow().getValue('months')).toString();
me.date=parseInt((infotabletest).getFirstRow().getValue('date')).toString();
me.hours=parseInt((infotabletest).getFirstRow().getValue('hours')).toString();
me.minutes=parseInt((infotabletest).getFirstRow().getValue('minutes')).toString();
me.seconds=parseInt((infotabletest).getFirstRow().getValue('seconds')).toString();
me.milliseconds=parseInt((infotabletest).getFirstRow().getValue('milliseconds')).toString(); 
//=================================================================

To be able to convert the json to a infotable we need here to define a datashape with the same fields corresponding to the json elements (here e.g  InoTableDataShape_Time1):

So every time when we call this service it will call the postman-echo web.side with some random data and will set the values of properties based on the received data  from the request. In this case the request return the sent data but here is important to demonstrate the principle how to call it.

Now we need to create a time which will call for interval (here 1 sec /1000msec) the service (here testGetValues) according the definition above.

his will update the values of the property and we can see them in Vuforia Studio.

But often the sensors URLs are not visible for the thingworx instance. In this case we can try to read the values of the sensors in the local network and then send the values to the thing properties using one of the methods described in the PTC guide “Choose a Connectivity Method ->Guidelines for selecting the optimal method for connecting to ThingWorx.”

https://developer.thingworx.com/en/resources/guides/choosing-connectivity-method

An an example for one alternative way you can fine in "Node.js Rest API example  how to display data from the local network in Vuforia Studio project?"