02-28-2020 10:56
02-28-2020 10:56
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.
03-09-2020 19:58
03-09-2020 19:58
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
03-09-2020 01:56
I have tried calling style.fontSize in my project it works fine.
How do you trigger the changeSize() function?
03-09-2020 03:32
03-09-2020 03:32
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
03-09-2020 06:02
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
03-09-2020 06:18
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
03-09-2020 18:20
Possible to post the code in plain text? so I can copy it and run in my project.
03-09-2020 18:37
03-09-2020 18:37
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
03-09-2020 19:58
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
08-23-2020 09:49
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
12-29-2020 07:35 - edited 01-09-2021 12:14
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.