<!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> 
     &lt;canvas&gt; feature.</p>
   </canvas>
 </body>
</html>