Online interactive demonstration

[pthom]

Your library is truly awesome, congrats!

When it come to C++ libraries, most of the time there is most of the time no easy way to get a working demonstration. First, you have to download the code setup the build environment, etc. There, C++ is lagging behind some other languages, especially on the web.

However, emscripten can help a lot in this case. In order to tryr to fill this gap, I spent a few hours this afternoon in order to make an online demo of your library.

It is live here, and the source code for this demo is on github.

Here are some screenshots:

implot demo:

source code browser with access to the different demos:

It runs at 120 fps, except for the benchmark (which I suspect is blocked because it may consume too much memory)

If you are interested, you could may be use this in order to add an interactive demo in your Readme. Feel free to deploy the wasm files on any server of your choice.

Thanks

[leeoniya]

nice. though it seems to stress my laptop's thermal management :D

related: #54

[pthom]

nice. though it seems to stress my laptop's thermal management :D

related: #54

Let me reduce the fps to 60, it will be more gentle!

[pthom]

Is it more gentle now? The fps is now chosen by the browser (and varies between 40 to 60 on my laptop)

[epezent]

This is too cool! Thank you for putting this together. I've been meaning to add compiled binaries of the demo to the Releases, but I love the idea of a web-based demo.

If you are interested, you could may be use this in order to add an interactive demo in your Readme. Feel free to deploy the wasm files on any server of your choice.

I need to familiarize myself emscripten first. Do you mind if I add a link to your demo in our README?

[pthom]

I need to familiarize myself emscripten first. Do you mind if I add a link to your demo in our README?

With pleasure; of course you can. I will leave it on the server.
Ping me if you want me to rebuild it after some modifications on your side (it's just a matter of "submodule update" + make + rsync)

[pthom]

Hi, I just updated the demo in order because I saw that it could fail on some browsers (safari and edge notably).

It is corrected, and I have tested it succesfuly on firefox (MacOS, Windows, Linux), chrome(MacOS, Window, Linux), safari (MacOS, iOS), as well as on Android.

Also, the code buttons will now always put the corresponding code at the top of the page:

[epezent]

@pthom, I know it's been a while but I finally updated the README to link to your demo. Thanks again for creating and hosting this. Should any major features be added, I will let you know if the demo needs rebuilding. If you ever decide to stop hosting, please let me know. Closing this issue.

[pthom]

@epezent : thanks for letting me know! Ping me when you want an update.

[pthom]

Just for info, I updated the demo today with the latest code.

[epezent]

Thanks @pthom!

The benchmark is still crashing for whatever reason. Were you ever able to investigate? I'm curious if it's something we could fix on our end.

[bear24rw]

Does the benchmark still with #88 and compiling with -DImDrawIdx="unsigned int"?

[pthom]

I have updated the code with the correct compile definition, and the benchmark now works.
(see pthom/implot_demo@64cfb15)

By the way, I also updated to implot current version (which required to Create/Destroy Implot context).

[epezent]

Thanks @pthom! I added some new styling stuff to the demo this morning that you may want to update for. Also, if it's not too much trouble could you try merging the ImGui tables branch so that the Tables section of the demo compiles. It merges seemlessly with master and docking.

[pthom]

@epezent : I updated the implot code and used a mix branch between docking and tables (see this commit)

There were some merge errors in the imgui example files which I deliberately ignored.

The tables example now works.

[epezent]

@pthom , I was wondering if you experience white flickering dots in the ImPlot online demo. I noticed them today. I see them in Chrome and Edge. I checked your other Hello ImGui projects, and didn't see any. I was wondering if somehow ImPlot is causing the issue, but the white dots appear before any ImPlot code has been invoked (i.e. immedialtey when the demo is opened and before any plots are shown). Is this an Emscripten issue?

[pthom]

@epezent : I just make a test on several browsers (namely firefox under Windows, linux and osx; chrome under osx and windows; edge under windows; chromium under linux) and I did not experience any flickering on neither of them.

My main machine is a mac, and I am using virtual machines for windows and linux.

Could you share a screenshot or a small video? Are you able to reproduce it on a different PC?

[epezent]

Sent you an email. I'll try to reproduce on another machine later.

[pthom]

Just a quick message to say that I updated the demo with the latest implot version (+ latest commit on imgui's docking branch), as of 2021/03/10.

[pthom]

Hello,

I just updated the demo with the latest implot commit.
Also, I updated the code so that copying code from the editor window works. It was previously not possible, due to security limitations with webAsm. I also added a "copy button", see below:

[epezent]

Once again, thank you @pthom for hosting the demo!

[pthom]

Hello,
I just updated the demo with the latest implot version, as of 2022/02/07.

[pthom]

Hello,

Another update to the demo today.
Some details:

• The size of the wasm went from 16MB down to 1.8MB
• The demo is now using the backends branch
• The code buttons work again (I saw that implot_demo uses a new naming convention void ShowDemo_DemoName(), which the demo parses)

[pthom]

Happy new year!

I just updated the demo today. I now uses imgui V1.89.2, as well as implot (11/25/2022).
The font rendering should now be much crisper.

Link

[mravaneesh]

hello @pthom your demo is a lot of help to all of us, but I wanted to know how did you add the checkbox for GPU acceleration in the config section of the ImPlot demo and if you know how to do it then kindly do tell me.

[pthom]

@mravaneesh : I did not see a checkbox in the config section.

Were you talking about this?

If so, this is an internal feature of Hello ImGui