Ing.

Francisco Salazar Navarrete

Las Pantalla TFT

El termino TFT-LCD (Thin Film Transistor-Liquid Crystal Display), o Pantalla de

cristal líquido de transistores de película fina) es una variante de la ya tradicional pantalla de
cristal líquido (LCD), que usa tecnología de transistor de película delgada (TFT) para mejorar
su calidad de imagen. Las LCD de TFT son un tipo de LCD de matriz activa, aunque esto es
generalmente sinónimo de LCD. Son usados en televisores, visualizadores de pantalla plana
y proyectores. En informática, los monitores de TFT han desplazado la tecnología de CRT,
y están comúnmente disponibles en diversos tamaños.

La pantalla TFT de NEXTION

NEXTION es una empresa encargada, entre otras cosas, de fabricar en la actualidad

pantallas inteligentes de tipo táctil, las cuales proporcionan una interfaz de control y
visualización muy amigable con el usuario y se ha convertido últimamente en la mejor
solución para reemplazar el LCD tradicional. Parte de hardware es de la serie de placas de
TFT y parte de software de NEXTION. Utiliza el puerto serie USART para realizar la
comunicación con otro dispositivo inteligente como un microcontrolador, permitiendo
deshacerse de los problemas de cableado. Es fácil de adaptar a proyectos existentes. Las hay
de diferentes tamaños y resoluciones, desde los 2,4 pulgadas hasta las 7 pulgadas.

Estas pantallas inteligentes deben ser programadas mediante un lenguaje nativo,

propio del dispositivo, el cual debe ser realizado mediante un programa que se puede
descargar de la página oficial denominado NEXTION EDITOR. En este editor podemos
crear tantas páginas deseemos y adornarlas con imágenes y texto, así como programar
eventos propios de una pantalla táctil. Precisamente el tipo de pantalla táctil de esta clase de
dispositivos es del tipo resistiva.
Como se había mencionado con anterioridad, estas pantallas vienen en diferentes
tamaños, resoluciones, capacidad de memoria interna, entre otras las cuales podemos
observar en la siguiente tabla:
Ing. Francisco Salazar Navarrete

En esta podemos ver el modelo de cada una de las pantallas y sus características
principales como tamaño en pulgadas, resolución, capacidad de la memoria FLASH para
almacenar el código de programación, la memoria RAM y la cantidad de colores que es capaz
de representar.

Interface de comunicación

Hablamos de que este tipo de pantalla se comunica con otros dispositivos inteligentes
utilizando para ello una comunicación serial con una velocidad establecida por defecto de
9600 Baudios, por lo que solo son necesarias dos líneas de comunicación: TX y RX, a parte
de las líneas de alimentación VCC (+5V) y tierra. Internamente el modulo posee una
interrupción por recepción de datos en el puerto serie, por lo que el dispositivo generalmente
esta “escuchando” de forma continua la línea RX en espera de un comando que le dé una
orden de la función que la pantalla debe realizar. Estas órdenes son en forma de comandos
los cuales poseen cierta estructura y sintaxis que el programador debe respetar. Cabe aclarar
que la pantalla utiliza un lenguaje orientado a objetos y a eventos.

NEXTION EDITOR

Las pantallas de NEXTION poseen una herramienta indispensable utilizada para crear
la interface de usuario y todo lo referente a la programación del modulo para su correcto
funcionamiento. Recordemos que este tipo de pantalla es un dispositivo HMI (interface
humano – maquina), por lo que es un dispositivo inteligente y por lo tanto debe ser
configurado y programado para cumplir con la tarea que se desea, y tener siempre en cuenta
que es un modulo de entrada y salida de datos.
El editor posee una serie de herramientas muy completas para crear interfaces de
usuario – maquina muy realistas, llamativas y altamente interactivas gracias a la posibilidad
de usar imágenes, realizar animaciones y por su puesto al uso de la pantalla táctil de tipo
resistivo. La siguiente imagen describe las partes principales de este editor en el modo de
diseño:
Ing. Francisco Salazar Navarrete

Partes:

1. Lienzo: aquí es donde se colocan todos los controles e imágenes que forman parte de
la interface de usuario – maquina que se está creando. Su tamaño depende del modelo
de la pantalla y su resolución.
2. Barra de herramientas: cuanta con una serie de controles básicos para crear interfaces
amigables e interactivas. Posee diferentes elementos como etiquetas, botones,
checkbox, barras de progreso, barras de desplazamiento, etc.
3. Recursos del proyecto: aquí agregamos las imágenes y las fuentes que se van a utilizar
en un nuevo proyecto.
4. Ventana de eventos: en esta podemos ver los eventos que posee un control que ha
sido seleccionado con anterioridad. También es el lugar donde se codifica los
comandos para que la pantalla realice lo que nosotros deseemos.
5. Ventana de propiedades: aquí aparecen las propiedades del objeto seleccionado, las
cuales podemos modificar a voluntad.
6. Ventana donde se muestran las páginas del proyecto actual.
7. Iconos de acceso rápido a funciones variadas dentro del editor.

El editor también cuenta con un apartado dedicado a la depuración del proyecto, el cual
tiene la particularidad de contar con la posibilidad de realizar simulaciones para determinar
el comportamiento que tendrá la pantalla una vez que se diseñe la interface y se programe.
Mediante el botón “Debug” ubicado en la barra superior del editor llegamos a una pantalla
con la siguiente apariencia:
Ing. Francisco Salazar Navarrete

Partes:

1. Área de simulación.
2. Entrada de comandos para esperar respuesta del modulo.
3. Respuesta del modulo ante una determinada entrada.

Aquí podemos introducir los datos y los comando que deseemos y podemos ver el
comportamiento que tendrá el modulo ante una determinada entrada.

Recepción de datos por parte de la pantalla NEXTION

Como ya sabemos este tipo de pantalla es un dispositivo inteligente que interpreta una
serie de comandos que se les son enviados a través del puerto serie, y de acuerdo a los
comandos que recibe, actúa en consecuencia. Debemos tener presente que este dispositivo
posee internamente una interrupción por recepción del puerto serie, de modo que la pantalla
generalmente esta en escucha de la entrada de un dato a través de su línea RX esperando el
momento en que le entrada un dato y a si actúa en consecuencia.
Cuando creamos una interface en las pantallas NEXTION, los controles tienen
asociados un nombre único, así como un nombre para la pagina en donde están ubicados. Por
lo que para poder actuar sobre un determinado control debemos enviar un comando que
involucra: el nombre de la pagina, el nombre del control, la propiedad de este ultimo que se
desea modificar, así como el valor que se le desea asignar. El formato del comando que se
debe enviar desde el microcontrolador PIC para ser recepcionado por la pantalla NEXTION
es de la siguiente manera:
 Ing. Francisco Salazar Navarrete

<Nombre_Pagina> . <Nombre_control> . <Propiedad> = <Valor>

Este comando debe ser enviado como una sola cadena de caracteres y al final terminar
con una secuencia de tres veces el valor 0xFF para indicarle al dispositivo que se ha
finalizado con la recepción de los datos.

Page1.j0.val=20 //establece un valor de 20 para el control progressbar llamado “j0”.

Transmisión de datos desde la pantalla NEXTION

Los datos que son transmitidos por la pantalla NEXTION hacia otro dispositivo
inteligente, en este caso un microcontrolador PIC, se realiza por el puerto serial codificado
en una trama de datos cuya cantidad de información va a depender de lo que la pantalla nos
quiere dar a entender. En el primer byte de la trama (el primer dato que es transmitido) nos
indica cual es el significado de la información que se ha enviado, y de acuerdo a esto, los
subsiguientes uno, dos o más datos a transmitir dentro de esa misma trama, siempre
finalizando dicha transmisión mediante tres 0xFF, que como ya sabemos indica que la
pantalla ha terminado de enviar datos. La estructuras de las tramas, así como su significado
es el siguiente:

1º byte de la trama Significado Estructura de trama enviada

El usuario ha 0x65+ID_pagina+ID_componente+Tipo_evento+End
presionado sobre un
0x65 control ubicado en la
pantalla. Donde: (0: press event, 1: release event).

Retorno del numero de 0x66+ID_pagina_actual+End

ID de la pagina actual.
0x66

Retorno de un dato en 0x70+ASCII_de_cada_caracter+End

formato String (cadena
0x70 de caracteres)
Nota: observe que el tamaño de esta trama depende de
cuantos caracteres serán enviados por la pantalla.

0x71 Retorno de un dato en 0x71+Hexa_del _numero_en_4_bytes+End

formato numérico.
Ing. Francisco Salazar Navarrete

Pantalla ha entrado 0x86+End

automáticamente en
modo de reposo.
0x86 Nota: este dato solo se retorna cuando la pantalla entra
en modo de reposo de forma automática, si entra por
software mediante la instrucción Sleep=1, la pantalla
NO retorna nada.

Pantalla ha salido del 0x87+End

modo sleep de forma
automática.
0x87 Nota: este dato solo se retorna cuando la pantalla sale
del modo de reposo de forma automática, si sale por
software mediante la instrucción Sleep=0, la pantalla
NO retorna nada.

Sistema iniciado 0x88+End

correctamente.
0x88

Nota: este dato es enviado después de que la pantalla

ha iniciado de forma correcta.

Observe que cada suceso posee un byte asociado con una numeración distinta por lo
que cuando la pantalla le envíe un dato al microcontrolador, lo primero que debemos hacer
para interpretar la información es determinar mediante l primer byte que entra, que tipo de
suceso se ha generado y una vez identificado esto se podrá definir cuantos bytes sucesivos
serán recibidos. Por lo tanto, se recomienda crear métodos específicos de recolección de datos
por parte del microcontrolador, dependiendo del suceso que se genero.

¿Qué tipo de datos podemos enviar a través de la pantalla NEXTION?

En realidad se pueden enviar diferentes tipos de datos desde la pantalla NEXTION hacia el
microcontrolador PIC. Entre ellos tenemos los siguientes:

Enviar el ID de la página actual: esto se realiza mediante el uso del comando “Sendme”, el
cual no lleva ningún parámetro, y la trama enviada sería la siguiente:

0x66 + 0x00 + 0FF + 0FF + 0FFenvía el numero ID de pagina cuyo valor es “0”.

Enviar el ID del control que ha entrado en interacción con el usuario: recordemos que cuando
el usuario presiona la pantalla sobre un control, se puede desencadenar dos tipos de eventos:
Ing. Francisco Salazar Navarrete

el press event y el release event. Esta circunstancia puede ser aprovechada para determinar
cual botón ha sido presionado o soltado, así por ejemplo, la trama se traduciría de la siguiente
manera:

0x65+ 0x01+ 0x00 + 0x01 + 0FF + 0FF + 0FFenvía un “0” que corresponde al ID de un
control ubicado en la pagina cuyo ID es “1” y que se ha generado un evento de tipo “release
event”.

Envío de un solo carácter: para transmitir un carácter de la pantalla hacia el microcontrolador

se utiliza el comando “Print” de la siguiente manera:

Print “A” envía el código UNICODE de la letra “A” a través del puerto serie.

La trama que genera la pantalla sería la siguiente:

0x41observe que el código UNICODE de la letra “A” es 0x41

Envío de unacadena decaracteres: para transmitir una cadena de la pantalla hacia el

microcontrolador se utiliza igualmente el comando “Print” de la siguiente manera:

Print “HOLA” envía el código UNICODE de la cadena “HOLA” a través del puerto
serie.

La trama que genera la pantalla sería la siguiente:

0x48 + 0x4F+ 0x4C+ 0x41

Observe que el código UNICODE de la letra “H” es 0x48, el de la letra “O” es 0x4F, el de la
letra “L” es 0x4C y el de la letra “A” es 0x41.

Tabla de valores UNICODE

Ing. Francisco Salazar Navarrete

Envío de un valor numérico: para enviar un valor numérico se utiliza nuevamente el comando
“print” de la siguiente manera:

Print 215 envía el número 215 como un valor representado en hexadecimal.

La trama que genera la pantalla sería la siguiente:

0xD7 + 0x00 + 0x00 + 0x00

NOTA: observe que el valor numérico se representa en su equivalente hexadecimal en 4

bytes. En este caso, 215 decimal equivale a un 0xD7 hexadecimal.

Print 167845 envía el número 167845 como un valor representado en hexadecimal.

La trama que genera la pantalla sería la siguiente:

0xA5+ 0x8F+ 0x02+ 0x00

NOTA: otra manera de enviar valores numéricos hexadecimales es mediante el comando

“printh” que nos permite enviar uno o más números al mismo tiempo, como ejemplo
tenemos:

Printh D0 A0 envía dos datos numéricos: un 0xD0 y un 0xA0.

Ing. Francisco Salazar Navarrete

La trama que genera la pantalla sería la siguiente:

0xD0+ 0xA0

Set de comandos para las pantallas NEXTION

Page: vuelve a dibujar todo el contenido de una página en particular. En otras palabras
“refresca” una página. Este comando se utiliza también para pasar de una página a otra dentro
de un proyecto. La sintaxis es:

Page <ID de la pagina o nombre de la pagina>

Page 0 refresca la pagina cuyo ID es 0.

Page main refresca la pagina cuyo nombre es “main”.

Ref: vuelve a dibujar o “refresca” un determinado control. La sintaxis es:

Ref <ID del control o nombre del control>

Ref 4 refresca control cuyo ID es 4.

Ref t1 refresca control cuyo nombre es “t0”.

Click: este comando genera un evento para un control en particular de forma

automáticamente, ya sea del tipo “press event” o “release event”, sin tocar la pantalla, es
decir, se desencadena el evento por software. La sintaxis es:

Click <Nombre o ID del componente> , <tipo de evento>

Donde:

0  Release event
1  Press event

Click b0,1 activa el evento “press” del control llamado “b0”.

Click 2,0 activa el evento “release” del control con ID de 2.

Sendme: provoca que la pantalla retorne el numero de ID de la pagina que está actualmente
visible en ella. Este comando no tiene parámetros.

Cov: realiza la conversión de datos entre la propiedad de un componente numérica en una

alfabética o viceversa. La sintaxis es:

Cov <variable fuente> , <variable de destino> , <longitud>

Donde si la longitud es “0” significa que el tamaño se adapta automáticamente

Cov t0.txt, j0.val,0 convierte el texto de “t0” en valor numérico y lo carga en “j0”.
Ing. Francisco Salazar Navarrete

Vis: muestra o esconde un componente dentro de una determinada página. La sintaxis es:

Vis <nombre o ID del componente> , <estado>

Donde:

Si estado = 0  componente oculto.

Si estado = 1  componente visible.

Vis bt0,1 muestra el componente “bt0” en la pagina.

Tsw: habilita o deshabilita un determinado control. Su sintaxis es:

Tsw <nombre o ID del componente> , estado

Donde

Si estado = 0  componente deshabilitado.

Si estado = 1  componente habilitado.

Tsw bt0,1 habilita el componente “bt0” en la pagina.

Touch_j: provoca que la pantalla entre en modo de calibración para el táctil de la pantalla.
Este comando no posee parámetros. Hay que tener en cuenta que las pantallas NEXTION
han sido calibradas de fábrica, así que esta instrucción no se utilizaría bajo condiciones
normales.

Substr: extrae cierta cantidad de caracteres de una cadena. La sintaxis es la siguiente:

Substr <cadena_original> , <cadena_resultante> , <inicio> , <longitud>

Donde:

inicio: corresponde al índice de inicio de la cadena a extraer. El primer carácter tiene indice
“0”.

longitud: es la cantidad de caracteres a extraer.

Substr t0.txt,t1.txt,0,5 extrae los 5 primeros caracteres de la cadena ubicada en “t0” y la

copia en la cadena ubicada en “t1”.

Strlen: determina la longitud (cantidad de caracteres) que tiene una cadena. Su sintaxis es la
siguiente:

Strlen <cadena_original> , <variable>

Ing. Francisco Salazar Navarrete

Strlen t0.txt,n0.val carga en “n0”cantidad de caracteres que posee la cadena “t0”.

Rest: provoca que la pantalla se reinicie. Este comando no lleva parámetros.

Sentencias de control

Sentencias If – Else: sentencias para la toma de decisiones. Ejemplo:

if(b0.txt==”start”
{
b0.txt==”stop”
}
else
{
b0.txt==”start”
}

Tener siempre en cuenta los siguientes puntos relacionados a las sentencias de control:

1. Las variables numéricas soportan los siguientes operadores: “>, <, ==, !=, >=, <=”
2. Los caracteres y las cadenas soportan los operadores: “==, !=”
3. El operador de anidamiento “( )” no está permitido. No está soportado las operaciones
de comparación, tales como: if (j0.val + 1> 0).
4. Soporta anidamientos consentencias “if” y “else if”.

5. Expresiones complejas como “if (j0.val+1>0)” no están soportadas.

Ciclo While: con esta sentencia el ciclo se repite siempre y cuando la condición sea
verdadera.

while(n0.val<100)
{
n0.val++
}

Tener siempre en cuenta los siguientes puntos relacionados al ciclo While:

Durante el proceso de ejecución del ciclo While, el dispositivo no podrá mostrar el

correspondiente evento “Touch”, los comandos de entrada por el puerto serie serán guardados
en el buffer, pero no se ejecutaran hasta que todas las sentencias en el ciclo hayan finalizado
su ejecución. Sea cauteloso al utilizar esta sentencia ya que se puede producir un ciclo
infinito.

Ciclo FOR: con esta sentencia el ciclo se repite siempre y cuando la condición sea verdadera.

for(n0.val=0; n0.val<100; n0.val++)

Ing. Francisco Salazar Navarrete

Comandos para diseño de la GUI

Existen una serie de comandos especialmente diseñados para realizar la interface

grafica de usuario (GUI) y con ella poder dibujar sobre la pantalla imágenes y figuras
geométricas diversas. Los siguientes son los comandos más importantes:

Cls: limpia la pantalla y la colorea de un color especificado. La sintaxis es la siguiente:

Cls <color>

Donde color puede ser un valor decimal que representa el color o el nombre propio.

Cls 1024 refresca la pantalla con el color decimal 1024.

Cls WHITE refresca la pantalla con el color blanco.

Pic: despliega una imagen en las coordenadas establecidas. Su sintaxis es:

Pic <x> , <y> , <ID_imagen>

Pic 10,20,0 Despliega la imagen con ID “0” en las coordenadas 10,20.

Xstr: imprime una cadena de caracteres en las coordenadas y el tamaño deseado. Su sintaxis
es:

Xstr <x> , <y> , <ancho> , <altura> , <ID_fuente> , <color_fuente> , <color_fondo> ,

<alineamiento_horizontal> , <alineamiento_vertical> , <color de relleno> ,
<cadena_caracteres>

Donde:

Alineamiento horizontal: 0  izquierda, 1  centrado, 2  derecha.

Alineamiento vertical: 0  arriba, 1  centrado, 2  abajo.
Color de relleno: 0  imagen recortada, 1  color, 2  imagen, 3  sin color

Nota: cuando se selecciona una imagen o una imagen recortada, en color de fondo se debe
colocar el ID de la imagen.

xstr 0,0,100,30,1,RED,BLACK,1,1,1,"China"

Fill: dibuja un rectángulo con relleno. Su sintaxis es la siguiente:

Ing. Francisco Salazar Navarrete

Fill <x> , <y> , <ancho> , <altura> , <color>

fill 0,0,100,30,RED dibuja un rectángulo de color rojo en las coordenadas y dimensiones

especificadas.

Line: dibuja una línea de color. Su sintaxis es:

Line <x1> , <y1> , <x2> , <y2> , <color>

Line 0,0,100,100,RED

Draw: dibuja un rectángulo sin relleno y cuyo borde es coloreado. Su sintaxis es:

Draw <x1> , <y1> , <x2> , <y2> , <color>

Draw 0,0,100,100,RED dibuja un cuadrado de color rojo.

Cir: dibuja un círculo sin relleno. La sintaxis es:

Cir <x> , <y> , <radio> , <color>

Cir 100,100,30,RED dibuja un circulo con radio 30 de color rojo.

Cirs: dibuja un círculo con relleno. La sintaxis es:

Cirs<x> , <y> , <radio> , <color>

Cirs50,50,20,RED dibuja un circulo con radio 20 relleno de color rojo.

Ing. Francisco Salazar Navarrete

Ejemplo: se pretende conectar una pantalla TFT NEXTION de 3,5’’ a un microcontrolador

PIC16F84A, realizando una conexión serial de 9600 baudios. Se realizara una interface
grafica sencilla en la pantalla NEXTION, tal como se muestra en la siguiente figura.

La GUI está formada por una etiqueta “t0”, una barra de progreso “j0” y un botón simple
“b0”. La idea es enviar una letra “H” desde el microcontrolador hacia la pantalla, así como
la cadena “Hola” y esta se represente en la etiqueta “t0”. Además se debe enviar a la
pantalla el valor “50” para modificar el valor correspondiente a la barra “j0”. Por otra
parte, cuando un usuario presione el botón “b0” en la pantalla, se deberá encender un LED
ubicado en la patilla RA0 del microcontrolador PIC.La comunicación serial entre el PIC y
la pantalla se simulara por software, donde el PIN RA2 será el de transmisión y el PIN RA3
el de recepción. El circuito eléctrico es el siguiente:
Ing. Francisco Salazar Navarrete

Código fuente:

#include <16F84A.h>
#fuses XT,NOWDT,NOPROTECT,PUT
#use delay(clock=4000000)
#use fast_IO(A)
#use fast_IO(B)
#use RS232(FORCE_SW,baud=9600,xmit=PIN_A2,rcv=PIN_A3,bits=8,parity=N,stop=1)

void main(void)
{
int recibe[7]={0x00,0x00,0x00,0x00};
set_tris_A(0b00001000); //RA3 como entrada, el resto como salida.

delay_ms(3000); //esperamos 3 segundos para estabilizar voltaje en el LCD.

//------------------------------------------------------------------------------
//vamos a proceder a enviar a la pantalla NEXTION un caracter
//para ello debemos enviar la siguiente trama de datos:
//1-Primero el nombre de la pagina.
//2-Segundo el nombre del control sobre el cual se desea trabajar.
//3-Tercero la propiedade del control que se desea modificar seguida de su valor
//4-Finalmente una secuencia de final correspondiente a 3 veces 0xFF.
//------------------------------------------------------------------------------
printf("page0.t0.txt=\"%c\"ÿÿÿ",'H'); //enviamos el nombre de la pagina, el control y la propiedad a modificar

delay_ms(2000); //esperamos 2 segundos.

//------------------------------------------------------------------------------
//ahora vamos a enviar una cadena de caracteres, siguiendo la secuencia anterior
//------------------------------------------------------------------------------
Ing. Francisco Salazar Navarrete

printf("page0.t0.txt=\"%s\"ÿÿÿ","Hola"); //enviamos el nombre de la pagina, el control y la propiedad a

modificar

delay_ms(2000); //esperamos 2 segundos.

//------------------------------------------------------------------------------
//ahora procedemos a enviar un caracter numerico, un valor entero.
//------------------------------------------------------------------------------
printf("page0.j0.val=%uÿÿÿ",50); //enviamos el nombre de la pagina, el control y la propiedad a modificar

while(TRUE)
{

If(kbhit()==1) //verifica si entro un dato por el puerto serie

{
for(int i=0; i<7; i++)
{

recibe[i]=getc(); //si entro un dato, almacénelo, de lo contrario continue...

//realiza una comparación de cada uno de los byte almacenados en el arreglo de recepción
//para verificar si se siende el LED o no

if(recibe[0]==0x65 && recibe[1]==0x00 && recibe[2]==0x03 && recibe[3]==0x01)

{
output_high(PIN_A0); //si la trama recibida coincide, encienda el LED.
}
}
}
}