Skip to main content
BGuth.1
Senior
June 14, 2021
Solved

Back/previous screen implementation with TouchGFX

  • June 14, 2021
  • 3 replies
  • 3264 views

I am looking to implement back button to go back to previous screen (similar to UI on a smart phone). For this,

1. Need to remember current screen before a button is pressed.

2. In the new screen, when a back button is pressed, programmatically change to previous screen.

It would need a common memory area where current screen can be saved. This information should be accessible from any screen so that it can be read when a back button on that particular screen is pressed.

Here is a scenario:

  1. There is title bar with a button, say Button1.
  2. Screen 1 leads to Screen 2. Screen 2 leads to Screen 3. All screens have title bar with same Button1.
  3. Two ways to reach screen 3. First, by clicking the Button1 on title bar (a short cut). Second, Screen1 to Screen 2 to Screen3.
  4. Screen3 has a back button.
  5. When present screen is Screen1 and Screen3 is reached by pressing the Button1, if a back button is pressed in Screen3 then Screen1 should be reached.
  6. When transition is Screen1 to Screen2 to Screen3, if a back button is pressed in Screen3 then Screen2 should be reached as it is the most recent screen before reaching Screen3.

Is this possible with TouchGFX?

This topic has been closed for replies.
Best answer by BGuth.1

I solved it using Model-View-Presenter method. Saved a variable in model that holds which previous screen. When back button is pressed, this model variable is used to jump to correct screen.

3 replies

Peter BENSCH
Technical Moderator
June 14, 2021

Yes, of course it is possible.

But you don't need to remember all these information yourself, because it is already built-in TouchGFX. Just define e.g. a back button on a screen and add an interaction (top right):

  • select a trigger event, e.g. Button is clicked
  • choose the clicked source, i.e. your previously defined button
  • select Action: Change screen
  • choose the screen to change to
  • select Transition and Transition direction as you like, e.g. Cover and West
  • finally give this interaction a unique name

Good luck!

If the problem is resolved, please mark this topic as answered by selecting Select as best. This will help other users find that answer faster.

/Peter

BGuth.1
BGuth.1Author
Senior
June 14, 2021

Hi @Peter BENSCH​ 

Sorry, perhaps I was not detailed with my question.

  1. There is title bar with a button, say Button1.
  2. Screen 1 leads to Screen 2. Screen 2 leads to Screen 3. All screens have title bar with same Button1.
  3. Two ways to reach screen 3. First, by clicking the Button1 on title bar (a short cut). Second, Screen1 to Screen 2 to Screen3.
  4. Screen3 has a back button.
  5. When present screen is Screen1 and Screen3 is reached by pressing the Button1, if a back button is pressed in Screen3 then Screen1 should be reached.
  6. When transition is Screen1 to Screen2 to Screen3, if a back button is pressed in Screen3 then Screen2 should be reached as it is the most recent screen before reaching Screen3.

Please let me know.

BGuth.1
BGuth.1AuthorBest answer
Senior
June 17, 2021

I solved it using Model-View-Presenter method. Saved a variable in model that holds which previous screen. When back button is pressed, this model variable is used to jump to correct screen.

JPan.4
Associate II
June 6, 2023

Hello,

could you please give us more details how did you realize this function?

thanks a lot.

BGuth.1
BGuth.1Author
Senior
June 6, 2023

Hi @JPan.4​ ,

This is how I implemented it.

  1. Assign a number to each screen.
  2. Have a variable in your model that holds previous screen number.
  3. In the tearDownScreen() of every screen, save that screen number to the model.
  4. Now I have the previous screen info.
  5. From the current screen, I call application().gotoScreenNameNoTransition() to change to previous screen.
INaee.1
Associate II
June 8, 2023

Hi

In TouchGFX , I assign the interactions as below

NEXT_SCREEN

Choose button key = 2

PREVIOUS_SCREEN

Choose button key = 1


_legacyfs_online_stmicro_images_0693W00000dDOrGQAW.pngkeys.cpp

unsigned char Key_UP=1;

unsigned char Key_DN=1;

/*****************************************************************

* Function

******************************************************************/

void Keys_Scan(void)

{

/********************** KEY UP ***********************************/

if (HAL_GPIO_ReadPin(PORT_Key_UP, PIN_Key_UP))

{ Key_UP=1; } else { Key_UP=0; }

/********************** KEY DN ***********************************/

if (HAL_GPIO_ReadPin(PORT_Key_DN, PIN_Key_DN)) 

{ Key_DN=1; } else { Key_DN=0; }

}

KeySampler.cpp

using namespace touchgfx;

static uint8_t btnstatus[4];

extern unsigned char Key_UP;

extern unsigned char Key_DN;

void KeySampler::init()

{

}

bool KeySampler::sample(uint8_t& key)

{

  Keys_Scan();

  if (Key_UP == 0)

  {

    key = 1;

   HAL_Delay(100);

    return true;

  }

  if (Key_DN == 0)

  {

    key = 2;

   HAL_Delay(100);

    return true;

  }

  return false;

}

Screen2ViewBase.cpp

void Screen2ViewBase::handleKeyEvent(uint8_t key)

{

  if(2 == key)

  {

    //NEXT_SCREEN

    //When hardware button 2 clicked change screen to Screen3

    //Go to Screen3 with no screen transition

    application().gotoScreen3ScreenNoTransition();

   

  }

  if(1 == key)

  {

    //PREVIOUS_SCREEN

    //When hardware button 1 clicked change screen to Screen1

    //Go to Screen1 with no screen transition

    application().gotoScreen1ScreenNoTransition();

   

  }

}

I hope , this will work fine

IN