Mathbox example added

htdocs/index.wrx

@@ -35,7 +35,7 @@
 			var waterfall_max_level_default=%[WATERFALL_MAX_LEVEL];
 		</script>
 		<script src="sdr.js"></script>
-		<script src="three.js"></script>
+		<script src="mathbox-bundle.min.js"></script>
 		<script src="openwebrx.js"></script>
 		<link rel="stylesheet" type="text/css" href="openwebrx.css" />
 		<meta charset="utf-8">
@@ -73,7 +73,7 @@
 			<div id="openwebrx-scale-container">
 				<canvas id="openwebrx-scale-canvas" width="0" height="0"></canvas>
 			</div>
-			<div id="openwebrx-three-container"> </div>
+			<div id="openwebrx-mathbox-container"> </div>
 			<div id="webrx-canvas-container">
 				<div id="openwebrx-phantom-canvas"></div>
 				<!-- add canvas here by javascript -->
@@ -107,6 +107,7 @@
 						<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutOneStep();" title="Zoom out one step"> <img src="gfx/openwebrx-zoom-out.png" /></div>
 						<div class="openwebrx-button openwebrx-square-button" onclick="zoomInTotal();"  title="Zoom in totally"><img src="gfx/openwebrx-zoom-in-total.png" /></div>
 						<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutTotal();" title="Zoom out totally"><img src="gfx/openwebrx-zoom-out-total.png" /></div>
+						<div class="openwebrx-button openwebrx-square-button" onclick="mathbox_toggle();" title="Zoom out totally"><img src="gfx/openwebrx-zoom-out-total.png" /></div>
 						<div id="openwebrx-smeter-db">0 dB</div>
 					</div>
 					<div class="openwebrx-panel-line">

htdocs/openwebrx.css

@@ -396,9 +396,9 @@ input[type=range]:focus::-ms-fill-upper
 	image-rendering: -webkit-optimize-contrast;
 }
 
-#openwebrx-three-container
+#openwebrx-mathbox-container
 {
-	overflow: scroll;
+	overflow: none;
 	display: none;
 }
 

htdocs/openwebrx.js

@@ -1085,31 +1085,17 @@ function zoom_calc()
 function resize_waterfall_container(check_init)
 {
 	if(check_init&&!waterfall_setup_done) return;
-	three_container.style.height=canvas_container.style.height=(window.innerHeight-e("webrx-top-container").clientHeight-e("openwebrx-scale-container").clientHeight).toString()+"px";
+	var numHeight;
-}
+	mathbox_container.style.height=canvas_container.style.height=(numHeight=window.innerHeight-e("webrx-top-container").clientHeight-e("openwebrx-scale-container").clientHeight).toString()+"px";
-
+	if(mathbox)
-function three_start()
 	{
-	var scene = new THREE.Scene();
+		//mathbox.three.camera.aspect = document.body.offsetWidth / numHeight;
-	var camera = new THREE.PerspectiveCamera( 75, three_container.clientWidth/three_container.clientHeight, 0.1, 1000 );
+  		//mathbox.three.camera.updateProjectionMatrix();
-	var renderer = new THREE.WebGLRenderer();
+		mathbox.three.renderer.setSize(document.body.offsetWidth, numHeight);
-	renderer.setSize( three_container.clientWidth, three_container.clientHeight );
+		console.log(document.body.offsetWidth, numHeight);
-	three_container.appendChild(renderer.domElement);
-	var geometry = new THREE.BoxGeometry( 1, 1, 1 );
-	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
-	var cube = new THREE.Mesh( geometry, material );
-	scene.add( cube );
-	camera.position.z = 5;
-	var render = function () {
-		console.log(render);
-		window.requestAnimationFrame( render );
-		cube.rotation.x += 0.1;
-		cube.rotation.y += 0.1;
-		renderer.render(scene, camera);
-	};
-	render();
 	}
 
+}
 
 audio_server_output_rate=11025;
 audio_client_resampling_factor=4;
@@ -1725,10 +1711,11 @@ function add_canvas()
 	canvases.push(new_canvas);
 }
 
+
 function init_canvas_container()
 {
 	canvas_container=e("webrx-canvas-container");
-	three_container=e("openwebrx-three-container");
+	mathbox_container=e("openwebrx-mathbox-container");
 	canvas_container.addEventListener("mouseout",canvas_container_mouseout, false);
 	//window.addEventListener("mouseout",window_mouseout,false);
 	//document.body.addEventListener("mouseup",body_mouseup,false);
@@ -1915,12 +1902,142 @@ function check_top_bar_congestion()
 
 }
 
+var MATHBOX_MODES =
+{
+	UNINITIALIZED: 0,
+	NONE: 1,
+	WATERFALL: 2,
+	CONSTELLATION: 3
+};
+var mathbox_mode = MATHBOX_MODES.UNINITIALIZED;
+var mathbox;
+var mathbox_element;
+
+function mathbox_init()
+{
+	mathbox = mathBox({
+      plugins: ['core', 'controls', 'cursor', 'stats'],
+      controls: { klass: THREE.OrbitControls },
+    });
+    three = mathbox.three;
+
+    three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);
+	mathbox_container.appendChild((mathbox_element=three.renderer.domElement));
+    view = mathbox
+    .set({
+      scale: 720,
+      focus: 3,
+    })
+    .camera({
+      proxy: true,
+      position: [2, 1, 3],
+    })
+    .cartesian({
+      range: [[0, 1], [0, 1], [0, 1]],
+      scale: [1, 2/3, 1],
+    });
+
+    view.axis({
+      axis: 1,
+      width: 3,
+    });
+    view.axis({
+      axis: 2,
+      width: 3,
+    });
+    view.axis({
+      axis: 3,
+      width: 3,
+    });
+
+    view.grid({
+      width: 2,
+      opacity: 0.5,
+      axes: [1, 2],
+      zOrder: 1,
+    });
+    view.grid({
+      width: 2,
+      opacity: 0.5,
+      axes: [2, 3],
+      zOrder: 1,
+    });
+    view.grid({
+      width: 2,
+      opacity: 0.5,
+      axes: [1, 3],
+      zOrder: 1,
+    });
+
+    var remap = function (v) { return Math.sqrt(.5 + .5 * v); };
+
+    var points = view.area({
+      expr: function (emit, x, z, i, j, t) {
+        var y = remap(Math.sin(x * 5 + t + Math.sin(z * 3.41 + x * 1.48)))
+              * remap(Math.sin(z * 5 + t + Math.cos(x * 3.22 + z)));
+        emit(x, y, z);
+      },
+      width:  32,
+      height: 32,
+      channels: 3,
+      axes: [1, 3],
+    });
+
+    var colors = view.area({
+      expr: function (emit, x, z, i, j, t) {
+        var y = remap(Math.sin(x * 5 + t + Math.sin(z * 3.41 + x * 1.48)))
+              * remap(Math.sin(z * 5 + t + Math.cos(x * 3.22 + z)));
+
+        var r = Math.sin(y * 4) + y * y * y;
+        var g = (.5 - .5 * Math.cos(y * 3) + y * y) * .85;
+        var b = y;
+
+        emit(r, g, b, 1.0);
+      },
+      width:  32,
+      height: 32,
+      channels: 4,
+      axes: [1, 3],
+    });
+
+    view.surface({
+      shaded: true,
+      points: '<<',
+      colors: '<',
+      color: 0xFFFFFF,
+    });
+
+    view.surface({
+      fill: false,
+      lineX: true,
+      lineY: true,
+      points: '<<',
+      colors: '<',
+      color: 0xFFFFFF,
+      width: 2,
+      blending: 'add',
+      opacity: .25,
+      zBias: 5,
+    });
+	mathbox_mode = MATHBOX_MODES.NONE;
+
+	//mathbox_element.style.width="100%";
+	//mathbox_element.style.height="100%";
+
+}
+
+function mathbox_toggle()
+{
+	mathbox_container.style.display="block";
+	if(mathbox_mode == MATHBOX_MODES.UNINITIALIZED) mathbox_init();
+	mathbox_mode = (mathbox_mode == MATHBOX_MODES.NONE) ? MATHBOX_MODES.WATERFALL : MATHBOX_MODES.NONE;
+}
+
 function openwebrx_resize()
 {
 	resize_canvases();
 	resize_waterfall_container(true);
 	resize_scale();
-	resize_three();
 	check_top_bar_congestion();
 }