def get_card(self):
card_image = dbc.CardImg(src=self.image_url, top=True)
links = []
if self.linkedin_link:
links.append(
dbc.CardLink(html.I(className="fab fa-linkedin fa-2x"),
external_link=True,
href=self.linkedin_link))
if self.github_link:
links.append(
dbc.CardLink(html.I(className="fab fa-github fa-2x"),
external_link=True,
href=self.github_link))
if self.email:
links.append(
dbc.CardLink(html.I(className="fa fa-envelope fa-2x"),
external_link=True,
href="mailto:" + self.email))
card_body = dbc.CardBody([
html.H5(self.full_name,
className="card-title",
style={"text-align": "center"}),
html.Div(html.I(self.title), style={"text-align": "center"}),
html.Br(),
html.Div(links, style={"display": "inline"}),
], )
return dbc.Card([card_image, card_body], className="m-2")
def __init__(self, project_name, description):
super().__init__()
self.card = html.A(html.Button(
dbc.Card(
dbc.CardBody(
[
html.H4("Project : {}".format(project_name), className="card-title"),
html.H6("Description : {}".format(description), className="card-subtitle",
style={"margin-bottom": "8px"}),
html.Div([
dbc.CardLink(dbc.Button("Test", style={"margin-right": "16px"}, color="primary"),
href="{}/test".format(project_name), style={"float": "left"}),
# dbc.CardLink(dbc.Button("Open", style={"margin-right": "20px"}, color="info"),
# href=project_name),
html.A(dbc.Button("Export CSV", style={"margin-right": "32px"}, color="secondary"),
href="{}/export/csv".format(project_name)),
html.A(dbc.Button("Export Excel", style={"margin-right": "32px"}, color="secondary"),
href="{}/export/excel".format(project_name)),
dbc.CardLink(dbc.Button("Delete", color="danger", style={"margin-right": "16px"}),
href="{}/delete".format(project_name), style={"float": "right"}),
# dbc.Badge("Success", style={"float": "right"})
], )
]
),
style={"width": "65rem"},
)
), href=project_name
)
def launch_layout():
return dbc.Col([
html.Div(
[
html.Img(src=app.get_asset_url("logo-demo.png"), style={"height":"4rem", "padding-top":"1px"})
]
),
dbc.Card([
dbc.CardLink("VBC Contract Setup", href = "/vbc-demo/contract-simulation/"),
dbc.CardLink("VBC Contract Management Reporting", href = "/vbc-demo/dashboard/")
]),
])
def serve_layout():
uimgs = db.session.query(User_Image).all()
return dbc.Container([
html.H1("View Uploaded Images"),
html.Div(id=f'{APP_ID}_view_div',
children=[
dbc.CardDeck([
dbc.Card([
dbc.CardImg(src=f"data:image/jpg;base64, {b64encode(uimg.thumb).decode('utf-8')}", top=True, style={"width": "18rem"}),
dbc.CardBody([
html.H4(uimg.name),
html.P(uimg.creator),
dbc.Button('Enlarge', id=f'{APP_ID}_card_button_uimg{uimg.id}', color='primary')
]),
dbc.CardFooter(
dbc.CardLink('Web Link', href=f'{uimg.img_web_url}',
external_link=True, target="_blank")
)
],
style={"max-width": "18rem"},
) for uimg in uimgs
],
)
]
),
# todo add modal display
])
def create_vercard(ver, comps, vername, projname):
table_body = []
projlink = ''
if ver is not None and comps is not None:
# verbutton = dbc.Button("Select Version", id="verbutton", className="mr-2", size='sm')
table_rows = [
html.Tr([html.Td("Component Count:"),
html.Td(len(comps.index))]),
html.Tr([html.Td("Phase:"),
html.Td(ver['phase'])]),
html.Tr([html.Td("Distribution:"),
html.Td(ver['distribution'])]),
html.Tr(
[html.Td("License:"),
html.Td(ver['license.licenseDisplay'])]),
html.Tr([html.Td("Owner:"),
html.Td(ver['createdBy'])]),
html.Tr([
html.Td("Create Date:"),
html.Td(
datetime.strptime(
ver['createdAt'],
'%Y-%m-%dT%H:%M:%S.%fZ').strftime("%Y-%m-%d %H:%M"))
]),
html.Tr([
html.Td("Last Update Date:"),
html.Td(
datetime.strptime(
ver['settingUpdatedAt'],
'%Y-%m-%dT%H:%M:%S.%fZ').strftime("%Y-%m-%d %H:%M"))
]),
]
table_body = [html.Tbody(table_rows)]
projlink = ver['_meta.href'] + '/components'
table_header = []
return dbc.Card(
[
dbc.CardHeader("Project: " + projname,
style={'classname': 'card-title'}),
dbc.CardBody([
html.H6("Project Version: " + vername,
style={
'display': 'flex',
'classname': 'card-title'
}),
html.Br(),
dbc.Table(table_header + table_body, bordered=True),
], ),
dbc.CardFooter(dbc.CardLink('Project Version link',
href=projlink)),
# dbc.Table(table_header + table_body, bordered=True),
# projusedbytitle, projstable,
# html.Div(verbutton),
],
id="vercard",
# style={"width": "28rem", "height": "50rem"},
# style={"width": "23rem"},
)
def text_template(lists, link):
"""Template to print out the text detail"""
text = [
html.H3('Job details',
style={
'backgroundColor': '#327ba8',
'color': 'white',
'padding': '5px',
'border-radius': 10
})
]
if len(lists) == 0:
text.append(
html.P('Details not available, please visit the link directly'))
for i in lists:
if type(i) != list:
new_child = html.P(i)
text.append(new_child)
else:
children_list = [html.Li(j) for j in i]
text.append(html.Ul(children_list))
text.append(
dbc.CardLink(children="Apply",
href=link,
target="_blank",
id='apply-set'))
return text
def get_ticker_carousel(tickers):
return dtc.Carousel([
dbc.Card([
dbc.CardBody([
html.H6(ticker['market']['name'], className="card-subtitle"),
html.H4(f"{get_base_name(ticker)} / {ticker['target']}",
className='card-title'),
html.H5(f"Last Price: {ticker['last']: .7f}",
className="card-text"),
html.P(f"Volume: {round(ticker['volume'], 2)}",
className="card-text"),
dbc.CardLink('Trade URL',
href=ticker['trade_url'],
className='fas fa-link'),
],
className='card-block text-center'),
],
color='secondary',
style={
"height": "11rem",
"border-radius": "15px"
}) for ticker in tickers
],
slides_to_scroll=1,
swipe_to_slide=True,
variable_width=True,
center_mode=False,
infinite=True,
autoplay=True,
speed=2000,
arrows=False)
def make_article_card(symbol, date=dt.datetime.today(), days_ago=3):
week_ago = (date - dt.timedelta(days=days_ago)).strftime("%Y-%m-%d")
articles = finnhub_client.company_news(symbol,
_from=week_ago,
to=date.strftime("%Y-%m-%d"))
if len(articles) == 0:
week_ago = (dt.datetime.today() -
dt.timedelta(days=days_ago)).strftime("%Y-%m-%d")
articles = finnhub_client.company_news(
symbol,
_from=week_ago,
to=dt.datetime.today().strftime("%Y-%m-%d"))
news_articles_cols = [
dbc.CardGroup([
dbc.Card([
dbc.CardImg(src=article["image"], top=True),
dbc.CardBody([
html.H4(article["headline"], className="card-title"),
html.H6(
dt.datetime.fromtimestamp(
article["datetime"]).strftime("%m/%d/%Y"),
className="card-subtitle",
),
html.P(
article["summary"],
className="card-text",
),
dbc.CardLink("Read More", href=article["url"]),
]),
], ) for article in articles[i:i + 4]
]) for i in range(0, len(articles), 4)
]
return news_articles_cols
def GdprAgreementCheckbox():
return dbc.FormGroup(
[
dbc.Checkbox(id="gdpr-agreement-checkbox", className="form-check-input"),
dbc.Label([
"I read and agree to ConPlot ",
dbc.CardLink(html.U("Privacy Policy"), href=UrlIndex.PRIVACY_POLICY.value)
], html_for="standalone-checkbox", className="form-check-label", style={'margin-top': 2.5})
], check=True)
def make_news_card(article):
newsCard = dbc.Card(dbc.CardBody([
html.H4(article.title, className="card-title"),
html.P(article.description, className="card-text"),
dbc.CardLink("View", href=article.url, target="_blank")
]),
color="light",
outline=True,
className="w-100 mt-2")
return newsCard
def __init__(self, project, api, api_id, method, status):
super().__init__()
print("status", status)
status_color = "success" if "success" == status.lower() else "danger"
self.card = dbc.Card(
dbc.CardBody(
[
html.H4("API : {}".format(api), className="card-title"),
html.H6("Method : {}".format(method), className="card-subtitle"),
html.Div([
dbc.CardLink(dbc.Button("Test", style={"margin-right": "16px"}, color="primary"),
href="{}/{}/test".format(project, api_id)),
dbc.CardLink(dbc.Button("Delete", color="danger", style={"margin-right": "16px"}),
href="{}/{}/delete".format(project, api_id), style={"float": "right"}),
dbc.Badge(status, color=status_color, style={"float": "center"})
], )
]
),
style={"width": "20rem"},
)
def create_card(name, address, distance, route_link):
return dbc.Row([
dbc.Col(
dbc.Card(
dbc.CardBody([
html.H4(name, className="card-title"),
html.P(address),
html.H6(f"Distance: {distance} km"),
dbc.CardLink('Directions', href=route_link)
])))
])
def get_news_card(entry, **kwargs):
return dbc.Card(
dbc.CardBody(
[
html.H5(entry["title"], className="card-title"),
html.P(entry["summary"]),
dbc.CardLink("External link", href=entry["link"]),
]
),
**kwargs
)
def card_maker(robot_number):
return dbc.Card(dbc.CardBody([
html.H4("{0}".format(str(robot_number)), className="card-title"),
html.P(
"Speed = 3.1 ",
className="card-text",
),
dbc.CardLink("{0}-Analytics".format(str(robot_number)),
href="/robots/R1"),
]),
style={"width": "18rem"},
id="robot_card-" + str(robot_number))
def create_card(title: str, source: str, link: str) -> dbc.Card:
"""
Create the Card with the appropriate arguments
:param title: str - title of the card
:param source: str - source of what we're using
:param link: str - link to source
:return: dbc.Card
"""
return dbc.Card(children=[
dbc.CardHeader(html.H5(title, className="card-title")),
dbc.CardBody(dbc.CardLink(source, href=link, target="_blank"))
])
def format_day_html(self, day: datetime.date, activities: list[PresentationActivity]):
if day == 0:
return {}
activities_of_day = list(filter(lambda x: x.date.date() == day, activities))
d = f"{day.day}"
d = {}
if activities_of_day:
links = []
for activity in activities_of_day:
link = html.Div(dbc.CardLink(activity.name, href=f"/application/activity/{activity.id}", style={"font-size": "x-small"}))
links.append(link)
d = links
return d
def get_news_card(entry, **kwargs):
"""
Returns an HTML bootstrap card
:param entry:
:param kwargs:
:return:
"""
return dbc.Card(
dbc.CardBody([
html.H5(entry["title"], className="card-title"),
html.P(entry["summary"]),
dbc.CardLink("External link", href=entry["link"]),
]), **kwargs)
def event_element(name, time, link, description):
# event_name = 'event name'
# start_time = 'start time'
# event_link = 'https://www.google.com'
# description = 'blah blah blah'
# stream_link = 'https://www.google.com'
event = dbc.Card(
dbc.CardBody([
html.H3(f'{name} {time}', className='card-title'),
html.P(description, className='card-text'),
dbc.CardLink('Stream', href=link),
# dbc.CardLink('Add to Calendar')
]))
return event
def generate_news_card(article):
""" generate card for each news article, including title, description, content and a button for url"""
title = article["title"]
# description = article["description"]
url = article["url"]
content = article["content"]
image = article["urlToImage"]
card = dbc.Card(
[
# dbc.CardHeader(title),
dbc.CardBody(children=[
html.H4(title, className="card-title"),
html.P(content, className="card-text"),
dbc.CardLink("Read More", href=url),
dbc.CardImg(src=image, title=title),
]),
],
className="mb-3",
)
return card
def generateLinks(children):
linklist = []
for k,v in dashboards.items():
link = dbc.CardLink("{}".format(k),
href=relpath(v),
style={'text-align':'center'})
try:
desc = dbc.CardText(eval(v.replace("/","")).description,
style={'text-align':'center'})
linklist.append(dbc.Card([link,desc],
body=True,
color='light',
# outline=False,
inverse=False))
except Exception as e:
logger.exception('')
linklist.append(dbc.Card([link],
body=True,
color='light',
# outline=False,
inverse=False))
return linklist
],
style={"width": "18rem"},
)
custom_card = dbc.Card(
[
dbc.CardImg(src="assets/custom.png", top=True),
dbc.CardBody([
html.H4("Custom Dashboard", className="card-title"),
html.P(
"Showing a custom design for a classifier dashboard.",
className="card-text",
),
dbc.CardLink(
"Source code",
href=
"https://github.com/oegedijk/explainingtitanic/blob/master/custom.py",
target="_blank"),
html.P(),
html.A(dbc.Button("Go to dashboard", color="primary"),
href="http://titanicexplainer.herokuapp.com/custom"),
dbc.Button(
"Show Code", id="custom-code-modal-open", className="mr-1"),
dbc.Modal([
dbc.ModalHeader("Code needed for this Custom Dashboard"),
dcc.Markdown("""
```python
from explainerdashboard import ExplainerDashboard
from explainerdashboard.custom import *
options = dict(loop=True, autoplay=True, rendererSettings=dict(preserveAspectRatio='xMidYMid slice'))
# Bootstrap themes by Ann: https://hellodash.pythonanywhere.com/theme_explorer
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])
app.layout = dbc.Container([
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardImg(src='/assets/linkedin-logo2.png') # 150px by 45px
],className='mb-2'),
dbc.Card([
dbc.CardBody([
dbc.CardLink("Charming Data", target="_blank",
href="https://youtube.com/charmingdata"
)
])
]),
], width=2),
dbc.Col([
dbc.Card([
dbc.CardBody([
dcc.DatePickerSingle(
id='my-date-picker-start',
date=date(2018, 1, 1),
className='ml-5'
),
dcc.DatePickerSingle(
id='my-date-picker-end',
date=date(2021, 4, 4),
]),
dbc.CardFooter("Footer"),
], outline=True, color="danger")),
dbc.Col(children=dbc.Card([
dbc.CardBody([
dbc.CardTitle("Card title"),
dbc.CardSubtitle("Card subtitle")
]),
dbc.CardImg(src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180"),
dbc.CardBody([
dbc.CardText(
"Some quick example text to build on the "
"card title and make up the bulk of the "
"card's content."
),
dbc.CardLink("A link", href="#"),
dbc.CardLink("Another link", href="#"),
]),
])),
]), className="mt-2"),
# 画图类 ========================================================================================
dcc.Graph(id="example-graph", figure={
"data": [
{"x": [1, 2, 3], "y": [4, 1, 2], "type": "bar", "name": "SF"},
{"x": [1, 2, 3], "y": [2, 4, 5], "type": "bar", "name": u"Montréal"},
],
"layout": {
"title": "Dash Data Visualization"
}
}, className="mt-2"),
def show_database_images(path_db, start_date, end_date, cam_id):
if path_db is not None and \
start_date is not None and \
end_date is not None and \
cam_id is not None:
#print(path_db)
#print(start_date, end_date)
#print(cam_id)
dbimage = query_database.DbQuery(path_db)
df_images = dbimage.get_images(
cam_id=cam_id, start_datetime=None, end_datetime=None)
#print(df_images.info())
images_col = []
images_col1 = []
urlResults = '/results'
for _, row in df_images.iterrows():
encoded_image = base64.b64encode(row.img)
components = [
#html.P(f'Camera {row.cam_id}', style={'text-overflow': 'ellipsis', 'width': '8vw', 'margin': '0'})
]
#url_dict = {'database': os.path.basename(path_db), 'image_id': row.img_id}
url_dict = {'database': path_db, 'image_id': row.img_id}
if row.timestamp is not None:
components.extend([
html.P(row.timestamp.date(),
style={'text-overflow': 'ellipsis', 'width': '8vw', 'margin': '0'}),
html.P(row.timestamp.strftime("%X"),
style={'text-overflow': 'ellipsis', 'width': '8vw', 'margin': '0'}),
])
components.append(
html.Img(
src='data:image/png;base64,{}'.format(encoded_image.decode()),
title=row.img_id,
#id=img_id,
style={
'width': '8vw',
'object-fit': 'contain'
}
))
images_col1.append(
dbc.Col(
children=[
dbc.Spinner(html.A(
id={'index': row.img_id, 'type': 'image'},
key=row.img_id,
children=components,
href=f'{urlResults}?{urlencode(url_dict)}'
))
],
width='auto',
align='start',
))
tooltip_msg = ""
if (row.img_id is not None):
tooltip_msg += f"Image ID: {row.img_id}\r\n"
if (row.timestamp is not None):
tooltip_msg = f"Datetime: {row.timestamp}\r\n"
if (row.cam_id is not None):
tooltip_msg += f"Camera ID: {row.cam_id}\r\n"
images_col.append(
dbc.Card([
dbc.CardLink(
dbc.CardImg(
src='data:image/png;base64,{}'.format(encoded_image.decode()),
title=tooltip_msg.strip(),
style={
'width': '8vw',
'object-fit': 'contain'
},
),
key=row.img_id,
href=f'{urlResults}?{urlencode(url_dict)}'
),
])
)
return images_col
else:
return None
# dbc.Label('Recommended products', className='mt-5 pt-5'),
dcc.Graph(id='prod_lipies_dist')
])
]),
])
# Contact page
contact_pg = dbc.Container(
id='contact',
children=[
dbc.Row(
dbc.Card([
dbc.CardHeader("Contact"),
dbc.CardBody([
dbc.CardTitle("Natalie Le"),
dbc.CardLink("LinkedIn",
href="https://www.linkedin.com/in/nataliele"),
dbc.CardLink(
"Read about the process",
href="https://nataliele.github.io/2019-01-07-capstone/"
),
]),
]), )
],
className="vh-100 d-flex align-items-center justify-content-center",
)
# layout of the app, has to be assigned before callback
app.layout = html.Div(
[navbar, landing_pg, about_pg, start_pg, rec_pg, contact_pg])
def Body():
return html.Div([
GdprPolicyModal(),
html.Br(),
html.Br(),
html.Br(),
dbc.Row([
dbc.Col([
dbc.Card([
dbc.CardHeader(GdprPolicyAlert()),
dbc.CardBody([
html.H2('Welcome to Conplot',
className="card-text",
style={'text-align': "center"}),
html.Br(),
html.Br(),
html.H4('About ConPlot',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
"""ConPlot is a web-based application for the visualisation of information derived from
residue contact and/or distance inter-residue predictions in combination with other
sources of information, such as secondary structure predictions, transmembrane helical
topology, sequence conservation. The plot allows the visual cross-referencing of
sequence-based prediction data from multiple sources. The exploitation of this novel
cross-referencing method can be useful to potentially expose structural features that
would otherwise go undetected. Developed by the """,
dbc.CardLink(html.U("Rigden Lab"),
href=UrlIndex.RIGDEN.value),
""" group at the """,
html.A(html.U("University of Liverpool"),
href=UrlIndex.UNIVERSITY_LIVERPOOL.value),
""" and hosted by """,
html.A(html.U("CCP4-Online"),
href=UrlIndex.CCP4_ONLINE.value),
""", this new tool provides an interactive interface for researchers in the field of
protein bioinformatics that are interested in analysing data on a given protein at a
glance."""
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Br(),
html.Br(),
html.Br(),
html.H4('How does it work',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P([
"""A protein contact map is a two-dimensional representation of the (predicted)
contacting pairs of residues in the three-dimensional structure. Common depictions of
these maps tend to omit those contacts near the diagonal of the plot, as they
correspond to pairs of sequentially nearby residues and typically do not add any
valuable information to the plot. ConPlot takes advantage of this, and allows users
to use this space otherwise left empty to integrate different sources of information
into a contact map as coloured tracks in the diagonal. Additionally, ConPlot is
packed with features that allow the user to fully customise their plots:
"""
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Ul([
html.
Li('Upload multiple contact maps to compare them, either by plotting each of them in '
'a half of the map or by superimposing one of top of the other.'
),
html.
Li('Upload predictions of inter-residue distances and visualise them as heatmaps in '
'combination with other predicted data in the diagonal.'
),
html.
Li('Full control over plot features such as contact marker size, track size or track '
'arrangement.'),
html.
Li('Multiple custom tracks can be added to the plot, enabling limitless '
'personalisation of the information displayed on the plot.'
),
html.
Li('User accounts are available in order to store sessions and re-visit them without '
'having to upload the data again. It is also possible to share these sessions with '
'other users.'),
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.P([
'Visit our ',
dbc.CardLink(html.U('help page'),
href=UrlIndex.HELP.value),
' to read about how to use ConPlot and take advantage of its full potential!'
],
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Br(),
html.Br(),
html.H4('Cite us',
className="card-text",
style={'text-align': "center"}),
html.Hr(),
html.Br(),
html.P(
'If you found ConPlot useful for your work and you would like to cite us '
'please use the following reference:',
style={
"font-size": "120%",
"text-align": "justify"
}),
html.I(
'Sánchez Rodríguez F. et al., ConPlot: Web-based application for the visualisation '
'of protein contact maps integrated with other data, Bioinformatics, 2021.',
style={
"font-size": "120%",
"text-align": "justify"
}),
html.Br(),
html.A(html.I(
html.U('DOI: 10.1093/bioinformatics/btab049')),
href=UrlIndex.CITATION.value)
]),
]),
],
width=10)
],
justify='center',
align='center',
className='m-0'),
])
dbc.CardBody(
[
html.P([
"The store has performed well when no discount or less than 20% discount is applied",
html.Hr(),
'The store might benefit by reducing discount on loss making product items.',
html.Hr(),
'Marketing and advertisement in regions with less customer base might help to increase the store presence.',
],
className="card-text",
),
],className='bg-info',
),
dbc.CardLink("GitHub Link",
className='text-center font-weight-bold',
href="https://github.com/sayaliba01/The-Sparks-Foundation-GRIPJAN21/tree/main/EDA-Retail%20Data")
],
color='primary',
outline=True,
)
# Conclusion page container
p2_container=dbc.Container(
[
dbc.Row(
[
dbc.Col(card_main, width={'size':4,'offset':1}, style={'marginTop':'2rem'}),
dbc.Col(card_con, width={'size':4,'offset':1}, style={'marginTop':'2rem'}),
], no_gutters=True,justify="around"
),
href="#")),
],
pills=True,
))),
dbc.Col(html.Div("Logo"), width=2),
]),
#the second row: data in numbers
dbc.Row([
dbc.Col(
html.Div(
dbc.Card(
dbc.CardBody([
html.H6("Monthly Income"),
html.H4("CHF 34598.60"),
dbc.CardLink("Link")
])))),
dbc.Col(
html.Div(
dbc.Card(
dbc.CardBody([
html.H6("Monthly Income"),
html.H4("CHF 34598.60"),
dbc.CardLink("Link")
])))),
dbc.Col(
html.Div(
dbc.Card(
dbc.CardBody([
html.H6("Monthly Income"),
html.H4("CHF 34598.60"),
def show_database_images(path_db, start_date, start_hour, start_minute, end_date, end_hour, end_minute, cam_id, upload_img, upload_filename):
dict_trig = get_callback_trigger()
if 'upload-image' in dict_trig:
images_col = []
for img, filename in zip(upload_img, upload_filename):
tooltip_msg = f"File name: {filename}"
images_col.append(
dbc.Card([
dbc.CardLink(
dbc.CardImg(
src=img,
title=tooltip_msg.strip(),
style={
'width': '8vw',
'object-fit': 'contain'
},
),
key=filename,
# f'{urlResults}?{urlencode(url_dict)}'
href=get_results_href(
path_db, img=img, img_filename=filename)
),
])
)
return images_col
elif path_db is not None and cam_id is not None:
dbimage = query_database.DbQuery(path_db)
start_datetime = compile_start_datetime(start_date, start_hour, start_minute)
end_datetime = compile_end_datetime(end_date, end_hour, end_minute)
df_images = dbimage.get_images(
cam_id=cam_id, start_datetime=start_datetime, end_datetime=end_datetime)
images_col = []
for _, row in df_images.iterrows():
encoded_image = base64.b64encode(row.img)
components = [
#html.P(f'Camera {row.cam_id}', style={'text-overflow': 'ellipsis', 'width': '8vw', 'margin': '0'})
]
timestamp = row.timestamp
if timestamp is not None:
if type(timestamp) == str:
timestamp = datetime.strptime(timestamp, '%Y-%m-%d %H:%M:%S')
components.extend([
html.P(timestamp.date(),
style={'text-overflow': 'ellipsis', 'width': '8vw', 'margin': '0'}),
html.P(timestamp.strftime("%X"),
style={'text-overflow': 'ellipsis', 'width': '8vw', 'margin': '0'}),
])
components.append(
html.Img(
src='data:image/png;base64,{}'.format(encoded_image.decode()),
title=row.img_id,
style={
'width': '8vw',
'object-fit': 'contain'
}
))
tooltip_msg = ""
if (row.img_id is not None):
tooltip_msg += f"Image ID: {row.img_id}\r\n"
if (timestamp is not None):
tooltip_msg += f"Datetime: {timestamp}\r\n"
if (row.cam_id is not None):
tooltip_msg += f"Camera ID: {row.cam_id}\r\n"
if "loc" in df_images.columns:
tooltip_msg += f'Location: {row["loc"]}\r\n'
images_col.append(
dbc.Card([
dbc.CardLink(
dbc.CardImg(
src='data:image/png;base64,{}'.format(encoded_image.decode()),
title=tooltip_msg.strip(),
style={
'width': '8vw',
'object-fit': 'contain'
},
),
key=row.img_id,
href=get_results_href(path_db, img_id=row.img_id)#f'{urlResults}?{urlencode(url_dict)}'
),
])
)
return images_col
else:
return None
"*(thinks)* "
"Ok, let's go.")
], ),
]),
dbc.Row([
dbc.Col(
dbc.Card(
dbc.CardBody([
html.H4("Vladislav Belov", className="card-title"),
html.H6("ML Engineer", className="card-subtitle"),
html.P(
"",
className="card-text",
),
dbc.CardLink(
"GitHub link",
href="https://github.com/salisaresama",
),
]),
style={"width": "18rem"},
)),
dbc.Col(
dbc.Card(
dbc.CardBody([
html.H4("Marko Sahan", className="card-title"),
html.H6("ML Engineer", className="card-subtitle"),
html.P(
"",
className="card-text",
),
dbc.CardLink(
"GitHub link",
