Draw an arc on an HMI screen without an arc tool

Why a covering circle fails over live objects

A covering shape is just another object in the screen's stacking order. Everything beneath it inside that rectangle disappears from the operator's view and from the touchscreen: static text, live values, and the active area of any touch object. The dangerous case is a button. The operator sees the button's face where it pokes out past the cover, presses it, and the press lands on the cover. A control that draws but cannot answer is a hazard next to a running machine.

Sliding the cover down the stack brings the circle back, because the circle is one object and stacking moves whole objects only. No arrangement shows one part of a circle and hides the rest.

If the gauge this arc belongs to is crowding the main screen, give it its own pop-up drawn with a screen window, as in build an HMI pop-up screen with a screen window.

What you need

• A saved copy of the project before the live screen changes.
• The arc's four numbers: center position, radius, start angle and end angle, all in panel pixels and degrees.
• A calculator, or a few spreadsheet rows, for the point coordinates.
• A drawing program that exports PNG with a transparent background, if you take the graphic route.
• Access to the panel, because the editor's preview and the panel's rendering differ at pixel scale.

Check for an arc tool first

Editors have gained curve primitives over the years, and several current ones draw arcs, partial circles and pies straight from the toolbox. Open the drawing or graphics group in the toolbox and search the manual's drawing tools page for arc. If the primitive is there, place it, set the start and end angles, and you are done. The rest of this article is for editors without one.

Build the arc from line segments

A polyline hugs a circular arc once each segment is short enough. The measure that matters is the sagitta: the greatest distance between the true arc and the chord standing in for it. A chord spanning angle θ on radius r departs from the arc by at most s = r × (1 − cos(θ/2)). Hold s at half a drawn pixel and the facets never resolve on the panel.

1. Set the tolerance s to 0.5 px. Half a drawn pixel matches the panel's own stair-stepping, so a tighter tolerance buys nothing visible.
2. Compute the segment angle from θ = 2 × arccos(1 − s ÷ r). At r = 60 px this is 2 × arccos(0.99167) = 14.8°, which rounds to 15° per segment.
3. Divide the arc angle by the segment angle and round up: a 90° arc at 15° per segment takes 6 segments and 7 points.
4. Compute each point from the arc's center: x = center x + r × cos(angle), y = center y + r × sin(angle), stepping the angle by the segment angle, and round every coordinate to a whole pixel.
5. Place one line object per segment, typing the coordinates into the object's position fields. Give every segment the same line width; some editors cap line width at 4, and mixed widths step at every joint.
6. Close each joint exactly: each segment's start point equals the previous segment's end point. Inspect the joints at 400% zoom, then judge the curve at 100%, because the panel never shows the zoomed edge.

If the curve is a moving pointer's path rather than a static dial mark, an object can ride a circular path instead; animate an object around a circle on an HMI screen covers that job.

Use a transparent graphic instead

Prominent curves, gauge dials with tick marks and arcs that need a smooth edge come out better as a prepared image. Draw the arc at 1:1 panel pixels in any drawing program, on a transparent background, and export PNG. Import it through the editor's image or graphic object, size it 1:1, and position it by its corner coordinates.

Test the transparency before the asset reaches the screen: place the imported image over a solid-colored rectangle. Color showing through around the stroke means the editor kept the alpha channel. An image that arrives as a solid box has been flattened, and a solid box over the screen is the masking problem again with sharper edges.

Then press the controls underneath. Some editors make imported images click-through; others treat the whole rectangle as one hit region, so a wide PNG can swallow presses near a row of buttons. Shrink the image to the arc's bounding box or drop it down the stacking order if a press fails. Transparent bitmaps can also carry their own press behavior; touch feedback on a transparent bitmap button shows what a panel can do with one.

Example: a 90 degree gauge arc with a 60 pixel radius

Inputs. A quarter-circle dial mark squeezed between text and indicators: 90° of arc, beginning at the 0° angle. Radius r = 60 px in panel pixels, chosen as a common gauge-face radius; rescale for your own. Tolerance s = 0.5 px, chosen to sit under the panel's pixel grid so the facets never resolve. These three are example inputs; the rule below is exact geometry.

Rule. The rule is the sagitta formula above: a chord spanning angle θ on radius r departs from the true arc by at most s = r × (1 − cos(θ/2)), the greatest gap at the chord's midpoint. Pick θ so s stays at or under 0.5 px.

Arithmetic. cos(θ/2) = 1 − s ÷ r = 1 − 0.5 ÷ 60 = 0.99167, so θ = 2 × arccos(0.99167) = 2 × 7.40° = 14.8°, rounded to 15° per segment. Check at 15°: s = 60 × (1 − cos 7.5°) = 60 × (1 − 0.99144) = 60 × 0.00856 = 0.51 px. Count: 90° ÷ 15° = 6 segments and 7 points. Chord length: 2 × 60 × sin 7.5° = 120 × 0.13053 = 15.7 px, so each line object is about 16 px long.

Result. Point offsets from the gauge center, rounded to whole pixels; add the center's screen position to both columns.

Six segments with these endpoints, all at one line width, put the worst facet at 0.51 px.

Decision. The polyline reads as smooth as the editor's own circle, which the panel already stair-steps. Thresholds by radius, all holding s at 0.5 px: 15° per segment up to 58 px (0.5 ÷ 0.00856 = 58), 10° per segment from 59 to 131 px (1 − cos 5° = 0.00381, 0.5 ÷ 0.00381 = 131), 7.5° per segment from 132 to 233 px. For any other radius, θ = 2 × arccos(1 − 0.5 ÷ r), and the point count is the arc angle divided by θ, rounded up.

Check it worked

• Preview at 100% zoom and normal viewing distance: no facet corner reads as a kink and every joint is closed. The zoomed view exaggerates; the panel decides.
• Draw a circle primitive of the same radius on a scratch screen and compare: the polyline should look no rougher.
• Press every touch control under, beside or near the curve. Each one answers; that is the test the covering circle could not pass.
• Send the project to the panel and judge on the hardware, because the editor's rendering and the panel's rendering differ at pixel scale.
• Keep the point coordinates or the PNG source with the project so a later edit rebuilds the arc instead of re-masking it.

Which method to pick

Recommendation: Draw the arc from segments whenever it crosses anything on the screen: 15° per segment for radii up to 58 px, 10° per segment from 59 to 131 px, 7.5° per segment above that, which holds every facet at half a drawn pixel. Import a transparent PNG when the arc is a prominent dial or needs a smooth edge, after a test import shows the editor keeps transparency and the controls beneath still respond. Keep the circle-and-cover trick for arcs over empty background, and never place it across a touch control.

If the drawing belongs on a status board beside the line instead of on the machine's own panel, our shop-floor screens are built to play your own layouts offline.

Questions