02-28-2020 10:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

02-28-2020 10:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I did a search for this before posting and could not find anything.
I am trying to change my font size during runtime.
In my CSS I have:
.statText {
font-size: 10;
font-family: Tungsten-Medium;
text-length: 75;
text-anchor: middle;
fill: white;
}
In my index.gui I have a text element
<text id="steps" class="statText" display="none">10,000</text>
In my index.js file I have:
var steps = document.getElementById("steps");
function changeSize(): {
steps.style.display = "inline", steps.x = 40, steps.y = 125, steps.style.fontSize = 30;
}
When the function is called, the x,y coordinates change, but the font size does not. Any suggestions as to why is helpful.
Thanks
Answered! Go to the Best Answer.

Accepted Solutions
03-09-2020 19:58
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-09-2020 19:58
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
I am now able to reproduce the problem and also found a solution!
Basically you need to set the text again after changing the fontSize.
steps.style.fontSize = newFontSize;
steps.text = "10,000";
Please try it out and see if it works at your end.
03-09-2020 01:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-09-2020 01:56
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I have tried calling style.fontSize in my project it works fine.
How do you trigger the changeSize() function?

03-09-2020 03:32
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-09-2020 03:32
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
The trigger to change the font size is a select settings item. Which sets a text element. Then the on settings change event has an if statement that calls the font size function.
Settings Select settingskey=stat.
Text element = selectStat which is set by the user selection of stat.
In the index.jsx -
if (selectText.text === "1") {
changeSize();
}

03-09-2020 06:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-09-2020 06:02
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I still cannot reproduce your problem.
I thought the problem could be due to the display attribute, but I have tried toggled the visibility and the text size is rendered as expected.
Do you have a parent view layout that wrapping the text view?

03-09-2020 06:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-09-2020 06:18
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Here are some screenshots of sample code to recreate it. I am currently trying this with the simulator and not on an actual device.

03-09-2020 18:20
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-09-2020 18:20
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Possible to post the code in plain text? so I can copy it and run in my project.

03-09-2020 18:37
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-09-2020 18:37
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Sure - just set up a new project using the settings template. Everything that is not below is "stock".
app/index.js
import document from "document";
import * as messaging from "messaging";
let background = document.getElementById("background");
var steps = document.getElementById("steps");
var steps1 = document.getElementById("steps1");
var size = document.getElementById("size");
// Message is received
messaging.peerSocket.onmessage = evt => {
console.log(`App received: ${JSON.stringify(evt)}`);
if (evt.data.key === "fontSize" && evt.data.newValue) {
let font = JSON.parse(JSON.parse(evt.data.newValue).selected);
size.text = font;
console.log("size.text is set to " + font)
console.log("steps font size currently is " + steps.style.fontSize) // returns 50
if (size.text === "0") {
steps.style.fontSize = 150;
console.log("steps font size changed to " + steps.style.fontSize) //returns 150
}
}
};
// Message socket opens
messaging.peerSocket.onopen = () => {
console.log("App Socket Open");
};
// Message socket closes
messaging.peerSocket.onclose = () => {
console.log("App Socket Closed");
};
index.gui
<svg>
<rect id="background" />
<text id="size" x="60" y="50" font-family="Tungsten-Medium" font-size="50" text-anchor="middle" fill="red">1</text>
<text id="steps" class="statText "x="50%" y="50%">10,000</text>
<text id="steps1" x="50%" y="90%" font-family="Tungsten-Medium" font-size="75" text-anchor="middle" fill="orange">5,000</text>
</svg>
styles.css
.defaultText {
font-size: 32;
font-family: System-Regular;
font-weight: regular;
text-length: 32;
}
#background {
width: 100%;
height: 100%;
fill: black;
}
.statText {
font-size: 50;
font-family: Tungsten-Medium;
text-length: 75;
text-anchor: middle;
fill: white;
}
settings/index.jsx
function mySettings(props) {
return (
<Page>
<Section
title={<Text bold align="center">Demo Settings</Text>}>
<Select
label={"Choose your font size"}
settingsKey="fontSize"
options={[
{name: "25"},
{name: "50"},
{name: "100"},
]}
/>
</Section>
</Page>
);
}
registerSettingsPage(mySettings);

03-09-2020 19:58
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

03-09-2020 19:58
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
I am now able to reproduce the problem and also found a solution!
Basically you need to set the text again after changing the fontSize.
steps.style.fontSize = newFontSize;
steps.text = "10,000";
Please try it out and see if it works at your end.
08-23-2020 09:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

08-23-2020 09:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
So can only be done on the computer if you can use the coding option ? Seems silly then that Fitbit haven’t programmed the app? Or an I being stupid???

12-29-2020 07:35 - edited 01-09-2021 12:14
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-29-2020 07:35 - edited 01-09-2021 12:14
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
How much you need to do to understand the font on this site. It looks complicated to those who don't understand it, like a program to hack the Pentagon, lol. When I was creating my blog, I thought about my readers and set up automatically settings with fonts. You can change any font, by the way, it is absolutely non-standard in my blog, you can change the size, color, etc. One of my favorite fonts is overwatch font, which perfectly fits into the idea of my site.

