square-buttons sometimes no action

[SunsetRunner]

My buttons works fine until I click on a free area (background picture), then the click is visulized but have no action any more.

[JonFitbit]

Can you provide a small sample application which exhibits this behaviour?

Thanks

[SunsetRunner]

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 

[SunsetRunner]

@JonFitbit

Can you reproduce it?

[JonFitbit]

Sorry, it looks like you've pasted the JS a few times. Can you paste it again please?

[SunsetRunner]

Sorry, i have corrected my entry.

[JonFitbit]

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.

[SunsetRunner]

<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.

[SunsetRunner]

@JonFitbit

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.

[JonFitbit · Accepted solution]

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. 

[SunsetRunner]

What's the difference between onactivate and onclick?

Usually i only know onactivate on forms/windows.

[JonFitbit]

onclick would fire even if the button had been disabled, so it’s not ideal, but it’s ok to use for the moment.

[Capitano]

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

[SunsetRunner]

@Capitano

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 🙂

[HenReeco]

has that fix come yet?

[Rajid]

I see the same bug currently, so I'm using "onclick", which works fine.

[morningReign]

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