def update_output(Churn_Prediction): """Updates LED indicator based on if a user is churned or subscribed""" # Churn option if Churn_Prediction == 'Churned': return html.Div([ daq.Indicator(color='red', label={ 'label': 'Churned', 'style': { 'fontSize': 40 } }, labelPosition='bottom', value=True, size=100) ]) else: return html.Div([ daq.Indicator( color='green', label={ 'label': 'Subscribed', 'style': { 'fontSize': 40 } }, labelPosition='bottom', value=True, size=100, ) ])
def indicator(cur_price, pre_price): if cur_price > pre_price: return daq.Indicator(color="green", size=10) elif cur_price == pre_price: return daq.Indicator(color="violet", size=10) else: return daq.Indicator(color="red", size=10)
def com_inputs(): # options_list = get_devices() # options = [{'label': a, 'value': a} for a in options_list] options = [] return html.Div(style={ 'width': '20%', 'height': 270, 'padding': '20px', 'marginRight': 5, 'float': 'left', 'backgroundColor': colors['background'], 'borderStyle': 'solid', 'borderColor': '#616161' }, children=[ html.Label("Tone Generator"), dcc.Dropdown(id='tone_com', options=options, persistence=True), html.Br(), html.Label("Power Supply"), dcc.Dropdown(id='power_com', options=options, persistence=True), html.Br(), html.Div(style={'display': 'flex'}, children=[ html.Button('Connect', id='connect', n_clicks=0), daq.Indicator(id='connection_statusT', color=colors['off'], value=True, style={ 'marginLeft': 10, 'marginTop': 10 }), daq.Indicator(id='connection_statusP', color=colors['off'], value=True, style={ 'marginLeft': 10, 'marginTop': 10 }) ]), html.Div(id='connect_container', children=''), html.Div(id='com_inputs') ])
def returnIndoorIndicators(): totalLayout = [] myLabelLayout = [] myIndicatorLayout = [] myLabelLayout.append(html.H6("Indoor Sensor Battery Channels"), ) for IndoorSensor in range(1, 9): myColor = getIndoorStatus(IndoorSensor) myIndicatorLayout.append( daq.Indicator(id={ 'type': 'SPdynamic', 'index': IndoorSensor }, color=myColor, label="Channel " + str(IndoorSensor), value=True, style={'margin': '10px'})) totalLayout.append(dbc.Row(myLabelLayout)) totalLayout.append(dbc.Row(myIndicatorLayout)) return totalLayout
def get_node_status(agent, staker_address, current_period, last_confirmed_period) -> html.Td: missing_confirmations = current_period - last_confirmed_period worker = agent.get_worker_from_staker(staker_address) if worker == BlockchainInterface.NULL_ADDRESS: missing_confirmations = BlockchainInterface.NULL_ADDRESS color_codex = { -1: ('green', 'OK'), # Confirmed Next Period 0: ('#e0b32d', 'Pending'), # Pending Confirmation of Next Period current_period: ('#525ae3', 'Idle'), # Never confirmed BlockchainInterface.NULL_ADDRESS: ('red', 'Headless') # Headless Staker (No Worker) } try: color, status_message = color_codex[missing_confirmations] except KeyError: color, status_message = 'red', f'{missing_confirmations} Unconfirmed' status_cell = daq.Indicator(id='Status', color=color, value=True, label=status_message, labelPosition='right', size=25) # pixels status = html.Td(status_cell) return status
def returnOutdoorIndicator(): totalLayout = [] myLabelLayout = [] myIndicatorLayout = [] myLabelLayout.append( html. H6("WeatherRack2 Battery Status9 (Green=Good, Red=Low, Gray=Off Air)"), ) myColor = getOutdoorStatus() myIndicatorLayout.append( daq.Indicator(id={ 'type': 'SPdynamic', 'index': 0 }, color=myColor, label="Outdoor", value=True, style={'margin': '10px'})) totalLayout.append(dbc.Row(myLabelLayout)) totalLayout.append(dbc.Row(myIndicatorLayout)) return totalLayout
def _get_row_contents(self, item, idx): """Build column content. :param item: e.g. 'F1' or 'F12' :param idx: Counting variable of items :return: list of dicts explaining the div attributes """ div_id = item + self.suffix_row gradbar_id = f'F{idx}' + self.suffix_gradbar # special naming # cos it is explicitly handled in spc-custom-styles.css sparkline_graph_id = item + self.suffix_sparkline_graph is_crit_id = item + self.suffix_is_crit_indicator eol_id = item + self.suffix_eol max_bars = self.grad_bars_max div_attrs = [div_id, None, {"id": item, "children": item}, # form nr {"id": gradbar_id + "_container", # Haltbarkeit "children": daq.GraduatedBar( id=gradbar_id, showCurrentValue=False, max=max_bars, size=140, color={ "ranges": { "#92e0d3": [0, max_bars*self.attrition_thresh_1], "#f4d44d ": [max_bars*self.attrition_thresh_1, max_bars*self.attrition_thresh_2], "#f45060": [max_bars*self.attrition_thresh_2, max_bars], } }, value=max_bars * self.dm.relative_attritions_per_form[item]) }, {"id": item + "_sparkline", # Erwartete Abnutzung "children": dcc.Graph( id=sparkline_graph_id, style={"width": "100%", "height": "95%"}, config={ "staticPlot": False, "editable": False, "displayModeBar": False, }, figure=go.Figure(self._get_sparkline_config(item)), ), }, { # form end of life 'id': eol_id, 'children': self.dm.next_maintenance(item) }, { # is form over 80% of its life in the next 3 months? "id": is_crit_id + '_container', "children": daq.Indicator( id=is_crit_id, value=True, color=self.color_range[self.dm.form_is_critical(item)], size=12 ), }, ] return div_attrs
def make_ident(k, i, j, size=15): return html.Div(id='id-box' + str(k) + str(i) + str(j), style={'width': '7%'}, className="six columns", children=[ daq.Indicator( id='my-daq-indicator' + str(k) + str(i) + str(j), value=True, color="#00cc96", size=size, ) ])
def indicator(id, label, value, color): return html.Div( [ label + ': ', value, daq.Indicator( color=color, value=True ) ], id=id, style={'display': 'inline-block'} )
def _render_loader_checks(self, loader_checks): color_map = {"done": "blue", "running": "green"} component_cards = [] for component, data in loader_checks.items(): elements = [html.H4(component.capitalize())] for app_id, services in data.items(): elements.append(html.P(app_id, style={"fontSize": "12pt"})) for service_name, tasks in services.items(): item = dbc.ListGroupItem( [ html.P( service_name, style={ "fontSize": "10pt", "marginTop": "10px", "marginRight": "70px", }, ), html.Div( [ daq.Indicator( id= f"{service_name.lower().replace(' ', '-')}-health-indicator-{task_idx}", color=color_map.get(status, "red"), style={ "margin": "15px", "vertical-align": "middle", }, ) for task_idx, status in enumerate( tasks.values()) ], style={"display": "flex"}, ), ], style={ "display": "flex", "flex-direction": "row", "justify-content": "space-between", }, ) elements.append(item) component_cards.append( dbc.Card( id=f"processor-checks-dashboard-{component}", children=elements, style={ "width": "400px", "margin": "30px", "padding": "10px" }, )) return component_cards
def get_sensors_status(): sensors_status = db.get_sensor_status() led_color = "green" name = "Sensors Connected" for i in range(len(sensors_status)): if not sensors_status.loc[i, "online"]: led_color = "red" name = "Some Sensors Disconnected" break led = daq.Indicator(labelPosition="bottom", color=led_color, label=name) return led
def get_sensors_status(): sensors_csv = data_file_location + "/sensors_status.csv" sensors_status = pd.read_csv(sensors_csv) led_color = "green" name = "Sensors Connected" for i in range(len(sensors_status)): if sensors_status.loc[i, "timeout"] == "invalid": led_color = "red" name = "Some Sensors Disconnected" led = daq.Indicator(labelPosition="bottom", color=led_color, label=name) return led
def _render_content(self, service_checks): return [ dbc.CardBody( dbc.ListGroup([ dbc.ListGroupItem( [ html.H5( service["name"], style={ "text-align": "start", "margin-right": "30px", }, ), html.P( service["status"], style={ "paddingTop": "10px", "margin-end": "30px" }, ), daq.Indicator( id= f"{service['name'].lower().replace(' ', '-')}-health-indicator", color=service["color"], style={ "margin": "15px", "vertical-align": "middle", }, ), ], style={ "display": "flex", "flex-direction": "row", "justify-content": "flex-end", }, ) for service in service_checks ]), ) ]
def returnIndicators(): totalLayout = [] wirelessJSON = readJSON.getJSONValue("WirelessDeviceJSON") for singleWireless in wirelessJSON: myLabelLayout = [] valveStatus = returnLatestValveRecord(singleWireless['id'] ) myLabelLayout.append( html.H6(singleWireless['name'] +"/"+singleWireless['id'], ) ) myIndicatorLayout = [] for valve in range(1,9): currentValue = returnIndicatorValue(valveStatus, valve) if (currentValue): myColor = "greenyellow" else: myColor = "red" myIndicatorLayout.append( daq.Indicator( id = {'type' : 'SPdynamic', 'index': valve , 'DeviceID' : singleWireless['id'] }, color = myColor, label="Valve "+str(valve), value=True, style={ 'margin': '10px' } ) ) #myIndicatorCount = myIndicatorCount +1 totalLayout.append(dbc.Row( myLabelLayout)) totalLayout.append(dbc.Row(myIndicatorLayout)) return totalLayout
"width": "86%", "top": "26%", "right": "4%", "position": "absolute", }, ), html.Div([ html.Div( [ daq.Indicator( id="LED-state", label="LED ON/OFF", value=True, className="two columns", color="#EF553B", style={ "textAlign": "center", "marginLeft": "12%", "paddingTop": "13%", "marginRight": "6%", }, ), html.Div( [ html.H6( "Elbow Up", style={ "textAlign": "center", "font-size": "1.1rem", "position": "relative", "left": "19px",
summaryCheck = [] check_summary = Keywords() summaryCheck.append({'id':'nirc2-alad-keys-check', 'LIBRARY':'alad', 'KEYWORD':'itime'}) summaryCheck.append({'id':'nirc2-motor-daemon-check', 'LIBRARY':'nirc2', 'KEYWORD':'lock'}) summaryCheck.append({'id':'nirc2-motor-key-check', 'LIBRARY':'nirc2', 'KEYWORD':'camraw'}) summaryCheck.append({'id':'nirc2-io-daemon-check', 'LIBRARY':'nirc2', 'KEYWORD':'tm_temp3'}) rootLayout1 = html.Div([ html.Div(id='nirc2-summary-container', children=[ html.Div(className='indicator-box'+class_theme['dark'], id='nirc2-summary-container1', children=[ html.H4('Alad Keys Check'), daq.Indicator( id='nirc2-alad-keys-check', value=True, color='blue',height=50, label='Loading...', width = 50 ), ]), html.Div(className='indicator-box'+class_theme['dark'], id='nirc2-summary-container2', children=[ html.H4('Motor Daemon Check'), daq.Indicator( id='nirc2-motor-daemon-check', value=True, color='blue',height=50, label='Loading...', width = 50 ) ]), html.Div(className='indicator-box'+class_theme['dark'], id='nirc2-summary-container3', children=[
import dash import dash_daq as daq import dash_html_components as html external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.layout = html.Div([ daq.Indicator( id='my-indicator', label="Is it down", labelPosition="left", ), html.Button('On/Off', id='my-indicator-button', n_clicks=0), ]) if __name__ == '__main__': app.run_server(debug=True)
app.title = 'IV Logger' app.layout = html.Div(children=[ html.Div( id='main-row', className='row', children=[ html.Div( className='column left', children=[ daq.Indicator( id='my-daq-indicator', value=True, color="#FF6633", # className="two columns", size=25, style={ 'width': '50px', 'display': 'inline-block', 'vertical-align': 'middle' }), html.H4('Keithley 2400 Time-Current-Voltage Logger', style={ 'display': 'inline-block', 'vertical-align': 'middle' }), dcc.Graph(id='live-update-graph', figure={ "data": plot_data, "layout": plot_layout }),
'primary': '#00EA64', 'secondary': '#6E6E6E' } light_vs_dark = {'Light': 'indicator-box', 'Dark': 'indicator-box-dark'} rootLayout = html.Div([ html.Div(id='SERVER-container', children=[ html.H1("All Servers"), html.Div(className='indicator-box', id='temperature-servers', children=[ html.H4('Temperature'), daq.Indicator(id='kt1s-status', value=True, color='blue', label='kt1s'), daq.Indicator(id='kt2s-status', value=True, color='blue', label='kt2s') ]), html.Div(className='indicator-box', id='power-servers', children=[ html.H4("Power"), daq.Indicator(id='kp1s-status', value=True, color='blue', label='kp1s'), daq.Indicator(id='kp2s-status',
min=0, max=10, value=6, color=theme['primary'], id='darktheme-daq-gauge', className='dark-theme-control' ), html.Br(), daq.GraduatedBar( value=4, color=theme['primary'], id='darktheme-daq-graduatedbar', className='dark-theme-control' ), html.Br(), daq.Indicator( value=True, color=theme['primary'], id='darktheme-daq-indicator', className='dark-theme-control' ), html.Br(), daq.Knob( min=0, max=10, value=6, id='darktheme-daq-knob', className='dark-theme-control' ), html.Br(), daq.LEDDisplay( value="3.14159", color=theme['primary'], id='darktheme-daq-leddisplay', className='dark-theme-control' ), html.Br(),
def updateLegend(eles): if eles.get('nodes'): eleCounter = Counter( [ele['data']['type'] for ele in eles['nodes']]) else: eleCounter = {} return html.Table( id='data-table', children=[ html.Tr(className="tablerows", children=[ html.Td(className="legendindicator", children=[ daq.Indicator(id='WPA2-led', value="True", color=neo.WPA2_COLOR) ]), html.Td(className="legendvalue", children="WPA2"), html.Td(className="legendvalue", children=eleCounter.get('WPA2') or "-") ]), html.Tr(className="tablerows", children=[ html.Td(className="legendindicator", children=[ daq.Indicator(id='WPA-led', value="True", color=neo.WPA_COLOR) ]), html.Td(className="legendvalue", children="WPA"), html.Td(className="legendvalue", children=eleCounter.get('WPA') or "-") ]), html.Tr(className="tablerows", children=[ html.Td(className="legendindicator", children=[ daq.Indicator(id='WEP-led', value="True", color=neo.WEP_COLOR) ]), html.Td(className="legendvalue", children="WEP"), html.Td(className="legendvalue", children=eleCounter.get('WEP') or "-") ]), html.Tr(className="tablerows", children=[ html.Td(className="legendindicator", children=[ daq.Indicator(id='Open-led', value="True", color=neo.OPEN_COLOR) ]), html.Td(className="legendvalue", children="Open"), html.Td(className="legendvalue", children=eleCounter.get('Open') or "-") ]), html.Tr(className="tablerows", children=[ html.Td(className="legendindicator", children=[ daq.Indicator( id='Client-led', value="True", color=neo.CLIENT_COLOR) ]), html.Td(className="legendvalue", children="Client"), html.Td(className="legendvalue", children=eleCounter.get('Client') or "-") ]), html.Tr(className="tablerows", children=[ html.Td(className="legendindicator", children=[ daq.Indicator(id='AP-led', value="True", color=neo.AP_COLOR) ]), html.Td(className="legendvalue", children="AP"), html.Td(className="legendvalue", children=eleCounter.get('AP') or "-") ]), ])
"display": "flex", "justify-content": "center", "align-items": "center", "marginRight": "3%", }, ), html.Br(), html.Div( [ daq.Indicator( id="green-good", color="#00cc96", label="Plug in", labelPosition="bottom", value=True, className="one columns", style={ "paddingLeft": "19%", "paddingRight": "11%", "textAlign": "center", }, ), html.Div( id="bottom-I", style={ "background": "#0D76BF", "border-radius": "50%", "height": "25px", "width": "25px", "position": "relative", "box-shadow":
html.H4('Position'), html.Div(style={'padding': 10}), html.Div( style={'columnCount': 2}, children=[ html.Div('- Up: ', style={ 'padding': '1px 0px 0px 60px', 'fontSize': 20 }), daq.Indicator( id='front-led-up', value=True, # color="green", style={ 'padding': '35px 0px 20px 10px', 'borderColor': colors['led'] }, size=30) ]), html.Div( style={'columnCount': 2}, children=[ html.Div('- Down: ', style={ 'padding': '10px 0px 0px 60px', 'fontSize': 20 }), daq.Indicator(
def returnPiThrottled(): totalLayout = [] piLabelLayout = [] piIndicatorLayout = [] piUVDColor = GREEN piAFCColor = GREEN piCTColor = GREEN piSTLAColor = GREEN piUVHOColor = GREEN piAFCHOColor = GREEN piSTLHOColor = GREEN piATHOColor = GREEN piSTLHOColor = GREEN throttle_states = getPiThrottled() #print ("Throttle tilanne: ", throttle_states) for bit in throttle_states['breakdown']: #print("Now: ", bit) if throttle_states['breakdown'][bit]: #print("State:", throttle_states['breakdown'][bit]) if bit == '0': piUVDColor = "red" elif bit == '1': piAFCColor = "red" elif bit == '2': piCTColor = "red" elif bit == '3': piSTLAColor = "red" elif bit == '16': piUVHOColor = "red" elif bit == '17': piAFCHOColor = "red" elif bit == '18': piATHOColor = "red" elif bit == '19': piSTLHOColor = "red" piLabelLayout.append( html.H6([ "Pi CPU Throttled Status (Green=Good, Red=Bad) ", html.A("Info-link", href="https://pypi.org/project/vcgencmd") ]), ) piIndicatorLayout.append( daq.Indicator(id={ 'type': 'VSPdynamic', 'index': 100 }, color=piUVDColor, label="Under-volted", value=True, style={'margin': '10px'})) piIndicatorLayout.append( daq.Indicator(id={ 'type': 'VSPdynamic', 'index': 110 }, color=piAFCColor, label="Capped", value=True, style={'margin': '10px'})) piIndicatorLayout.append( daq.Indicator(id={ 'type': 'VSPdynamic', 'index': 111 }, color=piCTColor, label="Throttled", value=True, style={'margin': '10px'})) piIndicatorLayout.append( daq.Indicator(id={ 'type': 'VSPdynamic', 'index': 112 }, color=piSTLAColor, label="Soft temp limit", value=True, style={'margin': '10px'})) piIndicatorLayout.append( daq.Indicator(id={ 'type': 'VSPdynamic', 'index': 113 }, color=piUVHOColor, label="Has Under-volted", value=True, style={'margin': '10px'})) piIndicatorLayout.append( daq.Indicator(id={ 'type': 'VSPdynamic', 'index': 114 }, color=piAFCHOColor, label="Has Capped", value=True, style={'margin': '10px'})) piIndicatorLayout.append( daq.Indicator(id={ 'type': 'VSPdynamic', 'index': 115 }, color=piATHOColor, label="Has Throttled", value=True, style={'margin': '10px'})) piIndicatorLayout.append( daq.Indicator(id={ 'type': 'VSPdynamic', 'index': 116 }, color=piSTLHOColor, label="Has Soft temp limit", value=True, style={'margin': '10px'})) totalLayout.append(dbc.Row(piLabelLayout)) totalLayout.append(dbc.Row(piIndicatorLayout)) return totalLayout
style={ "display": "inline-block", 'borderWidth': '1px' }) ]), html.H1(children='Monitoring', style={ 'textAlign': 'center', 'colors': colors['text'] }), html.H2(children='Heartbeat', style={ 'textAlign': 'center', 'colors': colors['text'] }), daq.Indicator(id='heartbeat-source'), daq.Indicator(id='heartbeat-table-generator'), daq.Indicator(id='heartbeat-sink'), html.H2(children='Uptime Graph', style={ 'textAlign': 'center', 'colors': colors['text'] }), dcc.Graph(id='s3-uptime-graph'), # daq.StopButton( # id='my-daq-stopbutton' # ), # dcc.Graph( # id='bar_graph2' # ),
dbc.Button("Start/Stop processing", id="submit-data", n_clicks=0), dbc.Spinner(html.Div(id="submiting-data")), ]), # Create Div to place a invisible element inside html.Div([ dcc.Input(id='upload-status', value='stop'), dcc.Input(id='csvreader-status', value=-1), dcc.Input(id='combinecsv-status', value='wait'), ], style={'display': 'none'}), # status indicators html.Div([ daq.Indicator(id='start-indicator', label="Files Uploaded", value=True, color='grey'), ], style={ 'width': '30%', 'display': 'inline-block' }), html.Div([ daq.Indicator(id='xlsx2csv-indicator', label="Parsing Files", value=True, color='grey'), ], style={ 'width': '30%', 'display': 'inline-block'
def generate_metric_row_helper(stopped_interval, index): item = params[index] div_id = item + suffix_row button_id = item + suffix_button_id sparkline_graph_id = item + suffix_sparkline_graph count_id = item + suffix_count ooc_percentage_id = item + suffix_ooc_n ooc_graph_id = item + suffix_ooc_g indicator_id = item + suffix_indicator return generate_metric_row( div_id, None, { "id": item, "className": "metric-row-button-text", "children": html.Button( id=button_id, className="metric-row-button", children=item, title="Click to visualize live SPC chart", n_clicks=0, ), }, { "id": count_id, "children": "0" }, { "id": item + "_sparkline", "children": dcc.Graph( id=sparkline_graph_id, style={ "width": "100%", "height": "95%" }, config={ "staticPlot": False, "editable": False, "displayModeBar": False, }, figure=go.Figure({ "data": [{ "x": state_dict["Batch"]["data"].tolist() [:stopped_interval], "y": state_dict[item]["data"][:stopped_interval], "mode": "lines+markers", "name": item, "line": { "color": "#f4d44d" }, }], "layout": { "uirevision": True, "margin": dict(l=0, r=0, t=4, b=4, pad=0), "xaxis": dict( showline=False, showgrid=False, zeroline=False, showticklabels=False, ), "yaxis": dict( showline=False, showgrid=False, zeroline=False, showticklabels=False, ), "paper_bgcolor": "rgba(0,0,0,0)", "plot_bgcolor": "rgba(0,0,0,0)", }, }), ), }, { "id": ooc_percentage_id, "children": "0.00%" }, { "id": ooc_graph_id + "_container", "children": daq.GraduatedBar( id=ooc_graph_id, color={ "ranges": { "#92e0d3": [0, 3], "#f4d44d ": [3, 7], "#f45060": [7, 15], } }, showCurrentValue=False, max=15, value=0, ), }, { "id": item + "_pf", "children": daq.Indicator( id=indicator_id, value=True, color="#91dfd2", size=12), }, )
def generate_metric_row_helper(index): item = params[index] div_id = item + suffix_row button_id = item + suffix_button_id sparkline_graph_id = item + suffix_sparkline_graph count_id = item + suffix_count ooc_percentage_id = item + suffix_ooc_n ooc_graph_id = item + suffix_ooc_g indicator_id = item + suffix_indicator return generate_metric_row( div_id, None, { 'id': item, 'children': html.Button( id=button_id, children=item, title="Click to visualize live SPC chart", n_clicks=0 ) }, { 'id': count_id, 'children': '0' }, { 'id': item + '_sparkline', 'children': dcc.Graph( id=sparkline_graph_id, style={ 'width': '100%', 'height': '95%', }, config={ 'staticPlot': False, 'editable': False, 'displayModeBar': False }, figure=go.Figure({ 'data': [{'x': [], 'y': [], 'mode': 'lines+markers', 'name': item, 'line': {'color': 'rgb(255,209,95)'}}], 'layout': { 'uirevision': True, 'margin': dict( l=0, r=0, t=4, b=4, pad=0 ), 'paper_bgcolor': 'rgb(45, 48, 56)', 'plot_bgcolor': 'rgb(45, 48, 56)' } })) }, { 'id': ooc_percentage_id, 'children': '0.00%' }, { 'id': ooc_graph_id + '_container', 'children': daq.GraduatedBar( id=ooc_graph_id, color={"gradient": True, "ranges": {"green": [0, 3], "yellow": [3, 7], "red": [7, 15]}}, showCurrentValue=False, max=15, value=0 ) }, { 'id': item + '_pf', 'children': daq.Indicator( id=indicator_id, value=True, color=theme['primary'] ) } )
"textAlign": "center", "marginTop": "5%", "color": "" }, ), html.Br(), ]), html.Div( [ daq.Indicator( id="led-1", label="", labelPosition="bottom", value=True, className="one columns", style={ "textAlign": "center", "width": "0%" }, color="#72D1F8", width=16, height=40, ), daq.Indicator( id="led-2", label="", labelPosition="bottom", value=True, className="one columns", style={ "textAlign": "center", "width": "0%"
], className='row Title'), html.Div([ html.Div([ html.Div("Attached:", className="two columns"), html.Div("1041 - PhidgetSpatial 0/0/3 Basic", id="device-attached", className="four columns"), daq.ToggleSwitch(id='connection', label=['Disconnected', 'Connected'], value=True, className="five columns", size=25, style={'marginLeft': '4.5%'}), daq.Indicator(id="connection-est", value=True, className="one columns", style={'margin': '6px'}) ], className="row attachment"), html.Hr(style={ 'marginBottom': '0', 'marginTop': '0' }), html.Div([ html.Div("Version:", className="two columns"), html.Div("203", id="device-version", className="four columns"), html.Div("Serial Number:", className="two columns"), html.Div("478682", id="device-serial") ], className="row version-serial"), html.Div([