Changing Font Sizes

[jomis003]

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

[qichuan]

I have tried calling style.fontSize in my project it works fine. 

How do you trigger the changeSize() function? 

[jomis003]

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();

}

[qichuan]

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?

[jomis003]

Here are some screenshots of sample code to recreate it.  I am currently trying this with the simulator and not on an actual device.

[qichuan]

Possible to post the code in plain text? so I can copy it and run in my project.

[jomis003]

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);

[qichuan · Accepted solution]

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.

[Suzie56]

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??? 

[CameronGraham]

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.