much better layout
parent
46d9423890
commit
c4fb95c19e
27
app.py
27
app.py
|
|
@ -121,8 +121,8 @@ def cameras():
|
|||
return render_template('cameras_partial.html', template_values=values)
|
||||
|
||||
|
||||
@app.route('/camera/<esn>/live_preview')
|
||||
def camera_live_preivew(esn=None):
|
||||
@app.route('/camera/<esn>/preview_image')
|
||||
def camera__preivew_image(esn=None):
|
||||
if 'een' in session:
|
||||
een = session['een']
|
||||
else:
|
||||
|
|
@ -136,8 +136,25 @@ def camera_live_preivew(esn=None):
|
|||
else:
|
||||
return send_file('static/placeholder.png')
|
||||
|
||||
@app.route('/camera/<esn>/preview')
|
||||
def camera_live_preivew(esn=None):
|
||||
if 'een' in session:
|
||||
een = session['een']
|
||||
else:
|
||||
een = EagleEyev3(config)
|
||||
|
||||
@app.route('/camera/<esn>')
|
||||
camera = een.get_camera_by_id(esn)
|
||||
|
||||
values = {
|
||||
"current_user": een.current_user,
|
||||
"camera": camera,
|
||||
"events": camera.events['status']
|
||||
}
|
||||
|
||||
return render_template('camera_preview.html', template_values=values)
|
||||
|
||||
|
||||
@app.route('/camera/<esn>/events')
|
||||
def camera_detail(esn=None):
|
||||
if 'een' in session:
|
||||
een = session['een']
|
||||
|
|
@ -157,7 +174,7 @@ def camera_detail(esn=None):
|
|||
"events": camera.events['status']
|
||||
}
|
||||
|
||||
return render_template('camera_detail_partial.html', template_values=values)
|
||||
return render_template('camera_events_partial.html', template_values=values)
|
||||
|
||||
@app.route('/camera/<esn>/status_plot')
|
||||
def camera_status_plot(esn=None):
|
||||
|
|
@ -200,7 +217,7 @@ def camera_status_plot(esn=None):
|
|||
fig.savefig(buf, format="png")
|
||||
# Embed the result in the html output.
|
||||
data = base64.b64encode(buf.getbuffer()).decode("ascii")
|
||||
return f"<div class='col-md-12'><img src='data:image/png;base64,{data}' width=70%/></div>"
|
||||
return f"<div class='col-md-12'><img src='data:image/png;base64,{data}' style='max-width:100%'/></div>"
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,3 @@
|
|||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h3>{{ template_values['camera'].name }}</h3>
|
||||
<img src="/camera/{{ template_values['camera'].id }}/live_preview" style="width: 100%; max-height:360px;">
|
||||
</div>
|
||||
|
||||
<div class="col-md-4" id="events_list">
|
||||
<h3>Events</h3>
|
||||
<ul>
|
||||
{% if template_values['events'] %}
|
||||
{% for event in template_values['events'] %}
|
||||
<li>
|
||||
{{ event['data'][0]['newStatus']['connectionStatus'] }}
|
||||
<br> <small>{{ event['endTimestamp'] }}</small>
|
||||
<br> <small>{{ event['startTimestamp'] }}</small>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li>No events in the last six hours</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div>
|
||||
<button hx-get="/camera/{{ template_values['camera'].id }}/status_plot" hx-trigger="click" hx-target="#camera_status_plot">
|
||||
load plot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Preview Image</h3>
|
||||
<h5>{{ template_values['camera'].name }}</h5>
|
||||
<img src="/camera/{{ template_values['camera'].id }}/live_preview" style="max-height:360px;">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<h3>Events</h3>
|
||||
<h5>{{ template_values['camera'].name }}</h5>
|
||||
<ul>
|
||||
{% if template_values['events'] %}
|
||||
{% for event in template_values['events'] %}
|
||||
<li>
|
||||
{{ event['data'][0]['newStatus']['connectionStatus'] }}
|
||||
<br> <small>{{ event['endTimestamp'] }}</small>
|
||||
<br> <small>{{ event['startTimestamp'] }}</small>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<li>No events in the last six hours</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<h3>Preview Image</h3>
|
||||
<h5>{{ template_values['camera'].name }}</h5>
|
||||
<img src="/camera/{{ template_values['camera'].id }}/preview_image" style="max-height:360px;">
|
||||
|
|
@ -1,41 +1,47 @@
|
|||
|
||||
|
||||
<div class="col-md-3" id="camera_list_items">
|
||||
<h3>Online</h3>
|
||||
<h3>Cameras</h3>
|
||||
<h5>Online</h5>
|
||||
<ul>
|
||||
{% for camera in template_values['cameras'] %}
|
||||
{% if camera.is_online() and camera.bridge_id %}
|
||||
<li hx-get="/camera/{{ camera.id }}" hx-trigger="click" hx-target="#camera_detail"> {{ camera.name }}</li>
|
||||
<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 %}
|
||||
<hr>
|
||||
{% for camera in template_values['cameras'] %}
|
||||
{% if camera.is_online() and camera.bridge_id == None %}
|
||||
<li hx-get="/camera/{{ camera.id }}" hx-trigger="click" hx-target="#camera_detail"> {{ camera.name }}</li>
|
||||
<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>
|
||||
|
||||
<h3>Offline</h3>
|
||||
<h5>Offline</h5>
|
||||
<ul>
|
||||
{% for camera in template_values['cameras'] %}
|
||||
{% if camera.is_offline() and camera.bridge_id %}
|
||||
<li hx-get="/camera/{{ camera.id }}" hx-trigger="click" hx-target="#camera_detail"> {{ camera.name }}</li>
|
||||
<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 %}
|
||||
<hr>
|
||||
{% for camera in template_values['cameras'] %}
|
||||
{% if camera.is_offline() and camera.bridge_id == None %}
|
||||
<li hx-get="/camera/{{ camera.id }}" hx-trigger="click" hx-target="#camera_detail"> {{ camera.name }}</li>
|
||||
<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>
|
||||
|
||||
<div class="col-md-6 offset-3">
|
||||
<button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list">refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9" id="camera_detail"></div>
|
||||
|
||||
<button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list">load cameras</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,11 +24,22 @@
|
|||
|
||||
<div class="container text-center">
|
||||
|
||||
<div class="row" id="camera_list">
|
||||
<div class="row">
|
||||
<div class="col-md-5" id="camera_list" style="max-height:400px; overflow:auto;">
|
||||
{% include 'cameras_partial.html' %}
|
||||
</div>
|
||||
|
||||
<div class="row" id="camera_status_plot">
|
||||
<div class="col-md-7" id="camera_detail">
|
||||
<h2>Preview Image</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>
|
||||
</div>
|
||||
<div class="col-md-7" id="camera_status_plot">
|
||||
<h2>Graph of Status Events</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue