SDK buttons

[Guy_]

How is this not working?

Using code from

https://dev.fitbit.com/build/guides/user-interface/svg-components/buttons/

widget.defs

<link rel="import" href="/mnt/sysassets/system_widget.defs" />

index.view

<svg class="background">
<use href="#text-button">
<set href="#text" attributeName="text-buffer" to="BUTTON" />
</use>
</svg>

result is:

[21:26:03]Error 22 Could not find symbol '#text-button' resources/index.view:2,1
[21:26:03]Error 22 Undefined attribute 'href' resources/index.view:2,1
[21:26:03]Error 22 Could not find element '#text' resources/index.view:3,1
[21:26:03]App Started

[Gondwana]

<link rel="import" href="/mnt/sysassets/widgets/text_button.defs" />

[Guy_]

Thanks Peter - works

How about for #square-button-toggle or equivalent for SDK 6?

[Gondwana]

I think square button is deprecated. Its doco is here.

[Guy_]

Thanks, I'm looking for toggle primarily.

[Guy_]

The other problem is the text doesn't show

<use id="btn" href="#text-button" x="10%" y="$+7%" width="80%" fill="fb-green">
<set href="#text" attributeName="text-buffer" to="Push" />
</use>

All works fine with SDK 4.3, text shows and button toggles with mouse down/up

[kozm0naut]

Try dropping the "#" on the set href... I don't know why the usage is inconsistent between use and set.

[Guy_]

Thanks @kozm0naut - that also seems to be accepted.

However there doesn't seem to be an equivalent TOGGLE button in SDK 6, whereas in SDK 4 pressing the button can highlight it and removing your finger removes the highlight.

As @Gondwana says, "#square-button-toggle" appears to be deprecated.

In other words "removed", often referred to as "progress".

But if it is not replaced by something better, seems more like forced obsolescence or lack of backward compatibility, often occurs from reinventing the wheel, only to find the original round one was better!.

[Guy_ · Accepted solution]

Thanks @kozm0naut @Gondwana  - in the end was simpler to create a toggle button manually in SDK 6

<svg >
<rect x="10%" y="30%" height="20%" width="80%"fill="fb-yellow"/>
<rect x="11%" y="31%" height="18%" width="78%" fill="fb-black"/>
<text x="40%" y="42%" fill="white" font-size="35" font-family="System-Bold" > Push</text>
<rect id="btn1" pointer-events="visible" x="10%" y="30%" height="20%" width="80%" fill="fb-yellow" opacity="0"/>
</svg>
<svg >
<rect x="10%" y="60%" height="20%" width="80%" fill="fb-yellow"/>
<rect x="11%" y="61%" height="18%" width="78%" fill="fb-black"/>
<text x="40%" y="72%" fill="white" font-size="35" font-family="System-Bold" > Pull</text>
<rect id="btn2" pointer-events="visible" x="10%" y="60%" height="20%" width="80%" fill="fb-yellow" opacity="0"/>
</svg>

Toggle opacity = 0.5 on mousedown and opacity = 0 on mouseup - works identical to SDK 4.

Sometimes the simple things work best!