def generate_main_layout( theme='light', src_type='Voltage', mode_val='Single measure', fig=None, ): """generate the layout of the app""" source_label, measure_label = get_source_labels(src_type) source_unit, measure_unit = get_source_units(src_type) # As the trigger-measure btn will have its n_clicks reset by the reloading # of the layout we need to reset this one as well local_vars.reset_n_clicks() # Doesn't clear the data of the graph if fig is None: data = [] else: data = fig['data'] html_layout = [ html.Div( id="page-body-content", className='row', children=[ html.Div( id='figure-card', className='six columns', style={'backgroundColor': card_color[theme]}, children= [ html.P("IV Curve"), dcc.Graph( id='IV_graph', style={'width': '100%'}, figure={ 'data': data, 'layout': dict( paper_bgcolor=card_color[theme], plot_bgcolor=card_color[theme], automargin=True, font=dict( color=text_color[theme], size=12, ), xaxis={ 'color': grid_color[theme], 'gridcolor': grid_color[theme] }, yaxis={ 'color': grid_color[theme], 'gridcolor': grid_color[theme] } ) } ) ] ), html.Div( id='control-container', className='five columns', children=[ html.Div( # controls and options for the IV tracer id="up-control-card", style={'backgroundColor': card_color[theme], 'color': text_color[theme]}, children=[ html.Div( id="control-sections", children=[ html.Div( className='IV-source-options', children=[ html.Label("Sourcing", title='Choose whether you want to source voltage ' 'and measure current, or source current and measure voltage'), daq.ToggleSwitch( id='source-choice-toggle', label=['Voltage', 'Current'], style={'width': '150px', 'margin': 'auto'}, value=False ) ], ), html.Div( className='measure-options', children=[ html.Label('Measure mode', title='Choose if you want to do single measurement' ' or to start a sweep mode'), daq.ToggleSwitch( id="mode-choice-toggle", label=['Single measure', 'Sweep'], style={'width': '150px', 'margin': 'auto'}, value=False ) ] )]), daq.StopButton( id='clear-graph_btn', buttonText='Clear Graph', className='daq-button', size=120 ), daq.Indicator( id='clear-graph_ind', color=accent_color[theme], value=False ) ] ), html.Div( id='mid-control-card', style={'backgroundColor': card_color[theme], 'color': text_color[theme], 'marginTop': '10px'}, children=[ # Sourcing controls html.Div( id='source-div', children=[ # To perform single measures adjusting the source with a knob html.Div( id='single_div', style=single_div_toggle_style, children=[ daq.Knob( id='source-knob', size=100, value=0.00, min=0, max=10, color=accent_color[theme], label='%s (%s)' % ( source_label, source_unit ) ), daq.LEDDisplay( id="source-knob-display", label='Knob readout', value=0.00, color=accent_color[theme] ) ] ), # To perform automatic sweeps of the source html.Div( id='sweep_div', style=sweep_div_toggle_style, children=[ html.Div( className='sweep-div-row', children=[ html.Div( className='sweep-div-row', style={'width': '98%'}, children=[ html.Div( id='sweep-title', children=html.P( "%s sweep" % source_label )), html.Div( [ daq.Indicator( id='sweep-status', label='Sweep active', color=accent_color[theme], value=False ) ], title='Indicates if the sweep is running' ) ] ) ] ), html.Div( className='sweep-div-row', children=[ html.Div( className='sweep-div-row-inner', children= [ 'Start', daq.PrecisionInput( id='sweep-start', precision=4, label=' %s' % source_unit, labelPosition='right', value=0, ), ], title='The lowest value of the sweep' ), html.Div( className='sweep-div-row-inner', children=[ 'Stop', daq.PrecisionInput( id='sweep-stop', precision=4, label=' %s' % source_unit, labelPosition='right', value=10 ) ], title='The highest value of the sweep' )]), html.Div( className='sweep-div-row', children=[ html.Div( className='sweep-div-row-inner', children=[ 'Step', daq.PrecisionInput( id='sweep-step', precision=4, label=' %s' % source_unit, labelPosition='right', value=0.2 ) ], title='The increment of the sweep' ), html.Div( className='sweep-div-row-inner', children=[ 'Time of a step', daq.NumericInput( id='sweep-dt', value=0.2, min=0.01, style={'color': text_color[theme]} ), 's' ], title='The time spent on each increment' ) ] ) ] )]), # Measure button and indicator html.Div( id='trigger-div', children=[ daq.StopButton( id='trigger-measure_btn', buttonText='Single measure', className='daq-button', size=120, ), daq.Indicator( id='measure-triggered', color=accent_color[theme], value=False, label='Measure active' ), ] )]), html.Div( id="bottom-card", style={'backgroundColor': card_color[theme], 'color': text_color[theme], 'marginTop': '10px'}, children=[ # Display the sourced and measured values html.Div( id='measure-div', children=[ daq.LEDDisplay( id="source-display", label='Applied %s (%s)' % ( source_label, source_unit ), value=0.00, color=accent_color[theme] ), daq.LEDDisplay( id="measure-display", label='Measured %s (%s)' % ( measure_label, measure_unit ), value=0.0000, color=accent_color[theme] ) ] ) ] ) ] ) ] ) ] if theme == 'dark': return daq.DarkThemeProvider(children=html_layout) if theme == 'light': return html_layout
"370": "F#", "349": "F", "330": "E", "311": "D#", "294": "D", "277": "C#", "261": "C", } }, ), daq.StopButton( id="stop-beep", buttonText="Beep", style={ "display": "flex", "justify-content": "center", "align-items": "center", "paddingBottom": "19.5%", }, n_clicks=0, size=100, ), ]), ], style={ "border": "1px solid #2a3f5f", "border-radius": "5px", "paddingBottom": "5%", }, ) ]), ],
StopButton = html.Div(children=[ html.H1('Stop Button Examples and Reference'), html.Hr(), html.H3('Default Stop Button'), dcc.Markdown("An example of a default stop button without \ any extra properties."), dcc.Markdown(examples['stop-button'][0], style=styles.code_container), html.Div(examples['stop-button'][1], className='example-container', style={'overflow-x': 'initial'}), html.Hr(), html.H3('Label'), dcc.Markdown( "Set the label and label position with `label` and `labelPosition`."), ComponentBlock('''import dash_daq as daq daq.StopButton( label='Label', labelPosition='top' )''', style=styles.code_container), html.Hr(), html.H3('Size'), dcc.Markdown( "Adjust the size (width in pixels) of the stop button with `size`."), ComponentBlock('''import dash_daq as daq daq.StopButton( size=120, )''', style=styles.code_container), html.Hr(), html.H3('Button Text'), dcc.Markdown("Set the text displayed in the button `buttonText`."), ComponentBlock('''import dash_daq as daq daq.StopButton( buttonText='text', )''', style=styles.code_container), html.Hr(), html.H3('Disabled'), dcc.Markdown("Disable the button by setting `disabled=True`."), ComponentBlock('''import dash_daq as daq daq.StopButton( disabled=True, )''', style=styles.code_container), html.Hr(), html.H3("Stop Button Properties"), generate_prop_info('StopButton', lib=daq) ])
def generate_main_layout(theme='light', src_type='V', mode_val='single', fig=None, sourcemeter=iv_generator): """generate the layout of the app""" source_label, measure_label = get_source_labels(src_type) source_unit, measure_unit = get_source_units(src_type) source_max = get_source_max(src_type) if mode_val == 'single': single_style = { 'display': 'flex', 'flex-direction': 'column', 'alignItems': 'center' } sweep_style = {'display': 'none'} label_btn = 'Single measure' else: single_style = {'display': 'none'} sweep_style = { 'display': 'flex', 'flex-direction': 'column', 'alignItems': 'center' } label_btn = 'Start sweep' # As the trigger-measure btn will have its n_clicks reset by the reloading # of the layout we need to reset this one as well local_vars.reset_n_clicks() # Doesn't clear the data of the graph if fig is None: data = [] else: data = fig['data'] html_layout = [ html.Div( className='row', children=[ # graph to trace out the result(s) of the measurement(s) html.Div(id='IV_graph_div', className="eight columns", children=[ dcc.Graph(id='IV_graph', figure={ 'data': data, 'layout': dict(paper_bgcolor=bkg_color[theme], plot_bgcolor=bkg_color[theme], font=dict( color=text_color[theme], size=15, ), xaxis={ 'color': grid_color[theme], 'gridcolor': grid_color[theme] }, yaxis={ 'color': grid_color[theme], 'gridcolor': grid_color[theme] }) }) ]), # controls and options for the IV tracer html.Div( className="two columns", id='IV-options_div', children=[ html.H4( 'Sourcing', title='Choose whether you want to source voltage ' 'and measure current or source current and ' 'measure voltage'), dcc.RadioItems(id='source-choice', options=[{ 'label': 'Voltage', 'value': 'V' }, { 'label': 'Current', 'value': 'I' }], value=src_type), html.Br(), html.H4( 'Measure mode', title='Choose if you want to do single measurement' ' or to start a sweep'), dcc.RadioItems(id='mode-choice', options=[{ 'label': 'Single measure', 'value': 'single' }, { 'label': 'Sweep', 'value': 'sweep' }], value=mode_val), html.Br(), html.Div(daq.StopButton(id='clear-graph_btn', buttonText='Clear graph', size=150), style={ 'alignItems': 'center', 'display': 'flex', 'flex-direction': 'row' }), html.Br(), daq.Indicator(id='clear-graph_ind', value=False, style={'display': 'none'}) ]), # controls for the connexion to the instrument html.Div( id='instr_controls', children=[ html.H4(sourcemeter.instr_user_name, ), # A button to turn the instrument on or off html.Div(children=[ html.Div(id='power_button_div', children=daq.PowerButton( id='power_button', on='false')), html.Br(), html.Div(children=daq.Indicator( id='mock_indicator', value=sourcemeter.mock_mode, label='is mock?'), style={'margin': '20px'}, title='If the indicator is on, it means ' 'the instrument is in mock mode') ], style=h_style), # An input to choose the COM/GPIB port dcc.Input(id='instr_port_input', placeholder='Enter port name...', type='text', value=''), html.Br(), # A button which will initiate the connexion daq.StopButton(id='instr_port_button', buttonText='Connect', disabled=True), html.Br(), html.Div(id='instr_status_div', children="", style={'margin': '10 px'}) ], style={ 'display': 'flex', 'flex-direction': 'column', 'alignItems': 'center', 'justifyContent': 'space-between', 'border': '2px solid #C8D4E3', 'background': '#f2f5fa' }) ]), html.Div( id='measure_controls_div', className='row', children=[ # Sourcing controls html.Div( id='source-div', className="three columns", children=[ # To perform single measures adjusting the source with # a knob html.Div(id='single_div', children=[ daq.Knob(id='source-knob', value=0.00, min=0, max=source_max, label='%s (%s)' % (source_label, source_unit)), daq.LEDDisplay(id="source-knob-display", label='Knob readout', value=0.00) ], style=single_style), # To perfom automatic sweeps of the source html.Div( id='sweep_div', children=[ html.Div( id='sweep-title', children=html.H4("%s sweep:" % source_label)), html.Div( [ 'Start', html.Br(), daq.PrecisionInput( id='sweep-start', precision=4, min=0, max=source_max, label=' %s' % source_unit, labelPosition='right', value=1, style={'margin': '5px'}), ], title='The lowest value of the sweep', style=h_style), html.Div( [ 'Stop', daq.PrecisionInput( id='sweep-stop', precision=4, min=0, max=source_max, label=' %s' % source_unit, labelPosition='right', value=9, style={'margin': '5px'}) ], title='The highest value of the sweep', style=h_style), html.Div([ 'Step', daq.PrecisionInput( id='sweep-step', precision=4, min=0, max=source_max, label=' %s' % source_unit, labelPosition='right', value=source_max / 20., style={'margin': '5px'}) ], title='The increment of the sweep', style=h_style), html.Div( [ 'Time of a step', daq.NumericInput( id='sweep-dt', value=0.5, min=0.1, style={'margin': '5px'}), 's' ], title='The time spent on each increment', style=h_style), html.Div( [ daq.Indicator(id='sweep-status', label='Sweep active', value=False) ], title='Indicates if the sweep is running', style=h_style) ], style=sweep_style) ]), # measure button and indicator html.Div(id='trigger_div', className="two columns", children=[ daq.StopButton(id='trigger-measure_btn', buttonText=label_btn, size=150), daq.Indicator(id='measure-triggered', value=False, label='Measure active'), ]), # Display the sourced and measured values html.Div(id='measure_div', className="five columns", children=[ daq.LEDDisplay(id="source-display", label='Applied %s (%s)' % (source_label, source_unit), value="0.0000"), daq.LEDDisplay(id="measure-display", label='Measured %s (%s)' % (measure_label, measure_unit), value="0.0000") ]) ], style={ 'width': '100%', 'flexDirection': 'column', 'alignItems': 'center', 'justifyContent': 'space-between' }), html.Div(children=[ html.Div(children=dcc.Markdown(''' **What is this app about?** This is an app to show the graphic elements of Dash DAQ used to create an interface for an IV curve tracer using a Keithley 2400 SourceMeter. This mock demo does not actually connect to a physical instrument the values displayed are generated from an IV curve model for demonstration purposes. **How to use the app** First choose if you want to source (apply) current or voltage, using the radio item located on the right of the graph area. Then choose if you want to operate in a single measurement mode or in a sweep mode. ***Single measurement mode*** Adjust the value of the source with the knob at the bottom of the graph area and click on the `SINGLE MEASURE` button, the measured value will be displayed. Repetition of this procedure for different source values will reveal the full IV curve. ***Sweep mode*** Set the sweep parameters `start`, `stop` and `step` as well as the time spent on each step, then click on the button `START SWEEP`, the result of the sweep will be displayed on the graph. The data is never erased unless the button `CLEAR GRAPH is pressed` or if the source type is changed. You can purchase the Dash DAQ components at [ dashdaq.io](https://www.dashdaq.io/) '''), style={ 'max-width': '600px', 'margin': '15px auto 300 px auto', 'padding': '40px', 'alignItems': 'left', 'box-shadow': '10px 10px 5px rgba(0, 0, 0, 0.2)', 'border': '1px solid #DFE8F3', 'color': text_color[theme], 'background': bkg_color[theme] }) ]) ] if theme == 'dark': return daq.DarkThemeProvider(children=html_layout) elif theme == 'light': return html_layout
daq.Knob(id='stepper-knob', value=1, max=200, min=0), daq.Slider('step-slider', min=1, max=100, value=1, handleLabel={ "showCurrentValue": True, "label": "VALUE" }, step=1), daq.StopButton(buttonText='CW', id='step_cw', label='Default', n_clicks=0), daq.StopButton(buttonText='CCW', id='step_ccw', label='Default', n_clicks=0), ]) ], style={ 'display': 'block', 'margin-left': 'calc(50% - 110px)' }, ), html.Div([], id='value-container', style={'display': 'none'}),
def render_content(tab): if tab == 'tab-1': return html.Div([ html.H2('Race Setup'), dcc.Upload(id='upload-data', children=html.Div( ['Drag and Drop or ', html.A('Select Files')]), style={ 'width': '80%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', 'margin': '10px' }, multiple=True), # connect usb html.Div(id='output-data-upload'), html.H2('Track Setup'), html.H3('Connect to Track'), daq.StopButton(id='connect-button', buttonText='Connect'), html.Div(id='connect-results'), # default settings dcc.Markdown(children=tab1markdown_text), html.Button(id='setup-button'), html.H3(id='laneset-results'), html.H3(id='placeset-results'), html.H3(id='decimal-results'), html.H3(id='timeout-results'), ]) elif tab == 'tab-2': return html.Div(children=[ dcc.Interval( id='interval-component', interval=10 * 1000, # in milliseconds n_intervals=0), html.Div( id='main_cols', children=[ html.Div( id='race', children=[ daq.NumericInput(id='my-daq-numericinput', max=60, value=1, label='Race Number', labelPosition='top', min=1), daq.ToggleSwitch( id='edit', label='Editable', value=False), html.Div( id='lanes', children=[ html.H3('Lanes'), html.Div( id='lane1', children=[ html.H3('Lane 1'), html.Div([ daq.LEDDisplay( id='time1', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000") ]), html.Div([ html.H5(id='car1'), html.H6(id='name1'), ]) ], className="three columns"), html.Div( id='lane2', children=[ html.H3('Lane 2'), html.Div([ daq.LEDDisplay( id='time2', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000"), html.Div([ html.H5(id='car2'), html.H6(id='name2'), ]), ]) ], className="two columns"), html.Div( id='lane3', children=[ html.H3('Lane 3'), html.Div([ daq.LEDDisplay( id='time3', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000") ]), html.Div([ html.H5(id='car3'), html.H6(id='name3'), ]), ], className="two columns"), html.Div( id='lane4', children=[ html.H3('Lane 4'), html.Div([ daq.LEDDisplay( id='time4', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000"), html.Div([ html.H5(id='car4'), html.H6(id='name4'), ]), ]) ], className="two columns"), ], className="twelve columns"), html.Hr(id='line'), html.H4('Upcoming Races', className="eight column"), html.Div(id='next-race') ], style={ 'font-size': '200%', 'margin': '80px', 'text-align': 'center' }, className="eight columns") ]), # second column html.Div(children=[ daq.StopButton(id='button-results', buttonText='Get Results'), html.Div(id='results-button-output'), daq.StopButton(id='button-save', buttonText='Save Results'), html.Div(id='save-button-output'), #daq.StopButton(buttonText='Refresh leaderboard', id='Refresh'), html.H4('Fastest Single Race'), #generate_table(results_df, max_rows=15) #dash_table.DataTable( # id='leadtable', # columns=[{"name": i, "id": i} for i in resultsdf.columns], #data=resultsdf.to_dict('records') # ), ]) ]) elif tab == 'tab-3': #global results_df rf = resultsdf.groupby(['den', 'car', 'name'], as_index=False).agg({ "time": "mean" }).sort_values(['den', 'time'], ascending=True) #rf['time'] = rf['time'].map('{:,.3f}'.format) return dash_table.DataTable( id='final-board', columns=[{ "name": i, "id": i } for i in rf.columns], #columns=[['name','car','time']], data=rf.to_dict('records'), style_data_conditional=[{ 'if': { 'row_index': 'odd' }, 'backgroundColor': 'rgb(248, 248, 248)' }, { 'if': { 'column_id': 'time' }, 'backgroundColor': '#3D9970', 'color': 'white', }], style_as_list_view=True, )
), dcc.Input(id='location-text', type='text', value='', style={ "display": "flex", "justify-content": "center", "align-items": "center", 'display': 'inline-block', "width": "60%", }), daq.StopButton( id="submit-button", buttonText="Find", style={ "display": "flex", "justify-content": "center", "align-items": "center", "width": "100%", }, ), html.H3(id='output-submit', style={ "textAlign": "center", "width": "100%", "align-items": "flex-start", "color": "#DC143C" }), get_title("Latitude"), html.H4( id='output-latitude', style={
max=10, value=4, id='darktheme-daq-numericinput', className='dark-theme-control'), html.Br(), daq.PowerButton(on=True, color=theme['primary'], id='darktheme-daq-powerbutton', className='dark-theme-control'), html.Br(), daq.PrecisionInput(precision=4, value=299792458, id='darktheme-daq-precisioninput', className='dark-theme-control'), html.Br(), daq.StopButton(id='darktheme-daq-stopbutton', className='dark-theme-control'), html.Br(), daq.Slider(min=0, max=100, value=30, targets={"25": { "label": "TARGET" }}, color=theme['primary'], id='darktheme-daq-slider', className='dark-theme-control'), html.Br(), daq.Tank(min=0, max=10, value=5, id='darktheme-daq-tank',
def ResetView(): return daq.StopButton( id='reset-view-button', buttonText='Reset View', n_clicks=0 )
def render_content(tab): if tab == 'tab-1': return html.Div([ html.H2('Race Setup'), dcc.Upload( id='upload-data', children=html.Div([ 'Drag and Drop or ', html.A('Select Files') ]), style={ 'width': '80%', 'height': '60px', 'lineHeight': '60px', 'borderWidth': '1px', 'borderStyle': 'dashed', 'borderRadius': '5px', 'textAlign': 'center', 'margin': '10px' }, multiple=True ), # connect usb html.Div(id='output-data-upload'), html.H2('Track Setup'), html.H3('Connect to Track'), daq.StopButton(id='connect-button', buttonText='Connect'), html.Div(id='connect-results'), # default settings dcc.Markdown(children='tab1markdown_text'), html.Button(id='setup-button'), html.H3(id='laneset-results'), html.H3(id='placeset-results'), html.H3(id='decimal-results'), html.H3(id='timeout-results'), ]) elif tab == 'tab-2': return html.Div(children=[ dcc.Interval( id='interval-component', interval=10*1000, # in milliseconds n_intervals=0 ), html.Div(id='main_cols',children=[ html.Div(id='race', children=[ daq.NumericInput( id='my-daq-numericinput', max=60, value=1, label='Race Number', labelPosition='top', min=1), html.Div(id='lanes', children=[ html.H3('Lanes'), html.Div(id='lane1', children=[ html.H3('Lane 1'), html.Div([ html.H5(id='car1'), html.H4(id='name1'), ]), html.Div([ daq.LEDDisplay( id='time1', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ]), html.Div(id='lane2', children=[ html.H3('Lane 2'), html.Div([ html.H5(id='car2'), html.H4(id='name2'), ]), html.Div([ daq.LEDDisplay( id='time2', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ]), html.Div(id='lane3', children=[ html.H3('Lane 3'), html.Div([ html.H5(id='car3'), html.H4(id='name3'), ]), html.Div([ daq.LEDDisplay( id='time3', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ]), html.Div(id='lane4', children=[ html.H3('Lane 4'), html.Div([ html.H5(id='car4'), html.H4(id='name4'), ]), html.Div([ daq.LEDDisplay( id='time4', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ]), ]), daq.StopButton(id='button-results', buttonText='Get Results'), html.Div(id='results-button-output'), daq.StopButton(id='button-save', buttonText='Save Results'), html.Div(id='save-button-output'), daq.StopButton(buttonText='Refresh leaderboard', id='Refresh'), html.H4('Upcoming Races', className="eight column"), html.Div(id='next-race')], style={'font-size': '200%', 'margin': '80px' , 'text-align': 'center'}, className="eight columns")], # second column html.Div(children=[ html.H4('Fastest Single Race'), html.Div(id='leader-board', className="three columns", style={'font-size': '150%','border': 'solid'}) ]) ) ]) elif tab == 'tab-3': return html.Div(children=[ gen_tab3() # each tab reloads the csv file ])
dcc.Graph( id='production-graph', figure=go.Figure({ 'data': [{'x': [], 'y':[]}], 'layout': go.Layout( yaxis={ 'title': 'Total units' }, height=505 ) }), ) ]), html.Div(id='status-container', children=[ html.Div(className='indicator-box', children=[ daq.StopButton(id='stop-button') ]), html.Div(className='indicator-box', children=[ daq.StopButton(id='new-batch', buttonText='Start new batch'), ]), html.Div(className='indicator-box', children=[ html.H4("Batch number"), daq.LEDDisplay( id='batch-number', value="124904", color='blue' ), html.Div( id='batch-started' ) ]),
def gen_tab2(): #resultsdf = pd.read_csv('./resultsFile.csv') #resultsdf = pd.DataFrame(columns=['race', 'lane', 'car', 'name', 'time', 'place', 'den', 'category']) return html.Div(id='main_cols',children=[ html.Div(id='race', children=[ daq.NumericInput( id='my-daq-numericinput', max=60, value=1, label='Race Number', labelPosition='top', min=1), html.Div(id='lanes', children=[ html.H3('Lanes'), #html.H3(results_df.loc['race']), html.Div(id='lane1', children=[ html.H3('Lane 1'), html.Div(id='name1'), #html.Div(id='time1') html.Div([ daq.LEDDisplay( id='lane1-leddisplay', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ], className="two columns"), html.Div(id='lane2', children=[ html.H3('Lane 2'), html.Div(id='name2'), html.Div(id='time2') ], className="two columns"), html.Div(id='lane3', children=[ html.H3('Lane 3'), html.Div(id='name3'), html.Div(id='time3') ], className="two columns"), html.Div(id='lane4', children=[ html.H3('Lane 4'), html.Div(id='name4'), html.Div(id='time4') ], className="two columns"), dcc.Checklist(options=[ {'label': 'Save Results', 'value': 'Good'}, {'label': 'Do not', 'value': 'bad'}, ], value=['MTL', 'SF'] ], className="twelve columns", style={'border': 'solid', 'text-align': 'center'}), daq.StopButton(id='button-results', buttonText='Get Results'), daq.StopButton(id='button-end', buttonText='Get Results'), html.Div(id='results-button-output'), html.Div(id='results-final-output'), #html.Div(id='race-controls', children=[ # daq.StopButton(id='button-results', buttonText='Get Results'), # html.Div(id='results-button-output'), #html.Button('Force Race End', id='button-end'), #html.Button('Next Race', id='button-next'), # ], # style={'margin': '80px' , 'text-align': 'center'}, # className="eight columns"), html.H4('Upcoming Races', className="eight column"), html.Div(id='next-race')], style={'font-size': '200%', 'margin': '80px' , 'text-align': 'center'}, className="eight columns"), html.Div(id='leader-board', children=[ html.H3('Fastest Times'), #html.Table([html.Tr(['Name ','Den ', 'Time '])]), generate_table(resultsdf[['name','time']]), ], className="two columns", style={'border': 'solid'}), ], ) # Callback after upload @app.callback(Output('output-data-upload', 'children'), [Input('upload-data', 'contents')], [State('upload-data', 'filename'), State('upload-data', 'last_modified')]) def update_output(list_of_contents, list_of_names, list_of_dates): if list_of_contents is not None: # for testing load results #Plotlyresultsdf = pd.read_csv('./resultsFile.csv') # Read from CSV to load Races #races = pd.read_csv('Races.csv') #races = races.set_index('Race Number') # Read list of racers and cars from CSV #racers = pd.read_csv('Racers.csv') #racers = racers.set_index('Number') children = [ parse_contents(c, n, d) for c, n, d in zip(list_of_contents, list_of_names, list_of_dates)] return children # Connect Call back should read and set statuses of radio buttons # callback for race change # update cars for a lane, lanes will pick up their value ### how do we update more values than children, can we call out specific values ## can we update style to show winner?? @app.callback( Output('next-race', 'children'), [Input('my-daq-numericinput', 'value')]) def update_output(value): df = races.loc[value+1:value+3] return dash_table.DataTable( id='table', columns=[{"name": i, "id": i} for i in df.columns], data=df.to_dict('records') ) ## lane 1 @app.callback( Output('name1', 'children'), [Input('my-daq-numericinput', 'value')]) def update_output(value): carNum = races.loc[value,'Lane 1'] name = racers.loc[carNum,'Name'] return html.Div([ html.H5(carNum ), html.H4(name), ], style={'background-color': 'grey','border': 'solid', 'text-align': 'center'}) ## Lane 2 @app.callback( Output('name2', 'children'), [Input('my-daq-numericinput', 'value')]) def update_output(value): carNum = races.loc[value,'Lane 2'] name = racers.loc[carNum,'Name'] return html.Div([ html.H5(carNum ), html.H4(name), ], style={'background-color': 'grey','border': 'solid', 'text-align': 'center'}) @app.callback( Output('time2', 'children'), [Input('my-daq-numericinput', 'value')]) def update_output(value): time = resultsdf[(resultsdf['race']==value) & (resultsdf['lane']==2)]['time'] if time is None: time = 0 return html.Div([ daq.LEDDisplay( id='lane2-leddisplay', value=time, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ## LAne 3 @app.callback( Output('name3', 'children'), [Input('my-daq-numericinput', 'value')]) def update_output(value): carNum = races.loc[value,'Lane 3'] name = racers.loc[carNum,'Name'] return html.Div([ html.H5(carNum ), html.H4(name), ], style={'background-color': 'grey','border': 'solid', 'text-align': 'center'}) @app.callback( Output('time3', 'children'), [Input('my-daq-numericinput', 'value')]) def update_output(value): time = resultsdf[(resultsdf['race']==value) & (resultsdf['lane']==3)]['time'] return html.Div([ daq.LEDDisplay( id='lane3-leddisplay', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ## lane 4 @app.callback( Output('name4', 'children'), [Input('my-daq-numericinput', 'value')]) def update_output(value): carNum = races.loc[value,'Lane 4'] name = racers.loc[carNum,'Name'] return html.Div([ html.H5(carNum ), html.H6(name), ], style={'background-color': 'grey','border': 'solid', 'text-align': 'center'}) @app.callback( Output('time4', 'children'), [Input('my-daq-numericinput', 'value')]) def update_output(value): time = resultsdf[(resultsdf['race']==value) & (resultsdf['lane']==4)]['time'] return html.Div([ daq.LEDDisplay( id='lane4-leddisplay', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ## Race Controls # # html.Button('Get Results', id='button-results'), # html.Button('Force Race End', id='button-end'), # html.Button('Next Race', id='button-next'), ## Get Results @app.callback( [Output(component_id='results-button-output', component_property='children'), Output('lane1-leddisplay', 'value'), Output('lane2-leddisplay', 'value'), Output('lane3-leddisplay', 'value'), Output('lane4-leddisplay', 'value')], [Input(component_id='button-results', component_property='n_clicks'), #Input('my-daq-numericinput', 'value') ]) def update_output(clicks): laneresults = ['1=1.1704a', '2=5.4159b', '3=3.5462c', '4=3.7246d'] # get race results command = 'rg'+'\r\n' newcommand = command.encode('ascii') #ser.write(newcommand) #results = ser.readline() #laneresults = results.decode().split() return clicks,laneresults[0][2:8],laneresults[1][2:8],laneresults[2][2:8],laneresults[3][2:8] # callback for race change @app.callback( Output('lane-character', 'value'), [Input('lane-number', 'value')]) def update_output(value): return 'ol1' ## Get Race Results #laneresults = ['1=1.1704a', '2=5.4159b', '3=3.5462c', '4=3.7246d'] #@app.callback( # Output('lane-character', 'value'), # [Input('lane-number', 'value')]) #def update_output(value): # laneresults = ['1=1.1704a', '2=5.4159b', '3=3.5462c', '4=3.7246d'] # return 'ol1' if __name__ == '__main__': app.run_server(debug=True, host='0.0.0.0', port=8050)
def simpleButton(name, **kwargs): return html.Div( # style={"margin": "auto"}, children=[daq.StopButton(**kwargs)], )
import dash import dash_core_components as dcc import dash_html_components as html import dash_daq as daq app = dash.Dash(__name__) app.layout = html.Div([daq.StopButton(id='my-daq-stopbutton')]) if __name__ == '__main__': app.run_server(debug=True)
def gen_tab2(): #resultsdf = pd.read_csv('./resultsFile.csv') #resultsdf = pd.DataFrame(columns=['race', 'lane', 'car', 'name', 'time', 'place', 'den', 'category']) return html.Div( id='main_cols', children=[ html.Div( id='race', children=[ daq.NumericInput(id='my-daq-numericinput', max=60, value=1, label='Race Number', labelPosition='top', min=1), html.Div( id='lanes', children=[ html.H3('Lanes'), #html.H3(results_df.loc['race']), html.Div(id='lane1', children=[ html.H3('Lane 1'), html.Div(id='name1'), html.Div(id='time1') ], className="two columns"), html.Div(id='lane2', children=[ html.H3('Lane 2'), html.Div(id='name2'), html.Div(id='time2') ], className="two columns"), html.Div(id='lane3', children=[ html.H3('Lane 3'), html.Div(id='name3'), html.Div(id='time3') ], className="two columns"), html.Div(id='lane4', children=[ html.H3('Lane 4'), html.Div(id='name4'), html.Div(id='time4') ], className="two columns"), ], className="twelve columns", style={ 'border': 'solid', 'text-align': 'center' }), daq.StopButton(id='button-results', buttonText='Get Results'), html.Div(id='results-button-output'), daq.StopButton(id='button-save', buttonText='Save Results'), html.Div(id='save-button-output'), daq.StopButton(buttonText='Refresh leaderboard', id='Refresh'), #html.Div(id='race-controls', children=[ # daq.StopButton(id='button-results', buttonText='Get Results'), # html.Div(id='results-button-output'), #html.Button('Force Race End', id='button-end'), #html.Button('Next Race', id='button-next'), # ], # style={'margin': '80px' , 'text-align': 'center'}, # className="eight columns"), html.H4('Upcoming Races', className="eight column"), html.Div(id='next-race') ], style={ 'font-size': '200%', 'margin': '80px', 'text-align': 'center' }, className="eight columns"), html.H4('Fastest Single Race'), html.Div(id='leader-board', className="three columns", style={ 'font-size': '150%', 'border': 'solid' }), ], )
def div_device_controls(): """ Generates an HTML Div containing the DAQ controls """ return html.Div( [ # Title html.H4('Device Controls', style={"textAlign": "center"}), # Div with the device selection html.Div( [ # Div with the set and stop buttons html.Div([ # Button that sets the device to the value in the input box daq.StopButton(id='button-set-device', children='Set', className='one column', disabled=True, style={ "display": "flex", "justify-content": "center", "width": "49%", }), # Button that stops the iterative setting of the device daq.StopButton(id='button-stop-device', children='Stop', className='one column', disabled=True, style={ "display": "flex", "justify-content": "center", "width": "49%", }) ]), # DAQ device dropdown selector dcc.Dropdown(id='dropdown-device-selection', options=[], className='twelve columns', clearable=False, searchable=False, disabled=True, placeholder='Select the device to control', style={ "display": "flex", "justify-content": "center", "width": "90%", 'margin-top': '25px', 'margin-left': "5%" }), # DAQ device dropdown selector dcc.Dropdown(id='dropdown-meas-selection', options=[], className='twelve columns', clearable=False, searchable=False, disabled=True, placeholder='Select the quantity to set', style={ "display": "flex", "justify-content": "center", "width": "90%", 'margin-top': '5px', 'margin-left': "5%" }), # Div with the value input and the start value html.Div([ # Input box with the value to set the device to daq.NumericInput(id='input-device-value', value=0, min=-sys.float_info.max, max=sys.float_info.max, size=80, label='Value', labelPosition='top', className='six columns', disabled=True, style={ "display": "flex", "justify-content": "center", "align-items": "center", "width": "25%", "margin-top": "10px", "margin-left": "10%" }) ]), # Div with the step size and the time delay between steps html.Div([ # Input box with the step between each value to set daq.NumericInput(id='input-device-step', value=0, min=0, max=sys.float_info.max, size=80, label='Step', labelPosition='top', className='six columns', disabled=True, style={ "display": "flex", "justify-content": "center", "align-items": "center", "width": "25%", "margin-top": "10px" }), # Input box with the time to wait between each value to set daq.NumericInput(id='input-device-time', value=30, min=1, max=3600, size=80, label='Time', labelPosition='top', className='four columns', disabled=True, style={ "display": "flex", "justify-content": "center", "align-items": "center", "width": "25%", "margin-top": "10px", "margin-bottom": "40px" }) ]) ], id='div-file-control-0', className='row', style={'margin-top': 10}) ], className="three columns", style={ "border-radius": "5px", "border-width": "5px", "border": "2px solid rgb(216, 216, 216)", "position": "relative", "height": "400px", "margin-top": "10px" })
html.H4('Temperature Check'), daq.Indicator(id='esi-temperature-check', value=True, color='blue', height=50, label='Loading...', width=50) ]), html.Br(), html.P('Daemon Check Not Ready Yet!!!!!!!') ]), html.Br(), html.Div(id='legend-container', children=[ html.Div(className='indicator-box' + class_theme['dark'], children=[daq.StopButton(id='esi-stop-button')]), html.Div(className='indicator-box' + class_theme['dark'], id='legend-status', children=[ html.H4("Legend"), daq.Indicator(width=30, id='legend-green', value=True, color='green', label='OK ='), daq.Indicator(width=30, height=20, id='legend-yellow', value=True, color='yellow', label='Warning ='),
def div_daq_controls(): """ Generates an HMTL Div containing the DAQ controls """ config_dir = os.environ['DAQ_CFGDIR'] config_files = [ os.path.join(config_dir, f) for f in os.listdir(config_dir) ] config_options = [{ 'label': f.split('/')[-1], 'value': f } for f in config_files] return html.Div( [ # Title html.H4('DAQ Controls', style={"text-align": "center"}), # Start and stop button html.Div([ # Button that starts the DAQ daq.StopButton(id='button-start-daq', children='Start', className='one column', disabled=False, style={ "display": "flex", "justify-content": "center", "width": "49%", }), # Button that stops the DAQ daq.StopButton(id='button-stop-daq', children='Stop', className='one column', disabled=True, style={ "display": "flex", "justify-content": "center", "width": "49%", }), ]), # Div with the config selection html.Div([ # Input box to specify the name of the DAQ file dcc.Input(id='input-output-name', type='text', value='', disabled=False, style={ "display": "flex", "justify-content": "center", "align-items": "center", "width": "80%", 'margin-top': '80px', 'margin-left': "10%" }), # DAQ config file dropdown selector dcc.Dropdown(id='dropdown-config-selection', options=config_options, value=config_dir + '/config_default.yaml', className='twelve columns', clearable=False, searchable=False, disabled=False, style={ "display": "flex", "justify-content": "center", "width": "90%", 'margin-top': '5px', 'margin-left': "5%" }), # Box that display the config file dcc.Textarea(id="text-config", placeholder=" ", value="", style={ "width": "80%", "height": "157px", "margin-left": "10%", "margin-top": "10px", }, disabled=True), # Invisible div that stores the DAQ process ID dcc.Store(id='store-daq-id'), # Invisible div that stores the device controller process ID dcc.Store(id='store-controller-id') ]) ], className="three columns", style={ "border-radius": "5px", "border-width": "5px", "border": "2px solid rgb(216, 216, 216)", "position": "relative", "height": "400px", "margin-top": "10px", "margin-left": "0px" })
"value": "Max Current", "label": "Max Current" }, { "value": "Max Voltage", "label": "Max Voltage" }], value="Voltage", inputStyle={"padding": "0px 0px 0px 25px"}, labelStyle={"padding-top": "20px"}, inputClassName="three columns", labelClassName="three columns", className="row"), ]), html.Div([ daq.StopButton( id="submit", size=150, ), ], className="three columns", style={"padding-top": "25px"}), ]), html.Label( id='error-label', style=error_label_style, hidden=True, ) ] dark_top_box = html.Div(className="container", children=[dark_header] + [top_box], style=dark_top_box_style)
def gen_tab2(): #resultsdf = pd.read_csv('./resultsFile.csv') #resultsdf = pd.DataFrame(columns=['race', 'lane', 'car', 'name', 'time', 'place', 'den', 'category']) return html.Div(id='main_cols',children=[ html.Div(id='race', children=[ daq.NumericInput( id='my-daq-numericinput', max=60, value=1, label='Race Number', labelPosition='top', min=1), html.Div(id='lanes', children=[ html.H3('Lanes'), #html.H3(results_df.loc['race']), html.Div(id='lane1', children=[ html.H3('Lane 1'), html.Div(id='name1'), #html.Div(id='time1') html.Div([ daq.LEDDisplay( id='lane1-leddisplay', value=0, label='Time', labelPosition='bottom', size='40', color="#FF5E5E", backgroundColor="#000000" ) ]) ], className="two columns"), html.Div(id='lane2', children=[ html.H3('Lane 2'), html.Div(id='name2'), html.Div(id='time2') ], className="two columns"), html.Div(id='lane3', children=[ html.H3('Lane 3'), html.Div(id='name3'), html.Div(id='time3') ], className="two columns"), html.Div(id='lane4', children=[ html.H3('Lane 4'), html.Div(id='name4'), html.Div(id='time4') ], className="two columns"), ], className="twelve columns", style={'border': 'solid', 'text-align': 'center'}), daq.StopButton(id='button-results', buttonText='Get Results'), daq.StopButton(id='button-end', buttonText='Get Results'), html.Div(id='results-button-output'), html.Div(id='results-final-output'), #html.Div(id='race-controls', children=[ # daq.StopButton(id='button-results', buttonText='Get Results'), # html.Div(id='results-button-output'), #html.Button('Force Race End', id='button-end'), #html.Button('Next Race', id='button-next'), # ], # style={'margin': '80px' , 'text-align': 'center'}, # className="eight columns"), html.H4('Upcoming Races', className="eight column"), html.Div(id='next-race')], style={'font-size': '200%', 'margin': '80px' , 'text-align': 'center'}, className="eight columns"), html.Div(id='leader-board', children=[ html.H3('Fastest Times'), #html.Table([html.Tr(['Name ','Den ', 'Time '])]), generate_table(resultsdf[['name','time']]), ], className="two columns", style={'border': 'solid'}), ], )
} for name in list_of_resources], value=default_resource, style={'width': '100%'}, searchable=False), ]), html.Div(className='column middle', children=[ daq.PowerButton(id='power-button', color="#FF5E5E", size=60, on=False, label='Power OFF', labelPosition='top'), daq.StopButton( id='my-daq-startbutton', disabled=True, buttonText='Run', n_clicks=0, ), daq.StopButton( id='clear-button', n_clicks=0, buttonText='Clear', ), daq.StopButton( id='refresh-button', n_clicks=0, buttonText='Refresh', ), html.P([ 'Mode: ', daq.BooleanSwitch(
) ]), html.Div(className='indicator-box'+class_theme['dark'], id='settings-container3', children=[ html.H4('Power Check'), # Indicator for all power, green circle if all up, red box if one or more are down daq.Indicator( id='kcwi-power-check', value=True, color='blue',height=50, label='Loading...', width = 50 ) ]), ]), html.Div(id='legend-container', children=[ html.Div(className='indicator-box'+class_theme['dark'], children=[ daq.StopButton(id='stop-button') # stop button to stop updating ]), html.Div(className='indicator-box'+class_theme['dark'], id='legend-status', children=[ html.H4("Legend"), # Legend indicators, so nothing changes daq.Indicator( width = 30, id='legend-green', value=True, color='green', label='OK =' ), daq.Indicator( width = 30, id='legend-yellow', value=True, color='yellow',height=20, label='Warning =' ),
def generate_main_layout( theme="light", src_type="Voltage", mode_val="Single measure", fig=None, meas_src=0.00, meas_display=0.0000, src_knob=0.00, source_toggle=False, mode_toggle=False, ): """generate the layout of the app""" source_label, measure_label = get_source_labels(src_type) source_unit, measure_unit = get_source_units(src_type) # As the trigger-measure btn will have its n_clicks reset by the reloading # of the layout we need to reset this one as well local_vars.reset_n_clicks() # Doesn't clear the data of the graph if fig is None: data = [] else: data = fig["data"] html_layout = [ html.Div( id="page-body-content", className="row flex-display", children=[ html.Div( id="figure-card", className="six columns", style={"backgroundColor": card_color[theme]}, children=[ html.P("IV Curve"), dcc.Graph( id="IV_graph", style={"width": "100%"}, figure={ "data": data, "layout": dict( paper_bgcolor=card_color[theme], plot_bgcolor=card_color[theme], automargin=True, font=dict(color=text_color[theme], size=12), xaxis={ "color": grid_color[theme], "gridcolor": grid_color[theme], }, yaxis={ "color": grid_color[theme], "gridcolor": grid_color[theme], }, ), }, ), html.Div( id="bottom-card", style={ "backgroundColor": card_color[theme], "color": text_color[theme], }, children=[ # Display the sourced and measured values html.Div( id="measure-div", children=[ daq.LEDDisplay( id="source-display", label="Applied %s (%s)" % (source_label, source_unit), value=meas_src, color=accent_color[theme], ), daq.LEDDisplay( id="measure-display", label="Measured %s (%s)" % (measure_label, measure_unit), value=meas_display, color=accent_color[theme], ), ], ) ], ), ], ), html.Div( id="control-container", className="five columns", children=[ html.Div( # controls and options for the IV tracer id="up-control-card", style={ "backgroundColor": card_color[theme], "color": text_color[theme], }, children=[ html.Div( id="control-sections", children=[ html.Div( className="IV-source-options", children=[ html.Label( "Sourcing", title= "Choose whether you want to source voltage " "and measure current, or source current and measure voltage", ), daq.ToggleSwitch( id="source-choice-toggle", label=[ "Voltage", "Current" ], style={ "width": "150px", "margin": "auto", }, value=source_toggle, ), ], ), html.Div( className="measure-options", children=[ html.Label( "Measure mode", title= "Choose if you want to do single measurement" " or to start a sweep mode", ), daq.ToggleSwitch( id="mode-choice-toggle", label=[ "Single measure", "Sweep" ], style={"width": "150px"}, value=mode_toggle, ), ], ), ], ), daq.StopButton( id="clear-graph_btn", buttonText="Clear Graph", className="daq-button", size=120, ), daq.Indicator( id="clear-graph_ind", color=accent_color[theme], value=False, ), ], ), html.Div( id="mid-control-card", style={ "backgroundColor": card_color[theme], "color": text_color[theme], "marginTop": "10px", }, children=[ # Sourcing controls html.Div( id="source-div", children=[ # To perform single measures adjusting the source with a knob html.Div( id="single_div", className="single_div_toggle_style", children=[ daq.Knob( id="source-knob", size=100, value=src_knob, min=0, max=10, color=accent_color[theme], label="%s (%s)" % (source_label, source_unit), ), daq.LEDDisplay( id="source-knob-display", label="Knob readout", value=src_knob, color=accent_color[theme], ), ], ), # To perform automatic sweeps of the source html.Div( id="sweep_div", className="sweep_div_toggle_style", children=[ html.Div( className="sweep-div-row", children=[ html.Div( className= "sweep-div-row", style={ "width": "98%" }, children=[ html.Div( id= "sweep-title", children= html. P("%s sweep" % source_label ), ), html.Div( [ daq. Indicator( id= "sweep-status", label ="Sweep active", color =accent_color[ theme], value =False, ) ], title= "Indicates if the sweep is running", ), ], ) ], ), html.Div( className="sweep-div-row", children=[ html.Div( className= "sweep-div-row-inner", children=[ "Start", daq. PrecisionInput( id= "sweep-start", precision=4, label=" %s" % source_unit, labelPosition ="right", value=0, style={ "marginLeft": "5px" }, ), ], title= "The lowest value of the sweep", ), html.Div( className= "sweep-div-row-inner", children=[ "Stop", daq. PrecisionInput( id= "sweep-stop", precision=4, label=" %s" % source_unit, labelPosition ="right", value=10, ), ], title= "The highest value of the sweep", ), ], ), html.Div( className="sweep-div-row", children=[ html.Div( className= "sweep-div-row-inner", children=[ "Step", daq. PrecisionInput( id= "sweep-step", precision=4, label=" %s" % source_unit, labelPosition ="right", value=0.2, ), ], title= "The increment of the sweep", ), html.Div( className= "sweep-div-row-inner", children=[ "Time of a step", daq. NumericInput( id= "sweep-dt", value=0.2, min=0.01, style={ "margin": "5px" }, ), "s", ], title= "The time spent on each increment", ), ], ), ], ), ], ), # Measure button and indicator html.Div( id="trigger-div", children=[ daq.StopButton( id="trigger-measure_btn", buttonText="Single measure", className="daq-button", size=120, ), daq.Indicator( id="measure-triggered", color=accent_color[theme], value=False, label="Measure active", ), ], ), ], ), ], ), ], ) ] if theme == "dark": return daq.DarkThemeProvider(children=html_layout) if theme == "light": return html_layout
html.Div([ html.Div( [ html.Div( [ html.H3("Test", style={"textAlign": "center"}), html.Div( children=[ html.Div( [ daq.StopButton( id="start-button", buttonText="Start", style={ "display": "flex", "justify-content": "center", "align-items": "center", "paddingBottom": "6%", }, n_clicks=0, ), daq.StopButton( id="stop-button", buttonText="Stop", style={ "display": "flex", "justify-content": "center", "align-items": "center", }, n_clicks=0,
]), html.Div(className='indicator-box'+class_theme['dark'], id='osiris-summary-container6', children=[ html.H4('Settings Check'), daq.Indicator( id='osiris-settings-check', value=True, color='blue',height=50, label='Loading...', width = 50 ) ]) ]), html.Br(), html.Div(id='legend-container', children=[ html.Div(className='indicator-box'+class_theme['dark'], children=[ daq.StopButton(id='osiris-stop-button') ]), html.Div(className='indicator-box'+class_theme['dark'], id='legend-status', children=[ html.H4("Legend"), daq.Indicator( width = 30, id='legend-green', value=True, color='green', label='OK =' ), daq.Indicator( width = 30, id='legend-yellow', value=True, color='yellow',height=20, label='Warning =' ),
"align-items": "center", "marginBottom": "2%", }, ), html.Hr(), html.Div( [ html.Div( [ daq.StopButton( "Start", id= 'flow-meter-readout-start-button', n_clicks=0, style={ "width": "20%", "display": "flex", "justify-content": "center", "align-items": "center", "marginLeft": "2%", "marginRight": "2%", "marginBottom": "5%", }), daq.StopButton( "Stop", id='flow-meter-readout-stop-button', n_clicks=0, style={ "width": "20%", "color": "red", "display": "flex", "justify-content": "center",
def generate_main_layout(theme="light", src_type="V", mode_val="single", fig=None, sourcemeter=iv_generator): """generate the layout of the app""" source_label, measure_label = get_source_labels(src_type) source_unit, measure_unit = get_source_units(src_type) source_max = get_source_max(src_type) if mode_val == "single": single_style = { "display": "flex", "flex-direction": "column", "alignItems": "center", } sweep_style = {"display": "none"} label_btn = "Single measure" else: single_style = {"display": "none"} sweep_style = { "display": "flex", "flex-direction": "column", "alignItems": "center", } label_btn = "Start sweep" # As the trigger-measure btn will have its n_clicks reset by the reloading # of the layout we need to reset this one as well local_vars.reset_n_clicks() # Doesn't clear the data of the graph if fig is None: data = [] else: data = fig["data"] html_layout = [ html.Div( className="row", children=[ # graph to trace out the result(s) of the measurement(s) html.Div( id="IV_graph_div", className="eight columns", style={"margin": "20px"}, children=[ dcc.Graph( id="IV_graph", figure={ "data": data, "layout": dict( paper_bgcolor=bkg_color[theme], plot_bgcolor=bkg_color[theme], font=dict(color=text_color[theme], size=15), xaxis={ "color": grid_color[theme], "gridcolor": grid_color[theme], }, yaxis={ "color": grid_color[theme], "gridcolor": grid_color[theme], }, ), }, ) ], ), # controls for the connexion to the instrument html.Div( id="instr_controls", className="two columns", children=[ html.H4(sourcemeter.instr_user_name), # A button to turn the instrument on or off html.Div( children=[ html.Div( id="power_button_div", children=daq.PowerButton(id="power_button", on="false"), ), html.Br(), html.Div( children=daq.Indicator( id="mock_indicator", value=sourcemeter.mock_mode, label="is mock?", ), style={"margin": "20px"}, title="If the indicator is on, it means " "the instrument is in mock mode", ), ], style=h_style, ), # An input to choose the COM/GPIB port dcc.Input( id="instr_port_input", placeholder="Enter port name...", type="text", value="", ), html.Br(), # A button which will initiate the connexion daq.StopButton(id="instr_port_button", buttonText="Connect", disabled=True), html.Br(), html.Div( id="instr_status_div", children="", style={"margin": "10 px"}, ), ], style={ "margin": "50px", "display": "flex", "flex-direction": "column", "alignItems": "center", "justifyContent": "space-between", "border": "2px solid #C8D4E3", "background": "#f2f5fa", }, ), ], ), html.Div( id="measure_controls_div", className="row", children=[ # controls and options for the IV tracer html.Div( className="two columns", id="IV-options_div", children=[ html.H4( "Sourcing", title="Choose whether you want to source voltage " "and measure current or source current and " "measure voltage", ), dcc.RadioItems( id="source-choice", options=[ { "label": "Voltage", "value": "V" }, { "label": "Current", "value": "I" }, ], value=src_type, ), html.Br(), html.H4( "Measure mode", title="Choose if you want to do single measurement" " or to start a sweep", ), dcc.RadioItems( id="mode-choice", options=[ { "label": "Single measure", "value": "single" }, { "label": "Sweep", "value": "sweep" }, ], value=mode_val, ), html.Br(), html.Div( daq.StopButton(id="clear-graph_btn", buttonText="Clear graph", size=150), style={ "alignItems": "center", "display": "flex", "flex-direction": "row", }, ), html.Br(), daq.Indicator(id="clear-graph_ind", value=False, style={"display": "none"}), ], ), # Sourcing controls html.Div( id="source-div", className="three columns", children=[ # To perform single measures adjusting the source with # a knob html.Div( id="single_div", children=[ daq.Knob( id="source-knob", value=0.00, min=0, max=source_max, label="%s (%s)" % (source_label, source_unit), ), daq.LEDDisplay( id="source-knob-display", label="Knob readout", value=0.00, ), ], style=single_style, ), # To perfom automatic sweeps of the source html.Div( id="sweep_div", children=[ html.Div( id="sweep-title", children=html.H4("%s sweep:" % source_label), ), html.Div( [ "Start", html.Br(), daq.PrecisionInput( id="sweep-start", precision=4, min=0, max=source_max, label=" %s" % source_unit, labelPosition="right", value=1, style={"margin": "5px"}, ), ], title="The lowest value of the sweep", style=h_style, ), html.Div( [ "Stop", daq.PrecisionInput( id="sweep-stop", precision=4, min=0, max=source_max, label=" %s" % source_unit, labelPosition="right", value=9, style={"margin": "5px"}, ), ], title="The highest value of the sweep", style=h_style, ), html.Div( [ "Step", daq.PrecisionInput( id="sweep-step", precision=4, min=0, max=source_max, label=" %s" % source_unit, labelPosition="right", value=source_max / 20.0, style={"margin": "5px"}, ), ], title="The increment of the sweep", style=h_style, ), html.Div( [ "Time of a step", daq.NumericInput( id="sweep-dt", value=0.5, min=0.1, style={"margin": "5px"}, ), "s", ], title="The time spent on each increment", style=h_style, ), html.Div( [ daq.Indicator( id="sweep-status", label="Sweep active", value=False, ) ], title="Indicates if the sweep is running", style=h_style, ), ], style=sweep_style, ), ], ), # measure button and indicator html.Div( id="trigger_div", className="two columns", children=[ daq.StopButton(id="trigger-measure_btn", buttonText=label_btn, size=150), daq.Indicator(id="measure-triggered", value=False, label="Measure active"), ], ), # Display the sourced and measured values html.Div( id="measure_div", className="five columns", children=[ daq.LEDDisplay( id="source-display", label="Applied %s (%s)" % (source_label, source_unit), value="0.0000", ), daq.LEDDisplay( id="measure-display", label="Measured %s (%s)" % (measure_label, measure_unit), value="0.0000", ), ], ), ], style={ # "width": "100%", "flexDirection": "column", "alignItems": "center", "justifyContent": "space-between", }, ), html.Div(children=[ html.Div( children=dcc.Markdown(""" **What is this app about?** This is an app to show the graphic elements of Dash DAQ used to create an interface for an IV curve tracer using a Keithley 2400 SourceMeter. This mock demo does not actually connect to a physical instrument the values displayed are generated from an IV curve model for demonstration purposes. **How to use the app** First choose if you want to source (apply) current or voltage, using the radio item located on the right of the graph area. Then choose if you want to operate in a single measurement mode or in a sweep mode. ***Single measurement mode*** Adjust the value of the source with the knob at the bottom of the graph area and click on the `SINGLE MEASURE` button, the measured value will be displayed. Repetition of this procedure for different source values will reveal the full IV curve. ***Sweep mode*** Set the sweep parameters `start`, `stop` and `step` as well as the time spent on each step, then click on the button `START SWEEP`, the result of the sweep will be displayed on the graph. The data is never erased unless the button `CLEAR GRAPH is pressed` or if the source type is changed. You can purchase the Dash DAQ components at [ dashdaq.io](https://www.dashdaq.io/) """), style={ "margin": "20px", "padding": "50px", "alignItems": "left", "border": "1px solid #DFE8F3", "color": text_color[theme], "background": bkg_color[theme], }, ) ]), ] if theme == "dark": return daq.DarkThemeProvider(children=html_layout) elif theme == "light": return html_layout
id='nirspec-summary-container6', children=[ html.H4('Mechanisms Check'), daq.Indicator(id='nirspec-mechanism-check', value=True, color='blue', height=50, label='Loading...', width=50) ]) ]), html.Br(), html.Div(id='legend-container', children=[ html.Div(className='indicator-box', children=[daq.StopButton(id='nirspec-stop-button')]), html.Div(className='indicator-box', id='legend-status', children=[ html.H4("Legend"), daq.Indicator(width=30, id='legend-green', value=True, color='green', label='OK ='), daq.Indicator(width=30, id='legend-yellow', value=True, color='yellow', height=20, label='Warning ='),
style={ 'width': '80%', 'min-width': '150px' }, searchable=False) ]), html.Div(className='column middle', children=[ daq.PowerButton( id='power-button', on=None, color="#FF5E5E", ), daq.StopButton( id='my-daq-startbutton', buttonText='Start', n_clicks=0, ), daq.StopButton( id='my-daq-clearbutton', n_clicks=0, buttonText='Clear', ), daq.StopButton( id='refresh-button', n_clicks=0, buttonText='Refresh', ), html.P([ 'Sensor type:', dcc.RadioItems(id='rtd-type',
[ html.Div( [ html.Div( [ html.H3( "Serial Monitor", style={"textAlign": "Center"}, className="seven columns", ), daq.StopButton( id="start-stop", label="", className="five columns", n_clicks=0, style={ "paddingTop": "3%", "display": "flex", "justify-content": "center", "align-items": "center", }, ), ], className="row", ), html.Div( [ dcc.Textarea( id="serial-response", placeholder="", value="", style={