cancel
Showing results for 
Search instead for 
Did you mean: 

Back/previous screen implementation with TouchGFX

BGuth.1
Senior

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?

1 ACCEPTED SOLUTION

Accepted Solutions
BGuth.1
Senior

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.

View solution in original post

7 REPLIES 7
Peter BENSCH
ST Employee

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

In order to give better visibility on the answered topics, please click on Accept as Solution on the reply which solved your issue or answered your question.

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
Senior

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.

Hello,

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

thanks a lot.

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
Senior

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

the built-in way only works, if there is only one way to arrive at a specific screen.

If there are two ways to arrive at a screen you need to remember the id/index/... of the previous screen, so that you know to which screen you should go to.