The great thing about having Python code writing the HTML on every loop iteration is that anything on the page can be changed based on new conditions. The HTML becomes much more dynamic with a lot more capability. Basic items that are normally setup once in HTML and not changed like the gauge settings can now be changed on the fly. This morning a quick change was made to the code that changes the background of tick marks on the ammeter gauge from light blue to green if the charge current is over 0.5A. Later on more changes will be made to place colors into the tick mark area to denote maximum current and maximum voltage encountered for each solar day.

    if value>=0.5:
        ghpg += "{ from : 0,  to : 65, color : 'rgba(58, 226, 147, 0.8)' },\n" # light blue
    elif value<0.5:    
        ghpg += "{ from : 0,  to : 65, color : 'rgba(173, 196, 250, 0.8)' },\n" # light green

Gauge appearance when charge current is below 0.5A

Gauge appearance above 0.5A

Todays programming and debug task will be to add in live graphs of the battery voltage and current as it is actively captured. To enable straight forward coding a single CSV file will be generated for each day of captured data. To do this a new file name will need to be created for each day as performed by this code that is borrowed from the QuickCPM.py file:

def getFName(tagStr):
    fName = "logs/{:s}{:%Y%m%d}_{:s}.csv".format("LOG_",datetime.datetime.now(),tagStr)
    return fName

The main loop call to write the CSV will also have to check if the csv has not been created yet, and if not it will create the new file and add the header to the first line and so the code now looks like this:

    while True:

        Data_CSV_FileName = Path(getFName("TSMPPT"))
        if not Data_CSV_FileName.is_file():
            Data_for_CSV = "Battery Voltage,Charge Current, Total Amp Hours,Date Time\n"
            writeToFile(Data_CSV_FileName,Data_for_CSV,0,0)

        Data_for_CSV = readTSMPPTdata("tsmppt12400032")
        writeToFile(Data_CSV_FileName,Data_for_CSV,0,0)

The file name will look similar to this:

To perform graphing from the CSV files the code will need Plotly, Pandas, and Kaleido. All of these items were installed using PIP then these import statements are added to the code:

import plotly.offline                             
import plotly.graph_objs as go
import pandas as pd            

The first graph added in to the code will be for the battery voltage. This code will read the CSV file then create two files in the base directory, one interactive graph in an HTML file and the other as a static graph as a png image file:

    df = pd.read_csv(Data_CSV_FileName)

    data = [go.Scatter(
        x = df['Date Time'],
        y = df['Battery Voltage'],
    )]
    layout = go.Layout(title="TS-MPPT-60, Battery Voltage",
    #layout = go.Layout(
        xaxis=dict(
            title='Date/Time',    
        ),
        yaxis=dict(
            title='Volts',  
        )
    )
    fig = go.Figure(data=data, layout=layout)

    plotly.offline.plot(fig,filename='Voltage.html', auto_open=False, config={'displayModeBar': True})

    fig.write_image("voltage.png")

The PNG is what will be used later in the FTP to the server since it is fairly small in data size. This is what the generated png looks like with just a small amount of data in the CSV:

The Mad Scientist Hut. Now to add this to the HTML. First set the sizes of the graph:

Gauge_size          = 225
Graph_width         = 450
Graph_height        = 250

Then add into the def getGaugePage:

hpg += "<a href=\"voltage.png\">"
hpg += "<img src=\"voltage.png\" alt=\"battery voltage plot\" width=\"{0}\" height=\"{1}\" style=\"border:2px;margin:2px;float:left;\" >".format(Graph_width,Graph_height)
hpg += "</a>"

The web page now looks like this:

Time for a break, when I get back I will add the charge current graph…

Okay, the charge current plot is now added, time to figure out a good layout for this:

Playing around with the layout, still not happy with it yet:

Time to take another break from this and think about how the page layout should look.

Okay Layout is looking better, and cleaning up some errors in HTML.

This is a good point to stop for the day. Tomorrow the task will be to put a timer into the loop to fix it at 15 second intervals. Another task will be to setup peak current and voltage detection then add those to the display.