Scaling HaxeUI components


#1

Hello everyone,

I’m trying to set up horizontal sliders and radiobuttons using HaxeUI. As my application will be rolled out to desktop and mobile devices I need to scale my sprites and their contents. I’m however pretty puzzled when it comes to scaling the HaxeUI components. If I add sliders to my sprite container via addChild, the mapping is wrong: If I click on the slider, the slider button ends up on a position far left to where I clicked.
If I use HaxeUI’s own method Screen.instance.addComponent(), the mapping is correct, but the slider does not scale at all when I start my application on different devices.

I’m currently using:
openfl 8.6.4
haxeui-core 0.0.4
haxeui-openfl 0.0.2

Does anybody have experience with how to make HaxeUI components correctly scale on different devices? Thanks for any suggestions on this!


#2

@IanHarrigan1982 Is there already a feature for scaling UI components using HaxeUI? Thanks :grin:


#3

Howdy,

Yes, HaxeUI should auto scale based on the device DPI. What do the values of these read:

Toolkit.autoScale
Toolkit.autoScaleDPIThreshold
Toolkit.scaleX
Toolkit.scaleY
Screen.instance.dpi
System.getDisplay(0).dpi // openfl call

Also, is there any chance you might be able to share a small example of it not work with addChild aswell as addComponent? Either should work

Thanks!
Ian


#4

Thanks so much for the swift reply!

I just wanted to report the values you asked for. I can also make a minimal example, but unfortunately won’t be able to get that done before tomorrow morning.

Toolkit.autoScale: true
Toolkit.autoScaleDPIThreshold: 160
Toolkit.scaleX: 1
Toolkit.scaleY: 1
Screen.instance.dpi: 96
System.getDisplay(0).dpi: 96

Out of curiosity I also queried the value of Screen.instance.height and Screen.instance.width which should return the width and height of my current screen if I run my application in fullscreen, right? Or did I get something wrong there?
I get

Screen.instance.width: 1368
Screen.instance.height: 912

although my current screen has a resolution of 2736 x 1824. If it is of interest: I initialize my sprites with a size of 1920 x 1080, fill them with content that fits this resolution and then scale the whole sprite to the current screen.


#5

Ok, so i think you have two options… one would be to lower the autoScaleDPIThreshold, not entirely sure what value would be best though. The other would be to simply set scaleX and scaleY on the toolkit… i think that should probably work. Note, you can call Toolkit.scale to set both at the same time.

Let me know if that works / helps.

Ian

PS: the Screen.instance.width/height comes from openfl (return System.windowWidth/Height()). The name might be a little misleading, the “screen” in haxeui is the container… so if you created an app with a window of 800x600 then the “screen” would be that size.


#6

I already tried to set scaleX and scaleY manually before, but it didn’t change the scaling problem so I yesterday tried to set it to my stagescale value (that I use for scaling the sprites) again. I noticed that Toolkit.scaleX and Toolkit.scaleY always returned 1 regardless of me setting them manually.

Then in Toolkit.hx in line 223 I found the following code

_scaleX = Math.fround(value);

If I replace that with

_scaleX = value;

and do the same for scaleY a few lines down my scaling problem is gone, because my stagescale value is around 0.4 and always got rounded to 1. Is it safe to remove the rounding or has it been implemented for another reason?


#7

Oh… sorry, didnt see this reply - Thats interesting, im not sure why that value is rounded, doesnt seem to make alot of sense. The scale code was written along time ago, so i can only assume its an oversight on my part.

Nice one! Ill make the relevant changes in master.

Thanks again!

Ian