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…
	
	Add table
		Add a link
		
	
		Reference in a new issue