Cómo usar una pantalla OLED con Arduino

En esta entrada os queremos mostrar cómo usar una pantalla OLED con Arduino y poder mostrar la información que queráis: texto, imágenes, animaciones, etc.

Pero primero queremos daros una breve descripción del protocolo i2c, el cual usaremos para comunicar Arduino con la pantalla OLED.

Para usar este protocolo solo necesitaremos 4 pines:

Vcc para alimentar la pantalla. En este caso usaremos 3,3 Voltios.
GND o masa, como punto de referencia a 0 Voltios.
SDA (Serial Data), es decir la información que Arduino mandará a la pantalla para representar lo que programemos.
SCL (Serial Clock), es decir, la señal de reloj.

Una cosa a tener muy en cuenta es los pines que deberemos usar para SDA y SCL, los cuales dependerán de la placa de Arduino que estemos usando. A continuación os mostramos una tabla resumen con el puerto que se deberá usar según la placa utilizada.

Placa	I2C pins
Uno, Nano, Ethernet	A4 (SDA), A5 (SCL)
Mega2560	20 (SDA), 21 (SCL)
Leonardo	2 (SDA), 3 (SCL)
Due	20 (SDA), 21 (SCL), SDA1, SCL1

Figura 1. Tabla pines i2c

En nuestro ejemplo vamos a usar un Arduino Uno, por lo tanto, deberemos usar los puertos A4 y A5, tal como indica la tabla anterior.

Circuito

El circuito es muy simple:

Una vez tenemos montado el circuito, empieza la diversión. Podremos «pintar» todo lo que se nos ocurra. Pero empezaremos por lo más sencillo, simple texto.

Mostrando texto

Para mostrar texto, podemos usar un código como el siguiente:

#include &lt;Wire.h>
#include &lt;Adafruit_GFX.h>
#include &lt;Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);

void setup() {
  Serial.begin(115200);
 
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000); // Pause for 2 seconds
  
  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 10);
  display.println("¡Hola mundo!");
  display.display(); 
}

void loop() {
  
}

#include <Wire.h>

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128

#define SCREEN_HEIGHT 64

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

void setup() {

Serial.begin(115200);

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {

Serial.println(F("SSD1306 allocation failed"));

for(;;);

}

delay(2000); // Pause for 2 seconds

display.clearDisplay();

display.setTextSize(1);

display.setTextColor(WHITE);

display.setCursor(0, 10);

display.println("¡Hola mundo!");

display.display();

}

void loop() {

}

Lo primero que nos encontramos son los 3 «include», los cuales añadirán en nuestro código, algunas librerías que nos facilitarán mucho la vida. Es posible que estas no estén instaladas por defecto en el IDE de Arduino, para añadirlas hay que ir a Programa > Incluir Librería > Gestionar Liberías y buscamos las dos librerías Adafruit_SSD1306 y Adafruit_GFX.

A continuación definiremos el ancho y alto de la pantalla. Esto es muy importante, ya que si introducimos valores incorrectos, el contenido no se mostrará correctamente. Por lo tanto, es necesarios que sepáis la resolución de vuestra pantalla. Normalmente todos los vendedores lo indican cuando compramos la pantalla, algunas otras tienen esa información impresa por la parte de atrás. En nuestro caso, estamos usando una pantalla de 0.96 pulgadas, con una resolución de 128 pixeles de ancho por 64 píxeles de alto.

Por último, este bloque del código:

  display.clearDisplay();
  display.setTextSize(1);
  display.setTextColor(WHITE);
  display.setCursor(0, 10);
  display.println("¡Hola mundo!");
  display.display();

display.clearDisplay();

display.setTextSize(1);

display.setTextColor(WHITE);

display.setCursor(0, 10);

display.println("¡Hola mundo!");

display.display();

Limpiará la pantalla en primer lugar, borrando cualquier cosa que pueda haber anterior, ajustará el tamaño del texto a 1 (podemos elegir el valor que queramos), ajustará el color del texto a blanco (dependiendo del tipo de pantalla podremos elegir más colores o menos, por ejemplo si es una pantalla monocromo, solo podrá ser blanco o negro), ajustará la posición del cursor a la posición 0 en el eje X y 10 pixeles en el eje Y, y mostrará el texto que nosotros pongamos, en este caso «¡Hola mundo!».

Mostrando imágenes

Para mostrar imágenes en la pantalla OLED, debemos convertir la imagen a formato array de bytes. Es decir, un array que almacene el valor de cada byte que compondrá la imagen para poder representarla. Para convertir la imagen, existen varias herramientas en Internet, nosotros solemos usar esta URL https://diyusthad.com/image2cpp, por su sencillez y poder hacerlo online, sin necesidad de descargar ningún software adicional.

Paso a paso el proceso sería el siguiente:

Elegir la imagen deseada y subirla a https://diyusthad.com/image2cpp o la herramienta deseada.
Elegir las dimensiones de nuestra pantalla en el apartado Canvas size/s, en nuestro ejemplo 128×64 píxeles.

Figura 5. Convirtiendo imagen en array de bytes

Seleccionar las opciones que queramos para mostrar la imagen, como por ejemplo invertir colores, si queremos centrar la imagen, etc.
En el apartado 4 (Output), seleccionar Arduino code, seleccionar Generate code y copiar el resultado que aparece entre llaves {};

Cargar el código que os dejamos a continuación, modificando el texto COPIA TU CODIGO AQUI por el de nuestra imagen.

#include &lt;Wire.h>
#include &lt;Adafruit_GFX.h>
#include &lt;Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, -1);

static const unsigned char PROGMEM foto&#91;] = {
//COPIA TU CODIGO AQUI
};
 
void setup() {
  Serial.begin(115200);
 
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("SSD1306 allocation failed"));
    for(;;);
  }
  delay(2000); // Pause for 2 seconds
 
  // Clear the buffer.
  display.clearDisplay();
  
  // Draw bitmap on the screen
  display.drawBitmap(0, 0, foto, SCREEN_WIDTH, SCREEN_HEIGHT, 1);
  display.display();
}
 
void loop() {
  
}

#include <Wire.h>

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128

#define SCREEN_HEIGHT 64

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);

static const unsigned char PROGMEM foto[] = {

//COPIA TU CODIGO AQUI

};

void setup() {

Serial.begin(115200);

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {

Serial.println(F("SSD1306 allocation failed"));

for(;;);

}

delay(2000); // Pause for 2 seconds

// Clear the buffer.

display.clearDisplay();

// Draw bitmap on the screen

display.drawBitmap(0, 0, foto, SCREEN_WIDTH, SCREEN_HEIGHT, 1);

display.display();

}

void loop() {

}

Mostrando animaciones

Por último, es también posible dibujar animaciones. Para hacernos la vida más fácil, usaremos las funciones que se incluyen en las librerías de Adafruit: Adafruit_SSD1306 y Adafruit_GFX.

La propia librería incluye algunos ejemplos, para testear animaciones y todo tipo de elementos en nuestra pantalla OLED. A continuación os dejamos uno para pantallas de 128×64 usando el protocolo i2c que ya vimos al principio de la entrada:

/**************************************************************************
 This is an example for our Monochrome OLEDs based on SSD1306 drivers

 Pick one up today in the adafruit shop!
 ------> http://www.adafruit.com/category/63_98

 This example is for a 128x64 pixel display using I2C to communicate
 3 pins are required to interface (two I2C and one reset).

 Adafruit invests time and resources providing this open
 source code, please support Adafruit and open-source
 hardware by purchasing products from Adafruit!

 Written by Limor Fried/Ladyada for Adafruit Industries,
 with contributions from the open source community.
 BSD license, check license.txt for more information
 All text above, and the splash screen below must be
 included in any redistribution.
 **************************************************************************/

#include &lt;SPI.h>
#include &lt;Wire.h>
#include &lt;Adafruit_GFX.h>
#include &lt;Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)
#define OLED_RESET     4 // Reset pin # (or -1 if sharing Arduino reset pin)
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &amp;Wire, OLED_RESET);

#define NUMFLAKES     10 // Number of snowflakes in the animation example

#define LOGO_HEIGHT   16
#define LOGO_WIDTH    16
static const unsigned char PROGMEM logo_bmp&#91;] =
{ B00000000, B11000000,
  B00000001, B11000000,
  B00000001, B11000000,
  B00000011, B11100000,
  B11110011, B11100000,
  B11111110, B11111000,
  B01111110, B11111111,
  B00110011, B10011111,
  B00011111, B11111100,
  B00001101, B01110000,
  B00011011, B10100000,
  B00111111, B11100000,
  B00111111, B11110000,
  B01111100, B11110000,
  B01110000, B01110000,
  B00000000, B00110000 };

void setup() {
  Serial.begin(9600);

  // SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally
  if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3D)) { // Address 0x3D for 128x64
    Serial.println(F("SSD1306 allocation failed"));
    for(;;); // Don't proceed, loop forever
  }

  // Show initial display buffer contents on the screen --
  // the library initializes this with an Adafruit splash screen.
  display.display();
  delay(2000); // Pause for 2 seconds

  // Clear the buffer
  display.clearDisplay();

  // Draw a single pixel in white
  display.drawPixel(10, 10, SSD1306_WHITE);

  // Show the display buffer on the screen. You MUST call display() after
  // drawing commands to make them visible on screen!
  display.display();
  delay(2000);
  // display.display() is NOT necessary after every single drawing command,
  // unless that's what you want...rather, you can batch up a bunch of
  // drawing operations and then update the screen all at once by calling
  // display.display(). These examples demonstrate both approaches...

  testdrawline();      // Draw many lines

  testdrawrect();      // Draw rectangles (outlines)

  testfillrect();      // Draw rectangles (filled)

  testdrawcircle();    // Draw circles (outlines)

  testfillcircle();    // Draw circles (filled)

  testdrawroundrect(); // Draw rounded rectangles (outlines)

  testfillroundrect(); // Draw rounded rectangles (filled)

  testdrawtriangle();  // Draw triangles (outlines)

  testfilltriangle();  // Draw triangles (filled)

  testdrawchar();      // Draw characters of the default font

  testdrawstyles();    // Draw 'stylized' characters

  testscrolltext();    // Draw scrolling text

  testdrawbitmap();    // Draw a small bitmap image

  // Invert and restore display, pausing in-between
  display.invertDisplay(true);
  delay(1000);
  display.invertDisplay(false);
  delay(1000);

  testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps
}

void loop() {
}

void testdrawline() {
  int16_t i;

  display.clearDisplay(); // Clear display buffer

  for(i=0; i&lt;display.width(); i+=4) {
    display.drawLine(0, 0, i, display.height()-1, SSD1306_WHITE);
    display.display(); // Update screen with each newly-drawn line
    delay(1);
  }
  for(i=0; i&lt;display.height(); i+=4) {
    display.drawLine(0, 0, display.width()-1, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i&lt;display.width(); i+=4) {
    display.drawLine(0, display.height()-1, i, 0, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(0, display.height()-1, display.width()-1, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=display.width()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, i, 0, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=display.height()-1; i>=0; i-=4) {
    display.drawLine(display.width()-1, display.height()-1, 0, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  delay(250);

  display.clearDisplay();

  for(i=0; i&lt;display.height(); i+=4) {
    display.drawLine(display.width()-1, 0, 0, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }
  for(i=0; i&lt;display.width(); i+=4) {
    display.drawLine(display.width()-1, 0, i, display.height()-1, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000); // Pause for 2 seconds
}

void testdrawrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i&lt;display.height()/2; i+=2) {
    display.drawRect(i, i, display.width()-2*i, display.height()-2*i, SSD1306_WHITE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testfillrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i&lt;display.height()/2; i+=3) {
    // The INVERSE color is used so rectangles alternate white/black
    display.fillRect(i, i, display.width()-i*2, display.height()-i*2, SSD1306_INVERSE);
    display.display(); // Update screen with each newly-drawn rectangle
    delay(1);
  }

  delay(2000);
}

void testdrawcircle(void) {
  display.clearDisplay();

  for(int16_t i=0; i&lt;max(display.width(),display.height())/2; i+=2) {
    display.drawCircle(display.width()/2, display.height()/2, i, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillcircle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {
    // The INVERSE color is used so circles alternate white/black
    display.fillCircle(display.width() / 2, display.height() / 2, i, SSD1306_INVERSE);
    display.display(); // Update screen with each newly-drawn circle
    delay(1);
  }

  delay(2000);
}

void testdrawroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i&lt;display.height()/2-2; i+=2) {
    display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfillroundrect(void) {
  display.clearDisplay();

  for(int16_t i=0; i&lt;display.height()/2-2; i+=2) {
    // The INVERSE color is used so round-rects alternate white/black
    display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,
      display.height()/4, SSD1306_INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawtriangle(void) {
  display.clearDisplay();

  for(int16_t i=0; i&lt;max(display.width(),display.height())/2; i+=5) {
    display.drawTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, SSD1306_WHITE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testfilltriangle(void) {
  display.clearDisplay();

  for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {
    // The INVERSE color is used so triangles alternate white/black
    display.fillTriangle(
      display.width()/2  , display.height()/2-i,
      display.width()/2-i, display.height()/2+i,
      display.width()/2+i, display.height()/2+i, SSD1306_INVERSE);
    display.display();
    delay(1);
  }

  delay(2000);
}

void testdrawchar(void) {
  display.clearDisplay();

  display.setTextSize(1);      // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE); // Draw white text
  display.setCursor(0, 0);     // Start at top-left corner
  display.cp437(true);         // Use full 256 char 'Code Page 437' font

  // Not all the characters will fit on the display. This is normal.
  // Library will draw what it can and the rest will be clipped.
  for(int16_t i=0; i&lt;256; i++) {
    if(i == '\n') display.write(' ');
    else          display.write(i);
  }

  display.display();
  delay(2000);
}

void testdrawstyles(void) {
  display.clearDisplay();

  display.setTextSize(1);             // Normal 1:1 pixel scale
  display.setTextColor(SSD1306_WHITE);        // Draw white text
  display.setCursor(0,0);             // Start at top-left corner
  display.println(F("Hello, world!"));

  display.setTextColor(SSD1306_BLACK, SSD1306_WHITE); // Draw 'inverse' text
  display.println(3.141592);

  display.setTextSize(2);             // Draw 2X-scale text
  display.setTextColor(SSD1306_WHITE);
  display.print(F("0x")); display.println(0xDEADBEEF, HEX);

  display.display();
  delay(2000);
}

void testscrolltext(void) {
  display.clearDisplay();

  display.setTextSize(2); // Draw 2X-scale text
  display.setTextColor(SSD1306_WHITE);
  display.setCursor(10, 0);
  display.println(F("scroll"));
  display.display();      // Show initial text
  delay(100);

  // Scroll in various directions, pausing in-between:
  display.startscrollright(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrollleft(0x00, 0x0F);
  delay(2000);
  display.stopscroll();
  delay(1000);
  display.startscrolldiagright(0x00, 0x07);
  delay(2000);
  display.startscrolldiagleft(0x00, 0x07);
  delay(2000);
  display.stopscroll();
  delay(1000);
}

void testdrawbitmap(void) {
  display.clearDisplay();

  display.drawBitmap(
    (display.width()  - LOGO_WIDTH ) / 2,
    (display.height() - LOGO_HEIGHT) / 2,
    logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);
  display.display();
  delay(1000);
}

#define XPOS   0 // Indexes into the 'icons' array in function below
#define YPOS   1
#define DELTAY 2

void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {
  int8_t f, icons&#91;NUMFLAKES]&#91;3];

  // Initialize 'snowflake' positions
  for(f=0; f&lt; NUMFLAKES; f++) {
    icons&#91;f]&#91;XPOS]   = random(1 - LOGO_WIDTH, display.width());
    icons&#91;f]&#91;YPOS]   = -LOGO_HEIGHT;
    icons&#91;f]&#91;DELTAY] = random(1, 6);
    Serial.print(F("x: "));
    Serial.print(icons&#91;f]&#91;XPOS], DEC);
    Serial.print(F(" y: "));
    Serial.print(icons&#91;f]&#91;YPOS], DEC);
    Serial.print(F(" dy: "));
    Serial.println(icons&#91;f]&#91;DELTAY], DEC);
  }

  for(;;) { // Loop forever...
    display.clearDisplay(); // Clear the display buffer

    // Draw each snowflake:
    for(f=0; f&lt; NUMFLAKES; f++) {
      display.drawBitmap(icons&#91;f]&#91;XPOS], icons&#91;f]&#91;YPOS], bitmap, w, h, SSD1306_WHITE);
    }

    display.display(); // Show the display buffer on the screen
    delay(200);        // Pause for 1/10 second

    // Then update coordinates of each flake...
    for(f=0; f&lt; NUMFLAKES; f++) {
      icons&#91;f]&#91;YPOS] += icons&#91;f]&#91;DELTAY];
      // If snowflake is off the bottom of the screen...
      if (icons&#91;f]&#91;YPOS] >= display.height()) {
        // Reinitialize to a random position, just off the top
        icons&#91;f]&#91;XPOS]   = random(1 - LOGO_WIDTH, display.width());
        icons&#91;f]&#91;YPOS]   = -LOGO_HEIGHT;
        icons&#91;f]&#91;DELTAY] = random(1, 6);
      }
    }
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

/**************************************************************************

This is an example for our Monochrome OLEDs based on SSD1306 drivers

Pick one up today in the adafruit shop!

------> http://www.adafruit.com/category/63_98

This example is for a 128x64 pixel display using I2C to communicate

3 pins are required to interface (two I2C and one reset).

Adafruit invests time and resources providing this open

source code, please support Adafruit and open-source

hardware by purchasing products from Adafruit!

Written by Limor Fried/Ladyada for Adafruit Industries,

with contributions from the open source community.

BSD license, check license.txt for more information

All text above, and the splash screen below must be

included in any redistribution.

**************************************************************************/

#include <SPI.h>

#include <Wire.h>

#include <Adafruit_GFX.h>

#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128 // OLED display width, in pixels

#define SCREEN_HEIGHT 64 // OLED display height, in pixels

// Declaration for an SSD1306 display connected to I2C (SDA, SCL pins)

#define OLED_RESET 4 // Reset pin # (or -1 if sharing Arduino reset pin)

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

#define NUMFLAKES 10 // Number of snowflakes in the animation example

#define LOGO_HEIGHT 16

#define LOGO_WIDTH 16

static const unsigned char PROGMEM logo_bmp[] =

{ B00000000, B11000000,

B00000001, B11000000,

B00000011, B11100000,

B11110011, B11100000,

B11111110, B11111000,

B01111110, B11111111,

B00110011, B10011111,

B00011111, B11111100,

B00001101, B01110000,

B00011011, B10100000,

B00111111, B11100000,

B00111111, B11110000,

B01111100, B11110000,

B01110000, B01110000,

B00000000, B00110000 };

void setup() {

Serial.begin(9600);

// SSD1306_SWITCHCAPVCC = generate display voltage from 3.3V internally

if(!display.begin(SSD1306_SWITCHCAPVCC, 0x3D)) { // Address 0x3D for 128x64

Serial.println(F("SSD1306 allocation failed"));

for(;;); // Don't proceed, loop forever

}

// Show initial display buffer contents on the screen --

// the library initializes this with an Adafruit splash screen.

display.display();

delay(2000); // Pause for 2 seconds

// Clear the buffer

display.clearDisplay();

// Draw a single pixel in white

display.drawPixel(10, 10, SSD1306_WHITE);

// Show the display buffer on the screen. You MUST call display() after

// drawing commands to make them visible on screen!

display.display();

delay(2000);

// display.display() is NOT necessary after every single drawing command,

// unless that's what you want...rather, you can batch up a bunch of

// drawing operations and then update the screen all at once by calling

// display.display(). These examples demonstrate both approaches...

testdrawline(); // Draw many lines

testdrawrect(); // Draw rectangles (outlines)

testfillrect(); // Draw rectangles (filled)

testdrawcircle(); // Draw circles (outlines)

testfillcircle(); // Draw circles (filled)

testdrawroundrect(); // Draw rounded rectangles (outlines)

testfillroundrect(); // Draw rounded rectangles (filled)

testdrawtriangle(); // Draw triangles (outlines)

testfilltriangle(); // Draw triangles (filled)

testdrawchar(); // Draw characters of the default font

testdrawstyles(); // Draw 'stylized' characters

testscrolltext(); // Draw scrolling text

testdrawbitmap(); // Draw a small bitmap image

// Invert and restore display, pausing in-between

display.invertDisplay(true);

delay(1000);

display.invertDisplay(false);

delay(1000);

testanimate(logo_bmp, LOGO_WIDTH, LOGO_HEIGHT); // Animate bitmaps

}

void loop() {

}

void testdrawline() {

int16_t i;

display.clearDisplay(); // Clear display buffer

for(i=0; i<display.width(); i+=4) {

display.drawLine(0, 0, i, display.height()-1, SSD1306_WHITE);

display.display(); // Update screen with each newly-drawn line

delay(1);

}

for(i=0; i<display.height(); i+=4) {

display.drawLine(0, 0, display.width()-1, i, SSD1306_WHITE);

display.display();

delay(1);

}

delay(250);

display.clearDisplay();

for(i=0; i<display.width(); i+=4) {

display.drawLine(0, display.height()-1, i, 0, SSD1306_WHITE);

display.display();

delay(1);

}

for(i=display.height()-1; i>=0; i-=4) {

display.drawLine(0, display.height()-1, display.width()-1, i, SSD1306_WHITE);

display.display();

delay(1);

}

delay(250);

display.clearDisplay();

for(i=display.width()-1; i>=0; i-=4) {

display.drawLine(display.width()-1, display.height()-1, i, 0, SSD1306_WHITE);

display.display();

delay(1);

}

for(i=display.height()-1; i>=0; i-=4) {

display.drawLine(display.width()-1, display.height()-1, 0, i, SSD1306_WHITE);

display.display();

delay(1);

}

delay(250);

display.clearDisplay();

for(i=0; i<display.height(); i+=4) {

display.drawLine(display.width()-1, 0, 0, i, SSD1306_WHITE);

display.display();

delay(1);

}

for(i=0; i<display.width(); i+=4) {

display.drawLine(display.width()-1, 0, i, display.height()-1, SSD1306_WHITE);

display.display();

delay(1);

}

delay(2000); // Pause for 2 seconds

}

void testdrawrect(void) {

display.clearDisplay();

for(int16_t i=0; i<display.height()/2; i+=2) {

display.drawRect(i, i, display.width()-2*i, display.height()-2*i, SSD1306_WHITE);

display.display(); // Update screen with each newly-drawn rectangle

delay(1);

}

delay(2000);

}

void testfillrect(void) {

display.clearDisplay();

for(int16_t i=0; i<display.height()/2; i+=3) {

// The INVERSE color is used so rectangles alternate white/black

display.fillRect(i, i, display.width()-i*2, display.height()-i*2, SSD1306_INVERSE);

display.display(); // Update screen with each newly-drawn rectangle

delay(1);

}

delay(2000);

}

void testdrawcircle(void) {

display.clearDisplay();

for(int16_t i=0; i<max(display.width(),display.height())/2; i+=2) {

display.drawCircle(display.width()/2, display.height()/2, i, SSD1306_WHITE);

display.display();

delay(1);

}

delay(2000);

}

void testfillcircle(void) {

display.clearDisplay();

for(int16_t i=max(display.width(),display.height())/2; i>0; i-=3) {

// The INVERSE color is used so circles alternate white/black

display.fillCircle(display.width() / 2, display.height() / 2, i, SSD1306_INVERSE);

display.display(); // Update screen with each newly-drawn circle

delay(1);

}

delay(2000);

}

void testdrawroundrect(void) {

display.clearDisplay();

for(int16_t i=0; i<display.height()/2-2; i+=2) {

display.drawRoundRect(i, i, display.width()-2*i, display.height()-2*i,

display.height()/4, SSD1306_WHITE);

display.display();

delay(1);

}

delay(2000);

}

void testfillroundrect(void) {

display.clearDisplay();

for(int16_t i=0; i<display.height()/2-2; i+=2) {

// The INVERSE color is used so round-rects alternate white/black

display.fillRoundRect(i, i, display.width()-2*i, display.height()-2*i,

display.height()/4, SSD1306_INVERSE);

display.display();

delay(1);

}

delay(2000);

}

void testdrawtriangle(void) {

display.clearDisplay();

for(int16_t i=0; i<max(display.width(),display.height())/2; i+=5) {

display.drawTriangle(

display.width()/2 , display.height()/2-i,

display.width()/2-i, display.height()/2+i,

display.width()/2+i, display.height()/2+i, SSD1306_WHITE);

display.display();

delay(1);

}

delay(2000);

}

void testfilltriangle(void) {

display.clearDisplay();

for(int16_t i=max(display.width(),display.height())/2; i>0; i-=5) {

// The INVERSE color is used so triangles alternate white/black

display.fillTriangle(

display.width()/2 , display.height()/2-i,

display.width()/2-i, display.height()/2+i,

display.width()/2+i, display.height()/2+i, SSD1306_INVERSE);

display.display();

delay(1);

}

delay(2000);

}

void testdrawchar(void) {

display.clearDisplay();

display.setTextSize(1); // Normal 1:1 pixel scale

display.setTextColor(SSD1306_WHITE); // Draw white text

display.setCursor(0, 0); // Start at top-left corner

display.cp437(true); // Use full 256 char 'Code Page 437' font

// Not all the characters will fit on the display. This is normal.

// Library will draw what it can and the rest will be clipped.

for(int16_t i=0; i<256; i++) {

if(i == '\n') display.write(' ');

else display.write(i);

}

display.display();

delay(2000);

}

void testdrawstyles(void) {

display.clearDisplay();

display.setTextSize(1); // Normal 1:1 pixel scale

display.setTextColor(SSD1306_WHITE); // Draw white text

display.setCursor(0,0); // Start at top-left corner

display.println(F("Hello, world!"));

display.setTextColor(SSD1306_BLACK, SSD1306_WHITE); // Draw 'inverse' text

display.println(3.141592);

display.setTextSize(2); // Draw 2X-scale text

display.setTextColor(SSD1306_WHITE);

display.print(F("0x")); display.println(0xDEADBEEF, HEX);

display.display();

delay(2000);

}

void testscrolltext(void) {

display.clearDisplay();

display.setTextSize(2); // Draw 2X-scale text

display.setTextColor(SSD1306_WHITE);

display.setCursor(10, 0);

display.println(F("scroll"));

display.display(); // Show initial text

delay(100);

// Scroll in various directions, pausing in-between:

display.startscrollright(0x00, 0x0F);

delay(2000);

display.stopscroll();

delay(1000);

display.startscrollleft(0x00, 0x0F);

delay(2000);

display.stopscroll();

delay(1000);

display.startscrolldiagright(0x00, 0x07);

delay(2000);

display.startscrolldiagleft(0x00, 0x07);

delay(2000);

display.stopscroll();

delay(1000);

}

void testdrawbitmap(void) {

display.clearDisplay();

display.drawBitmap(

(display.width() - LOGO_WIDTH ) / 2,

(display.height() - LOGO_HEIGHT) / 2,

logo_bmp, LOGO_WIDTH, LOGO_HEIGHT, 1);

display.display();

delay(1000);

}

#define XPOS 0 // Indexes into the 'icons' array in function below

#define YPOS 1

#define DELTAY 2

void testanimate(const uint8_t *bitmap, uint8_t w, uint8_t h) {

int8_t f, icons[NUMFLAKES][3];

// Initialize 'snowflake' positions

for(f=0; f< NUMFLAKES; f++) {

icons[f][XPOS] = random(1 - LOGO_WIDTH, display.width());

icons[f][YPOS] = -LOGO_HEIGHT;

icons[f][DELTAY] = random(1, 6);

Serial.print(F("x: "));

Serial.print(icons[f][XPOS], DEC);

Serial.print(F(" y: "));

Serial.print(icons[f][YPOS], DEC);

Serial.print(F(" dy: "));

Serial.println(icons[f][DELTAY], DEC);

}

for(;;) { // Loop forever...

display.clearDisplay(); // Clear the display buffer

// Draw each snowflake:

for(f=0; f< NUMFLAKES; f++) {

display.drawBitmap(icons[f][XPOS], icons[f][YPOS], bitmap, w, h, SSD1306_WHITE);

}

display.display(); // Show the display buffer on the screen

delay(200); // Pause for 1/10 second

// Then update coordinates of each flake...

for(f=0; f< NUMFLAKES; f++) {

icons[f][YPOS] += icons[f][DELTAY];

// If snowflake is off the bottom of the screen...

if (icons[f][YPOS] >= display.height()) {

// Reinitialize to a random position, just off the top

icons[f][XPOS] = random(1 - LOGO_WIDTH, display.width());

icons[f][YPOS] = -LOGO_HEIGHT;

icons[f][DELTAY] = random(1, 6);

}

Al cargar ese programa en vuestro Arduino, veréis una serie de animaciones de todo tipo. Si nos fijamos en el código en detalle, vemos que existen varias funciones ya programadas para pintar diferentes formar geométricas como las siguientes:

  testdrawline();      // Draw many lines

  testdrawrect();      // Draw rectangles (outlines)

  testfillrect();      // Draw rectangles (filled)

  testdrawcircle();    // Draw circles (outlines)

  testfillcircle();    // Draw circles (filled)

  testdrawroundrect(); // Draw rounded rectangles (outlines)

  testfillroundrect(); // Draw rounded rectangles (filled)

  testdrawtriangle();  // Draw triangles (outlines)

  testfilltriangle();  // Draw triangles (filled)

  testdrawchar();      // Draw characters of the default font

  testdrawstyles();    // Draw 'stylized' characters

  testscrolltext();    // Draw scrolling text

  testdrawbitmap();    // Draw a small bitmap image

testdrawline(); // Draw many lines

testdrawrect(); // Draw rectangles (outlines)

testfillrect(); // Draw rectangles (filled)

testdrawcircle(); // Draw circles (outlines)

testfillcircle(); // Draw circles (filled)

testdrawroundrect(); // Draw rounded rectangles (outlines)

testfillroundrect(); // Draw rounded rectangles (filled)

testdrawtriangle(); // Draw triangles (outlines)

testfilltriangle(); // Draw triangles (filled)

testdrawchar(); // Draw characters of the default font

testdrawstyles(); // Draw 'stylized' characters

testscrolltext(); // Draw scrolling text

testdrawbitmap(); // Draw a small bitmap image

Como podéis ver, con estas funciones podremos dibujar diferentes elementos como rectángulos, círculos, triángulos, incluso texto en movimiento. Lo interesante es buscar entre las diferentes funciones que nos ofrece la librería y reutilizarlas para crear nuestras propias animaciones.

Y con esto finalizamos la entrada de hoy, esperamos que os haya gustado. Como siempre, si tenéis cualquier duda o sugerencia, no dudéis en dejarnos un comentario.

Cómo usar una pantalla OLED con Arduino

Circuito

Mostrando texto

Mostrando imágenes

Mostrando animaciones

Deja una respuesta Cancelar la respuesta

Top smartphones pequeños 2021

Sensor PIR Arduino

Cómo usar la función «burbujas» de Android 11 en dispositivos Samsung

Crea tus propias velas flotantes al estilo Harry Potter

Entradas recientes

Archivos

Categorías