ImHUI: Imgui-style library for the web using actual HTML output

https://games.greggman.com/game/imhui-first-thoughts/

by ingve • 5 years ago

95 25 5 years ago

games.greggman.com

boguscoder• 5 years ago

Russian speaking segment of HN will be delighted

c-smile2• 5 years ago

Just for those who don't know Russian: the name can be read as "I'm the dick".

FpUser• 5 years ago

Dick is somewhat softer word then the one implied.

tomjakubowski• 5 years ago

And to painfully spell it out, you have to code switch to read it that way: I[']m in English, then HUI as a transliteration of хуй.

malkia2• 5 years ago

Bulgarian too :)

d33• 5 years ago

https://en.wiktionary.org/wiki/Reconstruction:Proto-Slavic/x...

sosuke• 5 years ago

It reminds me of Visual Basic. I had fun creating front-end GUIs for batch files and Quake. I even had my program on PlanetQuake! Under the inspired name of "Quake Loader" I think. They gave me a little HTML I could put in the site. I even used VBScript to install the Quake font on Windows computers. Oh the things kids do.

schwartzworld• 5 years ago

The library looks interesting, but the author's React code shows he doesn't have much experience using it. React provides a `useEffect` hook that lets you watch a value outside the react tree and update your components when it changes (or vice versa).

Once a value is passed down as props, you get all that reactivity for free.

blondin• 5 years ago

imgui tends to get much love around here. i have to say, the most interesting aspect of the swift language ecosystem for me is swiftui. they really nailed declarative ui. the web should really steal that model.

yakubin• 5 years ago

I've heard opinions that SwiftUI is inspired by React.

mumphster2• 5 years ago

Have you used react at all? Check out react + rxjs for a similar experience, add some typescript on top and it becomes even better!

beaconstudios2• 5 years ago

I love rxjs but I wouldn't call it user friendly. It's essentially a text encoding of data flow programming and requires a totally different mental model to react. The explicit coding of time is great, but for most reactive js code react's own logic is simpler and more idiomatic.

The_rationalist• 5 years ago

Stencil, angular, vue with the class api are all delightfully declarative through decorators

hencq• 5 years ago

If I understand immediate mode GUIs correctly, you basically redraw the UI every iteration of your (game) loop. How does that work in this case? Do you call these functions in a loop? Does it automatically remove the dom nodes at the end of every loop iteration? That seems quite wasteful, so I doubt that's what happens, but I'm curious to how it actually works.

mschuetz• 5 years ago

Not sure how they actually work but I can imagine that it's not that bad in OpenGL, DirectX, Vulkan, etc. You can just fill a preallocated buffer with a certain capacity with the right data on the fly and send it to the GPU in one swoop. Should be fine for a couple of thousand of elements, as long as you don't invoke OpenGL commands for each individual elements, but only for the buffer containing all elements.

For html, it's probably much tougher since the DOM is statefull and fares badly with frame-wise changes to it. That might require caching elements to avoid layout invalidation and rebuilding the dom.

shrimpx• 5 years ago

It can work much like React does, using dom diffing. You can run to collect virtual dom, diff, and update only what changed.

Arnavion• 5 years ago

Immediate mode GUIs don't necessarily rerender all the pixels every loop iteration either. The thing that gets "redrawn" every loop iteration is the programmatic representation of what the UI should look like. Eg every iteration you say "draw a button of this size with this text, then draw a dropdown with this size, then if the button was clicked draw this else draw that, ..." . The library then compares what you want against what's already on screen, and renders the difference.

ianhanschen• 5 years ago

Never expected the retained vs immediate mode debate to pop up in this way, but neat.

kall• 5 years ago

I am enjoying browsing though the code of this. The way the author abstracts HTML elements has some appeal.

I'm not convinced this has a benefit over React et al. You could even render react 60 times per second and use only plain values not state if you think that will be beneficial. Virtual DOM and the incredible computing power in our devices will make it work.

I have never worked with real immediate mode gui toolkits though, so I may be missing something nice, e.g. about that sequential declaration style? Or that it feels even less taxing to reason about than react?

Danieru• 5 years ago

Woah, cool to see Greggman on Hacker News. Between Polm and Greggman the Tokyo Indie game scene punches above its weight eh.

A HTML driven imgui sounds cool, I hope Gregg continues building it out.

Of course the irony is in running immediate mode logic through a retained mode UI model. In theory this should be a horrible x horrible idea. Yet I suspect, the results bare out, that web renderers manage.

himujjal• 5 years ago

So, Basically an HTML, CSS Engine based on Imgui using Virtual DOM concepts. Interesting

ImHUI: Imgui-style library for the web using actual HTML output

Related Stories