COMMUNITY

Introducing ImGuiJsHx

I’m not sure if this has been done before, but I would like to introduce ImGuiJsHx on GitHub, which allows for using Dear ImGui in Haxe, but instead of C++ it is JavaScript.

There are many benefits to using the JavaScript target versus the C++ target. First is compile time - Haxe generates source in JavaScript significantly faster than in C++, and is often the target used for debugging and testing.

In this library, you can combine this with any other framework or library that also targets JavaScript and play around with the tools Dear ImGui offers.

You can use NodeJS for desktop applications and as a server environment, with very few changes required to deploy a NodeJS application.

How to Use

Most of the resource material is found on the GitHub on how to get started and working with ImGuiJsHx.

The JavaScript bindings of Dear ImGui are surprisingly simple, but to ensure you are not confused, note the following:

Just as in the JavaScript binding of Dear Imgui, there are no “references” per se. Instead, we need to assign the value of a reference in a callback before the subject changes on the underlying component is made. For example:

if (testIsOpen)
{
     if (ImGui.Begin("Test", (open = true) -> testIsOpen = open))
     {
         ImGui.Text("Something written here.");
     }
}

Much like in the JavaScript binding, you need to assign a default value to the referencing value, but unlike in JavaScript, you can’t pass in the variable as the value to be used for the reference. So, in the above example, we have the reference variable open as a parameter in the anonymous function, and testIsOpen becomes whatever the result is when we click close on this frame.

The alternative is to use the Syntax.code function which may be the goto workaround for when this really matters, like so:

Syntax.code("(open = Main.testIsOpen) => Main.testIsOpen = open")

This looks to be the only major issue I can think of at the moment, but for now this is a work-in-progress and look to improve as and when necessary.

Please also note that not all functions in ImGui have been tested.

2 Likes

Cool cool cool. Very cool very cool.

To your question “if this has been done before”, the anwser is yes: https://github.com/jeremyfa/imgui-hx

imgui-hx, which is a continuation of the work of @Aidan63 on linc_imgui, is currently working with C++ and JS targets with a unified API. I integrated it with ceramic engine, which supports both c++ & web targets (see the screenshot below).

Bindings of imgui-hx are also generated with a script. I can only recommend you to take a look!

3 Likes

I was wondering about the original linc_imgui, but at the time I tried it, it had a slight quirk with strings and how to setup a string to be properly referenced in C++. I couldn’t get my head around it, honestly, and gave up using it.

Perhaps this version is more suitable – I did not know another version of the original linc_imgui existed with JavaScript support. It would make more sense to use that. Had a brief glance at the code and it seems a more viable choice.