from datetime import datetime, timedelta
import dash_datetimepicker
import dash
from dash.dependencies import Input, Output
from dash import html
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Div(
[
html.H1("Range Picker"),
dash_datetimepicker.DashDatetimepicker(
id="input-range",
utc=True,
locale="fr",
),
html.Div(id="output-range"),
]
),
html.Div(
[
html.H1("Single Picker"),
dash_datetimepicker.DashDatetimepickerSingle(
id="input-single",
date=datetime.utcnow() - timedelta(days=1),
utc=True,
),
html.Div(id="output-single"),
]
def home_page_content():
headerColWidth=2
content = dbc.Col(
id='home-page',
children=[
# Upload image
dbc.Row([
dbc.Col(html.P('Upload an image', style={'font-weight': 'bold'}), width=headerColWidth),
dbc.Col(
dcc.Upload(
id='upload-image',
accept='image/*',
multiple=False,
children=[
dbc.Button('Click to upload',
color='primary',
block=True,
size="lg",
style={'word-wrap':'normal'})
],
),
width='auto',
),
]),
html.P('Picture Requirement:', style={'font-size': 'small'}),
html.P('• Best with aspect ratio of 1:2 i.e. 128W, 256H',
style={'font-size': 'small'}),
html.P('• Full body image from head to toe',
style={'font-size': 'small'}),
# Line separator
dbc.Row([
dbc.Col(html.Hr(), align='center'),
dbc.Col(html.P("or", style={'font-weight': 'bold'}), align='center',width='auto'),
dbc.Col(html.Hr(), align='center'),
],
align='start',
),
# Extract from Database
dbc.Row([
dbc.Col(html.P('Select Database', style={'font-weight': 'bold'}), width=headerColWidth),
dbc.Col(dcc.Dropdown(id='database-id', options=get_database_options()),width=True),
]),
html.Br(),
dbc.Row([
dbc.Col(html.P('Select Date & Time', style={'font-weight': 'bold'}), width=headerColWidth),
dbc.Col(dash_datetimepicker.DashDatetimepicker(id='datetime-range-id'),width=True),
]),
html.Br(),
dbc.Row([
dbc.Col(html.P('Select Camera ID', style={'font-weight': 'bold'}), width=headerColWidth),
dbc.Col(dcc.Dropdown(id='camera-id'), width=True),
]),
html.Br(),
dbc.Row([
dbc.Col([
html.P('Select Human Image', style={'font-weight': 'bold'}),
html.P('(Narrow the search by date & time)', style={'font-size': 'small', 'font-style': 'italic'}),
],
width=headerColWidth),
dbc.Col(
id='display-col',
children=[
dbc.Spinner(dbc.Row(
id='view-db-images',
form=True,
style={
'display': 'flex',
'flex-wrap': 'wrap',
'overflow': 'auto',
},
#no_gutters=True,
#fluid=True,
)),
],
width=True,
align='stretch'
),
])
],
width=True,
)
return dbc.Row(children=[
content,
])
def results_page_content(path_db=None, img_id=None):
sidebar_contents = []
# Show selected image
if path_db is not None and img_id is not None and os.path.exists(path_db):
dbquery = query_database.DbQuery(path_db)
df = dbquery.get_images(img_id=img_id)
row = df.iloc[0]
print(row)
encoded_image = base64.b64encode(row.img)
details_row = []
if row.img_id is not None:
details_row.append(dbc.Row(
[
html.B('Image ID:', style={'margin-right':'5px'}),
html.P(row.img_id),
],
#className="card-text",
))
if row.timestamp is not None:
details_row.append(dbc.Row(
[
html.B('Date/Time:', style={'margin-right': '5px'}),
html.P(row.timestamp),
],
#className="card-text",
))
if row.cam_id is not None:
details_row.append(dbc.Row(
[
html.B('Camera ID:', style={'margin-right':'5px'}),
html.P(row.cam_id),
],
#className="card-text",
))
sidebar_contents.append(
dbc.Card(
children=[
dbc.CardImg(
id='results-sidebar-image',
src='data:image/png;base64,{}'.format(
encoded_image.decode()),
style={
'width': '8vw',
'object-fit': 'contain',
},
),
dbc.CardBody(details_row),
],
style={
'padding': '5%',
},
)
)
# filter
sidebar_contents.append(
dbc.Card([
dbc.CardBody([
html.H6('Search Filter', style={
'font-weight': 'bold', 'color': '#007fcf',}),
html.Br(),
dbc.Col([
html.P('Select Date & Time', style={
'font-weight': 'bold'}),
dash_datetimepicker.DashDatetimepicker(
id='results-filter-datetime'),
], style={'padding': '1%'}),
dbc.Col([
html.P('Camera ID', style={'font-weight': 'bold'}),
dbc.Input(id='results-filter-cam-id',type='number', step=1),
], style={'padding': '1%'}),
dbc.Col([
html.P(children='Threshold (Default is 0.6)',
style={'font-weight': 'bold'}),
dbc.Input(id='results-filter-threshold',type='number', step=0.1, value=0.6),
],
style={'padding': '1%'}),
html.Br(),
dbc.Button(children="Filter", id='results-filter-button', color="primary",
block=True, size='lg'),
]),
])
)
return dbc.Row(children=[
dbc.Col(
id='results-page-sidebar',
children=sidebar_contents,
width=3,
style=SIDEBAR_STYLE,
),
dbc.Col(
id='display-results-col',
width=True,
),
])
import dash_datetimepicker
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
dash_datetimepicker.DashDatetimepicker(id="input"),
html.Div(id="output")
])
@app.callback(Output("output", "children"), [Input("input", "startDate")])
def display_output(startDate):
return "You have entered {}".format(startDate)
if __name__ == "__main__":
app.run_server(debug=True, host="0.0.0.0")
import dash
import pandas as pd
import dash_datetimepicker
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = dbc.Container(
[
dash_datetimepicker.DashDatetimepicker(id="datetime-picker"),
html.H6(id='datetime-output', style={'margin-top': '20px'})
],
style={
'margin-top': '100px',
'max-width': '600px'
}
)
@app.callback(
Output('datetime-output', 'children'),
[Input('datetime-picker', 'startDate'),
Input('datetime-picker', 'endDate')]
)
def datetime_range(startDate, endDate):
# 修正8小时时间差bug并格式化为字符串
startDate = (pd.to_datetime(startDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M')
endDate = (pd.to_datetime(endDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M')
for i in TrainListDF['TrainId'].tolist()
],
multi=False,
# placeholder='Filter by Train ID...',
value=eval('currentTrainMinDF.iloc[{}]'.format(0))['TrainId']
)
)
]),
dbc.Col(
[
dbc.Label(html.P("PickDate Range")),
html.Div([
dd.DashDatetimepicker(
id='dateRange',
startDate=(eval('TrainListDF.iloc[{}]'.format(0))['MinDate']),
endDate=((eval('TrainListDF.iloc[{}]'.format(0))['MaxDate'])),
# initial_visible_month=date(2017, 8, 5),
# end_date=date(2017, 8, 25)
),
html.Div(id='hid_time_range', style={'display': 'none'}),
])
# dbc.Label(html.P("TimeStamp")),
# html.Div(
# dcc.Dropdown(id="slct_time",
# options=[
# {'label': i, 'value': i}
# for i in listTime
# ],
# multi=False,
# # placeholder='Filter by Time...',
# value=eval('TrainMinDataFrame.iloc[{}]'.format(0))['TimeStamp']