Embedding onmousemove event in a cycle view

[ponch1775]

Hello,

I have a simple cycleview component that displays either calores and heartrate or steps and battery level.  The component works as expected, but i want to add a touch event so that the watch vibrates when the cycleview component is activated.  I defined a button inside the clycleview SVG to trigger the vibration but can't get it to work.  Here's the SVG with the button definition in bold:

<svg x="0" y="81%" width="100%" height = "20%" >
<rect id="Touch" width="100%" height = "100%" fill="none" pointer-events="visible" />
<use id="stats-cycle" href="#cycleview">
<use href="#cycleview-item" >
<image href="stat_cals_solid_48px.png" height="48" width="48" x="0" y="0" fill="orange"/>
<text id="cal"></text>
<image href="stat_hr_solid_48px.png" height="48" width="48" x="200" y="0" fill="red" />
<text id="cor"></text>
</use>
<use href="#cycleview-item" >
<image href="stat_steps_solid_48px.png" height="48" width="48" x="0" y="0" fill="yellow"/>
<text id="pas"></text>
<image id="batImg" x="200" y="7" height="32" width="21"/>
<text id="bat"></text>
</use>
</use>
</svg>

The index.js has the function definition:

let Touch = document.getElementById("Touch");

Touch.onmousemove = function(evt) {
console.log("Touch event: " + evt.screenX + ' ' + evt.screenY);
vibration.start("confirmation-max");
}

I don't get any error messages during compilation.  Any suggestions?

[ponch1775]

Actually I figured it out - it's as easy as emaking the pointer-events "visible" for the cycleview component itself, no need to define an additional button.  Also, use 'onclick' instead of 'onmousemove' in the .js file.  The SVG solution looks like this:

<svg x="0" y="81%" width="100%" height = "20%" >
<use id="stats-cycle" href="#cycleview" pointer-events = "visible">
<use href="#cycleview-item" >
<image href="stat_cals_solid_48px.png" height="48" width="48" x="0" y="0" fill="orange"/>
<text id="cal"></text>
<image href="stat_hr_solid_48px.png" height="48" width="48" x="200" y="0" fill="red" />
<text id="cor"></text>
</use>
<use href="#cycleview-item" >
<image href="stat_steps_solid_48px.png" height="48" width="48" x="0" y="0" fill="skyblue"/>
<text id="pas"></text>
<image id="batImg" x="210" y="7" height="32" width="21"/>
<text id="bat"></text>
</use>
</use>
</svg>

This is the java-script:

let click = document.getElementById("stats-cycle");

click.onclick = function(e) {
console.log("Touch event!!");
vibration.start("bump");
}