Very basic drawing program for OLED or similar

spiderdab

Hi I wrote this very basic program to let me draw some picture or icon to display on a little OLED. Of course feel free to use it or modify it to your needs.

before running it, change the size of your output to your need (x dimension must be a multiple of 8). then use ARROWS and SPACEBAR to draw, or your mouse if you feel more confortable, 'e' to erase all, and finally 'p' to print binary result to the terminal. After that you can copy/paste the result in your arduino or whatever you use to drive your LCD or OLED.

Ciao, Davide.

int icon_x_dim = 128;  // CHANGE HERE YOUR DRAWING X DIMENSION IN PIXEL:
int icon_y_dim = 64;  // CHANGE HERE YOUR DRAWING Y DIMENSION IN PIXEL:

int rect_x_dim = icon_x_dim*8;
int rect_y_dim = icon_y_dim*8;
int sizeX = rect_x_dim+40;
int pixelColor[][] = new int[icon_x_dim][icon_y_dim];
String output = "";
int posX, posY;

void setup() {
  size(1064, 552);
  posX = 20;
  posY = 20;
}

void draw() {
  background(150);  
  stroke(60);
  for (int x = 0; x < icon_x_dim; x++) {
    for (int y = 0; y < icon_y_dim; y++) {
      fill(pixelColor[x][y] * 255);
      rect(20+x*8, 20+y*8, 8, 8);
    }
  }
  stroke(250,250,0);
  noFill();
  rect(posX, posY, 8, 8);

  fill(100, 100, 100);
  text("Use Mouse or ARROWS and SPACEBAR to draw, 'e' to erase the drawing and 'p' to print the binary result in your terminal", 81, 547);
  fill(0);
  text("Use Mouse or ARROWS and SPACEBAR to draw, 'e' to erase the drawing and 'p' to print the binary result in your terminal", 80, 546);
}

void mouseClicked() {
  int xClick = int((mouseX - 20)/8);
  int yClick = int((mouseY - 20)/8);
  posX = xClick*8+20;
  posY = yClick*8+20;
  if (pixelColor[xClick][yClick] == 0) pixelColor[xClick][yClick] = 1;
  else pixelColor[xClick][yClick] = 0;
}

void keyPressed() {
  if (keyCode == LEFT) {
    posX-=8;
    if (posX < 20) posX = 20;
  }
  if (keyCode == RIGHT) {
    posX+=8;
    if (posX > rect_x_dim-8+20) posX = rect_x_dim-8+20;
  }
  if (keyCode == UP) {
    posY-=8;
    if (posY < 20) posY = 20;
  }
  if (keyCode == DOWN) {
    posY+=8;
    if (posY > rect_y_dim-8+20) posY = rect_y_dim-8+20;
  }
  if (key == ' ') {
    if (pixelColor[(posX-20)/8][(posY-20)/8] == 0) pixelColor[(posX-20)/8][(posY-20)/8] = 1;
  else pixelColor[(posX-20)/8][(posY-20)/8] = 0;
  }
  if (key == 'e') {
    for (int y = 0; y < icon_y_dim; y++) {
      for (int x = 0; x < icon_x_dim; x++) {
        pixelColor[x][y] = 0;
      }
    }
  }
  if (key == 'p') {
    for (int y = 0; y < icon_y_dim; y++) {
      for (int x = 0; x < icon_x_dim; x++) {
        if (x > 0 && x % 8 == 0) output+=", ";
        if (x % 8 == 0) output+="B";
        output+=(char(pixelColor[x][y]+48));        
      }
      if (y < icon_y_dim -1) output+=",\n";
    }
    println(output);
  }
}

kfrajer

I suggest you edit your post and add a small comment explaining what OLED is. You should also add a function to save the data in text format, In case somebody wants to reuse it at a later time.

Kf

jeremydouglass

@spiderdab -- Thank you for sharing your work, Davide!

If you don't mind my asking, what specific hardware (what Arduino, what OLED) did you test this sketch with? What version of Processing did you run it on?

Lord_of_the_Galaxy

And also, could you please provide the Arduino code as well? That will make it even easier to understand.

spiderdab

Hi, many OLED and graphic displays use this kind of drawing style. I'm using a spi 0,96 inches OLED, connected to an arduino. You can find some windows software to draw your stuff and get translated to bytes to copy/paste in your code, but for linux, i couldn't find any. This code is just what I needed, if you want to add functionality, feel free to use and modify it of course, if it can be useful to you. I don't think I'm going to add functions to this code soon..

Thanks for your comments. Davide.