aboutsummaryrefslogtreecommitdiffstats
path: root/snag
diff options
context:
space:
mode:
Diffstat (limited to 'snag')
-rw-r--r--snag/__init__.py41
-rw-r--r--snag/dashboard.py26
-rw-r--r--snag/data.py116
-rw-r--r--snag/db.py41
-rw-r--r--snag/graphs.py315
-rw-r--r--snag/schema.sql46
-rw-r--r--snag/static/interactive.js64
-rw-r--r--snag/static/pagedown.css155
-rw-r--r--snag/static/style.css18
-rw-r--r--snag/templates/dashboard/dashboard.html43
-rw-r--r--snag/templates/interactive.html39
-rw-r--r--snag/templates/layout.html29
-rw-r--r--snag/templates/show_entries.html44
13 files changed, 977 insertions, 0 deletions
diff --git a/snag/__init__.py b/snag/__init__.py
new file mode 100644
index 0000000..c0b936f
--- /dev/null
+++ b/snag/__init__.py
@@ -0,0 +1,41 @@
+# snag
+# Matt Kohls
+# (c) 2023
+
+import os
+
+from flask import Flask
+
+def create_app(test_config=None):
+ # create and configure the app
+ app = Flask(__name__, instance_relative_config=True)
+ app.config.from_mapping(
+ SECRET_KEY='development_key',
+ DATABASE=os.path.join(app.instance_path, 'snag.sqlite'),
+ )
+
+ # probably not going to mess with test stuff but just in case
+ if test_config is None:
+ # load the instance config, if it exists, when not testing
+ app.config.from_pyfile('config.py', silent=True)
+ else:
+ # load the test config if passed in
+ app.config.from_mapping(test_config)
+
+ # ensure the instance folder exists
+ try:
+ os.makedirs(app.instance_path)
+ except OSError:
+ pass
+
+ from . import db
+ db.init_app(app)
+
+ from . import graphs, data, dashboard
+ app.register_blueprint(graphs.bp)
+ app.register_blueprint(data.bp)
+ app.register_blueprint(dashboard.bp)
+ app.add_url_rule('/', endpoint='dashboard')
+
+ return app
+
diff --git a/snag/dashboard.py b/snag/dashboard.py
new file mode 100644
index 0000000..7e77124
--- /dev/null
+++ b/snag/dashboard.py
@@ -0,0 +1,26 @@
+# snag
+# Matt Kohls
+# (c) 2023
+
+from flask import (
+ Blueprint, flash, g, redirect, render_template, request, url_for
+)
+from werkzeug.exceptions import abort
+from datetime import datetime
+from snag.db import get_db
+
+bp = Blueprint('dashboard', __name__)
+
+@bp.route('/')
+def dashboard():
+ db = get_db()
+
+ rows = db.execute(
+ 'SELECT de.deviceId, de.environment, d.deviceName'
+ ' FROM device_env de JOIN devices d ON de.deviceId = d.deviceId'
+ ' ORDER BY entry DESC'
+ ).fetchall()
+
+ deviceList = [dict(deviceId=row['deviceId'], location=row['environment'], name=row['deviceName']) for row in rows]
+ return render_template('dashboard/dashboard.html', deviceList=deviceList, generatedAt=datetime.now())
+
diff --git a/snag/data.py b/snag/data.py
new file mode 100644
index 0000000..3bf8df3
--- /dev/null
+++ b/snag/data.py
@@ -0,0 +1,116 @@
+# snag
+# Matt Kohls
+# (c) 2023
+
+from flask import (
+ Blueprint, flash, g, redirect, render_template, request, url_for, json
+)
+from werkzeug.exceptions import abort
+from datetime import datetime
+from snag.db import get_db
+
+bp = Blueprint('data', __name__, url_prefix='/data')
+
+# Process json data
+#
+# Expects something like this:
+# {
+# "scheme": "1",
+# "deviceId": 1,
+# "readings": [
+# {
+# "env": "outdoor",
+# "temp": 123
+# },
+# {
+# "env": "enclosed",
+# "temp": 456
+# }
+# ],
+# "status": [
+# {
+# "heater": "off",
+# "battery": 10
+# }
+# ]
+# }
+def unpack_json_scheme_1(req):
+ try:
+ deviceId = req['deviceId']
+ db = get_db()
+
+ # Status only has one object in it, and is optional
+ if 'status' in req:
+ if 'timeStamp' in req['status'][0]:
+ now = req['status'][0]['timeStamp']
+ else:
+ now = datetime.now()
+ battery = req['status'][0]['battery']
+ heater = req['status'][0]['heater']
+ db.execute('INSERT INTO device_status (date, deviceId, batteryCharge, heaterRunning) VALUES (?, ?, ?, ?)', [now, deviceId, battery, heater])
+
+ for environment in req['readings']:
+ env = environment['environment']
+ temp = environment['temperature']
+ humidity = environment['humidity']
+ pressure = environment['pressure']
+ now = environment['timeStamp']
+ if env == 'outdoor':
+ lux = environment['lux']
+ uv = environment['uv']
+ db.execute('INSERT INTO env_outdoor (date, deviceId, temperature, humidity, pressure, lux, uv_intensity) VALUES (?, ?, ?, ?, ?, ?, ?)', [now, deviceId, temp, humidity, pressure, lux, uv])
+ elif env == 'indoor':
+ db.execute('INSERT INTO env_indoor (date, deviceId, temperature, humidity, pressure) VALUES (?, ?, ?, ?, ?)', [now, deviceId, temp, humidity, pressure])
+ elif env == 'enclosed':
+ light = environment['light']
+ db.execute('INSERT INTO env_enclosed (date, deviceId, temperature, humidity, pressure, light) VALUES (?, ?, ?, ?, ?, ?)', [now, deviceId, temp, humidity, pressure, light])
+ else:
+ raise 'Bad reading environment'
+
+ db.commit()
+
+ except Exception as err:
+ print(err)
+ return "Bad JSON", 400
+
+ return "Data received", 200
+
+@bp.route('/json', methods=['POST'])
+def add_json_data():
+ if request.is_json:
+ req = request.get_json()
+ if 'scheme' in req:
+ if req['scheme'] == '1':
+ return unpack_json_scheme_1(req)
+ else:
+ abort(400, "Unknown scheme")
+ else:
+ abort(400, "Unknown JSON")
+
+ else:
+ abort(400, "Unknown payload type")
+
+@bp.route('/devices', methods=['GET'])
+def get_devices():
+ db = get_db()
+
+ out = []
+ devices = db.execute('SELECT * FROM devices ORDER BY deviceId').fetchall()
+ for device in devices:
+ envList = []
+ envs = db.execute('SELECT * FROM device_env WHERE deviceId = ?', [device['deviceId']]).fetchall()
+ for env in envs:
+ envDict = {
+ "environment" : env["environment"],
+ # "environmentDesc" : env["environmentDescription"]
+ }
+ envList.append(envDict)
+ deviceLine = {
+ "deviceId" : device["deviceId"],
+ "deviceName" : device["deviceName"],
+ "deviceDescription" : device["deviceLocation"]
+ }
+ deviceLine['environments'] = envList
+ out.append(deviceLine)
+ return out
+
diff --git a/snag/db.py b/snag/db.py
new file mode 100644
index 0000000..56e3306
--- /dev/null
+++ b/snag/db.py
@@ -0,0 +1,41 @@
+# snag
+# Matt Kohls
+# (c) 2023
+
+import sqlite3
+
+import click
+from flask import current_app, g
+
+def get_db():
+ if 'db' not in g:
+ g.db = sqlite3.connect(
+ current_app.config['DATABASE'],
+ detect_types=sqlite3.PARSE_DECLTYPES
+ )
+ g.db.row_factory = sqlite3.Row
+
+ return g.db
+
+def close_db(e=None):
+ db = g.pop('db', None)
+
+ if db is not None:
+ db.close()
+
+def init_db():
+ db = get_db()
+
+ with current_app.open_resource('schema.sql') as f:
+ db.executescript(f.read().decode('utf8'))
+
+@click.command('init-db')
+def init_db_command():
+ """Clear the existing data and create new tables."""
+ init_db()
+ click.echo('Initialized the database.')
+
+def init_app(app):
+ app.teardown_appcontext(close_db)
+ app.cli.add_command(init_db_command)
+
diff --git a/snag/graphs.py b/snag/graphs.py
new file mode 100644
index 0000000..2905d20
--- /dev/null
+++ b/snag/graphs.py
@@ -0,0 +1,315 @@
+# snag
+# Matt Kohls
+# (c) 2023
+
+import functools
+from flask import (
+ Blueprint, flash, g, redirect, render_template, request, session, url_for, Response
+)
+from werkzeug.exceptions import abort
+from datetime import datetime, timedelta
+from dateutil import parser
+from io import BytesIO
+from matplotlib.figure import Figure
+import matplotlib.dates as mdates
+from snag.db import get_db
+
+bp = Blueprint('graph', __name__, url_prefix='/graph')
+
+def get_table(env):
+ if env == 'outdoor':
+ return 'env_outdoor'
+ elif env == 'indoor':
+ return 'env_indoor'
+ elif env == 'enclosed':
+ return 'env_enclosed'
+ else:
+ return None
+
+def get_current(requestArgs, columns, table):
+ # start and end should be formatted YYYYMMDDHHMMSS
+ start = requestArgs.get('start')
+ end = requestArgs.get('end')
+ env = requestArgs.get('type')
+ deviceId = request.args.get('deviceId')
+
+ # Sets default dates of information to be fetched, starttime will default to one day behind endtime, which defaults to now
+ if end is None:
+ endtime = datetime.now()
+ else:
+ endtime = datetime.strptime(end, "%Y%m%d%H%M%S")
+ if start is None:
+ starttime = endtime - timedelta(days=1)
+ else:
+ starttime = datetime.strptime(start, "%Y%m%d%H%M%S")
+
+ if endtime < starttime:
+ temp = starttime
+ starttime = endtime
+ endtime = temp
+
+ if deviceId is None:
+ deviceId = 1
+
+ db = get_db()
+
+ if table is not None:
+ sql = (f"SELECT {columns} "
+ f"FROM {table} "
+ "WHERE (date BETWEEN ? AND ?) AND deviceId = ?")
+ subset = db.execute(sql, [starttime, endtime, deviceId])
+ else:
+ subset = None
+
+ return subset
+
+def single_line_graph(xData, yData, xLabel, yLabel, title, lineColor):
+ fig = Figure()
+ ax = fig.subplots()
+ locator = mdates.AutoDateLocator(minticks=3, maxticks=7)
+ formatter = mdates.ConciseDateFormatter(locator)
+
+ ax.xaxis.set_major_locator(locator)
+ ax.xaxis.set_major_formatter(formatter)
+ ax.plot(xData, yData, color=lineColor)
+ ax.set_xlabel(xLabel)
+ ax.set_ylabel(yLabel)
+ ax.set_title(title)
+
+ buf = BytesIO()
+ fig.savefig(buf, format="png")
+
+ return buf
+
+def double_line_graph(xData, yData1, yData2, xLabel, yLabel1, yLabel2, title, line1Color, line2Color, line1Label, line2Label):
+ fig = Figure()
+ ax = fig.subplots()
+ bx = ax.twinx()
+ locator = mdates.AutoDateLocator(minticks=3, maxticks=7)
+ formatter = mdates.ConciseDateFormatter(locator)
+
+ ax.xaxis.set_major_locator(locator)
+ ax.xaxis.set_major_formatter(formatter)
+ bx.xaxis.set_major_locator(locator)
+ bx.xaxis.set_major_formatter(formatter)
+ aline, = ax.plot(xData, yData1, color=line1Color, label=line1Label)
+ ax.set_xlabel(xLabel)
+ ax.set_ylabel(yLabel1)
+ ax.set_title(title)
+ bline, = bx.plot(xData, yData2, color=line2Color, label=line2Label)
+ bx.set_ylabel(yLabel2)
+
+ lines = [aline, bline]
+ ax.legend(lines, [l.get_label() for l in lines])
+
+ buf = BytesIO()
+ fig.savefig(buf, format="png")
+
+ return buf
+
+def double_y_graph(xData, yData1, yData2, xLabel, yLabel1, yLabel2, title, line1Color):
+ fig = Figure()
+ ax = fig.subplots()
+ bx = ax.twinx()
+ locator = mdates.AutoDateLocator(minticks=3, maxticks=7)
+ formatter = mdates.ConciseDateFormatter(locator)
+
+ ax.xaxis.set_major_locator(locator)
+ ax.xaxis.set_major_formatter(formatter)
+ bx.xaxis.set_major_locator(locator)
+ bx.xaxis.set_major_formatter(formatter)
+ ax.plot(xData, yData1, color=line1Color)
+ ax.set_xlabel(xLabel)
+ ax.set_ylabel(yLabel1)
+ ax.set_title(title)
+ bx.plot(xData, yData2, visible=False)
+ bx.set_ylabel(yLabel2)
+
+ buf = BytesIO()
+ fig.savefig(buf, format="png")
+
+ return buf
+
+@bp.route('/temperature.png', methods=['GET'])
+def draw_t_graph():
+ cur = get_current(request.args, "date, temperature", get_table(request.args['type']))
+
+ if cur is None:
+ abort(404, "Data not found")
+
+ data = cur.fetchall()
+ dates = []
+ tempsC = []
+ tempsF = []
+
+ if data is None:
+ abort(404, "Data not found")
+
+ for row in data:
+ if isinstance(row['date'], str):
+ dates.append(parser.parse(row['date']))
+ else:
+ dates.append(row['date'])
+ tempsC.append(row['temperature'])
+ tempsF.append(row['temperature'] * 1.8 + 32)
+
+ buf = double_y_graph(dates, tempsC, tempsF, "Timestamps", "Celsius", "Fahrenheit", "Temperature", "C1")
+
+ return Response(buf.getvalue(), mimetype='image/png')
+
+@bp.route('/humidity.png', methods=['GET'])
+def draw_h_graph():
+ cur = get_current(request.args, "date, humidity", get_table(request.args['type']))
+
+ if cur is None:
+ abort(404, "Data not found")
+
+ data = cur.fetchall()
+ dates = []
+ humidities = []
+
+ if data is None:
+ abort(404, "Data not found")
+
+ for row in data:
+ if isinstance(row['date'], str):
+ dates.append(parser.parse(row['date']))
+ else:
+ dates.append(row['date'])
+ humidities.append(row['humidity'])
+
+ buf = single_line_graph(dates, humidities, "Timestamps", "Percent", "Relative Humidity", "C0")
+
+ return Response(buf.getvalue(), mimetype='image/png')
+
+@bp.route('/humidity-temperature.png', methods=['GET'])
+def draw_ht_graph():
+ cur = get_current(request.args, "date, temperature, humidity", get_table(request.args['type']))
+
+ if cur is None:
+ abort(404, "Data not found")
+
+ data = cur.fetchall()
+ dates = []
+ humidities = []
+ #tempsC = []
+ tempsF = []
+
+ if data is None:
+ abort(404, "Data not found")
+
+ for row in data:
+ if isinstance(row['date'], str):
+ dates.append(parser.parse(row['date']))
+ else:
+ dates.append(row['date'])
+ # tempsC.append(row['temperature'])
+ tempsF.append(row['temperature'] * 1.8 + 32)
+ humidities.append(row['humidity'])
+
+ buf = double_line_graph(dates, humidities, tempsF, "Timestamps", "Percent", "Fahrenheit", "Humidity and Temperature", "C0", "C1", "Relative Humidity", "Temperature")
+
+ return Response(buf.getvalue(), mimetype='image/png')
+
+@bp.route('/pressure.png', methods=['GET'])
+def draw_p_graph():
+ cur = get_current(request.args, "date, pressure", get_table(request.args['type']))
+
+ if cur is None:
+ abort(404, "Data not found")
+
+ data = cur.fetchall()
+ dates = []
+ pressures = []
+
+ if data is None:
+ abort(404, "Data not found")
+
+ for row in data:
+ if isinstance(row['date'], str):
+ dates.append(parser.parse(row['date']))
+ else:
+ dates.append(row['date'])
+ pressures.append(row['pressure'])
+
+ buf = single_line_graph(dates, pressures, "Timestamps", "hPa", "Barometric Pressure", "C2")
+
+ return Response(buf.getvalue(), mimetype='image/png')
+
+@bp.route('/battery.png', methods=['GET'])
+def draw_b_graph():
+ cur = get_current(request.args, "date, batteryCharge", "device_status")
+
+ if cur is None:
+ abort(404, "Data not found")
+
+ data = cur.fetchall()
+ dates = []
+ batteries = []
+
+ if data is None:
+ abort(404, "Data not found")
+
+ for row in data:
+ if isinstance(row['date'], str):
+ dates.append(parser.parse(row['date']))
+ else:
+ dates.append(row['date'])
+ batteries.append(row['batteryCharge'])
+
+ buf = single_line_graph(dates, batteries, "Timestamps", "Volts", "Battery Voltage", "C3")
+
+ return Response(buf.getvalue(), mimetype='image/png')
+
+@bp.route('/light.png', methods=['GET'])
+def draw_l_graph():
+ env = request.args['type']
+
+ if (env is not None) and (env == 'outdoor'):
+ cur = get_current(request.args, "date, uv_intensity, lux", get_table(env))
+
+ if cur is None:
+ abort(404, "Data not found")
+
+ data = cur.fetchall()
+
+ if data is None:
+ abort(404, "Data not found")
+
+ dates = []
+ uv = []
+ lux = []
+ for row in data:
+ if isinstance(row['date'], str):
+ dates.append(parser.parse(row['date']))
+ else:
+ dates.append(row['date'])
+ uv.append(row['uv_intensity'])
+ lux.append(row['lux'])
+
+ buf = double_line_graph(dates, uv, lux, "Timestamps", "UV Index", "Lux", "UV and Light Intensity", "C4", "C5", "UV Light", "Light Intensity")
+
+ else:
+ cur = get_current(request.args, "date, light", get_table(env))
+
+ if cur is None:
+ abort(404, "Data not found")
+
+ data = cur.fetchall()
+
+ if data is None:
+ abort(404, "Data not found")
+
+ dates = []
+ light = []
+ for row in data:
+ if isinstance(row['date'], str):
+ dates.append(parser.parse(row['date']))
+ else:
+ dates.append(row['date'])
+ light.append(row['light'])
+
+ buf = single_line_graph(dates, light, "Timestamps", "Raw Light Reading", "Light Intensity", "C5")
+
+ return Response(buf.getvalue(), mimetype='image/png')
+
diff --git a/snag/schema.sql b/snag/schema.sql
new file mode 100644
index 0000000..9c4dfda
--- /dev/null
+++ b/snag/schema.sql
@@ -0,0 +1,46 @@
+create table devices (
+ deviceId integer primary key autoincrement,
+ deviceName text,
+ deviceLocation text
+);
+create table device_env (
+ entry integer primary key autoincrement,
+ deviceId integer,
+ environment text,
+ environmentDescription text
+);
+create table env_outdoor (
+ entry integer primary key autoincrement,
+ date timestamp,
+ deviceId integer,
+ temperature real,
+ humidity real,
+ pressure real,
+ lux real,
+ uv_intensity real
+);
+create table env_indoor (
+ entry integer primary key autoincrement,
+ date timestamp,
+ deviceId integer,
+ temperature real,
+ humidity real,
+ pressure real
+);
+create table env_enclosed (
+ entry integer primary key autoincrement,
+ date timestamp,
+ deviceId integer,
+ temperature real,
+ humidity real,
+ pressure real,
+ light real
+);
+create table device_status (
+ entry integer primary key autoincrement,
+ date timestamp,
+ deviceId integer,
+ batteryCharge real,
+ heaterRunning integer
+);
+
diff --git a/snag/static/interactive.js b/snag/static/interactive.js
new file mode 100644
index 0000000..de44670
--- /dev/null
+++ b/snag/static/interactive.js
@@ -0,0 +1,64 @@
+/**
+ * Script to change the shown graph
+ *
+ * Matt Kohls
+ * 2021
+ */
+
+const form = document.getElementById('query');
+const submitButton = document.getElementById('submit');
+const figure = document.getElementById('figure');
+
+function sendRequest(data) {
+ let url = "/",
+ urlEncoded = "",
+ urlEncodedPairs = [],
+ name,
+ startDate,
+ startTime,
+ endDate,
+ endTime;
+
+ for (name of data) {
+ switch (name[0]) {
+ case 'graph':
+ url = url.concat(name[1]);
+ break;
+ case 'sd':
+ startDate = name[1].replace(/-/g, '');
+ break;
+ case 'st':
+ startTime = name[1].replace(/:/g, '').concat('00');
+ case 'ed':
+ endDate = name[1].replace(/-/g, '');
+ break;
+ case 'et':
+ endTime = name[1].replace(/:/g, '').concat('00');
+ break;
+ case 'deviceId':
+ default:
+ urlEncodedPairs.push(name[0] + '=' + name[1]);
+ }
+ }
+ if (startDate !== "") {
+ if (startTime === "00") {
+ startTime = "000000";
+ }
+ urlEncodedPairs.push('start=' + startDate + startTime);
+ }
+ if (endDate !== "") {
+ if (endTime === "00") {
+ endTime = "000000";
+ }
+ urlEncodedPairs.push('end=' + endDate + endTime);
+ }
+
+ urlEncoded = urlEncodedPairs.join('&');
+ figure.setAttribute('src', url + '?' + urlEncoded);
+}
+
+submitButton.addEventListener('click', function() {
+ const formData = new FormData(form);
+ sendRequest(formData);
+})
+
diff --git a/snag/static/pagedown.css b/snag/static/pagedown.css
new file mode 100644
index 0000000..7f9c3e0
--- /dev/null
+++ b/snag/static/pagedown.css
@@ -0,0 +1,155 @@
+@font-face {
+ font-family: "Courier 10 Pitch";
+ src: url(/fonts/courier10bt-regular.woff);
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Courier 10 Pitch";
+ src: url(/fonts/courier10bt-bold.woff);
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Courier 10 Pitch";
+ src: url(/fonts/courier10bt-italic.woff);
+ font-weight: normal;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: "Courier 10 Pitch";
+ src: url(/fonts/courier10bt-bolditalic.woff);
+ font-weight: bold;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: Literata;
+ src: url(/fonts/Literata-Regular.woff)
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Literata;
+ src: url(/fonts/Literata-Bold.woff)
+ font-weight: bold;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: Literata;
+ src: url(/fonts/Literata-Italic.woff)
+ font-weight: normal;
+ font-style: italic;
+}
+
+@font-face {
+ font-family: Literata;
+ src: url(/fonts/Literata-BoldItalic.woff)
+ font-weight: bold;
+ font-style: italic;
+}
+
+html, body {
+ min-height: 100%;
+ height: 100%;
+ margin: 1em
+}
+
+body {
+ color: #212529;
+ background-color: #fff;
+ font-family: "Nimbus Sans L", Helvetica, sans-serif;
+}
+
+img, video {
+ display: block;
+ max-width: 80%;
+ box-shadow: 1px 1px 5px 0 rgba(0,0,0,.4);
+ margin: 0 auto
+}
+
+figcaption {
+ text-align: center;
+ margin: 0 auto
+}
+
+pre {
+ font-family: "Courier 10 Pitch", Courier, monospace;
+ background: #eee;
+ padding: .5rem;
+ margin: 0 -.5rem;
+ overflow-x: auto
+}
+
+nav {
+ margin: 0 auto;
+ clear: both
+}
+
+nav a:not(:first-child) {
+ margin-left: 1rem
+}
+
+nav .brand {
+ font-size: 1.25rem;
+ position: relative;
+ top: 1px
+}
+
+label {
+ display: inline-block;
+ margin-bottom: .25rem
+}
+
+aside {
+ border-left-style: dotted;
+ padding: 1em
+}
+
+h1 {
+ font-family: Literata, serif;
+}
+
+h2 {
+ font-family: Literata, serif;
+}
+
+h3 {
+ font-family: Literata, serif;
+}
+
+h4 {
+ font-family: Literata, serif;
+}
+
+header {
+ width: 50%;
+ margin-top: .5rem;
+}
+
+table {
+ border-collapse: collapse;
+ border: 0px
+}
+
+th {
+ border-bottom: 1px solid #212121
+}
+
+th, td {
+ padding: 5px;
+}
+
+tr:nth-child(even) {
+ background-color: #f6f6f6
+}
+
+footer {
+ width: 50%;
+ margin: 0 0 1rem
+}
diff --git a/snag/static/style.css b/snag/static/style.css
new file mode 100644
index 0000000..da1cb34
--- /dev/null
+++ b/snag/static/style.css
@@ -0,0 +1,18 @@
+body { font-family: sans-serif; background: #eee; }
+a, h1, h2 { color: #377ba8; }
+h1, h2 { font-family: 'Georgia', serif; margin: 0; }
+h1 { border-bottom: 2px solid #eee; }
+h2 { font-size: 1.2em; }
+
+.page { margin: 2em auto; width: 35em; border: 5px solid #ccc;
+ padding: 0.8em; background: white; }
+.weather { list-style: none; margin: 0; padding: 0; }
+.weather li { margin: 0.8em 1.2em; }
+.weather li h2 { margin-left: -1em; }
+.add-entry { font-size: 0.9em; border-bottom: 1px solid #ccc; }
+.add-entry dl { font-weight: bold; }
+.metanav { text-align: right; font-size: 0.8em; padding: 0.3em;
+ margin-bottom: 1em; background: #fafafa; }
+.flash { background: #cee5F5; padding: 0.5em;
+ border: 1px solid #aacbe2; }
+.error { background: #f0d6d6; padding: 0.5em; }
diff --git a/snag/templates/dashboard/dashboard.html b/snag/templates/dashboard/dashboard.html
new file mode 100644
index 0000000..c061b66
--- /dev/null
+++ b/snag/templates/dashboard/dashboard.html
@@ -0,0 +1,43 @@
+{% extends 'layout.html' %}
+
+{% block headline %}{% block title %}Dashboard{% endblock %}{% endblock %}
+
+{% block content %}
+<main>
+ {% if deviceList|length == 0 %}
+Hmmm nothing seems to be logged yet
+ {% endif %}
+ {% for entry in deviceList %}
+
+ <h2> {{ entry.name }} | {{ entry.location }} </h2>
+ <table>
+ <tr>
+ {% if entry.location != "status" %}
+ <td>
+ <figure>
+ <embed type="image/png" src="/graph/humidity-temperature.png?deviceId={{ entry.deviceId }}&type={{ entry.location}}" />
+ </figure>
+ </td>
+
+ <td>
+ <figure>
+ <embed type="image/png" src="/graph/pressure.png?deviceId={{ entry.deviceId }}&type={{ entry.location}}" />
+ </figure>
+ </td>
+ {% else %}
+ <td>
+ <figure>
+ <embed type="image/png" src="/graph/battery.png?deviceId={{ entry.deviceId }}" />
+ </figure>
+ </td>
+ {% endif %}
+ </tr>
+
+ </table>
+
+ {% endfor %}
+
+</main>
+{% endblock %}
+
+{% block footer %} Best by: {{ generatedAt }} {% endblock %}
diff --git a/snag/templates/interactive.html b/snag/templates/interactive.html
new file mode 100644
index 0000000..1756865
--- /dev/null
+++ b/snag/templates/interactive.html
@@ -0,0 +1,39 @@
+{% extends "layout.html" %}
+{% block body %}
+ <form id="query">
+ <p>
+ <label>Location</label>
+ <select id="deviceId" name="deviceId">
+ <option value="1">Bedroom</option>
+ <option value="2">Mainfloor</option>
+ </select>
+ </p>
+ <p>
+ <label>Graph Type</label>
+ <select id="graph" name="graph">
+ <option value="htgraph.png">Humidity &amp; Temperature</option>
+ <option value="tgraph.png">Temperature</option>
+ <option value="hgraph.png">Humidity</option>
+ <option value="pgraph.png">Pressure</option>
+ <option value="bgraph.png">Battery</option>
+ </select>
+ </p>
+ <p>
+ <label>Start Date</label>
+ <input type="date" name="sd" id="sd">
+ <input type="time" name="st" id="st">
+ </p>
+ <p>
+ <label>End Date</label>
+ <input type="date" name="ed" id="ed">
+ <input type="time" name="et" id="et">
+ </p>
+ </form>
+ <button id='submit'>Submit</button>
+
+ <figure>
+ <embed id="figure" type="image/png" src="/htgraph.png?deviceId=2" />
+ </figure>
+
+ <script src="static/interactive.js"></script>
+{% endblock %}
diff --git a/snag/templates/layout.html b/snag/templates/layout.html
new file mode 100644
index 0000000..50ad57b
--- /dev/null
+++ b/snag/templates/layout.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en-US">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>snag | {% block title %}{% endblock %}</title>
+ <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='pagedown.css') }}">
+ </head>
+
+ <body>
+ <header>
+ <nav>
+ <a href="/">Dashboard</a> <a href="interactive">Interactive</a>
+ </nav>
+ <hr>
+ </header>
+ <h1> {% block headline %}{% endblock %} </h1>
+ <hr>
+
+ {% block content %}{% endblock %}
+
+ <footer>
+ <hr>
+ <p>
+ {% block footer %}{% endblock %}
+ </p>
+ </footer>
+ </body>
+</html>
diff --git a/snag/templates/show_entries.html b/snag/templates/show_entries.html
new file mode 100644
index 0000000..86451df
--- /dev/null
+++ b/snag/templates/show_entries.html
@@ -0,0 +1,44 @@
+{% extends "layout.html" %}
+{% block body %}
+ <aside>
+ <b>{% if devId == 1 %}Bedroom
+ {% else %}Mainfloor
+ {% endif %}Currently:</b>
+ <ul class=current>
+ <li>{{ current.temperature }}&#176;F</li>
+ <li>{{ current.humidity }}% humidity</li>
+ </ul>
+ </aside>
+ <figure>
+ <embed type="image/png" src="/htgraph.png?deviceId={{ devId }}" />
+ </figure>
+ <figure>
+ <embed type="image/png" src="/pgraph.png?deviceId={{ devId }}" />
+ </figure>
+ {% if devId == 2 %}
+ <figure>
+ <embed type="image/png" src="/bgraph.png?deviceId={{ devId }}" />
+ </figure>
+ {% endif %}
+
+ <hr>
+ <h2>Readings from the past 24 hours</h2>
+ <p>
+ <table class=log>
+ <tr>
+ <th>Timestamp</th>
+ <th>Temperature (C)</th>
+ <th>Humidity (%)</th>
+ <th>Pressure (hPa)</th>
+ </tr>
+ {% for entry in log %}
+ <tr>
+ <td>{{ entry.date }}</td>
+ <td>{{ entry.temperature }}</td>
+ <td>{{ entry.humidity }}</td>
+ <td>{{ entry.pressure }}</td>
+ </tr>
+ {% endfor %}
+ </table>
+ </p>
+{% endblock %}