Skip to main content

Graphics / Clock

Use the graphics API to make a clock. Source: https://codepen.io/dudleystorey/pen/HLBki

import timeimport datetimefrom h2o_wave import site, ui, graphics as g
page = site['/demo']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'),    ),)
page.save()

def rotate(deg):    return f'rotate({deg} 50 50)'

scene = page['example'].scenewhile True:    time.sleep(1)    now = datetime.datetime.now()    g.draw(scene.hour, transform=rotate(30 * (now.hour % 12) + now.minute / 2))    g.draw(scene.min, transform=rotate(6 * now.minute))    g.draw(scene.sec, transform=rotate(6 * now.second))    page.save()

Tags: โ€‚graphics