Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Changing Font Sizes

ANSWERED

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

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

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.

View best answer in original post

Best Answer
9 REPLIES 9

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

 

How do you trigger the changeSize() function? 

Best Answer
0 Votes

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

}

 

Best Answer
0 Votes

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?

Best Answer
0 Votes

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

jomis003_0-1583759280527.png

svg.PNGcss.PNGindex.PNG

Best Answer
0 Votes

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

Best Answer
0 Votes

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

Best Answer
0 Votes

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.

Best Answer

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

Best Answer
0 Votes

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.

Best Answer
0 Votes