Minigui: Scale 200% and StaticLayout

[andre2007]

On windows display settings you can set the scale e.g. 100%, 125 %, 150%, 200%
This is with scale 125%

This is with scale 200%
The bigger the scale, the more UI issues occurs.

I am not sure, whether this is expected or not. The source code looks like this:

import std;
import arsd.minigui;

void correctScale(StaticLayout l)
{   
    foreach(child; l.children)
    {
        child.x = child.scaleWithDpi(child.x);
        child.y = child.scaleWithDpi(child.y);
        child.width = child.scaleWithDpi(child.width);
        child.height = child.scaleWithDpi(child.height);
    }
}

class FishingWindow : MainWindow
{
	private ListWidget _listBox;
	private LineEdit _editPieces;
	private LineEdit _editWeight;
	
	this()
	{	
		super("Fanglist", scaleWithDpi(800), scaleWithDpi(450));

		auto staticLayout = new StaticLayout(this);
		
		_listBox = new ListWidget(staticLayout);
		with(_listBox)
		{
			x = 24; y = 32; width = 193; height = 200;
		}

		// Abschnitt
		auto fieldSet = new Fieldset("Abschnitt", staticLayout);
		with(fieldSet)
		{
			x = 272; y = 32; width = 140; height = 200;
		}

		auto rbAbschnitt1 = new Radiobox("1", fieldSet);
		with (rbAbschnitt1)
		{
			x = 10; y = 10; width = 30; height = 20;
		}

		auto rbAbschnitt2 = new Radiobox("2", fieldSet);
		with (rbAbschnitt2)
		{
			x = 10; y = 30; width = 30; height = 20;
		}

		auto rbAbschnitt3 = new Radiobox("3", fieldSet);
		with (rbAbschnitt3)
		{
			x = 10; y = 50; width = 30; height = 20;
		}

		auto rbAbschnitt4 = new Radiobox("4", fieldSet);
		with (rbAbschnitt4)
		{
			x = 10; y = 80; width = 30; height = 20;
		}

		auto rbAbschnitt5 = new Radiobox("5", fieldSet);
		with (rbAbschnitt5)
		{
			x = 10; y = 110; width = 30; height = 20;
		}

		auto rbAbschnitt6 = new Radiobox("6", fieldSet);
		with (rbAbschnitt6)
		{
			x = 10; y = 140; width = 30; height = 20;
		}

		// Insgesamt
		with (new TextLabel("Insgesamt", TextAlignment.Left, staticLayout) )
		{
			x = 24; y = 256; width = 120; height = 20;
		}

		with (new TextLabel("Stück", TextAlignment.Left, staticLayout))
		{
			x = 40;	y = 296; width = 73; height = 20;
		}

		with (new TextLabel("Kilogramm", TextAlignment.Left, staticLayout))
		{
			x = 40; y = 320; width = 73; height = 20;
		}

		auto lblStueckInsgesamt = new TextLabel("3", TextAlignment.Left, staticLayout);
		with (lblStueckInsgesamt)
		{
			x = 120; y = 296; width = 50; height = 20;
		}

		auto lblKgInsgesamt = new TextLabel("9.80", TextAlignment.Left, staticLayout);
		with (lblKgInsgesamt)
		{
			x = 120; y = 320; width = 50; height = 20;
		}

		// Eingabe
		with (new TextLabel("Eingabe", TextAlignment.Left, staticLayout))
		{
			x = 272; y = 256; width = 120; height = 20;
		}

		with (new TextLabel("Stück", TextAlignment.Left, staticLayout))
		{
			x = 272; y = 296; width = 50; height = 20;
		}

		_editPieces = new LineEdit(staticLayout);
		with (_editPieces)
		{
			x = 360; y = 288; width = 57; height = 25;
		}

		with (new TextLabel("Kilogramm", TextAlignment.Left, staticLayout))
		{
			x = 272; y = 320; width = 80; height = 20;
		}

		_editWeight = new LineEdit(staticLayout);
		with (_editWeight)
		{
			x = 360; y = 312; width = 57; height = 25;
		}
        
		// Buttons
		auto btnPrint = new Button("Drucken", staticLayout);
		with (btnPrint)
		{
			x = 480; y = 32; width = 140; height = 22;
		}

		auto btnAnzeigen = new Button("Anzeigen", staticLayout);
		with (btnAnzeigen)
		{
			x = 480; y = 64; width = 140; height = 22;
		}

		auto btnNewFishSpecies = new Button("Neue Fischart", staticLayout);
		with (btnNewFishSpecies)
		{
			x = 480; y = 96; width = 140; height = 22;
		}

		auto btnClose = new Button("Beenden", staticLayout);
		with (btnClose)
		{
			x = 480; y = 128; width = 140; height = 22;
		}

		auto btnDeleteDb= new Button("Datenbank löschen", staticLayout);
		with (btnDeleteDb)
		{
			x = 480; y = 160; width = 140; height = 22;
		}

		auto btnDeleteFishSpecies= new Button("Fischart löschen", staticLayout);
		with (btnDeleteFishSpecies)
		{
			x = 480; y = 192; width = 140; height = 22;
		}
        
        staticLayout.correctScale();
	}

}

void main() 
{
	auto window = new FishingWindow();
	window.loop();
}

[adamdruppe]

Your static layout didn't scale sizes with the zoom. There's a method Widget.scaleWithDpi that can help:

http://arsd-official.dpldocs.info/arsd.minigui.Widget.scaleWithDpi.1.html

If you stick a scaleWithDpi(...) around each of your position and size numbers it should help. I'm not sure it will be perfect but it should help.

(StaticLayout uses exactly the numbers you give it, assuming you know what you're doing, so it doesn't automatically adjust. Most the other layouts should adjust tho unless i bugged it again.)

[andre2007]

Thanks Adam. This almost works fine. I adapted the coding above. Please notice the function

void correctScale(StaticLayout l)
{   
    foreach(child; l.children)
    {
        child.x = child.scaleWithDpi(child.x);
        child.y = child.scaleWithDpi(child.y);
        child.width = child.scaleWithDpi(child.width);
        child.height = child.scaleWithDpi(child.height);
    }
}

(I had to set width and height from protected to public in minigui.d)

With the new coding, the elements looks fine. I noticed one small issue. With 200% scale, the window is too small.
Although I call super("Fanglist", scaleWithDpi(800), scaleWithDpi(450));
But that is not a big issue.

Maybe you could consider also doing the scaling automatically for the static layout in future.