Adding a button to enlarge text

[ShineyFish]

Hi guys

Wondered if someone had already done this and therefore if it's doable as I can't find any references in the developers community posts.

Basically, I've created a watch face that I like BUT as I'm getting on a bit my eyes aren't what they used to be and I would like to create a function that would display a larger font when a specific area is pressed. (and yes I could just enlarge the font but a) I'm trying to make a face for the many not just old people like me and b) that would be way too easy and still in lockdown challenge mode!)
My watch face is this (currently waiting approval)

 So I would like to press the 'steps' arc (using maybe a hidden button) and this brings up the arc/current steps to fill the screen at device width for 2 seconds then it goes back to normal. (or any size bigger than current; my idea was full screen so I wouldn't need to faff around too much with overlays etc. So it would look like this after pressing it.

 Would this be possible?

Thanks for any heads up

🙂

[Gondwana]

Yes, that's possible. Instead of using a button, consider responding to a 'touch' event: https://dev.fitbit.com/build/guides/user-interface/javascript/#events

The simplest way to get the full-size gauge to show would be to include it as a separate SVG group within your .gui/.view file, and change its 'display' attribute when required.

It might be more efficient to just change attributes such as x, y, width, height, fontSize of your current elements, but that could be fiddly and sometimes things don't stretch well.

There is a dynamic GUI framework, but that would be more difficult.

You could use an animation to make the gauge expand to fill the screen, but that would require extra work.

[ShineyFish]

Thank you for the confirmation @Gondwana. This is what I thought and hoped so I'll give the touch event a go.

Thanks again 🙂

[ShineyFish]

@Gondwana ok so I've managed to get the text to 'move' and 'return' using mouseup and mousedown but it's completely ignoring the font size. I can move it, change colours, change font type but it refuses to increase text size? Any ideas what I'm missing please?

const stepsTouch = document.getElementById("steps");
stepsTouch.addEventListener("mousedown", (evt) => {
stepsTouch.style.display = (stepsTouch.x = 278, stepsTouch.y = 278, stepsTouch.style.fontSize = 70, stepsTouch.style.fontFamily = "Tungsten-Medium", stepsTouch.style.display = "red");
});
stepsTouch.addEventListener("mouseup", (evt) => {
stepsTouch.style.display = (stepsTouch.x = 288, stepsTouch.y = 288, stepsTouch.style.fontSize = 56, stepsTouch.style.fontFamily = "Tungsten-Medium", stepsTouch.style.display = "white");
});

Thank you for any pointers.

[Gondwana]

I don't recognise this syntax:

stepsTouch.style.display = (stepsTouch.x = 278, stepsTouch.y = 278, stepsTouch.style.fontSize = 70, stepsTouch.style.fontFamily = "Tungsten-Medium", stepsTouch.style.display = "red");

[ShineyFish]

No problem @Gondwana., thank you anyway. I'll keep working on it and see if I can can crack it. 🙂

[ShineyFish]

So I've got the above js working on 'mousedown' and the output on the console log says the font is now set at 70 (when mouse is clicked) however, the font is not refreshing to reflect this. @JonFitbit is there a way of refreshing the versa screen without losing the mousedown input? It's driving me nuts. The text moves to new position and turns red with mousedown but the font size still refuses to change even though the console log output reflects the change in fontSize.

Thanks for any help

Mark.

[Gondwana]

Did you change .style.fontSize, or just .fontSize?

And use a Number rather than a string.

[ShineyFish]

I did Peter, this is what I have (although I know you didn't recognise the syntax, it all appears to work apart from not refreshing the font size). Maybe this is just a simulator issue, I havent tried this on my actual watch yet.

Index.gui I have... 
<text class="steps" id="steps" x="96%" y="96%" pointer-events="all" font-size="56"/>

style.css I have...

.steps {
x: 96%;
y: 96%;
font-size: 56;
font-family: Tungsten-Medium;
text-length: 5;
text-anchor: end;
fill: whitesmoke;
}

and in the index.js is...

var stepsTouch = document.getElementById("steps");
stepsTouch.addEventListener("mousedown", (evt) => {
stepsTouch.style.display = (stepsTouch.x = 278, stepsTouch.y = 278, stepsTouch.style.fontSize = 80, stepsTouch.style.fontFamily = "Tungsten-Medium", stepsTouch.style.fill = "red");
console.log(`${stepsTouch.style.fontSize} font size after click`);
});

Console log when installed on simulator..

[6:10:24 AM]56 font size before click

[6:10:28 AM]80 font size after click