Show your widgets!

[andres-asm]

I'm working on an android style interface, so I'm doing some custom widgets and I thought a showoff thread would be nice...

I'm just getting started so:

Update

I don't think I can fully replicate the paradigm or the animations, shading, etc. But I should be able to follow the guidelines at least.
I gotta figure out gamepad navigation now for this sidebar component.

[ventosus]

Here a UI for an audio plugin I'm working on, with syntax hilighting and custom dial widgets.

[dumblob]

Impressive work! Will you then publish your work and add a link here? Are you using something like Cassowary (see #123 (comment) ) for placement?

By the way, there is already a thread for screenshots: #202 .

[ventosus]

Will you then publish your work and add a link here?

https://github.com/OpenMusicKontrollers/moony.lv2

Are you using something like Cassowary (see #123 (comment) ) for placement?

No, stock nuklear with a slightly modified nk_text_edit with hooks for character index based coloring for syntax hilighting.

[andres-asm]

@dumblob oh sorry I didn't see the thread...

[vurtun]

@fr500 @ventosus this made my day. Looks quite amazing. @fr500 as for sidebar gamepad control why not just use an index to store currently active component since the sidebar is fixed and just increment/decrement on up/down. As for left/right you could just switch between sidebar and main window focus.

[andres-asm]

@vurtun, yeah I haven't hooked GLFW inputs yet at all so I haven't tested but I guess following the example you made for me back when it was zahnrad it should be possible.

I was thinking about having two indexes to allow easy navigation between both panels.
I'm just designing the components atm. Nothing is functional other than hover and click changing color :p

[andres-asm]

@vurtun, I have a question now that I have you here.
I have this section

      nk_begin(ctx, "History", nk_rect(WINDOW_WIDTH * 30 / 100 + 1, 0, WINDOW_WIDTH * 70 / 100, WINDOW_HEIGHT), 0);
      { 
         set_style(ctx);

         content_title(ctx, "History", &fonts[6]);
         nk_layout_row_dynamic(ctx, 280, 4);
         content_entry(ctx, "Super Metroid", "Super Nintendo Entertainment System", &fonts[2], &fonts[1], test_entry, test);
         content_entry(ctx, "Label 2", "Sublabel 2", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label 3", "Sublabel 3", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label 4", "Sublabel 4", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label 5", "Sublabel 5", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label 6", "Sublabel 6", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label 7", "Sublabel 7", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label 8", "Sublabel 8", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label 9", "Sublabel 9", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label a", "Sublabel a", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label b", "Sublabel b", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label c", "Sublabel c", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label d", "Sublabel d", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label e", "Sublabel e", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label f", "Sublabel f", &fonts[2], &fonts[1], color_bars, test);
         content_entry(ctx, "Label g", "Sublabel g", &fonts[2], &fonts[1], color_bars, test);

         set_style(ctx);
      }
      nk_end(ctx);

it works fine, it even shows the scrollbar for the items that draw partially off screen, looks like this:

But if I draw anything after this last section it just crashes. Even a tiny label so I guess it doesn't like to draw anything "off window" bounds?

I can't even get a trace since it doesn't crash, it only terminates:

This application has requested the Runtime to terminate it in an unusual way.
Please contact the application's support team for more information.

If I make the window... 10x the height it doesn't crash but I don't get a scrollbar then of course...
I guess a solution would be to have a container inside the window, that would always start drawing "on-screen" nvm... seems that a group that contains groups doesn't work.. it terminates immediately... content entry is a group itself:

static void content_entry(struct nk_context *ctx, char* label, char *sublabel, 
   struct atv_font *f1, struct atv_font *f2, struct nk_image img, void (*cb)(void))
{
   nk_group_begin(ctx, "", NK_WINDOW_NO_SCROLLBAR);
   {
      nk_layout_row_begin(ctx, NK_DYNAMIC, 200, 1);
      nk_layout_row_push(ctx, 0.0f);
      content_button(ctx, img, cb);
      nk_layout_row_end(ctx);
      nk_layout_row_begin(ctx, NK_DYNAMIC, f1->height * 1.5, 1);
      nk_layout_row_push(ctx, 0.0f);
      nk_style_set_font(ctx, &f1->font->handle);
      nk_label(ctx, label, NK_TEXT_ALIGN_LEFT);
      nk_layout_row_end(ctx);
      nk_layout_row_begin(ctx, NK_DYNAMIC, f1->height * 1.5, 1);
      nk_layout_row_push(ctx, 0.0f);
      nk_style_set_font(ctx, &f2->font->handle);
      nk_label(ctx, sublabel, NK_TEXT_ALIGN_LEFT);
      nk_layout_row_end(ctx);
      nk_group_end(ctx);
      set_style(ctx);
   }
}

So I guess what I should do is not to use a group but actually make a custom widget that looks like that container + widgets, it's a button_text after all so I should be able to work from that.

[andres-asm]

Meh sorry for the noise I fixed it and the result seems faster and better suited to my workflow.
I guess custom widgets is way to go!

I'll leave my post since it could help someone in the future.

[cxong]

I'm using nuklear in the character editor for C-Dogs SDL:

Overall nuklear was very good; only problem was that to do custom widgets (the nk_combo with custom images), I had to copy a lot of nuklear functions until I get to the part containing draw calls. It would have been easier if nuklear had a way of customising all the drawing using a struct of callbacks. I also would have loved an SDL2 renderer backend but I guess that's not a very popular use case.

[andres-asm]

Trying to move forward with my GUI (I attempt this once every few months :) )

Now I'm trying a different approach, trying to build a toolkit on top of nuklear this time that provides me with the different views and helpers I may require so I may reuse them in different projects

Also playing with different typefaces and sizes,
The "Select File" window is what I'm actually gonna implement here, the others are basically a theme editor and preview.

A bit OT, but is there any way to have a window always on top?

[andres-asm]

Almost done with my theme editor, it can save and load themes from file. If there's interest I can make this public or part of samples or whatever.

It was a lot of boilerplate code but it turned out nicely

[outpoints]

@fr500 could you make that public?
I'd love to take a look at it!
I'm still getting the hang of nuklear :)

[PramUkesh]

@fr500
Where can i find source code

[andres-asm]

I never finished it and I don't have it anymore

…

On Mon, Oct 8, 2018, 1:37 AM PramUkesh Venky ***@***.***> wrote: @fr500 <https://github.com/fr500> Where can i find source code — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#349 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABpC0NmEzvYMsI3v2t2C5Nx5MTpjGwNVks5uivKagaJpZM4MICCx> .

[X-death25]

@fr500
Did you have find your source code ?
I want to look it too
Thanks

[andres-asm]

Sure...
I mean, it's just a pile of hacks 🤣
https://git.polygoncorp.com/radius/simpleton
https://git.polygoncorp.com/radius/atv_menu

[X-death25]

Thanks you very much !
Will analyse it and try to modify, i work on something similar.