Subversion Repositories ESP32_P1_Meter

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
6 raymond 1 
const timezone = new Date().getTimezoneOffset();
2 
 
3 
Highcharts.chart('container', {
4 
 
5 
    chart: {
6 
        type: 'gauge',
7 
        plotBackgroundColor: null,
8 
        plotBackgroundImage: null,
9 
        plotBorderWidth: 0,
10 
        plotShadow: false,
11 
        height: '80%'
12 
    },
13 
 
14 
    title: {
15 
        text: 'Energieverbruik'
16 
    },
17 
 
18 
    pane: {
19 
        startAngle: -90,
20 
        endAngle: 89.9,
21 
        background: null,
22 
        center: ['50%', '75%'],
23 
        size: '110%'
24 
    },
25 
 
26 
    // the value axis
27 
    yAxis: {
28 
        min: -3680,
29 
        max: 3680,
30 
        tickPixelInterval: 72,
31 
        tickPosition: 'inside',
32 
        tickColor: 'var(--highcharts-background-color, #FFFFFF)',
33 
        tickLength: 20,
34 
        tickWidth: 2,
35 
        minorTickInterval: null,
36 
        labels: {
37 
            distance: 20,
38 
            style: {
39 
                fontSize: '14px'
40 
            }
41 
        },
42 
        lineWidth: 0,
43 
        plotBands: [{
44 
            from: -3680,
45 
            to: 0,
46 
            color: '#55BF3B', // green
47 
            thickness: 20,
48 
            borderRadius: '50%'
49 
        }, {
50 
            from: 0,
51 
            to: 2000,
52 
            color: '#DDDF0D', // yellow
53 
            thickness: 20,
54 
            borderRadius: '50%'
55 
        }, {
56 
            from: 2000,
57 
            to: 3680,
58 
            color: '#DF5353', // red
59 
            thickness: 20,
60 
            borderRadius: '50%'
61 
        }]
62 
    },
63 
 
64 
    series: [{
65 
        name: 'Energieverbruik',
66 
        data: [0],
67 
        tooltip: {
68 
            valueSuffix: ' Watt'
69 
        },
70 
        dataLabels: {
71 
            format: '{y} Watt',
72 
            borderWidth: 0,
73 
            color: (
74 
                Highcharts.defaultOptions.title &&
75 
                Highcharts.defaultOptions.title.style &&
76 
                Highcharts.defaultOptions.title.style.color
77 
            ) || '#333333',
78 
            style: {
79 
                fontSize: '16px'
80 
            }
81 
        },
82 
        dial: {
83 
            radius: '80%',
84 
            backgroundColor: 'gray',
85 
            baseWidth: 12,
86 
            baseLength: '0%',
87 
            rearLength: '0%'
88 
        },
89 
        pivot: {
90 
            backgroundColor: 'gray',
91 
            radius: 6
92 
        }
93 
 
94 
    }]
95 
 
96 
});
97 
 
98 
function addPoint(total) {
99 
//  total = total / 1000
100 
	Highcharts.charts[0].series[0].points[0].update(total);
101 
//	chart.series[1].addPoint([timestamp, max]);
102 
//	chart.series[0].addPoint(total);
103 
}
104 
 
105 
 
106 
// WebSocket handling
107 
function ws_connect() {
108 
  var ws = new WebSocket('ws://'+document.location.host+'/ws',['arduino']);
109 
  ws.onopen = function() { ws.send('Connected - ' + new Date());};
110 
  ws.onmessage = function(e) {
111 
    parseMessage(e.data);
112 
  };
113 
  ws.onclose = function(e) {
114 
      setTimeout(function() {
115 
      ws_connect();
116 
      }, 1000);
117 
  };
118 
  ws.onerror = function(err) {
119 
      ws.close();
120 
  };
121 
}
122 
 
123 
function parseMessage(msg) {
124 
	try {
125 
		const obj = JSON.parse(msg);
126 
		if (typeof obj === 'object' && obj !== null) {
127 
			// Add new point to chart message
128 
			if (obj.addPoint !== null) {
129 
			//    const chart = Highcharts.charts[0];
130 
 
131 
 
132 
			  // Updated the ESP timedate
133 
				//var date = new Date(obj.timestamp*1000);
134 
				//document.getElementById("esp-time").innerHTML = date;
135 
 
136 
				// Add the new point
137 
				addPoint(obj.ACTUAL_SUMPOWER);
138 
			}
139 
		}
140 
	} catch {
141 
		console.log('Error on parse message ' + msg);
142 
	}
143 
}
144 
 
145 
ws_connect();