Commit 94bcab70bf8cf52e365d2c81497d320e31df654f - sousvide

Add heating indicator Will Haldean Brown 6 years ago

4 changed file(s) with 55 addition(s) and 23 deletion(s). Raw diff Collapse all Expand all

+42

-16

static/chart.js less more

5	5	var n = 30 * 60 / drop;
6	6	var data = new Array(n);
7	7	var target = new Array(n);
	8	var heating = new Array(n);
	9
	10	var HEAT_HEIGHT = 5;
8	11
9	12	for (var i = 0; i < n; i++) {
10		data[i] = 0
11		target[i] = 50
	13	data[i] = 0;
	14	target[i] = 0;
	15	heating[i] = 0;
12	16	}
13	17
14		var width, height, x, y
15
	18	var width, height, x, y;
	19
16	20	var line = d3.svg.line()
17	21	.interpolate("basis")
18	22	.x(function(d, i) { return x(i); })
19	23	.y(function(d, i) { return y(d); });
20
21		var svg, path, targetpath
	24
	25	var svg, path, targetpath, heatingpath;
22	26
23	27	function initChart() {
24	28	width = window.innerWidth;
25	29	height = window.innerHeight;
26
	30
27	31	x = d3.scale.linear()
28	32	.domain([0, n - 1])
29	33	.range([0, width]);
30
	34
31	35	y = d3.scale.linear()
32	36	.domain([0, 100])
33	37	.range([height, 0]);

36	40	.attr("width", width)
37	41	.attr("height", height)
38	42	.append("g");
39
	43
40	44	targetpath = svg.append("g")
41	45	.append("path")
42	46	.datum(target)
43	47	.attr("class", "targetline")
	48	.attr("d", line);
	49
	50	heatingpath = svg.append("g")
	51	.append("path")
	52	.datum(heating)
	53	.attr("class", "heatingline")
44	54	.attr("d", line);
45	55
46	56	path = svg.append("g")

50	60	.attr("d", line);
51	61	}
52	62
53		function addTemps(temps) {
	63	function addTemps(temps, heatings) {
54	64	for (var i = 0; i < temps.length; i += drop) {
55		data.push(temps[i])
	65	data.push(temps[i]);
	66	heating.push(heatings[i] ? HEAT_HEIGHT : 0);
56	67	if (data.length > n) {
57	68	data.shift();
	69	heating.shift();
58	70	}
59	71	}
	72	heating[0] = 0;
	73	heating[n-1] = 0;
60	74	}
61
62		function pushTemp(temp) {
	75
	76	function pushTemp(temp, isheating) {
63	77	if (lowpass++ % drop) return
64	78
65	79	data.push(temp);
	80
	81	heating.pop();
	82	heating.push(isheating ? HEAT_HEIGHT : 0);
	83	heating.push(0);
	84
	85	heatingpath
	86	.attr("d", line)
	87	.attr("transform", null)
	88	.transition()
	89	.duration(1000)
	90	.ease("linear")
	91	.attr("transform", "translate(" + x(-1) + ",0)")
66	92	path
67	93	.attr("d", line)
68	94	.attr("transform", null)

70	96	.duration(1000)
71	97	.ease("linear")
72	98	.attr("transform", "translate(" + x(-1) + ",0)")
	99
73	100	data.shift();
	101	heating.shift();
	102	heating[0] = 0;
74	103	}
75	104
76	105	function setTarget(newT) {
77		if (target[0] == newT) {
78		return;
79		}
80	106	for (var i = 0; i < n; i++) {
81	107	target[i] = newT;
82	108	}

-0

static/main.css less more

187	187	}
188	188
189	189	.targetline {
	190	fill: none;
190	191	stroke: #FFF;
191	192	stroke-width: 5px;
192	193	shape-rendering: crispEdges;
	194	}
	195
	196	.heatingline {
	197	fill: #CCC;
193	198	}
194	199
195	200	/************** EDITOR ****************/

-7

static/temp.js less more

36	36	type: 'json',
37	37	success: function(resp) {
38	38	var temps = Array();
	39	var heating = Array();
39	40	for (var i = 0; i < resp.length; i++) {
40		temps.push(resp[i].Temp)
	41	temps.push(resp[i].Temp);
	42	heating.push(resp[i].Heating);
41	43	}
42		addTemps(temps)
	44	addTemps(temps, heating);
43	45
44		initChart()
	46	initChart();
45	47	window.onresize = function() {
46	48	console.log("window onresize");
47	49	document.getElementsByTagName("svg")[0].remove();
48	50	initChart();
49	51	reapplyTheme();
50	52	};
51		getApiData()
	53	getApiData();
52	54	}
53	55	})
54	56	}

73	75
74	76	setTarget(target);
75	77	if (temp != undefined) {
76		pushTemp(temp);
	78	pushTemp(temp, data.Heating);
77	79	}
78	80
79	81	$(tempElem).text(temp.toFixed(1));

85	87	}
86	88
87	89	if (data.Enabled && (lastEnabled == false \|\| lastEnabled == undefined)) {
88		console.log("dis -> en");
89	90	$(enableButton).removeClass('fg-primary');
90	91	$(disableButton).removeClass('fg-secondary');
91	92	$(enableButton).addClass('fg-secondary');
92	93	$(disableButton).addClass('fg-primary');
93	94	setOrange();
94	95	} else if (!data.Enabled && (lastEnabled == true \|\| lastEnabled == undefined)) {
95		console.log("en -> dis");
96	96	$(enableButton).removeClass('fg-secondary');
97	97	$(disableButton).removeClass('fg-primary');
98	98	$(enableButton).addClass('fg-primary');

-0

static/themes.js less more

16	16	d3.selectAll('.fg-secondary').transition().style('color', secondary)
17	17	d3.selectAll('.targetline').transition().style('stroke', secondary)
18	18	d3.selectAll('.line').transition().style('stroke', highlight)
	19	d3.selectAll('.heatingline').transition().style('fill', secondary)
19	20	}
20	21