Git Product home page Git Product logo

imgui-ts's Introduction

imgui-ts

JavaScript bindings for Dear ImGui using Emscripten and TypeScript, modularized with webpack for imgui-js

Notes

  • Fonts
imconfig.h
USE_EXTERNAL_FONT

Use canvas2d fillText to generate the fonts that used at runtime. 
  • Input Text
Use overlay document element 'input' for single line text, and 'textarea' for multi-line text input.
We can input text from mobile now.

TODO InputInt and other function input from mobile
  • Slide Content from Mobile
When window is no_move, we can slide content then HoveredID=0. Usefull for mobile with no mouse wheel.

Building

  • compile cpp to js
download and install [Emscripten](http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html)
cd imgui-ts/imgui/embind
make
  • create bundle js
cd imgui-ts
npm install
webpack

Example

import {ImGui, ImGui_Impl} from '@zhobo63/imgui-ts'

let text:ImGui.ImStringBuffer=new ImGui.ImStringBuffer(128,'input text');
let text_area:ImGui.ImStringBuffer=new ImGui.ImStringBuffer(128,'edit multiline');

function _loop(time:number):void {
    ImGui_Impl.NewFrame(time);
    ImGui.NewFrame();
    ImGui.Begin("Hello");
    ImGui.Text("Version " + ImGui.VERSION);
    ImGui.InputText("Input", text);
    ImGui.InputTextMultiline("Text", text_area);
    ImGui.End();
    ImGui.EndFrame();
    ImGui.Render();

    ImGui_Impl.ClearBuffer(new ImGui.ImVec4(0.25,0.25,0.25,1));
    ImGui_Impl.RenderDrawData(ImGui.GetDrawData());
    window.requestAnimationFrame(_loop);
}

window.addEventListener('DOMContentLoaded', async () => {
    await ImGui.default();

    ImGui.CHECKVERSION();
    ImGui.CreateContext();
    const io:ImGui.IO=ImGui.GetIO();
    ImGui.StyleColorsDark();
    io.Fonts.AddFontDefault();

    const canvas:HTMLCanvasElement=document.getElementById("canvas") as HTMLCanvasElement;
    ImGui_Impl.Init(canvas);
    window.requestAnimationFrame(_loop);
});

ImGui JavaScript+WebGL+Webpack example

imgui-ts's People

Contributors

zhobo63 avatar

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.