An improved plot widget for Dear ImGui, aimed at displaying audio data

Overview

imgui-plot

An improved plot widget for Dear ImGui, aimed at displaying audio data

TOC

  1. Screenshots
  2. Rationale
  3. Usage
  4. Installation
  5. FAQ

Screenshots

Displaying waveform and spectrum:
Displaying Waveform and Spectrum

Custom tooltip:
Custom Tooltip

Selection example:
Selection Example

Rationale

The PlotLines() function in Dear ImGui is nice and simple, but it does lack some basic features, such as grids, logarithmic scaling, custom tooltips etc.

My work involves handling lots of waveforms and their spectrums, so I decided to extend PlotLines() with these features to display this data in a nice(r) way.

Usage

Instead of feeding all the parameters into plot function via its arguments, I decided that, with all the configurability, it would be cleaner to have a struct PlotConfig with all the neccessary stuff in it. See imgui_plot.h for its description.

Simple usecase:

ImGui::PlotConfig conf;
conf.values.xs = x_data; // this line is optional
conf.values.ys = y_data;
conf.values.count = data_count;
conf.scale.min = -1;
conf.scale.max = 1;
conf.tooltip.show = true;
conf.tooltip.format = "x=%.2f, y=%.2f";
conf.grid_x.show = true;
conf.grid_y.show = true;
conf.frame_size = ImVec2(400, 400);
conf.line_thickness = 2.f;

ImGui::Plot("plot", conf);

Selection example (gif above):

constexpr size_t buf_size = 512;
static float x_data[buf_size];
static float y_data1[buf_size];
static float y_data2[buf_size];
static float y_data3[buf_size];

void generate_data() {
    constexpr float sampling_freq = 44100;
    constexpr float freq = 500;
    for (size_t i = 0; i < buf_size; ++i) {
        const float t = i / sampling_freq;
        x_data[i] = t;
        const float arg = 2 * M_PI * freq * t;
        y_data1[i] = sin(arg);
        y_data2[i] = y_data1[i] * -0.6 + sin(2 * arg) * 0.4;
        y_data3[i] = y_data2[i] * -0.6 + sin(3 * arg) * 0.4;
    }
}

void draw_multi_plot() {
    static const float* y_data[] = { y_data1, y_data2, y_data3 };
    static ImU32 colors[3] = { ImColor(0, 255, 0), ImColor(255, 0, 0), ImColor(0, 0, 255) };
    static uint32_t selection_start = 0, selection_length = 0;

    ImGui::Begin("Example plot", nullptr, ImGuiWindowFlags_AlwaysAutoResize);
    // Draw first plot with multiple sources
    ImGui::PlotConfig conf;
    conf.values.xs = x_data;
    conf.values.count = buf_size;
    conf.values.ys_list = y_data; // use ys_list to draw several lines simultaneously
    conf.values.ys_count = 3;
    conf.values.colors = colors;
    conf.scale.min = -1;
    conf.scale.max = 1;
    conf.tooltip.show = true;
    conf.grid_x.show = true;
    conf.grid_x.size = 128;
    conf.grid_x.subticks = 4;
    conf.grid_y.show = true;
    conf.grid_y.size = 0.5f;
    conf.grid_y.subticks = 5;
    conf.selection.show = true;
    conf.selection.start = &selection_start;
    conf.selection.length = &selection_length;
    conf.frame_size = ImVec2(buf_size, 200);
    ImGui::Plot("plot1", conf);

    // Draw second plot with the selection
    // reset previous values
    conf.values.ys_list = nullptr;
    conf.selection.show = false;
    // set new ones
    conf.values.ys = y_data3;
    conf.values.offset = selection_start;
    conf.values.count = selection_length;
    conf.line_thickness = 2.f;
    ImGui::Plot("plot2", conf);

    ImGui::End();
}

Installation

Just copy include/imgui_plot.h and src/imgui_plot.cpp to where your imgui is, and it should work like that.

CMake

Alternatively, you can use FetchContent like this:

include(FetchContent)
FetchContent_Declare(
    imgui_plot
    GIT_REPOSITORY https://github.com/soulthreads/imgui-plot.git
    GIT_TAG v0.1.0
    EXCLUDE_FROM_ALL
)
FetchContent_GetProperties(imgui_plot)
if(NOT imgui_plot_POPULATED)
    FetchContent_Populate(imgui_plot)
    add_subdirectory(${imgui_plot_SOURCE_DIR} ${imgui_plot_BINARY_DIR})
endif()

and then just link imgui_plot into your application. If you have ImGui located not in {repo}/imgui you can set IMGUI_INCLUDE_DIR variable to the according value.

FAQ

How do I do x?

If something isn't obvious or your think my design is bad, please file away an issue, I'll take a look at it.

If you want to have some new feature, issues and PRs are welcome too.

You might also like...
A Flutter Web Plugin to display Text Widget as Html for SEO purpose
A Flutter Web Plugin to display Text Widget as Html for SEO purpose

SEO Renderer A flutter plugin (under development) to render text widgets as html elements for SEO purpose. Created specifically for issue https://gith

YouTube subscriber counter widget

YouTube subscriber counter My version of AlexGyver's project. My improvements Fix work with new youtube API Change subscribers displaying from 42000 t

A native textfield that can be used in place of Flutter's TextField widget.
A native textfield that can be used in place of Flutter's TextField widget.

Better Textfield A native textfield that can be used in place of Flutter's TextField widget. Demo demo.mp4 Here are some screenshots of the demo app:

Flutter real-time magnifying glass lens widget with Barrel/Pincushion distortion
Flutter real-time magnifying glass lens widget with Barrel/Pincushion distortion

MagnifyingGlass Flutter plugin Flutter real-time magnifying glass lens widget with Barrel/Pincushion distortion. Works on Android, iOS and desktop. Do

A Navigator 2.0 based Flutter widget that automatically splits the screen into two views based on available space
A Navigator 2.0 based Flutter widget that automatically splits the screen into two views based on available space

A Navigator 2.0 based Flutter widget that automatically splits the screen into two views based on available space

An improved sketch to cater for switch bounce, courtesy of Marko Pinteric
An improved sketch to cater for switch bounce, courtesy of Marko Pinteric

226 Better Rotary Encoder - no switch-bounce An improved sketch to cater for switch bounce, courtesy of Marko Pinteric (https://www.pinteric.com/mped.

Improved Fractions Calculator using structures, user input parsing, and dynamic operator switching

Improved Fractions Calculator Program Structure: Main File: Runs fnctions from various header files. IO.h Header file containing IO functions, Interfa

CSGO-P2C-Dumper is a process memory dumper aimed to target CS:GO internal cheats
CSGO-P2C-Dumper is a process memory dumper aimed to target CS:GO internal cheats

CSGO-P2C-Dumper is a process memory dumper aimed to target CS:GO internal cheats, while offering additional reversing aid.

waved is aimed at becoming a userspace driver for the reMarkable 2 E-Ink controller.

waved waved is aimed at becoming a userspace driver for the reMarkable 2 E-Ink controller. Disclaimer: This is still a prototype. It might damage your

Comments
  • Fix selection box rendering

    Fix selection box rendering

    When conf.skip_small_lines = true; and the data length is greater than the window size, the t_step is no longer valid to draw the selection. Using the step calculated from the actual data length to fix the issue.

    opened by v3c70r 1
  • Draggable plot lines?

    Draggable plot lines?

    Is it possible to drag plot lines to adjust an array of x,y values? I mean like clicking a point on the line and adjusting it up and down.

    If not, It would be awesome to add for devices such as a reflow oven or anything that needs a time and temp. or time and speed control like a spin coater. It could also be used to control a power supply output. So really a ton of uses for appliances or embedded devices.

    opened by excitedbox 0
  • Examples

    Examples

    Your project looks really great, builds fine and everything. Can you please include the examples which produced the screenshots as end to end examples? I'm not used to cmake or custom libraries or imgui for that matter, so there are a lot of hurtles for some of us.

    Also, you could consider adding imgui as a submodule so we can git clone --recurse-submodules https:// in one line. Anything to make initial setup go more smoothly for noobs.

    Thanks, Josh

    opened by josht000 2
Owner
Anton Lobashev
Anton Lobashev
A single-file, immediate-mode sequencer widget for C++17, Dear ImGui and EnTT

A single-file, immediate-mode sequencer widget for C++17, Dear ImGui and EnTT Table of Contents Overview Features Design Decisions Todo Open Questions

Alan Jefferson 194 Dec 16, 2022
imGuIZMO.quat is a ImGui widget: like a trackball it provides a way to rotate models, lights, or objects with mouse, and graphically visualize their position in space, also around any single axis (Shift/Ctrl/Alt/Super)

imGuIZMO.quat v3.0 imGuIZMO.quat is a ImGui widget: like a trackball it provides a way to rotate models, lights, or objects with mouse, and graphicall

Michele Morrone 276 Dec 28, 2022
A C++ header-only library for creating, displaying, iterating and manipulating dates

The ASAP date/time library for beautiful C++ code ASAP is a small, header-only date-time library for C++11 and beyond. It is heavily inspired by my gr

Leonardo Guilherme de Freitas 57 Dec 22, 2022
An embedded system for displaying current number of followers on bilibili. A reproduction of eInkBoard v1. 一个能显示哔哩哔哩账号实时粉丝数的嵌入式系统,eInkBoard v1 的复刻版。

eInkBoard v2 An embedded system for displaying current number of followers on bilibili. A reproduction of eInkBoard v1 (this page is in Chinese). 一个能显

Karbon Chen 4 Dec 6, 2021
Displaying @colorschemez tweets on 2.4" TFT display

colorschemez display This code takes the most recent tweet from the twitter account @colorschemez, and displays it onto a 2.4" TFT display. If you use

null 2 Dec 28, 2021
A drop-in entity editor for EnTT with Dear ImGui

imgui_entt_entity_editor A drop-in, single-file entity editor for EnTT, with ImGui as graphical backend. demo-code (live) Editor Editor with Entiy-Lis

Erik Scholz 151 Jan 2, 2023
A small, dependency-free node editor extension for dear imgui.

imnodes A small, dependency-free node editor extension for dear imgui. Features: Create nodes, links, and pins in an immediate-mode style Single heade

Johann Muszynski 1.3k Dec 28, 2022
Plot airfield from a file containing the list of airfield of Germany and their position (latitude/longitude)

Plot aerodromes from a file containing the list of aerodromes of Germany and their position (latitude/longitude)

Nanfack Steve Ulrich 2 Feb 6, 2022
PlotFS is a fuse filesystem for efficient storage of Chia plot files.

PlotFS PlotFS is a fuse filesystem for efficient storage of Chia plot files. PlotFS is not a traditional filesystem. It is mounted read only for farmi

Matthew Szatmary 49 Nov 8, 2022
api & source menu base import imgui from imgui-js

onetap v4 crack https://discord.gg/AXCtxVH4PB people asking me for otv4 source "bin2h" (meaning binary to hex) large hexadecimal array deleted all the

h4xr0x#1337 9 Sep 6, 2022