Skip to content

I
IoTSmartMeter
Unverified Commit 896cbea8 authored by Kristian Tan's avatar Kristian Tan Committed by GitHub
Browse files
Options

Bar chart (#3) 

Added bar chart
parent 9126f245
Show whitespace changes
Inline Side-by-side
Showing with 104 additions and 67 deletions
app.py
View file @ 896cbea8
from flask import Flask, render_template, request
import RPi.GPIO as GPIO
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import asc, desc
import os
from datetime import datetime, date, timedelta
# from daily_usage import DailyUsage
......@@ -36,7 +36,8 @@ class DailyUsage(db.Model):
def get_todays_usage():
latest_entry = db.session.query(DailyUsage).order_by(DailyUsage.id.desc()).first()
latest_entry = DailyUsage.query.order_by(desc(DailyUsage.date)).first()
# latest_entry = db.session.query(DailyUsage).order_by(DailyUsage.date.asc()).first()
if latest_entry:
latest_entry_date = date(latest_entry.date.year, latest_entry.date.month, latest_entry.date.day)
if latest_entry_date == datetime.today().date():
......@@ -49,7 +50,7 @@ def get_todays_cost():
def create_entry(change_pin):
latest_entry = db.session.query(DailyUsage).order_by(DailyUsage.id.desc()).first()
latest_entry = DailyUsage.query.order_by(desc(DailyUsage.date)).first()
start_time = pins[change_pin]['on_time']
# Get the elapsed time and strip away milliseconds
elapsed = int((datetime.now() - start_time).total_seconds())
......@@ -93,35 +94,41 @@ for pin in pins:
GPIO.output(pin, GPIO.LOW)
labels = []
values = []
max = 0
# Create data for chart
count = 0
records = DailyUsage.query.order_by(asc(DailyUsage.date)).all()
for record in records:
labels.append(date(record.date.year, record.date.month, record.date.day))
values.append(record.kwhUsed)
if record.kwhUsed > max:
max = record.kwhUsed
count += 1
if count >= 7:
break
@app.route("/")
def main():
# For each pin, read the pin state and store it in the pins dictionary:
for pin in pins:
pins[pin]['state'] = GPIO.input(pin)
# Set the template data for the HTML template
template_data = {
'pins': pins,
'daily_total': daily_total,
'todays_cost': todays_cost,
'cost_per_kWh': os.environ['cost_per_kWh'],
'display_new_device_form': False,
'display_change_kWh': False
'display_change_kWh': False,
'labels': labels,
'values': values,
'max': max
}
labels = [
'JAN', 'FEB', 'MAR', 'APR',
'MAY', 'JUN', 'JUL', 'AUG',
'SEP', 'OCT', 'NOV', 'DEC'
]
values = [
967.67, 1190.89, 1079.75, 1349.19,
2328.91, 2504.28, 2873.83, 4764.87,
4349.29, 6458.30, 9907, 16297
]
return render_template('main.html', **template_data, labels=labels, values=values)
return render_template('main.html', **template_data)
@app.route("/toggle/<change_pin>")
......@@ -146,7 +153,10 @@ def toggle_pin(change_pin):
'pins': pins,
'daily_total': get_todays_usage(),
'todays_cost': get_todays_cost(),
'cost_per_kWh': os.environ['cost_per_kWh']
'cost_per_kWh': os.environ['cost_per_kWh'],
'labels': labels,
'values': values,
'max': max
}
return render_template('main.html', **template_data)
......@@ -160,7 +170,10 @@ def handle_change_kWh():
'pins': pins,
'daily_total': daily_total,
'todays_cost': todays_cost,
'cost_per_kWh': os.environ['cost_per_kWh']
'cost_per_kWh': os.environ['cost_per_kWh'],
'labels': labels,
'values': values,
'max': max
}
return render_template('main.html', **template_data)
......@@ -172,7 +185,10 @@ def add_new_device():
'daily_total': daily_total,
'todays_cost': todays_cost,
'cost_per_kWh': os.environ['cost_per_kWh'],
'display_new_device_form': True
'display_new_device_form': True,
'labels': labels,
'values': values,
'max': max
}
return render_template('main.html', **template_data)
......@@ -192,6 +208,9 @@ def handle_new_device():
'daily_total': daily_total,
'todays_cost': todays_cost,
'cost_per_kWh': os.environ['cost_per_kWh'],
'labels': labels,
'values': values,
'max': max
}
return render_template('main.html', **template_data)
......@@ -210,6 +229,9 @@ def delete_pin(delete_pin):
'daily_total': daily_total,
'todays_cost': todays_cost,
'cost_per_kWh': os.environ['cost_per_kWh'],
'labels': labels,
'values': values,
'max': max
}
return render_template('main.html', **template_data)
......@@ -220,7 +242,10 @@ def change_kWh():
'daily_total': daily_total,
'todays_cost': todays_cost,
'cost_per_kWh': os.environ['cost_per_kWh'],
'display_change_kWh': True
'display_change_kWh': True,
'labels': labels,
'values': values,
'max': max
}
return render_template('main.html', **template_data)
......
static/css/main.css
View file @ 896cbea8
......@@ -53,4 +53,16 @@ body {
.smart_meter_info {
margin-left: 5%;
margin-bottom: 5%;
}
.chart {
width: 70%;
height: 50%;
margin-left: 25%;
}
.chart_title {
text-decoration: underline;
text-align: center;
}
\ No newline at end of file
templates/main.html
View file @ 896cbea8
......@@ -2,6 +2,7 @@
<head>
<title>Current Status</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
</head>
<div class="heading">
......@@ -45,30 +46,10 @@
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="inputs">
{% if display_change_kWh == True %}
<form action="{{ url_for('handle_change_kWh') }}" method="post">
Change cost per kWh: <input type="text" name="kWhprice" required>
<input type="submit">
</form>
{% endif %}
{% if display_new_device_form == True %}
<div class=".add_new_device_form">
<form action="{{ url_for('handle_new_device') }}" method="post">
New device name: <input type="text" name="new_device_name" required> <br>
New device wattage: <input type="number" name="new_device_wattage" required> <br>
<input type="submit">
</form>
</div>
{% endif %}
</div>
<canvas id="chart" width="600" height="400"></canvas>
{# <div class="chart">#}
<h3 class="chart_title">Last weeks usage</h3>
<canvas id="chart" class="chart" ></canvas>
<script>
// bar chart data
var barData = {
......@@ -91,8 +72,8 @@
}
// get bar chart canvas
var mychart = document.getElementById("chart").getContext("2d");
steps = 10
max = 17000
steps = 1
max = {{ max }}
// draw bar chart
new Chart(mychart).Bar(barData, {
scaleOverride: true,
......@@ -107,9 +88,28 @@
);
</script>
{# </div>#}
</div>
</div>
</div>
<div class="inputs">
{% if display_change_kWh == True %}
<form action="{{ url_for('handle_change_kWh') }}" method="post">
Change cost per kWh: <input type="text" name="kWhprice" required>
<input type="submit">
</form>
{% endif %}
</body>
{% if display_new_device_form == True %}
<div class=".add_new_device_form">
<form action="{{ url_for('handle_new_device') }}" method="post">
New device name: <input type="text" name="new_device_name" required> <br>
New device wattage: <input type="number" name="new_device_wattage" required> <br>
<input type="submit">
</form>
</div>
{% endif %}
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment