Scroll down a list

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

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();
2 Likes

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();

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();
}

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();

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
1 Like

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

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();

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
}

hi,
Please, read readme file here:

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

1 Like