GUI "cards"

[bolt-blue]

I'm trying to figure out a decent way to implement "cards", i.e. a collection of widgets representing one item, often in a list of variable number.

It looked like groups were my best bet.
But they're supposed to have unique id's, which is not really possible in a variably sized array.

While testing my idea, I have semi-successfully created a proof of concept, using nk_layout_space_ and nk_group. I have a loop that generates three groups per "card", using the same id's each time.
Probably not a great idea.

However, I can't figure out how to colour the background of each card.

AFAICT there is no way to set the background for a group. But anyway, I really want to set the card background, which is not a single group.

I presume I could draw e.g. a rounded rectangle and then draw the other widgets on top, but I've not yet figured out how.

If anyone has suggestions of what features I could look into that would be great.

I imagine this could end up being a custom widget (layout?).

[bolt-blue]

This is pretty much what I have for the current POC.
I'm sure it's flawed, but I'm still fairly new to nuklear.

// Temporarily use rand for some colours later
#define RandomI32(min, max) ((min) + ((max) - (min)) * ((double)rand() / INT32_MAX) + 0.5)
srand(0xdeadbeef);

struct nk_command_buffer *out = nk_window_get_canvas(ctx);
struct nk_rect bounds;

struct nk_style_window old_style = ctx->style.window;

// Make layout easier to work with
// TODO: Account for spacing/padding when using nk_layout_space_xxx ?
ctx->style.window.spacing = nk_vec2(0, 0);
ctx->style.window.group_padding = nk_vec2(0, 0);

u32 card_count = 3;

for (u32 i = 0; i < card_count; i++) {
    // TODO: How to colour the area defined here
    // Rounded rect would be nice probably
    nk_layout_space_begin(ctx, NK_STATIC, 70, 3);
    nk_layout_space_push(ctx, nk_rect(0, 0, 60, 60));

    if (nk_group_begin(ctx, "item image", NK_WINDOW_BORDER|NK_WINDOW_NO_SCROLLBAR)) {
        // For some reason this still needs to be smaller than the space pushed above
        // else the circle will get clipped; how much smaller exactly, I'm not yet sure
        nk_layout_row_static(ctx, 55, 55, 1);
        nk_widget(&bounds, ctx);
        nk_fill_circle(out, bounds,
        nk_rgb(RandomI32(0, 255), RandomI32(0, 255), RandomI32(0, 255)));
        nk_group_end(ctx);
    }
    nk_layout_space_push(ctx, nk_rect(70, 0, 180, 60));
    if (nk_group_begin(ctx, "item detail", NK_WINDOW_BORDER|NK_WINDOW_NO_SCROLLBAR)) {
        nk_layout_row_static(ctx, 20, 180, 1);
        nk_label(ctx, "Foo", NK_TEXT_LEFT);
        nk_label(ctx, "Bar", NK_TEXT_LEFT);
        nk_label(ctx, "Baz", NK_TEXT_LEFT);
        nk_group_end(ctx);
    }
    nk_layout_space_end(ctx);
}

ctx->style.window = old_style;

[RobLoach]

Would love to have some cards implemented 👍

[bolt-blue]

I've forked and started to test the idea.
https://github.com/bolt-blue/Nuklear/tree/feat/card

Would love some advice as I don't know the code base well enough to know if I'm making the "best" decisions.

I've based a new nk_card_begin on nk_group_scrolled_offset_begin.

It's effectively a limited version, with the addition of a background coloured rectangle that can be rounded.

I figured the general usage for a card might mostly match that of a nk_group_***, at least in that it would be nice to be able to nest group(s) inside it.

Is this a good direction?

Is the use of NK_WINDOW_DYNAMIC reasonable? In my exploration, I've noticed some comment that it's deprecated.
I used it because my original layout test involved nk_group_.
Using groups inside a card requires the group to also be flagged with NK_WINDOW_DYNAMIC in order to take on the background colour as well.

Other comments in the code describe some of my thoughts and concerns.

I'm definitely open to suggestions.
I'd be happy if nk_card_ did more manual drawing if that would help, but I think the hurdle I see is how to handle groups.
Originally, I wondered if I could base the code solely on nk_button_ but I believe it would be insufficient for typical card use cases.

[bolt-blue]

Specifically, there's only one commit at the moment to show the basic idea.
bolt-blue@a142456

[bolt-blue]

Added an example/demo to my fork.
See https://github.com/bolt-blue/Nuklear/tree/feat/card.

$ cd example
$ make card
$ cd bin && ./card

If anyone has thoughts, opinions, criticism, suggestions, I'd be grateful to hear them.

It's doing pretty much all that I want from it at the moment, though there are definitely improvements to be made.

Just hoping I can get some second opinions from those more experienced than I.

[bolt-blue]

This is what the demo looks like. It's the first basic example that came to mind, but given that nk_card is built on groups, a card can be many things.
As long as it doesn't need scrolling.