10-07-2017 07:15
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-07-2017 07:15
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
My buttons works fine until I click on a free area (background picture), then the click is visulized but have no action any more.
Answered! Go to the Best Answer.
Accepted Solutions
10-14-2017 09:55
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-14-2017 09:55
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I've had a look and we do have an issue logged internally for onactivate not working correctly when nested in multiple <svg> containers. We will have a fix for this in a future release, but perhaps you could use the onclick event for the meantime.

10-07-2017 12:33
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-07-2017 12:33
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Can you provide a small sample application which exhibits this behaviour?
Thanks

10-07-2017 15:32 - edited 10-14-2017 02:58
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-07-2017 15:32 - edited 10-14-2017 02:58
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
widget.gui
<svg> <defs> <link rel="stylesheet" href="styles.css" /> <link rel="import" href="/mnt/sysassets/widgets_common.gui" /> <link rel="import" href="/mnt/sysassets/widgets/square_button_widget.gui" /> </defs> </svg>
index.gui
<svg> <image href="field.png" /> <use id="scoreA" href="#square-button" x="220" y="25" width="100" fill="fb-white" > <set href="#text" attributeName="text-buffer" to="0" /> </use> <use id="scoreB" href="#square-button" x="220" y="145" width="100" fill="fb-white" > <set href="#text" attributeName="text-buffer" to="0" /> </use> </svg>
index.js
import document from "document";
var scoreA = 0;
var scoreB = 0;
var btnScoreA = document.getElementById("scoreA");
btnScoreA.onactivate = function(evt) {
scoreA++;
btnScoreA.text = scoreA;
}
var btnScoreB = document.getElementById("scoreB");
btnScoreB.onactivate = function(evt) {
scoreB++;
btnScoreB.text = scoreA;
}
field.png

10-14-2017 02:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-14-2017 02:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Can you reproduce it?

10-14-2017 02:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-14-2017 02:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Sorry, it looks like you've pasted the JS a few times. Can you paste it again please?

10-14-2017 02:59
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-14-2017 02:59
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Sorry, i have corrected my entry.

10-14-2017 03:19
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-14-2017 03:19
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
A couple of things you can try:
<image href="field.png" pointer-events="none" />
Also just see if the events are firing by checking the console logs.
btnScoreA.onactivate = function(evt) { console.log("button A"); }
btnScoreB.onactivate = function(evt) {
console.log("button B");
}
One final thing, your current btnScoreB event seems to be updating the value for btnScoreA.

10-14-2017 03:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-14-2017 03:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
<image href="field.png" pointer-events="none" />
That was the solution, thank you.
@JonFitbit wrote:
One final thing, your current btnScoreB event seems to be updating the value for btnScoreA.
My mistake, made a reduced example and I guess I wasn't paying attention. In the right project it is correct.

10-14-2017 06:57 - edited 10-14-2017 07:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-14-2017 06:57 - edited 10-14-2017 07:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
It's kind of frustrating.
In the above example, it worked according to your tip.
Here is another example of where the problem occurs again
In short:
1) Title View
2) After 3 sec. change to Config View
3) On Press "Start" switch to Main View
Problem:
Clicking on "Start" does not trigger any action.
Uploaded it to GitHub, think it's easier for you: https://github.com/neTix84/FibitViews
In my real app, it still behaves differently, but one thing at a time.
Info: By using several SVG elements, the app shows a black screen for a longer time at startup. With an element, this does not happen.

10-14-2017 09:55
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-14-2017 09:55
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I've had a look and we do have an issue logged internally for onactivate not working correctly when nested in multiple <svg> containers. We will have a fix for this in a future release, but perhaps you could use the onclick event for the meantime.

10-14-2017 10:41
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
10-14-2017 10:41
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
What's the difference between onactivate and onclick?
Usually i only know onactivate on forms/windows.

10-14-2017 12:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


10-14-2017 12:21
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

02-02-2018 05:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

02-02-2018 05:40
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Hello,
is this issue already fixed?
I also use onclick instead of onactivate with comboButtons in an app with several views, so the hardbuttons still don't work.
A excerpt of my code:
<svg> <svg id = "introView" display = "inline"> <text id = "hello" text-anchor="middle" x="50%" y="110" class="helloTextStyle">Warten auf GPS... </text>; (…) <image id="gpsGruen_introView" x="299" y="10" width="40" height="40" href="LED_gruen.png" /> <use id="btnUL" href="#combo-button-upper-left" fill="fb-peach" >; <set href="combo-button-icon" attributeName="href" to="duration_pos.png" />; <set href="combo-button-icon-press" attributeName="href" to="duration_neg.png" />; <set href="combo-button-stroke" attributeName="display" to="inline"/>; </use> <use id="btnBL" href="#combo-button-lower-left" fill="fb-peach" >; <set href="combo-button-icon" attributeName="href" to="distance-**ahem**.png" />; <set href="combo-button-icon-press" attributeName="href" to="distance-neg.png" />; <set href="combo-button-stroke" attributeName="display" to="inline"/>; </use> <use id="btnBR" href="#combo-button-lower-right" fill="fb-peach" >; <set href="combo-button-icon" attributeName="href" to="play.png" />; <set href="combo-button-icon-press" attributeName="href" to="play_press.png" />; <set href="combo-button-stroke" attributeName="display" to="inline"/>; </use> </svg> <svg id = "nextView" display = "none"> (…another view with comboButtons) </svg> (… some more views…) </svg>
I understood that the issue with onactivate and comboButtons was a result of the cascaded <svg>s - is this right?
Btw: I don't know if the solution of non-runner-rob here
https://community.fitbit.com/t5/SDK-Development/Combo-Button-and-physical-button/m-p/2334229#M1806
can be used in this case?
Capitano

02-04-2018 03:17
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

SunsetRunner
02-04-2018 03:17
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I am currently not using combo buttons. Trapping the physical buttons is quite easy and is independent of combo click, which is either a good thing or not depending on your stance/point of view 🙂

09-11-2018 12:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

09-11-2018 12:45
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
has that fix come yet?

07-14-2020 14:50
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

07-14-2020 14:50
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I see the same bug currently, so I'm using "onclick", which works fine.

07-14-2020 17:16 - edited 07-14-2020 17:16
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

07-14-2020 17:16 - edited 07-14-2020 17:16
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I ended up handling all touch events from the topmost SVG:
<svg id="mPage" viewport-fill="#000000" pointer-events="visible">
<!-- every other element -->
</svg>
In the app I resolve the mouse events
var mArm
function om(evt){return Math.floor(2*evt.screenX/device.screen.width)+2*Math.floor(2*evt.screenY/device.screen.height)}
//------------------------------------------------------------------------------------------
gE('mPage').onmousedown = evt => {
mArm=om(evt)
}
//------------------------------------------------------------------------------------------
gE('mPage').onmouseup = evt => {
var clickPos=om(evt)
if (clickPos==mArm){
switch (clickPos){
case 0:
break
case 1:
break
case 2:
break
case 3:
break
default:
}
}
}
Regards,
Reign

