Skip to main content

Graphics / Primitives

Use the graphics module to render and update shapes.

from h2o_wave import site, ui, graphics as g
# Create some shapesarc = g.arc(r1=25, r2=50, a1=90, a2=180)circle = g.circle(cx=25, cy=25, r=25)ellipse = g.ellipse(cx=25, cy=25, rx=25, ry=20)image = g.image(width=50, height=50, href='https://www.python.org/static/community_logos/python-powered-h-140x182.png')line = g.line(x1=0, y1=0, x2=50, y2=50)path = g.path(d='M 0,0 L 50,50 L 50,0 L 0,50 z')path2 = g.path(d=g.p().M(0, 0).L(50, 50).L(50, 0).L(0, 50).z().d())  # same effect as above, but programmable.path3 = g.p().M(0, 0).L(50, 50).L(50, 0).L(0, 50).z().path()  # same effect as above, but a tad more concise.polygon = g.polygon(points='0,0 50,50 50,0 0,50')polyline = g.polyline(points='0,0 50,50 50,0 0,50')rect = g.rect(x=0, y=0, width=50, height=50)rounded_rect = g.rect(x=0, y=0, width=50, height=50, rx=10)text = g.text(x=0, y=48, text='Z', font_size='4em')
# Collect 'em allshapes = [arc, circle, ellipse, image, line, path, path2, path3, polygon, polyline, rect, rounded_rect, text]
# Apply fill/stroke for each shapefor shape in shapes:    shape.fill = 'none' if g.type_of(shape) == 'polyline' else 'crimson'    shape.stroke = 'darkred'    shape.stroke_width = 5
# Lay out shapes verticallyy = 10for shape in shapes:    shape.transform = f'translate(10,{y})'    y += 60
# Add shapes to the graphics cardpage = 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()

Tags: โ€‚graphics