Primitives in Containers

[David Kibble]

Hi Everyone.

I'm pretty new to uGFX having spent a while dabbling with QT in an attempt to create a nice UI for a home automation system. That was fairly painful and frankly overkill for what I needed, so when I found uGFX I was thrilled given it's capabilities and the fit with my experience of C.

So - lots of try out code written, projects building nicely in Eclipse, Cross compiling working for my target A13 board, but now I've hit something so stupid I cannot believe I'm stuck! So here goes....

I want to draw a line on a window container that also holds some buttons. That's it!!! Try as I might, I can get the buttons to show up and function, but no line.... I want to use containers so I can create 'pages' of buttons and switch them nicely, but for visual effect I'd like the pages to have some of the basic primitives on them. My gui part of my noddy code looks like this;

    GWidgetInit    wi;
    GHandle ghMainPage;

    // Apply some default values for GWIN
    gwinWidgetClearInit(&wi);
    wi.g.show = TRUE;
    wi.g.width = 480; wi.g.height = 272; wi.g.x = 0, wi.g.y = 0;

    // create container widget: MainPage
    wi.g.show = TRUE;
    wi.g.x = 0;
    wi.g.y = 0;
    wi.g.width = 480;
    wi.g.height = 272;
    wi.g.parent = 0;
    wi.text = "MainPage";
    wi.customDraw = gwinContainerDraw_Std;
    wi.customParam = 0;
    wi.customStyle = &MaroonStyle;
    ghMainPage = gwinContainerCreate(0, &wi, 0);

    // Create the separator
    gwinDrawLine(ghMainPage,0,40,480,40);

    // create button widget: ghSettings
    wi.g.show = TRUE;
    wi.g.x = 240;
    wi.g.y = 20;
    wi.g.width = 120;
    wi.g.height = 20;
    wi.g.parent = ghMainPage;
    wi.text = "Settings";
    wi.customDraw = gwinButtonDraw_Normal;
    wi.customParam = 0;
    wi.customStyle = &SilverStyle;
    ghMainSettings = gwinButtonCreate(0, &wi);

That all complies and runs fine, but the separator just doesn't show up.

Please let me know what I'm doing wrong, happy to be pointed at the docs (which are great by the way) but I feel like I must be missing something basic here.

Oh - I've tried this on Linux-SDL, Linux-Framebuffer (on the target) and Win32 and all behave the same.

Many thanks for any help.

Dave

[inmarket]

The problem here is with permanency. 

When you draw a line in a window it will stay there until the window is redrawn. Widgets are specialised windows that have automatic redraw functions that will redraw the window whenever the widget state is changed (a container is a widget) and that is why you are losing your line.

The solution is to create your own custom draw function for the container using the wi.customDraw parameter of the initialisation structure. You will then be able to put anything you want in the background of the container.

[Joel Bodenmann]

Hello Dave and welcome to the community!

As @inmarket mentioned the issue is that the window manager doesn't know about your primitive line shape. Therefore, it never knows when to clear and redraw it.
Here's an example of a custom rendering function for the container which acts like a background:

static void containerDraw_MyBackground(GWidgetObject* gw, void* param)
{
	(void)param;

	// Clear container area
	gdispGFillArea(gw->g.display, gw->g.x, gw->g.y, gw->g.width, gw->g.height, gw->pstyle->background);

	// Draw the elements
	gdispFillArea(10, 10, 10, 460, silver_studio);
	gdispFillArea(10, 20, 620, 10, silver_studio);
	gdispFillArea(30, 10, 10, 460, silver_studio);
	gdispFillArea(50, 10, 10, 460, silver_studio);
}

When creating the container, just pass the function pointer to the initialization struct or use gwinSetCustomDraw():

	// create container widget: ghContainerPage0
	wi.g.show = FALSE;
	wi.g.x = 0;
	wi.g.y = 0;
	wi.g.width = 640;
	wi.g.height = 480;
	wi.g.parent = 0;
	wi.text = "Container";
	wi.customDraw = containerDraw_MyBackground;
	wi.customParam = 0;
	wi.customStyle = 0;
	ghContainerPage0 = gwinContainerCreate(0, &wi, 0);

And that's it! This way the window manager will always render those primitives in the custom rendering function whenever needed.

You can find more information about custom rendering functions here: https://wiki.ugfx.io/index.php/Creating_a_custom_rendering_routine

[David Kibble]

Thanks Guys. I knew the answer would be obvious. I hadn't appreciated that primitives wouldn't be included in the redraw logic. I've done some nice custom draw routines already for creating background gradients and a few 'gauge' type widgets so now that I know what to do I can just add my primitive decorators in there too :-)

Thanks for the great support and a great product. If I end up getting this all to work I'd like to contribute something to you financially. Is there a 'donate' facility anywhere?

I'll also try to help others as and when I can from the experience I'm gaining now.

Dave

[Joel Bodenmann]

2 hours ago, David Kibble said:

I've done some nice custom draw routines already for creating background gradients and a few 'gauge' type widgets

Is it possible to get some images/screenshots of those?

 

2 hours ago, David Kibble said:

Thanks for the great support and a great product. If I end up getting this all to work I'd like to contribute something to you financially. Is there a 'donate' facility anywhere?

Thank you very much, we appreciate it a lot!
There's currently no generic donation running. We prefer to create dedicated donations for cases where we "really need the money". So far we only did that once when we added Mac OS X support for the µGFX-Studio: 

However, if you really feel like it, we appreciate any kind of donation - which would be used to keep the servers, this forum and other infrastructure up & running. We'll sit together and discuss the option of having an always-open donation running. We'll get back to you in a couple of days.
Thank you very much for your support!

[David Kibble]

Hi Guys.

A few screen shots attached. The colours used in the gradients and the degree of fade can all be changed. The banding is just from the JPG compression, on the screen the gradient is very smooth indeed.

Dave

[Joel Bodenmann]

That's a very interesting approach. Thank you very much for sharing!

We're always interested in seeing the results of projects & products that use the uGFX library.