app.py
import sqlite3
from flask import Flask, jsonify, render_template, request
from db_method import DB_NAME, insert_sensor_data, initdb
import datetime
DB_NAME = "temp_data.sqlite"
app = Flask(__name__)
data = {"temperature": [], "humidity": []}
@app.post("/post_data")
def receive_data():
try:
content = request.get_json()
temperature = content["temperature"]
humidity = content["humidity"]
data["temperature"].append(temperature)
data["humidity"].append(humidity)
insert_sensor_data(temperature, humidity)
print(f"Received data: temperature = {temperature}, humidity = {humidity}")
return jsonify({"success": True})
except Exception as e:
print(f"Error receiving data: {str(e)}")
return jsonify({"success": False, "error": str(e)})
@app.route("/")
def index():
return render_template("index.html")
@app.route('/data')
def get_data():
start = request.args.get('start')
end = request.args.get('end')
conn = sqlite3.connect(DB_NAME)
cursor = conn.cursor()
if start and end:
cursor.execute("SELECT timestamp, temperature, humidity FROM sensor_data WHERE timestamp BETWEEN ? AND ?", (start, end))
else:
cursor.execute("SELECT timestamp, temperature, humidity FROM sensor_data")
data = cursor.fetchall()
conn.close()
return jsonify(data)
@app.route('/time_ranges')
def get_time_ranges():
conn = sqlite3.connect(DB_NAME)
cursor = conn.cursor()
cursor.execute("SELECT MIN(timestamp), MAX(timestamp) FROM sensor_data")
min_timestamp, max_timestamp = cursor.fetchone()
conn.close()
if not min_timestamp or not max_timestamp:
return jsonify([])
min_time = datetime.datetime.strptime(min_timestamp, "%Y-%m-%d %H:%M:%S")
max_time = datetime.datetime.strptime(max_timestamp, "%Y-%m-%d %H:%M:%S")
time_ranges = []
while min_time < max_time:
end_time = min_time + datetime.timedelta(seconds=30)
time_ranges.append({
"start": min_time.strftime("%Y-%m-%d %H:%M:%S"),
"end": end_time.strftime("%Y-%m-%d %H:%M:%S")
})
min_time = end_time
return jsonify(time_ranges[-10:])
if __name__ == "__main__":
initdb(DB_NAME)
app.run(host="0.0.0.0", port = 5500, debug = True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>IoT Project</title>
<link rel = "stylesheet" href = "/static/style.css">
<script src = "<https://code.highcharts.com/highcharts.js>"></script>
</head>
<body>
<div class = "background"></div>
<p class = "title">Temperature & Humidity Realtime Chart</p>
<div style = "display: flex; max-width: 360px; height: 40px; margin: 0 auto;">
<button onclick = "showDiv('Realtime')" class = "select-btn" style = "background-color: #b07ed2">Show Realtime</button>
<button onclick = "showDiv('Interval')" class = "select-btn" style = "background-color: #94b9de">Show Interval</button>
</div>
<div class = "chart-background">
<div id = "Realtime" class = "hide">
<div id = "realtimeChartContainer" class = "real-time"></div>
</div>
<div id = "Interval" class = "hide">
<div style = "margin-top: 20px;margin-bottom: 20px;">
<select id = "timeRangeSelector"></select>
<button id = "updateChart">Update Chart</button>
</div>
<div id = "intervalChartContainer" class = "select-interval"></div>
</div>
</div>
<script>
function showDiv(divId) {
if (divId == "Realtime") {
document.getElementById("Interval").classList.add('hide');
document.getElementById("Realtime").classList.remove('hide');
} else if (divId == "Interval") {
document.getElementById("Realtime").classList.add('hide');
document.getElementById("Interval").classList.remove('hide');
}
}
document.getElementById('Realtime').classList.remove('hide');
document.addEventListener("DOMContentLoaded", function() {
Highcharts.setOptions({
global: {
timezoneOffset: new Date().getTimezoneOffset()
}
});
const intervalChart = Highcharts.chart('intervalChartContainer', {
title: {
text: 'Sensor Data (Selected Interval)'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
series: [{
name: 'Temperature',
data: []
}, {
name: 'Humidity',
data: []
}]
});
const realtimeChart = Highcharts.chart('realtimeChartContainer', {
title: {
text: 'Sensor Data (Real-time)'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y-%m-%d',
week: '%Y-%m-%d',
month: '%Y-%m',
year: '%Y'
}
},
series: [{
name: 'Temperature',
data: []
}, {
name: 'Humidity',
data: []
}]
});
let startDate, endDate;
function fetchIntervalDataAndUpdateChart() {
let url = '/data';
if (startDate && endDate) {
url += `?start=${startDate}&end=${endDate}`;
}
fetch(url)
.then(response => response.json())
.then(data => {
const seriesDataTemperature = data.map(entry => [new Date(entry[0]).getTime(), entry[1]]);
const seriesDataHumidity = data.map(entry => [new Date(entry[0]).getTime(), entry[2]]);
intervalChart.series[0].setData(seriesDataTemperature);
intervalChart.series[1].setData(seriesDataHumidity);
})
.catch(error => console.error('Error fetching data:', error));
}
function fetchRealtimeDataAndUpdateChart() {
fetch('/data')
.then(response => response.json())
.then(data => {
const latestData = data.slice(-10);
const seriesDataTemperature = latestData.map(entry => [new Date(entry[0]).getTime(), entry[1]]);
const seriesDataHumidity = latestData.map(entry => [new Date(entry[0]).getTime(), entry[2]]);
realtimeChart.series[0].setData(seriesDataTemperature);
realtimeChart.series[1].setData(seriesDataHumidity);
})
.catch(error => console.error('Error fetching data:', error));
}
fetchIntervalDataAndUpdateChart();
fetchRealtimeDataAndUpdateChart();
setInterval(fetchRealtimeDataAndUpdateChart, 3000);
function fetchTimeRangesAndUpdateSelector() {
fetch('/time_ranges')
.then(response => response.json())
.then(timeRanges => {
const selector = document.getElementById('timeRangeSelector');
selector.innerHTML = '';
timeRanges.forEach(range => {
const option = document.createElement('option');
option.value = `${range.start},${range.end}`;
option.textContent = `${range.start} - ${range.end}`;
selector.appendChild(option);
});
if (timeRanges.length > 0) {
const firstRange = timeRanges[0];
startDate = firstRange.start;
endDate = firstRange.end;
}
})
.catch(error => console.error('Error fetching time ranges:', error));
}
fetchTimeRangesAndUpdateSelector();
setInterval(fetchTimeRangesAndUpdateSelector, 3000);
document.getElementById('timeRangeSelector').addEventListener('change', function() {
const [start, end] = this.value.split(',');
startDate = start;
endDate = end;
fetchIntervalDataAndUpdateChart();
});
document.getElementById('updateChart').addEventListener('click', fetchIntervalDataAndUpdateChart);
});
</script>
</body>
</html>
