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()
y = 10
for shape in shapes:
shape.transform = f'translate(10,{y})'
y += 60
# Add shapes to the graphics card
page = site['/demo']
page['example'] = ui.graphics_card(
box='1 1 1 10',
view_box='0 0 70 800',
width='100%',
height='100%',
stage=g.stage(
arc=arc,
circle=circle,
ellipse=ellipse,
image=image,
line=line,
path=path,
path2=path2,
path3=path3,
polygon=polygon,
polyline=polyline,
rect=rect,
rounded_rect=rounded_rect,
text=text,
),
)
page.save()
page['example'] = ui.graphics_card(
box='1 1 2 3',
view_box='0 0 100 100',
width='100%',
height='100%',
stage=g.stage(face=g.circle(cx='50',
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'),
),
)
g.spline(x=x, y=y, y0=[], curve='smooth', **area_style),
g.spline(x=x, y=y, y0=y0, curve='smooth-open', **area_style),
g.spline(x=x, y=y, y0=y0, curve='linear', **area_style),
g.spline(x=x, y=y, y0=[], curve='linear', **area_style),
g.spline(x=x, y=y, y0=y0, curve='monotone-x', **area_style),
g.spline(x=x, y=y, y0=y0, curve='monotone-y', **area_style),
g.spline(x=x, y=y, y0=y0, curve='natural', **area_style),
g.spline(x=x, y=y, y0=y0, curve='step', **area_style),
g.spline(x=x, y=y, y0=y0, curve='step-after', **area_style),
g.spline(x=x, y=y, y0=y0, curve='step-before', **area_style),
]
page = site['/demo']
row, col = 1, 1
for spline in splines:
page[f'spline_{col}_{row}'] = ui.graphics_card(
box=f'{col} {row} 3 1',
view_box='0 0 1000 150',
width='100%',
height='100%',
stage=g.stage(
text=g.text(text=spline.curve or '', y=40, font_size=40),
spline=spline,
),
)
col += 3
if col > 11:
row, col = row + 1, 1
page.save()