Play an animated GIF on an HMI touchscreen that lacks GIF support

The import list decides, not the screen size

The list of accepted image types is a property of the project software version. Open the import dialog on the editor build installed on your programming PC and read the file-type list; that list is the documented answer for your exact panel. The pattern across editors is wide. One widely used HMI editor documents its bitmap container as accepting .bmp, .jpeg, .jpg, .pcx and .tga, five static types with no GIF among them, while newer editors list GIF and PNG directly. Same hardware generation, different software version, different answer.

Renaming the file is not conversion. Changing .gif to .bmp edits the label after the dot; the bytes inside stay GIF. Conversion means an image tool rewrites the pixel data into the target format, one file per frame.

Read the resolution rule while the help file is open: frames should match the pixel area they occupy at the panel's native resolution. Modern panels run typically 1920 x 1080; take the exact figure from the panel's specification sheet and size the artwork to it, or the editor scales the image and softens the edges.

What you need

• The original GIF, kept outside the project so the sequence can be rebuilt without extracting again.
• An image editor or GIF utility that exports every frame as a numbered image sequence; the export is the same job as saving an image sequence with numbered filenames.
• The panel's project software, its help file entry for bitmap import, and a documented object that switches the displayed image or screen.
• A test panel, or a downtime window on the production one.

Steps

1. Confirm the two capabilities. Read the import dialog's type list and find the documented object that changes a displayed image or screen under timer or tag control; in most HMI editors that is a picture or image-display object whose visible frame follows a register value, or a set of screens stepped by an interval timer. If the type list has no usable static type, or no switching object exists, fit a static picture and stop.

2. Extract the frames in order. Export the GIF as frame001, frame002 and so on. Check every exported frame as a complete picture: many GIFs store only the pixels that changed from the previous frame, plus an instruction for clearing it, so a frame exported alone can show a fragment. Composite each frame onto the intended final background before exporting.

3. Convert each frame to a listed type. Keep the canvas size and the subject's position identical across all frames, or the icon jumps at every switch. Use a color depth the software accepts; where the editor takes a choice, indexed color at 256 colors stores 1 byte per pixel against 3 bytes for 24-bit. Open every converted file before importing.

4. Import through the documented path. Use the editor's own bitmap import function with the converted frames. A copy-paste from another tool brings formats the type list does not cover.

5. Build the sequence and set the dwell. Load frames 1 to N into the switching object and give each frame 100 ms of display time, 10 frames per second. That rate reads as one moving part. At 200 ms per frame, 5 frames per second, the motion is visible but the steps show, and that is as slow as the sequence should go. Drive the sequence with the editor's timer, or with a counter in the PLC if the motion should start and stop with the machine.

6. Give the sequence an idle state. When the line stops, the animation should hold on one frame through a documented idle or stopped condition. The icon then tells the truth about the machine instead of spinning on without it.

Example: a 12-frame mixer icon on a 15-inch panel

Inputs: an animated GIF of one mixer turn, 12 frames, each drawn at 100 x 100 pixels, looping in 1.2 s. Those three values are this example's own, sized like a typical small process icon; no panel specification fixes them. The panel is the 15-inch touch screen from the case above, and its editor documents .bmp only for this software version, the pattern this article addresses. The target type is 24-bit BMP at 3 bytes per pixel, the format's own arithmetic.

Rule in words: loop time equals frame count times dwell per frame, and added project storage equals frame count times width times height times bytes per pixel.

Arithmetic: 12 frames x 0.1 s = 1.2 s per loop, so a 100 ms dwell reproduces the GIF exactly. Storage: 100 x 100 = 10,000 pixels per frame; 10,000 x 3 bytes = 30,000 bytes, about 30 KB per frame; 12 x 30,000 bytes = 360,000 bytes, about 0.36 MB added to the project. At indexed 8-bit color the same frames take 10,000 bytes each, about 0.12 MB total.

Decision: build the sequence at 100 ms per frame. It reproduces the original loop to the millisecond and adds at most 0.36 MB. If the editor or the project transfer turns sluggish, switch to 6 frames at 200 ms: 6 x 0.2 s = 1.2 s, the same loop at half the storage. Below 5 frames per second the icon stops reading as one moving part, so 200 ms is the floor for the dwell.

How to check it worked

Validate or compile the project with no image-reference errors, then run it on the test panel. Watch the full loop: frames in order, no blanks, no flicker, no cropped edges, the icon holding position. Compare against the GIF playing on the bench PC. Then power-cycle the test panel once and confirm the project and its images return; a panel that drops its project on restart fails at exactly this step, which is why the save deserves its own check, as the note on an HMI panel losing its project after a power cycle shows.

Judge the finished animation from the operator's normal standing position. The legibility figures behind screen size and viewing distance apply here too: on the FHWA planning basis, 1 inch of capital letter height carries about 30 ft of viewing distance, so an icon meant to read from 10 ft needs capitals of about a third of an inch at minimum.

One line stays fixed: the animation is decoration. A running mixer is confirmed by its motor feedback, never by a cartoon blade, and a board that carries real line status is a separate job covered by shop-floor screens and andon-style boards.

Recommendation

Recommendation: If the import list shows GIF, import the animation whole and skip the rest of this page. If it does not, extract the frames, convert each to the documented bitmap type, and step them at 100 ms per frame with frames x dwell equal to the GIF's original loop time. Hold the dwell at 200 ms or faster, use indexed color when the editor offers it to keep the added storage near the 0.36 MB of the example or below, and fit a static picture when the software documents no switching object at all.

Questions