Scroll down a list

Dazzid_of · February 20, 2018, 12:52pm

Hi
I’m wondering what is the easiest way in OF to scroll down/up a “scoring” list which have name and points.
best

SebastianSobotka · February 20, 2018, 1:56pm

I would have used a ListBox or Combo from the ofxImGui addon which can take vectorstd::string as a parameter.

// ofApp.h
vector<std::string> scores;
		int indexScore;

// ofApp.cpp setup()
for (int i = 0; i < 100; i++) {
	scores.emplace_back("Score - " + ofToString(i));
}

// draw()
    ImGui::Begin("Scores");
	ImGui::ListBox("##scores", &indexScore, scores); // ## no label
	ImGui::End();

Dazzid_of · February 20, 2018, 10:12pm

very nice library!
Actually I’m using just this
for (int n = 0; n < 50; n++)
ImGui::TextColored(clear_color, “%04d: Some text”);
ImGui::EndChild();

SebastianSobotka · February 21, 2018, 12:01am

Thanks. I checked it and should be something like this (for others). Using Listbox or combo has one advantage. It’s selectable.

 for (int n = 0; n < 50; n++) {
	ImGui::BeginChild("##childText");
	ImGui::TextColored(ImVec4(255, 0, 0, 255), "%04d: Some text", n);
    ImGui::EndChild();
}

Dazzid_of · February 21, 2018, 11:42pm

Nice,
Actually listbox seems to be the best way, but how to fix its size and pos?
I was doing something like this, but don’t find the listbox params

gui.begin();
bool show_another_window = true;
bool ImGuiWindowFlags_NoTitleBar = NULL;
ImGuiWindowFlags window_flags = ImGuiWindowFlags_NoTitleBar;

ImGui::SetNextWindowSize(ofVec2f(800,400), window_flags);
ImGui::SetNextWindowPos(ofVec2f(10,10));
ImGui::SetWindowSize(ofVec2f(500,500), window_flags);
ImGui::SetNextWindowSizeConstraints(ofVec2f(800,600), ofVec2f(800,600));
ImGui::SetNextWindowCollapsed(false);


colors[ImGuiCol_WindowBg]               = ImVec4(0.05f, 0.05f, 0.05f, 0.33f);
colors[ImGuiCol_ChildBg]                = ImVec4(0.20f, 0.20f, 0.20f, 0.00f);
colors[ImGuiCol_TitleBg]                = ImVec4(0.00f, 0.00f, 0.00f, 0.00f);
colors[ImGuiCol_TitleBgActive]          = ImVec4(0.0f, 0.77f, 0.99f, 1.00f);
colors[ImGuiCol_TitleBgCollapsed]       = ImVec4(0.20f, 0.22f, 0.21f, 0.19f);
colors[ImGuiCol_TitleBgActive]          = ImVec4(0.22f, 0.22f, 0.22f, 0.1f);
colors[ImGuiCol_ScrollbarGrab]          = ImVec4(0.0f, 0.77f, 0.99f, 0.66f);
colors[ImGuiCol_ScrollbarGrabHovered]   = ImVec4(0.0f, 0.77f, 0.99f, 1.00f);
colors[ImGuiCol_ScrollbarGrabHovered]   = ImVec4(0.0f, 0.77f, 0.99f, 1.00f);
colors[ImGuiCol_ScrollbarGrabActive]    = ImVec4(0.2f, 0.77f, 0.99f, 1.00f);
colors[ImGuiCol_TitleBg]                = ImVec4(0.01f, 0.01f, 0.01f, 1.00f);

ImGui::Begin("RANKING");
ImGui::SetWindowFontScale(1.0f);

ImGui::GetStyle().ScrollbarSize = 25.0f;
ImGui::GetStyle().FrameRounding = 2.0f;
ImGui::GetStyle().ScrollbarRounding = 20.0f;
ImGui::GetStyle().WindowTitleAlign = ofVec2f(0.5f, 0.5f);
ImGui::ListBox("##scores", &indexScore, scores); // ## no label
/*
for (int i = 0; i < scores.size(); i++){
    string str = scores.at(i);
    const char* pc_str = str.c_str();
    ImGui::TextColored(clear_color, pc_str);
}*/
ImGui::LogToClipboard();
ImGui::LogToFile();
ImGui::LogToTTY();
ImGui::End();
gui.end();

SebastianSobotka · February 22, 2018, 12:50am

You can set a width of any item using:

ImGui::PushItemWidth(500);
ImGui::ListBox("##scores", &indexScore, scores); // ## no label
// you need to "close it" by PopItemWidth
ImGui::PopItemWidth();

You can set a lot of style properties using:

// globally
ImGuiStyle* style = &ImGui::GetStyle();
style->Colors[ImGuiCol_FrameBg] = ImVec4(color, alpha);
style->Colors[ImGuiCol_Text] = ImVec4(color, alpha);

// for item it should be done using
ImGui::PushStyleColor(ImGuiCol_FrameBg, ImVec4.... )
// item
// needs to be closed
ImGui::PopStyleColor()

Here is a full list of ImGuiCol:

// Enumeration for PushStyleColor() / PopStyleColor()
enum ImGuiCol_
{
    ImGuiCol_Text,
    ImGuiCol_TextDisabled,
    ImGuiCol_WindowBg,              // Background of normal windows
    ImGuiCol_ChildBg,               // Background of child windows
    ImGuiCol_PopupBg,               // Background of popups, menus, tooltips windows
    ImGuiCol_Border,
    ImGuiCol_BorderShadow,
    ImGuiCol_FrameBg,               // Background of checkbox, radio button, plot, slider, text input
    ImGuiCol_FrameBgHovered,
    ImGuiCol_FrameBgActive,
    ImGuiCol_TitleBg,
    ImGuiCol_TitleBgActive,
    ImGuiCol_TitleBgCollapsed,
    ImGuiCol_MenuBarBg,
    ImGuiCol_ScrollbarBg,
    ImGuiCol_ScrollbarGrab,
    ImGuiCol_ScrollbarGrabHovered,
    ImGuiCol_ScrollbarGrabActive,
    ImGuiCol_CheckMark,
    ImGuiCol_SliderGrab,
    ImGuiCol_SliderGrabActive,
    ImGuiCol_Button,
    ImGuiCol_ButtonHovered,
    ImGuiCol_ButtonActive,
    ImGuiCol_Header,
    ImGuiCol_HeaderHovered,
    ImGuiCol_HeaderActive,
    ImGuiCol_Separator,
    ImGuiCol_SeparatorHovered,
    ImGuiCol_SeparatorActive,
    ImGuiCol_ResizeGrip,
    ImGuiCol_ResizeGripHovered,
    ImGuiCol_ResizeGripActive,
    ImGuiCol_CloseButton,
    ImGuiCol_CloseButtonHovered,
    ImGuiCol_CloseButtonActive,
    ImGuiCol_PlotLines,
    ImGuiCol_PlotLinesHovered,
    ImGuiCol_PlotHistogram,
    ImGuiCol_PlotHistogramHovered,
    ImGuiCol_TextSelectedBg,
    ImGuiCol_ModalWindowDarkening,  // darken entire screen when a modal window is active
    ImGuiCol_DragDropTarget,
    ImGuiCol_COUNT

You can set some other properties using:

ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(x, y));
ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(x, y));
ImGui::ListBox("##scores", &indexScore, scores); // ## no label
// you need to "close it" by PopStyleVar(nr_of_properties)
ImGui::PopStyleVar(2);

Here is a list of all properties:

// Enumeration for PushStyleVar() / PopStyleVar() to temporarily modify the ImGuiStyle structure.
// NB: the enum only refers to fields of ImGuiStyle which makes sense to be pushed/popped inside UI code. During initialization, feel free to just poke into ImGuiStyle directly.
// NB: if changing this enum, you need to update the associated internal table GStyleVarInfo[] accordingly. This is where we link enum values to members offset/type.
enum ImGuiStyleVar_
{
    // Enum name ......................// Member in ImGuiStyle structure (see ImGuiStyle for descriptions)
    ImGuiStyleVar_Alpha,               // float     Alpha
    ImGuiStyleVar_WindowPadding,       // ImVec2    WindowPadding
    ImGuiStyleVar_WindowRounding,      // float     WindowRounding
    ImGuiStyleVar_WindowBorderSize,    // float     WindowBorderSize
    ImGuiStyleVar_WindowMinSize,       // ImVec2    WindowMinSize
    ImGuiStyleVar_ChildRounding,       // float     ChildRounding
    ImGuiStyleVar_ChildBorderSize,     // float     ChildBorderSize
    ImGuiStyleVar_PopupRounding,       // float     PopupRounding
    ImGuiStyleVar_PopupBorderSize,     // float     PopupBorderSize
    ImGuiStyleVar_FramePadding,        // ImVec2    FramePadding
    ImGuiStyleVar_FrameRounding,       // float     FrameRounding
    ImGuiStyleVar_FrameBorderSize,     // float     FrameBorderSize
    ImGuiStyleVar_ItemSpacing,         // ImVec2    ItemSpacing
    ImGuiStyleVar_ItemInnerSpacing,    // ImVec2    ItemInnerSpacing
    ImGuiStyleVar_IndentSpacing,       // float     IndentSpacing
    ImGuiStyleVar_GrabMinSize,         // float     GrabMinSize
    ImGuiStyleVar_ButtonTextAlign,     // ImVec2    ButtonTextAlign
    ImGuiStyleVar_Count_

Position of Item:

ImGui::SetCursorPos(ImVec2(x, y));
ImGui::ListBox("##scores", &indexScore, scores); // ## no label

Dazzid_of · February 22, 2018, 9:02am

Awesome!
And the property to hide the title, and no collapse, no close those on windows properties?
Thanks!

SebastianSobotka · February 22, 2018, 10:31am

You have to set some flags (winFlags). You can set the alpha window to 0 and make window transparency.

	ImGui::PushStyleColor(ImGuiCol_WindowBg, ImVec4(0, 0, 0, 0.0));

	ImGuiWindowFlags winFlags =
		ImGuiWindowFlags_NoMove |
		ImGuiWindowFlags_NoResize |
		ImGuiWindowFlags_NoCollapse |
		ImGuiWindowFlags_NoSavedSettings |
		ImGuiWindowFlags_AlwaysAutoResize |
		ImGuiWindowFlags_NoTitleBar;

	ImGui::SetNextWindowPos(ImVec2(10, 10));
	ImGui::Begin("RANKING", (bool*)1, winFlags);

    // imgui items

    ImGui::PopStyleColor();

pxt · June 13, 2020, 10:01pm

hi! i dont know how you use a list box with a vectorstd::string> since the constructor of listBox is using *char

bool ImGui::ListBox(const char* label, int* current_item, const char* const items[], int items_count, int height_items)
{
    const bool value_changed = ListBox(label, current_item, Items_ArrayGetter, (void*)items, items_count, height_items);
    return value_changed;
}

i need a way to fix the height items in a listBox, using vector of strings , any ideas?

EDIT: find a way changing the constructor of a vectorListbox in helpers file inside the library

 bool ofxImGui::VectorListBox(const char* label, int* currIndex, std::vector<std::string>& values)
{
    if (values.empty()) { return false; }
    return ImGui::ListBox(label, currIndex, vector_getter,
                   static_cast<void*>(&values), values.size(), 10); // THE LAST NUMBER SETS THE ITEM_HEIGHT
}

moebiussurfing · June 27, 2020, 11:11am

SebastianSobotka · July 3, 2020, 5:08pm

hi,
Please, read readme file here:

there is an extra file ImGuiExtension and implementation of Combo and ListBox taking vector as a parameter:

github.com

sebasobotka/ofxImGui/blob/master/src/ImGuiExtension.h

#pragma once

namespace ImGui {

	static auto vector_getter = [](void* vec, int idx, const char** out_text)
	{
		auto& vector = *static_cast<std::vector<std::string>*>(vec);
		if (idx < 0 || idx >= static_cast<int>(vector.size())) { return false; }
		*out_text = vector.at(idx).c_str();
		return true;
	};

	inline bool Combo(const char* label, int* currIndex, std::vector<std::string>& values)
	{
		if (values.empty()) { return false; }
		return Combo(label, currIndex, vector_getter,
			static_cast<void*>(&values), values.size());
	}

	inline bool ListBox(const char* label, int* currIndex, std::vector<std::string>& values, int height_in_items = -1)

This file has been truncated. show original