controls.html (1606B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Pytml 2.5 Controls</title> 6 <script src="https://pytml.vercel.app/pytml.js"></script> 7 <style> 8 body { font-family: system-ui; max-width: 760px; margin: 30px auto; padding: 20px; } 9 .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:12px 0; } 10 #joystick { width:150px; height:150px; border-radius:50%; background:#ddd; } 11 #scroll { height:140px; overflow:auto; border:1px solid #bbb; padding:10px; } 12 </style> 13 </head> 14 <body> 15 <h1>Controls</h1> 16 <div class="row"> 17 <input id="name" placeholder="Type here"> 18 <button id="say">Say</button> 19 <label><input id="enabled" type="checkbox"> enabled</label> 20 <input id="slider" type="range" min="0" max="100" value="50"> 21 <span id="slider_value">50</span> 22 </div> 23 <p id="output"></p> 24 25 <div id="scroll"> 26 <p>Scroll inside this box.</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p><p>Line 7</p><p>Line 8</p> 27 </div> 28 29 <h2>Joystick</h2> 30 <div id="joystick"></div> 31 <p id="joystick_state">x=0 y=0</p> 32 33 <py1> 34 from pytml import joystick 35 36 37 def say_click(event): 38 output.text = "Hello " + name.value 39 40 41 def slider_changed(event): 42 slider_value.text = slider.value 43 44 45 def scrolled(event): 46 print("scrollTop:", event["scrollTop"]) 47 48 49 def moved(event): 50 joystick_state.text = f"x={event['joystick_x']:.2f} y={event['joystick_y']:.2f}" 51 52 say.on("click", say_click) 53 slider.on("input", slider_changed) 54 scroll.on("scroll", scrolled) 55 56 stick = joystick("joystick") 57 stick.on("joystickmove", moved) 58 </py1> 59 </body> 60 </html>