Free Hand Drawing and Image Rendering on OLED SSD1306 and SH1106

by sergei_iliev in Circuits > Microcontrollers

725 Views, 4 Favorites, 0 Comments

Free Hand Drawing and Image Rendering on OLED SSD1306 and SH1106

3.png
9.png

The main goal of the project is to show how to draw text and images on OLED display SDD1306/SH1106 using Web Serial API and Acorn micro-kernel operating system.

Web OLED browser editor app was develop to run online (no need to install any programm localy on desktop) and communicate pixel changes over web serial api directly to an AVR processor running acorn micro-kernel. The processor sends changes over I2C protocol to OLED display and pixel changes are displayed instantly on screen.

Components

1.png
  1. Arduino NANO board
  2. Microchip/AVR Studio program to build and flush the project source code
  3. OLED display SDD1306 or SH1106
  4. TTL Serial Port Converter Module DB9 Connector For Arduino
  5. Web Browser to access OLED Editor App
  6. DB9 RS232 cable to connect Arduino serial port to PC serial port

Connect SSD1306 or SH1106 OLED Display to Arduino NANO

2.png
  1. Connect wires SDA(Yellow wire), and SCL(Green wire) from I2C OLED Display to A4(PC4) and A5(PC5) Arduino ports
  2. Connect wires TxD(Gray wire) and RxD(Brown wire) from DB9 TTL Serial Adaptor to D0(PD1) and D1(PD1) Arduino ports
  3. Connect Serial Adaptor cable to PC Com Port


Build Project From Source Code

Firmware project is based on acorn micro kernel operating system driving 2 separate tasks

  1. task controlling RS232 communication byte stream with PC computer
  2. task dealing with OLED I2C protocol communication



  1. Download source code from github repo - oled_ssd1306_sh1106
  2. Find and open project file oled_ssd1306_sh1106.asmproj in Microchip AVR Studio
  3. Modify source code in regard to OLED display being used -

#define SSD1306

OR

#define SH1106

Comment out the display that is not used and leave definition for the one being used

4.Build project to generate HEX file

5.Flash Hex file in NANO using ISP port (There are tones of articles on how to do this) I am using AVRISP programmer

Web Browser Editor App

5.png

Navigate to OLED Editor App and click Connect button to connect to Arduino NANO. Default baud rate is 57600 , Data Size: 8-bit ; Parity: None ; Stop Bits: 1 ; Flow Control: Off.

Description of header buttons

  1. Escape or Cancel - resets drawing operation
  2. Draw - free style bixel by pixel drawing
  3. Eraser - remove pixes from canvas
  4. Clear Canvas
  5. Load Image - load and display on canvas png image. Image must be 128x64 to fit the screen and will be converted to 1 bit per pixel image.
  6. Load Icon - load from predefined embedded in app icons

Description of Bottom buttons

  1. Connect - open Serial RS232 communication channel
  2. Disconnect
  3. Update OLED - send all canvas pixel or image changes to OLED display screen.
  4. Clear OLED

Display Free Hand Drawing

6.png
5.png

Display Image

7.png
8.png

Display Icon

10.png
11.png