Update a wildcard in a custom container called in a scroll wheel

[Roombr_VI]

In my main screen there is a scroll wheel which scrolls the contents of a custom container. The custom container has 5 wildcards. Now I intend to dynamically update those wildcards with my text resources. But I'm unable to do so. Please find my codes attached.

Screen1View.cpp

#include <gui/screen1_screen/Screen1View.hpp>
#include <texts/TextKeysAndLanguages.hpp>



void TextUpdate::updateText()
{
	Unicode::snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%s", touchgfx::TypedText(T_NAT_EVE1).getText());
	    textArea1.setWildcard(textArea1Buffer);
	    textArea1.setTypedText(touchgfx::TypedText(T_NAT_EVE1));
	    add(textArea1);
}

// Screen1View constructor
Screen1View::Screen1View()
    : tickCounter(0), targetItem(0), scrollCompleted(false),
      digitalHours(0), digitalMinutes(0), digitalSeconds(0),
      textUpdateIntervalCounter(0), textUpdateObj() // Initialize textUpdateObj
{
}

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();

    tickCounter = 0;  // Reset the tick counter
    textUpdateIntervalCounter = 0; // Reset the interval counter
    targetItem = scrollWheel1.getSelectedItem(); // Initialize target item
    scrollCompleted = false; // Reset scroll completion flag
    digitalHours = digitalClock1.getCurrentHour();
    digitalMinutes = digitalClock1.getCurrentMinute();
    digitalSeconds = digitalClock1.getCurrentSecond();
}

void Screen1View::tearDownScreen()
{
    Screen1ViewBase::tearDownScreen();
}

void Screen1View::handleTickEvent()
{
    tickCounter++;
    textUpdateIntervalCounter++;

    // Scroll logic: Execute every 0.5 seconds (30 ticks at 60 Hz)
    if (tickCounter % ticksPerStep == 0)
    {
        if (!scrollWheel1.isAnimating() && !scrollCompleted)
        {
            targetItem = (targetItem + 1) % scrollWheel1.getNumberOfItems();
            scrollWheel1.animateToItem(targetItem, 500); // Smooth animation (500ms)
            scrollCompleted = true;
        }
        else if (!scrollWheel1.isAnimating() && scrollCompleted)
        {
            scrollCompleted = false; // Reset flag when animation finishes
        }
    }

    // Clock update logic: Execute every second
    if (tickCounter % 60 == 0)
    {
    	textUpdateObj.updateText();
        if (++digitalSeconds >= 60)
        {
            digitalSeconds = 0;
            if (++digitalMinutes >= 60)
            {
                digitalMinutes = 0;
                if (++digitalHours >= 24)
                {
                    digitalHours = 0;
                }
            }
        }

        digitalClock1.setTime24Hour(digitalHours, digitalMinutes, digitalSeconds);
    }

    // Text update logic: Execute every 2 seconds (120 ticks at 60 Hz)
    if (textUpdateIntervalCounter >= 120)
    {
    	        textUpdateObj.updateText(); // Update text dynamically
    	        textUpdateIntervalCounter = 0;
    }
}

void Screen1View::resetScroll()
{
    tickCounter = 0;            // Reset tick counter
    scrollCompleted = false;    // Allow scrolling again
}

 Screen1View.hpp

#ifndef SCREEN1VIEW_HPP
#define SCREEN1VIEW_HPP

#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <gui_generated/containers/CustomContainer1Base.hpp>

class TextUpdate : public CustomContainer1Base
{
public:
   // TextUpdate();
    //virtual ~TextUpdate(){}
    virtual void updateText();
};

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}

    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void handleTickEvent();

    void resetScroll(); // Method to reset the scroll state

protected:
    int tickCounter;        // Counter to track ticks
    int targetItem;         // The target index for the scroll wheel
    bool scrollCompleted;   // Flag to ensure the scroll happens only once
    static constexpr int ticksPerStep = 30; // Number of ticks for a 0.5-second delay (assuming 60 Hz)
    int digitalHours;
    int digitalMinutes;
    int digitalSeconds;

    int textUpdateIntervalCounter; // Counter for updating text every 2 seconds
    TextUpdate textUpdateObj;      // Object for TextUpdate
};

#endif // SCREEN1VIEW_HPP

I intend to print only in the first wildcard for the time being.

[GaetanGodart]

Hello @Roombr_VI ,

Thank you for sharing your project.
I am unable to run the simulator because there are compilation errors.

I see that your custom container have 5 textArea in a vertical organization.
I also see that your scroll list contains 5 of these containers also organized vertically.
So in total you will have 25 textArea, I do not understand what behavior you want to achieve.

I think you should have a look at the TouchGFX academy where we have tutorials and videos.
The tutorial 4 could be interesting for you because it teaches how to use a scrollWheel.

Usually, scrollWheel are used to allow the user to select an element, this could be used to select a value or to navigate through the GUI for instance.
If you just want a few instance of the same custom container, the scrollList is more suited.
Finally, if you just want to have a "window" that you can scroll and navigate within, the scrollable container is more suited.
I am not sure which one would be the most appropriate for your project.

Regards,

[Roombr_VI]

There are some text resources, and depending on a particular time, a specific text resource should be displayed. I had previously achieved that with wildcards on the screen, but the transitions were too rough. They asked me to smoothen these transitions by adding animations or making the text scroll. After going through the tutorial, I don't think a scroll wheel is the right solution. What approach would you suggest I use?

[GaetanGodart]

Hello @Roombr_VI ,

You can very simple fade your text from full opacity to full transparency, then change the text and then fade it back to full opacity.
To do so you will need to use a fade animator. This animator will take care of fading the opacity and once it is finished, it can call an interaction that can be used to change the text data and start the fade in back to full opacity.
Have a look at :

• this video 
• fade animator documentation 

I am not sure what behavior you want to achieve for the scrolling so I cannot assist you with that. Maybe the move animator documentation would help you.

Regards,