def turn_dark(dark_theme): if (dark_theme): theme.update(dark=True) else: theme.update(dark=False) return daq.DarkThemeProvider(theme=theme, children=[ daq.Knob(id='servo-knob', value=138, max=250, min=50), 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), ])
def edit_theme(dark): if (dark): theme.update(dark=True) else: theme.update(dark=False) return daq.DarkThemeProvider(theme=theme, children=rootLayout)
def edit_theme(dark, p, s, d): if(dark): theme.update( dark=True ) else: theme.update( dark=False ) if p is not None: theme.update( primary=p['hex'] ) for child in getattr(rootLayout, 'children'): if hasattr(child, 'color'): setattr(child, 'color', p['hex']) if s is not None: theme.update( secondary=s['hex'] ) if d is not None: theme.update( detail=d['hex'] ) return daq.DarkThemeProvider(theme=theme, children=rootLayout)
def turn_dark(dark_theme): if (dark_theme): theme.update(dark=True) lvd = 'Dark' else: theme.update(dark=False) lvd = 'Light' return daq.DarkThemeProvider(theme=theme, children=rootLayout1)
def turn_dark(dark_theme): if(dark_theme): theme.update( dark=True ) else: theme.update( dark=False ) return daq.DarkThemeProvider(theme=theme, children= daq.Knob(value=6))
def render_tab_content(tab_switch): if tab_switch == 0: return 'tab1', build_tab_1(), False, True, {'display': 'inline-block', 'float': 'right'} if tab_switch: return ['tab2', daq.DarkThemeProvider(theme=theme, children=[ html.Div( id='status-container', children=[ build_quick_stats_panel(), build_top_panel(), build_chart_panel(), ] ) ]), True, False, {'display': 'none'}]
def render_content(tab): if tab == 'tab-1': return html.Div(tab1_data()) elif tab == 'tab-2': print("ptessed tab2") return html.Div([dcc.Graph(figure= tab2_data())]) elif tab=='tab-3': return html.Div(children=[ html.Br(), daq.DarkThemeProvider(theme=theme, children=[ html.Div([ daq.BooleanSwitch( id='my-toggle-switch', label="Rural or Urban", on=True ), html.Div(id='toggle-switch-output') ])] )])
'primary': '#00EA64', 'secondary': '#6E6E6E' } app.layout = html.Div(id='dark-theme-provider-demo', children=[ html.Br(), daq.ToggleSwitch( id='daq-light-dark-theme', label=['Light', 'Dark'], style={'width': '250px', 'margin': 'auto'}, value=False ), html.Div( id='dark-theme-component-demo', children=[ daq.DarkThemeProvider(theme=theme, children= daq.Knob(value=6)) ], style={'display': 'block', 'margin-left': 'calc(50% - 110px)'} ) ]) @app.callback( Output('dark-theme-component-demo', 'children'), [Input('daq-light-dark-theme', 'value')] ) def turn_dark(dark_theme): if(dark_theme): theme.update( dark=True )
def turn_dark(dark_theme): if (dark_theme): theme.update(dark=True) else: theme.update(dark=False) return daq.DarkThemeProvider(theme=theme, children=html.Div(id='output'))
def toggle_darkness(dark_theme): if(dark_theme): theme.update(dark = True) else: theme.update(dark = False) return daq.DarkThemeProvider(theme = theme, children = self.__app_components())
]), html.H4([ "Options", ], className="container_title"), html.Table([ html.Col(style={'width': '180'}), html.Col(), html.Col(), html.Tr([ html.Td(html.Div("GPU Acceleration"), className="config-label"), html.Td( html.Div([ daq.DarkThemeProvider( daq.BooleanSwitch( on=True, color='#00cc96', id='gpu-toggle', )), dbc.Tooltip( "Caution: Using CPU compute for more than 50 million points is not recommended.", target='gpu-toggle', placement='bottom', hide_arrow=True, style={ "textAlign": "left", "font-size": '15px', "color": "white", "width": '350px', "padding": '15px', "border-radius": '5px', "background-color": "#2a2a2e"
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
}], virtualization=True, pagination_mode=False) app.layout = html.Div(children=[ html.H2(children='Workout Summary'), html.Div([ html.Div(generate_table(table_df), className='pure-u-1-2'), html.Div(children=[ daq.DarkThemeProvider(theme={ 'dark': False, 'detail': color_scheme['white'], 'primary': color_scheme['white'], 'secondary': color_scheme['white'] }, children=daq.Gauge( id='work_out_intensity_gauge', min=0, max=5, color=color_scheme['green'])), html.Span(children=f"You've complete {generate_fact()} days workout.", className='summary') ], className='pure-u-1-2') ], className='pure-g'), html.Div(children=[ html.Div(dcc.Graph(id='time_trend',figure={'layout':{'plot_bgcolor':color_scheme['black'], 'paper_bgcolor':color_scheme['black']}}), className='pure-u-1-2'), html.Div(dcc.Graph(id='sports_potion_barplot',figure={'layout':{'plot_bgcolor':color_scheme['black'],
def tab1_data(): theme = { 'dark': True, 'detail': '#007439', 'primary': '#00EA64', 'secondary': '#6E6E6E', } covid=CovidCases() regions=covid.latest_cases() summary=covid.summary() df = pd.DataFrame({ "States": [i['loc'] for i in regions], "Confirmed Cases (Indian)": [i['confirmedCasesIndian'] for i in regions], "Confirmed Cases (Foreign)": [i['confirmedCasesForeign'] for i in regions], 'Discharged' :[i['discharged'] for i in regions], 'Deaths':[i['deaths'] for i in regions], }) fig = go.Figure(data=[ go.Bar(name='Confirmed Cases-India', x=df['States'], y=df['Confirmed Cases (Indian)']), go.Bar(name='Confirmed Cases-Foreign', x=df['States'], y=df['Confirmed Cases (Foreign)']), go.Bar(name='Deaths', x=df['States'], y=df['Deaths']), go.Bar(name='Discharged', x=df['States'], y=df['Discharged'])],layout= go.Layout( margin={'l': 40, 'b': 70, 't': 10, 'r': 10}, paper_bgcolor = '#000000', font= { 'color': 'white' }, plot_bgcolor = '#000000', transition= { 'duration': 100, }, hovermode='closest', xaxis=dict( tickangle = 90, autorange=True, showgrid= False, ticks='', showticklabels=True ), yaxis=dict( showgrid=False, showticklabels=True ) ) ) fig.update_xaxes( tickangle = 30, title_text = "States", title_font = {"size": 20}, title_standoff = 25) return html.Div(id='dark-theme-container',children=[daq.DarkThemeProvider(theme=theme), html.H3(children='Latest Covid-19 Cases'), html.Div([ html.Table([ html.Tr( [html.Td(html.H3('Total')),html.Td(html.H3('Overall Confirmed')),html.Td(html.H3('Overall Discharged')),html.Td(html.H3('Overall Deaths'))] ), html.Tr( [html.Td(daq.LEDDisplay( value=summary['total'], color="#00ff00", backgroundColor="#23262e", id='darktheme-daq-leddisplay', className='dark-theme-control', size=40 )),html.Td(daq.LEDDisplay( value=summary['confirmedCasesIndian'], color="#00ff00", backgroundColor="#23262e", id='darktheme-daq-leddisplay', className='dark-theme-control', size=40 )),html.Td(daq.LEDDisplay( value=summary['discharged'], color="#00ff00", backgroundColor="#23262e", id='darktheme-daq-leddisplay', className='dark-theme-control', size=40 )),html.Td(html.Td(daq.LEDDisplay( value=summary['deaths'], color="#00ff00", backgroundColor="#23262e", id='darktheme-daq-leddisplay', className='dark-theme-control', size=40 )))] )]) ]), html.H3("Latest COVID-19 Cases across Indian States"), dcc.Graph( id='example-graph', figure=fig, ), html.H3("Record of Cases"), html.Div(children=[ html.Table(html.Tr([ html.Td([html.H3("States"), dcc.Dropdown( id='region_option', options=covid.history_labels_regions(), value='All', multi=True )]),html.Td([html.H3("Date"), dcc.Dropdown( id='date_option', options=covid.history_labels_dates(), value=covid.history_labels_dates()[0]['value'], )] )])) ]), html.Div(children=[html.Div(id="history_table")]), html.Div(children=[html.H3("Trends Year Till Date"),html.Div(children=[ html.Div( dcc.Dropdown(id="history_graph", options=[{'label':'Deaths','value':'Deaths'}, {'label':'Confirmed','value':'Confirmed'}, {'label':'Discharged','value':'Discharged'}], value='Deaths' ),style={"width":"20%","display":"inline-block"}) , html.Div( dcc.Dropdown(id="region_graph", options=covid.history_labels_regions(), value='All', multi=True ),style={"width":"20%","display":"inline-block"}), dcc.Graph(id="cases_graph")],style={'width':'100%'})]) ])
), ], id='modal', className='modal', style={"display": "none"}, ), ], className='row'), ]) app.layout = html.Div( html.Div(id='dark-theme-container', children=[ html.Div(id='dark-theme-components', children=[ daq.DarkThemeProvider(theme=theme, children=rootLayout) ], style={ 'border': 'solid 1px #A2B1C6', 'border-radius': '5px', 'padding': '20px', 'margin-top': '5px' }), html.Br(), daq.ToggleSwitch(id='toggle-theme', label=['Light', 'Dark'], value=True, style={ 'width': '250px', 'margin': 'auto' }),
def dark_theme(): return html.Div(children=[daq.DarkThemeProvider(\ theme=theme,children=rootLayout)], style={'backgroundColor':'#303030','color':theme['primary'],\ 'border': 'solid 1px #A2B1C6', 'border-radius': '5px',\ 'padding': '50px', 'margin-top': '20px'})
###################### OVERALL LAYOUT ###################### layout = [ dcc.Tabs( id="esi-tabs", value='esi-tabs', children=[ dcc.Tab(id='esi-tab1', label='ESI Summary', value='esi-tabs1', className='custom-tab' + class_theme['dark'], selected_className='custom-tab--selected', disabled=True, children=[ html.Br(), html.Div(id='esi-dark-theme-component-demo', children=daq.DarkThemeProvider( theme=theme, children=rootLayout1)), dcc.Interval(id='esi-polling-interval', n_intervals=0, interval=30 * 1000, disabled=False), dcc.Store(id='esi-annotations-storage', data=[]) ]), dcc.Tab(id='esi-tab2', label='ESI Servers', value='tab2', className='custom-tab' + class_theme['dark'], selected_className='custom-tab--selected', disabled=True, children=[ html.Div( id='esi-dark-theme-component-demo2',
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
def render_content(headline="None", image_url="localhost:8000/404.png", publication="", description="", content="", audience_filters=['local']): content = html.Div( children=daq.DarkThemeProvider( theme=theme, children=html.Div([ dcc.Interval(id="tick"), html.Div([ # dbc.Row( # [ # dbc.Col( dbc.Form([ dbc.Container([ dbc.Row([ dbc.Col( dbc.Label("Categories:", ), width=1, ), dbc.Col( dcc.Dropdown( options=[ { "label": "local", "value": "local", }, { "label": "regional", "value": "regional", }, { "label": "state", "value": "state", }, { "label": "national", "value": "national", }, { "label": "international", "value": "international", }, { "label": "unbound", "value": "unbound", }, ], id='audience-filters', value=audience_filters, multi=True, ), width=4, className="mw-25", # style={"min-width": "25vw"} ), # className="w-100", # inline=True, # className='mr-4', # dbc.FormGroup( # [ dbc.Col(dbc.Label("Order by"), width=1), dbc.Col( dcc.Dropdown(options=[ { "label": "gradient descent", "value": "gradient descent", }, { "label": "ambiguity", "value": "ambiguity", }, ], id='sort-order'), width=4, ), ]) ]) ]), html.Br(), # className="w-100", # inline=True # ), # ), # ] # ), # ]), ]), # dbc.Row( # [ # # dbc.Col( # dbc.Card([dbc.CardImg(src=image_url)], style={'max-height': '38vh'}), width=12, # # ), # # dbc.Col(width=4), # # ], # align='center', # # ), dbc.Row( [ dbc.Col( dbc.Jumbotron( [ html.H6(publication, className='text-muted', style={ "font-variant": 'small-caps' }), html.H1( html.B(headline), className="display-3", id="headline", ), html.P( description, className="lead", ), # html.Hr(className="my-2"), dbc.Card( [dbc.CardImg(src=image_url)], style={ "margin": "1.5vh 3.37vh 1.5vh 0.57vh" }), *[ html. P(f"""{line1} {line2 if line2 else ""}""", className='article-content') for line1, line2 in grouper( nlp(content).sents, 2) ], ], style={"padding": "20px"}, ), width=11) ], style={'margin-top': '5vh'}), dbc.Row([dbc.Col(dbc.ListGroup([], id="suggestions"))]), ]), ]), ), style=CONTENT_STYLE, ) return content
def bodyLayoutGen(): bodyLayout = html.Div( id="body", className=textClassName[theme], children=[ html.Div( id="tempSection", style={"backgroundColor": cardColor[theme]}, children=[ html.H5("System Temprature"), dcc.Interval( id='tempInterval', interval=2 * 1000, # in milliseconds n_intervals=0), html.Div(id="tempGraphSection", className="seven columns", style={"backgroundColor": backgroundColor[theme]}, children=[ html.Div(id="tempLedDispSection", style={ "backgroundColor": cardColor[theme], }, children=[ daq.LEDDisplay( id="cpuTempLiveLed", label="Cpu Temp", value=0, color=lightColor[theme], ), daq.LEDDisplay( id="gpuTempLiveLed", label="Gpu Temp", value=0, color=lightColor[theme], ), ]), dcc.Graph(id="tempLiveGraph", style={"width": "100%"}), ]), html.Div(id="tempControlSection", className="two columns", style={"backgroundColor": cardColor[theme]}, children=[ html.Button("Reset Graph", id="tempDataResetButton", n_clicks=0, className=textClassName[theme]), daq.PowerButton( id="tempStopButton", color=lightColor[theme], on=True, size=120, ), ]) ]), html.Div( id="usageSection", style={"backgroundColor": cardColor[theme]}, children=[ html.H5("System Usage"), dcc.Interval( id='usageInterval', interval=2 * 1000, # in milliseconds n_intervals=0), html.Div(id="usageGraphSection", className="seven columns", style={"backgroundColor": backgroundColor[theme]}, children=[ html.Div(id="usageGaugeDispSection", style={ "backgroundColor": cardColor[theme] }, children=[ daq.Gauge( id='cpuUsageLiveGauge', min=0, value=0, max=100, label="Cpu Usage", color=lightColor[theme], ), daq.Gauge( id='memUsageLiveGauge', min=0, value=0, label="Mem Usage", max=100, color=lightColor[theme], ), ]), dcc.Graph(id="usageLiveGraph", style={"width": "100%"}), ]), html.Div(id="usageControlSection", className="two columns", style={"backgroundColor": cardColor[theme]}, children=[ html.Button("Reset Graph", id="usageDataResetButton", n_clicks=0, className=textClassName[theme]), daq.PowerButton( id="usageStopButton", color=lightColor[theme], on=True, size=120, ), ]) ]) ]) if theme == "dark": return daq.DarkThemeProvider(children=bodyLayout) if theme == "light": return bodyLayout
dbc.NavLink("Page 1", href="/page-1", id="page-1-link", className='hidden'), dbc.NavLink("Page 2", href="/page-2", id="page-2-link"), dbc.NavLink("Page 3", href="/page-3", id="page-3-link"), ], vertical=True, pills=True, className='hidden' ), html.Div(id='audience-prediction', children=[]), html.Div(id='approval-matrix', children=[]), html.Div(children=daq.DarkThemeProvider( theme=theme, children=[ daq.Gauge( color={"gradient":True,"ranges":{"#e74c3c": [0,800],"#f39c12":[800,1600],"#00bc8c":[1600,2000]}}, showCurrentValue=True, theme=theme, units="LABELED ARTICLES", value=0, max=2000, min=0,size=250,id='labeled-articles-count', ) ])) ] ) ], style=SIDEBAR_STYLE, ) from more_itertools import grouper from spacy.lang.en import English
label='Ion Pump Check', width = 30 ) ]) ]) ]) ################################### OVERALL LAYOUT ####################################### layout = [ dcc.Tabs(id="tabs", value='tab-1', children=[ dcc.Tab(id='tab1', label='KCWI Summary', value='tabs1', className='custom-tab'+class_theme['dark'], selected_className='custom-tab--selected'+class_theme['dark'], disabled=True, children=[ html.Br(), html.Div(id='dark-theme-component-demo', children=daq.DarkThemeProvider(theme=theme, children=rootLayout1)), dcc.Interval(id='polling-interval', n_intervals=0, interval=30*1000, disabled=False ), dcc.Store(id='annotations-storage', data=[] ) ]), dcc.Tab(id='tab2', label='KCWI Servers', value='tab2', className='custom-tab'+class_theme['dark'], selected_className='custom-tab--selected'+class_theme['dark'], disabled=True, children=[ html.Div(id='dark-theme-component-demo2', children=[ dcc.Tabs(id='subtabs', value='subtabs1', children=[ dcc.Tab(id='subtab4', label='Servers/Settings', value='subtab4', className='custom-tab'+class_theme['dark'],
layout = [ dcc.Tabs( id="nirspec-tabs", value='nirspec-tabs', children=[ dcc.Tab(id='nirspec-tab1', label='NIRSPEC Summary', value='nirspec-tabs1', className='custom-tab' + class_theme['dark'], selected_className='custom-tab--selected' + class_theme['dark'], disabled=True, children=[ html.Br(), html.Div(id='nirspec-dark-theme-component-demo', children=daq.DarkThemeProvider( theme=theme, children=rootLayout1)), dcc.Interval(id='nirspec-polling-interval', n_intervals=0, interval=30 * 1000, disabled=False), dcc.Store(id='nirspec-annotations-storage', data=[]) ]), dcc.Tab(id='nirspec-tab2', label='NIRSPEC Servers', value='tab2', className='custom-tab' + class_theme['dark'], selected_className='custom-tab--selected' + class_theme['dark'], disabled=True, children=[ html.Div(
hidden=True, ) ] dark_top_box = html.Div(className="container", children=[dark_header] + [top_box], style=dark_top_box_style) dark_bottom_box = html.Div(className="container", children=bottom_box, style=dark_bottom_box_style) light_top_box = html.Div(className="container", children=[light_header, top_box]) light_bottom_box = html.Div(className="container", children=bottom_box) dark_layout = html.Div([daq.DarkThemeProvider(dark_top_box), dark_bottom_box], id='contentx', style={ 'color': '#2a3f5f', 'padding': '50px 50px 50px 50px', }) light_layout = html.Div([ light_top_box, light_bottom_box, ], id='contentx', style={ 'color': '#F3F6FA', 'padding': '50px 50px 50px 50px', })
label='Factory Data', value='tabs1', className='custom-tab', selected_className='custom-tab--selected', children=[ html.Br(), daq.ToggleSwitch(id='daq-light-dark-theme', label=['Light', 'Dark'], style={ 'width': '250px', 'margin': 'auto' }, value=False), html.Br(), html.Div(id='dark-theme-component-demo', children=daq.DarkThemeProvider( theme=theme, children=rootLayout1)), dcc.Interval(id='polling-interval', n_intervals=0, interval=1 * 1000, disabled=False), dcc.Store(id='annotations-storage', data=[]) ]), dcc.Tab( id='tab2', label='All Servers', value='tab2', className='custom-tab', selected_className='custom-tab--selected', children=[ html.Div( id='dark-theme-component-demo2',
html.H4('Normal'), html.P(pressureCheckQ['NORMAL']) ]) ]) ]) ###################### OVERALL LAYOUT ###################### layout = [ dcc.Tabs(id="osiris-tabs", value='osiris-tabs', children=[ dcc.Tab(id='osiris-tab1', label='OSIRIS Summary', value='osiris-tabs1', className='custom-tab'+class_theme['dark'], selected_className='custom-tab--selected', disabled=True, children=[ html.Br(), html.Div(id='osiris-dark-theme-component-demo', children=daq.DarkThemeProvider(theme=theme, children=rootLayout1)), dcc.Interval(id='osiris-polling-interval', n_intervals=0, interval=30*1000, disabled=False ), dcc.Store(id='osiris-annotations-storage', data=[] ) ]), dcc.Tab(id='osiris-tab2', label='OSIRIS Servers', value='tab2', className='custom-tab'+class_theme['dark'], selected_className='custom-tab--selected', disabled=True, children=[ html.Div(id='osiris-dark-theme-component-demo2', children=[ dcc.Tabs(id='osiris-subtabs', value='subtabs1', children=[ dcc.Tab(id='osiris-subtab4', label='All Servers/Computers', value='subtab4', className='custom-tab'+class_theme['dark'],
width = 30 ) ]) ]) ]) ###################### OVERALL LAYOUT ###################### layout = [ dcc.Tabs(id="nirc2-tabs", value='nirc2-tabs', children=[ dcc.Tab(id='nirc2-tab1', label='NIRC2 Summary', value='nirc2-tabs1', className='custom-tab'+class_theme['dark'], selected_className='custom-tab--selected', disabled=False, children=[ html.Br(), html.Div(id='nirc2-dark-theme-component-demo', children=daq.DarkThemeProvider(theme=theme, children=rootLayout1)), dcc.Interval(id='nirc2-polling-interval', n_intervals=0, interval=30*1000, disabled=False ), dcc.Store(id='nirc2-annotations-storage', data=[] ) ]), dcc.Tab(id='nirc2-tab2', label='NIRC2 Temperatures', value='nirc2-tab2', className='custom-tab'+class_theme['dark'], selected_className='custom-tab--selected', disabled=False, children=[ html.Div(id='nirc2-dark-theme-component-demo2', children=daq.DarkThemeProvider(theme=theme, children=temperatureRoot2)), dcc.Interval(id='nirc2-polling-interval2', n_intervals=0,
app.layout = html.Div(id='main', children=[daq.DarkThemeProvider(theme=theme, children=[ # Element 1: Data File Selector html.Div( [ dcc.Dropdown( id='brick_selector', placeholder='Select FITS files...', options=[ {'label': '{}'.format(i), 'value': i} for i in filename_list ], value=None, multi=True ) ] ), # Element 2: Data Amount Selector html.Div( [ dcc.Slider( id='display_count_selection', #placeholder='', min=0, max=display_count_max, value=display_count, step=display_count_step, marks={ 0: '0', display_count_max: "{:,}".format(display_count_max) } ) ], style={'height':34, 'width':'97%', 'margin':'auto auto'} #html.Div(id="selection-container") ), # Element 3: New Subsample Generator # To Be Coded # Element 4: Axes selections, orientation, type # Axis Selection html.Div( [ # 4.1: Select X-Axis html.Div( [ #html.H4('x-axis ', style={'display':'inline-block', 'width':60, 'margin': '0 auto', 'float':'left'}), #html.Div([ dcc.Dropdown( id='xaxis-column', placeholder='Select X-Axis...', options=[ {'label': i, 'value': i} for i in selected_columns ], value=settings['default_x_column'] ), #], #style={'display':'inline-block', 'margin':'auto auto', 'width':'100%'}), dcc.RadioItems( id='xaxis-type', options=[ {'label': i, 'value': i} for i in ['Linear', 'Log'] ], value='Linear', labelStyle={'display': 'inline-block'} ), dcc.RadioItems( id='xaxis-orientation', options=[ {'label': i, 'value': i} for i in ['increasing', 'reversed'] ], value='increasing', labelStyle={'display': 'inline-block'} ) ], style={'width': '48%', 'display': 'inline-block'} ), # 4.2: Select Y-Axis html.Div( [ dcc.Dropdown( id='yaxis-column', placeholder='Select Y-Axis...', options=[ {'label': i, 'value': i} for i in selected_columns ], value=settings['default_y_column'] ), dcc.RadioItems( id='yaxis-type', options=[ {'label': i, 'value': i} for i in ['Linear', 'Log'] ], value='Linear', labelStyle={'display': 'inline-block'} ), dcc.RadioItems( id='yaxis-orientation', options=[ {'label': i, 'value': i} for i in ['increasing', 'reversed'] ], value='increasing', labelStyle={'display': 'inline-block'} ) ], style={'width': '48%', 'float': 'right', 'display': 'inline-block'} ), ] ), # Element 5: Color coding html.Div( [ dcc.Dropdown( id='color-column', placeholder='Select Color-Axis...', options=[ {'label': i, 'value': i} for i in selected_columns ], value=None ), ] ), # Element 6: Size coding html.Div( [ dcc.Dropdown( id='size-column', placeholder='Select Size-Axis...', options=[ {'label': i, 'value': i} for i in selected_columns ], value=None ), ] ), # Graph 1: Scatter Plot dcc.Graph(id='indicator-graphic'), # Element 8: Download Selection html.A( 'Download *SELECTED* Data', id='download-selection', #download="rawdata.fits", href="", target="_blank" ), html.Br(), # Element 9: Download entire brick html.A( 'Download *FULL* Data', id='download-full-link', download="rawdata.fits", href="", target="_blank" ), html.Br(), # Dark theme button daq.ToggleSwitch( id='toggle-theme', label=['Light', 'Dark'], value=True ), html.Br(), ])], style={'border': 'solid 1px #A2B1C6', 'border-radius': '5px', 'padding': '50px', 'margin-top': '20px'})
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
def turn_dark(dark_theme): if dark_theme: theme.update(dark=True) else: theme.update(dark=False) return daq.DarkThemeProvider(theme=theme, children=root_layout)