Would like to have a "hint" text displayed in an edit, which disappears when text is entered

Open

ronaaronopened 9d ago

The behavior I'm looking for is exactly what the "placeholder" attribute does for the HTML "input" tag.

What would be a way to implement that using the current nk_edit ?

Activity

TomJGooding9d ago

I'm still learning Nuklear but I suspect this won't be easy! Here's my first attempt - the trick will be how to calculate the position of the input widget text:

static void input_with_placeholder(struct nk_context *ctx) {
    nk_flags flags = NK_WINDOW_TITLE | NK_WINDOW_BORDER | NK_WINDOW_MOVABLE | NK_WINDOW_SCALABLE;
    if (nk_begin(ctx, "Input with placeholder", nk_rect(10, 10, 400, 400), flags)) {
        static char input_buf[64];
        static int input_len;

        /* Explicit row height - likely needed for placeholder position? */
        int row_h = 25;

        /* Label and input */
        nk_layout_row_dynamic(ctx, row_h, 1);
        nk_label(ctx, "Email", NK_TEXT_LEFT);
        nk_edit_string(ctx, NK_EDIT_SIMPLE, input_buf, &input_len, 64, nk_filter_default);

        /* Placeholder */
        if (input_len == 0) {
            struct nk_command_buffer *canvas = nk_window_get_canvas(ctx);
            /* TODO: Calculate bounds based on row height and edit widget styles? */
            struct nk_rect bounds = nk_rect(21, 80, 200, 200);

            struct nk_style_edit edit_style = ctx->style.edit;
            struct nk_color placeholder_color = nk_rgb_factor(edit_style.text_normal, edit_style.disabled_factor);

            const char placeholder[] = "john.doe@example.com";
            nk_draw_text(canvas, bounds, placeholder, nk_strlen(placeholder), ctx->style.font, nk_rgba(0,0,0,0), placeholder_color);
        }
    }
    nk_end(ctx);
}

ronaaron8d ago

Thanks, I did something similar.

TomJGooding8d ago

There might be a simpler implementation, but here's my second attempt after diving into the edit widget code:

static void input_with_placeholder(struct nk_context *ctx) {
    nk_flags flags = NK_WINDOW_TITLE | NK_WINDOW_BORDER | NK_WINDOW_MOVABLE | NK_WINDOW_SCALABLE;
    if (nk_begin(ctx, "Input with placeholder", nk_rect(10, 10, 400, 400), flags)) {
        static char input_buf[64];
        static int input_len;

        struct nk_rect bounds;

        /* Label and input */
        nk_layout_row_dynamic(ctx, 30, 1);
        nk_label(ctx, "Email", NK_TEXT_LEFT);
        bounds = nk_widget_bounds(ctx);
        nk_edit_string(ctx, NK_EDIT_SIMPLE, input_buf, &input_len, 64, nk_filter_default);

        /* Placeholder */
        if (input_len == 0) {
            const char placeholder[] = "john.doe@example.com";

            struct nk_command_buffer *canvas = nk_window_get_canvas(ctx);
            const struct nk_user_font *font = ctx->style.font;
            struct nk_style_edit edit_style = ctx->style.edit;
            struct nk_color color = nk_rgb_factor(edit_style.text_normal, edit_style.disabled_factor);

            struct nk_rect area;
            area.x = bounds.x + edit_style.padding.x + edit_style.border;
            area.y = bounds.y + edit_style.padding.y + edit_style.border;
            area.w = bounds.w - (2.0f * edit_style.padding.x + 2 * edit_style.border);
            area.h = bounds.h - (2.0f * edit_style.padding.y + 2 * edit_style.border);

            area.y = area.y + area.h / 2.0f - (float)font->height / 2.0f;
            area.h = NK_MAX(area.h / 2.0f, area.h - (area.h / 2.0f + font->height / 2.0f));

            nk_draw_text(canvas, area, placeholder, nk_strlen(placeholder), font, nk_rgba(0,0,0,0), color);
        }
    }
    nk_end(ctx);
}