LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
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;
}
JS
SystemJS.config({
  map: {
    "imgui-js": "https://rawgit.com/flyover/imgui-js/master"
  },
  packages: {
    "imgui-js": { main: "imgui.js" }
  }
});
Promise.all([
  System.import("imgui-js"),
  System.import("imgui-js/example/imgui_impl")
])
.then((modules) => {
  const ImGui = modules[0];
  const ImGui_Impl = modules[1];

  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.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_Impl.EndFrame();

    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();
  }
});
Term
Sat, 04/14/2018 - 20:42

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv