joystick.html - Pytml - Pytml is a 15KB lightweight PyScript alternative

joystick.html (1015B)
      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="UTF-8">
      5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6   <title>Pytml Joystick</title>
      7   <script src="https://pytml.vercel.app/pytml.js"></script>
      8   <style>
      9     body { font-family: system-ui; padding: 30px; max-width: 560px; margin: auto; text-align: center; }
     10     #stick { width: 180px; height: 180px; border-radius: 50%; border: 3px solid #444; margin: 30px auto; color: #222; background: #eee; }
     11     pre { text-align: left; display: inline-block; padding: 14px; background: #f4f4f5; border-radius: 8px; }
     12   </style>
     13 </head>
     14 <body>
     15 <h1>Touch Joystick</h1>
     16 <div id="stick"></div>
     17 <pre id="state">x=0.00 y=0.00 magnitude=0.00</pre>
     18 
     19 <py1>
     20 from pytml import joystick
     21 
     22 stick = joystick("stick")
     23 
     24 
     25 def move(event):
     26     state.text = f"x={event['joystick_x']:.2f} y={event['joystick_y']:.2f} magnitude={event['magnitude']:.2f}"
     27 
     28 
     29 stick.on("joystickmove", move)
     30 </py1>
     31 
     32 <p><a href="../demo.html">← Back to demos</a></p>
     33 </body>
     34 </html>