Skip to main content

Graphics / Clock

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

import time
import datetime
from 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'].scene
while 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