Software apps and online services

Story

With World Wide Web is evolving faster than ever. We've seen recent developments in Virtual Reality and it's path to the web. And with tools that is available to use, it's getting easier and easier to build Virtual Reality experiences.

It's Christmas time again and growing up I've always seen these Christmas Snow Globe. It's so peaceful to see how snow falls down slowly. Growing up in country where there's now snow, it's fun to see the christmas snow globe.

What if we can experience being inside the snow globe. What would it be like? What if I have a snow globe, connect it to my VR device and get transported inside a snow globe.

I built a proof of concept device that I think would start an industry of VR connected devices.

if this project made you interested in developing with Arduino, Virtual Reality, A-Frame, please click "respect project" button and follow me. Thanks

HTC Vive

Vive is a first-of-its-kind virtual reality system. Let yourself be visually, physically and emotionally amazed by new virtual worlds. I have one and it's amazing. You can move around and have controllers that is used to interact with virtual world.

If you haven't tried an HTC Vive, visit a Microsoft Store near you.

A-Frame

According to https://aframe.io/ : "A-Frame is a web framework for building virtual reality experiences. It was started by Mozilla VR to make WebVR content creation easier, faster, and more accessible.

A-Frame lets you build scenes with just HTML while having unlimited access to JavaScript, three.js, and all existing Web APIs. A-Frame uses an entity-component-system pattern that promotes composition and extensibility. It is free and open source with a welcoming community and a thriving ecosystem of tools and components."

Chrome Experimental Build

I recently found out that A-frame supports HTC Vive using this Chrome experimental build.

void loop() {
WiFiClient client = server.available(); // listen for incoming clients
if (client) { // if you get a client,
Serial.println("new client"); // print a message out the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
// the content of the HTTP response follows the header:
client.print("Click <a href=\"/H\">here</a> turn the LED on pin 9 on<br>");
client.print("Click <a href=\"/L\">here</a> turn the LED on pin 9 off<br>");
// The HTTP response ends with another blank line:
client.println();
// break out of the while loop:
break;
}
else { // if you got a newline, then clear currentLine:
currentLine = "";
}
}
else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /H")) {
digitalWrite(9, HIGH); // GET /H turns the LED on
}
if (currentLine.endsWith("GET /L")) {
digitalWrite(9, LOW); // GET /L turns the LED off
}
}
}
// close the connection:
client.stop();
Serial.println("client disonnected");
}
}

I added an accelerometer, I used the one that comes with Grove starter kit for Intel Edison. It's based on Freescale's MMA7660FC chip.

Followed the instructions on how to create a WebServer and install the driver for Digital Accelerometer.

Arduino Hosting a A-Frame WebVR site

I got the webserver in Arduino. I started changing it to add WebVR capabilities. To simplify the process, I stored the javascript and assets libraries on Github. Technically, it can also be located in SD Card module attached in Arduino and served as webserver.

If I go to http://<arduino-ip-address>/VR it will server the VR website. If it's just the http://<arduino-ip-address>/ it will return data from accelerometer.

Strategies to send data to Web VR

Got the webvr site working, but now how do I send accelerometer data from arduino the browser? I thought of different strategies like sending data thru a cloud, or do websockets, mqtt.

I thought to myself, simplify the process. Don't overcomplicate stuff. I'm only serving 1 user, no need to do cloud. Think small not big. No big data. How about polling?

The classic polling method. Why not? It's only limited to 1 client, it's not serving multiple users (although it can). I can just instruct my web client to ask the arduino webserver to return the accelerometer data every 2 seconds. It doesn't have to be realtime.

Every 2 seconds, run CheckUpdate function that does XML http request. I don't even need a jquery library. just plain old javascript. The arduino webserver returns json file with accelerometer data. the Checkupdate function would also parse the result then now I can detect if the snow globe was tilted or not.

Having more snow....

Having snow in WebVR using the aframe particle system works. But only small amount of snow. I want more? So I tinkered with settings on particle system. I got stuck. I've changed variables and it seems to make it worse.

So here's what I did. I found out you can manipulate the DOM in A-frame. So you can add entities dynamically.