IP entry window

[adam4813]

I have developed an IP entry box as I couldn't find any already made.

ImGui::SetNextWindowPosCenter();
ImGui::Begin("IP entry", false, ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoCollapse);

int octets[4] = {123, 123, 123, 123};

float width = ImGui::CalcItemWidth();
ImGui::BeginGroup();
ImGui::PushID("IP");
ImGui::TextUnformatted("IP");
ImGui::SameLine();
for (int i = 0; i < 4; i++) {
    ImGui::PushItemWidth(width / 4.0f);
    ImGui::PushID(i);
    bool invalid_octet = false;
    if (octets[i] > 255) {
        // Make values over 255 red, and when focus is lost reset it to 255.
        octets[i] = 255;
        invalid_octet = true;
        ImGui::PushStyleColor(ImGuiCol_Text, ImVec4(1.0f, 0.0f, 0.0f, 1.0f));
    }
    if (octets[i] < 0) {
        // Make values below 0 yellow, and when focus is lost reset it to 0.
        octets[i] = 0;
        invalid_octet = true;
        ImGui::PushStyleColor(ImGuiCol_Text, ImVec4(1.0f, 1.0f, 0.0f, 1.0f));
    }
    ImGui::InputInt("##v", &octets[i], 0, 0, ImGuiInputTextFlags_CharsDecimal);
    if (invalid_octet) {
        ImGui::PopStyleColor();
    }
    ImGui::SameLine();
    ImGui::PopID();
    ImGui::PopItemWidth();
}
ImGui::PopID();
ImGui::EndGroup();

// Example action button and way to build the IP string
ImGui::SameLine();
if (ImGui::Button("Connect")) {
    std::stringstream ip;
    ip << octets[0] << "." << octets[1] << "." << octets[2] << "." << octets[3];
}
ImGui::End();
ImGui::SetWindowSize("IP entry", ImVec2(0, 0));

[adam4813]

The 2 values are both highlighted and wrong in the picture only to demonstrate how those work. In use it will clamp the invalid octets to the range of 0-255 when it loses focus.

[adam4813]

Moved to a wiki page IP Entry

[ocornut]

It seems unnecessary complicated to create 4 text fields instead of one (and parse the text there).

However if you do that you'd probably want to have the cursor automatically go from one field to the next when typing 3 characters or a space. Could be accomplished using the text callback to query cursor position (bit some complication).

Prior to "IP" you can call AlignFirstTextLineToWidget(). Also I am not sure why you are calling BeginGroup() it has no use there. I've seem many people use groups not as intended so my conclusion is that I need to write proper documentation about it :)

[adam4813]

Ah thanks. Also I did use an InputInt4 but you don't have access to the
callback at that point. I suppose one could do a single TextInput and
filter/format it as text comes in, but this seemed a cleaner and simpler
approach that could be easily understood what is going on.

On Sat, Oct 24, 2015 at 3:45 PM, omar notifications@github.com wrote:

It seems unnecessary complicated to create 4 text fields instead of one
(and parse the text there).

However if you do that you'd probably want to have the cursor
automatically go from one field to the next when typing 3 characters or a
space. Could be accomplished using the text callback to query cursor
position (bit some complication).

Prior to "IP" you can call AlignFirstTextLineToWidget(). Also I am not
sure why you are calling BeginGroup() it has no use there. I've seem many
people use groups not as intended so my conclusion is that I need to write
proper documentation about it :)

—
Reply to this email directly or view it on GitHub
#388 (comment).

-Adam

[adam4813]

AlignFirstTextLineToWidget() doesn't seem to exist?

[paultech]

Believe Omar meant AlignFirstTextHeightToWidgets()
You can use the CallbackCharFilter on a standard input to filter the input as its entered

[adam4813]

Ah thanks paultech that would be the right one. I know on standard input you can, but maybe having the ability to pass one down through the call to InputInt4 and similar would be handy for certain situations.