Feature request: adjustable size and placeholder image for custom containers

[Aron Hoogeveen]

Creating your own custom reusable containers has its limitations. One of the, in my opionion, largest drawbacks is that you are not able to set multiple sizes in Designer for the same container (e.g. in the same screen add a MyCustomContainer with size 31x731 and a MyCustomContainer with size 61x13). Currently there are three options:

(1) new container for every new size

Create a new custom container for every size variation you have. Add an abstract base class that implements some of the common code and let every container extend that base class. Pro: in Designer you can see roughly how your component will look like for all of the sizes. Con: you still have to copy paste code between the different containers that are actually all identical except for their size. If you have a lot of different sizes, this option is not viable.

(2) single container but all components are invisible

Create a custom container with all of its child components hidden and “override” Drawable::setWidthHeight(int16_t width, int16_t height):

class CustomContainer1 : public CustomContainer1Base
{
public:
    CustomContainer1();
    virtual ~CustomContainer1() {}

    virtual void initialize();

    using Drawable::setWidthHeight;
    void setWidthHeight(int16_t width, int16_t height)
    {
        Drawable::setWidthHeight(width, height);
        executeSizeLogic();
        invalidate();
    }
protected:
    void executeSizeLogic();
};

and then set the widget sizes inside the view’s setupScreen() using

void Screen3View::setupScreen()
{
    Screen3ViewBase::setupScreen();
    myContainer1.setWidthHeight(100, 100);
    myContainer2.setWidthHeight(420, 420);
}

Pro: you have eliminated duplicate code and have a dynamic sizable container. Con: you cannot see the container in Designer because all child components have been hidden.

(3) Another option

some other design option that I have not thought of, but that I leave as an exercise to the reader? Post your answers below

The Feature Request

Ideally users would be able to utilise the Properties sidepane for their own custom containers as well (SVG, text element, etc.). If that would be possible, the sky’s the limit. I can however imagine that supporting this is a lot of work and may take a long time before it is implemented.

What I am suggesting is a middleground: support changing the width and height of custom containers such that it is possible to have multiple instances of the same custom containers but with different sizes on the same screen in Designer. While designing a custom component programmatically, you only really need to know the dimensions of the encapsulating container. Based on that you could calculate the correct locations and sizes for all child components. The only thing the user then needs to add is

class CustomContainer1 : public CustomContainerBase
{
public:
    // ...

    void initialize() override { executeSizeLogic(); }

    // ...
};

This still leaves the “oh no there are no child components so the Designer shows an empty custom container”. I suggest adding a “placeholderImage” that does not get compiled into the code, but only shows up in the Designer using the full width/height of the custom container. That way you can still design your UI with a feel for how it is going to look like, with the addition of dynamic-size custom containers.

 

I hope I have conveyed my idea. If not, I’ll gladly answer questions.