mirror of
https://github.com/pablorevilla-meshtastic/meshview.git
synced 2026-08-07 09:22:49 +02:00
Graphs and Dark Mode
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-bs-theme="dark">
|
||||
<head>
|
||||
<title>MeshView - Bay Area Mesh - http://bayme.sh {% if node and node.short_name %}-- {{node.short_name}}{% endif %}</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
@@ -5,10 +5,10 @@
|
||||
min-width:10em;
|
||||
}
|
||||
.chat-packet:nth-of-type(odd){
|
||||
background-color:#CCC;
|
||||
background-color:#1f1f1f;
|
||||
}
|
||||
.chat-packet:nth-of-type(even){
|
||||
background-color:#EEE;
|
||||
background-color:#181818;
|
||||
}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -26,14 +26,14 @@
|
||||
<input type="submit" class="col-2 m-2"/>
|
||||
</form>
|
||||
<div class="row">
|
||||
<div class="col-6" id="packet_list" sse-swap="packet" hx-swap="afterbegin">
|
||||
<div class="col-xs" id="packet_list" sse-swap="packet" hx-swap="afterbegin">
|
||||
{% for packet in packets %}
|
||||
{% include 'packet.html' %}
|
||||
{% else %}
|
||||
No packets found.
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-6 sticky-top" id="packet_details" style="height: 95vh; overflow: scroll">
|
||||
<!-- <div class="col-6 sticky-top" id="packet_details" style="height: 95vh; overflow: scroll"> -->
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -13,6 +13,9 @@
|
||||
overflow: scroll;
|
||||
top: 3em;
|
||||
}
|
||||
div.tab-pane > dl {
|
||||
display: inline-block;
|
||||
}
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
@@ -27,7 +30,7 @@
|
||||
{% endif %}
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-md mb-3">
|
||||
<div class="col mb-3">
|
||||
<div class="card" id="node_info">
|
||||
{% if node %}
|
||||
<div class="card-header">
|
||||
@@ -35,11 +38,11 @@
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<dl >
|
||||
<dt>short name</dt>
|
||||
<dt>ShortName</dt>
|
||||
<dd>{{node.short_name}}</dd>
|
||||
<dt>hw model</dt>
|
||||
<dt>HW Model</dt>
|
||||
<dd>{{node.hw_model}}</dd>
|
||||
<dt>role</dt>
|
||||
<dt>Role</dt>
|
||||
<dd>{{node.role}}</dd>
|
||||
</dl>
|
||||
{% include "node_graphs.html" %}
|
||||
@@ -51,8 +54,8 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md mb-3">
|
||||
<div id="map"/>
|
||||
<div class="col mb-3">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -63,10 +66,10 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{% include 'packet_list.html' %}
|
||||
<div class="col-6 sticky-top" id="packet_details">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col sticky-top" id="packet_details"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#neighbors" type="button" role="tab" >Neighbors</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#weather" type="button" role="tab" >Weather</button>
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#weather" type="button" role="tab" >Environment</button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#power" type="button" role="tab" >Power</button>
|
||||
@@ -20,17 +20,44 @@
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="overview" role="tabpanel">
|
||||
{{ graph("power") }}
|
||||
{{ graph("chutil") }}
|
||||
<dl>
|
||||
<dt>Power</dt>
|
||||
<dd>{{ graph("power") }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>ChUtil</dt>
|
||||
<dd>{{ graph("chutil") }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="neighbors" role="tabpanel">
|
||||
<a href="/graph/neighbors2/{{node_id}}"><img src="/graph/neighbors/{{node_id}}" height="200em" width="200em"/></a>
|
||||
<a role="button" class="btn btn-primary mb-3" href="/graph/network?root={{node_id}}&depth=2">Network Graph</a>
|
||||
<a style="display: block;" href="/graph/neighbors2/{{node_id}}"><img src="/graph/neighbors/{{node_id}}" height="200em" width="200em"/></a>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="weather" role="tabpanel">
|
||||
{{ graph("temperature") }}
|
||||
{{ graph("humidity") }}
|
||||
{{ graph("wind_speed") }}
|
||||
{{ graph("wind_direction") }}
|
||||
<dl>
|
||||
<dt>Temperature</dt>
|
||||
<dd>{{ graph("temperature") }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Humidity</dt>
|
||||
<dd>{{ graph("humidity") }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Pressure</dt>
|
||||
<dd>{{ graph("pressure") }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Indoor Air Quality</dt>
|
||||
<dd>{{ graph("iaq") }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Wind Speed</dt>
|
||||
<dd>{{ graph("wind_speed") }}</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>Wind Direction</dt>
|
||||
<dd>{{ graph("wind_direction") }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="power" role="tabpanel">
|
||||
{{ graph("power_metrics") }}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="col-6" id="packet_list" sse-swap="{{packet_event | default('packet')}}" hx-swap="afterbegin">
|
||||
<div class="col" id="packet_list" sse-swap="{{packet_event | default('packet')}}" hx-swap="afterbegin">
|
||||
{% for packet in packets %}
|
||||
{% include 'packet.html' %}
|
||||
{% else %}
|
||||
|
||||
@@ -654,6 +654,31 @@ async def graph_humidity(request):
|
||||
],
|
||||
)
|
||||
|
||||
@routes.get("/graph/pressure/{node_id}")
|
||||
async def graph_pressure(request):
|
||||
return await graph_telemetry(
|
||||
int(request.match_info['node_id']),
|
||||
'environment_metrics',
|
||||
[
|
||||
{
|
||||
'label': 'barometric pressure',
|
||||
'fields': ['barometric_pressure'],
|
||||
},
|
||||
],
|
||||
)
|
||||
|
||||
@routes.get("/graph/iaq/{node_id}")
|
||||
async def graph_pressure(request):
|
||||
return await graph_telemetry(
|
||||
int(request.match_info['node_id']),
|
||||
'environment_metrics',
|
||||
[
|
||||
{
|
||||
'label': 'IAQ',
|
||||
'fields': ['iaq'],
|
||||
},
|
||||
],
|
||||
)
|
||||
|
||||
@routes.get("/graph/power_metrics/{node_id}")
|
||||
async def graph_power_metrics(request):
|
||||
|
||||
@@ -11,4 +11,3 @@ asyncpg
|
||||
seaborn
|
||||
pydot
|
||||
plotly
|
||||
graphviz
|
||||
|
||||
Reference in New Issue
Block a user