Knob widget?

[sonoro1234]

Hi,

Is there any plan to do a rotary knob widget?

Thanks

[ocornut]

I would like to add an official one but there's no immediate short-term plan. It's pretty trivial to create a custom one using the imgui_internal.h api tho.

[sonoro1234]

Ohh, I thought I could do it with custom drawing and then IsItemActive to capture mouse but I see that Dummy item always returns false.
Is there any sample using internal api?
Is there any better way to use from a luajit binding?

[ocornut]

You may use InvisibleButton() Dummy() doesn't interact (most interactions need an id). Browsing code is unfortunately the easiest way to get more detailed example if you want to rely on internal api, should be doable with just InvisibleButton() as long as you don't mind the axis-aligned hit check.

[sonoro1234]

This is my luajit implementation of a knob with imgui (cimgui dialect)
Just wondering what would be the sensible way of getting colors, sz and spacing.
Another wonder is the InvisibleButton label (Is it relevant?)

Being able to do a widget with a script languaje makes me a complete imgui fan!!!

	 function knob(value_p,minv,maxv)
		
		local p = ig.GetCursorScreenPos();
        local col32 = imgui.igColorConvertFloat4ToU32(ig.ImVec4(1, 1, 0.4, 1));
		local col32line = imgui.igColorConvertFloat4ToU32(ig.ImVec4(1, 0, 0, 1));
		local col32text = imgui.igColorConvertFloat4ToU32(ig.ImVec4(0, 0, 0, 1));
		
		local sz = 36
		local x, y, spacing = p.x + 4.0,  p.y + 4.0, 8.0;
		
		local center = ig.ImVec2(x+sz*0.5, y+sz*0.5)
		local radio =  sz*0.5
		local val1 = (value_p[0] - minv)/(maxv - minv)
		local textval = string.format("%04.1f",value_p[0])
		local texsize = ig.CalcTextSize(textval, nil, true) 
		local textpos = ig.ImVec2(center.x - texsize.x*0.5, center.y - texsize.y*0.5)
		local gamma = math.pi/4 -- 0 value in knob
		local alpha = (math.pi-gamma)*val1*2+gamma
		
		local x2 = -math.sin(alpha)*radio + center.x
		local y2 = math.cos(alpha)*radio + center.y
		
		local draw_list = imgui.igGetWindowDrawList();

		imgui.ImDrawList_AddCircleFilled(draw_list, center, radio, col32, 32);
		imgui.ImDrawList_AddLine(draw_list, center, ig.ImVec2(x2, y2), col32line, 1);
		imgui.ImDrawList_AddText(draw_list, textpos, col32text, textval, nil);
		imgui.igInvisibleButton("s",ig.ImVec2((sz+spacing), (sz+spacing)))
		
		local touched = false
		if imgui.igIsItemActive() then 
			touched = true
			local mp = imgui.igGetIO().MousePos
			alpha = math.atan2(mp.x - center.x, center.y - mp.y) + math.pi
			alpha = math.max(gamma,math.min(2*math.pi-gamma,alpha))
			local value=0.5*(alpha-gamma)/(math.pi-gamma)
			value_p[0] = value*(maxv - minv) + minv
		end
		
		return touched
	end

[ocornut]

Cool :)
Please post a picture too!

The string is necessary to uniquely identify the widget using the id-stack system (read FAQ about id if unsure). Namely, it is used for the button press-hold-release mechanism.

For the color you can use ImGui::GetColorU32(ImGuiCol_Text) which will give you the current style color. Maybe that function isn't supported in cimgui or your Lua wrapper if you didn't find it.

I am not exactly sure what your spacing is exactly, but it may be style.FramePadding.x.

Being able to do a widget with a script languaje makes me a complete imgui fan!!!

It gets really cool once you master those lower-level bits. The only issue I can think of here is that a language like Lua may not scale very well in term of performance, if you have hundreds of widgets you might want to implement in in C++ and have a single call to a native function?

[ocornut]

I wrote a little demo widget using the public API.
It's not great really but better than nothing. The subtle problem with knobs is that there are five millions ways to make a knob. Someone could spend a week and write an entire knob library (imgui_knobs.h anyone?). Actually that would be a nice thing to do..

This is also exhibiting some of the issues with the public API which hasn't been used so much for custom widgets. There's no current public api to trivially do text clipping and alignment whereas the internal api has those. Hoping to improve the situation later but I'm still very unhappy with the internal text functions (they word but their api isn't fit for public api).

// Implementing a simple custom widget using the public API.
// You may also use the <imgui_internal.h> API to get raw access to more data/helpers, however the internal API isn't guaranteed to be forward compatible.
// FIXME: Need at least proper label centering + clipping (internal functions RenderTextClipped provides both but api is flaky/temporary)
static bool MyKnob(const char* label, float* p_value, float v_min, float v_max)
{
    ImGuiIO& io = ImGui::GetIO();
    ImGuiStyle& style = ImGui::GetStyle();

    float radius_outer = 20.0f;
    ImVec2 pos = ImGui::GetCursorScreenPos();
    ImVec2 center = ImVec2(pos.x + radius_outer, pos.y + radius_outer);
    float line_height = ImGui::GetTextLineHeight();
    ImDrawList* draw_list = ImGui::GetWindowDrawList();

    float ANGLE_MIN = 3.141592f * 0.75f;
    float ANGLE_MAX = 3.141592f * 2.25f;

    ImGui::InvisibleButton(label, ImVec2(radius_outer*2, radius_outer*2 + line_height + style.ItemInnerSpacing.y));
    bool value_changed = false;
    bool is_active = ImGui::IsItemActive();
    bool is_hovered = ImGui::IsItemActive();
    if (is_active && io.MouseDelta.x != 0.0f)
    {
        float step = (v_max - v_min) / 200.0f;
        *p_value += io.MouseDelta.x * step;
        if (*p_value < v_min) *p_value = v_min;
        if (*p_value > v_max) *p_value = v_max;
        value_changed = true;
    }

    float t = (*p_value - v_min) / (v_max - v_min);
    float angle = ANGLE_MIN + (ANGLE_MAX - ANGLE_MIN) * t;
    float angle_cos = cosf(angle), angle_sin = sinf(angle);
    float radius_inner = radius_outer*0.40f;
    draw_list->AddCircleFilled(center, radius_outer, ImGui::GetColorU32(ImGuiCol_FrameBg), 16);
    draw_list->AddLine(ImVec2(center.x + angle_cos*radius_inner, center.y + angle_sin*radius_inner), ImVec2(center.x + angle_cos*(radius_outer-2), center.y + angle_sin*(radius_outer-2)), ImGui::GetColorU32(ImGuiCol_SliderGrabActive), 2.0f);
    draw_list->AddCircleFilled(center, radius_inner, ImGui::GetColorU32(is_active ? ImGuiCol_FrameBgActive : is_hovered ? ImGuiCol_FrameBgHovered : ImGuiCol_FrameBg), 16);
    draw_list->AddText(ImVec2(pos.x, pos.y + radius_outer * 2 + style.ItemInnerSpacing.y), ImGui::GetColorU32(ImGuiCol_Text), label);

    if (is_active || is_hovered)
    {
        ImGui::SetNextWindowPos(ImVec2(pos.x - style.WindowPadding.x, pos.y - line_height - style.ItemInnerSpacing.y - style.WindowPadding.y));
        ImGui::BeginTooltip();
        ImGui::Text("%.3f", *p_value);
        ImGui::EndTooltip();
    }

    return value_changed;
}

[sonoro1234]

Thanks for code, my new task will be testing performace of luajit vs a single call to MyKnob.

[ocornut]

(It is still totally overkill to use anti-aliased triangles to draw circles there, we're using like a hundred triangles there, I have a task to rasterize circles into the texture atlas to avoid that.)

[sonoro1234]

I have tested luajit versus C++ implementation of knob
I made a window with 100 knobs and compared FPS showing and hiding the window
luajit 200/260
c++ 230/260

not so bad for luajit?

c++ code

bool Knob(const char* label, float* value_p, float minv, float maxv)
{	
	ImGuiStyle& style = ImGui::GetStyle();
	float line_height = ImGui::GetTextLineHeight();
	
	ImVec2 p = ImGui::GetCursorScreenPos();
	float sz = 36.0f;
	float radio =  sz*0.5f;
	ImVec2 center = ImVec2(p.x + radio, p.y + radio);
	float val1 = (value_p[0] - minv)/(maxv - minv);
	char textval[32];
	ImFormatString(textval, IM_ARRAYSIZE(textval), "%04.1f", value_p[0]);
	
	ImVec2 textpos = p;
	float gamma = M_PI/4.0f;//0 value in knob
	float alpha = (M_PI-gamma)*val1*2.0f+gamma;
	
	float x2 = -sinf(alpha)*radio + center.x;
	float y2 = cosf(alpha)*radio + center.y;
	
	ImGui::InvisibleButton(label,ImVec2(sz, sz + line_height + style.ItemInnerSpacing.y));

	bool is_active = ImGui::IsItemActive();
    bool is_hovered = ImGui::IsItemHovered();
	bool touched = false;
	
	if (is_active)
	{		
		touched = true;
		ImVec2 mp = ImGui::GetIO().MousePos;
		alpha = atan2f(mp.x - center.x, center.y - mp.y) + M_PI;
		alpha = ImMax(gamma,ImMin(2.0f*M_PI-gamma,alpha));
		float value = 0.5f*(alpha-gamma)/(M_PI-gamma);
		value_p[0] = value*(maxv - minv) + minv;
	}
	
	ImU32 col32 = ImGui::GetColorU32(is_active ? ImGuiCol_FrameBgActive : is_hovered ? ImGuiCol_FrameBgHovered : ImGuiCol_FrameBg);
	ImU32 col32line = ImGui::GetColorU32(ImGuiCol_SliderGrabActive); 
	ImU32 col32text = ImGui::GetColorU32(ImGuiCol_Text);
	ImDrawList* draw_list = ImGui::GetWindowDrawList();
	draw_list->AddCircleFilled(center, radio, col32, 16);
	draw_list->AddLine(center, ImVec2(x2, y2), col32line, 1);
	draw_list->AddText(textpos, col32text, textval);
	draw_list->AddText(ImVec2(p.x, p.y + sz + style.ItemInnerSpacing.y), col32text, label);
	
	return touched;
}

[sonoro1234]

A very strange observation is that if this window is open on program start, FPS go as low as 100 and we get the expected 260 after hiding, showing and hiding the window. If window starts hidden this does not happen.
Any idea?

[ocornut]

luajit vs c++ looks quite ok here!

On the number themselves, assuming that you are early returning with Begin() returns false,
(1000/260) - (1000/230) = ~0.5 ms in my book that's a pretty bad/slow number for 100 knobs.

• Is your build optimized. ?
• The circle are currently quite heavy (until a further optimisation baking them in texture). Biggest win will happen when I add this much desired change.
• Drawlist doesn't clip at all so it is advised widgets to do coarse culling. A normal widget would test for clipping and not render or interact at all when clipping (see ItemSize ItemAdd calls in internal code). I should allow those patterns to be expressed better with the public API.

On your mystery perf difference,

• Are you testing the return value of Begin() to avoid rendering your window contents at all ?
  ImGui still does clipping but it is faster is you skip everything all together.
  Now, there could be a problem where the window size leads to different coarse clipping. Maybe using the Metrics to inspect the Window data while it is being closed before and after you can find some differences.

Thanks for querying, that sort of thing really ought to be improved!

[sonoro1234]

Hello Omar,

Now I am making a dial (values represent angle) and I need current mouse_pos but also previous mouse pos.
As MousePosPrev is overwritten in NewFrame (This could be avoided doing it at the end of the frame , at the end of Render perhaps ) I have to find it with MouseDelta so that Mouseprevious = MousePos - MouseDelta.

I am worried because it is part of internal and you say "Forward compatibility not guaranteed!"

[ocornut]

Good point, thanks for asking. No worry about those two. I think they are here to stay and I expect lots of code has been relying on them. I may move them elsewhere in the function to clarify.

[ocornut]

I think I will also make it that the publicly exposed MousePosPrev is set to the expected value to be used. But for now MouseDelta works.