Marquee text character from left to write

[Chandan Bhatia1]

I have big text which I need to scroll left to right in loop with touch gfx. When I read more on it and found about scrollableContainer but kinda unsure how to combine it with my text object widget.

I added below code

  scrollableTripAdviceParameterText_II.setPosition(509, 353, 282, 57);

  scrollableTripAdviceParameterText_II.enableHorizontalScroll(true);

  scrollableTripAdviceParameterText_II.setScrollbarsColor(touchgfx::Color::getColorFrom24BitRGB(240, 235, 235));

// below code is added by me

 scrollableTripAdviceParameterText_II.add(tripAdviceParameterText_II);

scrollableTripAdviceParameterText_II is Scrollable Container widget and tripAdviceParameterText_II is text widget

Is there any other way to add Scrollable Container for my application? I read few blogs on it but unable to figure it out.

Thanks

[Michael K]

Not sure I'd use a scrollable container for this. Try activating the MoveAnimator mixin on your textbox. Then you can have an animation that linearly moves the text from outside the screen on the left to outside the screen on the right. Add an animationComplete callback that calls a function that would move the text back to the left side and restart the animation.

Sidenote - for English text it's best to scroll it from the right side of the screen to the left.

MarqueeExampleView.hpp

#ifndef MARQUEEEXAMPLEVIEW_HPP
#define MARQUEEEXAMPLEVIEW_HPP
 
#include <gui_generated/marqueeexample_screen/MarqueeExampleViewBase.hpp>
#include <gui/marqueeexample_screen/MarqueeExamplePresenter.hpp>
 
class MarqueeExampleView : public MarqueeExampleViewBase
{
public:
    MarqueeExampleView();
    virtual ~MarqueeExampleView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    void startAnimation();
    void animationCompleteHandler(const MoveAnimator<TextArea>& t);
protected:
 
    Callback<MarqueeExampleView, const MoveAnimator<TextArea>&> animationCompleteCallback;
};
 
#endif // MARQUEEEXAMPLEVIEW_HPP

MarqueeExampleView.cpp

MarqueeExampleView::MarqueeExampleView() : animationCompleteCallback(this, &MarqueeExampleView::animationCompleteHandler)
{
}
 
void MarqueeExampleView::setupScreen()
{
    MarqueeExampleViewBase::setupScreen();
    textArea1.setMoveAnimationEndedAction(animationCompleteCallback);
    textArea1.resizeToCurrentText();
    startAnimation();
}
 
void MarqueeExampleView::tearDownScreen()
{
    MarqueeExampleViewBase::tearDownScreen();
}
 
void MarqueeExampleView::startAnimation() {
    textArea1.setXY(800, textArea1.getY());   // replace 800 with your device screen width
    textArea1.startMoveAnimation(-textArea1.getWidth(), textArea1.getY(), 450, touchgfx::EasingEquations::linearEaseNone);
}
 
void MarqueeExampleView::animationCompleteHandler(const MoveAnimator<TextArea>& t) {
    startAnimation();
}

[Chandan Bhatia1]

@Michael K​  Thanks for reply. It didn't work for me.

First thing in toughgfx IDE I am not able to find any option to attach my text widget in Scrollable Container widget. I am doing it manually in code. Is this correct way or I am doing something wrong.

Also In MoveAnimator there is no option of resetAnimation(), I am doing start animation in callback.

Thanks.

[Michael K]

Hi, I've edited my post with an example. I intended "resetAnimation()" to be code you implement yourself. Try the example and let me know how it goes!

As for your other question, to add text to a scrollable container, in the touchgfx designer just drag object listing for the textbox (in the left sidebar) on top of the scrollable container object listing.

[Chandan Bhatia1]

@Michael K​ Thanks for help. It worked but I think there is one problem with startMoveAnimation function, which is below:

textArea1.startMoveAnimation(-textArea1.getWidth(), textArea1.getY(), 450, touchgfx::EasingEquations::linearEaseNone);

• Why you added negative textArea1.getWidth() as The X position at animation end ? I think it should be start X position of text area.
• My buffer size is 160 and data is "xyz 123456789 abcdefghijklmnopqrstuvqt". Suppose only till character "g" it fits in total text size in one go so it moves Animation too its showing till character "g" and post it reset to "xy....".

 

Hope my above points are clear.

[Michael K]

If you really want your text scrolling from left to right (which again is not the way English text normally scrolls) feel free to set the start position to -width and the end position to 800.

Yes, you do need to set your text area to the full size of your textbox for the above example. Resize to current text may help? Haven't tried it for wildcard buffers.

[Chandan Bhatia1]

@Michael K​ Regarding 2nd point, we are using move animation so we can show all character of text which is obviously more than area of textbox. wildcard buffers size is 160 so size of enough as per data "xyz 123456789 abcdefghijklmnopqrstuvqt"

Hope you are able to get my point.

[Chandan Bhatia1]

@Michael K​  did u get the chance to check ?

[Michael K]

I just confirmed that resizeToCurrentText() works with wildcard buffers. Whenever you change the textarea text, call that method and it will resize it to reveal all characters, regardless of how big the textbox appeared in the designer. I've updated the example code.

If my example helped you, please give my first comment Best Answer so others in the future can find it easier!

[Chandan Bhatia1]

@Michael K​  Display doesn't have that much space for that specific thing. I want something like this. Suppose max character can be 5 in one time at text area and data is "xyz 123456789 abcdefghijklmnopqrstuvqt"

| x|

| xy|

| xyz|

| xyz |

|xyz 1|

|yz 12|

|z 123|

and so On

Hope u understood my point.