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
|
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__':
|
||||||
|
|
Loading…
Reference in a new issue