cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Visit the PTCooler (the community lounge) to get to know your fellow community members and check out some of Dale's Friday Humor posts! X

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

No ratings

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:

 

111111.jpg

 

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.

 

111112.jpg

 

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

 

 

111113.jpg

 

 

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.

 

111114.jpg

 

this will update the values of the property and we can see the updated property  in Vuforia Studio.

 

111115.jpg

 

 

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

111116.jpg

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?"

 

Version history
Last update:
‎Jun 30, 2019 08:49 PM
Updated by:
Labels (1)
Contributors