Add support for density pixels (DP) on Android

[tuliomagalhaes]

Priority

Enhancement

Area

• Data
• Source
• Docker
• Other

What is missing?

I'm opening this discussion to get some ideas on how we can transform pixels into density pixels while declaring our UI on .otui files.

What is density pixels:
Density pixels is an easy way to create unique UIs instead having to support different screen sizes as it is adaptative UI. For example if we declare 20px in one device, it can be bigger or smaller depending of the screen density of the device. But if we transform this same 20px into density pixels, the size of this component should be the same in different device sizes.

Code of Conduct

• I agree to follow this project's Code of Conduct

[BenDol]

I don't know a lot about density pixel calculations, but the formula doesn't seem too difficult, it seems like this is really useful for orientation changes too as the PPI will remain consistent.

https://developer.android.com/training/multiscreen/screendensities#dips-pels

A good resource: https://m2.material.io/design/layout/pixel-density.html#pixel-density

[tuliomagalhaes]

The calculation is not a problem, as we can get it directly from the device using the Android API and pass it to our engine. My goal with this issue is to get some feedback on how we can make it with less friction to implement it.

For example if we look at uiwidgetbasestyle.cpp, this is where we deserialize the UI and get the pixels from it. One solution is transform everything to DP here before passing it to the Widget to render, but I think this is not a viable solution as if we add a new parameter we would need to make this transformation logic as well.

I'm thinking in something more robust where we can transform every UI element before rendering it on OpenGL, but as I'm not expert in OpenGL and nor in our Rendering pipeline, then this is where I'm stuck to get a good solution.

[BenDol]

Yeah it seems like our best option would be to make the calculations at the lowest level possible and retain all our existing measures (in px) to avoid reworking. Not sure if that is actually possible without learning more about how this works, but perhaps there is already something like this designed for OpenGL? Or perhaps the Painter could convert the vertexes with a configured DPI from the PlatformWindow?

[tuliomagalhaes]

On OpenGL the way otclient-v8 did is manipulating the FrameBuffer of the UI and doing some sort of scaling on it. I know they manipulate the FrameBuffer and change the resolution of the painter, however as their render engine is a little bit different from us, then I'm trying to understand how we can achieve this goal in our engine.

[BenDol]

@mehah 👀

[BenDol]

Guessing this is where its doing its scaling https://github.com/Stephany-The-Josh-Wife/otcv8-The-Josh-Wife-Edition/blob/main/src/framework/core/graphicalapplication.cpp#L467

[mehah]

@mehah 👀

hello

Guessing this is where its doing its scaling https://github.com/Stephany-The-Josh-Wife/otcv8-The-Josh-Wife-Edition/blob/main/src/framework/core/graphicalapplication.cpp#L467
scale of this class refers to zoom In and zoom Out

What I think you want to do is resize according to the screen, correct?

maybe the solution should be here:
https://github.com/mehah/otclient/blob/5b6a98f3e94ee8b1069cad61312634b5ec9a7595/src/framework/ui/uiwidget.cpp#L979

#ifdef ANDROID
    auto* pool = g_drawPool.get(DrawPoolType::FOREGROUND);
    clampedRect.resize(pool->getFrameBuffer()->getSize() - clampedRect.size());
#endif

the value in resize() would be the calculation to resize the widget according to the screen size, what I put, it was just an example.

[tuliomagalhaes]

Q: What happens If we pass a value that is lower than the screen size? Eg. screen size is 1080x2400 and the DPI representation is 450x1000. If we resize this way, everything is going to be scaled up and filling the entire screen?

[mehah]

Q: What happens If we pass a value that is lower than the screen size? Eg. screen size is 1080x2400 and the DPI representation is 450x1000. If we resize this way, everything is going to be scaled up and filling the entire screen?

this?

#452 (comment)

[tuliomagalhaes]

Q: What happens If we pass a value that is lower than the screen size? Eg. screen size is 1080x2400 and the DPI representation is 450x1000. If we resize this way, everything is going to be scaled up and filling the entire screen?

this?

#452 (comment)

Almost this, looks like the UI is adapting as expected, however the game UI is not. In one screenshot we can see a black space and in another one the UI is cutting some tiles.