ImGui JavaScript Sandbox

imgui-javascript-sandbox.markdown

ImGui JavaScript Sandbox

A Pen by Isaac Burns on CodePen.

License.

index.html

<div id="editor"></div>
<canvas id="output" tabindex="1"></canvas>

script.js

(async function() {
  await ImGui.default();
  const editor = ace.edit("editor");
  editor.setTheme("ace/theme/github");
  editor.getSession().setMode("ace/mode/javascript");
  editor.renderer.setShowGutter(false);
  editor.setValue([
    "ImGui.Text(`Hello, world ${123}`);",
    "",
    "if (ImGui.Button(\"Save\"))",
    "{",
    "\t// do stuff",
    "}",
    "",
    "ImGui.InputText(\"string\", (_ = buf) => buf = _, 256);",
    "",
    "ImGui.SliderFloat(\"float\", (_ = f) => f = _, 0.0, 1.0);",
    "",
    "ImGui.ColorEdit4(\"clear color\", clear_color);",
    ""
  ].join("\n"));
  editor.clearSelection();

  const canvas = document.getElementById("output");
  const devicePixelRatio = window.devicePixelRatio || 1;
  canvas.width = canvas.scrollWidth * devicePixelRatio;
  canvas.height = canvas.scrollHeight * devicePixelRatio;
  window.addEventListener("resize", () => {
    const devicePixelRatio = window.devicePixelRatio || 1;
    canvas.width = canvas.scrollWidth * devicePixelRatio;
    canvas.height = canvas.scrollHeight * devicePixelRatio;
  });

  ImGui.CreateContext();
  ImGui_Impl.Init(canvas);

  ImGui.StyleColorsDark();
  //ImGui.StyleColorsClassic();

  const clear_color = new ImGui.ImVec4(0.45, 0.55, 0.60, 1.00);

  /* static */ let buf = "Quick brown fox";
  /* static */ let f = 0.6;

  let done = false;
  window.requestAnimationFrame(_loop);
  function _loop(time) {
    ImGui_Impl.NewFrame(time);
    ImGui.NewFrame();

    ImGui.SetNextWindowPos(new ImGui.ImVec2(20, 20), ImGui.Cond.FirstUseEver);
    ImGui.SetNextWindowSize(new ImGui.ImVec2(294, 140), ImGui.Cond.FirstUseEver);
    ImGui.Begin("Debug");

    try {
      eval(editor.getValue());
    } catch (e) {
      ImGui.TextColored(new ImGui.ImVec4(1.0,0.0,0.0,1.0), "error: ");
      ImGui.SameLine();
      ImGui.Text(e.message);
    }

    ImGui.End();

    ImGui.EndFrame();

    ImGui.Render();
    const gl = ImGui_Impl.gl;
    gl && gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    gl && gl.clearColor(clear_color.x, clear_color.y, clear_color.z, clear_color.w);
    gl && gl.clear(gl.COLOR_BUFFER_BIT);
    //gl.useProgram(0); // You may want this if using this code in an OpenGL 3+ context where shaders may be bound

    ImGui_Impl.RenderDrawData(ImGui.GetDrawData());

    window.requestAnimationFrame(done ? _done : _loop);
  }

  function _done() {
    ImGui_Impl.Shutdown();
    ImGui.DestroyContext();
  }
})();

scripts

<script src="https://flyover.github.io/imgui-js/dist/imgui.umd.js"></script>
<script src="https://flyover.github.io/imgui-js/dist/imgui_impl.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>

style.css

#editor {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 50%;
  height: 100%;
}
#output {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50%;
  height: 100%;
  z-index: 1;
}