Basic webpage to show operation of Adafruit 10DOF on Renesas GR Peach board.

Dependents:   GR-PeachAHRSWeb

webpage.h

Committer:
webOnBoard
Date:
2015-10-07
Revision:
0:256cd901cbb1

File content as of revision 0:256cd901cbb1:

#ifndef WEBPAGE_H
#define WEBPAGE_H
//
#ifdef __cplusplus
extern "C" {
#endif

/


//PAGE 3
char ahrsxml[] = {
"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n\r"
"<AHRS>\n\r"
"	<DATA>\n\r"
"		<ALTITUDE>%d</ALTITUDE>\n\r"
"		<HORIZONTAL>%f</HORIZONTAL>\n\r"
"		<VERTICAL>%f</VERTICAL>\n\r"
"		<HEADING>%d</HEADING>\n\r"
"		<SWITCH1>%d</SWITCH1>\n\r"
"		<SWITCH2>%d</SWITCH2>\n\r"
"	</DATA>\n\r"
"</AHRS>\n\r"
"\n\r"
};

char RespondGetOK[] = {"HTTP/1.1 200 OK\r\n"
                             "Server: GR-PEACH-WEBSERVER\r\n"
                             "Content-Type: text/html\r\n\r\n"};
char RespondxmlOK[] = {"HTTP/1.1 200 OK\r\n"
                             "Server: GR-PEACH-WEBSERVER\r\n"
                             "Content-Type: text/xml\r\n\r\n"};

char Page3[] = {
"<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">"
"<html xmlns=\"http://www.w3.org/1999/xhtml\">"
"<head>"
"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />"
"<title>WEB SERVER</title>"
"<script>"
"function updateStatus()"
"{"
"	CheckButtonPress();	"
"}"
"function updatePage()"
"{"
"	var intervalID = setInterval(updateStatus, 1500);"
"}"
"function CheckButtonPress()"
"{"
"	var req = false;"
"	if(window.XMLHttpRequest)"
"	{"
"		req = new XMLHttpRequest();"
"	}"
"	else if(window.ActiveXObject)"
"	{"
"		req = new ActiveXObject(\"Microsoft.XMLHTTP\");"
"	}"
/*"	function Update()"
"	{"
"		if(req.readyState == 4)"
"		{"
"			if(req.status == 200)"
"			{	"
"				var text;"
"				text = req.responseText;"
"				var cmp = text.localeCompare(\"ON\");		"
"				if (cmp == 0)"
"				{"
"					color='purple';"
"				}"
"				else"
"				{"
"					color='orange';"
"				}"
"			}"
"		}"
"	}		"*/
"	if(req)"
"	{"
"		req.open(\"GET\",\"AHRS.xml\",false);"
"		req.send();"
"		xmlDoc=req.responseXML;"
"		x=xmlDoc.getElementsByTagName(\"DATA\");"
//"		function paintBall()"
//"		{"
"		color=(x[0].getElementsByTagName(\"COLOR\")[0].childNodes[0].nodeValue);"
"		horizontal=(x[0].getElementsByTagName(\"HORIZONTAL\")[0].childNodes[0].nodeValue);"
"		vertical=(x[0].getElementsByTagName(\"VERTICAL\")[0].childNodes[0].nodeValue);"
//"		}"
//"		req.open(\"POST\", \"/isbuttonpress?id\" + Math.random(), true);"
//"		req.onreadystatechange = Update;"
//"		req.send();"
"	}	"
"}"
"function Load_state()"
"{"
"	var acload = false;"
"	function Update()"
"	{"
"		if(acload.readyState == 4)"
"		{"
"			if(acload.status == 200)"
"			{"
"				var text;"
"				text = acload.responseText;"
"				var ledred;"
"				var ledgreen;"
"				var ledblue;"
"				ledred = text.slice(0,2);"
"				ledgreen = text.slice(3,5);"
"				ledblue = text.slice(6,8);				"
"				var cmpred = ledred.localeCompare(\"ON\");"
"				if (cmpred == 0)"
"				{"
"					drawLedOn('redled','red');"
"					document.getElementById(\"onoffred\").value = \"OFF\";"
"				}"
"				else if (cmpred == -1)"
"				{"
"					drawLedOff('redled');"
"					document.getElementById(\"onoffred\").value = \"ON\";"
"				}"
"				var cmpgreen = ledgreen.localeCompare(\"ON\");"
"				if (cmpgreen == 0)"
"				{"
"					drawLedOn('greenled','green');"
"					document.getElementById(\"onoffgreen\").value = \"OFF\";"
"				}"
"				else if (cmpgreen == -1)"
"				{"
"					drawLedOff('greenled');"
"					document.getElementById(\"onoffgreen\").value = \"ON\";"
"				}"
"				var cmpblue = ledblue.localeCompare(\"ON\");"
"				if (cmpblue == 0)"
"				{"
"					drawLedOn('blueled','blue');"
"					document.getElementById(\"onoffblue\").value = \"OFF\";"
"				}"
"				else if (cmpblue == -1)"
"				{"
"					drawLedOff('blueled');"
"					document.getElementById(\"onoffblue\").value = \"ON\";"
"				}"
"			}"
"		}"
"	}"
"	if(window.XMLHttpRequest)"
"	{"
"		acload = new XMLHttpRequest();"
"	}"
"	else if(window.ActiveXObject)"
"	{"
"		acload = new ActiveXObject(\"Microsoft.XMLHTTP\");"
"	}"
"	if(acload)"
"	{"
"		acload.open(\"GET\", \"/acloadstate?id=\" + Math.random(), true);"
"		acload.onreadystatechange = Update;"
"		acload.send(null);	"
"	}"
"}"
"function LedRedChange()"
"{"
"	var req = false;"
"	if(window.XMLHttpRequest)"
"	{"
"		req = new XMLHttpRequest();"
"	}"
"	else if(window.ActiveXObject)"
"	{"
"		req = new ActiveXObject(\"Microsoft.XMLHTTP\");"
"	}"
"	function Update()"
"	{"
"		if(req.readyState == 4)"
"		{"
"			if(req.status == 200)"
"			{	"
"				var text;"
"				text = req.responseText;"
"				var cmp = text.localeCompare(\"ONRED\");		"
"				if (cmp == 0)"
"				{"
"					drawLedOn('redled','red');"
"					document.getElementById(\"onoffred\").value = \"OFF\";"
"				}"
"				else if (cmp == -1)"
"				{"
"					drawLedOff('redled');"
"					document.getElementById(\"onoffred\").value = \"ON\";"
"				}"
"			}"
"		}"
"	}"
"	if(document.getElementById(\"onoffred\").value == \"ON\")"
"	{		"
"		if(req)"
"		{"
"			req.open(\"POST\", \"/LEDRED=ON?id\" + Math.random(), true);"
"			req.onreadystatechange = Update;"
"			req.send();"
"		}"
"	}"
"	else"
"	{"
"		if(req)"
"		{"
"			req.open(\"POST\", \"/LEDRED=OFF?id\" + Math.random(), true);"
"			req.onreadystatechange = Update;			"
"			req.send();	"
"		}"
"	}	"
"}"
"function LedGreenChange()"
"{"
"	var req = false;"
"	if(window.XMLHttpRequest)"
"	{"
"		req = new XMLHttpRequest();"
"	}"
"	else if(window.ActiveXObject)"
"	{"
"		req = new ActiveXObject(\"Microsoft.XMLHTTP\");"
"	}"
"	function Update()"
"	{"
"		if(req.readyState == 4)"
"		{"
"			if(req.status == 200)"
"			{	"
"				var text;"
"				text = req.responseText;"
"				var cmp = text.localeCompare(\"ONGREEN\");		"
"				if (cmp == 0)"
"				{"
"					drawLedOn('greenled','green');"
"					document.getElementById(\"onoffgreen\").value = \"OFF\";"
"				}"
"				else if (cmp == -1)"
"				{"
"					drawLedOff('greenled');"
"					document.getElementById(\"onoffgreen\").value = \"ON\";"
"				}"
"			}"
"		}"
"	}"
"	if(document.getElementById(\"onoffgreen\").value == \"ON\")"
"	{"
"		if(req)"
"		{"
"			req.open(\"POST\", \"/LEDGR=ON?id\" + Math.random(), true);"
"			req.onreadystatechange = Update;	"
"			req.send();"
"		}"
"	}"
"	else"
"	{		"
"		if(req)"
"		{"
"			req.open(\"POST\", \"/LEDGR=OFF?id\" + Math.random(), true);"
"			req.onreadystatechange = Update;	"
"			req.send();"
"		}"
"	}"
"}"
"function LedBlueChange()"
"{"
"	var req = false;"
"	if(window.XMLHttpRequest)"
"	{"
"		req = new XMLHttpRequest();"
"	}"
"	else if(window.ActiveXObject)"
"	{"
"		req = new ActiveXObject(\"Microsoft.XMLHTTP\");"
"	}"
"	function Update()"
"	{"
"		if(req.readyState == 4)"
"		{"
"			if(req.status == 200)"
"			{	"
"				var text;"
"				text = req.responseText;"
"				var cmp = text.localeCompare(\"ONBLUE\");		"
"				if (cmp == 0)"
"				{"
"					drawLedOn('blueled','blue');"
"					document.getElementById(\"onoffblue\").value = \"OFF\";"
"				}"
"				else if (cmp == -1)"
"				{"
"					drawLedOff('blueled');"
"					document.getElementById(\"onoffblue\").value = \"ON\";"
"				}"
"			}"
"		}"
"	}"
"	if(document.getElementById(\"onoffblue\").value == \"ON\")"
"	{"
"		"
"		if(req)"
"		{"
"			req.open(\"POST\", \"/LEDBLUE=ON?id\" + Math.random(), true);"
"			req.onreadystatechange = Update;"
"			req.send();"
"		}"
"	}"
"	else"
"	{"
"		if(req)"
"		{"
"			req.open(\"POST\", \"/LEDBLUE=OFF?id\" + Math.random(), true);"
"			req.onreadystatechange = Update;"
"			req.send();"
"		}"
"	}"
"}"
"function drawLedOff(id)"
"{"
"	  var canvas = document.getElementById(id);"
"      var context = canvas.getContext('2d');"
"      var centerX = canvas.width / 2;"
"      var centerY = canvas.height / 2;"
"      var radius = 15;"

"      context.beginPath();"
"      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);"
"      context.fillStyle = 'black';"
"      context.fill();"
"      context.lineWidth = 5;"
"      context.strokeStyle = '#cecece';"
"      context.stroke();"
"}"
"function drawLedOn(id,color)"
"{"
"	  var canvas = document.getElementById(id);"
"      var context = canvas.getContext('2d');"
"      var centerX = canvas.width / 2;"
"      var centerY = canvas.height / 2;"
"      var radius = 15;"

"      context.beginPath();"
"      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);"
"      context.fillStyle = color;"
"      context.fill();"
"      context.lineWidth = 3;"
"      context.strokeStyle = '#000000';"
"      context.stroke();"
"}"
"var color = 'orange';"
"function drawBall()"
"{"
"var canvas = document.getElementById('ball');"
"var ctx = canvas.getContext('2d');"
"var raf;"
"var ball = {"
"  x: 100,"
"  y: 100,"
"  vx: 5,"
"  vy: 2,"
"  radius: 25,"
"  draw: function() {"
"    ctx.beginPath();"
"    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);"
"    ctx.closePath();"
"    ctx.fillStyle = color;"
"    ctx.fill();"
"	ctx.lineWidth = 3;"
"    ctx.strokeStyle = '#000000';"
"    ctx.stroke();"
"  }"
"};"

"var horizontal = 5;"
"var vertical = 2;"
"function draw() {"
"  ctx.clearRect(0,0, canvas.width, canvas.height);"
"  ball.draw();"
"  ball.x += horizontal;"
//ball.vx;"
"  ball.y += vertical;"
//ball.vy;"
"  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {"
"  ball.vy = -ball.vy;"
"}"
"if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {"
"  ball.vx = -ball.vx;"
"}"
"  raf = window.requestAnimationFrame(draw);"
"}"
"  raf = window.requestAnimationFrame(draw);"
"}"
"</script>"
"<style type=\"text/css\">"
".style1 {"
"	text-align: center;"
"}"
".style2 {"
"	text-align: center;"
"	font-size: large;"
"}"
"</style>"
"</head>"
"<body onLoad=\"updatePage();Load_state()\">"
"<p class=\"style2\"><strong>WELCOME TO GR-PEACH WEBSERVER</strong></p>"
"<table width=\"330\" border=\"0\" align=\"center\">"
"  <tr>"
"	<td width=\"90\" class=\"style1\"><input id=\"onoffred\" value=\"ON\" onClick=\"LedRedChange()\" type=\"button\"></td>"
"    <td width=\"150\" class=\"style1\">LED RED</td>"
"    <td width=\"70\" class=\"style1\"><canvas id=\"redled\" height=\"40\" width=\"40\"></canvas><script>drawLedOff('redled');</script></td>"
"  </tr>"
"  <tr>"
"    <td width=\"90\" class=\"style1\"><input id=\"onoffgreen\" value=\"ON\" onClick=\"LedGreenChange()\" type=\"button\"></td>"
"    <td class=\"style1\">LED GREEN</td>"
"    <td class=\"style1\"><canvas id=\"greenled\" height=\"40\" width=\"40\"></canvas><script>drawLedOff('greenled');</script></td>"
"  </tr>"
"  <tr>"
"    <td width=\"90\" class=\"style1\"><input id=\"onoffblue\" value=\"ON\" onClick=\"LedBlueChange()\" type=\"button\"></td>"
"    <td class=\"style1\">LED BLUE</td>"
"    <td class=\"style1\"><canvas id=\"blueled\" height=\"40\" width=\"40\"></canvas><script>drawLedOff('blueled');</script></td>"
"</td>"
"  </tr>"
"</table>"
"<p class=\"style1\">&nbsp;</p>"
"<table width=\"400\" border=\"1\" align=\"center\">"
"  <tr>"
"    <td width=\"360\" class=\"style1\" align=\"center\"><canvas id=\"ball\" width=\"400\" height=\"360\"></canvas><script>drawBall();</script></td>"
"  </tr>"
"</table>"
"</body>"
"</html>"
};



#ifdef __cplusplus
}
#endif

//----------------------------------------------------------------------------
#endif //WEBPAGE_H