Button, Advanced: Flash BackgroundColor after button is touched

[Scott Ferguson]

This technique uses a common procedure and a few global variables to flash the BackgroundColor of any button pressed on a Screen.

Open the attached project flash_button_BackgroundColor and follow along ...

Screen Designer:

Set Screen1.BackgroundColor to Dark Gray

Set Screen1.Title to Press a button ...

Create a HorizontalArrangement

Set it's Width to Fill parent

Put a Button inside the screen arrangement.

Rename it to up_btn, set it's Text to < and BackgroundColor to Light Gray

Put a 2nd Button inside the screen arrangement to the right of the [<] button.

Rename it to menu_btn, set it's Text to Menu and BackgroundColor to Light Gray

 

Put a 3rd button inside the screen arrangement.

Rename it to help_btn, set it's Text to Help and BackgroundColor to Light Gray

Insert a Label.

Change it's BackgroundColor to Light Gray, empty the Text Textbox and set it's Width and Height to Fill parent

  - this acts as a filler on the menu bar

Create a Clock component and set it's TimerInterval to 250

Rename it to button_flash_clk

Blocks Editor:

 - When the user touches a button, it's BackgroundColor will change for 250 ms to Grey then revert to Light Gray in this example.

Each button's Click event calls text_button_flash_BackgroundColor procedure with it's button component to flash the button's BackgroundColor.

The button_flash_clk.Timer event passes the component value of the last pressed button touched to the flash procedure with the saved_button_component global variable 

The text_button_flash_BackgroundColor procedure uses the button_component argument to accept the passed button component values.

The button_flash_clk.TimerEnabled value is False before a button is pressed.

So when the button is pressed and the flash procedure is called from the button's Click block, button_flash_clk.TimerEnabled's value is checked, found to be False and the else-do section of the ifelse block is executed:

1. the button's background color is saved
2. it's background color is changed to the flash color
3. the button's component is saved in the global variable to be used later by the timer block to revert to the original background color
4. the timer is enabled

Once the button_flash_clk.Timer is enabled, there is an initial delay of 250 ms, then the text_button_flash_BackgroundColor procedure is called with the global saved_button_component value previously saved.

Since button_flash_clk.TimerEnabled's value is found to be True, the then-do section of the ifelse block is executed:

1. the timer is disabled
   
2. the background color is changed back to it's initial (Gray) value

Try out the project in the emulator or connected device.

- You can set it's initial and flash colors to whatever you wish. Also you can change the button's TextColor value instead of the BackgroundColor. The process is the same 

Challenge: Use either the spacer label in the menu bar or the Title bar to display status information when a button is pressed