<!DOCTYPE HTML> <html> <head> <script type="application/x-javascript"> <!-- var deg2rad = Math.PI / 180; var rad2deg = 180 / Math.PI; var pitch =70; var roll =20; var yaw = 200; var socket; function init() { if (window["WebSocket"]) { var host = "ws://localhost:56781/websocket/server"; //host = "ws://173.203.100.4:8002/"; try{ socket = new WebSocket(host); //log('WebSocket - status '+socket.readyState); socket.onopen = function(msg){ socket.send("onopen"); alert("Welcome - status "+this.readyState); }; socket.onmessage = function(msg){ var b1 = msg.data.indexOf(",",0); var b2 = msg.data.indexOf(",",b1+1); roll = parseFloat( msg.data.substr(0,b1)); pitch = parseFloat( msg.data.substr(b1+1,b2 - b1)); yaw = parseFloat( msg.data.substr(b2+1)); //alert("Received: "+msg.data); }; socket.onerror = function(msg){ alert("Error: "+msg.data); }; socket.onclose = function(msg){ alert("Disconnected - status "+this.readyState); }; } catch(ex){ alert(ex); } } else { alert("This browser doesnt support websockets"); } draw(); } function draw() { setTimeout ( "draw()", 100 ); //pitch -= 1.2; //roll += .75; //if (pitch < -90) //pitch = 90; //if (roll > 180) //roll = -180; var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.save(); ctx.translate(canvas.width/2,canvas.height/2); ctx.rotate(-roll * deg2rad); var font = "Arial"; var fontsize = canvas.height/30; var fontoffset = fontsize - 10; var halfwidth = canvas.width/2; var halfheight = canvas.height/2; var every5deg = -canvas.height / 60; var pitchoffset = -pitch * every5deg; var x = Math.sin(-roll * deg2rad); var y = Math.cos(-roll * deg2rad); gradObj = ctx.createLinearGradient(0,-halfheight * 2 ,0, halfheight *2); gradObj.addColorStop(0.0, "Blue"); var offset = 0.5 + pitchoffset / canvas.height / 2 ; if (offset < 0) { offset = 0; } if (offset > 1) { offset = 1; } gradObj.addColorStop(offset, "LightBlue"); gradObj.addColorStop(offset, "#9bb824"); gradObj.addColorStop(1.0, "#414f07"); ctx.fillStyle = gradObj; ctx.rect(-halfwidth * 2, -halfheight *2, halfwidth * 4, halfheight * 4); ctx.fill(); var lengthshort = canvas.width / 12; var lengthlong = canvas.width / 8; for (var a = -90; a <= 90; a += 5) { // limit to 40 degrees if (a >= pitch - 34 && a <= pitch + 25) { if (a % 10 == 0) { if (a == 0) { DrawLine(ctx,"White",4, canvas.width / 2 - lengthlong - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthlong - halfwidth, pitchoffset + a * every5deg); } else { DrawLine(ctx,"White",4, canvas.width / 2 - lengthlong - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthlong - halfwidth, pitchoffset + a * every5deg); } drawstring(ctx, a, font, fontsize + 2, "White", canvas.width / 2 - lengthlong - 30 - halfwidth - (fontoffset * 1.7), pitchoffset + a * every5deg - 8 - fontoffset); } else { DrawLine(ctx,"White",4, canvas.width / 2 - lengthshort - halfwidth, pitchoffset + a * every5deg, canvas.width / 2 + lengthshort - halfwidth, pitchoffset + a * every5deg); } } } ctx.translate(0,canvas.height/14); lengthlong = canvas.height / 66; var extra = canvas.height / 15 * 7; var pointlist = new Array(); pointlist[0] = 0; pointlist[1] = -lengthlong * 2 - extra; pointlist[2] = -lengthlong; pointlist[3] = -lengthlong - extra; pointlist[4] = lengthlong; pointlist[5] = -lengthlong - extra; DrawPolygon(ctx,"RED",4,pointlist) for (var a = -45; a <= 45; a += 15) { ctx.restore(); ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2 + canvas.height/14); ctx.rotate(a * deg2rad); drawstring(ctx, a, font, fontsize, "White", 0 - 6 - fontoffset, -lengthlong * 2 - extra); DrawLine(ctx,"White",4, 0, -halfheight, 0, -halfheight - 10); } ctx.restore(); ctx.save(); DrawEllipse(ctx,"red",4,halfwidth - 10, halfheight - 10, 20, 20); DrawLine(ctx,"red",4, halfwidth - 10 - 10, halfheight, halfwidth - 10, halfheight); DrawLine(ctx,"red",4, halfwidth - 10 + 20, halfheight, halfwidth - 10 + 20 + 10, halfheight); DrawLine(ctx,"red",4, halfwidth - 10 + 20 / 2, halfheight - 10, halfwidth - 10 + 20 / 2, halfheight - 10 - 10); //DrawLine(ctx,"GREEN",4,-halfwidth,0,halfwidth,0); } try { //socket.send("test "+pitch+"\n"); } catch (ex){ }// alert(ex); } } function DrawEllipse(ctx,color,linewidth,x1,y1,width,height) { ctx.lineWidth = linewidth; ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(x1 + width / 2,y1 + height); var x, y; for (var i = 0; i <= 360; i += 1) { x = Math.sin(i * deg2rad) * width / 2; y = Math.cos(i * deg2rad) * height / 2; x = x + x1 + width / 2; y = y + y1 + height / 2; ctx.lineTo(x,y); } //ctx.moveTo(x1,y1); ctx.stroke(); ctx.closePath(); } function DrawLine(ctx,color,width,x1,y1,x2,y2) { ctx.lineWidth = width; ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); ctx.closePath(); } function DrawPolygon(ctx,color,width,list) { ctx.lineWidth = width; ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(list[0],list[1]); for ( var i=2, len=list.length; i<len; i+=2 ){ ctx.lineTo(list[i],list[i+1]); } ctx.lineTo(list[0],list[1]); ctx.stroke(); ctx.closePath(); } function drawstring(ctx,string,font,fontsize,color,x,y) { ctx.font = fontsize + "pt "+font; ctx.fillStyle = color; ctx.fillText(string,x,y + fontsize); } --> </script> </head> <body onload="init();"> <canvas id="canvas" width="640" height="480"> <p>This example requires a browser that supports the <a href="http://www.w3.org/html/wg/html5/">HTML5</a> <canvas> feature.</p> </canvas> </body> </html>