7 - Adding a new component

Before adding a new component, decide if it will be a container, control or indicator. Then create new .cpp and .h files in the corresponding folder inside the UI_Lib folder. Also add an include for the .h file to the UI_Lib.h file.

.h File

All user interface elements must be derived from the UIElement class that contains some common parameters like location and size of the element. This class also requires the new element to implement a UIElement::Draw function that is used to display the element on screen. Also a UIElement::KeyInput and UIElement::TouchInput function is defined that can be implemented optional (for controls, indicators that don't need user interaction or touch inputs). The UIElement::RecalculateDimensions and UIElement::RecalculateLayout functions are also optional.

The following code snippet shows an example class declaration for an new empty UI element (control).

#ifndef NEWCONTROL_H_
#define NEWCONTROL_H_
#include "../Core/UIElement.h"
 
class NewControl : public UIElement
{
protected:
    bool* _valuePointer;
    bool _valueDraw;
 
public:
    NewControl(bool* valuePointer);
    NewControl(uint16_t locX, uint16_t locY, bool* valuePointer);
    virtual void Draw(bool redraw) override;
    virtual bool KeyInput(Keys_t key) override;
    virtual bool TouchInput(uint16_t x, uint16_t y, TouchTypes touchType) override;
    virtual void RecalculateDimensions() override;
    virtual void RecalculateLayout() override;
};
 
#endif /* NEWCONTROL_H_ */ 

.cpp File

The following code snippet shows an example class definition for the new empty UIElement (control) from above.

Call the UIElement constructor from this constructor and decide if the element is a container, control or indicator. In the UIElement::KeyInput function handle each key that is supported by the element and return true to indicate that the key was handled. If you return false from UIElement::KeyInput function, the key is propagated to the parent element by the UI_Lib Core. In the UIElement::TouchInput function handle each touch that is supported by the element and return true to indicate that the touch was handled. If you return false from the UIElement::TouchInput function, the touch is propagated to the next element by the UI_Lib Core. Use the UIElement::RecalculateDimensions and UIElement::RecalculateLayout functions to update the dimensions (UIElement::Width and UIElement::Height) or the complete layout.

#include "NewControl.h"
 
NewControl::NewControl(bool* valuePointer) : UIElement(UI_CONTROL)
{
    // Do further constructor tasks here
}
 
NewControl::NewControl(uint16_t locX, uint16_t locY, bool* valuePointer) : UIElement(locX, locY, UI_CONTROL)
{
    // Do further constructor tasks here
}
 
void NewControl::Draw(bool redraw)
{
    if (Visible)
    {
        // Draw the UI element using the Adafruit_GFX functions
    }
}
 
bool NewControl::KeyInput(Keys_t key)
{
    switch (key)
    {
        // Handle all keys that the UI element supports here and return true, if the key was handled
        case KEYOK:
            return true;
        default:
            // Return false if the key wasn't handled. Then it gets propagated to the parent element
            return false;
    }
}
 
bool NewControl::TouchInput(uint16_t x, uint16_t y, TouchTypes touchType)
{
    // Check if the touch was inside the controls borders
    if(HitTest(x, y))
    {
        switch(touchType)
        {
            case TOUCH_NORMAL:
                // Handle a normal touch inside the control here and return true if handled.
                return true;
            case TOUCH_LONG:
                // Handle a long touch inside the control here and return true if handled.
                return true;
            default: break;
        }
    }
    // Return false, if the touch wasn't handled.
    return false;
}
 
void NewControl::RecalculateDimensions()
{
    // Recalculate the Width and Height here...
}
 
void NewControl::RecalculateLayout()
{
    // Recalculate the complete layout here...
}