Skip to main content
Anonymous
June 24, 2020
Solved

TouchGFX: Move text with slider knob position

  • June 24, 2020
  • 3 replies
  • 1805 views

Hi to everyone,

First: thanks to ST and TouchGFX team for this great graphics tool/designer - it is really awesome with all the possible widgets and interaction.

I'm new to TGFX and have also near zero experience with Cpp but I was able to build a nice UI with some screens, containers and so on but one thing I'm not able to find a solution.

I created a custom container with an vertical slider and an custom indicator image (round knob).

On this knob i want to set on top a text field which value depends on the slider value (1-10) and is also moving with the slider knob position.

I was able to change the text value depending on the slider value but I don't know how it's possible to move the text with the slider knob position.

Maybe someone can help me, I'm happy about every hint, web link or code sample.

Thank you in advance.

BR,

H.S.

This topic has been closed for replies.
Best answer by Romain DIELEMAN

Hi,

Could you maybe share a picture or code so that we could have a better insight of what you are trying to do?

If you just want to change the coordinates of the textArea widgets, you can set its X/Y (and width/height if relevant) through code at the same time as changing the text. It is a linear movement so you shouldn't have too much difficulties.

I guess if you have a slider with a height of 200pixels you could use a trick like this: you move the text area depending on the slider value but instead of having only 10 steps, you put more so that you have a smoother movement (but ofc keep your text value logic to 10 steps). This is just the first idea that comes to me, there are better ways to do this

step = 2; //from y=0 to y=200 in 100 steps, so 2 pixels per steps
Ytempo = step * slider1.getValue();
 
textArea1.setPosition(X, Y + Ytempo, W, H);
textArea1.invalidate();

3 replies

Romain DIELEMAN
Romain DIELEMANBest answer
ST Employee
June 25, 2020

Hi,

Could you maybe share a picture or code so that we could have a better insight of what you are trying to do?

If you just want to change the coordinates of the textArea widgets, you can set its X/Y (and width/height if relevant) through code at the same time as changing the text. It is a linear movement so you shouldn't have too much difficulties.

I guess if you have a slider with a height of 200pixels you could use a trick like this: you move the text area depending on the slider value but instead of having only 10 steps, you put more so that you have a smoother movement (but ofc keep your text value logic to 10 steps). This is just the first idea that comes to me, there are better ways to do this

step = 2; //from y=0 to y=200 in 100 steps, so 2 pixels per steps
Ytempo = step * slider1.getValue();
 
textArea1.setPosition(X, Y + Ytempo, W, H);
textArea1.invalidate();

Anonymous
June 25, 2020

Hi Romain,

Thank you for your answer and the the code sample.

Your imagination is correct, it is a simple vertical slider application with a text/number (1-10) on the indicator knob.

I tried it out now (also with 100 steps instead of 10) and it works roughly but sadly it's not perfect.

Is it possible to get the actual Y position from the slider indicator itselfs?

I think this should be the best solution that the slider knob and the slider text is always "on one line" but I don't find the function for this.

Thank you in advance.

Anonymous
June 26, 2020

The answer to the question above with the actual slider position is still interesting for me, but I could solve the problem now.

I just add the same code part for updating and moving of the text in all three available callback handler:

  • sliderValueStartedChangeCallbackHandler
  • sliderValueChangedCallbackHandler
  • sliderValueConfirmedCallbackHandler

Terms & ConditionsAccessibility statement