Haxeui-openfl menu example issue in portrait mode

Questions
1

Hi. Using html5 target.
Picked latest haxeui-core and haxeui-openfl from github

Toolkit.init();
var main = ComponentMacros.buildComponent("res/ui/menu.xml");
Screen.instance.addComponent(main);

<vbox width="100%">
    <menubar width="100%">
        <menu text="File">
            <menuitem text="Item 1" />
            <menu text="Sub Menu">
                <menuitem text="Item 1" />
                <menuitem text="Item 2" />
                <menuitem text="Item 3" />
                <menuseparator />
                <menucheckbox text="Item 4" />
                <menucheckbox text="Item 5" />
                <menucheckbox text="Item 6" />
                <menuseparator />
                <menuoptionbox text="Item 7" />
                <menuoptionbox text="Item 8" />
                <menuoptionbox text="Item 9" />
            </menu>
        </menu>
        <menu text="Edit">
            <menuitem text="Item 1" />
        </menu>
        <menu text="Help">
            <menuitem text="Item 1" />
        </menu>
    </menubar>
</vbox>

Screenshot_20200610-133433
Screenshot_20200610-1334331440Ă—2560 78.4 KB

Screenshot_20200610-133512
Screenshot_20200610-1335122560Ă—1440 137 KB

2

Hmm, that defo looks wrong. Any chance you could trace out the following values (After toolkit.init()):

  • Toolkit.scaleX
  • Toolkit.scaleY
  • Toolkit.scale
  • Toolkit.autoScale
  • Toolkit.autoScaleDPIThreshold
  • Screen.instance.isRetina

Cheers,
Ian

3 
src/com/crazyflasher/minesweeper/mediators/UIMediator.hx:20: Toolkit.scaleX 2
Log.hx:66 src/com/crazyflasher/minesweeper/mediators/UIMediator.hx:21: Toolkit.scaleY 2
Log.hx:66 src/com/crazyflasher/minesweeper/mediators/UIMediator.hx:22: Toolkit.scale 2
Log.hx:66 src/com/crazyflasher/minesweeper/mediators/UIMediator.hx:23: Toolkit.autoScale true
Log.hx:66 src/com/crazyflasher/minesweeper/mediators/UIMediator.hx:24: Toolkit.autoScaleDPIThreshold 120
Log.hx:66 src/com/crazyflasher/minesweeper/mediators/UIMediator.hx:25: Screen.instance.isRetina false
1 Like
4

Great, thanks, one more thing:

  • Screen.instance.dpi

Also, would you say that the UI is the “right” size (ignore the menu position issue), but, say a normal button, would you say that the fact that it is 2x scaled is correct?

5 
Screen.instance.dpi 288

In my opinion. 2x scale is fine. Otherwise UI would be to small and hard to interact

1 Like
6

Cool - thanks, ill take a look

1 Like
8

Can you try latest git versions and see if the problem persists?

Cheers,
Ian

9

Still doesn’t work as expected :frowning:

Screenshot_20200611-130517
Screenshot_20200611-1305171440Ă—2560 66.9 KB

10

hmmm, Ok - what does your Screen.instance.width return?

11 
Screen.instance.width 270
Screen.instance.height 508.5
1 Like
12

OK, now? :slight_smile: (latest haxeui-openfl)

13

Now sub-menu is hiding on the left side :slight_smile:

Screenshot_20200611-133750
Screenshot_20200611-1337501440Ă—2560 83.7 KB

UPD: And it’s OK in landscape. I guess it’s other issue and isn’t related to scale 2x.
I guess it is because expanded menu doesn’t fit portrait screen width

14

I think that is because your screen isnt big enough to display it, You could make the menus smaller in general with:

    <style>
    .menu {
        width: 100px;
    }
    </style>

image
image428Ă—632 20 KB

I wonder if there is a more graceful way to handle this though, i cant really think of a way off hand - open to suggestions!

Cheers,
Ian

1 Like