Problem with widgets samples implementation - strange result displaying behaviour

[rBlr]

Hello

I'm studying of development custom widgets and in TGFX docs found following page:

https://support.touchgfx.com/docs/development/ui-development/touchgfx-engine-features/custom-widgets#example-source-code.

After that I have downloaded provided 2 examples of widgets (QR Code and Lens), but when try to implement them, both simulator and in real display I see strange displaying of these widgets, in QR Code widget repeating itself few times in different locations, and it is like semi-transparent, in case of Lens it also have there repeats together with correct widget output.

And as of Lens widget, I have copy code without any modifications, and use it as following:

StartView.hpp

...
#include <gui/common/LensWidget.hpp>
...
protected:
 Lens MyLens;

StartView.cpp

#include <gui/start_screen/StartView.hpp>
StartView::StartView()
{
 MyLens.setXY(100, 100);
 add(MyLens);
}
...

That is I get in output (both on simulator and in real display):

And this is for QR code:

StartView.cpp

StartView::StartView()
{
 QRC.setXY(0, 0);
 QRC.setQRCodeData(0);
 QRC.setScale(16);
 add(QRC);
}

(From source code of widget example I have remove checking that qrcode data is zero-value) 

Result:

Here also two ghost outputs. The screen background is full white (Box with border).

Can't understand why 1st output is with larger black background, while 2 others not.

I have 24bits display and following is setting in TouchGFX

Will be very appreciate for help what wrong happens here.

Thank you

[JTP1]

Hello

These examples seems to be designed to be used with 16 colors depth, I also got similar output with 24 bit colors.

Here those are placed to the same project in v.4.23.1 (tested also in 4.18.0)

So those examples needs some modifaction for different color depths.

Br JTP

[rBlr]

So you have used 16 bits color in project for correct output ?

[JTP1]

Yes, that's correct. Here is attached the example with lens and QRcode widget. You can run simulator.exe directly from \build\bin folder even without compiliing it.

Good luck !

Br JTP

[rBlr]

ok, will try. any way I need to use 24 bit color. I'm a novice for images related widgets implementation, any suggestion what should to change in code? I assume need to set alpha and may be use another methods, but calculations will remain same? thank you

[JTP1]

Basically only difference is how to modify the framebuffer. With 8 and 16 bits it is simple, just define the pointer to the framebuffer same lenght (uint8_t or uinr16_t *) and then change data width respectively.

With 24bit it is bit more complicated because there is no this size variable. One way is to use 8 bit pointer and then multiply addresses with 3 since one pixel takes three bytes.  And then also perfrom write operation three times to consecutively addresses.

Attached is working QRcode example with 8,16 and 24 bit support. One must define the color width in the top of the code (now 24bit).

Lens example is bit more complicated, maybe I continue with it some day😀

Br JTP

[JTP1 · Accepted solution]

Hello

Attached is 24bit color depth version for Lens and QRwidget-files and also example project. Now widgets support 8,16 and 24 bit color depth, but the color depth must be predefined in .hpp files.

If you use 8 or 16bit color depth instead of 24bit, change the color depth setting here:

and also change manually from Lens.hpp:

#define LENS_WIDGET_USE_24BIT_COLOR 1

to

#define LENS_WIDGET_USE_8BIT_COLOR 1
//or
#define LENS_WIDGET_USE_16BIT_COLOR 1

and QRCodeWidget.hpp:

#define QR_WIDGET_USE_24BIT_COLOR 1

to

#define QR_WIDGET_USE_8BIT_COLOR 1
//or
#define QR_WIDGET_USE_16BIT_COLOR 1

From the example project it is possible to check how modify view.cpp and .hpp to get widgets added to the screen.

Hope this helps somebody.

Br JTP