clean-up cameras list, adding bootstrap icons
parent
81eb4daca3
commit
dd77dec94a
2
app.py
2
app.py
|
@ -246,7 +246,7 @@ def camera_status_plot(esn=None):
|
|||
fig.savefig(buf, format="png", transparent=True)
|
||||
# Embed the result in the html output.
|
||||
data = base64.b64encode(buf.getbuffer()).decode("ascii")
|
||||
return f"<h3>Graph of Status Events</h3><div class='col-md-12'><img src='data:image/png;base64,{data}' style='max-width:100%'/></div>"
|
||||
return f"<h3>Graph of Status Events <i class='bi bi-bar-chart'></i></h3><div class='col-md-12'><img src='data:image/png;base64,{data}' style='max-width:100%'/></div>"
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -26,6 +26,8 @@
|
|||
<!-- self-hosted fontawesome -->
|
||||
<link href="/static/css/all.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
|
||||
<link href="/static/theme.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<h3>Preview Image</h3>
|
||||
<h3>Preview Image <i class="bi bi-card-image"></i></h3>
|
||||
<h5>{{ template_values['camera'].name }}</h5>
|
||||
<img src="/camera/{{ template_values['camera'].id }}/live_preview" style="max-height:360px;">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<h3>Events</h3>
|
||||
<h3>List of Events <i class="bi bi-calendar-event"></i></h3>
|
||||
<h5>{{ template_values['camera'].name }}</h5>
|
||||
<ul>
|
||||
{% if template_values['events'] %}
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<h3>Preview Image</h3>
|
||||
<h3>Preview Image <i class="bi bi-card-image"></i></h3>
|
||||
<h5>{{ template_values['camera'].name }}</h5>
|
||||
<img src="/camera/{{ template_values['camera'].id }}/preview_image" style="max-height:360px; max-width:100%">
|
||||
|
|
|
@ -1,47 +1,38 @@
|
|||
|
||||
|
||||
<h3>Cameras</h3>
|
||||
<h3>Cameras <i class="bi bi-camera-video"></i></h3>
|
||||
<h5>Online</h5>
|
||||
<ul>
|
||||
{% for camera in template_values['cameras'] %}
|
||||
{% if camera.is_online() and camera.bridge_id %}
|
||||
<li>{{ camera.name }}</li>
|
||||
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
|
||||
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
|
||||
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
|
||||
{% if camera.is_online() %}
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
{{ camera.name }}
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail"><i class="bi bi-card-image" title="click to load preview image"></i></a>
|
||||
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events"><i class="bi bi-calendar-event" title="click to load events list"></i></a>
|
||||
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot"><i class="bi bi-bar-chart" title="click to generate graph of events"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<hr>
|
||||
{% for camera in template_values['cameras'] %}
|
||||
{% if camera.is_online() and camera.bridge_id == None %}
|
||||
<li>{{ camera.name }}</li>
|
||||
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
|
||||
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
|
||||
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<h5>Offline</h5>
|
||||
<ul>
|
||||
{% for camera in template_values['cameras'] %}
|
||||
{% if camera.is_offline() and camera.bridge_id %}
|
||||
<li>{{ camera.name }}</li>
|
||||
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
|
||||
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
|
||||
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
|
||||
{% if camera.is_offline() %}
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
{{ camera.name }}
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail"><i class="bi bi-card-image" title="click to load preview image"></i></a>
|
||||
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events"><i class="bi bi-calendar-event" title="click to load events list"></i></a>
|
||||
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot"><i class="bi bi-bar-chart" title="click to generate graph of events"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<hr>
|
||||
{% for camera in template_values['cameras'] %}
|
||||
{% if camera.is_offline() and camera.bridge_id == None %}
|
||||
<li>{{ camera.name }}</li>
|
||||
<a href="/camera/{{ camera.id }}/preview" hx-get="/camera/{{ camera.id }}/preview" hx-trigger="click" hx-target="#camera_detail">preview</a>
|
||||
<a href="/camera/{{ camera.id }}/event" hx-get="/camera/{{ camera.id }}/events" hx-trigger="click" hx-target="#camera_status_events">events</a>
|
||||
<a href="/camera/{{ camera.id }}/status_plot" hx-get="/camera/{{ camera.id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">graph</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
|
||||
<button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list" class="btn btn-md btn-secondary">load cameras</button>
|
||||
<br>
|
||||
|
|
|
@ -29,16 +29,16 @@
|
|||
{% include 'cameras_partial.html' %}
|
||||
</div>
|
||||
<div class="col-md-7" id="camera_detail">
|
||||
<h2>Preview Image</h2>
|
||||
<h2>Preview Image <i class="bi bi-card-image"></i></h2>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-md-5" id="camera_status_events" style="max-height:400px; overflow:auto;">
|
||||
<h2>List of Events</h2>
|
||||
<h2>List of Events <i class="bi bi-calendar-event"></i></h2>
|
||||
</div>
|
||||
<div class="col-md-7" id="camera_status_plot">
|
||||
<h2>Graph of Status Events</h2>
|
||||
<h2>Graph of Status Events <i class="bi bi-bar-chart"></i></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in New Issue