homecontrol-dash: use tabs to select sensor
This commit is contained in:
parent
09412adcfb
commit
6639e138b6
1 changed files with 32 additions and 53 deletions
|
|
@ -6,7 +6,6 @@ import dash_html_components as html
|
|||
from dash.dependencies import Input, Output
|
||||
import time
|
||||
import requests
|
||||
from math import inf
|
||||
|
||||
URL_BASE="http://innocence:5000"
|
||||
|
||||
|
|
@ -36,8 +35,11 @@ def get_values(sensorId, min_ts, max_ts, limit):
|
|||
|
||||
sensors = get_sensors()
|
||||
sensor = next(iter(sensors), None)
|
||||
tabs = []
|
||||
for s in sensors:
|
||||
sensorType = sensors[s]["sensorType"]
|
||||
tabs.append(dcc.Tab(label=sensorType, value=s))
|
||||
|
||||
# external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
|
||||
external_stylesheets = [dbc.themes.BOOTSTRAP]
|
||||
meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}]
|
||||
|
||||
|
|
@ -47,70 +49,53 @@ app.title = "dashboard.ykonni.de"
|
|||
|
||||
app.layout = html.Div(children=[
|
||||
html.H1(children='dashboard.ykonni.de'),
|
||||
|
||||
html.Div(children='''
|
||||
visualize sensor data
|
||||
'''),
|
||||
dbc.Row([
|
||||
dbc.Col(dcc.Tabs(id="tabs-select-sensor", value=sensor, children=tabs))
|
||||
]),
|
||||
dbc.Row([
|
||||
dbc.Col(
|
||||
dcc.Graph(
|
||||
id='graph-sensor-values',
|
||||
figure={
|
||||
'data': [
|
||||
{'x': [0], 'y': [0], 'mode': 'markers', 'name': 'None'}
|
||||
],
|
||||
'layout': {
|
||||
'title': 'initial values'
|
||||
}
|
||||
'data': [ {'x': [0], 'y': [0], 'mode': 'markers', 'name': 'None'} ],
|
||||
'layout': { 'title': 'initial values' }
|
||||
}
|
||||
)
|
||||
)
|
||||
]),
|
||||
dbc.Row([
|
||||
dbc.Col([
|
||||
html.Div(id='select-sensor-txt'),
|
||||
dcc.Dropdown(
|
||||
id='select-sensorid',
|
||||
options=[{'label': sensors[i]["sensorType"], 'value': i} for i in sensors],
|
||||
value=sensor),
|
||||
]),
|
||||
dbc.Col([
|
||||
html.Div(id='slider-min-txt'),
|
||||
dcc.Slider(
|
||||
id='slider-min',
|
||||
min=0,
|
||||
max=round(time.time()),
|
||||
step=600,
|
||||
value=0
|
||||
html.Div(id='slider-min-txt', style={'marginLeft': '5em', 'marginRight': '3em'}),
|
||||
html.Div([
|
||||
dcc.Slider(id='slider-min', min=0, max=round(time.time()), step=600,
|
||||
value=0 ),
|
||||
], style={'marginLeft': '5em', 'marginRight': '3em'}
|
||||
),
|
||||
]),
|
||||
dbc.Col([
|
||||
html.Div(id='slider-max-txt'),
|
||||
dcc.Slider(
|
||||
id='slider-max',
|
||||
min=0,
|
||||
max=round(time.time()),
|
||||
step=600,
|
||||
value=round(time.time())
|
||||
html.Div(id='slider-max-txt', style={'marginLeft': '3em', 'marginRight':
|
||||
'3em'}),
|
||||
html.Div([
|
||||
dcc.Slider(id='slider-max', min=0, max=round(time.time()), step=600,
|
||||
value=round(time.time())),
|
||||
], style={'marginLeft': '3em', 'marginRight': '3em'}
|
||||
),
|
||||
]),
|
||||
dbc.Col([
|
||||
html.Div(id='slider-limit-txt'),
|
||||
dcc.Slider(
|
||||
id='slider-limit',
|
||||
min=0,
|
||||
max=1000,
|
||||
step=10,
|
||||
value=0,
|
||||
html.Div(id='slider-limit-txt', style={'marginLeft': '3em', 'marginRight': '5em'}),
|
||||
html.Div([
|
||||
dcc.Slider(id='slider-limit', min=0, max=1000, step=10, value=0 ),
|
||||
], style={'marginLeft': '3em', 'marginRight': '5em'}
|
||||
),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
|
||||
|
||||
@app.callback(
|
||||
[Output('slider-min', 'min'), Output('slider-min', 'value'),
|
||||
Output('slider-max', 'min'), Output('select-sensor-txt', 'children')],
|
||||
[Input('select-sensorid', 'value')])
|
||||
Output('slider-max', 'min')],
|
||||
[Input('tabs-select-sensor', 'value')])
|
||||
def update_slider_min(sensorId):
|
||||
res = get_values(sensorId, 0, int(time.time()), 1)
|
||||
min_ts = 0
|
||||
|
|
@ -119,7 +104,8 @@ def update_slider_min(sensorId):
|
|||
min_ts = int(res["values"][0]["ts"])
|
||||
sensorType = res["sensorType"]
|
||||
|
||||
return min_ts, min_ts, min_ts, "Sensor: %s" % sensorType
|
||||
return min_ts, min_ts, min_ts
|
||||
|
||||
|
||||
@app.callback(
|
||||
Output('slider-limit-txt', 'children'),
|
||||
|
|
@ -145,29 +131,22 @@ def update_slider_max(value):
|
|||
|
||||
@app.callback(
|
||||
Output('graph-sensor-values', 'figure'),
|
||||
[Input('select-sensorid', 'value'), Input('slider-min', 'value'),
|
||||
[Input('tabs-select-sensor', 'value'), Input('slider-min', 'value'),
|
||||
Input('slider-max', 'value'), Input('slider-limit', 'value')])
|
||||
def update_graph_sensor_values(sensorId, min_ts, max_ts, limit):
|
||||
res = get_values(sensorId, min_ts, max_ts, limit)
|
||||
if "values" in res:
|
||||
v = res["values"]
|
||||
s = res["sensorType"]
|
||||
l = len(v)
|
||||
x = [time.strftime("%m%d-%H%M", time.localtime(float(v[i]["ts"]))) for i in range(len(v))]
|
||||
y = [v[i]["value"] for i in range(len(v))]
|
||||
else:
|
||||
s = sensorId
|
||||
x = [0]
|
||||
y = [0]
|
||||
|
||||
return {
|
||||
'data': [
|
||||
{'x': x, 'y': y, 'mode': 'markers', 'name': "%s" % (s)}
|
||||
],
|
||||
'layout': {
|
||||
'title': 'Data for sensor: %s (%d elements)' % (s, l)
|
||||
}
|
||||
|
||||
'data': [ {'x': x, 'y': y, 'mode': 'markers', 'name': "%s" % (s)} ],
|
||||
'layout': { 'title': 'Data for sensor: %s (%d elements)' % (s, len(x)) }
|
||||
}
|
||||
|
||||
if __name__ == '__main__':
|
||||
|
|
|
|||
Loading…
Reference in a new issue