Fitbit Tumbler - Changing Font Size - Versa 2

[SunsetRunner]

Hi

I have a need to create a set of three tumblers that will allow the setting of values up to 9999.99 however with the default text size for a tumbler I cannot get all three to fit on the Versa 2 display. Having tried to set the font-size for the individual items, their text and/or the tumbler nothing seems to change the text size such that I can reduce the width of each tumbler to fit. Can anyone give me some pointers as to what I am doing wrong?

styles.css (tried to date):

#tumbler-1k { x: 30; width: 80; height: 70%; }
.onekitem { height: 90; }
.onekitem text { font-size: 30; fill: fb-orange; x: 100%; text-anchor: end; }

or

#tumbler-1k { x: 30; width: 80; height: 70%; }
.onekitem { height: 90; font-size: 30; }
.onekitem text { fill: fb-orange; x: 100%; text-anchor: end; }

or

#tumbler-1k { x: 30; width: 80; height: 70%; }
.onekitem { font-size: 30; height: 90; }
.onekitem text { fill: fb-orange; x: 100%; text-anchor: end; }

[SunsetRunner]

I never worked with tumbler, but perhaps those properties just don't get applied on the uses via css.
It seems that <use>s get rendered before css gets applied
you might try to change them in your index.view inside the use with a <set> 

[Gondwana]

It's possible that the font sizes are hard-coded into the component animations. I don't know if this is the right file, but have a look in "...\@fitbitsimulator\resources\static\devicesim\win\atlas\Resources\v2\widgets\tumblerview_widget.defs". This contains

        <animate attributeName='font-size' begin='highlight+0.1'    end='unhighlight'   dur='0.1' to='100'/>
        <animate attributeName='font-size' begin='unhighlight'      end='highlight'     to='80'/>

It MIGHT be possible to change the animation attributes in JS, but doing so might break other aspects of the tumbler.

I can't think how that could be over-ridden in CSS.

I wonder what would happen if the tumber were wrapped in a <g>...

[SunsetRunner]

Perhaps wrapping in a <g> and then just scaling the whole tumbler might work 🤔

[Gondwana]

That's what I was wondering. If only I could think of someone who loves wrapping stuff in <g>s... 😉

[SunsetRunner]

Hah! Never underestimate the power of a good old <g> 

[SunsetRunner · Accepted solution]

it actually works  with scaling 🙂
I guess much easier than trying to change the hardcoded fontSize per <set>

 

[Gondwana]

Wow, nice! Does it touch and swipe sensibly?

[SunsetRunner]

although... The fontSize can be overwritten per item individually with

  <set href="value/text" attributeName="font-size" to="40" />

 

[SunsetRunner]

yes 😄
(edit: not tested on device, but doing nicely on sim)

[Gondwana]

It seems that the size of the 59 is different to that of the 01. Is that because you only over-rode some of the items? I still suspect that the animation hard-coding could interfere.

[SunsetRunner]

yes...and yes 😞
The overwritten values only stay as long as the items haven't been animated to the hardcoded value of 80
So the only way to manipulate fontSize longterm seems to be the scaling.

[Gondwana]

The <g> solution seems like the neatest.

It is possible to change the 'to' attribute of animations in code, but there may be more to it than that.

[SunsetRunner]

yeah, I tried to implement the animation in <set>, but doesn't work...
They don't have an id unfortunately, so they might also be hard to access from js 😞
But at least the <g> is working nice. Good you mentioned it 

[SunsetRunner]

Thanks both,

That has worked a treat. 😀👍

[SunsetRunner]

Nice! 👍🙂