Basic webpage to show operation of Adafruit 10DOF on Renesas GR Peach board.
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\"> </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