Mobile touch application?

So HaxeUI is great for desktop UI but whats the state of things for mobile?
Would love to use HaxeUI to build an android app… what is supported when it comes to touch, scrolling, DPI scaling etc at the moment?

Thanks :slight_smile:

It should work fine, openfl is your best bet (there is a haxeui-android too for purely native UIs) to target mobile, the UI should autoscale based on DPI, touch to scroll and intertia should all work, and some other little mobile “tweaks”…

If you have any issues / suggestions id love to hear them!

Cheers,
Ian

Thanks! :slight_smile:
I’ve been testing a bit, and many of the things work nice. DPI scaling seems to work pretty good!

But so far i’ve had some issues:

-App size seem to be wrong : Setting something to be 100% at the top level seems wrong - there is only a small area being used. Works fine on desktop. I can force a locked size using width set to pixels but % doesnt work correctly…

-Scrollviews seem problematic - most times im not able to scroll using touch - on desktop it seems to work properly (with a scrollbar). In some cases i was able to scroll the content in a scrollview.
Also i cant see any inertia when im letting go, the scroll just stops. Does it require some special settings to enable?
[EDIT: Ok, i found out you need scrollMode=“inertial”. Is it possible to set this globally? :slight_smile: ]

[EDIT: So it seems scrolling doesnt work unless there is content behind the finger when i touch - a list with labels that has a large padding wont scroll unless i press exactly on the font/text. It seems this issue is the same on desktop too, using the scroll wheel!]

Perhaps there are some more mobile friendly examples somewhere i could test with to see if i still get the same results? :slight_smile:

App size and scrolling ones seem a little wrong, for sure - is there any chance you could zip and paste your test app so i can take a look?

EDIT: yeah, scrollmode would make more sense as global in some way, you are right, ill look into it.

Sure! You mean the apk or the markup?

The (full) haxeui application source, so i can build and run it myself

It is really just a test with just a simple markup, nothing special

<box style="width:100%;height:100%;background-color:#aa5588" />

This is what i get:

I’ve put up a sample to show the scroll issue:

OK, perfect… thanks… and yeah, that screen is defo wrong. Leave it with me, ill check it out…

Thanks!

1 Like

OK, so yeah, the 100% issue was a bug i created :slight_smile: Its fixed now, but not commited yet.

The second issue is an openfl (and i think flash as3) issue… in order for sprites to get events they have to be drawn in, the work around is to create a background on it (and give it an background-opacity: 0), that should fix it, but i dont really like it, what i dont want to do is put a transparent background on everything as that could lead to perf issues.

@intoxopox has mentioned previously about using another invisible sprite for its hitarea, which should apprently work, but i havent actually tested this. It would also result in 2x amount of sprites :confused:

Also, btw, you dont have to put a background on each item, you can put a background onto the scrollview itself, thats enough for openfl to start using it as an event target:

    <scrollview width="100%" height="100%" style="background-color: white;">
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
        <label text="Hellow good sir." />
    </scrollview>
</box>    

also, the scale fix (for the % issue) is in haxeui-openfl 1.0.5 while we think about the how best to handle the “must have background to get events issue”

Great! Just tested it and the scale issue is fixed! Thank you!

As for the the events not triggering when there is no background;
thats understandable ofcourse - although you would probably need the fix for most cases.
But all in all : HaxeUI is awesome :smiley:

1 Like

Yeah, the problem with this work around in haxeui-openfl is, i dont want to put a white background on the, say, scrollview, as then, what if someone creates a black UI and has to then change the background of the scrollview.

Equally. i dont want to put a background-opacity: 0 for the scrollview as maybe someone will want a colour and will not understand why they cant see it (as it will back alpha: 0).

What would be nice is to somehow conditionally use this “hitArea” solution.

EDIT: actually, i just had a thought… i could put the scrollview contents as a background-opacity:0… as that way, if the scrollview had a background colour, it would be fine, but it should also be enough for the view to get events - im going to check it out and see if tht works.

Hi!
So, after trying the OpenFL backend for a while and not being too happy about the performance i decided to try HaxeUI-Kha. There are some nice improvements with Kha - faster build times on android-native, and MUCH quicker launch time for the app, and better performance.

Now; there are some issues with HaxeUI-Kha i’ve found so far:

-The “app-size” scaling (for 100%) doesnt work - like in the post above. Setting the top level element to be “100%” in either direction will result in nothing showing up.

-Application seem to be scaled up 200% (pixels very visible!). On Android only.

-Setting scrollmode to “drag” or “intertial” on scrollviews/lists doesnt work, just gets a normal scrollbar here… Trying to “scroll” a view, just triggers “press” on the items… (Same thing on desktop really also, but the mouse wheel works!).
[Edit: ok, it does work, but only if you drag “outside” of the content - if you press and drag on a label the scroll does not work. -So it is infact the opposite of what the earlier issue with OpenFL was! :o ]

Any chance you could take a look at it? :slight_smile:

[Edit: ok, i see this is related to the size issue. And resizing the window does not trigger a resize change it seems… https://github.com/haxeui/haxeui-kha/issues/28 ]

Hey!

Yeah, im totally aware of the scale issue with haxeui-kha… the problem is that when the scalemode > 1 it basically takes the UI and stretches it by the scale mode… which, as you have found leads to it be super ugly (text especially looks awful as its basically just upscaled, say, 3x as an image :frowning: )

This is totally my fault… what it needs to do is draw the UI elements with scaling in mind. I think it should work fine, but will need a little bit of time to implement and check - and time is a little precious at the moment. Ill also go on a general bug hunt in haxeui-kha while im there. :wink:

I am however, also interested in what performance issues you are finding in haxeui-openfl… any ideas if they are openfl or haxeui related? Any chance of a minimal test app reproducing the issue(s)?

Cheers!
Ian

Ok, would be very cool if you are able to fix those issues, i think they are the main ones that keep
haxeui-kha from working properly on mobile for now.

As for the performance with OpenFL… having many items on screen like a complex item renderer seem to slow things down quite a bit… Also, startup time with OpenFL is quite slow, and the app dies sometimes randomly… All in all it feels a big heavy. I think this has to do with OpenFL itself rather than HaxeUI

Now the Kha builds for android feel quicker and snappier, thats why i feel it would be a good option to OpenFL. The rendering cost is perhaps less with Kha? Maybe not as important for simple games, but i think its something to consider for app development in general atleast…

Cool - ill look at this today - are you comfortable with using haxeui from git so you can test it (obviously ill also test it but dont want to create a release until we know thing are working).

Im also going to take a look at openfl perf, though a test app here would also be helpful - but ill see what happens with my phone when i create a list with an itemrenderer, though im pretty sure ive done that before without issues.

Cheers,
Ian

Geat! Yes, I will be happy to test it from Git! :slight_smile:

Still working on this, wasnt as simple as i would have liked, but its coming along :wink:

1 Like

Hey, so if you try latest versions from git for haxeui-kha and haxeui-core, id be interested to know what your results are. Keep in mind this isnt finished, but the drawing should draw scaled now (rather than stretching a 1x image essentially). Im still looking at certain stuff, but i would be interested to see what your results are about the proper scaling of the UI.

Cheers,
Ian

Ill ping you again when ive made further progress if thats cool :slight_smile:

How did you compile your android project? I get:

C:\Work\HaxeUI\backends\haxeui-kha/haxe/ui/backend/AssetsImpl.hx:53: characters 15-31 : Class<kha.Image> has no field fromEncodedBytes
C:\Work\HaxeUI\backends\haxeui-kha/haxe/ui/backend/AssetsImpl.hx:57: characters 23-28 : {+ realWidth : Int, realHeight : Int } should be haxe.ui.backend.ImageData
C:\Temp\haxeui\issues\haxeui-kha-scale\src/Main.hx:13: characters 34-83 : Uncaught exception Null Access
C:\Temp\haxeui\issues\haxeui-kha-scale\Kha\Tools\haxe\std/haxe/macro/Context.hx:585: characters 3-64 : Called from here
C:\Work\HaxeUI\haxeui-core/haxe/ui/macros/ComponentMacros.hx:110: characters 9-70 : Called from here
C:\Work\HaxeUI\haxeui-core/haxe/ui/macros/ComponentMacros.hx:89: characters 9-88 : Called from here
C:\Temp\haxeui\issues\haxeui-kha-scale\src/Main.hx:13: characters 34-83 : Called from here
C:\Temp\haxeui\issues\haxeui-kha-scale\src/Main.hx:8: lines 8-19 : Defined in this class