646 views
in GUI Development by

Hello, we have a requirement to show some values at a bigger font size than 256 px height which seems to be the maximum allowed currently in EmWi. I get an error if I try to set the font size to anything larger. Although, on other tools like photoshop we have no issues expanding to a large font size using the same font ttf file. Also, the curves on the letters/numbers look different on EmWi than it's supposed to. I've attached the images from PhotoShop for comparison. I'm hoping this is not an EmWi limitation, please let me know your thoughts.

1 Answer

+1 vote
by
 
Best answer

Hi,

Unfortunatly the font glyph cache where the signs are stored is limited to handle with glyphs of maximum 256 pixel height. Actually there is no workaround for this. We would need to modify the graphics engine.

The unique solution I see is to display this very large Text composed of bitmaps. The idea is as follows:

- With Photoshop create a new empty image large enough to store all the text signs. Divide the image in equally sized cells and within every cell draw one sign. Use white color for the text signs. The background of the image should be transparent.

- In Embedded Wizard add a new Bitmap Resource. Set the property AlphaName of the Bitmap Resource to the name of the previously prepared image file. In this manner you create an alpha-only Bitmap Resource you can colorized at the runtime.

- then set the property FrameSize of the Bitmap Resource to the size of a cell you used when creating the image in filling it with the signs. In this manner you create a multi-frame Bitmap Resource. To display one sign you just need to select the corresponding frame.

- Then use the Image view to display the prepared Bitmap Resource. With its property FrameNumber you can select the desired sign from the Bitmap Resource. See Select the frame number of a multi-frame bitmap resource.

- Changing the property Color of the Image view will colorized the displayed sign.

- You can add more Image views and arrange them side by side. In this manner you can display Text which is longer than one sign.

This implementation requires that you extract from the text to display the codes of the separate signs and use these codes to select the corresponding Bitmap Resource frame in the Image views. Use the Index operator to extract the sign codes from the string.

Regarding your other question, what do you mean with letters and curves look different? Embedded Wizard uses Windows own font engine to raster the fonts. May be photoshop has its own version of the engine which behaves differently.

Hope it helps you further.

Best regards

Paul Banach

by
Hello Paul,

     Thanks for your answer. I'm close to needing this feature implemented and I think I almost get what you're saying but not quite. Do you mean a digit/alphabet when you say "sign"? Also, these are numbers with a decimal point that would need to be displayed. We have a requirement to show them in larger than size 256 when there are only a few digits to show. The font then becomes smaller and smaller as the number of digits increase to fit them all in the screen. So, I'd like to use your idea for just the largest font size and then transition to a regular text box for the fonts <= 256. Which is no problem, I can have these images to begin with and then set them to invisible when I'm showing the textbox. But, I'd really like to understand what you're proposing as a solution. In addition to my question regarding "sign", would I then need to have a multi frame image to show 0,1,2..9 on different frames that would be turned on as appropriate? Appreciate any examples you can point me to, I found one example that showed how we can change the color of an image as part of the standard examples, maybe I missed something on the website? Thanks!
by

Hi,

yes, with sign I mean a single digit/letter/dot/etc.. Better would be to say glyph. The idea was to create a PNG file containing images of all needed glyphs (digits, letters, dots, etc.) you want to display on the screen. Then, as described above, you add to your Embedded Wizard project a bitmap resource and configure it with this prepared PNG file. Important here, you should configure the bitmap resource as multi-frame and alpha-only. Once the bitmap resource is available, you can select the individual image frames (the glyphs (digits/letter)) and colorize them at the runtime. This is described in my answer above. The following screenshot demonstrates how the design of such PNG file looks like. Here I used the Affinity Designer. You can use Photohop, etc.:

Anyway, you should consider that this bitmap approach requires a lot of memory. In the above screenshot the bitmap has 2222 x 300 pixel size. This means, 666 kB RAM or ROM when the bitmaps are stored uncrompressed. I don't know your target device, but I fear it will be too large ...

Well, in the few last weeks we have received several requests from other customers asking us to support fonts with > 256 pixel height. In the meantime we have a first adapted version of the Platform Package functionality allowing fonts with up to max. 1024 pixel height. Thus, instead of implementing the above described bitmap approach, you could use this new version and display the large text as usual by using fonts.

This adaptation requires Embedded Wizard 8.20. If you are using an older version, you will need to update to 8.20 first. If you are interesting in this version please contact us via support@embedded-wizard.de

Please note, that with this new adaptation you will eventually need to configure the graphics engine to reserve more memory for the glyph cache. For example, when you intend to display 512 pixel large fonts, the glyph cache should occupy at least 262 kB RAM. This cache memory is needed to store temporarily decompressed glyphs. Does your target system have so much RAM?

There is also another aspect. In your question you are speaking about font scaling. You want the text to flexibly adapt its size to the available area. The problem here is, the font information, (the glyphs) is rasterized already at the code generation time. In other words, you specify the desired font size in your project, and during code generation Embedded Wizard creates small bitmaps with all the signs already rasterized for the specified height. Changing the height at the runtime is not possible.

This limitation results from the lower-end position of the target systems, Embedded Wizard is intended for. Such target systems have usually few RAM and a poor CPU. An alternative approach of rasterizing the font glyphs at the runtime by using a font engine creates too much overweight.

Thus, rasterizing the fonts already at the code generation time avoids the usage of an additional font engine in the target system. On the other hand, the font height can't be changed. To have scalable fonts, you will need several font resources in your project configured with different sizes. For example, font #1: 512 pixel, font #2: 480 pixel, font #3: 450 pixel, and so far. In practice, the number of fonts depends on how fine you want the scaling to work. You can image, this will result in a lot of code occupied by fonts just to show the effect of font scaling ... The question here, is it worth?

An alternative approach would be to use a single font and scale it as image. Embedded Wizard provides a view intended to display a scaled image of a component. In this manner you could prepare the text in a component, which is larger than the screen and display this component scaled down. And again, this approach has also disadvantages. The first is, the scaling is CPU intensive. I don't know how often the screen content should refresh in your application but scaling large screen areas will be slow. The second aspect is the additional RAM needed for the scaled component. This depends on the size of the affected component and the used color format. For example, by 640x512 pixel large component and RGB565 color format, you would need additonal 655 kB RAM. Finally, with scaling the results may eventually appear a little bit blurred.

Well, the combination of very-very big fonts and additionally scaling the fonts will be difficult. Would it be possible to modify your GUI design to use only one large font and avoiud the scaling? If not, I would recomend to limit the font scaling effect to max. 2 fonts.

Best reagrds

Paul Banach

by
Thanks Paul, upgrading sounds like the best way to go for us. I've contacted your support team.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...