
English: 
Dear friends welcome back. Today we're
going to see how to display
are custom-made bitmap graphics on
this tiny
OLED display using Arduino. Let's start!
Today we are using the tiny and
very easy to use OLED display with an Arduino Uno.
as you can see in the display I have
loaded
some custom made graphics from the popular arcade game
Space Invaders. I have designed three frames which are shown
one after another. In order to see how to
connect your
OLED display to your Arduino board
please ckeck our previous tutorial on that.
Now let's go to the computer and see how the program Arduino to display
these graphics. As you can see the code of the project is
really simple. We are using the u8
graphics library for
Arduino. In order to download it
you have to visit the library's
website and download it from here.
We click here ... Download the

Spanish: 
Queridos amigos, bienvenidos. Hoy vamos como a ver  un display (oled)
son gráficos de mapa de bits hechos a medida en
esta pequeña
Pantalla OLED usando Arduino. ¡Empecemos!
Hoy estamos usando lo pequeño y
pantalla OLED muy fácil de usar con un Arduino Uno.
como puedes ver en la pantalla tengo
cargado
algunos gráficos personalizados del popular juego de arcade
Invasores espaciales. He diseñado tres cuadros que se muestran
Uno después del otro. Para ver cómo
conecta tu
Pantalla OLED para su placa Arduino
por favor, haga clic en nuestro tutorial anterior sobre eso.
Ahora vamos a la computadora y veamos cómo se muestra el programa Arduino
estos gráficos Como puede ver, el código del proyecto es
realmente simple. Estamos usando el u8
biblioteca de gráficos para
Arduino. Para descargarlo
tienes que visitar la biblioteca del
sitio web y descárguelo desde aquí.
Hacemos clic aquí ... Descarga el

Spanish: 
biblioteca para Arduino y luego vamos a
descargas.
Lo descargamos desde aquí. Entonces todo lo que tenemos que hacer
es descomprimir en nuestra carpeta Arduino -> Bibliotecas.
En el código tenemos Arrays (matrices) de tres bytes que contienen los datos
de cada bitmap
el gráfico que se va a mostrar en
la pantalla. Asi que
todo lo que hacemos en el código es mostrarlo
estos gráficos uno tras otro con un
retraso
de tres segundos. Usamos el comando drawBitmap
para mostrar los gráficos en el
pantalla. El comando tiene cuatro argumentos
Los primeros 2 son las coordenadas X, Y de la pantalla que queremos
la esquina superior izquierda sobre el mapa de bits para
ser atraído por
El tercer argumento es el ancho de la imagen
dividido por 8, entonces es la altura
de la imagen de mapa de bits, y luego es
el Array (matriz) de bytes que queremos dibujar.
para crear los mapas de bits que
quiero mostrar en la pantalla

English: 
library for Arduino and then we go to
downloads.
We download it from here. Then all we have to do
is to unzip in our Arduino -> Libraries folder.
In the code we have three byte Arrays that contain the data
of each bitmap
graphic that is going to be displayed on
the screen. So
all we do in the code is to display
these graphics one after another with a
delay
of three seconds. We use the command drawBitmap
in order to display the graphics on the
screen. The command has four arguments
The first 2, are the x and y coordinates of the screen that we want
the top-left corner over the bitmap to
be drawn to.
The third argument is the width of the image
divided by 8, then is the height
of the bitmap image, and then it's
the byte Array that we want to draw.
in order to create the bitmaps that we
want to display on the screen

English: 
we can use either Photoshop or the
Free Software
paint.net . We create a new
empty document with a resolution 128
by 64 because that's the resolution
of the display. We disable antialiasing
and we can use only two colors, Black
and white. If we use any other colour
it won't appear on the display. I created
a new bitmap
and now I'm going to save it as a .bmp file.
So we go to File -> Save as
we save as BMP and we enter a new name here
for example space4.bmp and
we press save. OK.
Flatten image. We don't want any layers.
and that's it.
Now we are going to use LCD assistant in order to create
a byte Array from this bitmap. I have loaded the

Spanish: 
podemos usar Photoshop o el
Software libre
paint.net. Creamos un nuevo
documento vacío con una resolución de 128
por 64 porque esa es la resolución
de la pantalla. Deshabilitamos el antialiasing
y podemos usar solo dos colores, Negro
y blanco. Si usamos cualquier otro color
no aparecerá en la pantalla. yo he creado
un nuevo mapa de bits
y ahora voy a guardarlo como un archivo .bmp.
Así que vamos a Archivo -> Guardar como
guardamos como BMP e ingresamos un nuevo nombre aquí
por ejemplo, space4.bmp y
presionamos guardar. OK
La Imagen aplanada. No queremos capas.
y eso es.
Ahora vamos a usar el asistente de LCD para crear
una matriz (Array) de bytes de este mapa de bits. He cargado la

Spanish: 
imagen en el software asistente LCD
y cambio la configuración a la orientación horizontal.
Ahora todo lo que tenemos que hacer es presionar
Archivo
guardar salida como por ejemplo
space4.c y presione guardar.
Eso es. Luego abrimos el archivo que el asistente de LCD ha creado
y copiamos los datos de la la matriz (Array) desde aquí. Nosotros entonces
pegamos en nuestro Arduino
boceto (sketch) y el ingreso de la palabra PROGMEM
para almacenar toda esa información
en la memoria del programa. Entonces todo lo que tenemos
que hacer
es llamar al comando drawBitmap y
con la nueva matriz (array) de mapas de bits. ¡Eso es!
Así de fácil es mostrar
gráficos en el pequeño
Pantalla OLED de 128 por 64. El resultado en la
pantalla
es impresionante. La pantalla es muy
brillante y clara
y los gráficos se ven geniales Eso 
hace que me pregunte.
¿Quieres realmente convertir este pequeño
proyecto

English: 
image on the LCD assistant software
and I change the settings to Horizontal orientation.
Now all we have to do is to press
File
save output as for example
space4.c and press save.
That's it. Then we open the file that LCD assistant has created
and we copy the data Array from here. We then
paste it in our Arduino
sketch and the enter the word PROGMEM
in order to store all that data
in the program memory. Then all we have
to do
is to call the drawBitmap command and
with the new bitmap Array. That's it!
That's how easy it is to display
graphics on the tiny
128 by 64 OLED display. The result on the
screen
is impressive. The display is very
bright and clear
and the graphics look great. That's what
makes me wonder.
Do you want to actually turn this little
project

English: 
into not fully playable Space Invaders
game?
It will be an interesting project. What do
you think?
Post your thoughts in the comment
section below. Thank you very much for
watching, press like if you like the video and see you next week!

Spanish: 
Space Invaders  totalmente jugable
¿el juego?
Será un proyecto interesante. ¿que piensas?
Publica tus pensamientos en la sección de comentarios
de abajo. Muchas gracias por
ver, presiona si me gusta el vídeo y ¡nos vemos la próxima semana!
