git.haldean.org sousvide / 94bcab7
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
55 var n = 30 * 60 / drop;
66 var data = new Array(n);
77 var target = new Array(n);
8 var heating = new Array(n);
9
10 var HEAT_HEIGHT = 5;
811
912 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;
1216 }
1317
14 var width, height, x, y
15
18 var width, height, x, y;
19
1620 var line = d3.svg.line()
1721 .interpolate("basis")
1822 .x(function(d, i) { return x(i); })
1923 .y(function(d, i) { return y(d); });
20
21 var svg, path, targetpath
24
25 var svg, path, targetpath, heatingpath;
2226
2327 function initChart() {
2428 width = window.innerWidth;
2529 height = window.innerHeight;
26
30
2731 x = d3.scale.linear()
2832 .domain([0, n - 1])
2933 .range([0, width]);
30
34
3135 y = d3.scale.linear()
3236 .domain([0, 100])
3337 .range([height, 0]);
3640 .attr("width", width)
3741 .attr("height", height)
3842 .append("g");
39
43
4044 targetpath = svg.append("g")
4145 .append("path")
4246 .datum(target)
4347 .attr("class", "targetline")
48 .attr("d", line);
49
50 heatingpath = svg.append("g")
51 .append("path")
52 .datum(heating)
53 .attr("class", "heatingline")
4454 .attr("d", line);
4555
4656 path = svg.append("g")
5060 .attr("d", line);
5161 }
5262
53 function addTemps(temps) {
63 function addTemps(temps, heatings) {
5464 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);
5667 if (data.length > n) {
5768 data.shift();
69 heating.shift();
5870 }
5971 }
72 heating[0] = 0;
73 heating[n-1] = 0;
6074 }
61
62 function pushTemp(temp) {
75
76 function pushTemp(temp, isheating) {
6377 if (lowpass++ % drop) return
6478
6579 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)")
6692 path
6793 .attr("d", line)
6894 .attr("transform", null)
7096 .duration(1000)
7197 .ease("linear")
7298 .attr("transform", "translate(" + x(-1) + ",0)")
99
73100 data.shift();
101 heating.shift();
102 heating[0] = 0;
74103 }
75104
76105 function setTarget(newT) {
77 if (target[0] == newT) {
78 return;
79 }
80106 for (var i = 0; i < n; i++) {
81107 target[i] = newT;
82108 }
187187 }
188188
189189 .targetline {
190 fill: none;
190191 stroke: #FFF;
191192 stroke-width: 5px;
192193 shape-rendering: crispEdges;
194 }
195
196 .heatingline {
197 fill: #CCC;
193198 }
194199
195200 /**************** EDITOR ******************/
3636 type: 'json',
3737 success: function(resp) {
3838 var temps = Array();
39 var heating = Array();
3940 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);
4143 }
42 addTemps(temps)
44 addTemps(temps, heating);
4345
44 initChart()
46 initChart();
4547 window.onresize = function() {
4648 console.log("window onresize");
4749 document.getElementsByTagName("svg")[0].remove();
4850 initChart();
4951 reapplyTheme();
5052 };
51 getApiData()
53 getApiData();
5254 }
5355 })
5456 }
7375
7476 setTarget(target);
7577 if (temp != undefined) {
76 pushTemp(temp);
78 pushTemp(temp, data.Heating);
7779 }
7880
7981 $(tempElem).text(temp.toFixed(1));
8587 }
8688
8789 if (data.Enabled && (lastEnabled == false || lastEnabled == undefined)) {
88 console.log("dis -> en");
8990 $(enableButton).removeClass('fg-primary');
9091 $(disableButton).removeClass('fg-secondary');
9192 $(enableButton).addClass('fg-secondary');
9293 $(disableButton).addClass('fg-primary');
9394 setOrange();
9495 } else if (!data.Enabled && (lastEnabled == true || lastEnabled == undefined)) {
95 console.log("en -> dis");
9696 $(enableButton).removeClass('fg-secondary');
9797 $(disableButton).removeClass('fg-primary');
9898 $(enableButton).addClass('fg-primary');
1616 d3.selectAll('.fg-secondary').transition().style('color', secondary)
1717 d3.selectAll('.targetline').transition().style('stroke', secondary)
1818 d3.selectAll('.line').transition().style('stroke', highlight)
19 d3.selectAll('.heatingline').transition().style('fill', secondary)
1920 }
2021