Two panel sizes share one on-screen layout when they share one pixel resolution: the classic 4:3 line runs 640 x 480 on both the 8-inch and the 10-inch, so the editor draws the identical grid and nothing scales. The only change is pixel pitch: the same 80 x 80 pixel button is 2.1 percent of either screen, but 0.84 in on the 8-inch and 1.04 in on the 10-inch. Convert your smallest touch object through pitch and pick the size from that.
You lay out a machine screen in your HMI editor, switch the target panel from 8 inches to 10 inches in the setup dialog, and nothing on your monitor moves. That is not a fault. Both panels sit on the same pixel grid, so the editor has one canvas to draw and no reason to resize anything. What changes when you step between sizes in one resolution class is pixel pitch: the physical size of each pixel, and with it the physical size of every button and switch you drew. This article gives the resolution ladder the classic 4:3 panel families ran, the pitch arithmetic that turns pixels into inches, a worked example against a gloved operator, and the template method that settles the size question before you order hardware.
Why do two panel sizes draw the same layout in pixels?
Because the editor draws a grid of pixels, and in the classic 4:3 families an 8-inch and a 10-inch panel are the same grid, 640 x 480 pixels: one canvas, the same object positions, and no scaling anywhere between your monitor and the panel.
Switching the panel type in the setup dialog from 8 inches to 10 inches changes the label, not the canvas. That is correct behavior. Do not reinstall the software, change the monitor resolution or rebuild the project; none of those touch the pixel count of the panel you selected. The canvas only changes when you cross a resolution class: drop from 640 x 480 to the 320 x 240 of the 6-inch class and the canvas becomes half as wide and half as tall. Nothing scales on the way to the panel either: a project built at the shared grid runs object for object on either size, with every object on the same pixel it was drawn on.
Which HMI panel sizes share one resolution?
Resolution steps with the size class and stays fixed inside it: the classic 4:3 ladder runs 320 x 240 at 6 inches, 640 x 480 at both 8 and 10 inches, 800 x 600 at 12 inches and 1024 × 768 at 15 inches.
| Size class | Resolution | Total pixels | Shares a layout with |
|---|---|---|---|
| 6-inch | 320 x 240 | 76,800 | no other class |
| 8-inch | 640 x 480 | 307,200 | the 10-inch |
| 10-inch | 640 x 480 | 307,200 | the 8-inch |
| 12-inch | 800 x 600 | 480,000 | no other class |
| 15-inch | 1024 × 768 | 786,432 | no other class |
Two sizes in the same row take the identical layout, so an 80 x 80 pixel button is the same share of the screen on both. Widescreen panels break the ladder: a current datasheet for a 10.1-inch widescreen HMI monitor lists a 1280 x 800 panel, a grid no 4:3 size shares. Resolution follows the product family, not the diagonal, so take the resolution line from the datasheet of the exact panel on your quote. The rule holds for any pair: same resolution, same layout; different resolution, redraw.
How big is one pixel on each panel, in inches?
Pixel pitch in inches equals the square root of the viewing area divided by the pixel count, which gives about 0.0141 in on the 6-inch panel, 0.0105 in on the 8-inch and 0.0130 in on the 10-inch, assuming square pixels.
The arithmetic, shown once on the 8-inch panel: viewing area 6.7 x 5.0 in = 33.5 sq in; 33.5 / 307,200 pixels = 0.00011 sq in per pixel; sqrt(0.00011) = 0.0105 in per pixel.
| Panel | Viewing area | Area per pixel | Pitch |
|---|---|---|---|
| 6-inch | 4.5 x 3.4 in, about 15.3 sq in | 0.0002 sq in | 0.0141 in |
| 8-inch | 6.7 x 5.0 in, about 33.5 sq in | 0.00011 sq in | 0.0105 in |
| 10-inch | 8.3 x 6.3 in, about 52.3 sq in | 0.00017 sq in | 0.0130 in |
The viewing areas and area-per-pixel figures come from the specifications of that classic panel family. For the panel on your quote, run the same three lines with its active area.
How much space does the same button take on each panel size?
An 80 x 80 pixel button covers 6,400 pixels, which is 8.3 percent of a 320 x 240 screen and 2.1 percent of either 640 x 480 screen, while physically it measures 1.13 in on the 6-inch panel, 0.84 in on the 8-inch and 1.04 in on the 10-inch.
| 6-inch, 320 x 240 | 8-inch, 640 x 480 | 10-inch, 640 x 480 | |
|---|---|---|---|
| 80 x 80 px button, share of screen | 8.3% | 2.1% | 2.1% |
| 80 x 80 px button, physical | 1.13 in | 0.84 in | 1.04 in |
| Full canvas, physical | 4.5 x 3.4 in | 6.7 x 5.0 in | 8.3 x 6.3 in |
| Pixels available to design with | 76,800 | 307,200 | 307,200 |
Where each size wins: the 6-inch gives the biggest physical object per pixel and the fewest pixels to place, so it wins when a handful of large targets serve the job and the cutout is tight. The 8-inch holds the same object count as the 10-inch while drawing each object about 20 percent smaller in linear size (0.84 / 1.04 = 0.81). The 10-inch wins whenever that difference decides whether a glove can hit the target. Percent of screen is a layout-density number; pitch is the finger-fit number, and the finger-fit number decides. How many objects a project holds before it strains the panel is its own sizing question, covered in sizing an HMI project against panel and PLC memory limits.
Worked example: will an 80 x 80 pixel button fit a gloved operator on the 8-inch panel?
It comes out 0.84 in on the 8-inch panel and 1.04 in on the 10-inch, so with a glove pad measured at 0.9 in across, the 8-inch fails and the 10-inch passes, and the 10-inch is the panel to order.
Scenario: you are laying out a start station at 640 x 480. The smallest touch object is an 80 x 80 pixel start button. Your operator wears leather work gloves, and you measure the pad of that glove at 0.9 in across. That measurement is the input that drives the result; a thinner glove changes the answer.
- 8-inch panel: 80 pixels x 0.0105 in per pixel = 0.84 in. The glove pad at 0.9 in overlaps neighboring objects, so the button fails.
- 10-inch panel: 80 pixels x 0.0130 in per pixel = 1.04 in. That clears the 0.9 in pad with margin on both sides, so the button passes.
Decision: order the 10-inch panel. Both candidates run 640 x 480, so the layout transfers unchanged and no screen work is lost. Had the glove pad measured 0.8 in, the 8-inch would clear it (0.84 in ≥ 0.8 in) and would be the choice. Where the object is a start or stop control, a target the glove keeps missing is a safety problem, so give that object the margin.
Why does the editor view not match the real panel size?
The editor and the runtime simulator draw one panel pixel per monitor pixel, so the view matches the real panel only when your monitor's pixel pitch happens to equal the panel's, and no setting teaches the software your monitor's physical size.
Calibrate the zoom by hand:
- Set the editor zoom to 100 percent and draw a rectangle 320 pixels wide.
- Measure it on the monitor with a ruler. If it spans 3.6 in, your monitor pitch is 3.6 / 320 = 0.01125 in per pixel.
- Compute zoom = panel pitch / monitor pitch: 0.0105 / 0.01125 = 93 percent for the 8-inch panel, 0.0130 / 0.01125 = 116 percent for the 10-inch.
- Re-measure at the new zoom: the rectangle should span 320 x 0.0105 = 3.36 in, and the full 640-pixel canvas 6.7 in, for the 8-inch.
Operating-system display scaling changes the monitor's effective pitch, so measure with the scaling you actually run. The simulator carries the same limit: it shows the same window for the 8-inch and the 10-inch because both are 640 x 480. Use it for logic, screen navigation and tag behavior; judge finger fit from the pitch numbers or a printed template. The same class of mismatch shows up in text sizing, which HMI editor and panel text size mismatch covers.
How do you choose the panel size before the hardware arrives?
Draw the busiest screen at the shared canvas, print it at each candidate's physical size and press the smallest object with the glove you run: if it fails at 8 inches and passes at 10 inches, order the 10-inch and lose no layout work.
- Draw the busiest screen, with every button, switch and text field, at 640 x 480.
- Print it at 6.7 x 5.0 in for the 8-inch candidate and 8.3 x 6.3 in for the 10-inch.
- Press the smallest object with the fingertip or glove it will run under.
- If any object fails, enlarge it in pixels and repeat; the pass or fail must hold for every object on that screen.
Confirm the physical fit too, because a panel that passes the glove test can still lose the cutout fight; check HMI portrait panel fit before making changes walks that measurement.
Recommendation: Pick the resolution class first, then the size inside the class by pitch. Build the layout once at the shared grid, multiply your smallest object in pixels by each candidate's pitch, and order the smallest panel whose result clears the glove pad you measured. Stepping between sizes that share the resolution costs no layout work; stepping across classes means a redraw.
One boundary worth naming: an HMI panel shows the screens you build in its editor, and the Android signage panels we build for shop-floor notice boards are a different product. They play their own content offline and have no video input from a PLC or a PC. If the cell also needs an andon or status board, the shop-floor signage range is where to look, and the screen size and viewing distance guide sizes a board people read from across the floor.
Questions
How do I get the pitch for a panel size the tables here do not list?
For a 4:3 panel, width is the diagonal times 0.8 and height is the diagonal times 0.6. A 12-inch panel is nominally 9.6 x 7.2 in, or 69.1 square inches. Divide by the pixel count: 69.1 / 480,000 = 0.000144 sq in per pixel, and the square root gives a pitch near 0.012 in. The active area is slightly smaller than the nominal diagonal, so treat 0.012 in as the starting value and trim it with the active-area figure printed for the part you order.
What happens to a 640 x 480 project moved to a 320 x 240 panel?
Nothing scales. The 320 x 240 canvas is half as wide and half as tall, so much of a VGA layout falls outside it. Work on a copy, select the real target panel first, then redraw each screen at 320 x 240 and confirm every object sits inside the boundary. Moving up, from 320 x 240 to 640 x 480, the canvas grows and each object keeps its pixel size, so it covers half the relative area and you gain room.
Does the same 80 x 80 pixel button mean the same thing at other resolutions?
The share of screen is the object's pixel count over the panel's total: 6,400 pixels is 2.1 percent at 640 x 480, 1.3 percent at 800 x 600 and 0.81 percent at 1024 × 768. Two panels with one resolution and different diagonals show the same share at different physical sizes, and two panels with one diagonal and different resolutions show different shares. Convert through pitch before judging any target.
Planning information, not legal or engineering advice. Rules differ by place: check codes and permits with your local authority and your licensed trades.