<!DOCTYPE html>
<html lang="de">
	<head>
		<script type="text/javascript" src="/static/plotly-2.29.1.min.js" charset="utf-8"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<link rel="stylesheet" href="static/style.css">
	</head>
	<body>
		<div class="row">
			<div class="plot" id="plotly_pout"></div>
			<div class="plot" id="plotly_energy"></div>
			<div class="plot" id="plotly_pwm"></div>
		</div>
		<div class="row">
			<div class="plot" id="plotly_vin"></div>
			<div class="plot" id="plotly_vout"></div>
			<div class="plot" id="plotly_iout"></div>
		</div>

		<script type="text/javascript">
			/*********************************
			 * Plot setup                    *
			 *********************************/

			var plot_w = 400;
			var plot_h = 300;

			// vin plot
			var plot_data = [
				{
					domain: { x: [0, 1], y: [0, 1] },
					value: 6.2,
					number: {"suffix": "V"},
					title: { text: "Eingangsspannung" },
					type: "indicator",
					mode: "gauge+number",
					gauge: {
						axis: { range: [0, 10] },
						bar: { color: "blue" }
					},
				}
			];

			var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
			Plotly.newPlot('plotly_vin', plot_data, layout);

			var plot_data = [
				{
					domain: { x: [0, 1], y: [0, 1] },
					value: 10,
					number: {"suffix": "V"},
					title: { text: "Ausgangsspannung" },
					type: "indicator",
					mode: "gauge+number",
					gauge: {
						axis: { range: [0, 20] },
						bar: { color: "yellow" },
						threshold: {
							line: { color: "green", width: 4 },
							thickness: 0.75,
							value: 12.0
						},
						steps: [
							{ range: [0, 16], color: "white" },
							{ range: [16, 20], color: "#ff8080" }
						],
					},
				}
			];

			var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
			Plotly.newPlot('plotly_vout', plot_data, layout);

			var plot_data = [
				{
					domain: { x: [0, 1], y: [0, 1] },
					value: 5,
					number: {"suffix": "W"},
					title: { text: "Leistung" },
					type: "indicator",
					mode: "gauge+number",
					gauge: {
						axis: { range: [0, 30] },
						bar: { color: "orange" },
						steps: [
							{ range: [0, 20], color: "white" },
							{ range: [20, 30], color: "#ff8080" }
						],
					},
				}
			];

			var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
			Plotly.newPlot('plotly_pout', plot_data, layout);

			var plot_data = [
				{
					domain: { x: [0, 1], y: [0, 1] },
					value: 0.7,
					number: {"suffix": "A"},
					title: { text: "Ausgangsstrom" },
					type: "indicator",
					mode: "gauge+number",
					gauge: {
						axis: { range: [0, 2] },
						bar: { color: "blue" }
					},
				}
			];

			var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
			Plotly.newPlot('plotly_iout', plot_data, layout);

			var plot_data = [
				{
					domain: { x: [0, 1], y: [0, 1] },
					value: 0.7,
					number: {"suffix": "J"},
					title: { text: "Energie" },
					type: "indicator",
					mode: "number"
				}
			];

			var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
			Plotly.newPlot('plotly_energy', plot_data, layout);

			var plot_data = [
				{
					domain: { x: [0, 1], y: [0, 1] },
					value: 321,
					title: { text: "PWM" },
					type: "indicator",
					mode: "gauge+number",
					gauge: {
						axis: { range: [0, 486] },
						bar: { color: "black" }
					},
				}
			];

			var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
			Plotly.newPlot('plotly_pwm', plot_data, layout);

			/*********************************
			 * Websocket handling            *
			 *********************************/

			var ws = new WebSocket("ws://" + window.location.host + "/websocket");
			ws.onopen = function() {
				console.log("Websocket connected.");
			};
			ws.onmessage = function (evt) {
				data = JSON.parse(evt.data);

				if(data) {
					console.log("Data received:");
					console.log(data);

					Plotly.restyle('plotly_vin', 'value', [data.vin / 1e3]);       // millivolt
					Plotly.restyle('plotly_vout', 'value', [data.vout / 1e3]);     // millivolt
					Plotly.restyle('plotly_pout', 'value', [data.pout / 1e6]);     // microwatt
					Plotly.restyle('plotly_iout', 'value', [data.iout / 1000.0]);  // milliampere
					Plotly.restyle('plotly_energy', 'value', [data.energy]);       // Joule
					Plotly.restyle('plotly_pwm', 'value', [data.pwm]);             // counter
				} else {
					console.log("Received data, but no valid JSON:");
					console.log(evt.data);
				}
			};
		</script>
	</body>
</html>
