improve gps/ahrs page to use same colors for map and airplane as rest of WebUI

web/css/main.css

@@ -30,14 +30,6 @@
 	font-size: 18px;
 }
 
-.washout {
-	background-color: rgba(255, 255, 255, 0.65);
-	display: inline-block;
-	width: 100%;
-	text-align: center;
-	padding: 4px;
-}
-
 .section_invisible {
 	display: none;
 }
@@ -137,11 +129,13 @@
 	color: white;
 }
 
+.paperairplane_left,
 .traffic-style1 {
 	color: #000000;
 	background-color: cornflowerblue;
 }
 
+.paperairplane_right,
 .traffic-style2 {
 	color: #000000;
 	background-color: darkkhaki
@@ -159,8 +153,16 @@
 	color: blue;
 }
 
-.icon-yellow {
+.icon-white {
-	color: darkgoldenrod;
+	color: white;
+}
+
+.icon-black {
+	color: black;
+}
+
+.icon-red {
+	color: crimson;
 }
 
 .bar_container {

web/js/j3di-all.js

@@ -1541,116 +1541,10 @@ function loadShaderScript(ctx, script, typ) {
 
 
 
-//
+/* **********************************************************************************
-// makePaperAirplane
+** SAVE SOME SPACE BY COMMENTING OUT UNUSED makeAxis, makeBox, and makeSphere *******
-//
+********************************************************************************** */
-// Create a box with vertices, normals and texCoords. Create VBOs for each as well as the index array.
+/* BEGIN COMMENTING OUT makeAxis, makeBox, and makeSphere
-// Return an object with the following properties:
-//
-//  normalObject        WebGLBuffer object for normals
-//  texCoordObject      WebGLBuffer object for texCoords
-//  vertexObject        WebGLBuffer object for vertices
-//  indexObject         WebGLBuffer object for indices
-//  numIndices          The number of indices in the indexObject
-//
-function makePaperAirplane(ctx) {
-	var LENGTH = 1;
-	var WIDTH = 1;
-	var DEPTH = 0.33;
-	var SPREAD = 0.1;
-	var CENTERX = 0;
-	var CENTERY = 0;
-	var CENTERZ = 0.5;
-
-	// vertex coords array
-	var vertices = new Float32Array(
-          [CENTERX, CENTERY, -LENGTH-CENTERZ,
-		   -WIDTH, CENTERY, LENGTH-CENTERZ,
-		   -SPREAD, CENTERY, LENGTH-CENTERZ, // left wing
-
-		   CENTERX, CENTERY, -LENGTH-CENTERZ,
-		   CENTERX, -DEPTH, LENGTH-CENTERZ,
-		   -SPREAD, CENTERY, LENGTH-CENTERZ, // left center section
-
-		   CENTERX, CENTERY, -LENGTH-CENTERZ,
-		   CENTERX, -DEPTH, LENGTH-CENTERZ,
-		   SPREAD, CENTERY, LENGTH-CENTERZ, // right center section
-
-		   CENTERX, CENTERY, -LENGTH-CENTERZ,
-		   WIDTH, CENTERY, LENGTH-CENTERZ,
-		   SPREAD, CENTERY, LENGTH-CENTERZ] // right wing
-	);
-
-		// normal array
-	var normals = new Float32Array(
-        [0, 1, 0,
-         0, 1, 0,
-         0, 1, 0, // left wing actual perpendicular is up
-         1, 1, 0,
-         1, 1, 0,
-         1, 1, 0, // left center section estmated perpendicular is right
-         -1, 1, 0,
-         -1, 1, 0,
-         -1, 1, 0, // right center section estmated perpendicular is left
-         0, 1, 0,
-         0, 1, 0,
-         0, 1, 0] // right wing actual perpendicular is up
-	);
-
-
-	// index array
-	var indices = new Uint8Array(
-          [0, 1, 2, // left wing
-           3, 4, 5, // left center section
-           6, 7, 8, // right center section
-           9, 10, 11] // right wing
-	);
-
-	// Set up the array of colors for the cube's faces
-	// the tip of the paper aiplane is lighter and then a gradiant back to red for teh left and a green for the right
-	var colors = new Uint8Array(
-              [1, 0, 0, 1,
-               1, 0, 0, 1,
-               1, 0, 0, 1, // left wing
-			   1, 0, 0, 1,
-               1, 0, 0, 1,
-               1, 0, 0, 1, // left center section
-			   0, 1, 0, 1,
-               0, 1, 0, 1,
-               0, 1, 0, 1, // right center section
-			   0, 1, 0, 1,
-               0, 1, 0, 1,
-               0, 1, 0, 1] // right wing
-	);
-
-
-	var retval = {};
-
-	retval.normalObject = ctx.createBuffer();
-	ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
-	ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);
-
-	retval.vertexObject = ctx.createBuffer();
-	ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
-	ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
-
-	ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
-
-	retval.indexObject = ctx.createBuffer();
-	ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
-	ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
-	ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
-
-	// Set up the vertex buffer for the colors
-	retval.colorObject = gl.createBuffer();
-	gl.bindBuffer(gl.ARRAY_BUFFER, retval.colorObject);
-	gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
-
-	retval.numIndices = indices.length;
-
-	return retval;
-}
-
 
 //
 // makeAxis
@@ -1972,6 +1866,8 @@ function makeSphere(ctx, radius, lats, longs) {
 	return retval;
 }
 
+END COMMENTING OUT makeAxis, makeBox, and makeSphere */
+
 // Array of Objects curently loading
 var g_loadingObjects = [];
 

web/plates/gps-help.html

@@ -2,5 +2,6 @@
 	<p>The <strong>GPS / AHRS</strong> page provides a view on the current status of GPS data and AHRS orientation. The Satellite count is located on the <strong>Status</strong> page.</p>
 	<p>The <strong>GPS</strong> reports position with estimated accuracy, ground track, ground speed, and GPS derived altitude are displayed along with the location depicted on a world map.</p>
 	<p>The <strong>AHRS</strong> reports magnetic heading, pressure altitude, pitch and roll are displayed along with a graphical representation of movement.</p>
+	<p>The AHR graphical depiction is a 3-dimentional paper airplane which rotates about a heading with 000&deg; being off in the distance and 180&deg; being down in front. The airplane will pitch up/down and left/right based on the data from the AHRS. To aid with recognizing orientation, the <span class="paperairplane_left">left wing is blue</span> and the <span class="paperairplane_right">right wing is tan</span>.</p>
 	<p class="text-warning">NOTE: This page is for reference only and must not be used for flight operations.</p>
 </div>

web/plates/gps.html

@@ -8,7 +8,7 @@
 						<div class="map-container">
 							<div id="map_display" class="world-map" ng-attr-style="background-position:{{map_pos_x + 'px ' + map_pos_y + 'px'}}; width:{{map_width}}px; height:{{map_height}}px;">
 								<div class="mark-position" ng-style="{left: map_mark_x+'px', top: map_mark_y+'px'}">
-									<span class="fa fa-crosshairs icon-red"></span>
+									<span class="fa fa-crosshairs icon-white"></span>
 								</div>
 							</div>
 						</div>

web/plates/js/ahrs.js

@@ -19,16 +19,37 @@ ahrsRenderer.prototype = {
 			return;
 		this.gl = gl;
 
-		vertex_shader = 'uniform mat4 u_modelViewProjMatrix; uniform mat4 u_normalMatrix; uniform vec3 lightDir; attribute vec3 vNormal; attribute vec4 vColor; attribute vec4 vPosition; varying float v_Dot; varying vec4 v_Color; void main() { gl_Position = u_modelViewProjMatrix * vPosition; v_Color = vColor; vec4 transNormal = u_normalMatrix * vec4(vNormal, 1); v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); }';
+		vertex_shader = ' \
-		fragment_shader = 'precision mediump float; varying float v_Dot; varying vec4 v_Color; void main() { gl_FragColor = vec4(v_Color.xyz * v_Dot, v_Color.a * 0.95); }';
+uniform mat4 u_modelViewProjMatrix; \
+uniform mat4 u_normalMatrix; \
+uniform vec3 lightDir; \
+attribute vec3 vNormal; \
+attribute vec4 vColor; \
+attribute vec4 vPosition; \
+varying float v_Dot; \
+varying vec4 v_Color; \
+void main() { \
+	gl_Position = u_modelViewProjMatrix * vPosition; \
+	v_Color = vColor; \
+	vec4 transNormal = u_normalMatrix * vec4(vNormal, 1); \
+	v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); \
+}';
+		
+		color_shader = '\
+precision mediump float; \
+varying float v_Dot; \
+varying vec4 v_Color; \
+void main() { \
+	gl_FragColor = vec4(v_Color.xyz * v_Dot, v_Color.a); \
+}';
 
 		var vertexShader = loadShaderVertexScript(gl, vertex_shader);
-		var fragmentShader = loadShaderFragmentScript(gl, fragment_shader);
+		var colorShader = loadShaderFragmentScript(gl, color_shader);
 
 		var program = gl.createProgram();
 
 		gl.attachShader(program, vertexShader);
-		gl.attachShader(program, fragmentShader);
+		gl.attachShader(program, colorShader);
 
 		// Bind attributes
 		gl.bindAttribLocation(program, 0, "vNormal");
@@ -74,13 +95,13 @@ ahrsRenderer.prototype = {
 			return;
 
 		// Set up a uniform variable for the shaders
-		gl.uniform3f(gl.getUniformLocation(g.program, "lightDir"), 0, 1, -1);
+		gl.uniform3f(gl.getUniformLocation(g.program, "lightDir"), 0, 1, 1); // above and back
 
 		// Create a box. On return 'gl' contains a 'box' property with
 		// the BufferObjects containing the arrays for vertices,
 		// normals, texture coords, and indices.
 		// g.box = makeBox(gl);
-		g.box = makePaperAirplane(gl);
+		g.box = this.makePaperAirplane(gl);
 
 		// Create some matrices to use later and save their locations in the shaders
 		g.mvMatrix = new J3DIMatrix4();
@@ -90,18 +111,19 @@ ahrsRenderer.prototype = {
 			gl.getUniformLocation(g.program, "u_modelViewProjMatrix");
 		g.mvpMatrix = new J3DIMatrix4();
 
-		// Enable all of the vertex attribute arrays.
+		gl.enableVertexAttribArray(0); // lighting
-		gl.enableVertexAttribArray(0);
+		gl.enableVertexAttribArray(1); // color
-		gl.enableVertexAttribArray(1);
+		gl.enableVertexAttribArray(2); // vertices
-		gl.enableVertexAttribArray(2);
+
-		// Set up all the vertex attributes for vertices, normals and colors
 		gl.bindBuffer(gl.ARRAY_BUFFER, g.box.vertexObject);
 		gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
+
 		gl.bindBuffer(gl.ARRAY_BUFFER, g.box.normalObject);
 		gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
+		
 		gl.bindBuffer(gl.ARRAY_BUFFER, g.box.colorObject);
-		gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);
+		gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0); // was gl.UNSIGNED_BYTE
-
+		
 		// Bind the index array
 		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, g.box.indexObject);
 
@@ -149,9 +171,13 @@ ahrsRenderer.prototype = {
 		var FPS = 24; // we assume we can maintain a certain frame rate
 		var x_inc = ((x - this.pitch) / (FPS * t));
 		var y_inc = ((y - this.roll) / (FPS * t));
-		// let the animation wrap aroung gracefully
+		if ((z < this.heading) && (this.heading - z) > 180) {
-		if ((z < this.heading) && (this.heading - z) > 180)
+			// let the animation wrap aroung gracefully clockwise
 			z += 360;
+		} else if ((z > this.heading) && (z - this.heading) > 180) {
+			// let the animation wrap aroung gracefully counter clockwise
+			this.heading += 360;
+		}
 		var z_inc = ((z - this.heading) / (FPS * t));
 		var _this = this;
 		//console.log(z_inc);
@@ -203,5 +229,125 @@ ahrsRenderer.prototype = {
 
 		// Draw the object
 		gl.drawElements(gl.TRIANGLES, g.box.numIndices, gl.UNSIGNED_BYTE, 0);
+	},
+	
+	makePaperAirplane: function (ctx) {
+		// Return an object with the following properties:
+		//  normalObject        WebGLBuffer object for normals (for lighting)
+		//  vertexObject        WebGLBuffer object for vertices (actual 3d object)
+		//  indexObject         WebGLBuffer object for indices (index of triangles within object)
+		//  numIndices          The number of indices in the indexObject (number of triangles)
+
+		// constants to make it easy to adjust the proportions and axis of the object
+		var LENGTH = 1; 	var WIDTH = 1;		var DEPTH = 0.33;		var SPREAD = 0.1;
+		var CENTERX = 0;	var CENTERY = 0;	var CENTERZ = 0.5;
+
+		// vertex coords array
+		var vertices = new Float32Array([
+			CENTERX, CENTERY, -LENGTH-CENTERZ,
+			-WIDTH, CENTERY, LENGTH-CENTERZ,
+			-SPREAD, CENTERY, LENGTH-CENTERZ, // left wing
+
+		   	CENTERX, CENTERY, -LENGTH-CENTERZ,
+			CENTERX, -DEPTH, LENGTH-CENTERZ,
+			-SPREAD, CENTERY, LENGTH-CENTERZ, // left center section
+
+		   	CENTERX, CENTERY, -LENGTH-CENTERZ,
+			CENTERX, -DEPTH, LENGTH-CENTERZ,
+			SPREAD, CENTERY, LENGTH-CENTERZ, // right center section
+
+			CENTERX, CENTERY, -LENGTH-CENTERZ,
+			WIDTH, CENTERY, LENGTH-CENTERZ,
+			SPREAD, CENTERY, LENGTH-CENTERZ // right wing
+			]);
+
+		// normal array for light reflection and shading
+		var normals = new Float32Array([
+			0, 1, 0,
+         	0, 1, 0,
+         	0, 1, 0, // left wing actual perpendicular is up
+         	1, 1, 0,
+         	1, 1, 0,
+         	1, 1, 0, // left center section estmated perpendicular is right
+         	-1, 1, 0,
+         	-1, 1, 0,
+         	-1, 1, 0, // right center section estmated perpendicular is left
+         	0, 1, 0,
+         	0, 1, 0,
+         	0, 1, 0 // right wing actual perpendicular is up
+		]);
+
+
+		// index array
+		var indices = new Uint8Array([
+			0, 1, 2, // left wing
+           	3, 4, 5, // left center section
+           	6, 7, 8, // right center section
+           	9, 10, 11 // right wing
+		]);
+
+		// Set up the array of colors for the cube's faces
+		// the tip of the paper aiplane is lighter and then a gradiant back to red for teh left and a green for the right
+		var colors_rg = new Uint8Array([
+			1, 0, 0, 1,
+			1, 0, 0, 1,
+			1, 0, 0, 1, // left wing
+			   
+			1, 0, 0, 1,
+			1, 0, 0, 1,
+			1, 0, 0, 1, // left center section
+			   
+			0, 1, 0, 1,
+			0, 1, 0, 1,
+			0, 1, 0, 1, // right center section
+			   
+			0, 1, 0, 1,
+			0, 1, 0, 1,
+			0, 1, 0, 1 // right wing
+		]);
+
+		var colors_bt = new Float32Array([
+			.21, .31, .49, 1,
+			.21, .31, .49, 1,
+			.21, .31, .49, 1,
+
+			.21, .31, .49, 1,
+			.21, .31, .49, 1,
+			.21, .31, .49, 1,
+			   
+			.39, .38, .22, 1,
+			.39, .38, .22, 1,
+			.39, .38, .22, 1,
+
+			.39, .38, .22, 1,
+			.39, .38, .22, 1,
+			.39, .38, .22, 1
+		]);
+
+		var retval = {};
+
+		retval.vertexObject = ctx.createBuffer();
+		ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
+		ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
+
+		retval.normalObject = ctx.createBuffer();
+		ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
+		ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);
+
+		ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
+
+		retval.indexObject = ctx.createBuffer();
+		ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
+		ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
+		ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
+
+		// Set up the vertex buffer for the colors
+		retval.colorObject = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, retval.colorObject);
+		gl.bufferData(gl.ARRAY_BUFFER, colors_bt, gl.STATIC_DRAW);
+
+		retval.numIndices = indices.length;
+
+		return retval;
 	}
 }