Skip to main content
SPurd.2
Associate
Dec 9, 2020 3:54 AM UTC
Solved

Can you create a momentary button using touchGFX?

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.
Michael K
Michael KBest answer
Senior III
Dec 9, 2020 7:07 PM UTC

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

6 replies

MM..1
Super User
Dec 9, 2020 3:03 PM UTC

??? Place Button with Label and do methods

Michael K
Senior III
Dec 9, 2020 7:41 PM UTC

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
Dec 9, 2020 7:07 PM UTC

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
Dec 9, 2020 7:46 PM UTC

Using the Clicklistener method worked perfectly!

Thank you so much for you help :thumbs_up:

Michael K
Senior III
Dec 9, 2020 7:58 PM UTC

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
Oct 5, 2021 4:43 PM UTC

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