Button With Image, Background Image and Text

[MrJob]

Hi all,

I'm working on an application, and I want to have a button with an image and a background. Lucky for me, there already is such a widget! The ButtonWithIcon class is a derivative of the Button.

I also want my button to have a label. So now I'm writing a derivative of ButtonWithIcon with a TextArea widget added. However, this text area is not being drawn.

I have tried everything. II have tried to make my derivative class a friend of container, because the button is a widget, and I cannot add children. But the ButtonWithIcon has both an icon and a background image, so these should be children, right?

I have tried to draw the rect of the text area, like this:

in .hpp:
touchgfx::TextArea	_label;
 
in .cpp
_label.setY(0);
_label.setX(0);
_label.setTypedText(TypedText(title_id));
_label.resizeToCurrentText();
draw(_label.getRect());

Is it perhaps simply not possible to add children to the widget class? Or maybe I should use another class? I don't understand it.

Thank you for reading.

[Martin KJELDSEN]

Hi @Community member​,

Check out this post https://community.st.com/s/question/0D50X0000AAKTA0SQP/will-flexbutton-support-textrotation

I posted some code for how to write a custom Button: ButtonWithImageAndLabel (Inherited from ButtonWithLabel) widget that combines drawing an image and a label using the draw() method. Sounds like something you could get some inspiration from.

Best regards,

Martin

[MrJob]

I used you code to try and print the string with the right color to the right place. I used the ButtonWithImage as a "base class" however, so I added a TypedText to it's derivative and try to draw it using your code. It doesn't seem to work however. It seems as though the images (bg and icon) are still drawn later than the string.

in .hpp:

class PhysicalButton : public ButtonWithIcon
 
/* Draw the button again */
void draw(const Rect& area);
 
TypedText			_label_txt;
colortype			_label_color;

in .cpp

void PhysicalButton::draw(const Rect& area)
{
	/* Draw the icons of the button */
	ButtonWithIcon::draw(area);
 
	/* Draw the label */
	const Font* fontToDraw = _label_txt.getFont();
	const Unicode::UnicodeChar * string = _label_txt.getText();
	uint8_t textHeightIncludingSpacing = fontToDraw->getMaxTextHeight(string) * fontToDraw->getNumberOfLines(string) + fontToDraw->getSpacingAbove(string);
 
	if ((fontToDraw != NULL) && _label_txt.hasValidId())
	{
		Rect labelRect;
		labelRect = Rect(0, 0, this->getWidth(), textHeightIncludingSpacing);
 
		Rect dirty = labelRect & area;
 
		if (!dirty.isEmpty())
		{
			dirty.x -= labelRect.x;
			dirty.y -= labelRect.y;
 
			translateRectToAbsolute(labelRect);
			LCD::StringVisuals visuals(
				fontToDraw,
				_label_color,
				alpha,
				_label_txt.getAlignment(),
				0,
				TEXT_ROTATE_0,
				_label_txt.getTextDirection(),
				0
			);
			HAL::lcd().drawString(
				labelRect, 
				dirty, 
				visuals, 
				_label_txt.getText()
			);
		}
	}
}