Adjust text size based on screen resolution

Processing Coding Questions
1

Hello

Recently I discovered how to make my programs resizable in Windows (Add surface.setResizable(true);
in setup())
This led me to make a function that changes the location of certain elements based on resoloution, to make the program fit the window size.
Useless Information here about how my function works if you’re interested
It works by using the dividend of the location of the element (in 720p) and the X or Y size (depending on which coordinate I am calculating). For example, if an icon were at X-pos 5 and Y-pos 10, I would divide 5 by 1280, and 10 by 720. Those dividends are then pasted into the function.

Then the function multiplies the user’s current window size by the dividend mentioned above to get the scaled location of the element.

void detectSizeAndChangeLocations() {
  int wid = width;
  int hei = height;
  //title
  posName[0] =  wid*0.5;
  posName[1] = hei*0.0494444444;
  //Name Preview
  posView[0] = wid*0.5;
  posView[1] = hei*0.20;
  //Home Icon
  home[0] = wid*0.02734375;
  home[1] = hei*0.326388889;
  //Settings Icon
  settings[0] = wid*0.02734375;
  settings[1] = hei*0.417095778;
  //Stats Icon
  stats[0] = wid*0.02734375;
  stats[1] = hei*0.493055556;
  //Theme Toggle Button Coords
  them[0] = wid*0.37109375;
  them[1] = wid*0.62734375;
  them[2] = hei*0.231944444;
  them[3] = hei*0.291666667;
  //Color Button Toggle Coords
  clr[0] = wid*0.30703125;
  clr[1] = wid*0.68203125;
  clr[2] = hei*0.305555556;
  clr[3] = hei*0.369444444;
  //Theme Text Position
  themPos[0] = hei*0.291666667;
  //Color Text Position
  clrPos[0] = hei*0.361111111;
  //Verbose Text Position  
  verbosePos[0] = hei*0.430555556;
  //UDP Socket text position
  UDPSPos[0] = hei*0.5;
  //UDP IP Text Position
  UDPIPPos[0] = hei*0.569444444;
  //Admin Commands Text Position
  adminCommandPos[0] = hei*0.638888889;
  //Verbose Button Coords
  verboseButton[0] = wid*0.27265625;
  verboseButton[1] = wid*0.71796875;
  verboseButton[2] = hei*0.376388889;
  verboseButton[3] = hei*0.427777778;
}

However one issue that I can’t seem to fix, which is text size. Normally I’d use displayDensity, however that is an Android mode-only thing. I tried to add this line of code at the end of the function:

textScale = wid/1280;

and then add the textScale varible into textFont like this:

  textFont(productSans, 20*textScale);

However that does not seem to work. As I resize the window, the text size does not change, and if I make the window size too small, this gets printed to the console:

textFont: ignoring size 0.0 px:the text size must be larger than zero

I can see why it is, since the textScale variable at that time is quite small, and the product could be too small to draw, however this does not explain why, when the window is bigger than 1280x720, the text size stays the same.

Anyone see what I could be doing wrong, or know of a way in which I can achieve the effect I’m looking for?

Thanks in advance

2

Hello,

Please post a small complete and snippet of code demonstrating your issue.

It may be something as simple as declaring your variables correctly:

float scaleWidth = width/float(wIni);  //from my code

What is your wid variable? I am guessing it is an integer and you are doing integer math and result is an integer.

I used this at end of draw() to see variables:

println(width, height, scaleWidth);

It is working here with the code I wrote.

:)

3

Ah. Now I feel stupid😅. Wid and Hei were both integers. I assumed since it was fine since the function was able to scale the position of all the elements correctly. After changing those variables to floats the issue seems to be fixed. Thanks for the insight

1 Like