The SSD1306 display is an OLED that is controlled by the SSD1306 micro-chip driver, which acts as a bridge between the display matrix and the microcontroller. Due to the natural light of the organic LEDs in the matrix, SSD1306 displays are bright and have a wide viewing angle. These tiny displays are similar to those monochrome used at the old cell phones. Despite the size, these displays are very functional and capable of displaying complex images. The accessibility of this model makes it the most popular in the Arduino world and hobby electronics.
The displays breakout boards belong to the SSD1306 family can have the following parameters:
To work with the SSD1306 family displays XOD provides the
The library provides the quickstart node
ssd1306-128x64-i2c for the SSD1306 I²C display with the 128x64 pixels resolution.
This node contains everything you need to start working with the display. You only have to connect your display to the microcontroller via an I²C bus and put the I²C address value of the byte type to the
ADDR pin field.
GFX input pin of the
graphics type specifies the graphics to render and display on the device screen. The
GFX awaits a branch of the tree of graphical elements created using the graphics library. The boolean value at the
ACT pin is responsible for the display screen update due to change of the incoming graphics at the
Here is a simple example of using the quick-start node. Connect the display to a microcontroller according to the wiring scheme.
Let’s display a white filled circle in the center of the screen.
Create an empty patch and put the
ssd1306-128x64-i2c quickstart node onto it. The display from this example has the
3C hexadecimal I²C address so we put the
3Ch value to the
Using the XOD graphics library, create a new
canvas with the size of a display screen. The width
W of the canvas is
128 and the height
64. The display is monochrome, and you can leave the default colors of the scene untouched. The background color
BG is black (
#000000) and the foreground color
FG is white (
To add the filled circle to the scene, place the
circle-solid node onto the patch. To make this node be a part of the graphic tree, link its
GFX pin with the
GFX pin of the
canvas. Set the circle coordinates for the center of the screen,
Y. The radius
R can be random, for example,
The scene is ready. Connect the
GFX output pin of the
circle-solid node to the
GFX pin of the quickstart node. Take a look at what the patch should be.
Upload this patch and see what is displayed on the screen of the device.
You can change the position of the circle on the canvas using tweaks. For example, add two
tweak-number nodes for the
Y circle coordinates. Flash the patch in debug mode and manage the coordinates of the circle center.
The parameters of graphic nodes can be changed using other nodes. For example, let’s replace the filled circle with a text field and control its size on the screen with a potentiometer.
Remove tweak nodes from the patch. Replace the
circle-solid node with the
text node from the
xod/graphics library. Next, set the text string, let it be
"Hello world!". Enter it at the
S pin of the
text node. Add the
pot nodes and
multiply node to control the scale of the text. The potentiometer is connected to the
A0 Arduino port. Link the
multiply output with the
By multiplying the output value of the
pot node by
10, you can increase
SCL size ten times. Upload the patch and manage the changes.
If the quickstart nodes doesn’t suit your task try to operate developer nodes from the
xod-dev/ssd1306-display library. Initializie your display using the
ssd1306-128x64-i2c-device device node from the library. It is only necessary to specify the I²C address of the device.
A graphic tree branch to render links to the input
GFX pin. A pulse signal at the
DO pin is a trigger to process the graphic scene and display it. If the scene is rendered, a pulse comes to the
DONE output pin.
render nodes simultaneously. Processing various branches of the graphic tree at a different time, you can show dynamic graphic scenes at the screen.
Here is the example of a three
render nodes use. The tree of graphic elements consists of a
canvas and two
point on it. The device node and three nodes
render are linked together in a daisy chain. All
render nodes have different triggering algorithms at their
render is on
boot; it fills the display screen with a specified
canvas only once — after powering the device. The second
render is responsible for
point 1 on the canvas. Its trigger is set to
loop. It means that any changes in the
point 1 position are immediately shown on the screen. The third
render is responsible for displaying the
point 2 and its trigger is linked to the
button. Here you can also change the
point 2 position, but the changes are displayed only after the button click.