1.3k views
in GUI Development by
I have a gif image. How to include it in Embedded wizard screen so that I get the animated GIF image in the screen.

1 Answer

0 votes
by

Hello Geetha,

direct import for animated GIF is not possible. What can you do? Primarily, you should understand how EmWi handles animated bitmap resources. Especially, please note the expected layout of the provided image. As explain in this doc, the original image file has to contain all the frames arranged side by side. For this purpose:

Step 1: Extract from the GIF all the included images.

Step 2: Store the images in one large image file. The images should be arranged in columns/rows according to the order in which they should be shown.

Step 3: Include the resulting image file to Embedded Wizard similarly as you do with any other image.

Step 4: Configure the animation speed for the bitmap resource.

For the steps 1 and evtl. 2 you will find diverse online conversion services. There you can upload the gif and download all the images. You can also use an adequate graphic editor for this purpose.

As alternative: With EmWi 9.30 we have added the import for motion JPEG (MJPEG) files. In such case, you can convert the GIF in MJPEG (again there are online services to do this or you use a converter tool) and add the MJPEG to EmWi 9.30 similartly as you do with other regular image files.

Does it help you?

Best regards

Paul Banach

 

by
Hi Paul,

After spliting the GIF image I get around 629 image files. I have to arrange all these images into single image and then upload in EW?
by
Hello Geetha,

629 image file is a large number. Before you proceed I would rethink your application case. Can you tell me your EmWi version and the size of a single GIF image (width x height) in pixel?

Best regards

Paul Banach
by
EmWi version is 9.20. GIF image size is 1280x400
by

Hello Geetha,

thank you for the further information. Knowing this I have to say you, that it will not work with EmWi 9.20. The animated bitmap functionality available in Embedded Wizard is intended to display small contents like an animated icon within a button, etc. It is not intended to display full screen video contents. Why?

Depending on the mode how you store the bitmap resources, the resulting Flash (ROM) or/and RAM occupacion is very high. Let's calculate.:

Case 1: The bitmap resources in your project are configured in the mode Compressed. In such case just in the moment, when you access the bitmap resource all 629 image frames are decompressed and loaded into RAM. Assuming the color format of the bitmap resource is RGBA8888 (32-bit per pixel), it will occupy 629 * 1280 * 400 * 4 Bytes = 1,2 GB. Additionally, the compressed image contents will occupy Flash (ROM). How much ROM is occupied does depend on how good the image contents can be compressed. In worst case, you will need 1.2 GB flash.

Case 2: The bitmap resources in your project are configured in the mode DirectAccess. In such case no RAM is needed, but the image contents need to be stored in uncompressed format in flash. You will need 1.2 GB flash.

What can you do?

Option 1: Rethink your application case. Is it really necessary to show such big animation?

Option 2: Use a separate Video Decoder and store the animation as motion JPEG or other format optimized for video encoding.

Option 3: You can try EmWi 9.30 (e.g. the Free edition). In this version we have reworked the memory management of bitmap resources. There are four advantages you may find as interesting:

1. The bitmap resource can be stored in Index8 format. This reduces the memory usage up to factor 4.

2. Animated, multiframe bitmaps stored in Compressed format are not loaded at once in RAM anymore. Instead the system loads the frames individually and discards them also automatically. The RAM occupacion can be reduced to a single frame (e.g. 1280 * 400 = 512 kB in case of Index8 format).

3. You can import directly a MJPEG file (motion JPEG) file. Embedded Wiuzard will thereupon automatically exctract the frames from the file.

4. Elimination of equal frames. If the animation contains equal frames, Embeded Wizard detects it and stores only one exemplar of each individual frame.

Best regards

Paul Banach

by
Hi Paul,

Tried in EmWi 9.30, even then getting Out of memory exception.
by
Hi Geetha,

I suppose the exception is reported in Embedded Wizard Studio and not in the target system, right? This behavior can occur when large image contents are imported. In order to convert and optimize the bitmap generation, Embedded Wizard needs to load all frames at once into the memory. Then the image contents are processed. Depending on how many equal frames are found in the animation the resuting memory usage does differ. I hoped it would work for you. Evidently it was not the case.

I think the remaining options are 1 or 2. In the past we had customers who integrated a video player exact to support such application cases of displaying long and large video sequences. If the option 1 is not acceptable, you will need to integrate a video decoder in your application.

Best regards

Paul Banach
by
Hi Geetha,

can you please describe your application a little bit more detailed?
Do you plan to play real video streams or are you thinking on pure animations, that maybe can also be done in another way also.

How do you plan to store the video data. According to your description, we're talking about 30 sec. of HD video which means at least ~50MB in case of MJPEG.
 

What is your target platform?
Which video frame rate do you expect?

We already did some example projects with MJPEG video decoding integrated in a Embedded Wizard GUI on different platforms where the video files are stored on a SD card for example.

Regards,
Martin
by
Hi Paul,

I have created a large image file which could hold 630 images.

When this file is added as a bitmap, it is getting animated, but a blink effect is coming. Once all the frames are loaded again when loading the first frame this problem is coming. Is there any way to show the frames without the change effect
by
Hello Geetha,

can you provide us an example to analyze this?

Best regards

Paul Banach
by
Hi Paul,

A normal gif imag​e shows the flow without any time delay. Here there is delay(blink effect).It is also taking very long time to load this image. Any solution for that as well.
by
Hello Geetha,

can you provide us your example to analyze this?

Best regards

Paul Banach
by

In the above attached image, a smoke effect is shown. This effect is not continous. Once all the frames are shown, it starts again from first frame with a delay. The delay is shown as in below image and again the smoke effect starts.

by
Hello Geetha,

based on your description I can't give any concrete indication for the problem. I would need to test and analyze it. Generally, delays during the playback of an animated bitmap are not expected. Can you verify whether the frames within the image file are composed correctly? And, of course, you can send me the image file for verification purpose. You can do this via e-mail support@embedded-wizard.de.

Anway, as mentioned in my preceding comments, the animated bitmaps are not optimized for large and/or long contents. Have you seen the comment of Martin (mli) concerning the integration of a video player?

Best regards

Paul Banach

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

...