Design graphics for a 1360x768 wide touch panel

9 min read · Published November 10, 2026

A wide touch panel specified at 1360 × 768 shows exactly that grid, so build the graphics there, put the host on 1360 × 768 at its standard refresh rate, and never substitute 1366 × 768, which is 6 pixels wider and forces scaling. Calibrate touch after the final mode is active, then test the runtime on the panel itself.

A wide touch panel specified at 1360 × 768 pixels has exactly 1360 × 768 physical pixels, and that number decides the whole job: build the graphics on that grid, put the host computer on that mode, and calibrate the touch overlay after the mode is active. The trap is the near-identical 1366 × 768, which is 6 pixels wider and forces the host or the panel to scale, so 1-pixel lines you drew crisp come out soft. Work the job in the order you meet it: confirm the native mode, set the host output, size the design canvas, lay out for the wide shape, calibrate touch, then test the runtime on the panel. The worked example below uses a 42-inch panel at a truck-loading terminal.

Which resolution do you build the graphics for?

Build the graphics at 1360 × 768, because that is the panel's pixel grid: a wide-format panel of this class is specified at 1360 × 768, and every object drawn there lands on exactly one physical pixel at runtime.

The competing number, 1366 × 768, is 6 pixels wider (1366 - 1360 = 6). Build the canvas 1366 wide and something between your drawing and the panel's 1360 columns must scale the image by 1360 ÷ 1366 = 0.996 or cut 6 columns, and which of the two happens is decided by settings you cannot see from the design chair. Either way, a 1-pixel divider line spreads across two physical pixels and reads gray, and a control at the right edge moves or loses its border. Design at 1360 × 768 and stop there.

How do you confirm the panel's native mode before you draw anything?

Read the native mode off the panel's specification or identification label before you design, and treat 1360 × 768 as the only target: 1360 × 768 appears in the VESA monitor timing standards as a standard mode, while 1366 × 768 does not.

A "compatible" or "supported" mode list is not the native number; a panel accepts many modes and shows one of them pixel for pixel. The absence of a standard timing for 1366 × 768 is why a PC graphics card usually offers 1360 × 768 instead, and why a widescreen panel built with 1366 columns ends up fed 1360 columns and trimming 3 pixels per side.

Mode Panel grid Aspect Timing status What you see
1360 × 768 1360 × 768 1.771 wide VESA standard timing Your drawing, pixel for pixel
1366 × 768 1366 × 768 1.779 wide No VESA monitor timing Host sends 1360 × 768; panel trims 3 pixels per side
1920 × 1080 1360 × 768 panel 1.778 wide VESA standard Panel scales by 0.708 horizontally, 0.711 vertically; text softens

Settle any paperwork doubt on the hardware: connect the host, send 1360 × 768, and check which incoming mode the panel's own information display reports.

What do you need before you start?

Assemble the panel's specification sheet, a host whose graphics driver lists 1360 × 768, the touch controller's documented calibration routine, the production signal cable, and the design software before you start, because a mode that will not survive the production cable is no mode at all.

  • Specification sheet or rear label with the native resolution printed: 1360 × 768 for the panel in this article.
  • Host PC whose graphics driver lists 1360 × 768, or can add a custom resolution.
  • HMI or SCADA design software, opened to the display or project settings where the canvas is set in pixels.
  • The touch controller's calibration routine, from the panel or controller manual.
  • The production signal cable at its production length.

How do you get the host to output 1360 × 768?

Set the operating system display mode to 1360 × 768 at 60 Hz first, and add a custom resolution in the graphics driver's control panel only if the standard list does not offer it, because a driver-added mode is one more thing to reproduce on the next host. The 60 Hz figure is set here once and stays fixed for the rest of the job.

  1. Connect the panel to the production host through the production cable, power both, and open the display settings.
  2. Select 1360 × 768 at that refresh rate.
  3. If the mode is missing, open the graphics driver's control panel and add a custom resolution of 1360 × 768 with the standard timing it offers for that size.
  4. Open the panel's on-screen information display, if it has one, and confirm it reports 1360 × 768 incoming.
  5. Show a full-screen window and check all four edges: complete image, no band, no shift.

Driving a panel from a host output follows monitor rules either way; can you use an HMI panel as a PC monitor covers the general case. If the mode reverts or comes up wrong after a restart, the driver's screen-mode handling is the place to look, and fixing portrait mode driver error on an embedded Windows panel works the same class of fault.

How do you lay out a screen that fits 1360 × 768?

Set the design canvas to 1360 × 768 in the software's display or project settings, and keep every interactive object at least 10 pixels from the screen edges, because a 10-pixel border survives every behavior in the table above.

Define the canvas in pixels and ignore the size of the window on your desk; a desk window can be resized, and the runtime canvas should not be. The wide shape costs height: a canvas 1360 pixels wide at 4:3 proportions would stand 1020 pixels tall (1360 × 3 ÷ 4 = 1020), and the wide panel gives you 768, which is 252 rows less, about a quarter of the screen. Let the width carry the process overview in columns and leave the vertical stack for alarms and totals. Put real label text in place from the first pass, and draw sizes in pixels; a layout drawn in pixels survives a panel swap, which is the point of why two HMI panel sizes share one layout in pixels.

When should you calibrate the touch overlay?

Calibrate after the final 1360 × 768 mode is active, because calibration maps the touch controller's raw coordinates onto the displayed image, and any resolution change after calibration moves every target.

  1. Put the host on 1360 × 768 and leave it there.
  2. Run the controller's documented calibration routine and touch its marked targets, normally the corners and center.
  3. Press a known button dead center, then at each corner of its face; the action must fire where you pressed, with no offset.
  4. Reboot the host and press the same buttons; calibration must survive the restart.

A button that answers on only half its face points to calibration first; HMI touch button only responds to half: recalibrate with a stylus shows that fault and its fix. On a Linux host driving several touch screens at once, a calibration tool such as niceTouch handles the multi-screen case; recheck the screen mapping after any mode change.

Worked example: what does one pixel measure on a 42-inch panel?

On a 42-inch panel at 1360 × 768, one pixel measures 0.683 mm, because the diagonal runs 1562 pixels (the square root of 1360² + 768²) and 42 in × 25.4 mm per inch ÷ 1562 px = 0.683 mm per pixel.

The arithmetic in full: 1360² + 768² = 1,849,600 + 589,824 = 2,439,424, and the square root of 2,439,424 is 1561.9 pixels, taken as 1562. The 42-inch diagonal measures 42 × 25.4 = 1066.8 mm, and 1066.8 mm ÷ 1562 px = 0.683 mm per pixel. Everything else falls out of that pitch:

  • Active area: 1360 × 0.683 = 929 mm wide, 768 × 0.683 = 525 mm tall.
  • Smallest label at 24-pixel capitals: 24 × 0.683 = 16.4 mm, or 0.65 in. The FHWA planning figure gives 30 ft of viewing distance per inch of capital height, so 0.65 × 30 = 19.5 ft; the safer 20 ft per inch gives 13 ft. A walk-up operator and a driver standing back from the terminal both read it.
  • Touch targets: a 15 mm button face is 15 ÷ 0.683 = 22 pixels, and a 10-pixel gap between buttons is 6.8 mm, enough that one press cannot reach its neighbor.
  • The 6-column error of a 1366-wide design is 6 × 0.683 = 4.1 mm of image lost or shifted at the edges, enough to clip a button border.

One pitch, four design numbers: 22-pixel buttons, 10-pixel gaps, 24-pixel capitals, 19.5 ft of comfortable reading. If you want to automate pixel-to-millimetre conversions in software, start from this page on calibrating pixels to mm from image DPI.

How do you test the runtime before handover?

Run the finished screens on the production host, through the production cable, at 1360 × 768, because a design monitor at 1920 × 1080 scales your canvas and hides exactly the defects the panel will show.

  1. Run the project on the production host at 1360 × 768, in the same windowed or full-screen state it will run in production.
  2. Inspect all four edges and corners: nothing clipped, no blank bands.
  3. Read the smallest label from the working distance, standing where an operator stands.
  4. Press every control at its center and at its usable corners; confirm the on-screen action matches the press.
  5. Reboot the host and repeat the edge and touch checks; the mode, the canvas state, and the calibration must survive together.

Pass looks like this: the runtime fills the panel edge to edge at 1360 × 768, every control answers where pressed, and a restart changes nothing. Testing startup and runtime behavior before anything ships is the same discipline argued in choosing an HMI panel: test startup and runtime first.

What if the host cannot output 1360 × 768?

Order of attack: add the mode as a custom resolution in the graphics driver's control panel, fall back to a scaled mode only as a recorded temporary workaround, and never redesign the graphics to fit a wrong mode, because the panel's grid is fixed at 1360 × 768.

The custom-mode route comes first: 1360 × 768 is a VESA monitor timing, so the driver has standard timing data to work from. If the driver refuses, try another output on the host or another host; the panel is not the fault. A scaled mode such as 1920 × 1080 down-converted to the panel's grid is acceptable only while three things hold: the whole interface stays visible, proportions look right, and touch passes the handover checks above. Record the mode and the scaling setting so the state can be reproduced, and book the driver fix. If the design software offers only fixed canvas sizes, pick the largest one at the panel's 1.771 aspect, confirm its documented scaling behavior on the panel before layout, and keep the 10-pixel edge margin.

Recommendation: Put the host on 1360 × 768 at 60 Hz and set every design canvas to 1360 × 768 before drawing the first button; calibrate touch only after that mode survives a reboot; keep interactive objects 10 pixels clear of every edge; and use a scaled mode only as a recorded, temporary state that still passes the edge, touch, and restart checks on the real panel.

Questions

Can I design the graphics on a normal office monitor?

Yes. Set the design canvas to 1360 × 768 pixels in the software and work there; the desk monitor's own size and resolution do not matter, because the canvas is defined in pixels, not inches. What the desk monitor cannot show you is legibility and edge cropping, so the pass checks still happen on the panel: read the smallest label at the working distance and inspect all four edges at 1360 × 768.

Does the touch controller's own resolution have to match 1360 × 768?

No. The controller reports raw coordinates on its own grid, and the calibration routine maps that grid onto whatever image the panel is showing. What has to match is the calibrated image and the displayed image: calibrate at 1360 × 768, press targets at their centers and edges to confirm, and recalibrate whenever the mode, the cable, or the host changes.

My HMI software only offers a few fixed screen sizes. What now?

Read its documentation for what the runtime does when the canvas and the display mode differ: whether it scales, crops, or letterboxes, and whether the scaling touches touch targets as well as drawings. Then design for the largest canvas with the panel's aspect ratio, 1360:768, or 1.771 wide, keep 10 pixels clear at every edge, and run the same checks on the panel before handover.

Will the same setup work on a panel whose native mode really is 1366 × 768?

Yes, with the target changed. Build the canvas at 1366 × 768 and keep at least 3 pixels clear at the left and right edges, because many hosts still send the standard 1360 × 768 timing and the panel trims 3 pixels per side. The order stays the same: native mode first, touch calibration second, runtime test on the panel last.

Planning information, not legal or engineering advice. Rules differ by place: check codes and permits with your local authority and your licensed trades.

Keep reading

Build your signAsk for a quote