Loading page ...
If you had 25 hours in a day, how would you create a life filled with happiness?
How would you use that extra hour to make a meaningful contribution?
If you could create an enjoyable 25th hour of free time in your day, that would be between
and
from datetime import datetime
from js import document, Math, setInterval
from pyodide import create_proxy
def erase_loading_page():
document.getElementById("status").innerHTML = ' '
#before there is "Loading page ...", this sets the page to ' ' (empty)
def drawClock(ctx, radius):
drawFace(ctx, radius)
drawNumbers(ctx, radius)
drawTime(ctx, radius)
#ctx.rotate(Math.PI/6)
#ctx.translate(0, -radius * 0.85)
#ctx.rotate(-Math.PI/6)
#ctx.fillText(str(1), radius*0.85/2, 0)
ctx.fillText(datetime.now(), -radius, 0)
#ctx.font = str(radius * 0.15) + "px arial"
#ctx.rotate(Math.PI/6)
#ctx.translate(0, radius * 0.85)
#ctx.rotate(-Math.PI/6)
def drawFace(ctx, radius):
#draw clock face
ctx.beginPath()
#The Canvas API allows JavaScript to draw graphics on the canvas in HTML.
#The beginPath() method is called before beginning each line, so that they may be drawn with different colors.
#https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-beginpath-dev
ctx.arc(0, 0, radius, 0, 2 * Math.PI)
#context.arc(x, y, radius, startAngle, endAngle [,counterclockwise])
#startAngle 0 means conventional 3 o'clock direction
#Angle is in radian, Math.PI=180°
ctx.fillStyle = 'white' #set clock color
ctx.fill() #color clock face
#draw clock border
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05)
grad.addColorStop(0, '#333')
grad.addColorStop(0.5, 'white')
grad.addColorStop(1, '#333')
ctx.strokeStyle = grad
ctx.lineWidth = radius * 0.1
ctx.stroke()
#draw clock center
ctx.beginPath()
ctx.arc(0, 0, radius*0.1, 0, 2 * Math.PI)
ctx.fillStyle = '#333'
ctx.fill()
def drawNumbers(ctx, radius):
ctx.font = str(radius * 0.15) + "px arial"
#font = '27'+'px arial' = '27px arial'
#https://drafts.csswg.org/css-fonts/#font-prop
ctx.textBaseline = "middle"
ctx.textAlign = "center"
for num in range(1, 13):
ang = num * Math.PI / 6
ctx.rotate(ang)
ctx.translate(0, -radius * 0.85) #set drawing origin to (x,y)
ctx.rotate(-ang)
ctx.fillText(str(num), 0, 0) #context.fillText(text,x,y [,maxWidth])
ctx.rotate(ang)
ctx.translate(0, radius * 0.85)
ctx.rotate(-ang)
def drawTime(ctx, radius):
now = datetime.now()
#year, month, day, hour, minute, second, microsecond
#https://docs.python.org/3/library/datetime.html
hour = now.hour
minute = now.minute
second = now.second
# hour
hour = hour % 12 #除12的餘數
hour = (hour * Math.PI / 6)
hour += (minute * Math.PI / (6*60))
hour += (second * Math.PI / (6*60*60))
drawHand(ctx, hour, radius*0.5, radius*0.07)
# minute
minute = (minute * Math.PI / 30)
minute += (second * Math.PI / (30 * 60))
drawHand(ctx, minute, radius * 0.8, radius * 0.07)
# second
second = (second * Math.PI / 30)
drawHand(ctx, second, radius * 0.9, radius * 0.02)
def drawHand(ctx, pos, length, width):
ctx.beginPath()
ctx.lineWidth = width
ctx.lineCap = "round"
ctx.moveTo(0,0)
ctx.rotate(pos)
ctx.lineTo(0, -length)
ctx.stroke()
ctx.rotate(-pos)
def main():
erase_loading_page()
canvas = document.getElementById("canvas")
ctx = canvas.getContext("2d") #get to creat a 2D object rendering context.
radius = canvas.height / 2
ctx.translate(radius, radius) #set drawing origin to (x,y)
radius = radius * 0.90
drawClock(ctx, radius)
drawClock_proxy = create_proxy(drawClock)
#Pyodide has an almost-magical ability to proxy代理 objects and functions between Python and JavaScript in both directions. But to keep pydiode proxy for python code to run for a lifetime (until PyProxy.destroy() )we need to create proxy manually.
interval_id = setInterval(drawClock_proxy, 1000, ctx, radius)
#The setInterval() method calls a function at specified intervals (in milliseconds). Syntax: setInterval(function, milliseconds, param1, param2, ...) where param1 and param2 are parameters to pass to the function.
main()