Welcome To The Augmented Reality (AR) Setup

This page explains the parts that control the AR on the microWebSrv. The AR page basically renders a 3D image in a browser that shows data from the sensors of the device. The idea is to use the mobile device as a way to interact with small embedded systems in an easy manner.

You can imagine a case where a system has limited capacity to render or show an interface, or explain to a new user how it works. Unlike systems that have large screens or keyboards, embedded systems tend to be small, limited key input and no way to quickly explain easily how it works to a user. (e.g. An air conditioning unit on a wall may have a keypad with limited keys and screen) An IoT device with a 'marker' will allow the phone to track and render some object on it's browser to enhance data from the device and even control it. The 'marker' is usually an area of contrasting color that your mobile camera can identify where the 3D object should be rendered.

System Requirements

This demo requires the microWebSrv to serve an A-Frame HTML page via a HTTPS session. The basic version of the demo only exposes a web serve running HTTP, if you are following the basic setup you will need to run NGINX on your local machine to act as a HTTPS proxy.

Steps To Use AR

• First follow setup instructions to get the software running on the pyboard 'D'.
• As mentioned above install and setup NGINX on your local machine. At the time of writing the HTTPS code base has a few issues with it. So simply for demo's we will use NGINX as a HTTPS proxy.
• Run the microWbeSrv up with the command >>> import start on your pyboard 'D'.
• On your linux host update your default file in /etc/nginx/sites-enabled/default to have the IP address of your pyboard 'D'. The pyboard will report the IP address every 10 seconds as shown below:

>>> import start
WiFi Manager bringing up wlan interface.
Trying to connect to SSID: srbackup
Retrying to connect. Trying 0 of 5's
WiFi Manager is now monitoring the connection
We have a WiFi connection. Bringing up web server

To disconnect first import all objects from start.py: '>>> from start import * ' 
Then to disconnect do: '>>> myWifi.disconnect()' at your repl prompt

DEBUG:microWebSrv:New thread started for Function: <bound_method> and with arguments: ()
*** Server now running! ***
>>> DEBUG:microWebSrv:Server Process is now started. About to accept SOCKET incoming connections
Connected on IP: 192.168.110.210

• To check the system is running go to the index file and you should see the main web page i.e. http://<micropython IP address:8000/index.html

• Print off the marker and place on a flat surface. The marker is here.

• Navigate to the URL https://my-host-ip-address/AR. The domain has a self signing certificate - so accept the browser warning and allow the page to access your camera. If you move the camera to the marker you should see some rendered content on an AR display. (see image below)

• There are other example files to view which are ARindex.html, ARdemo.html and ARtest-no-tracking.html.

Augmented Reality Code

The code for the AR display is in urls.py which has the function httpHandlerARGet(httpClient, httpResponse) used to handle a request to the URL path /AR.

The function first gathers sensor data to populate strings in function calls. So for 'temperature' we would see:

    temperature = humidityTemperature.temperature()
    valueTemperature = ' "Temperature value: {}" '.format(temperature)
    print("** The Temperature value is: {} ** ".format(valueTemperature))

The function then creates HTML content using AR-Frame which generates an AR scene on supporting browsers. The HTML content gets populated with the strings before sent back on the HTTPS GET request, which happens on line 211.

The function then http write response object and calls the WriteResponseOK method:

httpResponse.WriteResponseOk(headers	= None,
                                  contentType	= "text/html",contentCharset = "UTF-8",
                                  content 		 = content)