News:

To visit MidNite Solar click this link www.midnitesolar.com

Main Menu

HTML/JS web pages

Started by dgd, July 06, 2016, 07:06:15 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

dgd

July 06, 2016, 07:06:15 PM
Below are some of the html5 web pages I use with BBB, Arduino and W10 programs that extract running data from Classic controller(s). Not too useful on their own but will make sense when the BBB programs and W10 data extractor are posted later.

dgd

Code Select

<!DOCTYPE html>
<! Web page using Highcharts mixed bar/spline zoom chart to display running data from MNidnite Classic controller
   Data is from an XML file created by BBB program clogger that extracts modbus register values from Classic via enet or rs232
   Also runs from W10 clreg.exe that makes XML file with PC wired to Classic USB port reading register dump
>
<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<script>

var controller;
var gdate = [];
var volts = [];
var amps = [];
var ahrm = [];
var involts = [];
var watts = [];

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: controller
        },
   
        xAxis: [{
            categories: gdate,
      //      crosshair: true,
            title: {
                text: 'Time'
            }
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value} A',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            title: {
                text: 'Amps',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            opposite: true
        }, { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Energy KwHrs',
                style: {
                    color: Highcharts.getOptions().colors[0]
                },
            },
             labels: {
                format: '{value} kwh',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }

        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Volts',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            labels: {
                format: '{value} V',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true

       }, { // 4th yAxis
            gridLineWidth: 0,
            title: {
                text: 'Watts',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            labels: {
                format: '{value} W',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            opposite: true       

        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 80,
            verticalAlign: 'top',
            y: 55,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFD0'
        },
        series: [{
            name: 'KwHrs',
            type: 'column',
            color: '#ffde34',
            yAxis: 1,
            data: ahrm,
            tooltip: {
                valueSuffix: ' kwhr'
            }

        }, {
            name: 'Input Volts',
            type: 'spline',
            yAxis: 2,
            data: involts,   
            color: 'blue',
            marker: {
                enabled: false
            },
            tooltip: {
                valueSuffix: ' V'
            }
        }, {
            name: 'Batt Volts',
            type: 'spline',
            yAxis: 2,
            data: volts,
            color: 'black',
            marker: {
                enabled: false
            },
             tooltip: {
                valueSuffix: ' V'
            }
        }, {
            name: 'Watts',
            type: 'spline',
            yAxis: 3,
            data: watts,
            color: 'red',
            marker: {
                enabled: false
            },
       
            tooltip: {
                valueSuffix: ' W'
            }

        }, {
            name: 'Amps Out',
            type: 'spline',
            data: amps,
            marker: {
                enabled: false
            },
            tooltip: {
                valueSuffix: ' A'
            },
            zones: [{
                value: 0,
                color: '#f7a35c'
            },  {
                color: '#90ed7d'
            }]
        }]
    });
});

 
</script>
</head>

<body>
<title>MN Classic Graph</title>

<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","CLlog.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("CLdata");

var clname = (x[0].getElementsByTagName("clname")[0].childNodes[0].nodeValue);
var clmodel = (x[0].getElementsByTagName("clmodel")[0].childNodes[0].nodeValue);
var clserno = (x[0].getElementsByTagName("clserno")[0].childNodes[0].nodeValue);

controller = ["Midnite Classic "+clmodel+' #'+clserno+""];

// scan through XML data records, starting at 1st, for hour and minute, high and low battery voltages, 0th record
// has Classic ID info so ignore it
// put data into arrays gdate[], volts[], amps[] and kwhr[] and pass to Hgraph
// Note XML data comes in reverse order (latest first to oldest last) as needed by Hgraph
// hence array stored in reverse to XML reading order

for (var i=1;i<x.length;i++)  // data starts at 1 as 0'th record is ID info
{
  var hrs =  (x[i].getElementsByTagName("HRS")[0].childNodes[0].nodeValue);
  var mins = (x[i].getElementsByTagName("MINS")[0].childNodes[0].nodeValue);
  if ( x[i].getElementsByTagName("MINS")[0].childNodes[0].nodeValue.length == 1)
      gdate[(x.length-i)-1] = [hrs+':0'+mins];
  else
      gdate[(x.length-i)-1] = [hrs+':'+mins];   
  var cv = (x[i].getElementsByTagName("INV")[0].childNodes[0].nodeValue);         
  involts[(x.length-i)-1] = [parseFloat(cv)];
  var bv = (x[i].getElementsByTagName("BATTV")[0].childNodes[0].nodeValue);         
  volts[(x.length-i)-1] = [parseFloat(bv)];
  var oa = (x[i].getElementsByTagName("OUTA")[0].childNodes[0].nodeValue);         
  amps[(x.length-i)-1] = [parseFloat(oa)];
  var kwh = (x[i].getElementsByTagName("KWH")[0].childNodes[0].nodeValue);     
  ahrm[(x.length-i)-1] = [parseFloat(kwh)];
  var cw = (x[i].getElementsByTagName("WATTS")[0].childNodes[0].nodeValue);     
  watts[(x.length-i)-1] = [parseInt(cw)];
// lots more XML file register values available but above will do for now
}  //for loop

</script>

<! now draw the HighChart >


<div id="container" style="height: 600px; min-width: 600px; border: 2px solid black" ></div>


</body>
</html>
Classic 250, 150,  20 140w, 6 250w PVs, 2Kw turbine, MN ac Clipper, Epanel/MNdc, Trace SW3024E (1997), Century 1050Ah 24V FLA (1999). Arduino power monitoring and web server.  Off grid since 4/2000
West Auckland, New Zealand

ClassicCrazy

#1
July 06, 2016, 10:08:14 PM
great  - can't wait for those other parts of the program
Larry
system 1
Classic 150 , 5s3p  Kyocera 135watt , 12s Soneil 2v 540amp lead crystal for 24v pack , Outback 3524 inverter
system 2
 5s 135w Kyocero , 3s3p 270w Kyocera  to Classic 150 ,   8s Kyocera 225w to Hawkes Bay Jakiper 48v 15kwh LiFePO4 , Outback VFX 3648 inverter
system 3
KID / Brat portable

dgd

#2
July 07, 2016, 10:38:07 PM Last Edit: July 07, 2016, 10:39:47 PM by dgd
Highchart produced by above html5/js script
A Classic with 750w pv on clouded over day mid winter in NZ, hence miserable figures...
Second has Input volts turned off so battery volt scale looks better
No WBjr on this Classic
dgd
Classic 250, 150,  20 140w, 6 250w PVs, 2Kw turbine, MN ac Clipper, Epanel/MNdc, Trace SW3024E (1997), Century 1050Ah 24V FLA (1999). Arduino power monitoring and web server.  Off grid since 4/2000
West Auckland, New Zealand

dgd

#3
July 11, 2016, 09:21:58 PM
Highchart examples with Classic+WBjr.
When the graph is displayed by a web server the zoom XY feature allows a highlighted section of the graph to be enlarged. The zoom reset returns to full graph. The top left 'display items' control box still allows data items to be excluded/included.
Although these examples use a ten minute log file for data (provided by BBB in XML format or via a CSV->XML converter program for MM data), the display of a 1 minute or smaller interval file really shows the zoom feature's usefulness
dgd
Classic 250, 150,  20 140w, 6 250w PVs, 2Kw turbine, MN ac Clipper, Epanel/MNdc, Trace SW3024E (1997), Century 1050Ah 24V FLA (1999). Arduino power monitoring and web server.  Off grid since 4/2000
West Auckland, New Zealand
Print
Go Up Pages1
User actions