Hola bienvenidos a este nuevo capítulo donde vamos a adentrarnos un poco más en el funcionamiento del
display.
Y bueno vamos a ver algunas funciones y a conocer un poco más en profundidad la librería que hemos instalado
recientemente acá les voy a dejar para que puedan copiarlo a ustedes y ponerlo en ese archivo que les
recomiendo hacer a dónde vamos a ir guardando todos los datos útiles pedacitos de código que nos sirven.
Vamos a saber que estos son los includes que necesitamos hacer para que funcione la librería.
Cada vez que vayamos a hacer un proyecto donde necesitemos usar este display como habíamos hablado en
el capítulo anterior es que a poner menos uno.
Esa es la manera correcta de pasarle algo la función porque como le funciona me pide que le pasen entero
si no se lo paso me va a dar error.
Entonces corroboramos de error en una de esas no estoy en lo cierto.
A mí me está pidiendo que algo sí o sí le tengo que pasar a esa función así que no vamos a dejarle al
menos uno grabo y ya no me tendría que dar más el error a está Moheno
esto ya no lo necesitamos.
A ver si es correcto listo.
Bueno esto sería un esqueleto básico para empezar a usar nuestra pantalla acá en el ZetaP hicieron serial
por si más adelante no lo necesito por si nos interesa sacar algo por terminal y vamos a dar inicio
al display que es mediante la función Beguin y la única particularidad es como vimos hacer un escaneo
de la dirección del dispositivo para saber la dirección del display.
Bueno en realidad cuando vean este comando mejor dicho esta función estas funciones para mostrar en
pantalla lo que previamente hayamos preparado.
Por ejemplo mirá acá abajo ya vamos a venir a esto lo vamos a explicar en profundidad pero acá abajo
yo voy a dibujar un pixel o sea un solo puntito en esta pantalla que es una matriz de puntos de 128
de ancho por 64 de alto.
Con esta función sólo dibujaría un pixel pero ese pixel no va a aparecer hasta que después de esa función
no le agregué.
Esta otra función que es display punto display o mostrar sería algo vamos a decirlo de esa manera.
Entonces yo puedo preparar toda la pantalla que quiero mostrar por ejemplo compuesta por varios píxeles
en distintas posiciones y una vez que preparé todos los pixeles los muestro todos de una sola vez.
Bueno ya volvemos a los pixeles pero para qué les quería contar esto.
Porque este display punto display tiene otra función cuando lo usamos por primera vez al usarlo acá
como primera vez lo que va a hacer es mostrar mostrar lo que se conoce como splash screen que es la
propaganda de Fruit el fabricante que sale con algunas florcitas y el logo de ellos.
Entonces acá lo que hacés muestra ese logo splash screen y luego genera un delay de dos segundos para
que quede al menos un tiempo en pantalla y se lo pueda apreciar.
Si yo borro esto automáticamente dejo de hacerle publicidad a John Fruit y empieza a ser más mi proyecto
más que el de Frith así que bueno yo por ahora se lo voy a sacar y ya van a ver que no aparece más esa
publicidad ese logo.
Bueno sigamos habíamos quedado en el tema de los pixeles pero vean entonces cómo nos queda esto preparado
inicio el display es una buena práctica de entrada pegarle una borrada con esta función Clear Display
y no tengo que pasarle nada bueno esto va a borrar el display y lo vamos a usar a cada rato cada vez
que querramos limpiar la pantalla.
Sigamos ahora si vamos a dibujar un pixel y está bueno que ya empecemos a entender cómo funciona esto
de las coordenadas por qué se va a usar en casi todos los métodos o en casi todas las funciones que
tiene esta librería.
Veamos.
Acá es muy simple lo que le digo es dibujamos un pixel en la coordenada x Número 10 coordenada ahí o
sea vertical número 10 si yo ejecuto esto no se va a ver nada porque porque después como les dije recién
necesito mostrarlo en pantalla.
Veamos ahora sí veamos dónde sale este pixel
bueno como ven tenemos un pixel que empezó en la columna 10 Fila 10.
Si yo lo quisiera poner más o menos a la mitad del display en cuanto a lo horizontal esto es para que
ustedes se den cuenta cómo funciona.
Tenemos 128 de ancho entonces sería lo 64 pero esto empieza de cero a ciento veintisiete en realidad.
Así que yo me imagino que será en la posición 63 64 que es la mitad.
Veamos si esto es cierto.
Bravo.
Bueno como ven en la imagen ya tenemos el pixel a medio display.
En cuanto a lo horizontal y si lo quisiéramos poner totalmente en el centro nos faltaría centrarlo de
manera vertical tenemos 64 de alto 64 filas pero como arranca desde el cero supongo que serán 63 más
o menos.
Vamos a decir que en la 32 31 tendremos la mitad.
Vamos a ver si esto es cierto.
Bueno miren lo que puedo hacer lo puedo hacer lo siguiente
que se imaginan que va a aparecer si algo está bueno.
De entrada ya ven que son 4 pixeles por dibujar pero estarían todos en la misma posición pero si yo
voy incrementando este número lo que ustedes van a ver que se imaginan.
A ver sabemos de la duda.
Exacto 4 píxeles con algunos espacios en el medio.
Ahora bien qué pasa si aumentamos este número también así.
Ahí ahí y supongamos
grabó bueno también estoy generando un desplazamiento vertical en este caso hacia abajo porque a medida
que crece el número me voy hacia abajo cuando crece este número.
Este número de acá cuando crece este número me estoy yendo hacia la derecha si yo quisiera.
Si yo quisiera generar algún efecto de movimiento yo podría acá hacer lo siguiente Dilthey
supongamos un segundo y recién ahora muestro no no no no es así píxel muestro
y espero un segundo.
Luego repetimos esto ahí.
Supongamos tres lo vamos a hacer y obviamente voy a tener que modificar la posición entre pixel y pixel.
Entonces 63 acá le vamos a poner 66 y acá le vamos a poner que le vamos a poner 70.
Es bastante corta de esto y para que se vea lo que voy a hacer es ponerlo en el Loup y le voy a agregar
un al final una vez que termine todo display punto Clear Clear Display.
Así es la función para borrar la pantalla entonces se mueva 3 veces borra se mueve borra.
Vamos a ver cómo sale.
Bueno esto es solamente para entrenarnos en lo que se viene y nos da idea de De qué se trata esto si
vamos con alguna otra función.
Seguimos con la función dis display punto
drogó React es para dibujar rectángulos
y si les pasa varios parámetros el primero es a donde quiero que empiece y está compuesto por dos parámetros
en realidad que son las coordenadas.
Yo quiero que el vértice superior izquierdo del rectángulo empiece en la coordenada 10 para que tenga
un margen superior digamos
y que empiece también en la coordenada y 10 para generar un margen a la izquierda para que no empiece
en el borde de la pantalla de arriba a la izquierda que tenga cierto margen un poco más abajo tanto
desde la izquierda de derecha como de arriba abajo que se separa un poco del borde de la pantalla.
Entonces los dos primeros valores van a ser donde quiero que empiece el vértice superior izquierdo del
rectángulo luego le voy a pasar el ancho del rectángulo en píxeles bueno si todo el display tiene 128
de ancho ya ya de entrada sé que más de 128 píxeles no puede tener.
Entonces vamos a hacer un rectángulo de 80 píxeles de ancho supongamos por acá voy a poner el alto del
rectángulo.
Quiero que tenga 30 píxeles y lo último que le voy a pasar es el color a recuerdan que en el pixel también
le pasamos el color como son displays en blanco y negro.
Solo puedo pasar LeWitt o Black qué sentido tiene dibujar un rectángulo negro solo lo va a tener cuando
tengamos un fondo blanco en el display que vamos a ver cómo lo hacemos y ahí necesitaríamos hacerlo
en negativo o sea que todo lo que escribiéramos sería negro.
Grabo me voy a ahorrar el hecho de grabar porque como les dije esto no va a dibujar nada porque por
qué qué piensan que no lo voy a dibujar porque tengo que sí o sí poner display punto display después
para que lo que preparé acá arriba se muestre en pantalla.
Vamos a grabarlo y ahí están los resultados.
Cómo podría hacer para hacer rectángulos concéntricos o rectángulos centrados que estén cada vez más
pequeños como hacerlos más grandes rectángulos o hacerlo de 120 recrecido generosamente grande y de
alto.
Le vamos a dar 1064 es el máximo de alto que puede tener.
Entonces le vamos a dar 60.
Bueno yo puedo yo puedo agarrar y hacer empezar a dibujar rectángulos más pequeños adentro 110 50 y
acá vamos a dibujar otro que esté en 100 40.
No va a salir como pensábamos.
Mira bueno como ven el rectángulo de 120 se me fue de pantalla porque si la pantalla puede tener 128
pero yo estoy arrancando 10 corrido de la derecha así que 120 más los 10 ya se me fue de 130.
Por eso si se va de pantalla entonces hagamos algo arranquemos de cero izquierda y si me va de alto
también y arranquemos de cero en altura
a ver como luce ahora va mejorando la cosa poco a poco van descubriendo cómo funciona esto de dibujar
con líneas y rectángulos sus propios menúes sus propios displays lo que quieren mostrar y por eso estamos
practicando con esto que al principio puede parecer aburrido algo tedioso pero es para que le puedan
dar la mano en serio.
Bueno
yo me voy a adelantar acá para ver si los puedo ir centrando.
En realidad no hay como no hay cómo dibujar estos rectángulos en una matriz de puntos que sea igual
al display y eso les va a dar idea de cómo tienen que ir configurando la disposición de los mismos para
que salgan como desean.
Bueno ya les dejo una pista como pueden ver ya aparecen los tres rectángulos relativamente centrados
uno adentro de otro y esta es la técnica que se usa vamos a seguir viendo algunas otras funciones como
pueden ver.
Esta es el Phill React.
Esta función es similar a la anterior con la particularidad de que dibuja un rectángulo relleno todo
pintaba adentro.
De qué color del color que vio pasar acá mírenlo en pantalla
entonces es para esto que cobraba sentido el poder después dibujar por ejemplo entre otras cosas rectángulos
no rellenos.
Si bien es el rectángulo común de color negro ahora se van a dar cuenta mira gravó y como vemos en la
imagen tenemos el primer rectángulo blanco y hemos dibujado en su interior dos rectángulos menores no
rellenos y con el trazo de color negro.
Esto sería loco lo que se conoce como trabajar en negativo.
Bueno esta función me va a permitir dibujar un rectángulo con los bordes redondeados pero round recta.
Voy a pasar a donde quiero que empiece dicho rectángulo.
Voy a pasarle ancho alto y por último el radio de redondeo.
Mientras más grande sea este número tengo el 20 más redondeado va a salir el vértice de cada uno de
los vértices del rectángulo.
Vamos a ver cómo sale esto y seguimos adelante.
Si se fijan lo que estoy haciendo es cada vez que probamos una función la voy pegando acá arriba comentado
para que les quede cada una de ellas listas listas para usar y para pero ahora vamos con otra y no varían
mucho.
Es el final a ver si era así.
Phil pero vemos si era así.
Mira
esta ya no necesita mayor explicación.
Es lo mismo que lo anterior solo que con el rectángulo lleno.
Sigamos.
Vamos a ver cómo dibujar triángulos y yo tengo que pasarle tres coordenadas.
En definitiva le tengo que pasar cada uno de los puntos del triángulo cada vértice.
Entonces puedo decir que el primer vértice va a ser no sé 10 10 en esa coordenada pongo el primer vértice.
El segundo vértice va a ser
45 60 y el tercero más abajo vamos a poner.
Vamos a ver cómo sale lo estoy haciendo al azar prácticamente le vamos a poner 60
60
y acá me estoy olvidando algo recontra importante el color.
Ahora si Ivana
tenemos un escaleno algo exótico y pasemos a otra función que nos va a revestir ninguna complejidad
para ustedes a esta altura.
Y es
el Phil Triangle que sería el triángulo lleno.
Veamos cómo sale
bueno y seguramente pensarán que me sé de memoria todas estas funciones no.
Obviamente no. Simplemente lo que hago es inspirarme tratar de entender cómo funciona el ejemplo que
lo tengo acá a la izquierda y esa es la diferencia entre copiar y pegar.
No estoy copiando y pegando me voy a cada función.
Las examino y es algo que se gana con la práctica.
No se trata de un don especial de una iluminación que nos viene desde el cielo no se trata de practicar
de manera inevitable si siguen insistiendo siguen leyendo tratando de ver cómo funciona esta librería
ver cómo hicieron el ejemplo.
Van a empezar a entender se los garantizo.
Pero bueno los quiero ayudar con decirles que van a tener otra función como es la de dibujar círculos
se repite más o menos lo mismo lo pueden encontrar en el ejemplo que viene con la librería pero si voy
a seguir un poquito dándoles una mano con el tema del texto porque es algo que vamos a usar mucho
para lo que es texto.
Por lo general en primer lugar se CTA el tamaño de texto que vamos a usar.
Vamos a ir haciendo la prueba.
Tamaño que le sigue bueno a priori pareciera que esta función recibe un solo valor pero en realidad
está recibiendo dos valores sólo que cuando sólo le paso un color lo interpreta como el color de relleno
de la letra.
Y si le paso dos valores al segundo lo lo va a tomar como el fondo.
Esto va a ser ya van a ver para qué.
Muy útil cuando no le estoy pasando fondo asume que es negro bien sigamos.
Antes de empezar a escribir yo voy a aceptar en qué posición quiero que empiece la escritura y esto
que planteo acá no necesariamente tiene que ser en este orden.
Todo esto lo tengo que preparar antes de que ocurra el display y punto Display.
Vamos un poco más.
Pasamos directamente ya a la impresión de la letra que queremos que salga en pantalla.
Voy a tener cuidado también entre el tamaño y que no se me vaya fuera no hay cómo probarlo para ver
si la frase No nos entra.
Aparece el print LN Qué recuerdo no con el serial que también tiene esta misma función que lo que hace
es escribir esto a partir de donde se tira el cursor y dejar una línea hacia abajo.
Esto lo tengo que tener en cuenta por si yo vuelvo a escribir acá.
Print LN aunque no le pase a una nueva posición de cursor esta frase va a salir va a salir exactamente
abajo de la otra pero hay que poner un dos para diferenciar una de otra.
Si vamos
como ven también lo que me está queriendo decir la librería es que se pueden imprimir números y le puedo
directamente pasar un número a la función.
Y bueno probemos esto que ya tenemos preparado acá grabo y lo carga en la placa.
Cómo ven la imagen que está tomada de cerca y por eso parece que es algo grande la letra.
No se crean es súper chiquito entonces probemos otros tamaños de letra ahí estamos viendo el tamaño
número dos que es como que pega un salto bastante grande.
Eso es algo que me cuesta a veces trabajar.
Lamentablemente la librería es así y ahora pasamos a un tamaño tres que ya verán bueno y algo que les
quería mostrar.
Miren mirá voy a dibujar previamente un rectángulo que tenga todo el tamaño de la pantalla 127.
Con esto más seguro que cubra todo por 63 acá va a estar todo blanco y voy a escribir letra de color
negro para que se lea.
Miren perfecto grabo y quería también mostrarles este caso que sería el de voy a sacar el fondo blanco
y les voy a pasar solamente el fondo a la letra.
Fondo negro.
O mejor así.
Perdón pero ahora sí letra blanca fondo negro y lo que voy a hacer es volver a la letra pequeña.
Bueno no era esto lo que quería mostrar en realidad era al revés.
Esto disculpen.
Ahora si esto esto porque se usa muchas veces para hacer menúes o simular especie de botones.
Miren
Bueno ya tenemos un panorama bastante amplio de cómo manejarnos con la librería de este display con
los display gráficos se van a encontrar casi siempre con el mismo reto con funciones que letra más letra
menos son muy similares así que no se olviden.
La idea es prepararnos y hacernos todoterreno y no volvernos expertos en una sola librería o en un solo
tipo de display Síganme en el próximo capítulo que les aseguro pero esta vez les aseguro que no lo van
a poder creer.
Nos vemos.