HaxeUI with Hashlink and Heaps

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?

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:

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).

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

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?

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

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

1 Like