async def serve(q: Q):
hilbert_curve = make_hilbert_curve(300, q.args.depth or 5)
if not q.client.initialized:
q.page['curve'] = ui.graphics_card(
box='1 1 4 6',
view_box='0 0 300 300',
width='100%',
height='100%',
scene=g.scene(hilbert_curve=g.path(
d=hilbert_curve, fill='none', stroke='#333')),
)
q.page['form'] = ui.form_card(
box='1 7 4 1',
items=[
ui.slider(name='depth',
label='Play with this Hilbert curve!',
min=1,
max=6,
value=5,
trigger=True),
],
)
q.client.initialized = True
else:
g.draw(q.page['curve'].scene.hilbert_curve, d=hilbert_curve)
await q.page.save()
def render(pattern):
page = site['/demo']
page_cols = 4
page_rows = 5
box_width = 134
box_height = 76
gap = 15
max_width = box_width * page_cols + (page_cols - 1) * gap
max_height = box_height * page_rows + (page_rows - 1) * gap
width = 10
height = 10
grid_cols = max_width // width
grid_rows = max_height // height
background = 'whitesmoke'
stroke = 'gainsboro'
stroke_width = 1
grid = create_grid(grid_rows, grid_cols, background, width, height, stroke,
stroke_width)
page['game'] = ui.graphics_card(
box=f'1 1 {page_cols} {page_rows}',
view_box=f'0 0 {max_width} {max_height}',
width='100%',
height='100%',
scene=g.scene(**grid),
)
grid_state = get_empty_state(grid_rows, grid_cols)
update_grid(page, grid_state, grid_rows, grid_cols, background)
grid_state = apply_start_state(grid_state, pattern)
update_grid(page, grid_state, grid_rows, grid_cols, background)
while True:
time.sleep(0.1)
new_grid_state = evaluate_grid(grid_state)
update_grid(page, new_grid_state, grid_rows, grid_cols, background)
grid_state = new_grid_state
# Graphics / Turtle
# Use turtle #graphics to draw paths.
# Original example: https://docs.python.org/3/library/turtle.html
# ---
from h2o_wave import site, ui, graphics as g
t = g.turtle().f(100).r(90).pd()
for _ in range(36):
t.f(200).l(170)
spirograph = t.pu(1).path(stroke='red', fill='yellow')
page = site['/demo']
page['example'] = ui.graphics_card(
box='1 1 2 3', view_box='0 0 220 220', width='100%', height='100%',
scene=g.scene(foo=spirograph),
)
page.save()
# Graphics / Path
# Use the #graphics API to draw a red square.
# ---
from h2o_wave import site, ui, graphics as g
# Use relative coords to draw a square, sort of like Python's turtle package.
red_square = g.p().m(25, 25).h(50).v(50).h(-50).z().path(fill='red')
page = site['/demo']
page['example'] = ui.graphics_card(
box='1 1 2 3',
view_box='0 0 100 100',
width='100%',
height='100%',
scene=g.scene(foo=red_square),
)
page.save()
cy='50',
r='45',
fill='#111',
stroke_width='2px',
stroke='#f55'), ),
scene=g.scene(
hour=g.rect(x='47.5',
y='12.5',
width='5',
height='40',
rx='2.5',
fill='#333',
stroke='#555'),
min=g.rect(x='48.5',
y='12.5',
width='3',
height='40',
rx='2',
fill='#333',
stroke='#555'),
sec=g.line(x1='50',
y1='50',
x2='50',
y2='16',
stroke='#f55',
stroke_width='1px'),
),
)
page.save()