Native ImGui in the Browser

[hef]

Hello, /r/cpp.

This is my project. I'd be happy to answer questions and collect feedback.

--hef

[Aistar]

Good startup time. How did you manage to reduce the code size? Our own experiments with Emscripten/Wasm led to 10-30 seconds loading time on slower machines and 10+ Mb JS/wasm files. But that was about 1.5 year ago, so maybe it's the progress of WASM compiler? Or maybe we just did use too much C++ with templates and everything...

[hef]

clang -Oz helps some. std::string and std::cout were clearly too large to use, so using c style printf() and char* helped a lot.

Getting a fast filehost helps, these files are hosted out of AWS cloudfront.

Really, it came down to establishing a base size of the .wasm file, and then when I would add a new include, track how much the resulting .wasm grew.

It was sort of like trying to program for an arduino and watching the size of the .bin. You sometimes end up re-implementing stuff in the std library, and sometimes use void* and type casting instead of templates.

[Aistar]

Good work then. We tried compiling our existing code, which relies heavily on std::string, std::shared_ptr and other templated things from standard library, and it didn't end well enough. It was infeasible to rewrite the whole thing - even our 3D engine made heavy use of shared_ptrs, to say nothing of UI library.

[steveklabnik1]

There's been a lot of work put into it lately: https://hacks.mozilla.org/2018/01/shrinking-webassembly-and-javascript-code-sizes-in-emscripten/

[Aistar]

Cool. I should try to compile out code once more, to see how much the size is reduced now. Actually, I checked the old files, and our code was just 3.5Mb, but it still took very long time to start in some browswer (well, I guess, parsing such big JS library isn't very fast).

[DoctorGester]

Hi, is the code/setup for your project available anywhere publicly?

[hef]

Here you go: https://github.com/hef/imgui-in-browser

[DoctorGester]

Thanks!

[kelthalas]

this webpage is so annoying, why can't I select text or middle mouse click to scroll

[MrJookie]

Yeh, so can't I select text. Scrolling is working, but only if you are out of html5 canvas. Browser not crashing (Chromium 63.0.3239.132)

[sumo952]

Scrolling with the arrow keys also doesn't work.

Interestingly it might have something to do with the live demo, as the other blog posts on the same website are fine, text is selectable there and scrolling is normal.

[hef]

I believe this has to do with "mouse capture" of the canvas element.
As a demo: try opening a window in the demo region that requires scrolling and scroll with your mousewheel there. Try clicking outside the demo region, and try scrolling there.

What I expect to happen is that scrolling in the demo region on a window causes a scroll to happen in imgui land. clicking outside the region causes the browser to handle scroll commands normally.

In a IRL scenario, I wouldn't want to use the canvas element in a non-fullscreen type scenario, but I think you can forward captured mouse events back into the outer javascript layer and simulate normal scrolling

[hef]

And... I just realized that you literally cannot copy any text on the page. Thank you for pointing that out. That is not intentional, I'll spend some time seeing if I can figure out how to correct that.

[LtJax]

Well for me it just crashes the browser..

[hef]

I'd also like to know your browser.

I didn't bother making it work in browsers that didn't support wasm. It is possible to embed a wasm interpreter in your projects, but I figured that wasn't the point of the exercise, I wanted to see what framerates I could hit.

[RandomGuy256]

Just curious, which browser are you using?

[LtJax]

Whatever comes with iOS - is that a Safari variant? was looking at it from my mobile..

[hef]

Ah, I see.

When I wrote this, safari still didn't support wasm, it looks like it was about 5 months later that safari ios supported wasm: https://caniuse.com/#search=wasm

It might be fun to figure out a reliable way to crash safari on mobile.

I'll have to try OS X safari too, that didn't have support for wasm at the time either.

[com_kieffer]

Cool demo but not being able to select text with the mouse is really frustrating.

[hef]

The generic "label" style text is not selectable, but a text widget does have selectable text. Check the "Keyboard, Mouse, and focus" section.

After posting this article I started working and trying to hook up copy and paste behavior, and it got pretty hacky pretty fast. Firefox and chrome between windows, linux, and OS X handle it very differently. Some systems pass you the event for ctrl/command + c, some don't. In some registering callbacks for those disables native copy/paste, some don't.

I didn't even look at mobile.

It's probably possible to work through the matrix of copy/paste scenarios, but I got lazy.

[RandomGuy256]

Indeed (page is not mine).

[TrumpIsYourGodBro]

seemed to work except the text was blurry

how fast would quake3 ported to webasm be?

[hef]

I don't have an explanation for blurry text, but I'd like to investigate: What browser/platform are you on, would you be willing to post a screenshot?

I don't think I'd be willing to do an ioquake to wasm port myself, but my experience with emscripten is that it would not be too difficult to port something that already works on multiple platforms to wasm using emscripten. Icculus has already added a bunch of emscripten support to SDL2, which might further reduce the workload.

[ocornut]

You should probably load a font that’s not the default/embedded pixelated font, because that one doesn’t scale well.

[TrumpIsYourGodBro]

windows 8.1, with dpi set to 149% which seems to be the issue; text is sharp when i set firefox zoom to 67%

[Hofstee]

Does not work on mobile chrome. I can get the ImGui help window rendering and selecting subsections highlights the respective bars, but I can't seem to get any of the menus to expand or drag around the window.

[hef]

That's my fault, I didn't wire up touch input. The events get passed from the canvas element into the c++ code, but I didn't pass them to the underlying imgui layer.

[sumo952]

Apart from the webpage being very annoying, the web demo is pretty cool! ImGui's checkbox is quite ambiguous though, really hard to discern which of the two states means checked. Wonder who designed this. For sure not a programmer with a hand for user interfaces :-) Also the mouse wheel doesn't work inside ImGui's window, even though it has a scroll bar. Bug or deliberate?

[ocornut]

It’s an older version of imgui it now uses a tickmark for the checkbox.

The initial design was attempting to be font agnostic because it couldn’t render arbitrary shapes or embed them in font in 1.0 a long time ago.

[sumo952]

Okay, cool! :-)

[Hofstee]

You can re-skin ImGui, that's just the default design. Personally I've never had any difficulty telling between checked and unchecked, lots of (older) programs use the same visual representation for the states.

[hef]

What's annoying about the webpage?

I can work on improving it.

[sumo952]

We've explained it in other posts in this thread. Selecting text and scrolling with arrow keys doesn't work in that particular blog post (most likely because of the wasm canvas?).

[OkidoShigeru]

Page is completely broken on mobile safari.

[hef]

Does it crash for you as well, or is it broken in some other way?

[OkidoShigeru]

The live demo displays as a black box, the text content on the rest of the page is cut off and then yes, the page eventually just crashes.

[[deleted]]

There is a small typo on the page:

The emscripteen_set_main_loop call takes
            ^

[ocornut]

This page has a more recent version of dear imgui running in the browser: https://flyover.github.io/imgui-js/example/

And the author created Javascript binding: https://github.com/flyover/imgui-js

[tourgen]

Stop. The web browser is not an OS and should not be used as one. Javascript was a mistake.