Bug: combo buttons don't work

gaperton · ‎05-24-2018

If you define two combo buttons on different screens, the hardware button won't trigger the combo button.

@JonFitbit, there's the high severity bug making combo button widget practically unusable. Or I'm missing something.

<svg id="timer_config" display="none">
 <use id="btn-br" href="#combo-button-lower-right" fill="fb-peach">
   <set href="combo-button-icon" attributeName="href" to="icons/btn_combo_play_p.png"/>
   <set href="combo-button-icon-press" attributeName="href" to="icons/btn_combo_play_press_p.png"/>
   <set href="combo-button-stroke" attributeName="display" to="inline"/>
 </use>
</svg>

<svg id="timer_screen">
 <use id="btn-br-2" href="#combo-button-lower-right" fill="fb-peach">
   <set href="combo-button-icon" attributeName="href" to="icons/btn_combo_play_p.png"/>
   <set href="combo-button-icon-press" attributeName="href" to="icons/btn_combo_play_press_p.png"/>
   <set href="combo-button-stroke" attributeName="display" to="inline"/>
 </use>
</svg>

I can create my own implementation of the combo button which would work properly, but it defeats the whole purpose of the SDK.

I would propose to increase the size of an application heap, make widgets implementation in JS, and open source this implementation making it the part of the SDK distribution. In this case, I bet I could just fix this bug without waiting for FitBit developers who seem to be quite busy with something.

JonFitbit · ‎06-05-2018

We still have an internal issue tracking this bug, I've asked for an update.

I believe the workaround is to use the onclick event instead of onactivate.

gaperton · ‎06-05-2018

> I believe the workaround is to use the onclick event instead of onactivate

I tried that. The major problem is, however, that it doesn't react on the hardware button. And as far as I remember, manual event subscription for the button doesn't work as well when the combo button is present on the screen.

I would be happy to help you fix that bugs assuming that the implementation is in JS and it's open source.

jomis003 · ‎08-18-2018

Is there any update for a fix on this bug or is the work around still to use the onclick event?

EmTe · ‎08-20-2018

@jomis003 wrote:
Is there any update for a fix on this bug or is the work around still to use the onclick event?

I think the workaround is to put the combo-button inside an SVG that is inside a template and then reference it in <use>.

Like my response? Vote for it! Or accept as solution!

jomis003 · ‎08-20-2018

Thank EmTe

More specifically I am trying to use the combo buttons on different screens (svg's). Here is my code:

</svg>

When configured in this way, the physical action of pushing the button on screen1 (onactivate) is not working to move to screen2. The buttons work within a single svg.

I thought @JonFitbit said that there is still an open issue on this. I was wondering if it is still an issue.

EmTe · ‎08-21-2018

You need to use templates.

<dfn>
<symbol id="screen1a">
<svg>
<rect id="background" />
<use id="btn-tr" href="#combo-button-upper-right" fill="fb-red">
  <set href="combo-button-icon" attributeName="href" to="list.png"/>
  <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
  <set href="combo-button-stroke" attributeName="display" to="inline"/>
</use>
</svg>
</symbol>

<symbol id="screen2a">
<svg>
  <use id="btn-br" href="#combo-button-lower-right" fill="fb-peach">
  <set href="combo-button-icon" attributeName="href" to="list.png"/>
  <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
  <set href="combo-button-stroke" attributeName="display" to="inline"/>
</use>
</svg>
</symbol>
</dfn>

 <use id="screen1" href="#screen1a" />
 <use id="screen2" href="#screen2a" display="none" />

Something like that.

Like my response? Vote for it! Or accept as solution!

jomis003 · ‎08-22-2018

I am getting a whole host of errors when using that code. I was able to minimize them by moving the defs outside of the symbols but it is still not functional.

With this I am getting

Error 22 Could not find symbol '#screen2a' in screen 2

and

Error 22 Undefined attribute 'href' in screen2 (I assume because of the first error)

gaperton · ‎08-22-2018

Two things.

First - "defs" must be in the same "svg" to be visible. That's correct code:

<svg>
<rect id="background" />
<defs>
<symbol id="screen1a">
<use id="btn-tr" href="#combo-button-upper-right" fill="fb-red">
<set href="combo-button-icon" attributeName="href" to="list.png"/>
<set href="combo-button-icon-press" attributeName="href" to="list.png"/>
<set href="combo-button-stroke" attributeName="display" to="inline"/>
</use>
  <use id="btn-br" href="#combo-button-lower-right" fill="fb-peach">
  <set href="combo-button-icon" attributeName="href" to="list.png"/>
  <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
  <set href="combo-button-stroke" attributeName="display" to="inline"/>
</use>
</symbol>
<symbol id="screen2a">
<use id="btn-br-v" href="#combo-button-lower-right" fill="fb-peach">
  <set href="combo-button-icon" attributeName="href" to="list.png"/>
  <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
  <set href="combo-button-stroke" attributeName="display" to="inline"/>
</use>
</symbol>
</defs>

<use id="screen1" href="#screen1a" display="none"/>
<use id="screen2" href="#screen2a" />
  
</svg>

And the second one. This is not a workaround for anything. It's still broken in the same way as I originally described. Click at the hardware button and see yourself.

gaperton · ‎08-22-2018

The reason for this bug is that combo button implementation assumes that there's only the single button in each corner per application, no matter are other buttons hidden or not.

This bug makes combo button useless for anything but very simple or demo apps.

No, it's not fixed yet and I wouldn't count on it to be fixed in near future. The workaround is to implement your own corner buttons.

I would add that having 64K RAM restriction and closed implementation of these widgets is one of the major and obvious design flaws of the SDK. If it would be 128K or RAM and these widgets would be available to import as JS/SVG library I would have fixed this thing already. Not a big deal at all.

It's sad that after one year since the SDK announcement it's still in "very promising" state. Could be a great product.

EmTe · ‎08-22-2018

You forgot to add back the SVG inside the symbols to make it work. I've updated the below.

@gaperton wrote:

First - "defs" must be in the same "svg" to be visible. That's correct code:

<svg>
<rect id="background" />
<defs>
<svg>
<symbol id="screen1a">
<use id="btn-tr" href="#combo-button-upper-right" fill="fb-red">
<set href="combo-button-icon" attributeName="href" to="list.png"/>
<set href="combo-button-icon-press" attributeName="href" to="list.png"/>
<set href="combo-button-stroke" attributeName="display" to="inline"/>
</use>
  <use id="btn-br" href="#combo-button-lower-right" fill="fb-peach">
  <set href="combo-button-icon" attributeName="href" to="list.png"/>
  <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
  <set href="combo-button-stroke" attributeName="display" to="inline"/>
</use>
</svg>
</symbol>
<symbol id="screen2a">
<svg>
<use id="btn-br-v" href="#combo-button-lower-right" fill="fb-peach">
  <set href="combo-button-icon" attributeName="href" to="list.png"/>
  <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
  <set href="combo-button-stroke" attributeName="display" to="inline"/>
</use>
</svg>
</symbol>
</defs>

<use id="screen1" href="#screen1a" display="none"/>
<use id="screen2" href="#screen2a" />
  
</svg>

Like my response? Vote for it! Or accept as solution!

gaperton · ‎08-23-2018

That's right, I forgot about that. Did I make it right this time? Same thing. Unfortunately, it doesn't help.

<svg>
<rect id="background" />
<defs>
 <symbol id="screen1a">
 <svg>
 <use id="btn-tr" href="#combo-button-upper-right" fill="fb-red">
 <set href="combo-button-icon" attributeName="href" to="list.png"/>
 <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
 <set href="combo-button-stroke" attributeName="display" to="inline"/>
 </use>
 <use id="btn-br" href="#combo-button-lower-right" fill="fb-peach">
 <set href="combo-button-icon" attributeName="href" to="list.png"/>
 <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
 <set href="combo-button-stroke" attributeName="display" to="inline"/>
 </use>
 </svg>
 </symbol>
 <symbol id="screen2a">
 <svg>
 <use id="btn-br-v" href="#combo-button-lower-right" fill="fb-peach">
 <set href="combo-button-icon" attributeName="href" to="list.png"/>
 <set href="combo-button-icon-press" attributeName="href" to="list.png"/>
 <set href="combo-button-stroke" attributeName="display" to="inline"/>
 </use>
 </svg>
 </symbol>
</defs>

<use id="screen1" href="#screen1a" display="none"/>
<use id="screen2" href="#screen2a" />
 
</svg>

jomis003 · ‎08-28-2018

That indeed did work.... Thank you both.

EmTe · ‎08-28-2018

@gaperton wrote:
That's right, I forgot about that. Did I make it right this time?

@jomis003 wrote:
That indeed did work.... Thank you both.

You're welcome. Please vote for my answer if it helped solve your problem.

Like my response? Vote for it! Or accept as solution!

gaperton · ‎08-28-2018

Hardware button still doesn’t work, so unfortunately it’s not a workaround.

x95 · ‎05-04-2019

@JonFitbit yup that works for me. However, the hardware button still doesn't work.

@JonFitbit wrote:
We still have an internal issue tracking this bug, I've asked for an update.

I believe the workaround is to use the onclick event instead of onactivate.

Join us on the Community Forums!

Community Guidelines

Learn the Basics

Join the Community!

Not finding your answer on the Community Forums?

Go to the Help Site

Contact Support

Bug: combo buttons don't work

gaperton

JonFitbit

gaperton

jomis003

EmTe

jomis003

EmTe

jomis003

gaperton

gaperton

EmTe

gaperton

jomis003

EmTe

gaperton

x95