1 ACCEPTED SOLUTION
Accepted Solutions
FULL SOLUTION TO CREATING CUSTOM TEXTAREA WITH CODE
With the help of everyone participating in this post and some other people in other threads (and, of course, my own undeniable genius *chuckle*), here is a summary of how you can create a textArea purely (99%) with code. Step by step from zero:
Open TouchGFX Designer. In the upper tabs, go to "Texts"->Typographies. Make sure there is a font you are going to use (or add another one), you need to generate letter glyphs using TouchGFX Designer. In my case, I did this:
Next, go to "Resources" tab. "Resource" is a set of formatting rules that we associate with every TextArea. Font size, font direction, Alignment and content. Add new resource to use with the new TextAreas that we will create with the code. You can use one Resource with multiple TextAreas. It's just a formatting feature, not the text itself. I am going to use "ResourceId3" for my custom TextAreas. Set the Typography of the Resource to the one you used in 1.In Resource text, write "<>" (means "wildcard"), If you write some text in there except "<>", it will be visible in all TextAreas using that resource. Wildcards, however, are individual for every TextArea. Personally, I want all TextAreas to have completely different content, so I do the following:
Now we have forced TouchGFX to generate all characters' glyphs for the font we're going to use and we have created text formatting rules, also known as Resource (Rules are: use that font with glyphs, align left, text direction left to right, text is entirely wildcard). So we finally get to generating stuff with the code.
Create the screen where you want to create your custom TextAreas. The screen can be empty, we just need the files for the screen to be generated to put our stuff into them. "Generate the code".
Find the screen view file. It should be located in "/gui/" folder (exact location differs depending on whether you created project in Cube or TouchGFX first, but it's always in the folder named "gui/" or "gui/src/screenname_screen/", "gui/included/..." for its header file). Look for "gui" folder (not gui_generated!). My screen is called "NewScreen", and my project was first created in TouchGFX Designer and later imported into CubeIDE, where I'm working on it. If you 're curious about how to import it there, there is a video on "EE by Karl" youtube channel that does just that.
I open "NewScreenView.cpp" and "NewScreenView.hpp". In the header file, we need to include TouchGFX components that we're going to use. If you're not sure what to add, create a widget in TouchGFX designer, generate code and go to "NewScreenViewBase.cpp/hpp" in gui_generated. That hpp will include stuff necessary to generate those specific widgets. Copy those includes to your NewScreenView.hpp. My NewScreenView.hpp has these includes:
#include <touchgfx/widgets/Box.hpp>
#include <touchgfx/widgets/Button.hpp>
#include <touchgfx/containers/ScrollableContainer.hpp>
#include <touchgfx/widgets/TextAreaWithWildcard.hpp>
#include <touchgfx/Color.hpp>
#include <texts/TextKeysAndLanguages.hpp>Color and TextKeysAndLanguages are a must - you will haveto set color and you will need to connect your font/resource to the TextArea, those do exactly that. Others - whatever you want to create with your own code, should be there. My "includes" allow me to create Boxes (color fills), buttons, scrollable containers and TextAreas with a wildcard.
Next, let's declare our new custom TextArea in the header file.
My entire header file looks like this:
#ifndef NEWSCREENVIEW_HPP
#define NEWSCREENVIEW_HPP
#include <gui_generated/newscreen_screen/NewScreenViewBase.hpp>
#include <gui/newscreen_screen/NewScreenPresenter.hpp>
#include <touchgfx/widgets/Box.hpp>
#include <touchgfx/widgets/Button.hpp>
#include <touchgfx/containers/ScrollableContainer.hpp>
#include <touchgfx/widgets/TextAreaWithWildcard.hpp>
#include <touchgfx/Color.hpp>
#include <texts/TextKeysAndLanguages.hpp>
class NewScreenView : public NewScreenViewBase
{
public:
NewScreenView();
virtual ~NewScreenView() {}
virtual void setupScreen();
virtual void tearDownScreen();
touchgfx::TextAreaWithOneWildcard testTextArea;
touchgfx::Unicode::UnicodeChar testTextAreaBuffer[10];
touchgfx::TextAreaWithOneWildcard testTextArea2;
touchgfx::Unicode::UnicodeChar testTextAreaBuffer2[10];
protected:
};
#endif // NEWSCREENVIEW_HPPIn "Public" section, I have created two textAreas and two buffer arrays for them so that they can hold different stuff. As far as I remember, buffers are maximum 10 places long (haven't tried longer to be honest, feel free to try, I expect it to trim the text which is too long), and one last character has to be reserved for end of line character when it's put into the TextArea. so if you need 4 places for your text, you'll need an array of length 5.
Nothing stops you from declaring an array of boxes or array of buttons or array of textAreas. I had no problem creating an array of boxes that way,
What's left is to actually add stuff to our NewScreen.cpp, which in my hands looks like this:
#include <gui/newscreen_screen/NewScreenView.hpp>
NewScreenView::NewScreenView()
{
}
void NewScreenView::setupScreen()
{
NewScreenViewBase::setupScreen();
//CREATING ONE TEXTAREA
testTextArea.setXY(200, 400);
testTextArea.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 0));
testTextArea.setLinespacing(0);
testTextArea.setWildcard(testTextAreaBuffer);
testTextArea.setTypedText(touchgfx::TypedText(T_RESOURCEID3));
Unicode::snprintf(testTextAreaBuffer, 10, "Meow meow");
testTextArea.resizeToCurrentText();
add(testTextArea);
testTextArea.invalidate();
//CREATING SECOND TEXTAREA with the same resource
testTextArea2.setXY(500, 400);
testTextArea2.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 0));
testTextArea2.setLinespacing(0);
testTextArea2.setWildcard(testTextAreaBuffer2);
testTextArea2.setTypedText(touchgfx::TypedText(T_RESOURCEID3)); //Same resource as the first TextArea. EXPERIMENT!
Unicode::snprintf(testTextAreaBuffer2, 10, "Woof woof");
testTextArea2.resizeToCurrentText();
add(testTextArea2);
testTextArea2.invalidate();
}
void NewScreenView::tearDownScreen()
{
NewScreenViewBase::tearDownScreen();
}CONTINUES IN REPLY!
