When the HMI editor has no command for authoring new objects, build reusable controls from standard pieces: configure a text-free button, overlay a static image for a custom bitmap, group them, and save the group to the user library. Test the saved item on the target panel before the first production download.
You want a control the editor does not ship: a back button with your own arrow, a start and stop pair that looks identical on every screen. When the HMI editor has no command for authoring a new object type, the supported route is composition. Configure standard objects until they look and act like the control you need, group them, and save the group to the editor's user library. The saved item then drops into any project that PC can open. Where your installed version does offer a native custom-object or style workflow, use it first and treat the method below as the fallback. Everything here stays inside the editor's documented commands.
What a group can be
A group is a set of screen objects that select, move, copy and save as one unit. Grouping changes nothing inside: the button keeps its configured action, the label keeps its text, the image keeps its bitmap. That is the trick and the limit in one sentence. A group packages what exists; behavior that no standard object offers will not appear because you grouped things.
The user library is where the saved group goes. You select the finished objects, run the editor's library command, and the item is written to a file on the engineering PC, ready to insert into any project that PC opens. Editors in this field document the same pattern under different names: a group library, a global library saved to disk, a folder of user controls. The names move; the workflow is select, save, insert.
Composites cover most shop-floor requests:
| Control you want | Objects to group |
|---|---|
| Back button with your own arrow graphic | Button with no text + static image object |
| Start and stop pair with one look | Two buttons + two text labels |
| Header strip with fixed caption and icon | Rectangle object + text label + static image object |
Two other reuse tools live outside grouping. Typed input is already reusable in most editors: link a user-defined keypad to a numeric entry object once and every entry field can call it. A control big enough to deserve its own layer is better built as an HMI pop-up screen with a screen window, then reused across the screens of the same project.
What you need
- An editor that supports grouping and a user library. Search the installed help for both words if you have never used them.
- A button object and a static image object.
- The bitmap drawn at the button's exact pixel size.
- A project copy or a spare test screen.
- The target panel, for the press test at the end.
Put a custom bitmap on a button
The button supplies the action; the static image object supplies the picture. Configure the button with no text and the action it must perform, then place a static image object exactly over it. Size the image to the button's pixel rectangle so the panel does no scaling work: a 96 x 96 px image on a 96 x 96 px button draws edge to edge at 1:1. Draw the bitmap at that same size to begin with; a 300 x 300 px image squeezed into the object gets resampled and looks soft on the panel.
Check the import preview for three things: clean edges, transparency the editor kept or dropped, and an overlay that covers only the button rectangle and none of the neighboring controls. Write down the button's configured action before you cover it, because a covered button is easier to select from the object list than from the screen.
Build and save the item
- Work on a copy of the project, or on a spare test screen, so production screens stay untouched until the item passes its checks.
- Place the button. Set its action, for example return to the main screen, and clear its text label.
- Place a static image object over the button and give both objects the same pixel rectangle, 96 x 96 px in the example below. Import the bitmap drawn at exactly that size.
- Set the snap grid, 8 px in the example, and nudge both objects until their edges sit on grid lines. Edges that share a grid line survive copy, paste and later edits; off-grid edges drift.
- Select every object that belongs to the control and nothing else. One stray object in the selection rides into the library with it.
- With the selection active, right-click and run the editor's library command. Older guidance for one editor family labels the command
Object->Library...and saves the selection to the user library on the PC. Menu wording moves between versions and vendors, so if the item is missing, search the installed help for the library or group command. - Save the project, open a different project, and insert the item from the user library onto a test screen there.
- Download to the target panel and press-test on the touchscreen. Check the panel's firmware revision before the transfer so you know which build you are testing.
Example: three 96 x 96 px controls on an 800 x 480 px panel
A machine template runs 800 x 480 px screens and needs three header controls: back, home and menu. Set the snap grid to 8 px, draw each button at 96 x 96 px, overlay each image at 96 x 96 px, and leave 24 px gaps between controls.
The row width is 3 x 96 + 2 x 24 = 288 + 48 = 336 px. Centered on the 800 px screen, each side margin is (800 - 336) / 2 = 232 px, so the left edges land at x = 232, x = 352 and x = 472, because 232 + 96 + 24 = 352 and 352 + 96 + 24 = 472. All three edges sit on the 8 px grid: 232 / 8 = 29, 352 / 8 = 44, 472 / 8 = 59, no remainders. Vertically, set the row's top edge at y = 32 so the bottom edge lands at 128 px, both on the grid.
Build one control, select the button and its image, and save the pair to the user library. Insert the item twice more for the other positions, then copy the finished row across the six screens of the template. When the second machine's project needs the same header, insert the item and re-point the action: the target screen in the new project's screen list usually carries a different number or name, so open the inserted button, set its target to the new project's main screen, and press-test on the panel.
Both projects end up with the same 96 x 96 px control, drawn 1:1 with no scaling, and the third machine family inserts it and changes one action.
How to check it worked
- Press-test on the panel, not just on the PC monitor: each control opens its target screen.
- Compare the drawn graphic against the editor's rectangle: it draws at its placed size with no stretched edges.
- Close and reopen the project: positions, sizes and actions are unchanged.
- Place two copies of the item on a scratch screen, edit one, save and reopen. If the second copy changed too, your editor links inserts to the library file, the file is the master, and you should version it by name. If the second copy stayed put, every insert is an independent copy and the library is only a starting point. Record which behavior your editor shows, because it decides how you ship an update.
- Power the panel off and on once and confirm the group draws the same on boot.
When grouping is the wrong tool
Grouping packages existing behavior. A new gesture, a value computed on the screen and drawn as a custom graphic, or an input mode no standard object offers needs the editor's scripting or macro feature, or an answer from the vendor's official support channel. Send the editor version and a small test project with the question. Keep every change inside the editor's documented commands: a project file edited outside them is unsupported, and every later transfer has to carry that workaround with it.
Recommendation: Group standard objects and save the result to the user library as soon as a control repeats on more than three screens or appears in a second project. Below that count, copy and paste is faster and carries no library file to maintain. Draw the overlay bitmap at the button's exact pixel size, test every saved item on the target panel once per revision, and version the library by name so an older project can be rebuilt exactly.
Questions
Can I edit a saved library item after other projects already use it?
Yes. Open a scratch project, insert the item, make the change, and save it back to the user library under a new version name. Projects already downloaded to panels keep the objects they were built with until you re-insert the item and transfer again, so renaming versions keeps every old project rebuildable. Never overwrite the only copy of a version a shipped project depends on.
How do I move the user library to another engineering PC?
The library lives in a file or folder on the PC that saved it. Copy that file together with the project files, and write down the editor version that created it, because a library from a newer editor may not open in an older one. After the copy, insert one item on a scratch screen and check its objects before you trust the whole set.
Why does the graphic on my button look stretched on the panel?
The image object is rescaling the bitmap. Draw the image at exactly the object's pixel size, 96 x 96 px into a 96 x 96 px object, and clear any stretch or fit-to-box option on the image object. If the panel's own resolution differs from the project resolution, the runtime scales the whole screen, so set the project resolution to match the panel.
Planning information, not legal or engineering advice. Rules differ by place: check codes and permits with your local authority and your licensed trades.