Immediate-Mode-UI / Immediate-Mode-UI/Nuklear

prefilling and updating an nk_edit_string while allowing manual editing ?

Open
#647 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
C
Stars
11.4k
Forks
686
Avg merge
4d 1h
Merged PRs (30d)
3

Description

So the demo with the second colorpicker is nice, but how do you get it coupled to a hexadecimal input field while still allowing the field to be edited by the user and sync the changes between them?

Example:
```c
void ColorPicker22(struct nk_context* ctx)
{
static char textrgb[4][8];
nk_layout_row_dynamic(ctx, 20, 1);
static nk_colorf combo_color2;
static bool hex_edit_active = false;
if (nk_combo_begin_color(ctx, nk_rgb_cf(combo_color2), nk_vec2(200,500))) {
static char hexstring[8];
int hexlen = 7;
enum color_mode {COL_RGB, COL_HSV};
static int col_mode = COL_RGB;
#ifndef DEMO_DO_NOT_USE_COLOR_PICKER
nk_layout_row_dynamic(ctx, 120, 1);
combo_color2 = nk_color_picker(ctx, combo_color2, NK_RGB);
#endif

nk_layout_row_dynamic(ctx, 25, 2);
col_mode = nk_option_label(ctx, "RGB", col_mode == COL_RGB) ? COL_RGB : col_mode;
col_mode = nk_option_label(ctx, "HSV", col_mode == COL_HSV) ? COL_HSV : col_mode;

nk_layout_row_dynamic(ctx, 25, 1);
if (col_mode == COL_RGB) {
combo_color2.r = nk_propertyf(ctx, "#R:", 0, combo_color2.r, 1.0f, 0.01f,0.005f);
combo_color2.g = nk_propertyf(ctx, "#G:", 0, combo_color2.g, 1.0f, 0.01f,0.005f);
combo_color2.b = nk_propertyf(ctx, "#B:", 0, combo_color2.b, 1.0f, 0.01f,0.005f);
combo_color2.a = nk_propertyf(ctx, "#A:", 0, combo_color2.a, 1.0f, 0.01f,0.005f);
} else {
float hsva[4];
nk_colorf_hsva_fv(hsva, combo_color2);
hsva[0] = nk_propertyf(ctx, "#H:", 0, hsva[0], 1.0f, 0.01f,0.05f);
hsva[1] = nk_propertyf(ctx, "#S:", 0, hsva[1], 1.0f, 0.01f,0.05f);
hsva[2] = nk_propertyf(ctx, "#V:", 0, hsva[2], 1.0f, 0.01f,0.05f);
hsva[3] = nk_propertyf(ctx, "#A:", 0, hsva[3], 1.0f, 0.01f,0.05f);
combo_color2 = nk_hsva_colorfv(hsva);
}

sprintf(textrgb[0], "%0.0f", combo_color2.r * 255.0f);
sprintf(textrgb[1], "%0.0f", combo_color2.g * 255.0f);
sprintf(textrgb[2], "%0.0f", combo_color2.b * 255.0f);

// Update hex string only if sliders changed and hex edit is not active
if (!hex_edit_active) {
snprintf(hexstring, hexlen, "%02x%02x%02x",
(int)std::round(combo_color2.r * 255.0f),
(int)std::round(combo_color2.g * 255.0f),
(int)std::round(combo_color2.b * 255.0f));
}

float hex_ratios[] = { 0.125f, 0.60f };
nk_label(ctx, hexstring, NK_TEXT_LEFT);
nk_layout_row(ctx, NK_DYNAMIC, 25, 2, hex_ratios);
nk_label(ctx, "Hex:", NK_TEXT_LEFT);

// Hex input field
if (nk_edit_string(ctx, NK_EDIT_FIELD, hexstring, &hexlen, hexlen, nk_filter_hex) & (int)NK_EDIT_INACTIVE) {
int rgb[3] = { 0, 0, 0 };
int chars_read = std::sscanf(hexstring, "%02x%02x%02x", &rgb[0], &rgb[1], &rgb[2]);
if (chars_read == 3) {
combo_color2.r = rgb[0] / 255.0f;
combo_color2.g = rgb[1] / 255.0f;
combo_color2.b = rgb[2] / 255.0f;
hex_edit_active = false; // Editing done
}
} else {
hex_edit_active = true; // Currently editing
}
nk_combo_end(ctx);
}
}
```

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the shown C example and inspect the nk_edit_string and color-picker APIs to understand their editing-state behavior. Define the desired synchronization and validation behavior first; done should mean the hexadecimal field remains manually editable while valid changes update the color picker and picker changes update the field.

Written by the indexing model from the issue text.

Assessment

Tech stack
c
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.