async def serve(q: Q):
hash = q.args['#']
if hash:
blurb = q.page['blurb']
if hash == 'menu/spam':
blurb.content = "Sorry, we're out of spam!"
elif hash == 'menu/ham':
blurb.content = "Sorry, we're out of ham!"
elif hash == 'menu/eggs':
blurb.content = "Sorry, we're out of eggs!"
elif hash == 'about':
blurb.content = 'Everything here is gluten-free!'
else:
q.page['nav'] = ui.toolbar_card(
box='1 1 4 1',
items=[
ui.command(name='#menu/spam', label='Spam'),
ui.command(name='#menu/ham', label='Ham'),
ui.command(name='#menu/eggs', label='Eggs'),
ui.command(name='#about', label='About'),
],
)
q.page['blurb'] = ui.markdown_card(
box='1 2 4 2',
title='Store',
content='Welcome to our store!',
)
await q.page.save()
def render_filter_toolbar(q):
render_home(q)
q.page["filter_toolbar"] = ui.toolbar_card(
box=config.boxes["new_filter"],
items=[
ui.command(
name='add_filter',
label='Add filter',
caption='Create a new filter',
icon='Add',
),
ui.command(
name='reset_filters',
label='Reset filters',
caption='Reset the filters',
icon='Delete',
)
])
filter_dropdown = populate_dropdown_list(q)
q.page["filters"] = ui.form_card(box=config.boxes['filters'],
items=filter_dropdown)
# Header
# Use a header card to display a page #header.
# ---
from h2o_wave import site, ui
image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
commands = [
ui.command(name='profile', label='Profile', icon='Contact'),
ui.command(name='preferences', label='Preferences', icon='Settings'),
ui.command(name='logout', label='Logout', icon='SignOut'),
]
page = site['/demo']
page['header1'] = ui.header_card(
box='1 1 9 1',
title='Transparent header',
subtitle='And now for something completely different!',
image=
'https://www.h2o.ai/wp-content/themes/h2o2018/templates/dist/images/h2o_logo.svg',
items=[
ui.button(name='btn1', label='Button 1'),
ui.button(name='btn2', label='Button 2'),
ui.button(name='btn3', label='Button 3'),
],
secondary_items=[
ui.textbox(name='search',
icon='Search',
width='300px',
placeholder='Search...')
],
color='transparent')
page['header2'] = ui.header_card(
dict(mark='bar',
encoding=dict(x=dict(field='a', type='ordinal'),
y=dict(field='b',
type='quantitative',
scale=dict(type='log')))))
# Data for our plot.
plot_data = data(fields=["a", "b"],
rows=[["A", 28], ["B", 55], ["C", 43], ["D", 91], ["E", 81],
["F", 53], ["G", 19], ["H", 87], ["I", 52]],
pack=True)
# Create a couple of context menu commands.
log_scale_command = ui.command(
name='to_log_scale',
label='Log Scale',
icon='LineChart',
)
linear_scale_command = ui.command(
name='to_linear_scale',
label='Linear Scale',
icon='LineChart',
)
@app('/demo')
async def serve(q: Q):
if q.client.plot_added: # Have we already added a plot?
example = q.page['example']
if q.args.to_log_scale:
# Change to log scale
async def serve(q: Q):
if '#' in q.args and not q.args.show_nav:
hash_ = q.args['#']
q.page.drop()
q.page['redirect'] = ui.form_card(box='1 1 2 5',
items=[
ui.text(f'#={hash_}'),
ui.button(name='show_nav',
label='Back',
primary=True),
])
else:
q.page['meta'] = ui.meta_card(box='', redirect='#')
q.page['nav1'] = ui.nav_card(
box='1 1 2 -1',
value='#menu/spam',
title='H2O Wave',
subtitle='And now for something completely different!',
image=
'https://www.h2o.ai/wp-content/themes/h2o2018/templates/dist/images/h2o_logo.svg',
items=[
ui.nav_group('Menu',
items=[
ui.nav_item(name='#menu/spam', label='Spam'),
ui.nav_item(name='#menu/ham', label='Ham'),
ui.nav_item(name='#menu/eggs', label='Eggs'),
ui.nav_item(name='#menu/toast',
label='Toast',
disabled=True),
]),
ui.nav_group('Help',
items=[
ui.nav_item(name='#about',
label='About',
icon='Info'),
ui.nav_item(name='#support',
label='Support',
icon='Help'),
])
],
secondary_items=[
ui.inline(items=[
ui.persona(title='John Doe',
subtitle='Software developer',
size='s',
image=persona),
ui.menu(items=[
ui.command(
name='profile', label='Profile', icon='Contact'),
ui.command(name='preferences',
label='Preferences',
icon='Settings'),
ui.command(
name='logout', label='Logout', icon='SignOut'),
])
]),
],
)
q.page['nav2'] = ui.nav_card(
box='3 1 2 -1',
value='#menu/ham',
persona=ui.persona(title='John Doe',
subtitle='Data Scientist',
caption='Online',
size='xl',
image=persona),
items=[
ui.nav_group('Menu',
items=[
ui.nav_item(name='#menu/spam', label='Spam'),
ui.nav_item(name='#menu/ham', label='Ham'),
ui.nav_item(name='#menu/eggs', label='Eggs'),
ui.nav_item(name='#menu/toast',
label='Toast',
disabled=True),
]),
ui.nav_group('Help',
items=[
ui.nav_item(name='#about',
label='About',
icon='Info'),
ui.nav_item(name='#support',
label='Support',
icon='Help'),
])
],
secondary_items=[
ui.button(name='logout', label='Logout', width='100%')
],
color='primary')
await q.page.save()
async def serve(q: Q):
q.page['nav'] = ui.toolbar_card(
box='1 1 4 1',
items=[
ui.command(name='new',
label='New',
icon='Add',
items=[
ui.command(name='email',
label='Email Message',
icon='Mail'),
ui.command(name='calendar',
label='Calendar Event',
icon='Calendar'),
]),
ui.command(name='upload', label='Upload', icon='Upload'),
ui.command(name='share', label='Share', icon='Share'),
ui.command(name='download', label='Download', icon='Download'),
],
secondary_items=[
ui.command(name='tile', caption='Grid View', icon='Tiles'),
ui.command(name='info', caption='Info', icon='Info'),
],
overflow_items=[
ui.command(name='move', label='Move to...', icon='MoveToFolder'),
ui.command(name='copy', label='Copy to...', icon='Copy'),
ui.command(name='rename', label='Rename', icon='Edit'),
],
)
await q.page.save()
def create_main_ui(q: Q):
logger.debug("Creating page layout")
q.page["meta"] = ui.meta_card(
box="",
title="Conifer Counter",
theme="light",
layouts=[
ui.layout(
breakpoint="xs",
zones=[
ui.zone("header"),
ui.zone("title"),
ui.zone("body"),
ui.zone("footer"),
],
),
ui.layout(
breakpoint="m",
zones=[
ui.zone("header"),
ui.zone("title"),
ui.zone(
"body",
direction=ui.ZoneDirection.COLUMN,
zones=[
ui.zone("top", direction=ui.ZoneDirection.ROW),
ui.zone("middle", direction=ui.ZoneDirection.ROW),
ui.zone("bottom", direction=ui.ZoneDirection.ROW),
],
),
ui.zone("footer"),
],
),
ui.layout(
breakpoint="xl",
width="1200px",
zones=[
ui.zone("header"),
ui.zone("title"),
ui.zone(
"body",
direction=ui.ZoneDirection.COLUMN,
zones=[
ui.zone("top", direction=ui.ZoneDirection.ROW),
ui.zone("bottom", direction=ui.ZoneDirection.ROW),
],
),
ui.zone("footer"),
],
),
],
)
q.page["header"] = ui.header_card(
box="header",
title="Conifer Counter",
subtitle="Counting the trees you sees!",
icon="Street",
icon_color="green",
commands=[ui.command(name="change_mode", label="Dark Mode")],
)
q.page["title"] = ui.section_card(
box="title",
title=f"Total trees this session: {q.client.trees.get_total_trees()}",
subtitle="",
items=[
ui.button(name="view_historic_counts", label="View Past Sessions"),
ui.button(name="view_counts", label="Refresh Counts"),
ui.button(
name="save_counts",
label="End Session",
tooltip="Save this session's counts and reset to 0.",
),
],
)
q.page["footer"] = ui.footer_card(
box="footer",
caption=
"Made with 💛️ using [Wave](https://h2oai.github.io/wave/) by [@mtanco](https://github.com/mtanco)",
)
page = site['/demo']
image = 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&h=750&w=1260'
page['example'] = ui.postcard_card(
box='1 1 3 5',
persona=ui.persona(title='John Doe',
subtitle='Data Scientist',
image=image,
caption='caption'),
commands=[
ui.command(name='new',
label='New',
icon='Add',
items=[
ui.command(name='email',
label='Email Message',
icon='Mail'),
ui.command(name='calendar',
label='Calendar Event',
icon='Calendar'),
]),
ui.command(name='upload', label='Upload', icon='Upload'),
ui.command(name='share', label='Share', icon='Share'),
ui.command(name='download', label='Download', icon='Download'),
],
items=[
ui.inline(justify='end',
items=[
ui.mini_buttons([
ui.mini_button(name='like', label='4', icon='Heart'),
ui.mini_button(name='comment',