homecontrol-dash: use tabs to select sensor

homecontrol-dash.py

@@ -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__':