Singaporeansincerely Singaporean
If you have not done so, read this full tutorial on how to use SGEXTN to build an application.
See here for the previous part of the tutorial.
In the previous part, we built the UI of the options page.
With the UI ready, we can write behaviour of all the UI elements. Up until now, everything in the code of SGCLPOptionsPage that expects a callback function ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ uses nullptr as placeholder.
We will deal with the presets system later, so using and saving presets can continue to be nothing for now.
Firstly we can get choosing background colours to work. The user can opt for "custom" mode where they choose a specific colour to use as background colour. There is also "complementary" mode (to demonstrate SGEXTN's colour processing capabilities) where the background colour is the foreground colour but with some HSL channels inverted.
To indicate to the user that a mode (custom / complementary) is selected, we can use SGWButton::setSelected on the corresponding button.
For the options page, to hide irrelevant UI components, we resize other UI to cover them. A UI element can have its size in w-distance ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ changed using SGWWidget::setX1, SGWWidget::setX0, SGWWidget::setY1, SGWWidget::setY0, SGWWidget::setW1, SGWWidget::setW0, SGWWidget::setH1, and SGWWidget::setH0.
Alternatively, you can simply disable irrelevant UI elements using SGWWidget::setItemVisibility.
When the "custom" button is pressed, we should make the "custom" button selected, resize it to reveal the colour picker below, make the "complementary" button unselected, and resize it to cover the buttons below. We also need to test if it is already selected. If so, we ignore it.
The "complementary" button follows a similar algorithm.
We write these behaviours in callback function ⁽㈳㈴㈳㈮㈱㈨㈠㈫ ㈧㈤㈱㈤⁾ that return void and take no arguments, so these can be attached to the buttons directly.
We can declare the functions inside the class SGCLPOptionsPage.
static void backgroundUseCustom(); static void backgroundUseComplementary();
and then assign them to run when the buttons are pressed by replacing the lines in SGCLPOptionsPage::initialise that create the buttons. Instead of just creating the buttons, we assign the function to run also.
SGCLPOptionsPage::backgroundUseCustomButton = new SGWTextButton(bg, "custom", &SGCLPOptionsPage::backgroundUseCustom, 0.0f, 0.5f, 0.0f, 7.5f, 0.5f, -0.5f, 0.0f, 1.0f); SGCLPOptionsPage::backgroundUseComplementaryButton = new SGWTextButton(bg, "complementary", &SGCLPOptionsPage::backgroundUseComplementary, 0.0f, 0.5f, 0.0f, 8.5f, 1.0f, -1.0f, 0.0f, 1.0f);
To ensure that the UI page starts at a valid default, we can write a reset function
static void reset();
with implementation
void SGCLPOptionsPage::reset(){ SGCLPOptionsPage::backgroundUseCustom(); }
and then use it when creating the UI page.
void SGCLPOptionsPage::activate(){ SGWBackground::enable(SGCLPOptionsPage::instance, &SGCLPOptionsPage::initialise, &SGCLPOptionsPage::reset); }
After that we actually implement the functions.
void SGCLPOptionsPage::backgroundUseCustom(){ if((*SGCLPOptionsPage::backgroundUseCustomButton).getSelected() == true){return;} (*SGCLPOptionsPage::backgroundUseCustomButton).setSelected(true); (*SGCLPOptionsPage::backgroundUseComplementaryButton).setSelected(false); (*SGCLPOptionsPage::backgroundUseCustomButton).setW1(0.5f); (*SGCLPOptionsPage::backgroundUseCustomButton).setW0(-0.5f); (*SGCLPOptionsPage::backgroundUseComplementaryButton).setW1(1.0f); (*SGCLPOptionsPage::backgroundUseComplementaryButton).setW0(-1.0f); } void SGCLPOptionsPage::backgroundUseComplementary(){ if((*SGCLPOptionsPage::backgroundUseComplementaryButton).getSelected() == true){return;} (*SGCLPOptionsPage::backgroundUseComplementaryButton).setSelected(true); (*SGCLPOptionsPage::backgroundUseCustomButton).setSelected(false); (*SGCLPOptionsPage::backgroundUseComplementaryButton).setW1(0.5f); (*SGCLPOptionsPage::backgroundUseComplementaryButton).setW0(-0.5f); (*SGCLPOptionsPage::backgroundUseCustomButton).setW1(1.0f); (*SGCLPOptionsPage::backgroundUseCustomButton).setW0(-1.0f); }
See here for the next part of the tutorial.
©2025 05524F.sg (Singapore)