# An Easy-to-Understand Explanation of Calibration in Touch-Screen Systems

Abstract: Mechanical misalignment and scaling factors lead to a mismatch between the values coming from a touch screen panel (as translated by a touch screen controller) and the display (typically an LCD) on which the touch screen panel is mounted. This tutorial discusses how to calibrate the touch screen panel to match the display.

*EE Times*magazine.

## Introduction

## Understanding Image Transformation: Translation, Rotation, and Scaling

**Figure 1**is an exaggerated view of the distortion that might happen to a circle being displayed on an LCD touch-screen display. When a finger is traced around the circle (red line), the touch-panel system may give out the coordinates of an ellipse (blue line) instead of the circle, shown below in Figure 1. This change of the shape from a circle to an ellipse can be explained by the following graphic transformations: translation, rotation, and scaling.

*Figure 1. A circle changes shape on a touch screen because of a mismatch between the display and the touch-panel system.*

x_{NEW} = f1(x_{OLD}, y_{OLD}) + constant1 |
(Eq. 1a) |

y_{NEW} = f2(x_{OLD}, y_{OLD}) + constant2 |
(Eq. 1b) |

_{NEW}and y

_{NEW}are the transformed coordinates; x

_{OLD}and y

_{OLD}are the old coordinates; f1() and f2() are functions that transform the old coordinates; constants1 and 2 are just that, constants.

x_{NEW} = A x_{OLD} + B y_{OLD} + C |
(Eq. 2a) |

y_{NEW} = D x_{OLD} + E y_{OLD} + F |
(Eq. 2b) |

_{OLD}+B y

_{OLD}and f2() = D x

_{OLD}+ E y

_{OLD}, where constant1 and constant2 are C and F, respectively.

## The Mathematics Behind Translation, Rotation, and Scaling

**Three-Point Calibration**and

**N-Point Calibration**discussions below.)

**Figure 2**) shows a square (Shape A) that has undergone translation, rotation, and scaling (Shape B). In the process it is transformed into a rectangle.

*Figure 2. Translation, rotation, and scaling transform a square into a rectangle.*

*Figure 3. The square of Figure 2 (Shape A) is moved so that its center lies on the origin of the x-y axis.*

_{1}, y

_{1}in Figure 2 will be explored. Consequently, x

_{1a}, y

_{1a}translates to x

_{1b}, y

_{1b}and the new equation representing this new figure is:

x_{1b} = x_{1a} + T_{x0} |
(Eq. 3a) |

y_{1b} = y_{1a} + T_{y0} |
(Eq. 3b) |

**Figure 4**shows that the figure has been rotated counterclockwise by angle θ.

*Figure 4. Following Equation 3, the square is rotated counterclockwise.*

_{1c}, y

_{1c}) after the rotation are shown below. (Please see the Appendix for the derivation of the equation for this rotation.)

x_{1c} = x_{1b} Cosθ - y_{1b} Sinθ |
(Eq. 4a) |

y_{1c} = x_{1b} Sinθ + y_{1b} Cosθ |
(Eq. 4b) |

x_{1c} = x_{1a} Cosθ - y_{1a} Sinθ + K_{x} |
(Eq. 5a) |

y_{1c} = x_{1a} Sinθ + y_{1a} Cosθ + K_{y} |
(Eq. 5b) |

_{x}= T

_{x0}Cosθ - T

_{y0}Sinθ and K

_{y}= T

_{x0}Sinθ + T

_{y0}Cosθ.

_{x}is the scaling factor in the x direction and G

_{y}is the scaling factor in the y direction, then the square will transform into a rectangle (

**Figure 5**).

*Figure 5. Transform the square into a rectangle using scaling factors G*

_{x}for the x direction, and G_{y}for the y direction._{x}and G

_{y}yields Equations 6a and 6b, which are the coordinates for the rectangle shown in Figure 5.

x_{1d} = x_{1a} G_{x} Cosθ - y_{1a} G_{x} Sinθ + K_{x} G_{x} |
(Eq. 6a) |

y_{1d} = x_{1a} G_{y} Sinθ + y_{1a} G_{y} Cosθ + K_{y} G_{y} |
(Eq. 6b) |

_{1d}, y

_{1d}) into (x

_{1e}, y

_{1e}), as shown in the

**Figure 6**.

*Figure 6. The rectangle of Figure 5 is rotated so that it matches the orientation of Shape B in Figure 2.*

_{1e}, y

_{1e}) in terms of (x

_{1d}, y

_{1d}) are:

x_{1e} = x_{1d} Cosα - y_{1d} Sinα + K_{x} |
(Eq. 7a) |

y_{1e} = x_{1d} Sinα + y_{1d} Cosα + K_{y} |
(Eq. 7b) |

x_{1e} = x_{1a} A + y_{1a} B + P |
(Eq. 8a) |

y_{1e} = x_{1a} D + y_{1a} E + Q |
(Eq. 8b) |

A = G

_{x}Cosθ Cosα - G

_{y}Sinθ Cosα

B = - G

_{x}Sinθ Cosα - G

_{y}Cosθ Cosα

P = K

_{x}G

_{x}Cosα - K

_{y}G

_{y}Sinα

D = G

_{x}Cosθ Sinα + G

_{y}Sinθ Cosα

E = -G

_{x}Sinθ Sinα + G

_{y}Cosθ Cosα

Q = K

_{x}G

_{x}Sinα + K

_{y}G

_{y}Cosα

**Figure 7**) needs to be done to move the rotated rectangle to where Shape B appears in Figure 2.

*Figure 7. Translation of the rectangle from the origin to the location where Shape B appears in Figure 2.*

_{x}and T

_{y}, respectively. Therefore, Equations 8a and 8b will change to:

x_{1f} = x_{1a} A + y_{1a} B + C |
(Eq. 9a) |

y_{1f} = x_{1a} D + y_{1a} E + F |
(Eq. 9b) |

_{x}and F = Q + T

_{y}.

_{1f}, y

_{1f}) is in terms of (x

_{1a}, y

_{1a}). In the touch panel mounted on a display the user will have to determine the A, B, C, D, E, and F during calibration.

*Please note that the purpose of this exercise is to give the user an appreciation of the general form of the equation for the transformation, shown by Equations 9a and 9b. This article shows that we will arrive at this general form irrespective of the direction and magnitude of rotation, translation, and scaling.*

## Three-Point Calibration

x_{1f} = x_{1a} A + y_{1a} B + C |
(Eq. 9a) |

y_{1f} = x_{1a} D + y_{1a} E + F |
(Eq. 9b) |

_{1d}, y

_{1d}), (x

_{2d}, y

_{2d}) and (x

_{3d}, y

_{3d}). If their corresponding touch-screen values (as presented by the touch-screen controller) are (x

_{1}, y

_{1}), (x

_{2}, y

_{2}), and (x

_{3}, y

_{3}), then the six unknowns can be solved by the equations shown below. These points must be independent of each other, as shown in

**Figure 8**.

*Figure 8. LCD panel showing three display coordinates for the user to touch.*

_{1d}= x

_{1}A + y

_{1}B + C

x

_{2d}= x

_{2}A + y

_{2}B + C

x

_{3d}= x

_{3}A + y

_{3}B + C

_{1d}= x

_{1}D + y

_{1}E + F

y

_{2d}= x

_{2}D + y

_{2}E + F

y

_{3d}= x

_{3}D + y

_{3}E + F

**Z**is the inverse matrix of

^{-1}**Z**.

## Three-Point Calibration Example

*Please note: these values are made up and serve as an example only*.

B = 0.0024

C = 18.9116

D = -0.0227

E = 0.1634

F = 37.8887

_{d}= 0.0635 x + 0.0024 y + 18.9116

y

_{d}= -0.0227 x + 0.1634 y + 37.8887

_{d}, y

_{d}) is the adjusted value.

## N-Point Calibration

x_{1d} = x_{1} A + y_{1} B + Cx _{2d} = x_{2} A + y_{2} B + Cx _{3d} = x_{3} A + y_{3} B + C... x _{nd} = x_{n} A + y_{n} B + C |
(Eq. set 11a) |

y_{1d} = x_{1} D + y_{1} E + Fy _{2d} = x_{2} D + y_{2} E + Fy _{3d} = x_{3} D + y_{3} E + F... y _{nd} = y_{n} D + y_{3} E + F |
(Eq. set 11b) |

_{1d}, y

_{1d})...(x

_{nd}, y

_{nd}) are coordinates generated by the display; (x

_{1}, y

_{1})...(x

_{n}, y

_{n}) are the corresponding values (for n points) determined by the MAX11800 from the touch-screen panel. The goal is to determine the coefficients using these values.

**Figure 9**. The same technique will be applied for determining the unknowns D, E, and F for the y values.

*Figure 9. An average value for the coefficients A, B, and C is found by applying the least square fit to the points.*

## N-Point Calibration Example

*Please note: these values are made up and meant to serve as an example only*.

B = 0.0190

C = -33.7973

D = -0.0347

E = 0.2100

F = -27.4030

_{d}= 0.0677 x + 0.0190 y - 33.7973

y

_{d}= -0.0347 x + 0.2100 y - 27.4030

_{d}, y

_{d}) is the adjusted coordinate value to match what is shown on the display.

## Example Summary

## Appendix: Derivation of the Equation for a Counterclockwise Rotation

x = r Cosθ and y = r Sinθ, | (Eq. A) |

x' = r Cos(θ + Φ) and y' = r Sin(θ + Φ) | (Eq. B) |

Cos(θ + Φ) = CosΦ Cosθ - SinΦ Sinθ Sin(θ + Φ) = SinΦ Cosθ - CosΦ Sinθ |
(Eq. C) |

x' = r CosΦ Cosθ - r SinΦ Sinθ y' = r SinΦ Cosθ - r CosΦ Sinθ |
(Eq. D) |

x' = x CosΦ - y SinΦ y' = x SinΦ - y CosΦ |
(Eq. E) |