6 ms·

Here's a simple WASM version of the Nuklear standard demo: https://floooh.github.io/sokol-html5/nuklear-sapp.html https://floooh.github.io/sokol-html5/nuklear-

Here's a simple WASM version of the Nuklear standard demo: https://floooh.github.io/sokol-html5/nuklear-sapp.html https://floooh.github.io/sokol-html5/nuklear-sapp.html The big difference to Dear ImGui is that Nuklear has a C API and is also implemented in C - and apparently it has more skinning/themeing options, which I haven't tinkered with yet. TBH, for tools I prefer cimgui (a C wrapper around Dear ImGui), my impression is that Nuklear has a 'purer' immediate-mode design at the cost of some convenience, while Dear ImGui has a more pragmatic design approach, but also has less friction for writing UI code. I haven't needed skinning options so far though, that might be the actual USP of Nuklear. It all might also just be personal bias, because I used Dear ImGui before Nuklear :) For shits'n'giggles, here's both UI systems in the same application: https://floooh.github.io/sokol-html5/nuklear-sapp-ui.html https://floooh.github.io/sokol-html5/nuklear-sapp-ui.html (the menu bar and all windows that open from it is Dear ImGui, the rest is Nuklear).

sph 4y ago
> https://floooh.github.io/sokol-html5/nuklear-sapp-ui.html https://floooh.github.io/sokol-html5/nuklear-sapp-ui.html The check-box being an empty square when it's checked, and a filled square when it's unchecked is an unpopular design decision.
- squarefoot 4y ago
  Not just unpopular, it seems totally misleading and plain wrong to me. I've also seen elsewhere something similar, like checkboxes used instead of checkmarks as output widgets on web pages; cannot recall where though.
  - voakbasda 4y ago
    I think some of this stems from their use in dark patterns, such as opt-opt checkboxes that end up opting you in. Then copy and paste took over.
    - bch 4y ago
      I had something like this happen w some documentation I was working on in docbook (~13 years ago - forgive me if this isn’t 100% accurate), iirc: “[*]” meant “empty checkbox”.
- wtarreau 4y ago
  You're right, it looked completely bogus to me with things seeming to do the opposite of what I configured, until I read your message! The problem with UIs is that people can't refrain from distinguishing themselves by doing something different from what seems intuitive to most, just because they can. And that results in the current web and interfaces...
  - anonymous927292 4y ago
    [flagged]
- smusamashah 4y ago
  This must be a mistake in the demo. Because all other UI elements behave exactly as you expect them.
- ace2358 4y ago
  I can’t remember the name for it, but there is a certain kind of switch design that’s meant to be visually ‘on’ when you’re turning something off. The best example and how I learnt about this is the mute toggle on iPhones and the lock toggle on the old iPods. When you turned the switch ‘on’ it turned the sound/buttons ‘off’. The signify this special kind of ‘inverted’ switch, they put the orange colour on there. [1] This is a rare use case but it does exist. And definitely shouldn’t be the default in the UI library [1] https://d3nevzfk7ii3be.cloudfront.net/igi/mmIJOyYlvjSvCBrH.medium https://d3nevzfk7ii3be.cloudfront.net/igi/mmIJOyYlvjSvCBrH.m...
andrewmcwatters 4y ago
No, the biggest difference is one is only intended for development and debugging. > Dear ImGui is designed to enable fast iterations and to empower programmers to create content creation tools and visualization / debug tools (as opposed to UI for the average end-user).
0x0203 4y ago
Another advantage of Nuklear is that it has a pure software renderer back end that comes with it. If you're developing on a system where you don't have OpenGL or any of the other myriad of software/hardware renderers, nuklear is pretty handy. It makes it easy to write your own driver for custom/embedded systems.
cshenton 4y ago
Dear ImGui certainly seems more popular wherever skinning isn’t a priority (though I’ve seen games use it even for user facing UI). It’s become a bit of a Wilhelm scream, love spotting it in the wild.
mixmastamyk 4y ago
Pretty cool that works in a browser on a canvas. Might I consider it to build something like a simplified photopea or powerpoint? However it requires webgl and writing in C translated to wasm? Looks like webgl is well supported, do many folks have it disabled? Not sure about that, maybe javascript with svg would be easier to write such an app in.
reassembled 4y ago
DearIMGUI has both an unofficial C wrapper and a new official C binding generator. I have personally used the CIMGUI wrapper with C99 apps using the Direct3D11 backend and it works great. The new API is started by the DearIMGUI creator but is still adding features that are available in CIMGUI. Unofficial C API - https://github.com/cimgui/cimgui https://github.com/cimgui/cimgui Official binding gen - https://github.com/dearimgui/dear_bindings https://github.com/dearimgui/dear_bindings
- corysama 4y ago
  Then someone put Sokol and IMGUI together into a single .h + .cpp combo and you get https://github.com/pplux/imgui-app https://github.com/pplux/imgui-app

sph 4y ago

> https://floooh.github.io/sokol-html5/nuklear-sapp-ui.html https://floooh.github.io/sokol-html5/nuklear-sapp-ui.html The check-box being an empty square when it's checked, and a filled square when it's unchecked is an unpopular design decision.

squarefoot 4y ago
Not just unpopular, it seems totally misleading and plain wrong to me. I've also seen elsewhere something similar, like checkboxes used instead of checkmarks as output widgets on web pages; cannot recall where though.
- voakbasda 4y ago
  I think some of this stems from their use in dark patterns, such as opt-opt checkboxes that end up opting you in. Then copy and paste took over.
  - bch 4y ago
    I had something like this happen w some documentation I was working on in docbook (~13 years ago - forgive me if this isn’t 100% accurate), iirc: “[*]” meant “empty checkbox”.
wtarreau 4y ago
You're right, it looked completely bogus to me with things seeming to do the opposite of what I configured, until I read your message! The problem with UIs is that people can't refrain from distinguishing themselves by doing something different from what seems intuitive to most, just because they can. And that results in the current web and interfaces...
- anonymous927292 4y ago
  [flagged]
smusamashah 4y ago
This must be a mistake in the demo. Because all other UI elements behave exactly as you expect them.
ace2358 4y ago
I can’t remember the name for it, but there is a certain kind of switch design that’s meant to be visually ‘on’ when you’re turning something off. The best example and how I learnt about this is the mute toggle on iPhones and the lock toggle on the old iPods. When you turned the switch ‘on’ it turned the sound/buttons ‘off’. The signify this special kind of ‘inverted’ switch, they put the orange colour on there. [1] This is a rare use case but it does exist. And definitely shouldn’t be the default in the UI library [1] https://d3nevzfk7ii3be.cloudfront.net/igi/mmIJOyYlvjSvCBrH.medium https://d3nevzfk7ii3be.cloudfront.net/igi/mmIJOyYlvjSvCBrH.m...

andrewmcwatters 4y ago

No, the biggest difference is one is only intended for development and debugging. > Dear ImGui is designed to enable fast iterations and to empower programmers to create content creation tools and visualization / debug tools (as opposed to UI for the average end-user).

0x0203 4y ago

Another advantage of Nuklear is that it has a pure software renderer back end that comes with it. If you're developing on a system where you don't have OpenGL or any of the other myriad of software/hardware renderers, nuklear is pretty handy. It makes it easy to write your own driver for custom/embedded systems.

cshenton 4y ago

Dear ImGui certainly seems more popular wherever skinning isn’t a priority (though I’ve seen games use it even for user facing UI). It’s become a bit of a Wilhelm scream, love spotting it in the wild.

mixmastamyk 4y ago

Pretty cool that works in a browser on a canvas. Might I consider it to build something like a simplified photopea or powerpoint? However it requires webgl and writing in C translated to wasm? Looks like webgl is well supported, do many folks have it disabled? Not sure about that, maybe javascript with svg would be easier to write such an app in.

reassembled 4y ago

DearIMGUI has both an unofficial C wrapper and a new official C binding generator. I have personally used the CIMGUI wrapper with C99 apps using the Direct3D11 backend and it works great. The new API is started by the DearIMGUI creator but is still adding features that are available in CIMGUI. Unofficial C API - https://github.com/cimgui/cimgui https://github.com/cimgui/cimgui Official binding gen - https://github.com/dearimgui/dear_bindings https://github.com/dearimgui/dear_bindings

corysama 4y ago
Then someone put Sokol and IMGUI together into a single .h + .cpp combo and you get https://github.com/pplux/imgui-app https://github.com/pplux/imgui-app