Home
Softono
DearWidgets

DearWidgets

Open source C++
GitHub
320
Stars
24
Forks
1
Issues
4
Watchers
1 week
Last Commit
Web Components & Widgets

About DearWidgets

DearWidgets

Platforms

Web Self-hosted

Languages

C++

Links

Source Code
s
Published by
soufianekhiat
Visit View Profile

README.md

View on GitHub

DearWidgets

DearWidgets aim to produce useful Widgets particulary useful on Graphics (Image Processing, 3D, ...). DearWidgets aim to provide helper to simplify creation of custom widgets.

DearWidgets is 6 collections of helpers:

  • DrawLists
  • Interactions
  • Widgets
  • Math Helpers
  • 'Shape' (2D Geometry)
  • Helpers to have type independent "Scalar"

Dear Widgets is a collection of help to simplify the develoment of application.

DearWidgets add some helpers which allow us to create Custom Widget independently of the try. A Scalar is stored as an ImU64, which is a memcpy of any type supported by ImGui {Im{U|S}{8, 16, 32, 64} | bool | float | double}.

  • bool IsNegativeScalar
  • void EqualScalar
  • float ScalarToFloat
  • ImU64 FloatToScalar
  • ImU64 AddScalar
  • ImU64 SubScalar
  • ImU64 MulScalar
  • ImU64 DivScalar
  • ImU64 Normalize01
  • ...

DearWidgets is using ImPlatform.

Incentivise development:

Become a Patron

https://www.patreon.com/SoufianeKHIAT

PR & Discussion are open.

What's new?

More linked to DearImGui styles:

Interactions

  • Is Hovered

Convex

bool IsPolyConvexContains( ImVec2* pts, int pts_count, ImVec2 p );
bool IsMouseHoveringPolyConvex( const ImVec2& r_min, const ImVec2& r_max, ImVec2* pts, int pts_count, bool clip = true );
bool ItemHoverablePolyConvex( const ImRect& bb, ImGuiID id, ImVec2* pts, int pts_count, ImGuiItemFlags item_flags );
IsHoveredConvex

Concave

bool IsPolyConcaveContains( ImVec2* pts, int pts_count, ImVec2 p );
bool IsMouseHoveringPolyConcave( const ImVec2& r_min, const ImVec2& r_max, ImVec2* pts, int pts_count, bool clip = true );
bool ItemHoverablePolyConcave( const ImRect& bb, ImGuiID id, ImVec2* pts, int pts_count, ImGuiItemFlags item_flags );
IsHoveredConcave

With Hole (warning rely on 'thick' scanline)

bool IsPolyWithHoleContains( ImVec2* pts, int pts_count, ImVec2 p, ImRect* p_bb = NULL, int gap = 1, int strokeWidth = 1 );
bool IsMouseHoveringPolyWithHole( const ImVec2& r_min, const ImVec2& r_max, ImVec2* pts, int pts_count, bool clip = true );
bool ItemHoverablePolyWithHole( const ImRect& bb, ImGuiID id, ImVec2* pts, int pts_count, ImGuiItemFlags item_flags );
IsHoveredHole

Window

  • Background
    void SetCurrentWindowBackgroundImage( ImTextureID id, ImVec2 imgSize, bool fixedSize = false, ImU32 col = IM_COL32( 255, 255, 255, 255 ) );
    IsHoveredHole

DrawList

  • Triangle Pointer

Used internally for HueSelector

void DrawTriangleCursor( ImDrawList* pDrawList, ImVec2 targetPoint, float angle, float size, float thickness, ImU32 col );
void DrawTriangleCursorFilled( ImDrawList* pDrawList, ImVec2 targetPoint, float angle, float size, ImU32 col );
triangle_pointer

  • Signet Pointer

    void DrawSignetCursor( ImDrawList* pDrawList, ImVec2 targetPoint, float width, float height, float height_ratio, float align01, float angle, float thickness, ImU32 col );
void DrawSignetFilledCursor( ImDrawList* pDrawList, ImVec2 targetPoint, float width, float height, float height_ratio, float align01, float angle, ImU32 col );
    signet_pointer

  • Hue Band

  • Luminance Band

  • Saturation Band

Used Internally to implement HueSelector.

void DrawHueBand( ImDrawList* pDrawList, ImVec2 const vpos, ImVec2 const size, int division, float alpha, float gamma, float offset );
void DrawHueBand( ImDrawList* pDrawList, ImVec2 const vpos, ImVec2 const size, int division, float colorStartRGB[ 3 ], float alpha, float gamma );
void DrawLumianceBand( ImDrawList* pDrawList, ImVec2 const vpos, ImVec2 const size, int division, ImVec4 const& color, float gamma );
void DrawSaturationBand( ImDrawList* pDrawList, ImVec2 const vpos, ImVec2 const size, int division, ImVec4 const& color, float gamma );
color_band
  • Graduations

Linear Line

void DrawLinearLineGraduation( ImDrawList* drawlist, ImVec2 start, ImVec2 end, float mainLineThickness, ImU32 mainCol,
int division0, float height0, float thickness0, float angle0, ImU32 col0,
int division1 = -1, float height1 = -1.0f, float thickness1 = -1.0f, float angle1 = -1.0f, ImU32 col1 = 0u,
int division2 = -1, float height2 = -1.0f, float thickness2 = -1.0f, float angle2 = -1.0f, ImU32 col2 = 0u );
LinearLineGraduation

Linear Circular

void DrawLinearCircularGraduation( ImDrawList* drawlist, ImVec2 center, float radius, float start_angle, float end_angle, int num_segments,
float mainLineThickness, ImU32 mainCol,
int division0, float height0, float thickness0, float angle0, ImU32 col0,
int division1 = -1, float height1 = -1.0f, float thickness1 = -1.0f, float angle1 = -1.0f, ImU32 col1 = 0u,
int division2 = -1, float height2 = -1.0f, float thickness2 = -1.0f, float angle2 = -1.0f, ImU32 col2 = 0u );
LinearCircularGraduation

Log Line

void DrawLogLineGraduation( ImDrawList* drawlist, ImVec2 start, ImVec2 end,
float mainLineThickness, ImU32 mainCol,
int division0, float height0, float thickness0, float angle0, ImU32 col0,
int division1 = -1, float height1 = -1.0f, float thickness1 = -1.0f, float angle1 = -1.0f, ImU32 col1 = 0u );
LogLinearGraduation

Log Circular

void DrawLogCircularGraduation( ImDrawList* drawlist, ImVec2 center, float radius, float start_angle, float end_angle, int num_segments,
float mainLineThickness, ImU32 mainCol,
int division0, float height0, float thickness0, float angle0, ImU32 col0,
int division1 = -1, float height1 = -1.0f, float thickness1 = -1.0f, float angle1 = -1.0f, ImU32 col1 = 0u );
LogCircularGraduation
  • Shape

Tesselation:

#ifdef DEAR_WIDGETS_TESSELATION
    void    ShapeTesselationUniform( ImShape& shape );
#endif
Shape 
void DrawImageShape( ImDrawList* pDrawList, ImTextureID tex, ImShape& shape );

Convex

ImageConvex

Concave

ImageConcave

** Gradients

Linear

void    ShapeSRGBLinearGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeOkLabLinearGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeOkLchLinearGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeLinearSRGBLinearGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeHSVLinearGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
LinearGradient GradientColorSpace

Radial

void    ShapeSRGBRadialGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeOkLabRadialGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeOkLchRadialGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeLinearSRGBRadialGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeHSVRadialGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
CircularGraduation

Diamond

void    ShapeSRGBDiamondGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeOkLabDiamondGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeOkLchDiamondGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeLinearSRGBDiamondGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
void    ShapeHSVDiamondGradient( ImShape& shape, ImVec2 uv_start, ImVec2 uv_end, ImU32 col0, ImU32 col1 );
DiamondGradient
  • Color Ring

TODO: Ring HueSelector

TODO: Add support for 2D (angle, radius)

void DrawColorRing( ImDrawList* pDrawList, ImVec2 const curPos, ImVec2 const size, float thickness_, ImColor1DCallback func, void* pUserData, int division, float colorOffset, bool bIsBilinear );
DrawColorRing
  • Custom Color Ring
DrawColorRing
  • Chromatic Plot{Bilinear, Nearest}
    • Chromatic Point
    • Chromatic Line
void DrawChromaticityPlot( ... );
chromaticityplot_0 chromaticityplot_1 
void DrawChromaticityPoints( ... );
void DrawChromaticityLines( ... );
chromaticityline_0
  • DrawColorDensityPlot (aka ShaderToy)

Use carefully that can have impact on your performances for HighRes canvas or/and expensive lambda.

void DrawProceduralColor2DNearest( ImDrawList* pDrawList, ImColor2DCallback func, void* pUserData, float minX, float maxX, float minY, float maxY, ImVec2 position, ImVec2 size, int resolutionX, int resolutionY );
void DrawProceduralColor2DBilinear( ImDrawList* pDrawList, ImColor2DCallback func, void* pUserData, float minX, float maxX, float minY, float maxY, ImVec2 position, ImVec2 size, int resolutionX, int resolutionY );
DrawProceduralColor2DBilinear DrawProceduralColor2DBilinear

Widgets

  • Button

Convex

bool ButtonBehaviorConvex( ImVec2* pts, int pts_count, ImGuiID id, bool* out_hovered, bool* out_held, ImGuiButtonFlags flags );
ButtonConvex

Concave

bool ButtonBehaviorConcave( ImVec2* pts, int pts_count, ImGuiID id, bool* out_hovered, bool* out_held, ImGuiButtonFlags flags );
ButtonBehaviorConcave

With Hole

bool ButtonBehaviorWithHole( ImVec2* pts, int pts_count, ImGuiID id, bool* out_hovered, bool* out_held, ImGuiButtonFlags flags );
ButtonHole
  • Hue Selector
bool HueSelector( char const* label, float hueHeight, float cursorHeight, float* hueCenter, float* hueWidth, float* featherLeft, float* featherRight, int division = 32, float alpha = 1.0f, float hideHueAlpha = 0.75f, float offset = 0.0f );
HueSelector
  • Slider 2D Float A version for Slider2DScaler is available for (Im{S|U}{8,16,32,64}, Float and Double)
bool Slider2DScalar( char const* pLabel, ImGuiDataType data_type, void* pValueX, void* pValueY, void* p_minX, void* p_maxX, void* p_minY, void* p_maxY );
bool Slider2DFloat( char const* pLabel, float* pValueX, float* pValueY, float v_minX, float v_maxX, float v_minY, float v_maxY );
Slider2DFloat
  • Slider 2D Int
bool Slider2DInt( char const* pLabel, int* pValueX, void* pValueY, int v_minX, int v_maxX, int v_minY, int v_maxY );
Slider2DInt
  • SliderN
    bool SliderNScalar( char const* label, ImGuiDataType data_type, void* ordered_value, int value_count, void* p_min, void* p_max, float cursor_width, bool show_hover_by_region );
bool SliderNFloat( char const* label, ImGuiDataType data_type, float* ordered_value, int value_count, float v_min, float v_max, float cursor_width, bool show_hover_by_region );
bool SliderNInt( char const* label, ImGuiDataType data_type, int* ordered_value, int value_count, int v_min, int v_max, float cursor_width, bool show_hover_by_region );

Performance Considerations

Notice some DrawList are purely calling DrawList from Dear ImGui. So based on your parameters a non-negligeable impact on performance can be notice. Do not put an unreasonable resolution.

The Gradient rely on the vertex blending with the default shader. So to have a smooth gradient it may require lot of vertices via tesselation, that may impact performance and limit of vertices and imply a use of ImDrawIdx in 32 bits.

Constrains

C++ features (optionaly) used internally:

  • std::map<T, K> used for ImTesselator can be enabled with #define DEAR_WIDGETS_TESSELATION

Legacy

Removed feature:

  • AnalyticalPlotEx
  • AnalyticalPlot Just explode the number of vertices
  • CenterNextItem
  • DragFloatLog TBD
  • RangeSelect2D didn't find a proper control
  • Slider3D no real use case

Removed C++ feature dependencies:

  • template
  • constexpr
  • if constexpr
  • Lambda from template
  • auto
  • std::vector<float>, std::vector<bool> for isoline

Contributor

Future feature:

  • Add more color space for gradient
  • Hue Ring select
  • Slider2DWithRingConstraint // Only only a circular region on the 2D selector
  • InputFloatUnit cf. History of Dear Widgets
  • Add Shape from SDF with ImShader cd ImPlatform (only if IM_SUPPORT_CUSTOM_SHADER)
  • Guizmo2D{Translate, Rotate, Scale}
  • Gauge