I selected Flask - Micro Python Framework because I know Python the best and I am satisfied the support to display a simple and dynamic webpage.

One step at a time!!!

6.1 Flask App

First, install Flask framework:

pip3 install flask

I have both python2 and python3 so I have to specify Python3 and so pip3

Make a simple Flask App

from flask import Flask
app = Flask(__name__)
        
@app.route('/')
def hello():
    return 'Hello, World!'
@app.route('/light')
    return 'this page will display light data'

if __name__ == '__)main__':
    app.run(debug=True, port=5001)

If everything works, then you should see a small 'Hello, World' on the top-left conner. With localhost:5001/light the message this page will display light data should be visible. More example of using Flask app is from its website (including the example above).

6.2 Query data

class SqlReader:
    def getData(self, hours=24):
        hours = int(hours)
        conn = sqlite3.connect(dbFile)

        cursor = conn.cursor()
        # sql_command = """
        # SELECT * from  node3_post
        # ORDER BY time DESC        
        # LIMIT {};""".format(hours)
        
        sql_command = """SELECT * FROM node1_post 
        WHERE datetime(time, 'utc')  >= datetime('now','-0{} hours');""".format(hours) 
        df = pd.read_sql_query(sql_command, conn)
        df['time'] = pd.to_datetime(df['time'])
        df['LDR_AVG'] = df['LDR_AVG']*100/1024
        df['LDR_STD'] = 2*df['LDR_STD']*100/1024
        df['LDR_AVG'] = df['LDR_AVG'].round(1)
        df['LDR_STD'] = df['LDR_STD'].round(1)

        df['LUM_STD'] = 2*df['LUM_STD'].round(1)
        df['LUX_STD'] = 2*df['LUX_STD'].round(1)
        df['TEM_STD'] = 2*df['TEM_STD']
        df['HUM_STD'] = 2*df['HUM_STD']
        cursor.close()
        return df

This simple query returns a DataFrame with the last 24 hours and 6 columns of the average and standard deviation of the 3 measuring parameters.

6.3 Plotly for Chart

Install Python library first:

pip3 install plotly

The official webpage of Plotly has an extensive guide. Unfornately, the example is some sort of replacement of matlabplot library. Meanwhile, I need a structure to display on web, and the code below is actually an experiment myself.

For each parameter, the structure likes this:

@app.route('/light')
def light():
    sql = SqlReader()
    df = sql.getData()
    graphs = [
        dict(
            data=[
                dict(
                    x=df['time'],
                    y=df['LDR_AVG'],
                    type='scatter',
                    name='average',
                    line=dict(color='rgb(128,0,0)')
                ),
                dict(
                    name='+2σ',
                    mode='lines',
                    x=df['time'],
                    y=df['LDR_AVG']+df['LDR_STD'],
                        marker=dict(color='444'),
                    line=dict(width=0),
                ),
                dict(
                    name='-2σ',
                    x=df['time'],
                    y=df['LDR_AVG']-df['LDR_STD'],
                    mode='lines',
                    marker=dict(color='444'),
                    line=dict(width=0),
                    fillcolor='rgba(68, 68, 68, 0.25)',
                    fill='tonexty',
                ),
            ],
            layout=dict(
                title='Light Intensity (Analog Sensor)',
                height=600,
                titlefont=title_format,
                xaxis=dict(
                    title='Time',
                    titlefont=xy_format,
                    tickfont=tickfont,
                    ),
                yaxis=dict(
                    title='Percentage to the Maxium Measurable Value',
                    titlefont=xy_format,
                    tickfont=tickfont,
                )
            )
        ),
    ]
    ids = ['Graph {}'.format(i) for i, _ in enumerate(graphs)]
    graphJSON = json.dumps(graphs, cls=plotly.utils.PlotlyJSONEncoder)
    return render_template('chart.html',ids=ids,
                            graphJSON=graphJSON, title='Light')

I also like Plotly because the option to change the size, font, color of the axes. You probably noticed the customized format of x and y axises.

title_format = dict(
    family='Arial, sans-serif',
    size=20,
    color='navy')

xy_format = dict(
    family='Arial, sans-serif',
    size=18,
    color='black')

tickfont=dict(
    family='Arial, sans-serif',
    size=16,
    color='black') 

6.4 Put Things Together

Well, just download the entire folder and experiment with the code. My full verion has some other features but the framework is pretty like this app. I have a short video to demostrate the home weather as well.

That is about it. Thank you for spending your time to this end.