mirror of
https://github.com/ferdzo/iotDashboard.git
synced 2026-04-05 01:06:24 +00:00
Update chart.html, experimenting with MQTT.
This commit is contained in:
4
iotDashboard/mqtt.py
Normal file
4
iotDashboard/mqtt.py
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
import paho.mqtt.subscribe as subscribe
|
||||||
|
|
||||||
|
msg = subscribe.simple("esptest-01/sensor/tempreature/state", hostname="localhost")
|
||||||
|
print("%s %s" % (msg.topic, msg.payload))
|
||||||
@@ -23,11 +23,31 @@
|
|||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.current-conditions {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-conditions h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-conditions .value {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="bg-light">
|
<body class="bg-light">
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<a class="navbar-brand" href="#">IoT Dashboard</a>
|
<a class="navbar-brand" href="#">IoT Dashboard</a>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
@@ -56,9 +76,17 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="container mt-5">
|
<div class="container mt-5">
|
||||||
<h1 class="text-center mb-4">Temperature and Humidity Over Time</h1>
|
<h1 class="text-center mb-4">Temperature and Humidity Over Time</h1>
|
||||||
|
|
||||||
|
<!-- Current Conditions -->
|
||||||
|
<div class="current-conditions">
|
||||||
|
<h2>Current Conditions</h2>
|
||||||
|
<div class="value" id="current-temperature">Loading...</div>
|
||||||
|
<div class="value" id="current-humidity">Loading...</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Device Selector Dropdown -->
|
<!-- Device Selector Dropdown -->
|
||||||
<div class="row mb-4">
|
<div class="row mb-4">
|
||||||
<div class="col-md-4 offset-md-4">
|
<div class="col-md-4 offset-md-4">
|
||||||
@@ -67,7 +95,6 @@
|
|||||||
<option value="{{ device.name }}">{{ device.name }} ({{ device.ip }})</option>
|
<option value="{{ device.name }}">{{ device.name }} ({{ device.ip }})</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -168,6 +195,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Check if the last recorded data is within the last 10 minutes
|
||||||
|
const lastRecordedTime = new Date(data.times[data.times.length - 1]);
|
||||||
|
const now = new Date();
|
||||||
|
const tenMinutesAgo = new Date(now.getTime() - 10 * 60000);
|
||||||
|
|
||||||
|
if (lastRecordedTime > tenMinutesAgo) {
|
||||||
|
document.getElementById('current-temperature').textContent = `Temperature: ${data.temperatures[data.temperatures.length - 1]}°C`;
|
||||||
|
document.getElementById('current-humidity').textContent = `Humidity: ${data.humidities[data.humidities.length - 1]}%`;
|
||||||
|
} else {
|
||||||
|
document.getElementById('current-temperature').textContent = `Temperature: -`;
|
||||||
|
document.getElementById('current-humidity').textContent = `Humidity: -`;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -27,6 +27,5 @@ urlpatterns = [
|
|||||||
path('devices/add/', views.add_device, name='add_device'),
|
path('devices/add/', views.add_device, name='add_device'),
|
||||||
path('devices/edit/<int:pk>/', views.edit_device, name='edit_device'),
|
path('devices/edit/<int:pk>/', views.edit_device, name='edit_device'),
|
||||||
path('devices/delete/<int:pk>/', views.delete_device, name='delete_device'),
|
path('devices/delete/<int:pk>/', views.delete_device, name='delete_device'),
|
||||||
path('login/', views.login_view, name='login'),
|
|
||||||
path('logout/', views.logout_view, name='logout'),
|
path('logout/', views.logout_view, name='logout'),
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ def chart(request):
|
|||||||
|
|
||||||
def index(request):
|
def index(request):
|
||||||
if request.user.is_authenticated:
|
if request.user.is_authenticated:
|
||||||
return HttpResponse(chart())
|
return redirect("/chart/")
|
||||||
return HttpResponse("NOT AUTHENTICATED!!!")
|
return HttpResponse("NOT AUTHENTICATED!!!")
|
||||||
def device_list(request):
|
def device_list(request):
|
||||||
devices = Device.objects.all()
|
devices = Device.objects.all()
|
||||||
@@ -80,7 +80,5 @@ def delete_device(request, pk):
|
|||||||
return redirect('device_list')
|
return redirect('device_list')
|
||||||
return render(request, 'device_confirm_delete.html', {'device': device})
|
return render(request, 'device_confirm_delete.html', {'device': device})
|
||||||
|
|
||||||
def login_view():
|
|
||||||
pass
|
|
||||||
def logout_view():
|
def logout_view():
|
||||||
pass
|
redirect("/admin")
|
||||||
Reference in New Issue
Block a user