In this particular cases we have some sensors/devices which could be accessed via WLAN/ Web and also we need to scan /request the values of these sensors via rest API calls.
For example from javascript code for simple REST API request the code should looks like (used a test web page which provides demo response) :
//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 was 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 where we will try to read data will not work / or at least will not work stable.
Therefore, a better way is /also it is the supported way /- to get (to bind) the sensors data via the External DATA panel:
To achieve this goal , we need:
- 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. The time will call the service in particular interval , so that the service will read then the data from the sensors.
In the picuture above we need to define a service which will call a rest API to read the sensors. Here in the example to simulate the call we will read a timestamp from a postman-echo service. As the name say's it will return exact the same values what was send to it (but with different format - as JSON object) . So for example when we call in a web browser the following link:
http://postman-echo.com/time/object?timestamp=2018-6-9:8:8:4
this will return the following json object:
{"years":2018,"months":5,"date":1,"hours":9,"minutes":8,"seconds":8,"milliseconds":4}
In this example we will create a service "testGetValue() which will call the echo service and will return the json respose as 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 object to an infotable we need 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 returns the sent data (makes no really sense) but here is only important to demonstrate the principle how to call it. This should demonstrate how to request values from some edge devices (measurments) via REST API calls - supposing that the edge device supports REST API call. (For example we can setup some Arduinos, Raspberry , ESP8266, etc... as Web Service supporting REST API calls for reading of measurment values)
Now we need to create a timer object which will call call the service for an particular interval (here 1 sec /1000msec) -> the used service is here testGetValues() according the definition above.
this will update the values of the property and we can see the updated property 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 (some kind of intermediate service) 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 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?"
