HaxeUI - Haxe - And What i'm working on

I have been 3d printing and playing with robotics for about 7 years now. I really enjoy it.

But I reached a point where I was not happy with my mixed tool set. i had decided to start putting together an all in one package so to speak that I could use to take care of my needs. Using node.js, js and python. While working on the design of the layout, I had decided on threejs for some of the fancy effects for the graphics. That brought me to discord to start hanging out in the threejs channel.

While in there one night, someone made a comment about they had came to the wrong channel thinking it was a Haxe channel. Me being the curious cat i am, had to find out what this “Haxe” was.

I spent a couple days/nights doing nothing but reading about haxe, and going through the libs. I was immediately drawn in.

The only way I know to explain this attraction to Haxe is like this… Some people, when they find themselves amidst chaos, become calm as if they are in a natural environment. A natural landscape where within they feel at home and things make sense.

Haxe is the chaos filled playground and HaxeUI is my toolbox. As i use this toolbox and create more tools to put within it, this is what i am looking to achieve…

  1. Robot design and control software.

  2. 3D design tool for construction of robotic ideas and layouts. As well as for 3d printing and cnc production of parts.

This will be achieved in Haxe.

If you are interested in these things as well… comment here and lets get the conversations going. Together this will be fun and exciting.

Ya’ll have a wonderful day and I look forward to getting to know ya’ll as we continue through the world of Haxe.



Sounds interesting! Make sure to let us know how you get on! :wink:

1 Like

Since I couldn’t figure out how to get the webgl to cooperate within any haxeui components/constraints, i am displaying the webgl content, then I call up the haxeui layout. This is causing some invisible boundary issues as far as manipulating the view/grid. But I believe i almost have that figured out.

1 Like

While testing a sample from the guides i received an error. I believe i have everything needed installed.

Thats the wrong haxeui. Thats haxeui v1… which is not longer developed. We are using haxeui v2 now.

EDIT: which guide?

Also, btw, how are you displaying that 3d scene? Its likely you could wrap it up in a haxeui custom component and then use that component in haxeui layouts (assuming thats what you are trying to achieve)

This is the guide i came across… https://github.com/ianharrigan/haxeui/wiki/XML-Based-UIs

OK, yeah, thats V1… safer to just ignore it, some (alot) on principles apply, but alot dont. The repo is archived, its openfl only and its just inferior to v2.

Using this from the index.html to create the canvas and load from a js file. then the main.js adding the haxeui components.


<body scroll="no" onresize="screenResizeAdaptation()">
<script src="Main.js"></script>		

	<!-- Webgl canvas -->
	<div id="canvas_div" class="container" onresize="screenResizeAdaptation()">
		<canvas id="canvas"></canvas>

So yeah, you could easily turn that into a custom haxeui component and use that in haxeui. Ill knock up a silly fake example.

Thank you very much.

Ok, so this will likely be a long post, but here it is:


So, i basically create a silly fake lib, that in this case would represent an external js lib:

// this is a fake, external js lib for illustration purposes
function initLib(id) {
    console.log("initLib: " + id);

function redrawCanvas(id, color) {
    console.log("redrawCanvas: " + id);
    var c = document.getElementById(id);
    var cx = c.width;
    var cy = c.height;
    var ctx = c.getContext("2d");
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, cx, cy);
    ctx.moveTo(0, 0);
    ctx.lineTo(cx, cy);
    ctx.moveTo(cx, 0);
    ctx.lineTo(0, cy);

My .html looks like:

    <canvas id="myCanvas1">
    <script src="external_lib.js"></script>
    <script src="Main.js"></script>

Ive then created a custom component that will either use, or create, a canvas and use the external lib to draw that canvas (obviously this could all be done in haxe code, but the idea is to show the custom component doing something “external”):

package custom;

import haxe.ui.containers.Box;
import js.Browser;
import js.Syntax;
import js.html.CanvasElement;

class MyExternalCanvas extends Box {
    private var theCanvas:CanvasElement = null;
    private var _col:String = null;
    public var htmlId(null, set):String;
    private function set_htmlId(value:String):String {
        var el:CanvasElement = cast Browser.document.getElementById(value);
        if (el == null) {
            trace(value + " canvas not found, creating");
            el = Browser.document.createCanvasElement();
            el.id = value;
        theCanvas = el;
        this.element.appendChild(theCanvas); // will reparent if already exists
        _col = "#" + StringTools.hex(Std.random(0xFFFFFF));
        Syntax.code("initLib({0})", theCanvas.id); // should really create externs, im just using untyped js because its quick and dirty for an example
        return value;
    public override function validateComponentLayout():Bool {
        var b = super.validateComponentLayout();
        if (this.width > 0 && this.height > 0 && theCanvas != null) {
            var usableSize = this.layout.usableSize;
            theCanvas.width = Std.int(usableSize.width);
            theCanvas.height = Std.int(usableSize.height);
            Syntax.code("redrawCanvas({0}, {1})", theCanvas.id, _col); // should really create externs, im just using untyped js because its quick and dirty for an example
        return b;

And thats it really, you can now use MyExternalCanvas control anywhere in haxeui and is, for all intents and purposes a haxeui component. In my example, i also wanted to use it from xml, so i created a module.xml on my classpath with these contents:

        <class package="custom" />

Which will now expose any Component derived controls to the xml. Which means now, i can define my layout as follows:

<hbox style="padding: 5px;" width="600" height="400">
    <button text="Button" height="100%" onclick="this.width += 25" />
    <vbox width="100%" height="100%">
        <hbox width="100%">
            <button text="Button" verticalAlign="top" />
            <button text="Button" width="100%" onclick="this.height += 25" />
            <button text="Button" verticalAlign="bottom" />
        <hbox width="100%" height="100%">
            <my-external-canvas id="ex1" htmlId="myCanvas1" width="50%" height="100%" />
            <my-external-canvas id="ex2" htmlId="myCanvas2" width="50%" height="100%" />
        <hbox width="100%">
            <button text="Button" verticalAlign="top" />
            <button text="Button" width="100%" onclick="this.height += 25" />
            <button text="Button" verticalAlign="bottom" />
    <button text="Button" height="100%" onclick="this.width += 25" />

Et Viola!

I hope that helps a little, using components this way is pretty useful and means they slide in nicely into haxeui.

Heres the full project: https://www.dropbox.com/s/cxucpy3dv7cfjg5/haxeui-core-custom_external_component.zip?dl=0


1 Like

Thank you very much. Im an idiot. I messed with your example for a bit, then I made myself catch up on sleep. Got up, started manipulating the grid and whatnot in heaps. And as I went to compile and run, it hit me what i was doing wrong. In mind i was separating haxeui and heaps. When what I should have been doing was looking at it as just haxe. All of it together, instead of looking at it as making two different things work together.

Ah, right, this is heaps? Then yeah, you should be able to just use haxeui directly in it… haxeui-heaps just had a semi rewrite though, so things might not be 100% yet.

For the most part it seems to be working (some issues with mouse i think though still):

1 Like

Yep. Makes more sense to me now that my mind is right lol. If i notice some quirks using haxeui-heaps i’ll post them in this thread. That way its all together. Who knows, this thread could be the start of a tutorial or something later.