how to resize the ready-to-use widget set

Question

Hi there,

I am trying to creat a GUI like 'Vehicle Data Logger' on your Demo webpage (https://www.embedded-wizard.de/demo.html).

However, both the Digital Dispaly and Gauge in Widget set 'Flat' are too big to use.

I've tried to drag the rectangle corner it only cut the visible view but not shrink or enlage the widget itself. How can I  resize the given widgets?

By the way, is the 'Vehicle Data Logger' demo project availale for downloading for a further study?

I am with a STM32F746-Discovery board.

 

Thank you.

Answer 1

Hi,

most of the ready-to-use widgets are designed and implemented with a fixed size, so that they can be used on popular displays starting from 2,8" with 320x240 up to 7" with 800x480.

Of course, there might be applications, where these kind of widgets are too small or too large. The widgets are implemented in a fixed size, because of two reasons: 

1. Slight scaling results often in an unsharp result - this can be seen on 1 pixel wide lines or on text printed with small fonts.

2. Scaling is very slow compared to simple copy operations on embedded systems without GPU.

Nevertheless, you can use these widgets as templates and adapt the implementation - or you can implement your widgets according your design requirements. The provided templates will help you to realize your set of widgets.

Concerning the Vehicle Data Logger: This demo will be part of the provided examples in one of the next versions. At the moment it is not completely cleaned and documented. Nevertheless, you can download the current version and adapt it according your needs.

Best regards,

Manfred

Comments

Hi Manfred,

Thanks for the rapid reply. 

In order to get a smaller gauge I've got some idea from the note of 'unit Flat': 

"if you want to change the appearance of the widgets, you have the following posibilities:

  C) create a copy of the widget classes within on of your units and adapt the implementation according your needs. 

The bitmap resources within this unit are used to draw the different widgets.
If you want to change the bitmaps of the widgets, please do NOT modify this unit! Just create variants of these bitmap resources within one of your units and use the image files that meets your design ideas. The widgets take care on the new image sizes."

Therefore, I just copied 'class Core::group Gauge' into a new created 'unit UserResources' now it called 'UserResources::Gauge' but still under 'Class Core::Group' seen from Browser. However, I couldn't drag it into my GUI main screen (class Application:Application) .   Similarly, any other widget like 'Flat::Gauge' in the Browser could not be dragged into my screen. I could only drag widgets from Templates in to my screen.

Please give me some advise, thank you very much.

---

Hi,

if you just want to have a smaller variant of the Flat Gauge widget, you can do the following (as written in the documentation you found):

• Create a new project
• Add a gauge widget from the gallery into your application
• Make a copy of the gauge bitmap and needle bitmap (on your file system) and adpat the size with an image editor (e.g. Photoshop).
• Search within the Browser of the Gallery for the resources FlatGauge and FlatNeedle and make a variant of the bitmap resources within your Unit.
• Set the attribute 'FileName' of the resources to the new bitmaps.
• Make a variant of the fonts FontM and FontXL within your unit and adapt the font height

These are the variants of the bitmap and font resources used for the gauge:

And this is the result (here the size is 50% of the original implementation):

There was no adaptation within the implementation of the gauge necessary. Of course, if you want to have different scale and needle images, then it might be necessary to adpat the layout of the widget. In this case, you can make a copy of the widget - as written in the description.

Here is the project of the above described gauge.

I hope this helps...