Custom Overlay for Ohmni Robots | HTML JavaScript

Language: HTML & JavaScript
Editor: Atom

Purpose:
A potential customer of https://www.robots4good.com.au/ asked if our telepresence robots could scan QR Codes. This is not an out of the box capability of the Ohmni Robots but with a developer license you are able to add a HTML overlay in addition to the regular video call overlay and also use the robot’s webapi to control it. The purpose of this project was to learn HTML and JavaScript and demonstrate the requested capabilities were possible.

Tasks:
I found a QR javascript library that was able to read PNG photos but it only triggered via a listener for change to the HTML input for files. So I had to edit the minified JS code in order for it to listen to my own button trigger and input. This data input was a base64 image that was a screenshot from the robot’s camera coming via Ohmni’s webapi. Due to the high failure rate in finding a readable QR code in an image from the camera feed it was important for improved User Experience that process was repeated automatically until a successful reading. I did this by implementing a timed/interval loop that repeated until a successful result or by the user cancelling the loop.

Skills:
– Reading and editing minified JavaScript code
– Working with HTML elements
– Using timed/interval loops
– Understanding of URI vs URL
– Understanding of base64 data.
– Designing for improved User Experience

Basics Practiced:
– Loops
– Functions
– Listeners
– Using open source libraries
– Implementing external webapi

Library Sources

QR Library : https://www.youtube.com/watch?v=vu7Pz3X1dkE
https://webbuilder7.com/start?ref=7b520

Ohmni Webapi: https://docs.ohmnilabs.com/webapi/