Blink Test With Colored Image, With Arduino Nano

With this post, I hope to show how Arduino Nano can be used to drive downloading color images from the Internet, and displaying the downloaded image with DumbDisplay.

As a matter of fact, two images will be downloaded and displayed one then the other, like blink test with images, instead of LED.

Step 1: Setup the IDE

In order to be able to compile and run the sketch shown above, you will first need to install the DumbDisplay Arduino library.

Open your Arduino IDE; go to the menu item Tools | Manage Libraries, and type "dumbdisplay" in the search box there.

Then click install the item shown.

Step 2: The Sketch

Although I listed Arduino Nano as the required component above, I believe the sketch will work for other types of boards supported by Arduino IDE.

The sketch is simple, and is extended from the example otgwebimage that comes with the library you just installed: Other than the graphical LCD layer for displaying the downloaded images, a text-based LCD layer is used for displaying the status of the image shown.

#include "dumbdisplay.h"
DumbDisplay dumbdisplay(new DDInputOutput(115200));
LcdDDLayer *lcd;
GraphicalDDLayer *graphical;
SimpleToolDDTunnel *tunnel_unlocked;
SimpleToolDDTunnel *tunnel_locked;
void setup() {
  // create a LCD layer for display some info about the picture shown
  lcd = dumbdisplay.createLcdLayer(16, 1);
  lcd->bgPixelColor("darkgray");
  lcd->pixelColor("lightblue");
  lcd->border(2, "blue");
  // create a graphical layer for drawing the web images to
  graphical = dumbdisplay.createGraphicalLayer(200, 300);
  graphical->padding(0);
  graphical->margin(2);
  graphical->border(2, "darkgreen");
  // auto "pin" the two layers vertically, one above the other
  dumbdisplay.configAutoPin(DD_AP_VERT);
  // create tunnels for downloading web images ... and save to your phone
  tunnel_unlocked = dumbdisplay.createImageDownloadTunnel("https://raw.githubusercontent.com/trevorwslee/Arduino-DumbDisplay/master/screenshots/lock-unlocked.png", "lock-unlocked.png");
  tunnel_locked = dumbdisplay.createImageDownloadTunnel("https://raw.githubusercontent.com/trevorwslee/Arduino-DumbDisplay/master/screenshots/lock-locked.png", "lock-locked.png");
}
bool locked = false;
void loop() {
  // get result whether web image downloaded .. 0: downloading; 1: downloaded ok; -1: failed to download 
  int result_unlocked = tunnel_unlocked->checkResult();
  int result_locked = tunnel_locked->checkResult();
  int result;
  const char* image_file_name;
  if (locked) {
    image_file_name = "lock-locked.png";
    result = result_locked;
  } else {
    image_file_name = "lock-unlocked.png";
    result = result_unlocked;
  }
  if (result == 1) {
    graphical->drawImageFile(image_file_name);
    lcd->writeCenteredLine(locked ? "Lock locked" : "Lock unloccked");
  } else if (result == 0) {
    // downloading
    graphical->clear();
    graphical->setCursor(0, 10);
    graphical->println("... ...");
    graphical->println(image_file_name);
    graphical->println("... ...");
    lcd->writeCenteredLine("...");
  } else if (result == -1) {
    graphical->clear();
    graphical->setCursor(0, 10);
    graphical->println("XXX failed to download XXX");
    lcd->writeCenteredLine("failed");
  }
  locked = !locked;
  delay(1000);
}

The logic of the sketch is basically:

Create the grapnical and text-based LCD layers.

   lcd = dumbdisplay.createLcdLayer(16, 1);
   graphical = dumbdisplay.createGraphicalLayer(200, 300);

Auto "pin" the two layers vertically, one above the other.

   dumbdisplay.configAutoPin(DD_AP_VERT);

Create two "tunnels" for download images from the Internet, to your phone.

   tunnel_unlocked = dumbdisplay.createImageDownloadTunnel("...", "lock-unlocked.png");
   tunnel_locked = ...

Since the images will be downloaded asynchronously, it is necessary to check the load result before displaying the downloaded image to the graphical LCD layer.

   int result_unlocked = tunnel_unlocked->checkResult();
   int result_locked = tunnel_locked->checkResult();

When the download is successful, display the image, and show the status.

   graphical->drawImageFile(image_file_name);
   lcd->writeCenteredLine(locked ? "Lock locked" : "Lock unloccked");

That is it!

Step 3: Upload the Sketch and Run It

Other than making the needed connections to your Arduino Nano, you will need to prepare two addition things:

You will need to be able to attach your Arduino Nano to your Android phone. To do this, you will need an OTG adaptor, which allows you to plug your Arduino Nano to your phone via the usual USB cable.
You will certainly need to install the DumbDisplay Android app.

After uploading the sketch, re-plug the USB cable to your phone via an OTG adapter. Then, open the DumbDisplay Android app on your phone, and make connection.