From 83e1d8a0e40d92d01387ec1ef045ae31dba0129d Mon Sep 17 00:00:00 2001
From: crinq <crinq@crinq.de>
Date: Thu, 27 Aug 2015 12:25:12 +0200
Subject: [PATCH] +pwm sim

---
 sim/pwm.html | 403 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 403 insertions(+)
 create mode 100644 sim/pwm.html
diff --git a/sim/pwm.html b/sim/pwm.html
new file mode 100644
index 00000000..b66da0fc
--- /dev/null
+++ b/sim/pwm.html
@@ -0,0 +1,403 @@
+<html>
+<meta charset="utf-8">
+<head><title>pwm</title>
+<script type="text/javascript">
+
+var isMouseDown = false;
+document.onmousedown = function() { isMouseDown = true  };
+document.onmouseup   = function() { isMouseDown = false };
+
+function round(x, a){
+	return(Math.round(x * a) / a)
+}
+
+function clamp(x, a){
+	return((-a < x) ? ((a < x) ? (a) : (x)) : (-a));
+}
+
+function svm(u, v, w, mode, center){
+	switch(mode){
+		case "std":
+		u += 0.5;
+		v += 0.5;
+		w += 0.5;
+		break;
+
+		case "svm":
+		var uv = v - u;
+		var vw = w - v;
+		var wu = u - w;
+
+		if(Math.abs(uv) > Math.abs(vw)){
+			if(Math.abs(uv) > Math.abs(wu)){ // uv
+				u = -uv / 2.0;
+				v = uv / 2.0;
+				w = v + vw;
+			}
+			else{ // wu
+				u = wu / 2.0;
+				w = -wu / 2.0;
+				v = u + uv;
+			}
+		}
+		else{
+			if(Math.abs(vw) > Math.abs(wu)){ // vw
+				v = -vw / 2.0;
+				w = vw / 2.0;
+				u = w + wu;
+			}
+			else{ // wu
+				u = wu / 2.0;
+				w = -wu / 2.0;
+				v = u + uv;
+			}
+		}
+
+		u += 0.5;
+		v += 0.5;
+		w += 0.5;
+		break;
+
+		case "flat bottom svm":
+		if(u < v){
+			if(u < w){
+				v -= u;
+				w -= u;
+				u = 0.0;
+			}
+			else{
+				u -= w;
+				v -= w;
+				w = 0.0;
+			}
+		}
+		else{
+			if(v < w){
+				u -= v;
+				w -= v;
+				v = 0.0;
+			}
+			else{
+				u -= w;
+				v -= w;
+				w = 0.0;
+			}
+		}
+	}
+
+	var radio = document.getElementById('df');
+	if(radio){
+		radio.innerHTML += "<br>PWM_U = " + round(u, 100) + "<br>PWM_V = " + round(v, 100) + "<br>PWM_W = " + round(w, 100);
+	}
+
+	// var canvas = document.getElementById('canvas_plot');
+	// if (canvas.getContext){
+	// 	var ctx = canvas.getContext('2d');
+	//
+	//
+	// 	ctx.save();
+	// 	ctx.translate(canvas.width / 2, canvas.height / 2);
+	//
+	// 	ctx.moveTo(0, 0);
+	// 	ctx.lineTo(Math.cos(0 / 3 * 2 * Math.PI) * (u - 0.5) * canvas.width, Math.sin(0 / 3 * 2 * Math.PI) * (u - 0.5) * canvas.height);
+	// 	ctx.moveTo(0, 0);
+	// 	ctx.lineTo(Math.cos(1 / 3 * 2 * Math.PI) * (v - 0.5) * canvas.width, Math.sin(1 / 3 * 2 * Math.PI) * (v - 0.5) * canvas.height);
+	// 	ctx.moveTo(0, 0);
+	// 	ctx.lineTo(Math.cos(2 / 3 * 2 * Math.PI) * (w - 0.5) * canvas.width, Math.sin(2 / 3 * 2 * Math.PI) * (w - 0.5) * canvas.height);
+	//
+	//
+	// 	ctx.stroke();
+	// 	ctx.restore();
+	// }
+
+	draw(u, v, w, center);
+}
+
+function draw_vec(x, y){
+	y *= -1;
+	var canvas = document.getElementById('canvas_plot');
+	if (canvas.getContext){
+		var ctx = canvas.getContext('2d');
+		var w = canvas.width;
+		var h = canvas.height;
+
+
+		//clear
+		ctx.clearRect(0, 0, w, h);
+		ctx.beginPath();
+
+		ctx.save();
+		ctx.translate(w / 2, h / 2);
+
+		// limit circle
+		ctx.arc(0, 0, h / 2, 0, 2 * Math.PI);
+		ctx.arc(0, 0, h / 2 * 2 / Math.sqrt(3), 0, 2 * Math.PI);
+
+		// labels
+		ctx.font = "12px serif";
+		ctx.fillText("A", w / 2 - 24, 4);
+		ctx.fillText("B", -4, 10 - h / 2);
+		//ctx.fillText("V", Math.cos(1 / 3 * 2 * Math.PI) * w / 2, Math.sin(120 / 180 * Math.PI) * h / 2);
+		//ctx.fillText("W", Math.cos(2 / 3 * 2 *Math.PI) * w / 2, Math.sin(240 / 180 * Math.PI) * h / 2 + 10);
+		//ctx.fillText("W", -4, 10 - h / 2);
+
+		// vector
+		// voltage
+		ctx.moveTo(0, 0);
+		ctx.lineTo(x * w, y * h);
+		// a, b
+		ctx.moveTo(0, 0);
+		ctx.lineTo(x * w, 0);
+		ctx.moveTo(0, 0);
+		ctx.lineTo(0, y * h);
+
+		ctx.stroke();
+		ctx.restore();
+	}
+}
+
+function draw(u, v, w, align) {
+	u = round(1-u, 250) * 250;
+	v = round(1-v, 250) * 250;
+	w = round(1-w, 250) * 250;
+
+
+	var canvas = document.getElementById('canvas');
+	if (canvas.getContext){
+		var ctx = canvas.getContext('2d');
+
+		//clear
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+		ctx.beginPath();
+
+		// axis
+		ctx.moveTo(15,0);
+		ctx.lineTo(15, 100);
+		ctx.lineTo(515, 100);
+
+		// labels
+		ctx.font = "12px serif";
+		ctx.fillText("U", 0, 30);
+		ctx.fillText("V", 0, 60);
+		ctx.fillText("W", 0, 90);
+
+		// UVW waves
+		switch(align){
+			case "center":
+			ctx.moveTo(15,35);
+			ctx.lineTo(u + 15, 35);
+			ctx.lineTo(u + 15, 25);
+			ctx.lineTo(515 - u, 25);
+			ctx.lineTo(515 - u, 35);
+			ctx.lineTo(515, 35);
+
+			ctx.moveTo(15,65);
+			ctx.lineTo(v + 15, 65);
+			ctx.lineTo(v + 15, 55);
+			ctx.lineTo(515 - v, 55);
+			ctx.lineTo(515 - v, 65);
+			ctx.lineTo(515, 65);
+
+			ctx.moveTo(15,95);
+			ctx.lineTo(w + 15, 95);
+			ctx.lineTo(w + 15, 85);
+			ctx.lineTo(515 - w, 85);
+			ctx.lineTo(515 - w, 95);
+			ctx.lineTo(515, 95);
+			break;
+
+			case "right":
+			ctx.moveTo(15,35);
+			ctx.lineTo(u + 15, 35);
+			ctx.lineTo(u + 15, 25);
+			ctx.lineTo(265, 25);
+			ctx.lineTo(265, 35);
+			ctx.lineTo(u + 265, 35);
+			ctx.lineTo(u + 265, 25);
+			ctx.lineTo(515, 25);
+
+			ctx.moveTo(15,65);
+			ctx.lineTo(v + 15, 65);
+			ctx.lineTo(v + 15, 55);
+			ctx.lineTo(265, 55);
+			ctx.lineTo(265, 65);
+			ctx.lineTo(v + 265, 65);
+			ctx.lineTo(v + 265, 55);
+			ctx.lineTo(515, 55);
+
+			ctx.moveTo(15,95);
+			ctx.lineTo(w + 15, 95);
+			ctx.lineTo(w + 15, 85);
+			ctx.lineTo(265, 85);
+			ctx.lineTo(265, 95);
+			ctx.lineTo(w + 265, 95);
+			ctx.lineTo(w + 265, 85);
+			ctx.lineTo(515, 85);
+			break;
+
+			case "left":
+			ctx.moveTo(15, 25);
+			ctx.lineTo(265 - u, 25);
+			ctx.lineTo(265 - u, 35);
+			ctx.lineTo(265, 35);
+			ctx.lineTo(265, 25);
+			ctx.lineTo(515 - u, 25);
+			ctx.lineTo(515 - u, 35);
+			ctx.lineTo(515, 35);
+
+			ctx.moveTo(15, 55);
+			ctx.lineTo(265 - v, 55);
+			ctx.lineTo(265 - v, 65);
+			ctx.lineTo(265, 65);
+			ctx.lineTo(265, 55);
+			ctx.lineTo(515 - v, 55);
+			ctx.lineTo(515 - v, 65);
+			ctx.lineTo(515, 65);
+
+			ctx.moveTo(15, 85);
+			ctx.lineTo(265 - w, 85);
+			ctx.lineTo(265 - w, 95);
+			ctx.lineTo(265, 95);
+			ctx.lineTo(265, 85);
+			ctx.lineTo(515 - w, 85);
+			ctx.lineTo(515 - w, 95);
+			ctx.lineTo(515, 95);
+		}
+
+		ctx.stroke();
+	}
+}
+
+function update(){
+	var mode = "std";
+	var align = "left";
+	var a = 0.0;
+	var b = 0.0;
+	var u = 0.0;
+	var v = 0.0;
+	var w = 0.0;
+
+	var radio = document.getElementById('radio_std');
+	if(radio){
+		if(radio.checked){
+			mode = "std";
+		}
+	}
+	radio = document.getElementById('radio_svm');
+	if(radio){
+		if(radio.checked){
+			mode = "svm";
+		}
+	}
+	radio = document.getElementById('radio_fbsvm');
+	if(radio){
+		if(radio.checked){
+			mode = "flat bottom svm";
+		}
+	}
+
+	radio = document.getElementById('radio_left');
+	if(radio){
+		if(radio.checked){
+			align = "left";
+		}
+	}
+
+	radio = document.getElementById('radio_right');
+	if(radio){
+		if(radio.checked){
+			align = "right";
+		}
+	}
+
+	radio = document.getElementById('radio_center');
+	if(radio){
+		if(radio.checked){
+			align = "center";
+		}
+	}
+
+	radio = document.getElementById('range_a');
+	if(radio){
+		a = radio.value;
+	}
+
+	radio = document.getElementById('range_b');
+	if(radio){
+		b = radio.value;
+	}
+
+	u = a * 1.0; // inverse clarke
+	v = - a / 2.0 + b / 2.0 * Math.sqrt(3);
+	w = - a / 2.0 - b / 2.0 * Math.sqrt(3);
+
+	u = clamp(u, 0.5);
+	v = clamp(v, 0.5);
+	w = clamp(w, 0.5);
+
+	radio = document.getElementById('df');
+	if(radio){
+		radio.innerHTML = "A = " + round(a, 100) + "<br>B = " + round(b, 100) + "<br>U = " + round(u, 100) + "<br>V = " + round(v, 100) + "<br>W = " + round(w, 100);
+	}
+
+
+	draw_vec(a, b);
+	svm(u, v, w, mode, align);
+
+}
+
+function set_ab(e){
+	if(isMouseDown){
+		var mouseX, mouseY;
+
+		if(e.offsetX) {
+			mouseX = e.offsetX;
+			mouseY = e.offsetY;
+		}
+		else if(e.layerX) {
+			mouseX = e.layerX;
+			mouseY = e.layerY;
+		}
+
+		var canvas = document.getElementById('canvas_plot');
+		if (canvas.getContext){
+			var radio = document.getElementById('range_a');
+			if(radio){
+				radio.value = (mouseX - canvas.width / 2) / canvas.width;
+			}
+
+			radio = document.getElementById('range_b');
+			if(radio){
+				radio.value = -(mouseY - canvas.height / 2) / canvas.height;
+			}
+		}
+		update();
+	}
+}
+
+</script>
+</head>
+<style type="text/css">
+input:button {width : 500px}
+</style>
+
+<body onload="update();">
+	<canvas id="canvas" width="550" height="100">
+		not supported
+	</canvas>
+	<canvas id="canvas_plot" width="200" height="200" onmousedown="isMouseDown = true; set_ab(event);" onmousemove="set_ab(event);">
+		not supported
+	</canvas><br>
+	<input type="radio" id="radio_std" name="mode" onclick="update();" checked="checked">std<br>
+	<input type="radio" id="radio_svm" name="mode" onclick="update();">SVM<br>
+	<input type="radio" id="radio_fbsvm" name="mode" onclick="update();">flat bottom SVM<br>
+	<input type="radio" id="radio_left" name="align" onclick="update();">left pwm<br>
+	<input type="radio" id="radio_right" name="align" onclick="update();">right pwm<br>
+	<input type="radio" id="radio_center" name="align" onclick="update();"" checked="checked">center pwm<br>
+	<input type="range" id="range_a" onchange="update();" oninput="update();" min="-0.5" max="0.5" step="0.01" value="0.0">A<br>
+	<input type="range" id="range_b" onchange="update();" oninput="update();" min="-0.5" max="0.5" step="0.01" value="0.0">B<br>
+	<a id="df"></a>
+
+</body>
+</html>
