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.

Issues
  • 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 180 Jun 13, 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 254 Jun 12, 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 53 Jun 21, 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 140 Jun 22, 2022
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.1k Jun 24, 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 44 Jun 20, 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 8 Jun 25, 2022
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.

Ralph Bacon 14 Jun 18, 2022
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

Colin McCormack 1 Dec 5, 2021
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.

null 20 May 26, 2022
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

Mattéo Delabre 31 Jun 17, 2022
Improved version of real-time physics engine that couples FEM-based deformables and rigid body dynamics

Enhanced version of coupled FEM and constrained rigid body simulation Description This little playground aimed to test our Conjugate Gradients based M

Andrey Voroshilov 25 Apr 11, 2022
OpenGL Template Engine - a C++ OpenGL graphics engine which aimed to be a simple startup template for 3D OpenGL projects.

OpenGL Template Engine is a C++ OpenGL graphics engine which aimed to be a simple startup template for 3D OpenGL projects. This is the template I personally use for my own projects and provides me with the general OpenGL 3D render setup with model import and UI.

Marcus Nesse Madland 2 May 16, 2022
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

Sahdeep Singh 88 Jun 17, 2022
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

null 1 Oct 26, 2021
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:

Abhay Maurya 2 Jan 23, 2022