homecontrol-dash: use tabs to select sensor

This commit is contained in:
Konstantin Koslowski 2019-11-14 21:39:04 +01:00
parent 09412adcfb
commit 6639e138b6

View file

@ -6,7 +6,6 @@ import dash_html_components as html
from dash.dependencies import Input, Output from dash.dependencies import Input, Output
import time import time
import requests import requests
from math import inf
URL_BASE="http://innocence:5000" URL_BASE="http://innocence:5000"
@ -36,8 +35,11 @@ def get_values(sensorId, min_ts, max_ts, limit):
sensors = get_sensors() sensors = get_sensors()
sensor = next(iter(sensors), None) 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] external_stylesheets = [dbc.themes.BOOTSTRAP]
meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}] 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=[ app.layout = html.Div(children=[
html.H1(children='dashboard.ykonni.de'), html.H1(children='dashboard.ykonni.de'),
dbc.Row([
html.Div(children=''' dbc.Col(dcc.Tabs(id="tabs-select-sensor", value=sensor, children=tabs))
visualize sensor data ]),
'''),
dbc.Row([ dbc.Row([
dbc.Col( dbc.Col(
dcc.Graph( dcc.Graph(
id='graph-sensor-values', id='graph-sensor-values',
figure={ figure={
'data': [ 'data': [ {'x': [0], 'y': [0], 'mode': 'markers', 'name': 'None'} ],
{'x': [0], 'y': [0], 'mode': 'markers', 'name': 'None'} 'layout': { 'title': 'initial values' }
],
'layout': {
'title': 'initial values'
}
} }
) )
) )
]), ]),
dbc.Row([ dbc.Row([
dbc.Col([ dbc.Col([
html.Div(id='select-sensor-txt'), html.Div(id='slider-min-txt', style={'marginLeft': '5em', 'marginRight': '3em'}),
dcc.Dropdown( html.Div([
id='select-sensorid', dcc.Slider(id='slider-min', min=0, max=round(time.time()), step=600,
options=[{'label': sensors[i]["sensorType"], 'value': i} for i in sensors], value=0 ),
value=sensor), ], style={'marginLeft': '5em', 'marginRight': '3em'}
]),
dbc.Col([
html.Div(id='slider-min-txt'),
dcc.Slider(
id='slider-min',
min=0,
max=round(time.time()),
step=600,
value=0
), ),
]), ]),
dbc.Col([ dbc.Col([
html.Div(id='slider-max-txt'), html.Div(id='slider-max-txt', style={'marginLeft': '3em', 'marginRight':
dcc.Slider( '3em'}),
id='slider-max', html.Div([
min=0, dcc.Slider(id='slider-max', min=0, max=round(time.time()), step=600,
max=round(time.time()), value=round(time.time())),
step=600, ], style={'marginLeft': '3em', 'marginRight': '3em'}
value=round(time.time())
), ),
]), ]),
dbc.Col([ dbc.Col([
html.Div(id='slider-limit-txt'), html.Div(id='slider-limit-txt', style={'marginLeft': '3em', 'marginRight': '5em'}),
dcc.Slider( html.Div([
id='slider-limit', dcc.Slider(id='slider-limit', min=0, max=1000, step=10, value=0 ),
min=0, ], style={'marginLeft': '3em', 'marginRight': '5em'}
max=1000,
step=10,
value=0,
), ),
]), ]),
]), ]),
]) ])
@app.callback( @app.callback(
[Output('slider-min', 'min'), Output('slider-min', 'value'), [Output('slider-min', 'min'), Output('slider-min', 'value'),
Output('slider-max', 'min'), Output('select-sensor-txt', 'children')], Output('slider-max', 'min')],
[Input('select-sensorid', 'value')]) [Input('tabs-select-sensor', 'value')])
def update_slider_min(sensorId): def update_slider_min(sensorId):
res = get_values(sensorId, 0, int(time.time()), 1) res = get_values(sensorId, 0, int(time.time()), 1)
min_ts = 0 min_ts = 0
@ -119,7 +104,8 @@ def update_slider_min(sensorId):
min_ts = int(res["values"][0]["ts"]) min_ts = int(res["values"][0]["ts"])
sensorType = res["sensorType"] sensorType = res["sensorType"]
return min_ts, min_ts, min_ts, "Sensor: %s" % sensorType return min_ts, min_ts, min_ts
@app.callback( @app.callback(
Output('slider-limit-txt', 'children'), Output('slider-limit-txt', 'children'),
@ -145,29 +131,22 @@ def update_slider_max(value):
@app.callback( @app.callback(
Output('graph-sensor-values', 'figure'), 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')]) Input('slider-max', 'value'), Input('slider-limit', 'value')])
def update_graph_sensor_values(sensorId, min_ts, max_ts, limit): def update_graph_sensor_values(sensorId, min_ts, max_ts, limit):
res = get_values(sensorId, min_ts, max_ts, limit) res = get_values(sensorId, min_ts, max_ts, limit)
if "values" in res: if "values" in res:
v = res["values"] v = res["values"]
s = res["sensorType"] 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))] 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))] y = [v[i]["value"] for i in range(len(v))]
else: else:
s = sensorId s = sensorId
x = [0] x = [0]
y = [0] y = [0]
return { return {
'data': [ 'data': [ {'x': x, 'y': y, 'mode': 'markers', 'name': "%s" % (s)} ],
{'x': x, 'y': y, 'mode': 'markers', 'name': "%s" % (s)} 'layout': { 'title': 'Data for sensor: %s (%d elements)' % (s, len(x)) }
],
'layout': {
'title': 'Data for sensor: %s (%d elements)' % (s, l)
}
} }
if __name__ == '__main__': if __name__ == '__main__':