Differences

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

--- en:iot-open:practical:hardware:sut:esp32:emb7_1 [2024/04/05 10:56] – [Steps] pczekalski
+++ en:iot-open:practical:hardware:sut:esp32:emb7_1 [2024/06/29 15:54] (current) – [Prerequisites] pczekalski
@@ Line 1: / Line 1: @@
-<todo @pczekalski>Finish it!</todo>
 ====== 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:
@@ Line 17: / Line 16: @@
 <code ini>
 lib_deps =
-    adafruit/Adafruit SSD1351 library@^1.2.8
+    adafruit/Adafruit SSD1351 library@^1.3.2
     adafruit/Adafruit GFX Library@^1.11.9
 </code>
@@ Line 72: / Line 71: @@
 Include necessary libraries:
 <code c>
-#include "Adafruit_GFX.h"
+#include <Arduino.h>
-#include "Adafruit_SSD1351.h"
+#include <Adafruit_GFX.h>
-#include "SPI.h"
+#include <Adafruit_SSD1351.h>
+#include <SPI.h>
 //Fonts
-#include <Fonts/FreeMonoBold12pt7b.h>
+#include <Fonts/FreeMono9pt7b.h>
 </code>
@@ Line 154: / Line 154: @@
 </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),
-=== Step n ===
-//Describe activities done in Step n.//
 ==== Result validation ====
@@ Line 162: / Line 210: @@
 ===== FAQ =====
-This section is to be extended as new questions appear. \\
+**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!
-When using the printed version of this manual, please refer to the latest online version of this document to obtain the valid and up-to-date list of the FAQ.
-//Provide some FAQs in the following form:\\
-**Question?**: Answer.
-//
+<WRAP noprint>
 ===== Project information =====
 {{:en:iot-open:logo_iot_200_px.png?200|}}\\
@@ Line 184: / Line 230: @@
 {{:en:iot-open:ccbync.png?100|}}
 </figure>
+</WRAP>

en/iot-open/practical/hardware/sut/esp32/emb7_1.1712314617.txt.gz · Last modified: 2024/04/05 10:56 by pczekalski