Update the WASM example

Author: 38

examples/wasm-demo/src/lib.rs

@@ -45,8 +45,8 @@ impl Chart {
         })
     }
 
-    pub fn plot3d(canvas: HtmlCanvasElement, yaw: f64) -> Result<(), JsValue> {
-        plot3d::draw(canvas, yaw).map_err(|err| err.to_string())?;
+    pub fn plot3d(canvas: HtmlCanvasElement, pitch: f64, yaw: f64) -> Result<(), JsValue> {
+        plot3d::draw(canvas, pitch, yaw).map_err(|err| err.to_string())?;
         Ok(())
     }
 

examples/wasm-demo/src/plot3d.rs

@@ -3,7 +3,7 @@ use plotters::prelude::*;
 use plotters_canvas::CanvasBackend;
 use web_sys::HtmlCanvasElement;
 
-pub fn draw(canvas: HtmlCanvasElement, yaw: f64) -> DrawResult<()> {
+pub fn draw(canvas: HtmlCanvasElement, pitch: f64, yaw: f64) -> DrawResult<()> {
     let area = CanvasBackend::with_canvas_object(canvas)
         .unwrap()
         .into_drawing_area();
@@ -17,7 +17,8 @@ pub fn draw(canvas: HtmlCanvasElement, yaw: f64) -> DrawResult<()> {
 
     chart.with_projection(|mut pb| {
         pb.yaw = yaw;
-        pb.scale = 0.8;
+        pb.pitch = pitch;
+        pb.scale = 0.7;
         pb.into_matrix()
     });
 

examples/wasm-demo/www/index.html

@@ -15,17 +15,21 @@ <h1>Plotters WebAssembly Demo</h1>
         <canvas id="canvas" width="600" height="400"></canvas>
 	    <div id="status">Loading WebAssembly...</div>
 	    <div id="control">
-		<label for="plot-type">Demo: </label>
-		<select id="plot-type">
-		    <option value="0">Graph of y=1</option>
-		    <option value="1">Graph of y=x</option>
-		    <option value="2">Graph of y=x^2</option>
-		    <option value="3">Graph of y=x^3</option>
-		    <option value="4">Graph of y=x^4</option>
-		    <option value="5">Graph of y=x^5</option>
-		    <option value="mandelbrot">Mandelbrot Set</option>
-		    <option value="3d-plot">3D Plot Demo</option>
-		</select>
+			<label for="plot-type">Demo: </label>
+			<select id="plot-type">
+				<option value="0">Graph of y=1</option>
+				<option value="1">Graph of y=x</option>
+				<option value="2">Graph of y=x^2</option>
+				<option value="3">Graph of y=x^3</option>
+				<option value="4">Graph of y=x^4</option>
+				<option value="5">Graph of y=x^5</option>
+				<option value="mandelbrot">Mandelbrot Set</option>
+				<option value="3d-plot">3D Plot Demo</option>
+			</select>
+			<div id="3d-control" class="hide">
+				<label for="pitch">Pitch: </label> <input type="range" min="0" max="157" id="pitch" value="10"> <br/>
+				<label for="yaw">Yaw: </label> <input type="range" min="0" max="314" id="yaw" value="50">
+			</div>
 	    </div>
 	</main>
 	<footer>

examples/wasm-demo/www/index.js

@@ -5,12 +5,21 @@ class Chart {}
 const canvas = document.getElementById("canvas");
 const coord = document.getElementById("coord");
 const plotType = document.getElementById("plot-type");
+const pitch = document.getElementById("pitch");
+const yaw = document.getElementById("yaw");
+const control = document.getElementById("3d-control");
 const status = document.getElementById("status");
 
 let chart = null;
 
 /** Main entry point */
 export function main() {
+	let hash = location.hash.substr(1);
+	for(var i = 0; i < plotType.options.length; i++) {
+		if(hash == plotType.options[i].value) {
+			plotType.value = hash;
+		}
+	}
     setupUI();
     setupCanvas();
 }
@@ -24,6 +33,10 @@ export function setup(WasmChart) {
 function setupUI() {
     status.innerText = "WebAssembly loaded!";
     plotType.addEventListener("change", updatePlot);
+	yaw.addEventListener("change", updatePlot);
+	pitch.addEventListener("change", updatePlot);
+	yaw.addEventListener("input", updatePlot);
+	pitch.addEventListener("input", updatePlot);
     window.addEventListener("resize", setupCanvas);
     window.addEventListener("mousemove", onMouseMove);
 }
@@ -58,6 +71,13 @@ function onMouseMove(event) {
     }
 }
 
+function updatePlot3d() {
+	let yaw_value = Number(yaw.value) / 100.0;
+	let pitch_value = Number(pitch.value) / 100.0;
+	Chart.plot3d(canvas, pitch_value, yaw_value);
+	coord.innerText = `Pitch:${pitch_value}, Yaw:${yaw_value}`
+}
+
 /** Redraw currently selected plot. */
 function updatePlot() {
     const selected = plotType.selectedOptions[0];
@@ -66,24 +86,18 @@ function updatePlot() {
     const start = performance.now();
 	switch(selected.value) {
 		case "mandelbrot":
+			control.classList.add("hide");
 			chart = Chart.mandelbrot(canvas);
 			break;
-		case "3d-plot": {
-				var yaw = 0;
-				var update = function() {
-					if(plotType.selectedOptions[0].value != "3d-plot")
-						return;
-					Chart.plot3d(canvas, yaw);
-					yaw += 3.14 / 200;
-					setTimeout(update, 50);
-				};
-				update();
-			}
+		case "3d-plot": 
+			control.classList.remove("hide");
+			updatePlot3d();
 			break;
 		default:
-			Chart.power("canvas", Number(selected.value))
+			control.classList.add("hide");
+			chart = Chart.power("canvas", Number(selected.value))
 	}
-
+	
     const end = performance.now();
     status.innerText = `Rendered ${selected.innerText} in ${Math.ceil(end - start)}ms`;
 }

examples/wasm-demo/www/style.css

@@ -48,3 +48,8 @@ footer {
     font-size: 12px;
     text-align: center;
 }
+
+.hide {
+	visibility: hidden;
+	height: 0px;
+}