Giter Club home page Giter Club logo

dimgui's Introduction

dimgui

Port Dear ImGui to Deno.

Status

For now, only build on windows with opengl backend.

Usage

import {
  createWindow,
  getPrimaryMonitor,
  getProcAddress,
  mainloop,
  pollEvents,
} from "https://deno.land/x/[email protected]/mod.ts";
import * as gl from "https://deno.land/x/[email protected]/api/gles23.2.ts";
import * as imgui from "https://deno.land/x/[email protected]/mod.ts";
import { 
  Bool, 
  ImGuiConfigFlagBits,
  showWidgetDemoWindow,
} from "https://deno.land/x/[email protected]/mod.ts";

function queryWindowSizeAndFontSize() {
  const aspectRatio = 16 / 9;
  const lines = 40;
  const monitor = getPrimaryMonitor();
  const height = Math.ceil(monitor.workArea.height * 0.7);
  const width = Math.ceil(height * aspectRatio);
  const fontSize = Math.min(32, Math.ceil(height / lines));
  return { width, height, fontSize };
}
const windowInfo = queryWindowSizeAndFontSize();
console.info(windowInfo);

const window = createWindow({
  title: "IMGUI DWM",
  width: windowInfo.width,
  height: windowInfo.height,
  resizable: true,
  glVersion: "v3.2",
  gles: false,
});

// load opengl functions
gl.load(getProcAddress);

// create imgui context and init imgui backends
const imguiContext = imgui.createContext();
imgui.implGlfwInitForOpenGL(window.nativeHandle);
imgui.implOpenGL3Init("#version 130");

// set io
const io = imgui.getIO();
io.ConfigFlags |= ImGuiConfigFlagBits.DockingEnable;

// set font
const fonts = io.Fonts;
if (Deno.build.os == "windows") {
  const fontFile = "C:/Windows/Fonts/consola.ttf";
  try {
    const fontData = Deno.readFileSync(fontFile);
    fonts.addFontFromMemoryTTF(fontData, windowInfo.fontSize);
  } catch (error) {
    console.error(error);
  }
}

// states, primitive wrappers
const showDImGuiDemoWindow = Bool.of(true);
const showCppDemoWindow = Bool.of(true);

await mainloop(() => {
  // new frame
  imgui.implOpenGL3NewFrame();
  imgui.implGlfwNewFrame();
  imgui.newFrame();

  // draw widgets
  imgui.begin("controls");
  imgui.checkbox("dimgui demo", showDImGuiDemoWindow.buffer);
  imgui.checkbox("c++ demo", showCppDemoWindow.buffer);
  imgui.showStyleSelector("style selector");
  imgui.showFontSelector("font selector");
  imgui.end();

  if (showDImGuiDemoWindow.value) {
    showWidgetDemoWindow();
  }
  if (showCppDemoWindow.value) {
    imgui.showDemoWindow(showCppDemoWindow.buffer);
  }
  // submit
  imgui.render();

  // clear screen with default color
  gl.Clear(gl.COLOR_BUFFER_BIT);
  // render by imgui backend
  const drawData = imgui.getDrawData();
  imgui.implOpenGL3RenderDrawData(drawData);

  // swap render buffer and handle window events
  window.swapBuffers();
  pollEvents();
});

// clean up
imgui.implOpenGL3Shutdown();
imgui.implGlfwShutdown();
imgui.destroyContext(imguiContext);

Contribute

# build the shared library
deno task build
# generate cimgui ffi symbols and many draft to copy
deno task gen 
# test for window created by dwm
deno task test-dwm
# test for window created by embeded glfw
deno task test-self

dimgui's People

Contributors

djfos avatar load1n9 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

deno-windowing

dimgui's Issues

Status?

What is the status of this project?

Percent complete?

Roadmap?

Anyway I could help? I was rolling my own GUI with Skia-Canvas. This project will kill that.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.