Hello !
Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
en:iot-open:practical:hardware:sut:esp32:emb7_1 [2024/04/05 14:44] – [Steps] pczekalskien:iot-open:practical:hardware:sut:esp32:emb7_1 [2024/06/29 18:54] (current) – [Prerequisites] pczekalski
Line 1: Line 1:
 +====== EMB7: Using OLED display =====
 +This scenario presents how to use the OLED display. Our OLED display is an RGB (16bit colour, 64k colours) 1.5in, 128x128 pixels. The OLED chip is SSD1351, and it is controlled over the SPI interface using the following pin configuration:
 +  * SPI_MOSI=15, 
 +  * SPI_CLK=18, 
 +  * SPI_DC=13, 
 +  * SPI_CS=11, 
 +  * SPI_RST=12.
  
 +===== Prerequisites =====
 +As usual, there is no need to program SPI directly; instead, it should be handled by a dedicated library. In addition to the protocol communication library and display library, we will use a graphic abstraction layer for drawing primitives such as lines, images, text, circles, and so on:
 +<code ini>
 +lib_deps = adafruit/Adafruit SSD1351 library@^1.2.8
 +</code>
 +Note that the graphics abstraction library (Adafruit GFX) is loaded automatically because of the 
 +<code ini>lib_ldf_mode = deep+</code> declaration in the ''platformio.ini''. You can also add it explicitly, as below:
 +<code ini>
 +lib_deps = 
 +    adafruit/Adafruit SSD1351 library@^1.3.2
 +    adafruit/Adafruit GFX Library@^1.11.9
 +</code>
 +
 +
 +
 +===== Suggested Readings and Knowledge Resources =====
 +  * [[en:iot-open:introductiontoembeddedprogramming2:cppfundamentals]]
 +  * [[en:iot-open:hardware2:esp32|]]
 +  * [[en:iot-open:hardware2:actuators_light|]]
 +  * [[en:iot-open:practical:hardware:sut:esp32|]]
 +
 +To generate an array of bytes representing an image in 565 format, it is easiest to use an online tool, e.g.:
 +  * [[https://javl.github.io/image2cpp/]]
 +<note important>By default, this converter works for monochrome displays!\\ You need to change "Brightness / alpha threshold:" to "0" and "Draw mode:" to "Horizontal - 2 bytes per pixel (565)". </note>
 +===== Hands-on Lab Scenario =====
 +
 +==== Task to be implemented ====
 +Draw a text on the OLED display and an image of your choice (small, to fit both text and image).
 +
 +==== Start ====
 +Perhaps you will need to use an external tool to preprocess an image to the desired size (we suggest something no bigger than 100x100 pixels) and another tool (see hint above) to convert an image to an array of bytes. 
 +<note important>Note that when using a conversion tool, the conversion should be done for the 64k colour (16bit) model, not RGB.\\ The 16-bit model is referenced as "2-bytes per pixel" or so-called "565".</note>
 +
 +Check if you can see a full OLED Display in your video stream. Book a device and create a dummy Arduino file with ''void setup()...'' and ''void loop()...''.
 +
 +Prepare a small bitmap and convert it to the byte array for 16-bit colour settings.\\
 +Sample project favicon you can use is present in Figure {{ref>iotopenfavicon}}:
 +<figure iotopenfavicon>
 +{{ :en:iot-open:practical:hardware:sut:esp32:logo_60.jpg?60 |}}
 +<caption>IOT-OPEN.EU Reloaded favicon 60px x 60px</caption>
 +</figure>
 +==== Steps ====
 +Remember to include the source array in the code when drawing an image.
 +The corresponding generated C array for the logo in Figure {{ref>iotopenfavicon}} is too extensive to present here in the textual form, so below it is just the first couple of pixels represented in the array, and full contents you can download here: {{ :en:iot-open:practical:hardware:sut:esp32:logo_60.zip | ZIPed archive with a C file containing all pixel data of the image }}.
 +<code c>
 +const uint16_t epd_bitmap_logo_60 [] PROGMEM = {
 + 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 
 + 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xf7be, 0xbdd7, 0x8430, 0x5aeb, 0x39c7, 0x2104, 0x1082, 0x0020, 0x0020, 0x1082, 
 + 0x2104, 0x39c7, 0x5aeb, 0x8430, 0xbdd7, 0xf7be, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff,
 +....
 +
 +....
 + 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000, 0x0000
 +};
 +
 +// Array of all bitmaps for convenience. (Total bytes used to store images in PROGMEM = 3616)
 +const int epd_bitmap_allArray_LEN = 1;
 +const uint16_t* epd_bitmap_allArray[1] = {
 + epd_bitmap_logo_60
 +};
 +</code>
 +=== Step 1 ===
 +Include necessary libraries:
 +<code c>
 +#include <Arduino.h>
 +#include <Adafruit_GFX.h>
 +#include <Adafruit_SSD1351.h>
 +#include <SPI.h>
 +//Fonts
 +#include <Fonts/FreeMono9pt7b.h>
 +</code>
 +
 +The code above also includes a font to draw text on the OLED Display. There are many fonts one can use, and a non-exhaustive list is present below (files are located in the ''Adafruit GFX Library'', subfolder ''Fonts''):
 +<code>
 +   FreeMono12pt7b.h
 +   FreeMono18pt7b.h
 +   FreeMono24pt7b.h
 +   FreeMono9pt7b.h
 +   FreeMonoBold12pt7b.h
 +   FreeMonoBold18pt7b.h
 +   FreeMonoBold24pt7b.h
 +   FreeMonoBold9pt7b.h
 +   FreeMonoBoldOblique12pt7b.h
 +   FreeMonoBoldOblique18pt7b.h
 +   FreeMonoBoldOblique24pt7b.h
 +   FreeMonoBoldOblique9pt7b.h
 +   FreeMonoOblique12pt7b.h
 +   FreeMonoOblique18pt7b.h
 +   FreeMonoOblique24pt7b.h
 +   FreeMonoOblique9pt7b.h
 +   FreeSans12pt7b.h
 +   FreeSans18pt7b.h
 +   FreeSans24pt7b.h
 +   FreeSans9pt7b.h
 +   FreeSansBold12pt7b.h
 +   FreeSansBold18pt7b.h
 +   FreeSansBold24pt7b.h
 +   FreeSansBold9pt7b.h
 +   FreeSansBoldOblique12pt7b.h
 +   FreeSansBoldOblique18pt7b.h
 +   FreeSansBoldOblique24pt7b.h
 +   FreeSansBoldOblique9pt7b.h
 +   FreeSansOblique12pt7b.h
 +   FreeSansOblique18pt7b.h
 +   FreeSansOblique24pt7b.h
 +   FreeSansOblique9pt7b.h
 +   FreeSerif12pt7b.h
 +   FreeSerif18pt7b.h
 +   FreeSerif24pt7b.h
 +   FreeSerif9pt7b.h
 +   FreeSerifBold12pt7b.h
 +   FreeSerifBold18pt7b.h
 +   FreeSerifBold24pt7b.h
 +   FreeSerifBold9pt7b.h
 +   FreeSerifBoldItalic12pt7b.h
 +   FreeSerifBoldItalic18pt7b.h
 +   FreeSerifBoldItalic24pt7b.h
 +   FreeSerifBoldItalic9pt7b.h
 +   FreeSerifItalic12pt7b.h
 +   FreeSerifItalic18pt7b.h
 +   FreeSerifItalic24pt7b.h
 +   FreeSerifItalic9pt7b.h
 +</code>
 +
 +=== Step 2 ===
 +Add declarations for GPIOs, colours (to ease programming and use names instead of hexadecimal values) and screen height and width. To recall, the OLED display in our lab is square: 128x128 pixels, 16k colours (16-bit 565: RRRRRGGGGGGBBBBB colour model):
 +<code c>
 +//Test configuration of the SPI
 +#define OLED_SPI_MOSI_PIN 15  //DIN
 +#define OLED_SPI_SCLK_PIN 18  //CLK
 +#define OLED_SPI_CS_PIN 11 
 +#define OLED_SPI_DC_PIN 13
 +#define OLED_SPI_RST_PIN 12
 +#define SCREEN_WIDTH 128
 +#define SCREEN_HEIGHT 128
 +
 +// Color definitions
 +#define BLACK           0x0000
 +#define BLUE            0x001F
 +#define RED             0xF800
 +#define GREEN           0x07E0
 +#define CYAN            0x07FF
 +#define MAGENTA         0xF81F
 +#define YELLOW          0xFFE0  
 +#define WHITE           0xFFFF
 +</code>
 +
 +=== Step 3 ===
 +Declare an SPI communication and OLED controller objects:
 +<code c>
 +static SPIClass hspi(HSPI);
 +static Adafruit_SSD1351 tft = Adafruit_SSD1351(SCREEN_WIDTH, SCREEN_HEIGHT, &hspi, OLED_SPI_CS_PIN, OLED_SPI_DC_PIN, OLED_SPI_RST_PIN);
 +</code>
 +
 +=== Step 4 ===
 +Initialise the SPI communication object and the OLED controller object. Then clear the screen (write all black):
 +<code c>
 +   pinMode(OLED_SPI_CS_PIN, OUTPUT);
 +   hspi.begin(OLED_SPI_SCLK_PIN, -1, OLED_SPI_MOSI_PIN, -1);
 +   delay(50);
 +   digitalWrite(OLED_SPI_CS_PIN,LOW);
 +   tft.begin();
 +   delay(100);
 +   tft.fillScreen(BLACK);
 +</code>
 +
 +=== Step 5 ===
 +Draw a bitmap around the centre part of the screen (screen is 128x128px); please mind that ''OLED_SPI_CS_PIN'' must be ''LOW'' (OLED SPI device controller selected) before executing the following code:
 +<code c>
 +  tft.drawRGBBitmap(48,48, epd_bitmap_logo_60, 60, 60);
 +</code>
 +=== Step 6 ===
 +Drop some additional text on the screen:
 +<code c>
 +  tft.setFont(&FreeMono9pt7b);
 +  tft.setTextSize(1);
 +  tft.setTextColor(WHITE);
 +  tft.setCursor(0,10);
 +  tft.println("Hello IoT");
 +</code>
 +Some remarks regarding coordinates:\\
 +  * ''setFont'' sets the base font later used for printing. The font size is given in the font name, so in the case of the ''FreeMono9pt7b'', the base font size is 9 pixels vertically,
 +  * ''setTextSize'' sets a relative font scaling; assuming the base font is 9 pixels, ''setTextSize(2)'' will scale it up to 200% (18 pixels); there is no fractal calling here :(,
 +  * ''setTextColor'' controls the colour of the text: as we have a black screen (''fillScreen(BLACK)''), we will use white here, but any other colour is valid,
 +  * ''setCursor(X,Y)'' sets the text location; note the upper-left corner is 0.0, but that relates to the lower-left corner of the first letter. So, to write in the first line, you need to offset it down (Y-coordinate) by at least font size (relative, also regarding text size calling, if any).
 +<note tip>To speed up screen updating and avoid flickering, you may use a trick to clear the afore-written text: instead of clearing the whole or partial screen, write the same text in the same location but in the background colour.</note>
 +
 +<note tip>Using ''println(...)'' to print the text is very handy as once executed, ''setCursor'' is automatically called to set the cursor in the next line so you can continue printing in a new line without a need to set the cursor's position explicitly. Use ''print(...)'' to continue printing in the current line.</note>
 +
 +Besides the functions presented above, the controller class has several other handy functions (among others):
 +  * ''drawPixel(x,y, colour)'' draws a pixel in ''x,y'' coordinates of the ''colour'' colour,
 +  * ''drawCircle(x,y, radius, colour)'' draws a circle in ''x,y'' coordinates with colour ''colour'' and specified ''radius'' (in pixels),
 +  * ''drawLine(x1,y1, x2,y2, colour)'' draws a line starting from ''x1,y1'' and finished in ''x2,y2'' with given ''colour'' - to draw straight (horizontal or vertical) lines there is a faster option:
 +    * ''drawFastHLine(x,y, w, colour)'' draws horizontal line that starts from ''x,y'' and of the length ''w'' with given ''colour'',
 +    * ''drawFastVLine(x,y, h, colour)'' draws vertical line that starts from ''x,y'' and of the length ''h'' with given ''colour'',
 +  * ''drawRect(x,y, w,h, colour)'' draws a rectange starting in ''x,y'' of the width and height ''w'' and ''h'' and with given ''colour'' (no fill),
 +  * ''drawTriangle(x1,y1, x2,y2, x3,y3, colour)'' draws a triangle using 3 vertexes and of given colour (no fill),
 +
 +
 +==== Result validation ====
 +You should see the image and the text in the video stream.
 +
 +===== FAQ =====
 +**The screen is black even if I write to it. What to do?**: Check if you have initialised an SPI communication object and pulled the "chip select" GPIO down to LOW before drawing. Follow the code example in this manual: it does work!
 +
 +
 +<WRAP noprint>
 +===== Project information =====
 +{{:en:iot-open:logo_iot_200_px.png?200|}}\\
 +This Intellectual Output was implemented under the Erasmus+ KA2.\\
 +Project IOT-OPEN.EU Reloaded – Education-based strengthening of the European universities, companies and labour force in the global IoT market.\\
 +Project number: 2022-1-PL01-KA220-HED-000085090.
 +
 +**__Erasmus+ Disclaimer__**\\
 +This project has been funded with support from the European Commission. \\
 +This publication reflects the views of only the author, and the Commission cannot be held responsible for any use that may be made of the information contained therein.
 +
 +**__Copyright Notice__**\\
 +This content was created by the IOT-OPEN.EU Reloaded consortium, 2022,2024.\\
 +The content is Copyrighted and distributed under CC BY-NC [[https://en.wikipedia.org/wiki/Creative_Commons_license|Creative Commons Licence]], free for Non-Commercial use. 
 +<figure label>
 +{{:en:iot-open:ccbync.png?100|}}
 +</figure>
 +</WRAP>
CC Attribution-Share Alike 4.0 International
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0