Gallery: Post Your Screenshots / Code Here (PART 1)

[epezent]

Post your screenshots or custom code here and tell us about your project!

[epezent]

Custom candlestick plots and tool tips:

ImPlot + ImGui Tables API:

Both of these have been added to implot_demo.cpp

[PeterJohnson]

Robot simulation GUI for FIRST robotics with multiple plots and drag and drop everything.

wpilibsuite/allwpilib#2653

[epezent]

@PeterJohnson , I'm curious how you got the linked axes working and if it is bidirectional. This is a feature I've wanted to implement.

[hoffstadt]

Some things DearPyGui users have made:

[PeterJohnson]

@epezent It is not bidirectional. I just use SetNextPlotLimitsX() to force the X axis on the second plot to follow the first. Bidirectional is a good idea. I think how I would tackle that is to do the SetNextPlotLimitsX() on the other plots only when one of them is actively being dragged (there would be a 1-frame delay to updating the first plot when you dragged the second plot, but that's hardly noticeable). However, to do this, I would need a method to detect when a plot is being dragged by the user. Is that exposed in implot_internal.h?

[marcizhu]

Not sure if this one counts, but since I will be using this library to make an application for USB oscilloscopes, I've been doing some experiments where I plotted some (generated) signals into heatmaps in order to visually differentiate the random noise from the real signal. Here's the result:

I want to take this chance to thank @epezent and all the colaborators of this project for this amazing library. Sincerely, thank you all for your amazing work ❤️

[ozlb]

Not sure if this one counts, but since I will be using this library to make an application for USB oscilloscopes, I've been doing some experiments where I plotted some (generated) signals into heatmaps in order to visually differentiate the random noise from the real signal.

@marcizhu Does the sample increase the "weight" and time decrease it? It will be great to have a "light" version in the demo...

[marcizhu]

Indeed, every "hit" of the signal increases the histogram value by 1. I also keep a variable with the maximum value on the histogram at every given moment so that the colors cover the maximum possible range, but using time would also be a solution if you want a "fade out" effect once the signal disappears.

I can post a snippet with the code tomorrow if you guys want :)

[marcizhu]

Indeed, every "hit" of the signal increases the histogram value by 1. I also keep a variable with the maximum value on the histogram at every given moment so that the colors cover the maximum possible range, but using time would also be a solution if you want a "fade out" effect once the signal disappears.

I can post a snippet with the code tomorrow if you guys want :)

[epezent]

@marcizhu, that's cool! What's the performance like? I didn't really optimize heatmaps for high density display, but it'd be an easy fix if it's needed.

[epezent]

Also, @marcizhu, feel free to submit a PR adding a minimal example to the demo :)

[ozlb]

Indeed, every "hit" of the signal increases the histogram value by 1. I also keep a variable with the maximum value on the histogram at every given moment so that the colors cover the maximum possible range, but using time would also be a solution if you want a "fade out" effect once the signal disappears.

I can post a snippet with the code tomorrow if you guys want :)

"Fade out" effect will help you not only when signals disappears but generally when changes it's nature and a plot persistence factor will help you to track signal modulations

[marcizhu]

@marcizhu, that's cool! What's the performance like? I didn't really optimize heatmaps for high density display, but it'd be an easy fix if it's needed.

@epezent The performance is really great: the histogram has a size of 1024x256, and rendering it on a 1280x720 window (the screen is 2560x1600) on a MacBook Pro 2018 (so not the best GPU in the world) I get 60-80 frames consistently. If we take into account the fact that my code is just a quick & dirty demo and it is not optimized at all, I'd say the performance is more than acceptable :)

Also, @marcizhu, feel free to submit a PR adding a minimal example to the demo :)

Great! I will be opening a PR in a few days. Right now I'm a bit busy with university and exams, but once time allows I will definitely open a PR 👍

"Fade out" effect will help you not only when signals disappears but generally when changes it's nature and a plot persistence factor will help you to track signal modulations

@ozlb That's totally true. I will try using time instead of just tracking the maximum value of the histogram and if the end result looks nice, I will add that to the demo instead :D

[ejyanezp]

Here is an application to display seismic data, thanks to the implot project.

[ddovod]

My deep reinforcement learning playground, heavily using different kinds of plots. Big thanks to implot!

[epezent]

A quick little toy I put together while working on some DSP algorithms.

[elvissteinjr]

Desktop+ is a tool to bring your desktop and more into SteamVR. A recent addition is the Performance Monitor.
ImPlot is used here to render the frame time graphs.

This is pretty basic as far as plotting goes, but I just wanted something to render neat looking graphs in Dear ImGui and ImPlot fit the bill nicely. Thanks for that.

[jvannugteren]

I'm working on a GUI for a magnetic field calculation package called RAT. It uses GPU acceleration for magnetic field calculation and is therefore very fast compared to other codes. ImGui is used for the graphical user interface and ImPlot for all the 2D plotting. Although I'm not really using the real time capabilities of ImPlot, I think the library is great for my application as well.

[epezent]

That's awesome!

[epezent]

I should add that there is currently some work going into heatmap, and you should see a nice performance boost in the near future.

[jvannugteren]

Great. I indeed noticed a drop in the framerate when using too many pixels in the heatmaps.

[DrColossus]

I'm using ImPlot in a hobby project to analyze cycling workouts (power/heart rate/speed/GPS/etc.)

I'm also downloading OSM tiles on the fly and use ImPlot to display maps ;)

[epezent]

This is super cool! How exactly are you doing this? I assume you are using one or multiple calls to PlotImage. I would love to see the code if it is available somewhere!

[DrColossus]

Yes, exactly. The map uses Mercator projection normalized to [0, 1] and I use the tile resolution, GetPlotLimits and GetPlotSize to figure out which OSM tiles should be visible and then just issue a couple of PlotImage calls to display those tiles.

I'm planning to make it available at some point, but I haven't found the time yet :)

Here's how it works: OSM tiles use a simple x/y-coordinate and zoom level convention and there are some open tile servers available that you are free to use (with some restrictions like don't use more than 2 threads to download stuff). Each tile URL then consists of the base server URL concatenated with the tile coordinate and file extension (/zoom/x/y.png), i.e. the whole world in zoom level 0 can be found under https://a.tile.openstreetmap.org/0/0/0.png which I download using libcurl.
I do then cache the downloaded tiles on disk in a folder hierarchy that mirrors these url/zoom/x/y.png paths to avoid too many downloads.

Most of the logic happens when building a list of tiles from a coordinate bounding box.
So in pseudo-code, the logic is as follows:

// We hold a map for all tiles with the
// coordinate as search key
map<coord, tile> cache
vector<tile>     visible_tiles

vector<tile> get_region(coord_min, coord_max)
{
    // Just return the previous result if nothing changed
    if (coord_min,coord_max == previous_min,previous_max &&
        no_new_downloaded_tiles)
        return visible_tiles
    
    // The region changed, we rebuild the list
    // of visible tiles.
    visible_tiles.clear()
    
    for (coord in coord_min,coord_max)
    {
        tile = get_tile(coord)
        visible_tiles.push_back(tile)
    }
    
    return visible_tiles
}

tile get_tile(coord)
{
    // The tile might already be in memory
    if (cache[coord] exists)
        return cache[coord]
        
    // We try to load it from disk or download it
    // if it is accessed for the very first time.
    load_tile_asynchronous(coord)
    
    // We still insert a lower res tile as fallback (it spans
    // a larger region, though). It will be replaced with the
    // full res tile once that becomes available.
    cache[coord] = find_lower_res(coord)
}

void load_tile_asynchronous(coord)
{
    // This lambda function is pushed to a job queue
    // so that the filesystem access and/or download
    // does not block our UI code.
    lambda = [coord]()
    {
        filename = filename_from_coord(coord)
        path     = disk_cache_folder + filename
        
        if (!exists(path)
        {
            image = download_image(coord)
            write_to_disk(image, path)
            tile = tile_from_image(image)
            cache[coord] = tile
        }
        else
        {
            tile = load_from_file(path)
            cache[coord] = tile
        }
    }
    
    job_queue.push_back(lambda)
}

There are some other shenanigans going on (like throwing away old tiles, sorting requested tiles by their distance to the plot center so they are loaded first, and so on) that were surprisingly simple and fun to implement.
This whole map rendering thing was basically a reason to learn a bit about web requests and ImPlot made it way easier by having all the input stuff just work, thank you for all the effort you put into this!

[epezent]

That's fantastic! I can't wait to play with it when you decide to make it available. It's worth noting that I'm currently working a separate repository to host more sophisticated demos of ImPlot. I think if you or I could add a minimal example of your maps to this, it would be a hit! Let me know what you think 😄

[epezent]

I've been playing with @marcizhu's awesome GPU accelerated heatmaps which have been merged into the backends branch (please, give it a try!). Here's a naïve Mandelbrot implementation, computed entirely on the CPU. Multithreading and AVX instructions keep the computation fast enough for smooth interaction, and the GPU accelerated heatmap renders the image in no time!

[marcizhu]

Man that's awesome! Looks pretty nice, and the ~90 FPS seems really good to me!! I made a Mandelbrot viewer a while back using OpenMP for parallelism and SDL for rendering and I managed like 3 or 4 FPS using CPU-only rendering. Really hard to believe how fast this is. Good job!

By the way, will this be open sourced? I'd love to play with this by myself if that's possible 😄

[epezent]

Yes I'll put it in implot demos repo soon!

[epezent]

I got the actual Mandelbrot code from here, and your reply just made me just realize what the "strange" pragma I commented out was -- an OpenMP parallel for loop! I added this back with the right compiler flag, removed my ad-hoc threadpool, and now see 200 FPS for a 768x768 render!

[0lru]

@see https://github.com/0lru/p3ui
(PS: Object-Oriented Wrapper for ImPlot: Header Source, wrapped to Python right here)

[epezent]

I've updated the implot_demos repo with several new demos that folks may enjoy. Note the repo is in need of cleaning up. You may experience a few issues with building.

ImStocks

• downloads historical data from Yahoo Finance and renders OHLC plot that is slightly more sophisticated than the one found in implot_demo.cpp

ImMandel

• see posts above

ImMaps

• my own implementation of what @DrColossus shared above

[epezent]

It took me way too long to realize you are omitting the weekends in this example. I see now that the ticks are in 10 day intervals. Doh!

[epezent]

Better example of uPlot day ticks. Span is 4 days, which presents evenly spaced ticks doesn't always show a tick on the first of the month. Again, neither is wrong. Just a stylistic choice.

[leeoniya]

lol yeah, the ticks in that demo are ordinal and basically work the same way as if they were 0..N integers at the datapoints. then the tick density assesor picks some integer divisor. there is no knowledge of a time axis or calendar, besides formatting the timestamps at whatever datapoint ends up getting chosen. not great, but skipping weekends on discontinuous time scales is not something i'm willing to work through.

i do plan to improve it (see recent discussion in leeoniya/uPlot#555), but it requires scanning all the data and assessing the Date() of each timestamp, which is okay for a demo with a few hundred datapoints, but maybe not thousands.

[leeoniya]

and i've agreed with you before, btw, about ticks on 1st of each month being a better choice, but obviously sacrifices a uniform grid in some cases.

[epezent]

As you mentioned, I have no idea how to support weekend removal using a continuous scale. Seems that even matplotlib and MATLAb are incapable of doing so without hackery by the user:
https://stackoverflow.com/questions/42155916/how-to-remove-weekends-in-matplotlib-candlestick-chart
https://www.mathworks.com/matlabcentral/answers/25643-excluding-weekend-gaps-from-financial-timeseries-plots

[dnedry2]

[epezent]

Incredible!

[bear24rw]

ImPlot histograms spotted in the Apple keynote today:

https://youtu.be/exM1uajp--A?t=1147

[phicore]

How can you be sure about that?

[epezent]

I think @bear24rw is only referring to this plot.

Definitely looks like ImGui. Can't be certain it's ImPlot though.

[epezent]

Sharing @CosminPerRam's incredible sorting visualizer app. The "Random Themes" section at the 4:23 mark is a fantastic demonstration of ImPlot's versatility!

https://github.com/CosminPerRam/StylishVisualizer

[CosminPerRam]

Thanks for sharing it here.
Yeah, ImPlot's versatiliy is great and it'll only become greater, I'm looking forward to update the app if more styles can be done!
The app couldn't be this fabulous without this good library, thanks!

[bear24rw]

Spotted in a SmarterEveryDay video:

https://youtu.be/dCXu8Ju_fdY?t=396

[epezent]

This is awesome! I actually met Destin a long time ago in undergrad at the University of Alabama. He was sponsoring one of our senior design projects. Very cool dude.

[dnedry2]

RTLSDR Reciever with some options for live colormap changes / scaling. It can also record the incoming stream to a file

[hinxx]

@dnedry2 cool waterfall widget! Any chance of sharing the source code for it?

[dnedry2]

@hinxx It's actually just an OpenGL texture that I render using PlotImage. All the coloring / scaling is done prior to the texture being passed to ImPlot