03-10-2020 09:24 - edited 03-11-2020 13:37
03-10-2020 09:24 - edited 03-11-2020 13:37
How could I add a label to the tubler as shown in the UI components
https://dev.fitbit.com/build/guides/design-guidelines/ui-components/
There is a Picture with a tumbler 12m 15s
I have no way found how to do this
Best Answer03-10-2020 14:23
Fitbit Developers oversee the SDK and API forums. We're here to answer questions about Fitbit developer tools, assist with projects, and make sure your voice is heard by the development team.
03-10-2020 14:23
It seems that the Timer app puts a label after the tumbler-views
<use id="min-tumbler" href="#tumblerview">
...
</use>
<use id="min-label" href="#tumbler-label">
<set href="#text" attributeName="text-buffer" to="m" />
</use>
<use id="sec-tumbler" href="#tumblerview">
...
</use>
<use id="sec-label" href="#tumbler-label">
<set href="#text" attributeName="text-buffer" to="s" />
</use>
Best Answer03-11-2020 02:39
03-11-2020 02:39
I did as you told but there is no label displayed
<svg id="inividual" display="none">
<use id="tumblermin" href="#tumblerview" x="0" y="49">
<rect width="174" height="250" x="0" y="0" />
<use id="item0" href="#tumbler-item">
<text id="my-value" class="my-item">01</text>
</use>
<use id="item1" href="#tumbler-item">
<text id="my-value" class="my-item">02</text>
</use>
<use id="item2" href="#tumbler-item">
<text id="my-value" class="my-item">03</text>
</use>
<use id="item11" href="#tumbler-item">
<text id="my-value" class="my-item">12</text>
</use>
</use>
<use id="min-label" href="#tumbler-label">
<set href="#text" attributeName="text-buffer" to="m" />
</use>
<use id="tumblersec" href="#tumblerview" x="174" y="49">
<rect width="174" height="250" x="0" y="0" />
<use id="item0" href="#tumbler-item">
<text id="my-value" class="my-item">00</text>
</use>
<use id="item1" href="#tumbler-item">
<text id="my-value" class="my-item">01</text>
</use>
<use id="item58" href="#tumbler-item">
<text id="my-value" class="my-item">58</text>
</use>
<use id="item59" href="#tumbler-item">
<text id="my-value" class="my-item">59</text>
</use>
</use>
<use id="sec-label" href="#tumbler-label">
<set href="#text" attributeName="text-buffer" to="s" />
</use>
</svg>
Maybe I did something wrong?
Best Answer03-11-2020 12:48
Fitbit Developers oversee the SDK and API forums. We're here to answer questions about Fitbit developer tools, assist with projects, and make sure your voice is heard by the development team.
03-11-2020 12:48
Have you tried positioning it with CSS?
Best Answer03-11-2020 13:37
03-11-2020 13:37
Thanks for the hint!
Of course it must be placed on the right position
Best Answer03-13-2020 13:59
03-13-2020 13:59
A last hint
<use id="min-label" href="#tumbler-label" x="33%" y="45%" width="17%">
<text id="min-labeltxt" font-size="45" class="my-item">m</text>
</use>use this because in this case it's possible to change the font size.
Best Answer