HaxeUI with Hashlink and Heaps

#1

So I’m very interested in using HaxeUI and tested it out with Heaps and with OpenFL (lime) yesterday. My initial attempt was with VSCode+HL+Heaps.

The Heaps build does not seem to work properly, and styles are never applied if set in XML. Setting programmatically seems to work. I tested with both Hashlink 1.10 and 1.11 with the same result. At first I thought it was just font embedding, but it does not work for any styles whatsoever:

    <style>
     @font-face {
         font-family: 'Bauhaus93';
         src: url('assets/fonts/BAUHS93.TTF');
     }
     .baus {
         font-name: "assets/fonts/BAUHS93.TTF";
         font-size: 30px;
         backgroundColor:0x333333;
         font-family: "Bauhaus 93";
     }
</style>
<button text="Click Me!" onclick="this.text='Thanks!'" styleNames="baus" style="font-size: 34px;" />
<button id="b2" text="Don't Click Me!" onclick="doStuff()" style="font-size: 20px;" />

I then ran the same XML and code in HaxeUI+OpenFL and everything works as expected. I’d prefer to use Heaps because the build/test time is so much shorter.

I assume this is a build issue with HL and Heaps. I also noticed a bad layout during debug that was removed only after I restarted VSCode. It seemed like it corrupted the haxe build server instance, and restarting it solved the issue. It may be related. Any ideas?

#2

Hi!

Ive defo used it without any issues on hl + openfl… any chance you could zip your entire (test?) project? Also what versions of haxe, openfl, lime and haxeui are you using?

Regarding the bad layout, i wonder if its something to do with vscode plugin (it has issues ive heard), does it work correctly when you just use command line / terminal outside of vscode?

Cheers,
Ian

EDIT: i almost certainly wont be able to look at your test project tonight though as… … well, nye :slight_smile:

#3

So I created a new stock project using:

haxelib run haxeui-core create heaps

Here is the contents of main-view.xml:

<vbox style="padding: 50px;">
<style>
    button {
        backgroundColor:0x333333;
    }
</style>
<button id="button1" text="Click Me!" onclick="doThing()" style="font-size: 12px" />
<button text="Don't Click Me!" onclick="this.text = 'uh oh'" style="font-size: 72px; font-famimly: 'Bauhaus 93'" />
<script>
    function doThing() {
        button1.backgroundColor = 0xAAAAAA;
        button1.fontSize = 32;
        button1.text = "HHAHAHAHAHA";
    }
</script>
</vbox>

Haxe Version: 4.0.5
HL Version: both 1.10.0 and 1.11.0 produce the problem
haxeui-core: 1.1.3

VSCode launch:

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "name": "HashLink (launch)",
        "request": "launch",
        "type": "hl",
        "cwd": "${workspaceFolder}",
        "preLaunchTask": {
            "type": "haxe",
            "args": "active configuration"
        }
    },
    {
        "name": "HashLink (attach)",
        "request": "attach",
        "port": 6112,
        "type": "hl",
        "cwd": "${workspaceFolder}",
        "preLaunchTask": {
            "type": "haxe",
            "args": "active configuration"
        }
    }
]}

heaps-hl.hxml

-cp src
-main Main
-lib heaps
-lib hlsdl
-lib haxeui-core
-lib haxeui-heaps
-lib hscript
-D resourcesPath=assets
-hl build/heaps/hl/Main.h

Not sure what else I can pass along. It was about the simplest test that can be done.

EDIT: Yes I just tested a clean build from cmd using

haxe heaps-hl.hxml

and then

hl Main.hl

No errors or warnings, and it starts and displays fine except for zero styling (either in the style tag or as a style attrib on a button element).

#4

Ah, ok, so you are using heaps, not openfl… im not sure changing fonts is supported in haxeui-heaps yet… im not expert on heaps (at all)… do you know how you would “normally” change the font in heaps?

Also i think the background color style is wrong, you are using “backgroundColor” and it should be “background-color”, also im not sure the “0x” is parseable by the css parser, finally i think you can use the class name as “button”, but its generally advise to use it with a “.” in front (as im thinking about removing the node name stuff), so basically, this:

button {
    backgroundColor:0x333333;
}

should be:

.button {
    background-color: #333333;
}

Cheers,
Ian

#5

So HaxeUI->Heaps doesn’t have font support? That would explain the issue I’m seeing. Other styles (background color) do seem to work ok, but any font-related styles do not seem to work. For example, setting the font or changing the font size does not work.

Also I added a TextField and it is frozen in HaxeUI->Heaps. I installed the latest from gitHub and I’m still experiencing the same issues.

EDIT: Should I add tag any of these as bugs in GitHub? Are you planning on supporting Heaps?

#6

Im certainly going to support heaps, in fact, in the next few days im going to have a bit of a rummage through and change some things to make the user exp. better… so absolutely open away :slight_smile:

Cheers,
Ian

1 Like
#7

Sounds good. I’ll be monitoring this thread if there are any questions about the gitHub bug submission.

1 Like
#8

From my own experimenting with Heaps, BMFont can be used to create a Heaps accessible font however, you need to create a font file for each font size you need. SdfFont is the way to go since it gives the ability to scale the font size. The issue I am having is the ability to convert TTF fonts to SdfFonts. Heaps requires a PNG and an FNT file to be able to use the font.

Otherwise, HaxeUI is functional on Heaps (with and without HaxeUIApp). The gist of getting it to work is to add the Component created with ComponentMacro to a h2d.Flow on the default screen (s2d). I haven’t gone too much further with layering the 2D if the app is not a 3D one. Once the Font stuff can get resolved, I’ll continue on.

My current thoughts are to maybe use ttfcompile as it does a bang up job rendering the SdfFont PNG for the entire TTF file. The issue I am looking at now is how to generate an FNT file.

Any platform outside of windows complicates the problem since the main program used to convert TTF to SDF is windows based. I have tried Hiero (a libgdx tool) which does a reasonable job but the settings are a bit of a trial and error thing. My SDF font didn’t look particularly good when I ran my Heaps app