Subversion Repositories ESP32_P1_Meter

const timezone = new Date().getTimezoneOffset();

Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false,
        height: '80%'
    },

    title: {
        text: 'Energieverbruik'
    },

    pane: {
        startAngle: -90,
        endAngle: 89.9,
        background: null,
        center: ['50%', '75%'],
        size: '110%'
    },

    // the value axis
    yAxis: {
        min: -3680,
        max: 3680,
        tickPixelInterval: 72,
        tickPosition: 'inside',
        tickColor: 'var(--highcharts-background-color, #FFFFFF)',
        tickLength: 20,
        tickWidth: 2,
        minorTickInterval: null,
        labels: {
            distance: 20,
            style: {
                fontSize: '14px'
            }
        },
        lineWidth: 0,
        plotBands: [{
            from: -3680,
            to: 0,
            color: '#55BF3B', // green
            thickness: 20,
            borderRadius: '50%'
        }, {
            from: 0,
            to: 2000,
            color: '#DDDF0D', // yellow
            thickness: 20,
            borderRadius: '50%'
        }, {
            from: 2000,
            to: 3680,
            color: '#DF5353', // red
            thickness: 20,
            borderRadius: '50%'
        }]
    },

    series: [{
        name: 'Energieverbruik',
        data: [0],
        tooltip: {
            valueSuffix: ' Watt'
        },
        dataLabels: {
            format: '{y} Watt',
            borderWidth: 0,
            color: (
                Highcharts.defaultOptions.title &&
                Highcharts.defaultOptions.title.style &&
                Highcharts.defaultOptions.title.style.color
            ) || '#333333',
            style: {
                fontSize: '16px'
            }
        },
        dial: {
            radius: '80%',
            backgroundColor: 'gray',
            baseWidth: 12,
            baseLength: '0%',
            rearLength: '0%'
        },
        pivot: {
            backgroundColor: 'gray',
            radius: 6
        }

    }]

});

function addPoint(total) {
//  total = total / 1000
        Highcharts.charts[0].series[0].points[0].update(total);
//      chart.series[1].addPoint([timestamp, max]);
//      chart.series[0].addPoint(total);
}


// WebSocket handling
function ws_connect() {
  var ws = new WebSocket('ws://'+document.location.host+'/ws',['arduino']);
  ws.onopen = function() { ws.send('Connected - ' + new Date());};
  ws.onmessage = function(e) {
    parseMessage(e.data);
  };
  ws.onclose = function(e) {
      setTimeout(function() {
      ws_connect();
      }, 1000);
  };
  ws.onerror = function(err) {
      ws.close();
  };
}

function parseMessage(msg) {
        try {
                const obj = JSON.parse(msg);
                if (typeof obj === 'object' && obj !== null) {
                        // Add new point to chart message
                        if (obj.addPoint !== null) {
                        //    const chart = Highcharts.charts[0];

                          
                          // Updated the ESP timedate
                                //var date = new Date(obj.timestamp*1000);   
                                //document.getElementById("esp-time").innerHTML = date;
                                
                                // Add the new point
                                addPoint(obj.ACTUAL_SUMPOWER);
                        }
                }
        } catch {
                console.log('Error on parse message ' + msg);
        }
}

ws_connect();