rondagdag/iotsnowglobe_esp8266.ino

## iotsnowglobe_esp8266.ino
/*
    IoT Snow Globe
    Ron Dagdag @rondagdag

     WiFi Web Server

 A simple web server that shows the value of the analog input pins.
 using a WiFi shield.

 This example is written for a network using WPA encryption. For
 WEP or WPA, change the Wifi.begin() call accordingly.


 */

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include "MMA7660.h"
MMA7660 accelemeter;

const int led = 13;

char ssid[] = "####";      // your network SSID (name)
char pass[] = "#####";   // your network password
int keyIndex = 0;                 // your network key Index number (needed only for WEP)

int status = WL_IDLE_STATUS;

ESP8266WebServer server ( 80 );

void setup() {
  //Initialize serial and wait for port to open:
    accelemeter.init();
  pinMode ( led, OUTPUT );
  digitalWrite ( led, 0 );
  Serial.begin ( 115200 );
  WiFi.begin ( ssid, pass );
  Serial.println ( "" );

  // Wait for connection
  while ( WiFi.status() != WL_CONNECTED ) {
    delay ( 500 );
    Serial.print ( "." );
  }

  Serial.println ( "" );
  Serial.print ( "Connected to " );
  Serial.println ( ssid );
  Serial.print ( "IP address: " );
  Serial.println ( WiFi.localIP() );

  if ( MDNS.begin ( "esp8266" ) ) {
    Serial.println ( "MDNS responder started" );
  }

  server.on("/", handleRoot);

  server.on("/vr", handleVR);

  server.on("/updates", handleUpdates);
  server.onNotFound(handleNotFound);

  server.begin();
  // you're connected now, so print out the status:
  Serial.println ( "HTTP server started" );
}

void handleRoot() {
  digitalWrite(led, 1);
  server.send(200, "text/plain", "hello from esp8266!");
  digitalWrite(led, 0);
}

void handleNotFound(){
  digitalWrite(led, 1);
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET)?"GET":"POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i=0; i<server.args(); i++){
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
  digitalWrite(led, 0);
}

void handleUpdates() {
  char temp[20];
  float ax,ay,az;
  accelemeter.getAcceleration(&ax,&ay,&az);
  snprintf ( temp, 20,
"{'channel0':%02d}",
az);
  server.send ( 200, "application/json", temp );

  Serial.print(az);
}

void handleVR() {
  digitalWrite ( led, 1 );
  ///char temp[3500];
  //snprintf ( temp, 3500,
String html = "<html>\
<head>\
<meta charset='utf-8'>\
<title>Snowman</title>\
<meta name='description' content='Snowman'>\
<script src='https://aframe.io/releases/0.3.2/aframe.min.js'></script>\
<script src='https://rondagdag.github.io/aframe-arduino-snowman/aframe-particle-system-component.min.js'></script>\
<script src='https://rondagdag.github.io/aframe-arduino-snowman/components/aframe-extras.min.js'></script>\
</head>\
<body>\
<a-scene>\
  <a-assets>\
    <img id='snowy' crossorigin='anonymous' src='https://rondagdag.github.io/a-frame-snowman/snowy.jpg'>\
    <a-mixin id='snowTemplate' position='0 2.25 -15' particle-system='preset: snow; texture: https://rondagdag.github.io/a-frame-snowman/images/smokeparticle.png'></a-mixin>\
  </a-assets>\
  <a-entity id='snowList'>\
  <a-entity id='snow' mixin='snowTemplate'></a-entity>\
  </a-entity>\
  <a-entity id='leftController' static-body='shape: sphere; sphereRadius: 0.02;' vive-controls='hand: left' sphere-collider='objects: .throwable' grab></a-entity>\
  <a-entity id='rightController' static-body='shape: sphere; sphereRadius: 0.02;' vive-controls='hand: right' sphere-collider='objects: .throwable' grab></a-entity>\
\
  <a-sphere class='throwable' dynamic-body position='0 0.25 -0.5' radius='0.10' color='white'></a-sphere>\
  <a-sphere class='throwable' dynamic-body position='0.20 0.25 -0.5' radius='0.10' color='white'></a-sphere>\
  <a-sphere class='throwable' dynamic-body position='-0.20 0.25 -0.5' radius='0.10' color='white'></a-sphere>\
  <a-sphere class='throwable' dynamic-body position='0 0.25 -0.15' radius='0.10' color='white'></a-sphere>\
  <a-sphere class='throwable' dynamic-body position='0.20 0.25 -0.15' radius='0.10' color='white'></a-sphere>\
  <a-sphere class='throwable' dynamic-body position='-0.20 0.25 -0.15' radius='0.10' color='white'></a-sphere>\
\
  <a-entity static-body position='0 1 -3'>\
    <a-sphere class='sphere' static-body position='0 0 -5' radius='2' material='shader: standard; color: #fff; metalness: 0; roughness: 1'></a-sphere>\
    <a-sphere class='sphere' static-body position='0 2 -5' radius='1.7' material='shader: standard; color: #fff; metalness: 0; roughness: 1'></a-sphere>\
    <a-sphere class='sphere' static-body position='0 4 -5' radius='1.3' material='shader: standard; color: #fff; metalness: 0; roughness: 1'></a-sphere>\
    <a-sphere class='sphere' static-body position='-0.4 4.3 -3.75' radius='0.2' material='shader: standard; color: #000; metalness: 0; roughness: 1'></a-sphere>\
    <a-sphere class='sphere' static-body position='0.4 4.3 -3.75' radius='0.2' material='shader: standard; color: #000; metalness: 0; roughness: 1'></a-sphere>\
    <a-cone static-body position='0 4 -3.38' rotation='90 0 0' radius-bottom='0.2' radius-top='0' material='shader: standard; color: #ce6548'></a-cone>\
  </a-entity>\
  <a-plane static-body\
    material='shader: flat; src: #snowy; repeat: 1 0.48'\
    rotation='-90 0 0'\
    width='150'\
    height='50'></a-plane>\
    <a-entity geometry='primitive: sphere; radius: 50'\
      material='shader: flat; src: #snowy'\
      rotation='0 40 0'\
      position='0 0 0'\
      scale='1 1 -1'></a-entity>\
    <a-entity light='type: ambient; color: #405e94'></a-entity>\
    <a-entity light='type: directional; color: #FFF; intensity: 0.8' position='5 5 10'></a-entity>\
  </a-scene>\
<script>\
\
var snowList = document.querySelector('#snowList');\
var maxSnow = 50;\
var indexSnow = 0;\
\
function addSnow() {\
  var newSnow = document.createElement('a-entity');\
  newSnow.setAttribute('color', '#FF9500');\
  newSnow.setAttribute('mixin', 'snowTemplate');\
  return newSnow;\
}\
\
function disableSnow(snowElement) {\
  if (snowElement != null && snowElement.components['particle-system'] != null) {\
  var pg = snowElement.components['particle-system'].particleGroup;\
  pg.emitters[0].disable();\
  }\
}\
\
function enableSnow(snowElement) {\
  if (snowElement != null && snowElement.components['particle-system'] != null) {\
    var pg = snowElement.components['particle-system'].particleGroup;\
    pg.emitters[0].enable();\
  }\
}\
\
function removeSnow(snowList) {\
  if (snowList.lastElementChild != null)\
  { \
    var pg = snowList.lastElementChild.components['particle-system'].particleGroup;\
    pg.emitters[0].disable();pg.emitters[0].remove();var emitter = snowList.lastElementChild;\
    snowList.removeChild(snowList.lastElementChild);emitter = null\
  }\
}\
\
function checkUpdates(url) {\
  var xhr = new XMLHttpRequest();\
  xhr.open('GET', url);\
  xhr.onreadystatechange = function() {\
  if (xhr.readyState == 4 && xhr.status == 200) {  \
    var result = JSON.parse(xhr.responseText); \
\
    var snowlist = document.querySelector('#snowList');\
    if (indexSnow > 0) {\
        disableSnow(snowlist.children[indexSnow--]);\
        disableSnow(snowlist.children[indexSnow--]);\
        disableSnow(snowlist.children[indexSnow--]);\
        disableSnow(snowlist.children[indexSnow--]);\
        disableSnow(snowlist.children[indexSnow--]);\
    }\
   if (result.channel0 <= 2.10 && result.channel0 >= 1.90 ) {\
        Array.from(snowList.children).forEach(function(snow) { enableSnow(snow); });\
        indexSnow = snowList.childElementCount - 1;\
        console.log(result);\
        }\
      }\
    }\
  xhr.send();\
  }\
\
  var docFrag = document.createDocumentFragment();\
  for(var i = 0; i < maxSnow; i++) {\
      docFrag.appendChild(addSnow()); // Note that this does NOT go to the DOM\
  }\
\
  snowList.appendChild(docFrag);\
  indexSnow = snowList.childElementCount - 1;\
  Array.from(snowList.children).forEach(function(snow) { disableSnow(snow); });\
  setInterval(function() { checkUpdates('/updates') }, 2000);\
</script>\
</body>\
</html>"; //);

  //server.send ( 200, "text/html", temp );
  server.send ( 200, "text/html", html );
  digitalWrite ( led, 0 );
}

void loop(void){
  server.handleClient();
}
	/*
	IoT Snow Globe
	Ron Dagdag @rondagdag

	WiFi Web Server

	A simple web server that shows the value of the analog input pins.
	using a WiFi shield.

	This example is written for a network using WPA encryption. For
	WEP or WPA, change the Wifi.begin() call accordingly.


	*/

	#include <ESP8266WiFi.h>
	#include <WiFiClient.h>
	#include <ESP8266WebServer.h>
	#include <ESP8266mDNS.h>
	#include "MMA7660.h"
	MMA7660 accelemeter;

	const int led = 13;

	char ssid[] = "####"; // your network SSID (name)
	char pass[] = "#####"; // your network password
	int keyIndex = 0; // your network key Index number (needed only for WEP)

	int status = WL_IDLE_STATUS;

	ESP8266WebServer server ( 80 );

	void setup() {
	//Initialize serial and wait for port to open:
	accelemeter.init();
	pinMode ( led, OUTPUT );
	digitalWrite ( led, 0 );
	Serial.begin ( 115200 );
	WiFi.begin ( ssid, pass );
	Serial.println ( "" );

	// Wait for connection
	while ( WiFi.status() != WL_CONNECTED ) {
	delay ( 500 );
	Serial.print ( "." );
	}

	Serial.println ( "" );
	Serial.print ( "Connected to " );
	Serial.println ( ssid );
	Serial.print ( "IP address: " );
	Serial.println ( WiFi.localIP() );

	if ( MDNS.begin ( "esp8266" ) ) {
	Serial.println ( "MDNS responder started" );
	}

	server.on("/", handleRoot);

	server.on("/vr", handleVR);

	server.on("/updates", handleUpdates);
	server.onNotFound(handleNotFound);

	server.begin();
	// you're connected now, so print out the status:
	Serial.println ( "HTTP server started" );
	}

	void handleRoot() {
	digitalWrite(led, 1);
	server.send(200, "text/plain", "hello from esp8266!");
	digitalWrite(led, 0);
	}

	void handleNotFound(){
	digitalWrite(led, 1);
	String message = "File Not Found\n\n";
	message += "URI: ";
	message += server.uri();
	message += "\nMethod: ";
	message += (server.method() == HTTP_GET)?"GET":"POST";
	message += "\nArguments: ";
	message += server.args();
	message += "\n";
	for (uint8_t i=0; i<server.args(); i++){
	message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
	}
	server.send(404, "text/plain", message);
	digitalWrite(led, 0);
	}

	void handleUpdates() {
	char temp[20];
	float ax,ay,az;
	accelemeter.getAcceleration(&ax,&ay,&az);
	snprintf ( temp, 20,
	"{'channel0':%02d}",
	az);
	server.send ( 200, "application/json", temp );

	Serial.print(az);
	}

	void handleVR() {
	digitalWrite ( led, 1 );
	///char temp[3500];
	//snprintf ( temp, 3500,
	String html = "<html>\
	<head>\
	<meta charset='utf-8'>\
	<title>Snowman</title>\
	<meta name='description' content='Snowman'>\
	<script src='https://aframe.io/releases/0.3.2/aframe.min.js'></script>\
	<script src='https://rondagdag.github.io/aframe-arduino-snowman/aframe-particle-system-component.min.js'></script>\
	<script src='https://rondagdag.github.io/aframe-arduino-snowman/components/aframe-extras.min.js'></script>\
	</head>\
	<body>\
	<a-scene>\
	<a-assets>\
	<img id='snowy' crossorigin='anonymous' src='https://rondagdag.github.io/a-frame-snowman/snowy.jpg'>\
	<a-mixin id='snowTemplate' position='0 2.25 -15' particle-system='preset: snow; texture: https://rondagdag.github.io/a-frame-snowman/images/smokeparticle.png'></a-mixin>\
	</a-assets>\
	<a-entity id='snowList'>\
	<a-entity id='snow' mixin='snowTemplate'></a-entity>\
	</a-entity>\
	<a-entity id='leftController' static-body='shape: sphere; sphereRadius: 0.02;' vive-controls='hand: left' sphere-collider='objects: .throwable' grab></a-entity>\
	<a-entity id='rightController' static-body='shape: sphere; sphereRadius: 0.02;' vive-controls='hand: right' sphere-collider='objects: .throwable' grab></a-entity>\
	\
	<a-sphere class='throwable' dynamic-body position='0 0.25 -0.5' radius='0.10' color='white'></a-sphere>\
	<a-sphere class='throwable' dynamic-body position='0.20 0.25 -0.5' radius='0.10' color='white'></a-sphere>\
	<a-sphere class='throwable' dynamic-body position='-0.20 0.25 -0.5' radius='0.10' color='white'></a-sphere>\
	<a-sphere class='throwable' dynamic-body position='0 0.25 -0.15' radius='0.10' color='white'></a-sphere>\
	<a-sphere class='throwable' dynamic-body position='0.20 0.25 -0.15' radius='0.10' color='white'></a-sphere>\
	<a-sphere class='throwable' dynamic-body position='-0.20 0.25 -0.15' radius='0.10' color='white'></a-sphere>\
	\
	<a-entity static-body position='0 1 -3'>\
	<a-sphere class='sphere' static-body position='0 0 -5' radius='2' material='shader: standard; color: #fff; metalness: 0; roughness: 1'></a-sphere>\
	<a-sphere class='sphere' static-body position='0 2 -5' radius='1.7' material='shader: standard; color: #fff; metalness: 0; roughness: 1'></a-sphere>\
	<a-sphere class='sphere' static-body position='0 4 -5' radius='1.3' material='shader: standard; color: #fff; metalness: 0; roughness: 1'></a-sphere>\
	<a-sphere class='sphere' static-body position='-0.4 4.3 -3.75' radius='0.2' material='shader: standard; color: #000; metalness: 0; roughness: 1'></a-sphere>\
	<a-sphere class='sphere' static-body position='0.4 4.3 -3.75' radius='0.2' material='shader: standard; color: #000; metalness: 0; roughness: 1'></a-sphere>\
	<a-cone static-body position='0 4 -3.38' rotation='90 0 0' radius-bottom='0.2' radius-top='0' material='shader: standard; color: #ce6548'></a-cone>\
	</a-entity>\
	<a-plane static-body\
	material='shader: flat; src: #snowy; repeat: 1 0.48'\
	rotation='-90 0 0'\
	width='150'\
	height='50'></a-plane>\
	<a-entity geometry='primitive: sphere; radius: 50'\
	material='shader: flat; src: #snowy'\
	rotation='0 40 0'\
	position='0 0 0'\
	scale='1 1 -1'></a-entity>\
	<a-entity light='type: ambient; color: #405e94'></a-entity>\
	<a-entity light='type: directional; color: #FFF; intensity: 0.8' position='5 5 10'></a-entity>\
	</a-scene>\
	<script>\
	\
	var snowList = document.querySelector('#snowList');\
	var maxSnow = 50;\
	var indexSnow = 0;\
	\
	function addSnow() {\
	var newSnow = document.createElement('a-entity');\
	newSnow.setAttribute('color', '#FF9500');\
	newSnow.setAttribute('mixin', 'snowTemplate');\
	return newSnow;\
	}\
	\
	function disableSnow(snowElement) {\
	if (snowElement != null && snowElement.components['particle-system'] != null) {\
	var pg = snowElement.components['particle-system'].particleGroup;\
	pg.emitters[0].disable();\
	}\
	}\
	\
	function enableSnow(snowElement) {\
	if (snowElement != null && snowElement.components['particle-system'] != null) {\
	var pg = snowElement.components['particle-system'].particleGroup;\
	pg.emitters[0].enable();\
	}\
	}\
	\
	function removeSnow(snowList) {\
	if (snowList.lastElementChild != null)\
	{ \
	var pg = snowList.lastElementChild.components['particle-system'].particleGroup;\
	pg.emitters[0].disable();pg.emitters[0].remove();var emitter = snowList.lastElementChild;\
	snowList.removeChild(snowList.lastElementChild);emitter = null\
	}\
	}\
	\
	function checkUpdates(url) {\
	var xhr = new XMLHttpRequest();\
	xhr.open('GET', url);\
	xhr.onreadystatechange = function() {\
	if (xhr.readyState == 4 && xhr.status == 200) { \
	var result = JSON.parse(xhr.responseText); \
	\
	var snowlist = document.querySelector('#snowList');\
	if (indexSnow > 0) {\
	disableSnow(snowlist.children[indexSnow--]);\
	disableSnow(snowlist.children[indexSnow--]);\
	disableSnow(snowlist.children[indexSnow--]);\
	disableSnow(snowlist.children[indexSnow--]);\
	disableSnow(snowlist.children[indexSnow--]);\
	}\
	if (result.channel0 <= 2.10 && result.channel0 >= 1.90 ) {\
	Array.from(snowList.children).forEach(function(snow) { enableSnow(snow); });\
	indexSnow = snowList.childElementCount - 1;\
	console.log(result);\
	}\
	}\
	}\
	xhr.send();\
	}\
	\
	var docFrag = document.createDocumentFragment();\
	for(var i = 0; i < maxSnow; i++) {\
	docFrag.appendChild(addSnow()); // Note that this does NOT go to the DOM\
	}\
	\
	snowList.appendChild(docFrag);\
	indexSnow = snowList.childElementCount - 1;\
	Array.from(snowList.children).forEach(function(snow) { disableSnow(snow); });\
	setInterval(function() { checkUpdates('/updates') }, 2000);\
	</script>\
	</body>\
	</html>"; //);

	//server.send ( 200, "text/html", temp );
	server.send ( 200, "text/html", html );
	digitalWrite ( led, 0 );
	}

	void loop(void){
	server.handleClient();
	}