Skip to content
forked from flyover/imgui-js

JavaScript bindings for Dear ImGui using Emscripten and TypeScript

License

Notifications You must be signed in to change notification settings

radixbio/imgui-js

 
 

Repository files navigation

JavaScript bindings for Dear ImGui using Emscripten and TypeScript

Example

ImGui JavaScript+WebGL example

The original Dear ImGui demo code from imgui_demo.cpp has been ported to imgui_demo.ts. Also, the Memory Editor from the imgui_club project (imgui_memory_editor.h) has been ported to imgui_memory_editor.ts and added to the demo for browsing the Emscripten memory space.

ImGui JavaScript Sandbox

A CodePen using the Ace editor to live-edit a window.

ImGui JavaScript+Three.js example

A CodePen using Dear ImGui with Three.js.

Support

If you find this useful, please consider donating to this and the Dear ImGui project. I can also invoice for private support, custom development, etc.

PayPal donate button

Notes

All functions in the C++ ImGui namespace are exported at the top level of the module.

import * as ImGui from "imgui-js";

Individual exports can be imported as well.

import { ImVec2 } from "imgui-js";

In general, functions that take an address of a variable in C++ have been changed to take an access function in JavaScript. Calling the access function with no arguments returns the variable, calling with a value sets the variable.

type ImAccess<T> = (value?: T) => T;

let show: boolean = true;

const _show: ImAccess<boolean> = (_: boolean = show): boolean => show = _;

// get the value of show
console.log(_show()); // true

// set the value of show to false (also returns the updated value)
console.log(_show(false)); // false

In the following example, the address of show in the C++ code has been replaced with an inline arrow access function.

#include "imgui.h"
bool show = true;
void draw() {
    if (ImGui::Button("Toggle")) { show = !show; }
    if (show) {
        ImGui::Begin("My Window", &show, ImGuiWindowFlags_AlwaysAutoResize));
        ImGui::Text("Hello, World!");
        ImGui::End();
    }
}
import * as ImGui from "imgui-js";
let show: boolean = true;
function draw(): void {
    if (ImGui.Button("Toggle")) { show = !show; }
    if (show) {
        ImGui.Begin("My Window", (_ = show) => show = _, ImGui.WindowFlags.AlwaysAutoResize));
        ImGui.Text("Hello, World!");
        ImGui.End();
    }
}

Enumerations that begin with ImGui* are also exported with ImGui removed. So the following examples are equivalent.

import * as ImGui from "imgui-js";
const flags: ImGui.WindowFlags = ImGui.WindowFlags.AlwaysAutoResize;
import { ImGuiWindowFlags } from "imgui-js";
const flags: ImGuiWindowFlags = ImGuiWindowFlags.AlwaysAutoResize;

In order to minimize size of the output, the C++ library has been compiled with IMGUI_DISABLE_OBSOLETE_FUNCTIONS and IMGUI_DISABLE_DEMO_WINDOWS.

Building

  • git clone [email protected]:flyover/imgui-js.git
  • cd imgui-js
  • git submodule update --init --recursive
  • download and install Emscripten
  • npm install
  • make
  • make start-example-html

TODO

  • file I/O, imgui.ini, loading external fonts
  • implement ImGuiTextFilter (add support for JavaScript RegExp's)
  • implement ImGuiTextBuffer (simplify to array of strings)
  • fill in remainder of any missing API
  • automate the Emscripten install and environment setup in npm install

License

imgui-js is licensed under the MIT License, see LICENSE for more information.

About

JavaScript bindings for Dear ImGui using Emscripten and TypeScript

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 45.6%
  • JavaScript 40.4%
  • C++ 13.7%
  • Other 0.3%