Show touch feedback on a transparent bitmap button

Why does a transparent bitmap button give no touch feedback?

Both button states are drawn in the same key color, so the ON state changes nothing on screen: the OFF image is the key color, the ON image is the key color, and the editor has no pixels of its own to show you.

Color-key transparency is an exact swap: every pixel whose value equals the key color is replaced by what sits beneath it, and every other pixel is drawn as it stands. An all-white bitmap with white set as the key therefore vanishes completely in both states. The touch layer still works, because touch geometry follows the button's area, so the pop-up opens and the state toggles while no pixel on the screen moves. The wiring is right and the drawing is silent, which is why the screen can pass a desktop check and still feel dead at the machine.

Can a bitmap button invert the pixels underneath it?

Plan for no: a bitmap button object draws one of the images you load into it for each state, and nothing in that drawing reads the pixels sitting underneath; the only place such a mode can exist is the button's property list.

What HMI editors document instead is the multi-state bitmap, an object that holds several images and draws the frame that matches the current state. Buttons built on that idea swap the OFF image for the ON image, and nothing in that pipeline looks at the screen behind the object. An invert-the-background mode, a reverse overlay, is a feature idea, not a property to design around. The practical test takes a minute: open the bitmap button's properties and read every entry. If a transparent, inverted or overlay drawing mode is listed for a state, use it and stop there. If the states take images only, build the feedback from the images and the button's own tag.

What do the symptoms around a transparent overlay point to?

Each failure on a keyed overlay has one dominant cause: no change on press points to both images in the key color, a meter that vanishes mid-press points to a solid ON fill, and a dead touch points to a stacked object eating the press.

• Nothing changes on the press. Both state images are solid key color. This is the case this page fixes.
• The meter disappears for the length of the press. The ON image is filled solid. Redraw it with a clear interior; a filled overlay hides the live process value at the exact moment the operator wants to see it.
• The touch is dead, or dead in patches. A touch-sensitive object stacked above the button is taking the press, because the top-most touch-sensitive object on the area wins. Move the indicator below the button and take it out of the touch order.
• A light halo outlines the overlay even at rest. Near-key pixels: JPEG compression and anti-aliased edges leave values close to the key color, and the key match is exact, so those pixels stay opaque. Re-save the image in a lossless format with smoothing off.
• The pop-up opens twice on one press. Two touch objects share the area. Delete the duplicate or make the frame non-touch.

What should you check in the editor before building the indicator?

Three properties decide the build: whether the button takes separate OFF and ON images, whether any other object can be animated from a bit tag, and which tag the button writes when pressed.

1. Per-state images. Open the bitmap button's properties and look for separate OFF and ON images. Two slots open the border route and make the second check optional. One image with the state shown by shading only points to the frame route.
2. Bit-driven animation elsewhere. Look for a visibility, color or blink animation on a plain rectangle or frame object, driven by a tag. If the editor offers it, the frame route works even with a single-image button.
3. The tag the button writes. A momentary bit that returns to 0 on release is the right driver: the indicator shows while the finger is down and clears on release. How long a tap keeps that bit set, counted in PLC scans, is quantified in how many PLC scans an HMI momentary button bit stays on. A latching bit leaves the indicator lit until something clears it, which reads as a stuck fault, so move to a momentary bit. A button that only opens a pop-up and writes nothing already carries its feedback in the pop-up: if it opens within a beat, leave the design as it is; if there is a visible blank interval, add a bit set on press and cleared by the pop-up's open action.

How do you build an ON state that leaves the meter visible?

Build the ON image as the same key-color fill with a colored border 4 pixels wide and the interior untouched, or place an unfilled rectangle around the meter and animate its visibility from the button's momentary bit.

1. Copy the project and work on the offline copy first, and time the download for a moment when no operator is partway through a setpoint on that screen.
2. Draw the OFF image as a solid fill in the key color, sized to the meter's drawn shape rather than its bounding box, because a button's bounds can line up while its visible pixels sit elsewhere; the gap between bounds and visible pixels is set out in HMI shape alignment: bounds align, visible pixels may not. Set that color as transparent.
3. If the button takes separate state images, draw the ON image as the same key-color fill with a colored border 3 to 5 pixels wide, interior untouched, and save it lossless with anti-aliasing off. Pick a border color that matches nothing on the meter face.
4. If the button takes one image, place a rectangle outline with no fill around the meter. Stack the layers with the meter at the bottom, the frame in the middle and the transparent button on top, and set the frame as a non-touch object. Animate the frame's visibility from the momentary bit so it shows when the bit is 1. If operators tap faster than the eye catches the frame, hold it open by gating its visibility on a timer done bit, as gating HMI button visibility on a PLC timer done bit describes. If the frame never lights at all, check whether the tag pulses for a single scan; why an R_TRIG pulse never shows on the HMI screen covers that case.
5. For a dimmed touch look instead of a frame, draw the ON image as a sparse stipple of a dark color over the key color, so the meter shows through the gaps and reads as shaded.
6. Download to the panel and run the checks below; the simulator draws the same screen, but touch latency and layer hit-testing belong to the panel.

Example: how wide should the ON border be on a 1280 × 800 panel?

On a 10.1-inch 1280 × 800 panel the pixel pitch works out to 0.17 mm, so a 4 pixel border is 0.68 mm, which subtends 3.9 arcminutes at a 0.6 m viewing distance, about 4× the 1 arcminute resolution limit of normal vision.

Illustrative inputs: a 10.1-inch 16:10 panel at 1280 × 800, an analog meter object 150 × 100 px, the operator standing 0.6 m from the screen, and a conspicuity target of 3 arcminutes of visual angle, about 3× the 1 arcminute resolution limit of normal vision, since markings sized at the acuity limit are hard to catch in the corner of the eye.

• Pixel pitch: √(16² + 10²) = √356 = 18.87, so the active width is 10.1 in × 16 ÷ 18.87 = 8.56 in = 217.5 mm, and the pitch is 217.5 mm ÷ 1280 px = 0.170 mm per pixel.
• Border size: 4 px × 0.170 mm = 0.68 mm.
• Visual angle at 0.6 m: 0.68 mm ÷ 600 mm = 0.00113 rad, and 0.00113 × 3438 arcmin per rad = 3.9 arcminutes, above the 3 arcminute target.
• Minimum at this distance: (3 ÷ 3438) rad × 600 mm = 0.52 mm, and 0.52 ÷ 0.170 = 3.1 px, so 3 px is the floor here and 4 px carries margin.
• Same panel watched from 1.0 m: 0.87 mm ÷ 0.170 = 5.1 px, so use 5 px.
• Same 10-inch class at 1920 × 1080: the width is 10.1 in × 16 ÷ √(16² + 9²) = 8.80 in = 223.6 mm, the pitch drops to 223.6 ÷ 1920 = 0.116 mm, and 0.52 ÷ 0.116 = 4.5 px, so 5 px at the same 0.6 m.
• Meter coverage: the border ring is 150 × 100 − 142 × 92 = 15,000 − 13,064 = 1,936 px, about 13% of the meter face, with 87% left clear.

Result: a 4 pixel border in a saturated color reads at a glance from the operator's standing spot, and the 142 × 92 px clear interior keeps the needle and digits readable through the whole press.

How do you verify the indicator on the panel?

Press the meter's center, corners and edges on the panel itself: the border or frame must appear at once, clear on release, cover the full area, and leave the meter updating underneath.

• Center press. The border or frame appears at once and clears on release.
• Corners and mid-edges. All presses land: no dead zone where the frame or another object sits above the button.
• Meter during the press. Hold for 2 to 3 seconds and watch the needle and digits keep updating, since the ON image is clear inside the border. If the meter freezes while the overlay is up, the editor may be holding bitmap draws in a cache; one runtime's live bitmap cache setting is covered in NumCachedImages 0 for live WebVisu bitmap updates.
• Edges at rest. No light halo around the overlay; a halo points to near-key pixels, so re-save lossless with smoothing off.
• One pop-up per press. Press 10 times in a row: a second open points to two touch objects sharing the area, and an intermittent dead corner points to the touch order.

Which fix should you pick for your screen?

Pick the ON image with a 4 pixel border when the button takes separate state images, the bit-driven unfilled frame when it takes one, and neither when the editor offers no per-state images and no bit animation anywhere on the screen.

Recommendation: draw the touch feedback into the ON bitmap whenever the button object takes separate state images, using the key-color fill with a 4 pixel border saved lossless with anti-aliasing off; fall back to a non-touch frame animated from the momentary bit only when the button takes a single image; and when the editor offers neither route, ask the manufacturer's support whether a touch-indication option exists in your software version, give them the panel model and software version, and keep every edit inside the supported editor.

None of this argues for a new screen; the fix lives in the project. If the cell does want a separate board for shift targets, andon counts or maintenance notices beside the machine, that is a standalone display doing its own job, and the shop-floor display category is where those units sit.

Questions