Skip to content

Instantly share code, notes, and snippets.

@mhanuel26

mhanuel26/canvas_htm.h Secret

Created March 5, 2019 01:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mhanuel26/2c34c91f9f5cd6e2e6c1dcdd5611541a to your computer and use it in GitHub Desktop.
Save mhanuel26/2c34c91f9f5cd6e2e6c1dcdd5611541a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
canvas_htm.h
static const char canvas_htm[] PROGMEM = "<!-- Author : Mudassar Tamboli - Modified Manuel Iglesias -->\n"\
"\n"\
"<!DOCTYPE html>\n"\
"<html>\n"\
"<title> Spresense Wecb Camera - Websocket Demo </title>\n"\
"<link rel=\"shortcut icon\" href=\"data:image/x-icon;,\" type=\"image/x-icon\"> \n"\
"<script type = \"text/javascript\">\n"\
" var ws = null;\n"\
" var r = 0;\n"\
" var capturecount = 1;\n"\
" var ln = 0;\n"\
" var flag = 0;\n"\
" var xres = 0;\n"\
" var yres = 0;\n"\
" var canvas;\n"\
" var ctx;\n"\
" var imgData;\n"\
" var gcanvasid = \"canvas-Q-VGA\"; \n"\
" var camera_ip = \"192.168.1.145\";\n"\
" //var frames = 2;\n"\
"\n"\
" function initWebSocket() {\n"\
" \n"\
" if (\"WebSocket\" in window) {\n"\
" if (ws != null) {\n"\
" ws.close();\n"\
" } \n"\
" \n"\
" ws = new WebSocket('ws://' + camera_ip + ':81/', ['arduino']);\n"\
" if (ws == null) {\n"\
" document.getElementById(\"connecting\").innerText = \"Failed to connect to camera [ \" + camera_ip + \" ]\";\n"\
" return; \n"\
" }\n"\
" ws.binaryType = 'arraybuffer';\n"\
"\n"\
"\n"\
" // open websocket \n"\
" ws.onopen = function() {\n"\
" document.getElementById(\"canvasSpresenseCam\").style.visibility = \"visible\";\n"\
" document.getElementById(\"connecting\").style.visibility = \"hidden\";\n"\
" document.getElementById(\"constatus\").innerText = \"Connected to \" + ws.url;\n"\
" if (gcanvasid != null && gcanvasid != \"\") {\n"\
" capture(gcanvasid);\n"\
" }\n"\
" };//ws.onopen\n"\
" \n"\
" // receive message \n"\
" ws.onmessage = function (evt) { \n"\
" var arraybuffer = evt.data;\n"\
" //console.log('onmessage receive len: ' + arraybuffer.byteLength); \n"\
" if (arraybuffer.byteLength == 1) {\n"\
" flag = new Uint8Array(evt.data); // Start Flag\n"\
" if (flag == 0xAA) {\n"\
" //console.log('Start Block Flag received'); \n"\
" ln = 0; \n"\
" }\n"\
" if (flag == 0xFF) {\n"\
" //console.log('End Block Flag received'); \n"\
" //alert(\"Last Block\");\n"\
" }\n"\
"\n"\
" if (flag == 0x11) {\n"\
" //console.log('Camera IP Flag received'); \n"\
" //alert(\"Camera IP\");\n"\
" }\n"\
"\n"\
" } else {\n"\
"\n"\
" if (flag == 0x11) {\n"\
" //alert(\"Camera IP \" + evt.data);\n"\
" //console.log('Camera IP data: ' + evt.data); \n"\
" camera_ip = evt.data;\n"\
" document.getElementById(\"eth-ip\").innerText = camera_ip;\n"\
" flag = 0; \n"\
" } else {\n"\
" var bytearray = new Uint8Array(evt.data);\n"\
" //console.log('Camera Data len received: ' + arraybuffer.byteLength); \n"\
" display(bytearray, arraybuffer.byteLength, flag);\n"\
" }\n"\
" }\n"\
"\n"\
" }; //ws.onmessage\n"\
" \n"\
" // close websocket\n"\
" ws.onclose = function() { \n"\
" document.getElementById(\"canvasSpresenseCam\").style.visibility = \"hidden\";\n"\
" document.getElementById(\"connecting\").style.visibility = \"visible\";\n"\
" }; //ws.onclose\n"\
"\n"\
" // websocket error handling\n"\
" ws.onerror = function(evt) {\n"\
" document.getElementById(\"canvasSpresenseCam\").style.visibility = \"hidden\";\n"\
" document.getElementById(\"connecting\").style.visibility = \"visible\";\n"\
" document.getElementById(\"connecting\").innerText = \"Error \" + evt.data;\n"\
" document.getElementById(\"constatus\").innerText = \"\";\n"\
" };\n"\
" \n"\
" } else {\n"\
" // The browser doesn't support WebSocket\n"\
" alert(\"WebSocket NOT supported by your Browser!\");\n"\
" }\n"\
" } // WebSocketCamera\n"\
"\n"\
"\n"\
"function onloadinit() {\n"\
" camera_ip = location.hostname;\n"\
" //alert(camera_ip);\n"\
" init();\n"\
"}\n"\
"function init() {\n"\
" document.getElementById(\"canvasSpresenseCam\").style.visibility = \"hidden\";\n"\
" document.getElementById(\"connecting\").style.visibility = \"visible\";\n"\
" initCanvas();\n"\
" initWebSocket(); \n"\
"}\n"\
"\n"\
"function initCanvas() {\n"\
" canvas = document.getElementById(\"canvas-Q-VGA\");\n"\
" ctx = canvas.getContext(\"2d\");\n"\
" ctx.font = \"10px Comic Sans MS\";\n"\
" ctx.fillStyle = \"#FF0000\";\n"\
" ctx.textAlign = \"center\";\n"\
" ctx.fillText(\"320 x 240\", canvas.width/2, canvas.height/2); \n"\
"\n"\
"}\n"\
"\n"\
"function display(pixels, pixelcount, flag) {\n"\
" //alert('display'); \n"\
" //console.log('display'); \n"\
" //console.log('yres: ' + yres); \n"\
" //console.log('xres: ' + xres); \n"\
" var i = 0;\n"\
" for(y=0; y < yres; y++) {\n"\
" for(x=0; x < xres; x++)\n"\
" { \n"\
" i = (y * xres + x) << 1;\n"\
" pixel16 = (0xffff & pixels[i]) | ((0xffff & pixels[i+1]) << 8);\n"\
" imgData.data[ln+0] = ((((pixel16 >> 11) & 0x1F) * 527) + 23) >> 6;\n"\
" imgData.data[ln+1] = ((((pixel16 >> 5) & 0x3F) * 259) + 33) >> 6;\n"\
" imgData.data[ln+2] = (((pixel16 & 0x1F) * 527) + 23) >> 6; \n"\
" imgData.data[ln+3] = (0xFFFFFFFF) & 255;\n"\
" ln += 4;\n"\
" }\n"\
" }\n"\
" \n"\
" if (flag == 0xFF) { // last block\n"\
" ln = 0; \n"\
" //console.log('next-frame'); \n"\
" ctx.putImageData(imgData,0,0);\n"\
" //if(frames){ \n"\
" //console.log('next-frame'); \n"\
" //frames--; \n"\
" //ws.send(\"next-frame\"); \n"\
" //} \n"\
" ws.send(\"next-frame\"); \n"\
" }\n"\
" \n"\
" }\n"\
"\n"\
"function reset()\n"\
"{\n"\
" r = 0;\n"\
" capturecount = 1;\n"\
" ln = 0;\n"\
" flag = 0;\n"\
" xres = 0;\n"\
" yres = 0;\n"\
" //gcanvasid = \"\"; \n"\
" initCanvas();\n"\
"}\n"\
"\n"\
"function setip(whichip) {\n"\
" if (gcanvasid != null && gcanvasid != \"\") { \n"\
" camera_ip = document.getElementById(whichip).innerText;\n"\
" init();\n"\
" initCanvas();\n"\
" capture(gcanvasid);\n"\
" }\n"\
"}\n"\
"\n"\
"function capture(canvasid)\n"\
"{\n"\
" if (ws.readyState != 1) {\n"\
" // alert(\"ws.readyState \" + ws.readyState); \n"\
" return; \n"\
" }\n"\
" \n"\
" reset(); \n"\
" gcanvasid = canvasid; \n"\
" canvas = document.getElementById(canvasid);\n"\
" ctx = canvas.getContext('2d');\n"\
" if (canvasid.indexOf(\"canvas-Q-VGA\", 0) != -1) {\n"\
" xres = 320;\n"\
" yres = 120;\n"\
" } else {\n"\
" return;\n"\
" }\n"\
" \n"\
" imgData = ctx.createImageData(canvas.width, canvas.height);\n"\
" for (var i=0;i<imgData.data.length;i+=4)\n"\
" {\n"\
" imgData.data[i+0]=0xCC;\n"\
" imgData.data[i+1]=0xCC;\n"\
" imgData.data[i+2]=0xCC;\n"\
" imgData.data[i+3]=255;\n"\
" }\n"\
" ctx.putImageData(imgData, canvas.width, canvas.height);\n"\
" ws.send(canvasid); \n"\
"}\n"\
"\n"\
"</script>\n"\
"\n"\
"<body onload=\"onloadinit()\">\n"\
"\n"\
"<div valign=center align=center style=\"\n"\
" display: inline-block;\n"\
" position: fixed;\n"\
" top: 0;\n"\
" bottom: 0;\n"\
" left: 0;\n"\
" right: 0;\n"\
" width: 200px;\n"\
" height: 100px;\n"\
" margin: auto;\n"\
" background-color: #FFFFFF;\" id=\"connecting\">Connecting Camera ...\n"\
"</div>\n"\
"\n"\
"<center> <h1> Spresense Websocket Video Camera </h1> </center>\n"\
"\n"\
"\n"\
"<table align=center valign=center id=\"canvasSpresenseCam\">\n"\
" <tr> \n"\
" <td valign=\"bottom\">\n"\
"<canvas id=\"canvas-Q-VGA\" width=\"320\" height=\"240\" style=\"cursor:crosshair;border:1px solid #0000FF;\" onclick=\"capture('canvas-Q-VGA')\">\n"\
"Your browser does not support the HTML5 canvas tag.\n"\
"</canvas>\n"\
" </td>\n"\
" </tr>\n"\
"\n"\
" <tr> \n"\
" <td align=center>\n"\
" Q-VGA <BR>\n"\
" </td>\n"\
" \n"\
" </tr>\n"\
"\n"\
"\n"\
"</table>\n"\
"<BR><BR>\n"\
"<table width=30% align=center bgcolor=\"#FFFF00\" >\n"\
" <tr align=center style=\"color: #fff; background: black;\"> \n"\
" <td id=\"constatus\" colspan=2>Websocket not connected</td> \n"\
" </tr>\n"\
"\n"\
" <tr align=center style=\"color: #fff; background: black;\"> \n"\
" <td>Ethernet IP</td> \n"\
" </tr>\n"\
"\n"\
" <tr align=center bgcolor=\"#FFF\"> \n"\
" <td id=\"eth-ip\" style=\"cursor:pointer\" onclick=\"setip('eth-ip')\"></td> \n"\
" </tr>\n"\
" \n"\
"</table> \n"\
"\n"\
"\n"\
"</body>\n"\
"</html>\n"\
"\n";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment