Customiza la pantalla LCD/OLED de tu impresora 3D como más te guste

Tenía un módulo LCD del tipo «RepRapDiscount Full Graphic Smart Controller» por casa, y he decidido ponerlo en la nueva Prusa i3 para hacerla autónoma, y de esa forma no tener que andar con un ordenador enchufado a esta cada vez que quiera imprimir algo.

Me ha costado un poco ponerla en marcha porque había un pin que hacía mal contacto y funcionaba todo menos ver los ficheros de la SD, incluso me detectaba que la introducía o quitaba. Después de un rato muy largo he descubierto que era el cable, así que conectándolo bien, ya ha empezado todo a funcionar. En cuanto a software no es para nada difícil de configurar, solo hay que instalar una librería en caso de que no la tengas (u8glib) y descomentar alguna línea, aunque no vamos a hablar de cómo hacer eso en esta entrada. Aunque yo haya probado con este módulo en concreto, aclarar que este tutorial debería valer para cualquier pantallita de 128×64 píxeles como puede ser una MKS OLED, por ejemplo

Cuando estaba imprimiendo una pieza para ver que funcionaba bien, me he dado cuenta de que el dibujo del hotend que aparecía en la pantalla no me gustaba demasiado. También he pensado que podría modificar la pantalla de inicio. Así que he decidido echar un vistazo a Marlin.

¿Qué necesitamos?

• Escribir algunas cosas en Marlin, incluso usando la técnica «copy-paste» podríamos hacer todo. Vamos a ver que es muy sencillo.
• Dibujar en blanco y negro para generar algunas imágenes. Yo he usado paint por la sencillez.

Vamos a ver que es muy sencillito de hacer. Vamos a dividirlo en dos partes, en la de custominzar la pantalla de inicio y en la de customizar la «info screen».

Customizando los iconos de nuestra pantalla de información

Antes de ponernos a dibujar, vamos a localizar dónde están las imágenes. El fichero que vamos a cambiar es el dogm_bitmaps.h. Aquí es ahora donde tienes que analizar que sección te corresponde a ti. Por ejemplo, yo no tengo la base caliente puesta, y en el marlin he configurado que tengo únicamente un hotend. Comenzaremos buscando con «Ctrl+F» «HAS_TEMP_BED», y una vez situados, la parte que nos corresponda.

En mi caso, tendré que ir al else por no tener base caliente, y ahí dentro buscar la sección de 1 hotend.

#if HAS_TEMP_BED
...
#else
  #if HOTENDS == 1
    //Esta será la parte de código que me corresponde
...

Dentro de cada sección que acabamos de definir, podemos ver que hay dos trozos de código, para dos imágenes. Cuando imprimimos si nos fijamos, si tenemos activado el ventilador, este va «girando». Es por estas dos imágenes. La que lleva un 1 en el nombre es la que aparece cuando tenemos la pantalla de información antes de imprimir (ventilador parado), y la que lleva un 0 en el nombre es con la que va alternando cuando lo activamos. Esto lo podemos tener en cuenta a la hora de hacer los dibujos. También vemos que se especifica el tamaño de la anchura y de la altura de nuestra imagen.

#define STATUS_SCREENWIDTH     115 //Width in pixels
#define STATUS_SCREENHEIGHT     19 //Height in pixels

Esta imagen va colocada en la banda superior, y ocupa casi todo el ancho (115 de 128 píxeles). Para hacernos una idea, si tenemos la imagen por defecto sería desde que empieza el hotend a la izquierda hasta que acaba el ventilador a la derecha.

Tenemos que tener cuidado con la altura de los dibujos, ya que podríamos superponer los números que aparecen arriba indicando las temperaturas objetivo.

Una vez que tenemos esto en cuenta, pasamos a hacer los dibujos en blanco y negro con el programa que nosotros queramos. Por facilidad, definiremos el tamaño del lienzo de 115x19px (mirando el código). Yo he hecho estos dibujos (lógicamente como he puesto grandes las fotos para que se vean salen pixelados). Al tener solo un hotend tengo mucho espacio libre para poder poner cosas.

Una vez que tenemos los dibujos, accedemos a una de las dos webs que aparecen comentadas en el código de marlin para realizar la conversión. Yo he escogido la primera.

/**
 * Standard Marlin Bitmap for splashscreen
 *
 * You may use one of the following tools to generate the C++ bitmap array from
 * a black and white image:
 *
 *  - http://www.marlinfw.org/tools/u8glib/converter.html
 *  - http://www.digole.com/tools/PicturetoC_Hex_converter.php
 *

Cargamos la imagen y se nos genera el código. Copiamos esa parte en la función correspondiente (Nos fijamos que el nombre de la nueva función sea el que ya tenía la vieja para no tener que hacer más cambios). La función vieja la podemos borrar o dejar comentada. Así nos quedaría la parte correspondiente del código.

#else
  #if HOTENDS == 1
    #define STATUS_SCREENWIDTH     115 //Width in pixels
    #define STATUS_SCREENHEIGHT     19 //Height in pixels
    #define STATUS_SCREENBYTEWIDTH  15 //Width in bytes
    // Width: 115, Height: 19
    const unsigned char status_screen0_bmp[] PROGMEM = {
      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0x80, 0x00, 0x00, 0xff, 0xff, 0xe0, 
      0x00, 0x00, 0x00, 0x00, 0x38, 0x00, 0x00, 0x00, 0x40, 0x40, 0x00, 0x00, 0xbc, 0x07, 0xa0, 
      0x00, 0x00, 0x00, 0x08, 0x38, 0x20, 0x00, 0x01, 0x80, 0x30, 0x00, 0x00, 0xf9, 0xf3, 0xe0, 
      0x00, 0x00, 0x00, 0x1c, 0x38, 0x70, 0x00, 0x02, 0x00, 0x08, 0x00, 0x00, 0xe3, 0xf8, 0xe0, 
      0x00, 0x00, 0x00, 0x3e, 0x7c, 0xf8, 0x00, 0x02, 0x00, 0x08, 0x00, 0x00, 0xe1, 0xf0, 0xe0, 
      0x00, 0x00, 0x00, 0x1f, 0xff, 0xf0, 0x00, 0x04, 0x00, 0x04, 0x00, 0x00, 0xc0, 0xe0, 0x60, 
      0xff, 0x80, 0x00, 0x0f, 0xff, 0xe0, 0x00, 0x08, 0x00, 0x02, 0x00, 0x00, 0x90, 0x41, 0x20, 
      0x22, 0x00, 0x00, 0x07, 0xff, 0xc0, 0x00, 0x09, 0xe0, 0xf2, 0x00, 0x00, 0xb8, 0xe3, 0xa0, 
      0xff, 0x80, 0x00, 0x07, 0xc7, 0xc0, 0x00, 0x0a, 0x00, 0x0a, 0x00, 0x00, 0xbd, 0xf7, 0xa0, 
      0x22, 0x00, 0x00, 0x7f, 0x83, 0xfc, 0x00, 0x08, 0xe0, 0xe2, 0x00, 0x00, 0xbf, 0xff, 0xa0, 
      0xff, 0xe0, 0x00, 0x7f, 0x83, 0xfc, 0x00, 0x09, 0x61, 0x62, 0x00, 0x00, 0xbd, 0xf7, 0xa0, 
      0xff, 0x60, 0x00, 0x7f, 0x83, 0xfc, 0x00, 0x08, 0x00, 0x02, 0x00, 0x00, 0xb8, 0xe3, 0xa0, 
      0xfe, 0x20, 0x00, 0x0f, 0xc7, 0xe0, 0x00, 0x08, 0x00, 0x04, 0x00, 0x00, 0x90, 0x41, 0x20, 
      0xff, 0x60, 0x00, 0x07, 0xef, 0xc0, 0x00, 0x04, 0x00, 0x44, 0x00, 0x00, 0xc0, 0xe0, 0x60, 
      0xff, 0xe0, 0x00, 0x0f, 0xc7, 0xe0, 0x00, 0x02, 0x1f, 0x88, 0x00, 0x00, 0xe1, 0xf0, 0xe0, 
      0x41, 0x00, 0x00, 0x1f, 0xc7, 0xf0, 0x00, 0x02, 0x00, 0x08, 0x00, 0x00, 0xe3, 0xf8, 0xe0, 
      0x22, 0x00, 0x00, 0x3f, 0x83, 0xf8, 0x00, 0x01, 0x80, 0x30, 0x00, 0x00, 0xf9, 0xf3, 0xe0, 
      0x14, 0x00, 0x00, 0x1c, 0x82, 0x70, 0x00, 0x00, 0x60, 0xc0, 0x00, 0x00, 0xbc, 0x07, 0xa0, 
      0x08, 0x00, 0x00, 0x08, 0x00, 0x20, 0x00, 0x00, 0x1f, 0x00, 0x00, 0x00, 0xff, 0xff, 0xe0, 
};
  
    #define STATUS_SCREENWIDTH     115 //Width in pixels
    #define STATUS_SCREENHEIGHT     19 //Height in pixels
    #define STATUS_SCREENBYTEWIDTH  15 //Width in bytes

    // Width: 115, Height: 19
    const unsigned char status_screen1_bmp[] PROGMEM = {
      0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x3f, 0x80, 0x00, 0x00, 0xff, 0xff, 0xe0, 
      0x00, 0x00, 0x00, 0x00, 0x38, 0x00, 0x00, 0x00, 0x40, 0x40, 0x00, 0x00, 0xbc, 0x07, 0xa0, 
      0x00, 0x00, 0x00, 0x08, 0x38, 0x20, 0x00, 0x01, 0x80, 0x30, 0x00, 0x00, 0xf9, 0x13, 0xe0, 
      0x00, 0x00, 0x00, 0x1c, 0x38, 0x70, 0x00, 0x02, 0x00, 0x08, 0x00, 0x00, 0xe7, 0x1c, 0xe0, 
      0x00, 0x00, 0x00, 0x3e, 0x7c, 0xf8, 0x00, 0x02, 0x00, 0x08, 0x00, 0x00, 0xef, 0x1e, 0xe0, 
      0x00, 0x00, 0x00, 0x1f, 0xff, 0xf0, 0x00, 0x04, 0x00, 0x04, 0x00, 0x00, 0xdf, 0x1f, 0x60, 
      0xff, 0x80, 0x00, 0x0f, 0xff, 0xe0, 0x00, 0x08, 0x00, 0x02, 0x00, 0x00, 0x9f, 0x1f, 0x20, 
      0x22, 0x00, 0x00, 0x07, 0xff, 0xc0, 0x00, 0x09, 0xe0, 0xf2, 0x00, 0x00, 0xbf, 0xff, 0xa0, 
      0xff, 0x80, 0x00, 0x07, 0xc7, 0xc0, 0x00, 0x0a, 0x00, 0x0a, 0x00, 0x00, 0x81, 0xf0, 0x20, 
      0x22, 0x00, 0x00, 0x7f, 0x83, 0xfc, 0x00, 0x08, 0xe0, 0xe2, 0x00, 0x00, 0x81, 0xf0, 0x20, 
      0xff, 0xe0, 0x00, 0x7f, 0x83, 0xfc, 0x00, 0x09, 0x61, 0x62, 0x00, 0x00, 0x81, 0xf0, 0x20, 
      0xff, 0x60, 0x00, 0x7f, 0x83, 0xfc, 0x00, 0x08, 0x00, 0x02, 0x00, 0x00, 0xbf, 0xff, 0xa0, 
      0xfe, 0x20, 0x00, 0x0f, 0xc7, 0xe0, 0x00, 0x08, 0x00, 0x04, 0x00, 0x00, 0x9f, 0x1f, 0x20, 
      0xff, 0x60, 0x00, 0x07, 0xef, 0xc0, 0x00, 0x04, 0x00, 0x44, 0x00, 0x00, 0xdf, 0x1f, 0x60, 
      0xff, 0xe0, 0x00, 0x0f, 0xc7, 0xe0, 0x00, 0x02, 0x1f, 0x88, 0x00, 0x00, 0xef, 0x1e, 0xe0, 
      0x41, 0x00, 0x00, 0x1f, 0xc7, 0xf0, 0x00, 0x02, 0x00, 0x08, 0x00, 0x00, 0xe7, 0x1c, 0xe0, 
      0x22, 0x00, 0x00, 0x3f, 0x83, 0xf8, 0x00, 0x01, 0x80, 0x30, 0x00, 0x00, 0xf9, 0x13, 0xe0, 
      0x14, 0x00, 0x00, 0x1c, 0x82, 0x70, 0x00, 0x00, 0x60, 0xc0, 0x00, 0x00, 0xbc, 0x07, 0xa0, 
      0x08, 0x00, 0x00, 0x08, 0x00, 0x20, 0x00, 0x00, 0x1f, 0x00, 0x00, 0x00, 0xff, 0xff, 0xe0, 
};

Y con esto ya tendríamos nuestros dibujos puestos.

Añadiendo una imagen de arranque customizada

En un primer momento, había pensado en modificar la pantalla que aparece al encender la impresora con el logo de marlin, pero tras leer este mensaje que aparece en el fichero Configuration.h he decidido no hacerlo.

// Marlin now allow you to have a vendor boot image to be displayed on machine
// start. When SHOW_CUSTOM_BOOTSCREEN is defined Marlin will first show your
// custom boot image and them the default Marlin boot image is shown.
//
// We suggest for you to take advantage of this new feature and keep the Marlin
// boot image unmodified. For an example have a look at the bq Hephestos 2
// example configuration folder.

Solo he cambiado la url.

#define STRING_SPLASH_LINE2 "haudahau.com/vadedos" // will be shown during bootup in line 2

Para poder añadir esta funcionalidad comenzamos descomentando la siguiente linea que nos aparece unas líneas más abajo, en el fichero Configuration.h

#define SHOW_CUSTOM_BOOTSCREEN

A continuación vamos a example_configurations/Hephestos_2 y copiamos el fichero _BootScreen.h y lo pegamos donde tenemos los ficheros de marlin.

Si abrimos el fichero para editarlo vemos que es muy sencillo, tiene tres parámetros, donde solo cambiaremos los de anchura y altura, el del timeout lo podemos dejar como está. Pondremos los números que correspondan con nuestra imagen. En este caso, me he descargado una de internet, en concreto un dibujo del museo Guggenheim de Bilbao.

(De nuevo aparece pixelada porque es la que he usado directamente) Sus medidas son de 120x47px. Usamos la misma web que en el apartado anterior para generar el array, y lo sustituimos. Si nos fijamos en el código de a continuación, entre corchetes le pasamos el valor del tamaño de la imagen en bytes, que será pxwidth * pxheigth / 8.

#include <avr/pgmspace.h>

#define CUSTOM_BOOTSCREEN_TIMEOUT   2500
#define CUSTOM_BOOTSCREEN_BMPWIDTH  120
#define CUSTOM_BOOTSCREEN_BMPHEIGHT 47

// Width: 120, Height: 47
const unsigned char custom_start_bmp[705] PROGMEM = {
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xcf, 0x59, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x21, 0xe2, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x00, 0x82, 0x43, 0xf8, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x00, 0x62, 0x44, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x08, 0x72, 0xa2, 0x30, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x06, 0x02, 0x32, 0x40, 0x01, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x08, 0x02, 0x03, 0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x10, 0x02, 0x00, 0x00, 0x00, 0x80, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x02, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x10, 0x02, 0x00, 0x00, 0x00, 0x40, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x10, 0x0f, 0xfe, 0x00, 0xf8, 0xf8, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x9e, 0x00, 0x00, 0x00, 0x00, 0x10, 0x01, 0x1c, 0x00, 0x03, 0x00, 0x00, 0x00, 0x00, 
  0x02, 0x81, 0x00, 0x00, 0x00, 0x08, 0x10, 0x01, 0x20, 0x00, 0x00, 0xff, 0xe8, 0x00, 0x00, 
  0x02, 0x01, 0x00, 0x00, 0x00, 0x00, 0x10, 0x81, 0xc0, 0x00, 0x10, 0x00, 0x08, 0x00, 0x00, 
  0x02, 0x01, 0x00, 0x00, 0x01, 0x7c, 0x80, 0x81, 0x20, 0x00, 0x11, 0x00, 0x08, 0x00, 0x00, 
  0x02, 0x41, 0x00, 0x00, 0x01, 0x0e, 0x20, 0x81, 0x00, 0x00, 0x11, 0x00, 0x0f, 0x80, 0x00, 
  0x00, 0x40, 0x00, 0x00, 0x61, 0xc0, 0x00, 0x85, 0xc0, 0x00, 0x11, 0x00, 0x00, 0x80, 0x00, 
  0x01, 0x40, 0x00, 0x00, 0x88, 0x01, 0xe0, 0x07, 0xc0, 0x00, 0x11, 0x00, 0x00, 0x00, 0x00, 
  0x01, 0x40, 0x00, 0x00, 0x80, 0x47, 0x20, 0x02, 0x40, 0x00, 0x11, 0x00, 0x00, 0x00, 0x00, 
  0x01, 0x40, 0x00, 0x00, 0x37, 0xdc, 0x00, 0x0b, 0xc0, 0x00, 0x11, 0x00, 0x00, 0x00, 0x00, 
  0x01, 0x40, 0x00, 0x00, 0xc0, 0x5d, 0x40, 0x0c, 0xc0, 0x00, 0x11, 0x00, 0x00, 0xc0, 0x00, 
  0x00, 0x41, 0x00, 0x0e, 0x00, 0x54, 0x00, 0x8d, 0xc0, 0x00, 0x10, 0x07, 0x80, 0x04, 0x00, 
  0x00, 0x01, 0x00, 0x20, 0x00, 0x55, 0x80, 0x88, 0x80, 0x00, 0x00, 0x04, 0x00, 0x04, 0x00, 
  0x00, 0x81, 0x00, 0x40, 0x00, 0x40, 0x80, 0x9d, 0x80, 0x00, 0x00, 0x04, 0x00, 0x04, 0x00, 
  0x00, 0x80, 0x00, 0x00, 0x00, 0xdf, 0x00, 0x98, 0x80, 0x00, 0x22, 0x05, 0xec, 0x04, 0x00, 
  0x00, 0x80, 0x00, 0x00, 0x0d, 0x00, 0x00, 0x1d, 0x80, 0xff, 0xef, 0x85, 0xfc, 0x04, 0x00, 
  0x00, 0x41, 0x00, 0x80, 0xc2, 0x5f, 0x00, 0x10, 0xf0, 0x00, 0x00, 0x25, 0xc4, 0x00, 0x00, 
  0x00, 0x41, 0x0a, 0x87, 0x14, 0x40, 0x00, 0x10, 0x80, 0x00, 0x00, 0x25, 0xec, 0x74, 0x00, 
  0x00, 0x40, 0x7e, 0x00, 0x04, 0x4d, 0x00, 0x0d, 0xd0, 0x00, 0x00, 0x05, 0xec, 0x40, 0x00, 
  0x02, 0x3a, 0x00, 0x00, 0x04, 0x08, 0x00, 0x40, 0x8f, 0x00, 0x00, 0x01, 0xe4, 0x40, 0x00, 
  0x00, 0x00, 0x20, 0x00, 0x04, 0x0f, 0x00, 0x4d, 0xef, 0x00, 0x00, 0x42, 0xfc, 0x40, 0x00, 
  0x00, 0x04, 0x10, 0x00, 0x04, 0x08, 0x00, 0x48, 0x8f, 0x00, 0x00, 0x42, 0xac, 0x40, 0x00, 
  0x03, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x0f, 0xff, 0x00, 0x00, 0xff, 0xff, 0xc0, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xfe, 0x10, 0x00, 0x01, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0f, 0x80, 0x01, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x7f, 0xff, 0x80, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 
};

Y con esto, ya tenemos completamente customizadas las imágenes de nuestra pantalla.