Same screen different texts and buttons enable

[Jtron.11]

Hi all,

I am looking for advices to implement my GUI.  I have screen 1 with all the widgets. 

On this screen by default has:

1. The texts for Hours:Minutes:Seconds and a button to switch to setting screen to set the count down timer.

2. The switch mode button, to switch the timer 1 to timer 2.

Timer 1 has different texts and looks vs. timer 2.

The rest of the widgets on screen 1 stay exactly the same.

Currently, I have a solution buy copy exactly the same screen 1 and just replace the timer texts and button only, and using switch mode button to switch back and forth the screen 2 to screen 1 and vice versa.

I found this is wasting the memory resource and additional coding to handle different screens.

Question:

Is there a way I can use only screen 1 and change texts and button between timer1 vs. timer2?

[GaetanGodart]

Hello @Jtron.11 ,

To be clear, right now you have 2 screen that are very similar but with minor changes such as some textAreas and a button?
Then, you could simply keep a single screen and when you get your timer's interrupt, instead of changing the screen, et the textArea and the button invisible and set the other textArea and button visible (don't forget to invalidate).

Regards,

[Jtron.11]

Hi @GaetanGodart ,

Yes, the major of 2 screens are exactly the same.  The only 2 items differences are two buttons and 5 text fields.

If I click Button A on main screen, I switch to setup screen, once I confirm the switch, I need my main screen to show "Button 1" and "Button2", and 3 text fields Text1, Text2, and Text3.

And vs. once I click Button 1 and confirm, I need the main screen to show Button A and Button B with 2 text fields Text X and Text Y.

[GaetanGodart · Accepted solution]

Hello @Jtron.11 ,

Please find attached an example of a project where clicking a button change the elements displayed without changing the screen.

Regards,

[Jtron.11]

@GaetanGodart 

Thank you so much for your helps.  Can you please help me one more item?

I tried to create a lock screen so when I lock the screen all the buttons can't be changed.

First I created a toggle button, once click, I call the C++ to make sure all of my buttons Visible = false, when I unlock visible = false.

Doing this some of the buttons disappear which not what I want.

I research the forum and there is one suggested to use the custom container to place on top of the current screen to achieve this, but I lost don't know what exactly need to do. 

Can you please give me some pointer?

[GaetanGodart]

My pleasure! :)

To disable touch there is a few solution.

You could disable the touchController in hardware (usually I²C), you could modify the touchController.cpp code to not "send" the touch events or you could add a touchable element on top of everything (this could be a button, a custom container set as "touchable", etc).

Please find attached the previous project but now if you click on button B (the big one that stays), it will add a flexButton that is fully transparent and that is the size of whole screen so that the only thing you can touch is that flexButton.
Note that I did not implement a way to unlock the screen on this example, this unlocking could be done through an interrupt, or simply by clicking the large flexButton that is used to lock the screen but I will let you choose what is best for you.
This is because in TouchGFX, when there is multiple elements that can be clicked on top of each other, only the one above is clicked.

Regards,

[Jtron.11]

Thank you for your advices.  The advices help me to understand little more about touchgfx.

However, I am looking for some sort of second command to unlock the screen because if I just use the transparent flexButtonLockScreen, then the screen can be unlock right away.

Can you please elaborate about the unlocking through the interrupt?

Or if we use the flexButtonLockScreen, is there any way I can ask some confirmation if the user need to unlock the screen?

Since we talk about disable the touch by hardware (i2c) I assume this scenario you have a physical button to lock/unlock right? Otherwise, once lock through screen, there is no way you can unlock it.  Is that correct?

[GaetanGodart]

---

I am looking for some sort of second command to unlock the screen because if I just use the transparent flexButtonLockScreen, then the screen can be unlock right away.

---

I don't really understand that. If you use a flexButton (or any other clickable element) that is the size of the whole screen, then you can only click that flexButton if the flexButton is set as visible.
So to unlock the screen in the example I share you just have to set the flexButtonLockScreen as not visible.

You can do that by creating an interaction in TouchGFX Designer, so that when the flexButtonLockScreen is clicked, it sets itself invisible and then your screen is unlocked.
You can have that same interaction that sets the flexButtonLockScreen as invisible but change the trigger, for instance the trigger could be  an action called once a counter reach a certain value, it could be an action that is called when you have an interrupt on your MCU, perhaps a physical button click, perhaps a timer.

It is really up to you on how you want to unlock the screen, what action/event will unlock the screen, all you have to do is the call 

flexButtonLockScreen.setVisible(false);
flexButtonLockScreen.invalidate();

---

Or if we use the flexButtonLockScreen, is there any way I can ask some confirmation if the user need to unlock the screen?

---

Sure, right now, when clicking on Button B, an interaction executes that sets the flexButtonLockScreen visible but instead it could set a custom container visible and that custom container has a text like "Are you sure you want to lock the screen?" and 2 buttons, one to cancel and one to validate.
The button to cancel will simple set the custom container invisible and the button validate will set the custom container invisible and the flexButtonLockScreen visible.

---

Since we talk about disable the touch by hardware (i2c) I assume this scenario you have a physical button to lock/unlock right? Otherwise, once lock through screen, there is no way you can unlock it.  Is that correct?

---

Yes you would need something to enable the touch again, this can be a pin set as an input, an interrupt from a sensor, a timer, etc.

Regards,

[Jtron.11]

@GaetanGodart 

I think you misunderstood what I was saying.

This is the flow:

1. Click Button to enable flexButtonLockScreen

2. Now flexButtonLockScreen is visible/enable

If you accidentally touch any place on the screen, it will unlock the screen because the touch will disable the flexButtonLockScreen.

How do we prevent this?  This is the second command or confirmation I am looking for to make sure the user is really want to unlock the screen.

[GaetanGodart]

Hello @Jtron.11 ,

Isn't it what my last example is doing?
If you click the button B, the flexButtonLockScreen is set to visible (even if it is fully transparent) and therefore this is the only thing that can be clicked on the screen but there is not action linked to clicking that button which in a way "disable the touch" by completely locking the screen to only touch that button.

Do you have a video example inspiration of what you want to achieve?

Regards,