Will Flex-Button support text-rotation?

As a teaser, we have something running in the lab that can draw a container of elements (e.g. texts) to a "dynamic bitmap" (which is already a concept present in 4.10.0). The pixels in that dynamic bitmap can then be rotated, etc, by a TextureMapper, but it's a bit far off turning that into something easily usable from the designer.

Hi @Martin KJELDSEN​ ,

thanks for your replies.

The flex button sounds good at first, but now I see that it is not flexible enough.

I want to have texts of two different fonts on one button, both changing their color while being pressed. Also I think of having two icons on one button....

I will not need dynamic texts on the buttons but also I can not afford to spend the memory for a lot of prerendered buttons with multilingual texts.

In general I would prefer to keep things in the designer as much as possible, but for now I will stick to what I have to do in code with the standard buttons.

Hi @AK.12.​,

I can't promise you that the flex button will ever be as flexible as what you want. I agree that it would be great to keep as many things in the designer as possible - Especially now that the Designer is improving its support for widgets already in the framework. The upcoming version 4.11.0 will improve on this even further with Analog- and Digital clocks, Texturemapper and more.

If you want to create your own custom button you can do so by overriding the draw() method to paint texts and icons where you want to. Let me know and i'll show you how.

Hi @Martin KJELDSEN​ ,

getting more widgets in the designer like circles and progress bars in 4.10 was great already, please keep them comming.

I read the article on creating custom widgets overriding the draw() method for the QR-Code,

but i didn´t actually go the way.

So sure, please share some advice.

#ifndef __BUTTON_WITH_IMAGE_AND_LABEL__
#define __BUTTON_WITH_IMAGE_AND_LABEL__
 
/* ButtonWithLabel is a TouchGFX Widget */
class ButtonWithImageAndLabel : public ButtonWithLabel
{
public:
 ButtonWithImageAndLabel() :
 offset(0)
 { }
 
 virtual ~ButtonWithImageAndLabel() {}
 
 void setOffset(uint16_t _offset)
 {
 offset = _offset;
 }
 
 virtual void draw(const Rect& area) const
 {
 Button::draw(area);
 
 /* We get typedText from touchgfx::ButtonWithLabel */
 const Font* fontToDraw = typedText.getFont();
 if ((fontToDraw != 0) && typedText.hasValidId())
 {
 uint8_t height = textHeightIncludingSpacing;
 
 Rect labelRect;
 labelRect = Rect(0, offset, this->getWidth(), height);
 Rect dirty = labelRect & area;
 
 if (!dirty.isEmpty())
 {
 dirty.x -= labelRect.x;
 dirty.y -= labelRect.y;
 translateRectToAbsolute(labelRect);
 LCD::StringVisuals visuals(fontToDraw, pressed ? colorPressed : color, alpha, typedText.getAlignment(), 0, rotation, typedText.getTextDirection(), 0);
 HAL::lcd().drawString(labelRect, dirty, visuals, typedText.getText());
 }
 }
 }
 
private:
 uint16_t offset;
};
 
#endif /* __BUTTON_WITH_IMAGE_AND_LABEL__ */

I created a custom Button that inherits from ButtonWithLabel allowing it to draw both a Text and pressed/Released Images (As the Standard Button does), but with an offset so you can place the text where you want and not in the center as the standard ButtonWithLabel does. You see how we use LCD::drawString() to instead draw the text at an offset leaving room for the images to define something above the text.

Hope that can give some inspiration.

Best regards,

Martin

And, ofcourse the setOffset() method takes an integer that represents pixels. So, an offset in the Y-direction.

Hi Martin,

I tried to use your class, but i believe the up and down images determine the size of the rect of the ButtonWithImageAndLabel drawable. This means that if you increase the offset so that the label will be displayed underneath the icon, the if(!dirty.isEmpty()) will not be entered.

Or at least I think it is like that. I am unable to move the text from the centre of the widget.