Create your own widgets from images and sprite strips

How an image widget works

An image widget is a sequence of pictures arranged from the lowest reading to the highest. A CPU usage gauge might start with an empty bar and end with a full one. A temperature gauge could change colour as it fills, or show a dial with the needle in a different position in each frame.

You draw the whole appearance of each state. CLU VIEW maps the sensor reading to one of those frames. It does not create the in-between artwork, rotate a needle inside your image, or play the sequence on a timer.

NEW GAUGE and NEW BAR use the same frame-selection method. Choose the category that suits your design. The shape comes from your artwork, so a bar can look like a fuel tank and a gauge can look like a row of lights.

For one static logo or decorative image, use the library's MEDIA category instead. Use CUSTOM when the image needs to change with a sensor.

Prepare your artwork

Start with a few states so you can check the idea before drawing a full sequence. Five frames are enough for the example below. A longer sequence gives you smaller visual steps; the pack builder's frame-count control supports 2 to 128 frames.

• Keep every frame the same size. Use a fixed canvas, such as 200 × 200 pixels for a dial. Keep its centre, outer edge and labels in the same positions throughout.
• Order the states from low to high. Use names such as frame-001.png, frame-002.png and frame-003.png to keep the sequence clear. Check the import preview rather than relying on the file picker to preserve your intended order.
• Use PNG for transparent artwork. The picker also accepts JPEG, WebP and BMP. JPEG includes an opaque background. GIF animations and SVG files are not inputs for this pack builder.
• Keep the canvas padding consistent. Tight-cropping each frame separately can make the image jump or change size as the reading moves.

Make the artwork close to its intended display size. Large frames consume more memory even when the file compresses well. If a pack is rejected as too large, reduce the frame dimensions or use fewer frames.

Method 1: combine separate images

1. Open the widget library on the left and select CUSTOM. Clear the library search box if it is still showing search results.
2. Choose NEW GAUGE or NEW BAR. Give the pack a recognisable name, such as Green CPU Bar.
3. Click COMBINE IMAGES and select all the frames for the sequence.
4. CLU VIEW combines them into a vertical strip and sets Frames to the number of selected images. Keep Direction set to Vertical for this combined result.
5. Move the PREVIEW slider through every frame. Check that it starts at the lowest state, ends at the highest, and stays aligned throughout.
6. Click SAVE PACK. Back in CUSTOM, click the saved pack's card to add a widget to the canvas.

When source images have different dimensions, CLU VIEW fits and centres them into equal cells based on the largest width and height. That can change the apparent size of your artwork. Exporting every frame on the same canvas avoids this.

Method 2: import a sprite strip

A sprite strip is one image containing all the frames in a single row or column. Each cell must have identical dimensions, with no gaps or outer margins added between cells. A sheet with several rows and columns needs to be rearranged into one strip first.

For five frames of 200 × 200 pixels, export a 1000 × 200 horizontal image or a 200 × 1000 vertical image. Horizontal strips run left to right; vertical strips run top to bottom.

1. Go to CUSTOM → NEW GAUGE or NEW BAR, then name the pack.
2. Click PICK SPRITE STRIP and select your image.
3. Set Frames to the actual number of cells. Set Direction to Horizontal for a row or Vertical for a column.
4. Scrub through the preview. Each position should show one complete frame, with no slice of the next frame visible.
5. Click SAVE PACK, then click the pack's card in CUSTOM to add it.

Direction describes how the frames are laid out in the file. A bar that fills upwards can still use a horizontal strip.

Connect the widget to a sensor

Select the widget on the canvas. In PROPERTIES → DATA, choose its Monitor, then set Min and Max. Choose the monitor first: changing it resets the range to that sensor's defaults.

For a CPU usage bar, use CPU Usage with Min 0 and Max 100. For a temperature design, choose the temperature sensor and a range that matches the scale drawn into your images. These settings control the artwork's scale; they do not change the sensor reading.

With five frames and a 0–100 range, the selection works like this:

CLU VIEW rounds down between frames. The last frame appears only when the mapped reading reaches Max. Keep that in mind if you draw a warning into the final image: a red frame at the end of a 0–100 temperature scale will not appear at 80. Place warning artwork in the appropriate earlier frames, or choose a different scale and adjust any printed labels to match.

Readings below Min stay on the first frame; readings above Max stay on the last. Max must be greater than Min. To reverse the visual progression, reverse the order of the artwork.

Resize and position the widget on the canvas. The frame keeps its proportions and is centred inside the available space. For an exact number beside the image, add a separate text monitor and bind it to the same sensor.

Reuse it and export the profile

The saved pack stays in CUSTOM, so you can add it again and connect each copy to a different sensor. On an existing image widget, PROPERTIES → IMAGE PACK lets you choose another saved pack of the same type. Manage Packs… opens the builder to create and assign a new one.

To share a finished layout, open the profile manager and use the profile's Export to file action. The exported JSON embeds the image packs used by that profile's widgets. Importing the profile brings those images with it; a pack sitting unused in the library is not included.

Keep your original image files or strip as the editable source. Deleting a saved pack makes widgets using it fall back to a placeholder. For more on profiles and display setup, see the CLU VIEW guide.

When the result looks wrong

The preview shows chopped-up images

Check Frames and Direction. The strip must divide evenly along the selected axis. Remove spacing between cells, and make sure you exported a single row or column.

The artwork jumps between frames

Check the source canvas size and object position. Use the same padding and alignment in every frame, especially around a dial's pivot or a bar's fixed edge.

The preview works, but the widget barely changes

Check the selected Monitor and its Min/Max range. A sensor moving between 30 and 40 on a five-frame, 0–100 scale stays on one frame. Add more frames if you want smaller steps. A separate text monitor can help confirm that the sensor is reporting changing values.

The widget shows an empty box

Saving a pack does not add it to the canvas automatically when you create it from CUSTOM. Click its card after saving. If an existing widget shows a placeholder, select it and check its assigned pack under IMAGE PACK.

The image has the wrong colours or a solid background

Check the source image and any effects or filters applied to the panel. The colours inside a loaded sprite come from the artwork; the widget's accent setting does not repaint those pixels. Export a transparent PNG if the background should show through.

The pack is too large to save

Reduce the frame size or count and try again. CLU VIEW checks the embedded image data when saving, so the size shown for the original file on disk is not the whole limit. Avoid exporting a huge strip for a widget that will only occupy a small part of the screen.