Skip to main content
SPurd.2
Associate
December 9, 2020
Solved

Can you create a momentary button using touchGFX?

  • December 9, 2020
  • 6 replies
  • 2131 views

I was wondering if it was possible to create a momentary button on a touchscreen using touchGFX? I am interested in using it to activate a pump while pressing the screen. For my application, a momentary button would be better suited than any latching switch.

Cheers

This topic has been closed for replies.
Best answer by Michael K

You can add a ClickListener mixin to any element*. An element with a ClickListener will fire a callback with a "ClickEvent" type - these types include "pressed", "released" or "cancel" (was pressed, but the finger was slid off rather than lifted).

* Including a button! The callbacks emitted by the standard button widgets don't seem to differentiate between the events and only fire when the button was pressed and then released, so you need the clicklistener mixin to receive a callback when the state is changed. I've not tested this though.

Example implementation:

  1. Follow this Mixin Guide (starting at Clicklistener halfway down the page)
  2. Where it says //Implement what should happen when 'box' is touched/clicked here, place the code below
if (evt.getType() == ClickEvent::PRESSED) {
	// do what you need to do when the button is held down
} else if(evt.getType() == ClickEvent::RELEASED){
	// do what you need when the button is released
} else {
 // here the button was cancelled (finger slid off the button)
}

If you follow the MVP design pattern, your code for handling each event could call a method in the Presenter (such as presenter->buttonDown(), or presenter->buttonUp()) which would then call functions in the model that actually deal with the hardware (e.g. Model::setPumpStatus() ).

Alternately, you could probably extend the AbstractButton class, which will allow you to override AbstractButton::handleClickEvent(const ClickEvent & event). In this method you would check the event as the above, except instead of calling code directly, you would fire a callback with a parameter that passes the ClickEvent, but unless you have a bunch of buttons like this it might not be worth it. You also wouldn't be able to place them using the Designer.

6 replies

MM..1
Super User
December 9, 2020

??? Place Button with Label and do methods

Michael K
Senior III
December 9, 2020

Cake Recipe

  1. Gather and mix cake ingredients
  2. Bake until done

Sounds easy! :)

Embedded UI/UX Consulting: cadenza.design
Michael K
Michael KBest answer
Senior III
December 9, 2020

You can add a ClickListener mixin to any element*. An element with a ClickListener will fire a callback with a "ClickEvent" type - these types include "pressed", "released" or "cancel" (was pressed, but the finger was slid off rather than lifted).

* Including a button! The callbacks emitted by the standard button widgets don't seem to differentiate between the events and only fire when the button was pressed and then released, so you need the clicklistener mixin to receive a callback when the state is changed. I've not tested this though.

Example implementation:

  1. Follow this Mixin Guide (starting at Clicklistener halfway down the page)
  2. Where it says //Implement what should happen when 'box' is touched/clicked here, place the code below
if (evt.getType() == ClickEvent::PRESSED) {
	// do what you need to do when the button is held down
} else if(evt.getType() == ClickEvent::RELEASED){
	// do what you need when the button is released
} else {
 // here the button was cancelled (finger slid off the button)
}

If you follow the MVP design pattern, your code for handling each event could call a method in the Presenter (such as presenter->buttonDown(), or presenter->buttonUp()) which would then call functions in the model that actually deal with the hardware (e.g. Model::setPumpStatus() ).

Alternately, you could probably extend the AbstractButton class, which will allow you to override AbstractButton::handleClickEvent(const ClickEvent & event). In this method you would check the event as the above, except instead of calling code directly, you would fire a callback with a parameter that passes the ClickEvent, but unless you have a bunch of buttons like this it might not be worth it. You also wouldn't be able to place them using the Designer.

Embedded UI/UX Consulting: cadenza.design
SPurd.2
SPurd.2Author
Associate
December 9, 2020

Using the Clicklistener method worked perfectly!

Thank you so much for you help :thumbs_up:

Michael K
Senior III
December 9, 2020

You're welcome :) You can mark the question as answered by selecting "Best Answer" on my first comment.

Embedded UI/UX Consulting: cadenza.design
CSche.4
Associate II
October 5, 2021

Is there a project example I can download for this Momentary button behavior?