Ejemplo n.º 1
0
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()
Ejemplo n.º 2
0
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
Ejemplo n.º 3
0
# 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()
Ejemplo n.º 4
0
# 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()
Ejemplo n.º 5
0
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()
Ejemplo n.º 6
0
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'),
    ),
)
Ejemplo n.º 7
0
    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()