OPTION GUI TRUE
PRAGMA GUI gtk3

' Using libwebkit2gtk
PRAGMA INCLUDE <webkit2/webkit2.h>
PRAGMA OPTIONS `pkg-config --cflags webkit2gtk-4.0`
PRAGMA LDFLAGS `pkg-config --libs webkit2gtk-4.0`

CONST XSIZE = 300
CONST YSIZE = 300

CONST LONG_LEN = 115
CONST SHORT_LEN = 90

' Calculate position of clock hands based on current time
s = SECOND(NOW)*6-90
x2s$ = STR$(150+LONG_LEN*COS(RAD(s)))
y2s$ = STR$(150+LONG_LEN*SIN(RAD(s)))

m = MINUTE(NOW)*6-90
x2m$ = STR$(150+LONG_LEN*COS(RAD(m)))
y2m$ = STR$(150+LONG_LEN*SIN(RAD(m)))

h = IIF(HOUR(NOW)>12, HOUR(NOW)-12, HOUR(NOW))*30+(MINUTE(NOW)/12)*6-90
x2h$ = STR$(150+SHORT_LEN*COS(RAD(h)))
y2h$ = STR$(150+SHORT_LEN*SIN(RAD(h)))

' The GUI definition
id = GUIDEFINE(" \
	{ type=WINDOW name=window callback=delete-event callback=key-press-event resizable=0 title=\"Analog Clock with animated SVG\" } \
	{ type=WEBKIT_TYPE_WEB_VIEW name=view parent=window width-request=XSIZE+10 height-request=YSIZE+20 }")

' Helper function to load SVG
GLOBAL (*load_svg)() = webkit_web_view_load_html TYPE void

' Define the animated SVG
clock$ = "<svg width='300' height='300' viewBox='0 0 300 300'>" & \
"<g transform='scale(3,3)'>" & \
"<circle cx='50' cy='50' r='45' fill='peachpuff' stroke='black' stroke-width='2'/>  " & \
"<g fill='white' stroke='black' stroke-width='2'> " & \
"<line x1='50' x2='50' y1='5' y2='10'/>  " & \
"<line x1='72.5' x2='70' y1='11.03' y2='15.36'/>  " & \
"<line x1='88.97' x2='84.64' y1='27.5' y2='30'/>  " & \
"<line x1='95' x2='90' y1='50' y2='50'/>  " & \
"<line x1='88.97' x2='84.64' y1='72.5' y2='70'/>  " & \
"<line x1='72.5' x2='70' y1='88.97' y2='84.64'/>  " & \
"<line x1='50' x2='50' y1='95' y2='90'/>  " & \
"<line x1='27.5' x2='30' y1='88.97' y2='84.64'/>  " & \
"<line x1='11.03' x2='15.36' y1='72.5' y2='70'/>  " & \
"<line x1='5' x2='10' y1='50' y2='50'/>  " & \
"<line x1='11.03' x2='15.36' y1='27.5' y2='30'/>  " & \
"<line x1='27.5' x2='30' y1='11.03' y2='15.36'/>  " & \
"</g> " & \
"<g fill='peru' font-family='Sans' font-size='8' " & \
" text-anchor='middle' opacity='1' dominant-baseline='central'> " & \
"<text x='50' y='20'>12</text> " & \
"<text x='85' y='53'>3</text> " & \
"<text x='50' y='88'>6</text> " & \
"<text x='15' y='53'>9</text> " & \
"</g> " & \
"</g>" & \
"<circle cx='150' cy='150' r='10' stroke-width='1' stroke='black' fill='black' />" & \
"<line x1='150' y1='150' x2='" & x2m$ & "' y2='" & y2m$ & "' stroke-width='4' stroke='black'>" & \
"<animateTransform attributeName='transform' type='rotate' dur='3600' from='0,150,150' to='360,150,150' repeatCount='indefinite'/></line>" & \
"<line x1='150' y1='150' x2='" & x2h$ & "' y2='" & y2h$ & "' stroke-width='7' stroke='black'>" & \
"<animateTransform attributeName='transform' type='rotate' dur='43200' from='0,150,150' to='360,150,150' repeatCount='indefinite'/></line>" & \
"<line x1='150' y1='150' x2='" & x2s$ & "' y2='" & y2s$ & "' stroke-width='2.2' stroke='red'>" & \
"<animateTransform attributeName='transform' type='rotate' dur='60' from='0,150,150' to='360,150,150' repeatCount='indefinite'/></line>" & \
"<circle cx='150' cy='150' r='5' stroke-width='0' stroke='black' fill='red' />" & \
"<circle cx='150' cy='150' r='2' stroke-width='0' stroke='black' fill='black' />" & \
" </svg>"

' Load the clock definition into webkit
CALL GUIFN(id, "view", load_svg, clock$, NULL)

' Run event loop
IF LEN(GUIEVENT$(id)) THEN END