Hi @mabe2k!
You can but in most cases you probably shouldn’t. The touch functionality is prone to draining the battery faster than usual and might not be available for all watches. <div> elements (and some other elements) have attributes onTap, onDoubleTap and onLongTapStart that can be used to register event listeners for touch actions (clicks, double clicks and longpress-then-move respectively). To use these, you need a compatible watch with up-to-date software and touch functionality enabled (select “Touch” to be “On” under “Exercise options” when you start an exercise or under “Control panel” from the pause menu during an exercise). The root element (<uiView>) has an even wider variety of touch action related event listeners, but you can probably get started with the ones mentioned (please feel free to ask a follow-up question about this if you’re interested in these).
Here is a basic example of the explained functionality using the built-in setStyle function to change the color of a box when it is interacted with:
t.html:
<uiView>
<div id="suuntoplus">
<div id="box"
style="width: 40%; height: 40%; left: calc(50% - 50%e); top: calc(50% - 50%e); border-radius: 25px; background-color: #FFFFFF;"
onTap="setStyle('#box', 'background-color', '#00AAFF')"
onDoubleTap="setStyle('#box', 'background-color', '#44CC00')"
onLongTapStart="setStyle('#box', 'background-color', '#FF7733')"
></div>
</div>
</uiView>
Please note that you will need a manifest.json with the mandatory fields and a main.js with getUserInterface function defined. Minimal versions of these are provided here for your convenience:
main.js:
function getUserInterface() { return {template: 't'}; }
manifest.json:
{
"name": "Touch",
"description": "Touch example",
"author": "Your Name",
"version": "1.00",
"modificationTime": 1770000000,
"type": "feature",
"usage": "workout",
"template": [{"name": "t.html"}]
}
Hope this helps. Happy coding!
