Step 1: Set Up Your Environment
- Install Flask: Make sure you have Python and pip installed. Then, run:bashCopy code
pip install Flask - Create Your Project Structure:arduinoCopy code
/iot_dashboard ├── app.py ├── static │ └── style.css └── templates └── index.html
Step 2: Create app.py
This file will handle the backend logic.
pythonCopy codefrom flask import Flask, render_template, jsonify, request
import random
app = Flask(__name__)
# Simulate IoT device data
devices = {
'device1': {'temperature': 20, 'humidity': 30},
'device2': {'temperature': 22, 'humidity': 40}
}
@app.route('/')
def index():
return render_template('index.html')
@app.route('/api/devices', methods=['GET'])
def get_devices():
return jsonify(devices)
@app.route('/api/update', methods=['POST'])
def update_device():
data = request.json
device_id = data.get('id')
if device_id in devices:
devices[device_id]['temperature'] = data.get('temperature', devices[device_id]['temperature'])
devices[device_id]['humidity'] = data.get('humidity', devices[device_id]['humidity'])
return jsonify(success=True)
return jsonify(success=False), 404
if __name__ == '__main__':
app.run(debug=True)
Step 3: Create index.html
This file will be the frontend for your dashboard.
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IoT Dashboard</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>IoT Device Dashboard</h1>
<div id="devices"></div>
<script>
function fetchDevices() {
$.getJSON('/api/devices', function(data) {
$('#devices').empty();
$.each(data, function(id, device) {
$('#devices').append(`<div class="device">
<h3>${id}</h3>
<p>Temperature: ${device.temperature}°C</p>
<p>Humidity: ${device.humidity}%</p>
<button onclick="updateDevice('${id}')">Update</button>
</div>`);
});
});
}
function updateDevice(id) {
const temperature = prompt("Enter new temperature:");
const humidity = prompt("Enter new humidity:");
if (temperature !== null && humidity !== null) {
$.ajax({
url: '/api/update',
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ id: id, temperature: temperature, humidity: humidity }),
success: function() {
fetchDevices();
}
});
}
}
$(document).ready(function() {
fetchDevices();
});
</script>
</body>
</html>
Step 4: Create style.css
Add some basic styles.
cssCopy codebody {
font-family: Arial, sans-serif;
}
.device {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
}
Step 5: Run Your Application
- Navigate to your project directory:bashCopy code
cd iot_dashboard - Run your Flask app:bashCopy code
python app.py - Open your web browser and go to
http://127.0.0.1:5000.
Leave a Reply