Skip to content

Flip-flop button

The flip-flop button is an input element and a variant of the button which keeps the state, off or on.

Configure

Warning

Ensure the GUI library is included and initialised according to the configuration procedure.

Button myButton(&myGUI);

The constructor Button() creates a flip-flop button and sets the link to the GUI myGUI.

1
2
3
myButton.dDefine(10, 10, 80, 50,
    setItem(0x0001, "Flip-flop"),
    fontSizeAutomatic);

dDefine() defines the flip-flop button with vector coordinates.

The required parameters are

  • The first line specifies the vector coordinates: top-left coordinates x-y then width and height in pixels;

  • The second line contains the item, here built with setItem() with an index and a text;

The optional parameters are

  • The third line is optional: the size of the font, by default fontSizeAutomatic for automatic.

By default, the button is standard and enabled according to the GUI setting, with value set to zero.

Then,

myButton.setOption(optionFlipFlop);
myButton.setState(stateEnabled);
myButton.setValue(false);

setOption() needs to be set to optionFlipFlop or true to turn the button into a flip-flop button.

setState() defines whether touch is enabled for the element.

Select

  • stateDisabled or false for touch disabled;

  • stateEnabled or true for touch enabled.

Note

Use literals instead of values for upward compatibility.

Default is false for touch disabled.

setValue() sets the initial value of the flip-flop element:

  • false for flip-flop turned off;

  • true for flip-flop turned on.

Use

myButton.draw();
bool result = myButton.check();
uint32_t index = myButton.getIndex();
bool result = myButton.getValue();

draw() displays the button.

check() polls the touch controller and returns true is the button is pressed.

An optional parameter defines the mode of how the element is checked:

  • checkNormal for normal check mode;

  • checkInstant for instant check mode;

  • checkSpecial for special check mode.

Default mode is normal check mode.

In normal check mode, the element requires the finger to be hold for a momenet and raises the event when the finger is released. Additionally, the element goes through a cinematic sequence.

From off to on: start, press, hold, release

In instant check mode, the element raises the event when the finger touches the element. No cinematic sequence is performed.

From off to on: start, press

In special check mode, the element raises the event when the finger is released from the element. A simplified cinematic sequence is performed.

From off to on: start, press, release

The technical note Optimise GUI speed provides more details on the cinematic sequences of each check mode.

getIndex() returns the index of the button, set at dDefine().

getValue() gets the value of the flip-flop element:

  • false for flip-flop turned off;

  • true for flip-flop turned on.

Example

This is the core of the code from example GUI_Button.ino.

void displayFlipFlop()
{
    myScreen.setOrientation(myOrientation);
    uint16_t x, y, dx, dy;

    x = myScreen.screenSizeX();
    y = myScreen.screenSizeY();
    dx = x / 3;
    dy = y / 4;

    // myGUI.begin();
    myGUI.delegate(false);

    myGUI.dLabel(0, 0, x, dy, "Flip-flop ", myColours.black, myColours.white, -1, 1, fontLarge);

    Text myText1(&myGUI);
    myText1.dDefine(dx * 0, dy, dx * 1, dy, 0, 0, fontLarge);
    myText1.draw("OFF");

    Text myText2(&myGUI);
    myText2.dDefine(dx * 1, dy, dx * 1, dy, 0, 0, fontLarge);
    myText2.draw("OFF");

    Text myText3(&myGUI);
    myText3.dDefine(dx * 2, dy, dx * 1, dy, 0, 0, fontLarge);
    myText3.draw("OFF");

    Button myFlipFlop1(&myGUI);
    myFlipFlop1.dDefine(dx * 0, dy * 2, dx * 1, dy, setItem(0x0001, "Normal"), fontMediumBold);
    myFlipFlop1.setOption(optionFlipFlop);
    myFlipFlop1.setState(stateEnabled);
    myFlipFlop1.draw();

    Button myFlipFlop2(&myGUI);
    myFlipFlop2.dDefine(dx * 1, dy * 2, dx * 1, dy, setItem(0x0002, "Instant"), fontMediumBold);
    myFlipFlop2.setOption(optionFlipFlop);
    myFlipFlop2.setState(stateEnabled);
    myFlipFlop2.draw();

    Button myFlipFlop3(&myGUI);
    myFlipFlop3.dDefine(dx * 2, dy * 2, dx * 1, dy, setItem(0x0002, "Special"), fontMediumBold);
    myFlipFlop3.setOption(optionFlipFlop);
    myFlipFlop3.setState(stateEnabled);
    myFlipFlop3.draw();

    drawNext();
    myScreen.flushFast();

    myGUI.delegate(true);

    while (!checkNext())
    {
        if (myFlipFlop1.check())
        {
            myText1.draw(myFlipFlop1.getValue() ? "ON" : "OFF");
        }
        else if (myFlipFlop2.check(checkInstant))
        {
            myText2.draw(myFlipFlop2.getValue() ? "ON" : "OFF");
        }
        else if (myFlipFlop3.check(checkSpecial))
        {
            myText3.draw(myFlipFlop3.getValue() ? "ON" : "OFF");
        }
        else
        {
            hV_HAL_delayMilliseconds(10);
        }
    }
}