html.H1('TouchFree',
style={'display': 'inline-block', 'margin-top': '0px'}),
html.H2('AI based Mask Detection and Temperature Check', style={'margin-top': '0px'})
], style={'text-align': 'center'})
], style={'padding': '10px'}),
html.Div(id='control-container', children=[
html.Div(id='video-container', className='pretty_container', children=[
html.Img(id='video-feed', src='/video_feed', height=450, width=850)
], style={'width': '60%', 'height': '455px', 'display': 'inline-block'}),
html.Div(id='data-container', className='pretty_container', style={'width': '30%',
'height': '455px',
'display': 'inline-block',
'text-align': 'center',
'vertical-align': 'top',
'margin': 'center'}),
dcc.Interval(id='counter-interval', interval=100, n_intervals=0)
]),
html.Div(id='proceed-container', className='pretty_container', children=[], style={'width': '100%',
'height': '90px',
'text-align': 'center',
'padding': '0px'})
])
@app.callback(Output('data-container', 'children'),
[Input('counter-interval', 'n_intervals')])
def labels_updater(n):
if promt is not None:
promt_label = html.H2(promt)
else:
html.Div(className="four columns",
children=[
html.H5('Selected Metrics'),
dcc.Checklist(
id='metrics',
options=[{
'label': m,
'value': m
} for m in ['Confirmed', 'Deaths']],
value=['Confirmed', 'Deaths'])
])
]),
dcc.Graph(id="plot_new_metrics", config={'displayModeBar': False}),
dcc.Graph(id="plot_cum_metrics", config={'displayModeBar': False}),
dcc.Interval(
id='interval-component',
interval=3600 * 1000, # Refresh data each hour.
n_intervals=0)
])
@app.callback([Output('state', 'options'),
Output('state', 'value')], [Input('country', 'value')])
def update_states(country):
d = all_data()
states = list(d.loc[d['Country'] == country]['Province/State'].unique())
states.insert(0, '<all>')
states.sort()
state_options = [{'label': s, 'value': s} for s in states]
state_value = state_options[0]['value']
return state_options, state_value
'display': 'inline-block',
'padding': '3',
'float': 'left'
}),
html.Div(
[
html.Div(
children=html.Div(id='graphs'),
className='row',
),
# dcc.Interval(id='graph-update', interval=3*1000),
# hidden update for sending ldc command signal
html.Div(children=html.Div(id='command'),
style={'display': 'none'}),
dcc.Interval(id='cmd-update', interval=1 * 1000),
],
className='col s12 m12 l7',
style={
'width': '80%',
'display': 'inline-block',
'padding': '3px'
},
),
# hidden div: holder of data
html.Div(
[
html.Div(children=html.Div(id='data'),
className='row',
style={
html.Div(
[
html.Div(
[
html.Div(id='LOCALUTC_text'),
],
style={'width': '100%', 'display': 'flex', 'align-items': 'center', 'justify-content': 'left'}
),
html.Div(
[
dcc.Graph(id='ORBIT_MAP',
figure={'layout' : ORBIT_MAP_layout}
),
dcc.Interval(
id='REALTIME_interval',
interval=5*1000, # in milliseconds
n_intervals=0
),
html.Div(id='CURRENT_ZOOM', style={'display': 'none'}),
html.Div(id='CURRENT_LON', style={'display': 'none'}),
html.Div(id='CURRENT_LAT', style={'display': 'none'}),
],
style={'width': '100%', 'display': 'flex', 'align-items': 'center', 'justify-content': 'center'}
),
html.Div([
html.Pre(id='relayout-data', style={'border': 'thin lightgrey solid','overflowX': 'scroll'}),
])
],
className='five columns'
)
])
app = dash.Dash(__name__, static_folder='assets')
app.css.config.serve_locally = True
app.scripts.append_script({
'external_url': '../assets/jquery-3.3.1.min.js',
})
app.scripts.append_script({'external_url': '/assets/demo.js'})
app.layout = html.Div(children=[
html.Link(href='assets/index_hk.css', rel='stylesheet'),
html.Link(href='assets/demo.css', rel='stylesheet'),
html.Link(href='assets/bootstrap.min.css', rel='stylesheet'),
dcc.Location(id='url', refresh=False),
dcc.Interval(
id='interval-component',
interval=1 * 1000, # in milliseconds
n_intervals=0),
html.Nav(children=[
html.A('Calculus', href="#", className='navbar-brand'),
html.Div(
id="navbarSupportedContent",
children=[
html.Ul(children=[
html.Li(html.A("Index", href="#", className="nav-link"),
className="nav-item"),
html.Li(html.A("portfolio", href="#",
className="nav-link"),
className="nav-item"),
html.Li(html.A("asset", href="#", className="nav-link"),
className="nav-item")
],
]),
html.Div(className='row edith',
children=[
html.Div(dcc.Graph(id='live-graph', animate=False),
className='col s12 m6 l6'),
html.Div(dcc.Graph(id='historical-graph', animate=False),
className='col s12 m6 l6')
]),
html.Div(className='row edith',
children=[
html.Div(id="recent-tweets-table",
className='col s12 m6 l6'),
html.Div(dcc.Graph(id='sentiment-pie', animate=False),
className='col s12 m6 l6'),
]),
dcc.Interval(id='graph-update', interval=1 * 1000),
dcc.Interval(id='historical-update', interval=60 * 1000),
dcc.Interval(id='related-update', interval=30 * 1000),
dcc.Interval(id='recent-table-update', interval=2 * 1000),
dcc.Interval(id='sentiment-pie-update', interval=60 * 1000),
],
style={
'backgroundColor': app_color_scheme['background'],
'margin-top': '-30px',
'height': '2000px',
},
)
def df_resample_sizes(df, maxlen=MAX_DF_LENGTH):
df_len = len(df)
app.layout = html.Div([
dcc.Location(id="url"),
navbar,
html.Div(" "),
html.Div([
dbc.Row([
dbc.Col(html.Div(" "), align="start", width=3),
dbc.Col(html.Div(
"This program is just the prototype version of the actual program that the developers have imagined."
),
align="center",
width=8),
dbc.Col(
html.Div(
dcc.Interval(id='interval-component',
interval=30 * 1000,
n_intervals=0))),
dbc.Col(html.Div(" "), align="end"),
], ),
dbc.Row(
dbc.Col(html.Div(id='live-update-time'),
width={
"size": 1,
"offset": 1
}), ),
dbc.Row([
dbc.Col(html.Div(content)),
])
]),
])
def generate_app(config_dir, config_dict):
"""Generates App and Server Objects for Hosting Dashboard
Parameters
----------
config_dir : str
Path to the Configuration Directory
config_dict : dict
Configuration Directory (Output of YAML Parser)
Returns
-------
(server, app)
"""
config_dict["CONFIG_DIR"] = config_dir
# Set Up Flash and Dash Objects
server = flask.Flask(__name__)
app = dash.Dash(
__name__,
server=server,
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[
{"name": "viewport", "content": "width=device-width, initial-scale=1"}
],
)
app.title = "SRT Dashboard"
# Start Listening for Radio and Status Data
status_thread = StatusThread(port=5555)
status_thread.start()
command_thread = CommandThread(port=5556)
command_thread.start()
raw_spectrum_thread = SpectrumThread(port=5561)
raw_spectrum_thread.start()
cal_spectrum_thread = SpectrumThread(port=5563)
cal_spectrum_thread.start()
# Dictionary of Pages and matching URL prefixes
pages = {
"Monitor Page": "monitor-page",
"System Page": "system-page",
}
refresh_time = 3000 # ms
pio.templates.default = "seaborn" # Style Choice for Graphs
curfold = Path(__file__).parent.absolute()
# Generate Sidebar Objects
side_title = "Small Radio Telescope"
image_filename = curfold.joinpath(
"images", "MIT_HO_logo_landscape.png"
) # replace with your own image
encoded_image = base64.b64encode(open(image_filename, "rb").read())
side_content = {
"Status": dcc.Markdown(id="sidebar-status"),
"Pages": html.Div(
[
html.H4("Pages"),
dbc.Nav(
[
dbc.NavLink(
page_name,
href=f"/{pages[page_name]}",
id=f"{pages[page_name]}-link",
)
for page_name in pages
],
vertical=True,
pills=True,
),
]
),
"Image": html.Div(
[
html.A(
[
html.Img(
src="data:image/png;base64,{}".format(
encoded_image.decode()
),
style={"height": "100%", "width": "100%"},
)
],
href="https://www.haystack.mit.edu/",
)
]
),
}
sidebar = generate_sidebar(side_title, side_content)
# Build Dashboard Framework
content = html.Div(id="page-content")
layout = html.Div(
[
dcc.Location(id="url"),
sidebar,
content,
dcc.Interval(id="interval-component", interval=refresh_time, n_intervals=0),
html.Div(id="output-clientside"),
],
id="mainContainer",
style={
"height": "100vh",
"min_height": "100vh",
"width": "100%",
"display": "inline-block",
},
)
app.layout = layout # Set App Layout to Dashboard Framework
app.validation_layout = html.Div(
[layout, monitor_page.generate_layout(), system_page.generate_layout(),]
) # Necessary for Allowing Other Files to Create Callbacks
# Create Resizing JS Script Callback
app.clientside_callback(
ClientsideFunction(namespace="clientside", function_name="resize"),
Output("output-clientside", "children"),
[Input("page-content", "children")],
)
# Create Callbacks for Monitoring Page Objects
monitor_page.register_callbacks(
app,
config_dict,
status_thread,
command_thread,
raw_spectrum_thread,
cal_spectrum_thread,
)
# Create Callbacks for System Page Objects
system_page.register_callbacks(app, config_dict, status_thread)
# Activates Downloadable Saves - Caution
if config_dict["DASHBOARD_DOWNLOADS"]:
@server.route("/download/<path:path>")
def download(path):
"""Serve a file from the upload directory."""
return flask.send_from_directory(
Path(config_dict["SAVE_DIRECTORY"]).expanduser(),
path,
as_attachment=True,
)
@app.callback(
[Output(f"{pages[page_name]}-link", "active") for page_name in pages],
[Input("url", "pathname")],
)
def toggle_active_links(pathname):
"""Sets the Page Links to Highlight to Current Page
Parameters
----------
pathname : str
Current Page Pathname
Returns
-------
list
Sparse Bool List Which is True Only on the Proper Page Link
"""
if pathname == "/":
# Treat page 1 as the homepage / index
return tuple([i == 0 for i, _ in enumerate(pages)])
return [pathname == f"/{pages[page_name]}" for page_name in pages]
@app.callback(
Output("sidebar", "className"),
[Input("sidebar-toggle", "n_clicks")],
[State("sidebar", "className")],
)
def toggle_classname(n, classname):
"""Changes Sidebar's className When it is Collapsed
Notes
-----
As per the Dash example this is based on, changing the sidebar's className
changes the CSS that applying to it, allowing for hiding the sidebar
Parameters
----------
n
Num Clicks on Button
classname : str
Current Classname
Returns
-------
"""
if n and classname == "":
return "collapsed"
return ""
@app.callback(
Output("sidebar-status", "children"),
[Input("interval-component", "n_intervals")],
)
def update_status_display(n):
"""Updates the Status Part of the Sidebar
Parameters
----------
n : int
Number of Intervals that Have Occurred (Unused)
Returns
-------
str
Content for the Sidebar, Formatted as Markdown
"""
status = status_thread.get_status()
if status is None:
az = el = np.nan
az_offset = el_offset = np.nan
cf = np.nan
bandwidth = np.nan
status_string = "SRT Not Connected"
else:
az = status["motor_azel"][0]
el = status["motor_azel"][1]
az_offset = status["motor_offsets"][0]
el_offset = status["motor_offsets"][1]
cf = status["center_frequency"]
bandwidth = status["bandwidth"]
time_dif = time() - status["time"]
if time_dif > 5:
status_string = "SRT Daemon Not Available"
elif status["queue_size"] == 0 and status["queued_item"] == "None":
status_string = "SRT Inactive"
else:
status_string = "SRT In Use!"
status_string = f"""
#### {status_string}
- Motor Az, El: {az:.1f}, {el:.1f} deg
- Motor Offsets: {az_offset:.1f}, {el_offset:.1f} deg
- Center Frequency: {cf / pow(10, 6)} MHz
- Bandwidth: {bandwidth / pow(10, 6)} MHz
"""
return status_string
@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
"""Renders the Correct Content of the Page Portion
Parameters
----------
pathname : str
URL Path Requested
Returns
-------
Content of page-content
"""
if pathname in ["/", f"/{pages['Monitor Page']}"]:
return monitor_page.generate_layout()
elif pathname == f"/{pages['System Page']}":
return system_page.generate_layout()
# If the user tries to reach a different page, return a 404 message
return dbc.Jumbotron(
[
html.H1("404: Not found", className="text-danger"),
html.Hr(),
html.P(f"The pathname {pathname} was not recognised..."),
]
)
return server, app
def init_dasboard(server):
dash_app = dash.Dash(server=server,
routes_pathname_prefix='/dashapp/',
external_stylesheets=[dbc.themes.FLATLY])
df = pd.DataFrame({
'month': ['Enero', 'Febrero', 'Marzo', 'Todos'],
'day': [[
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31
],
[
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
],
[
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31
], []],
'users': [[
325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413,
419, 404, 408, 401, 377, 368, 361, 234, 356, 345, 354, 345, 345,
378, 344, 342, 412, 453
],
[
432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377,
368, 361, 234, 356, 345, 354, 345, 345, 378, 344, 342,
412, 453, 324, 405, 400, 424
],
[
408, 401, 377, 368, 361, 234, 356, 345, 354, 345, 345,
378, 344, 342, 412, 453, 324, 405, 400, 424, 432, 419,
394, 410, 426, 413, 419, 404, 408, 401, 377
], []]
})
# --------- GRID --------- #
grid = dui.Grid(_id="grid-1", num_rows=12, num_cols=12, grid_padding=0)
# BOTÓN FILTROS
grid.add_element(col=1,
row=1,
width=12,
height=1,
element=dbc.Button('FILTROS',
id='filtros-1',
style={
'width': '100%',
'heigth': '100%'
},
className='bg-primary text-white'))
# MODAL
grid.add_element(
col=1,
row=1,
width=12,
height=12,
element=dbc.Modal(
id='modal-filtros-1',
children=[
dbc.ModalHeader('Filtros'),
dbc.ModalBody([
dbc.Label('Agrupar por'),
dbc.RadioItems(id='option-group',
className='d-flex justify-content-around',
value='mensual',
options=[{
'label': 'Mensual',
'value': 'mensual'
}, {
'label': 'Diario',
'value': 'diario'
}]),
dbc.Label('Seleccionar mes'),
dbc.Select(
id='option-month',
className=
'class="col-sm-10 align-self-center custom-select"',
value=0,
options=[{
'label': df.month[i],
'value': i
} for i in range(len(df.month))])
]),
dbc.ModalFooter(
dbc.Button('CERRAR',
id='close-filtros-1',
style={'width': '100%'},
className='bg-primary text-white'))
],
is_open=False,
style={'height': '80%'},
className='p-3',
size='lg',
scrollable=True))
# GRÁFICO 1
grid.add_graph(col=1, row=2, width=12, height=3, graph_id='graph-1')
# GRÁFICO 2
grid.add_graph(col=1, row=5, width=6, height=4, graph_id='graph-2')
# GRÁFICO 3
grid.add_graph(col=8, row=5, width=5, height=4, graph_id='graph-3')
# --------------------------- #
dash_app.layout = html.Div(children=[
html.Meta(
name='viewport',
content='width=device-width, initial-scale=1, shrink-to-fit=no, \
maximum-scale=1, minimum-scale=1, user-scalable=0'),
dui.Layout(grid=grid),
dcc.Interval(id='interval-users', interval=1 * 5000, n_intervals=0)
],
style={
'height': '100vh',
'width': '100vw'
})
# --------- EVENTOS --------- #
@dash_app.callback(Output('graph-1',
'figure'), Output('graph-2', 'figure'),
Output('graph-3', 'figure'),
Input('option-month', 'value'),
Input('option-group', 'value'),
Input('interval-users', 'n_intervals'))
def change_month(pos, group, n):
update_users = randrange(20)
month_pos = randrange(len(df.month[:-1]))
day_pos = randrange(len(df.users[month_pos]))
df.users[month_pos][day_pos] += update_users
pos = int(pos)
fig1 = go.Figure()
fig2 = go.Figure()
if pos == len(df.month[:-1]):
total = 0
for i in range(len(df.month[:-1])):
total += int(sum(df.users[i]))
fig1.add_trace(
go.Indicator(mode='number',
value=total,
title={'text': 'Usuarios totales'},
domain={
'y': [0, 1],
'x': [0, 1]
}))
for i in range(len(df.month[:-1])):
fig2.add_trace(
go.Scatter(x=df.day[i],
y=df.users[i],
name=df.month[i][:3]))
else:
if group == 'mensual':
if pos == 0:
fig1.add_trace(
go.Indicator(mode="number+delta",
value=sum(df['users'][pos]),
delta={
'reference': 0,
'valueformat': '.0f'
},
title={
"text":
"Usuarios mensuales en {}".format(
df.month[pos])
},
align='center',
domain={
'y': [0, 1],
'x': [0, 1]
}))
else:
fig1.add_trace(
go.Indicator(mode="number+delta",
value=sum(df.users[pos]),
delta={
'reference': sum(df.users[pos - 1]),
'valueformat': '.0f'
},
title={
"text":
"Usuarios mensuales en {}".format(
df.month[pos])
},
align='center',
domain={
'y': [0, 1],
'x': [0, 1]
}))
else:
fig1.add_trace(
go.Indicator(mode='number+delta',
value=df.users[pos][len(df.users[pos][:-1])],
delta={
'reference':
df.users[pos][len(df.users[pos][:-2])],
'valueformat':
'.0f'
},
title={
'text':
'Usuarios el último día de {}'.format(
df.month[pos])
},
align='center',
domain={
'y': [0, 1],
'x': [0, 1]
}))
fig2.add_trace(go.Scatter(y=df.users[pos], x=df.day[pos]), )
fig2.update_layout(plot_bgcolor='white',
margin={
'l': 0,
'r': 30,
'b': 50,
't': 0,
'pad': 0
},
legend={
'orientation': 'h',
'yanchor': 'bottom',
'y': 1,
'xanchor': 'left',
'x': 0
},
modebar={'orientation': 'v'})
values_pie = []
labels_pie = []
for m in range(len(df.month[:-1])):
values_pie.append(sum(df.users[m]))
labels_pie.append(df.month[m][:3])
fig3 = go.Figure(go.Pie(labels=labels_pie, values=values_pie))
fig3.update_layout(margin={
'l': 0,
'r': 0,
'b': 0,
't': 0,
'pad': 0
},
legend={
'orientation': 'h',
'yanchor': 'bottom',
'y': 1.02,
'xanchor': 'left',
'x': 0
},
modebar={'orientation': 'v'})
return fig1, fig2, fig3
@dash_app.callback(
Output("modal-filtros-1", "is_open"),
Input("filtros-1", "n_clicks"),
Input("close-filtros-1", "n_clicks"),
State("modal-filtros-1", "is_open"),
)
def open_filtros_1(open, close, is_open):
if open or close:
return not is_open
return is_open
children=[ # Provides an empty graph object for updates in callback
dcc.Graph(id="bubble-graph-with-slider"),
# Div contains play/pause button and slider
# Creates Slider from min-max X values
# to give input for graph updates
html.Div(
id="controls-div",
children=[
html.Button(
"Play",
id="play-pause-button",
n_clicks=1,
style={"background-color": "rgb(184, 255, 251)"},
),
dcc.Interval(
id="play-interval", interval=1 * 1000, n_intervals=0, disabled=True
),
dcc.Slider(
id="time-slider", min=0, max=1, value=None, marks={}, updatemode="drag",
),
],
),
],
),
dcc.Tab(
label="Line Plots",
children=[
html.Div(
children=[dcc.Graph(id="left-line-plot-graph")],
style={"width": "45%", "display": "inline-block"},
),
a = -200
layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='app1_sidebar'),
html.H3('App 1'),
dcc.Dropdown(
id='app-1-dropdown',
options=[
{'label': 'App 1 - {}'.format(i), 'value': i} for i in [
'NYC', 'MTL', 'LA'
]
]
),
html.Div(id='app-1-display-value'),
dcc.Interval(id='interval-component', interval=1. * 1000, n_intervals=10),
html.Div(id='output-block'),
html.Div(html.P(a)),
dcc.Link('Go to App 2', href='/apps/app2')
])
@app.callback(
Output('output-block', 'children'),
[Input('interval-component', 'n_intervals')])
def update(interval_value):
global a
a += 1
# print('Internal interval value: {}'.format(interval_value))
return 'The interval value is: {}'.format(a)
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, external_scripts=external_scripts)
app.layout = html.Div([
html.Div(id='my-output-interval'),
dcc.Dropdown(id='graph_name',
options=[{'label': s, 'value': s}
for s in data_dict.keys()],
value=['Bucket List','140 files'],
multi=True
),
#html.Button(id='submit-button', n_clicks=0, children='Submit'),
html.Div(id='output-state'),
html.Div(children=[html.Div(id='graphs'), ], className='row'),
html.Div(id='table'),
dcc.Interval(
id='interval-component 1',
interval=20000 # in milliseconds
),
dcc.Interval(
id='interval-component 2',
interval=1000 # in milliseconds
)
])
print('Summa22')
@app.callback([Output('graphs', 'children'), Output('my-output-interval', 'children')],
[Input('interval-component 1', 'n_intervals'), Input('graph_name', 'value')])
def update_output(n, data_names):
graphs = []
createPickle(url)
filter_action='native',
style_header={'backgroundColor': 'rgb(192, 192, 192)','color': 'black','text-align': 'center','fontWeight': 'bold','fontSize':20},
style_cell={'backgroundColor': 'rgb(50, 50, 50)','color': 'white', 'textAlign': 'left'},
style_data={'width': '150px', 'minWidth': '150px', 'maxWidth': '150px', 'overflow': 'hidden', 'textOverflow': 'ellipsis'},
#indice Saison Continent pays cc TauxMini TauxMaxi MP Excel Supreme
columns=[
{'name': 'Saison', 'id': 'Saison', 'type': 'text'},
{'name': 'Continent', 'id': 'Continent', 'type': 'text'},
{'name': 'Pays', 'id': 'pays', 'type': 'text'},
{'name': 'CC', 'id': 'cc', 'type': 'text'},
{'name': 'MP', 'id': 'MP', 'type': 'text'},
{'name': 'Excel', 'id': 'Excel', 'type': 'text'},
{'name': 'Supreme', 'id': 'Supreme', 'type': 'text'}])]),
dcc.Graph(id='live-update-graph', figure={}),
dcc.Interval(id='graph-update', interval= 7 * 1000, n_intervals=0),
dcc.Interval(id='table-update', interval= 7 * 1000, n_intervals=0)
])
],
style={'backgroundColor': colors['background'], 'color': colors['text']}
)
@app.callback(Output('live-update-graph','figure'),[Input('graph-update', 'n_intervals')])
def update_graph_live(n):
global df_global_saison
global df_global_cc
if (n % 150 == 0):
ryzom = weather(True)
else:
html.H2('Vehicle Data', style={
'float': 'left',
}),
]),
dcc.Dropdown(id='vehicle-data-name',
options=[{
'label': s,
'value': s
} for s in data_dict.keys()],
value=[
'Coolant Temperature', 'Oil Temperature',
'Intake Temperature'
],
multi=True),
html.Div(children=html.Div(id='graphs'), className='row'),
dcc.Interval(id='graph-update', interval=1000, n_intervals=0),
# html.Div(id='signal', style={'display': 'none'})
],
className="container",
style={
'width': '98%',
'margin-left': 10,
'margin-right': 10,
'max-width': 50000
})
@app.callback(dash.dependencies.Output('graphs', 'children'), [
dash.dependencies.Input('vehicle-data-name', 'value'),
dash.dependencies.Input('graph-update', 'n_intervals')
from collections import deque
#sample data
X = deque(maxlen=20)
X.append(1)
Y = deque(maxlen=20)
Y.append(1)
#appname start
app = dash.Dash(__name__)
#layout styling
app.layout = html.Div([
dcc.Graph(id='live-graph', animate=True),
dcc.Interval(
id='graph-update',
#set pdate interval
interval=1 * 1000),
])
#call backs for event handling
@app.callback(Output('live-graph', 'figure'),
events=[Event('graph-update', 'interval')])
#auto update grapgh method
def update_graph_scatter():
X.append(X[-1] + 1)
Y.append(Y[-1] + Y[-1] * random.uniform(-0.1, 0.1))
data = plotly.graph_objs.Scatter(x=list(X),
y=list(Y),
name='Scatter',
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
layout = html.Div([
html.Span('TESTER', id='tester'),
dcc.Interval(id='tester_interval', interval=9000, n_intervals=0)
])
dcc.Graph(id="my_volume_level", figure={}),
html.A('Download Data',
id='download-link_volume',
download="crypto_volume.csv",
href='',
target="_blank")
])
]),
]),
],
style={"width": "70rem"},
className="mt-3")
]),
],
justify='center'),
dcc.Interval(id='update', n_intervals=0, interval=1000 * 5),
dcc.Interval(id='df-update', interval=100000, n_intervals=0)
])
# --------------------------
# Callbacks part
@app.callback(Output('my_index_level', 'figure'), [
Input('df-update', 'n_intervals'),
Input(component_id="color_mode", component_property="value")
])
def update_index_df(n, sel_col):
df_index = query_mongo("index", "index_level_1000")
'label': 'Датчик влажности воздуха',
'value': 'hum'
},
{
'label': 'Датчик движения',
'value': 'motion'
},
{
'label': 'Датчик открытия окон и дверей',
'value': 'open'
},
],
multi=False,
value='leakage',
style={'width': '40%'}),
dcc.Interval(id='interval', interval=3 * 1000, n_intervals=0),
html.Div(id='output_container', children=[]),
html.Br(),
dcc.Graph(id='sensors_info', figure={})
])
# ------------------------------------------------------------------------------
@app.callback([
Output(component_id='output_container', component_property='children'),
Output(component_id='sensors_info', component_property='figure')
], [
Input(component_id='slct_sensor', component_property='value'),
Input('interval', 'n_intervals')
])
def update_graph(option_slctd, times_clicked):
layout = html.Div(
[
html.Div([
html.H2("Bitcoin Prediction"),
html.Img(src="https://bitcoin.org/img/icons/opengraph.png"),
],
className='banner'),
html.Div([
html.Div([html.H3("Real-time Bitcoin Price (USD)")],
className='Title'),
html.Div([
dcc.Graph(id='wind-speed'),
],
className='twelve columns wind-speed'),
dcc.Interval(id='wind-speed-update', interval=1000, n_intervals=0),
],
className='row wind-speed-row'),
dcc.Link('Go to App 2', href='/apps/app2')
],
style={
'padding': '0px 10px 15px 10px',
'marginLeft': 'auto',
'marginRight': 'auto',
"width": "900px",
'boxShadow': '0px 0px 5px 5px rgba(204,204,204,0.4)'
})
@app.callback(Output('wind-speed', 'figure'),
[Input('wind-speed-update', 'n_intervals')])
],
href='https://github.com/freddyaboulton/jbrief_dashboard',
)
],
width=1),
]),
html.H4(['Jeopardy games at a glance'],
style={
"textAlign": 'center',
'color': colors['white']
}),
dbc.Row([
dbc.Col([
dcc.Graph(id='latest-winners'),
dcc.Interval(id='interval',
interval=MILLISECONDS_BETWEEN_UPDATES,
n_intervals=0),
html.Div(id='current-date', style={'display': 'none'})
],
width={'size': 6}),
dbc.Col([dcc.Graph(id='game-trend')], width=6),
],
justify='center'),
dbc.Row([dbc.Col([], width=6),
dbc.Col(children=[], id='table', width=6)])
])
@app.callback(Output('latest-winners', 'figure'),
[Input('interval', 'n_intervals')])
def update_latest_winners_graph(n) -> Dict[str, Any]:
dcc.Dropdown(id='Parameters', value='', multi=True),
],
className='five columns',
style={
'margin-left': '400',
'margin-top': '-1000',
'position': 'relative',
'color': app_colors['text']
})
],
className="banner"),
html.Div([
html.Div(
[
dcc.Graph(id='example-graph-4', animate=False),
dcc.Interval(id='example-graph-4-update',
interval=5 * 1000),
],
style={
'padding': '2px 2px 2px 2px',
"border": "thin black solid",
'margin-top': '-800',
"border": "thin grey solid",
'marginLeft': '620px',
'marginRight': 'auto',
"width": "600px"
})
],
className='four columns'),
html.Div([
html.Div(
[
autorange=False,
)
fig5.update_layout(
font={"size": 16}, margin=dict(l=20, r=0, t=30, b=0), plot_bgcolor="rgba(0,0,0,0)"
)
server = Flask(__name__)
app = dash.Dash(__name__, server=server)
log = logging.getLogger("werkzeug")
log.disabled = True
app.layout = html.Div(
html.Div(
[
dcc.Graph(id="g5", figure=fig5, style={"width": "95vw", "height": "95vh"}),
dcc.Interval(id="interval-component", interval=500, n_intervals=0,),
],
),
)
@app.callback(
[dash.dependencies.Output("g5", "figure")],
[dash.dependencies.Input("interval-component", "n_intervals")],
[dash.dependencies.State("g5", "figure")],
)
def update_graph_live(n, g5):
"""Update graph."""
if paused[0] is False:
g5_latest = graph5_latest[0]
app.layout = html.Div([
html.Div([
html.H2('Vehicle Data', style={
'float': 'left',
}),
]),
dcc.Dropdown(
id='vehicle-data-name',
options=[{
'label': s,
'value': s
} for s in data_dict.keys()],
value=['Coolant Temperature', 'Oil Temperature', 'Intake Temperature'],
multi=True),
html.Div(children=html.Div(id='graphs'), className='row'),
dcc.Interval(id='graph-update', interval=100),
],
className="container",
style={
'width': '98%',
'margin-left': 10,
'margin-right': 10,
'max-width': 50000
})
@app.callback(dash.dependencies.Output('graphs', 'children'),
[dash.dependencies.Input('vehicle-data-name', 'value')],
events=[dash.dependencies.Event('graph-update', 'interval')])
def update_graph(data_names):
graphs = []
Photo = '' # Photocell data extracted from a message will be kept here temporarily.
prev = '' # First character of the previous extracted message kept here temporarily.
HM = [] # Humidity data will be appended to this list.
TM = [] # Thermistor data will be appended to this list.
GS = [] # Gas sensor data will be appended to this list.
PC = [] # Photocell data will be appended to this list.
######################################### Body #################################################
app = dash.Dash(__name__)
app.layout = html.Div([
html.Label(
['', html.A('First person view', href='http://192.168.0.22:5000/')]),
dcc.Graph(id='Thermistor-output', animate=True),
dcc.Interval(id='graph-update1', interval=5000),
dcc.Graph(id='Photocell-output', animate=True),
dcc.Interval(id='graph-update2', interval=5000),
dcc.Graph(id='DHT11-output', animate=True),
dcc.Interval(id='graph-update3', interval=5000),
dcc.Graph(id='MiCS5914-output', animate=True),
dcc.Interval(id='graph-update4', interval=5000),
])
################################################################################################
@app.callback(Output('Thermistor-output', 'figure'),
[Input('graph-update1', 'n_intervals')])
def update_Thermistor_plot(input_data):
),
get_sideitem("Landing Page", ""),
],
),
html.Div(
id="content-wrapper",
className="d-flex flex-column",
children=[
html.Div(
id="content",
className="mt-4",
children=html.Div(className="container-fluid", id="fluidContainer"),
)
],
),
dcc.Interval(id="refresh-interval", interval=3600 * 1000, n_intervals=0),
],
)
layouts = {
"": get_location_base(app)
}
@app.callback(Output("fluidContainer", "children"), [Input("url", "pathname")])
def display_dashboard(pathname):
if pathname is None or pathname == "/":
pathname = ""
return layouts[pathname]
def tab_content(active_tab):
if active_tab=='tab-1':
home= [
html.Div([dcc.Graph(id='live-update-graph'),
dcc.Interval(id='interval-component',interval=5*1000, n_intervals=0)],className='rounded'),
html.Div([
html.Div(children=[dcc.Graph(id='tweets-world')],
style={'width': '40%'},className='h-50 d-inline-block rounded border border-white align-self-center'),
html.Div([dcc.Dropdown(id='tweet-choice',
options=[{'label': 'World', 'value': 'world'},
{'label': 'India', 'value': 'IN'}], value='IN'),
dcc.Graph(id='tweets-map')],
style={'width': '50%'},className='h-50 d-inline-block rounded align-middle border border-white'),
],style={'margin-top':'2%','margin-bottom':'2%'},
className='d-flex justify-content-around align-self-center '),
html.Div([
html.Div(children=[dcc.Graph(id='sentiments-pie-chart')],
style={'width': '35%'},className='h-50 d-inline-block rounded border border-white'),
html.Div(children=[html.Img(id="overallsentiment_wc")],
style={'width': '60%'},className='h-50 d-inline-block rounded align-middle border border-white')
],style={'margin-top':'2%','margin-bottom':'2%'},
className='d-flex justify-content-around align-self-center ')]
return home
elif active_tab=='tab-2':
states=[
html.Div(dcc.Graph(id='Figure1',style={'display':'block','width':'90%','height':'60%',
'margin-left':'auto','margin-right': 'auto'})),
html.Div(dbc.Alert('Analysis of a state',color='blue'),className="m-1",style={'display':'block','color':'red','fontSize':30, 'text-align': 'center','font-family': "Tmes New roman"}),
html.Div(dcc.Dropdown(id='group-select',value='Telangana'),
style={"display":'block',"width":'30%',"color":"black","font-size":"20px","border-style":"groove","float":"center",
'text-align': 'center','margin-left':'auto','margin-right': 'auto','vertical-align':'middle'}),
html.Div(dcc.Graph(id="graph",style={"display":"block","width":"80%","margin-top":"2%" ,'margin-left':'auto','margin-right': 'auto','vertical-align':'middle'})),
html.Div(dcc.Graph(id="graph1"),style={"width":"50%","margin-top":"2%" ,'margin-left':'auto','margin-right': 'auto','vertical-align':'middle'})]
return states
elif active_tab=='tab-3':
keyword=[
html.Div([dbc.FormGroup([
dbc.Label("Enter the keyword",style={"color":"white","font-size":"200%","width":"20%"}),
dbc.Input(id="word_input",value="corona",placeholder="Text something here..", type="text",
style={"color":"black","font-size":"20px","border-style":"groove","display":"block","width":"19%"}),]),
dcc.Graph(id="Graph",
style={"paper_bgcolor":"black","display":"inline-block","width":"70%","float":"middle","height":"30%"})]),
html.Div(dcc.Graph(id='polar_bar_graph',
style={'fontColor':'#DDDDDD','backgroundColor':'#111111','display':'block',
'width':'70%', 'margin-left':'auto','margin-right': 'auto'})),
html.Div([
html.Img(id="positive_wc",style={'width': '25%'},className="h-25 d-inline-block border border-secondary rounded-circle"),
html.Img(id="neutral_wc",style={'width': '25%'},className="h-25 d-inline-block border border-secondary rounded-circle"),
html.Img(id="negative_wc",style={'width': '25%'},className="h-25 d-inline-block border border-secondary rounded-circle")
],id="wordcloud",className='d-flex justify-content-around'),
]
return keyword
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import dash
app = dash.Dash()
app.layout = html.Div([
html.Div([
html.Iframe(src="https://www.flightradar24.com", height=500, width=500)
])
html.Div([
html.Pre(id='contador_text',
children='Rodas ativas no mundo'),
dcc.Interval(id='int_component',
interval=6000,
n_intervals=0)
])
])
app.callback(Ou)
def update_layout(n):
plot_bgcolor='#F3F6FA',
)
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div(
[
dcc.Graph(
id='the-graph',
animate=False,
figure=dict(layout=default_layout)
),
dcc.Interval(
id='do-update',
interval=100
),
]
)
@app.callback(Output('the-graph', 'figure'),
[Input('do-update', 'n_intervals')])
def update_graph_scatter(value):
# TODO: This is where real data input goes!
X.append(X[-1]+1)
# Replace this with the real value from the serial port:
Y.append(mycpe.get_data())
data = plotly.graph_objs.Scatter(
x=list(X),
y=list(Y),
children="Not selected",
className="flow-text"),
html.P(id="connect_placeholder",
className="black-text",
children=" "),
html.P(id="disconnect_placeholder",
className="black-text",
children=" "),
html.P(id="monitor_placeholder",
className="black-text",
children=" "),
])
])
]),
dcc.Interval(
id='interval-component-network-graph',
interval=app.update_interval_seconds * 1000, # in milliseconds
n_intervals=0),
dcc.Interval(
id='interval-add-module-list',
interval=1000 * 1000, # in milliseconds
n_intervals=0),
dcc.Interval(
id='interval-update-monitor-graph',
interval=app.update_interval_seconds * 1000, # in milliseconds
n_intervals=0)
])
])
#Update network graph per interval
@app.callback([
range=[0, 128],
)
app.layout = html.Div(children=[
dcc.Dropdown(
id="dropdown",
options=[{
"label": name,
"value": name
} for name in OPTIONS],
value="noop",
),
html.Div(id="fps"),
html.Br(),
dcc.Graph(id="graph", figure=fig),
dcc.Interval(id="interval", interval=1),
dcc.Store(id="index", data=0),
dcc.Store(id="data_list", data=vol),
dcc.Store(id="data_png", data=slices_png),
])
##
app.clientside_callback(
"""
function update_index(_, index) {
index += 1;
if (index > 200) index = 50;
return index;
}
""",