10. Output Devices¶

Hero Shot

This week, I made working display monitor using Raspberry Pi Pico as a output device.

Group assignment:¶

Measure the power consumption of an output device.
Document your work on the group work page and reflect on your individual page what you learned.

Individual assignment:¶

Add an output device to a microcontroller board you’ve designed and program it to do something.

Learning outcomes¶

Demonstrate workflows used in controlling an output device(s) with MCU board you have designed.

Group Assignment¶

This week’s group work page is here

Individual Assignment¶

This week, I checked ILI9341 display how to work as a Output Device using Xiao and Raspberry Pi Pico.

Using Parts¶

Xiao Raspberry Pi Pico ILI9341

First I checked ILI9341 with Xiao-RP2040 on breadboard to confirm the operation .
I did 2 tests as follows;
- Display Test
- Touch screen test

sketch sketch

I could check it worked. I tried to put the Xiao into my PCB board which I made last week but certain ports are required more number than mine, I decided to make new board for Raspberry Pi Pico and ILI9341 connection, as Raspberry Pi Pico supplies more ports than Xiao.

Board Design¶

I had to connect so many pins between Raspberry Pi Pico and ILI9341, I made a list of all the connection between them referring to data from the person already connected on the website.(Show Link)

sketch sketch
sketch

Design in KiCad¶

I began to draw the schematic design from this list in KiCad.
Unfortunately I couldn’t find ILI9341 data in KiCad, I measured it and draw the holes.

First Try¶

I draw the basic connection, and then move to pcb board. While connecting lines on the PCB board, some lines are needed to have several 0Ω resistors as a jumper.
sketch sketch
Some lines are not possible to put 0Ω resistors in “proper” place too.
I was also advised not to use so many 0Ω resistors in one line.

Second Try¶

So I asked one of my instructor, Tsuchiya-san how to connect more efficient. I put lines little by little by checking less crossing as possible and made it!
sketch sketch

Then, outline was drawn and put filled zone a little bit smaller than outside line.
sketch

Tip

When you design the PCB board, it’s better to work this order.
1. VCC
2. GND
3. Other lines

Milling by SRM-20¶

Preparation in mods¶

After making the PCB data and export into 2 files(pico-F_Cu.svg, pico-B_Cu.svg).

"pico-F_Cu.svg" / "pico-B_Cu.svg"

I made 3 files(path.svg, holes.svg, outline.svg) from those export files by Inkscape.

When mods program is opened and select “Roland PCB mill 2D PCB”. 3 files are made for milling.
First, set margin(move to origin) at 0 in x,y,z at “Roland SR<-20 milling machine”. “on/off” slider to “save file” is moved to on(right side).

Path file
Path.svg file is input and invert it and selected mill traces 1/64. Then, click “calculate” button at “mill raster 2D”. SVG image.rml file is automatically generated in download folder. So it is moved to another folder and change the name. -> “path.rml”
Hole file
Click “select SVG file” at read SVG area, select hole.svg file. This time as we don’t need to invert.
Selected mill traces is selected 1/32 and click “calculate” button. Then it generated another SVG image.rml file. It is move to another folder and change the name. -> “hole.rml”
Outline file
Click “select SVG file” at read SVG area again and select outline.svg.

Warning

Whether invert or not invert, Cutting Line is CHANGED!!

svg file	Value
Invert	outside
not Invert	inside

Next, traces mill is selected 1/32 and click “calculate” to produce SVG image.rml. New “SVG image.rml” is also moved to certain folder and change the file name. -> outline.rml

Then I milled the PCB data.
sketch
sketch

Failure

As I didn’t push and adhered the plate well, the plate was trembled and made trace mill broken. sketch

Soldering¶

I needed to check if the ILI9341 holes are fit with milling holes(put sockets), as I draw the ILI9341 data by scaling and I couldn’t find 14 holes sockets in KiCad.
Sockets were a little larger than ILI9341’s pinhedars, and I shaved the edge of sockets to fit the ILI9341 headers.

Then I started the soldering. Soldering sockets are really difficult for me!! I tried many ways to do it easier and at last I found that pcb plate placing an angle and soldering from the above made it easier to see and work with.
Shaving surface a bit around the soldering holes made also good for me to prevent sticking each other.

sketch

After soldering sockets and 0Ω resistor, I checked all lines are worked properly with a multimeter.

TEST¶

1ST Test
I put ILI9341 and Raspberry Pi Pico on my board and connect usb to Pi Pico. The ILI’s screen is on. I tried to send display program to the Pi Pico but Pico’s port is not recognized. -> The usb cable has 2 kinds, one has the function to transfer data and another is just sending the battery. I found using the second function(just sending battery) and changed to other one.
Then Pico’s port was recognized and could be sent the program to pico. Operation was also succeed.
2ND Test
Though Pico’s port was recognized, program didn’t work at all. The first program is taken from example code at arduino ide and changed the port numbers(The program was already checked with Xiao). So Pi Pico and ILI9341 are moved to breadboard and wired all lines for checking if the program works on Pico properly.

At first, it didn’t still work. However, I found the mouse that was connected with same USB cable wasn’t worked too. So I unplugged and plugged that cable, then it was began to work and pico could be installed the code and operation at ILI started.
sketch

3RD Test
As we could check the program with Pico and ILI9341, I moved 2 items to my PCB board and test the same thing. This time, it was succeed with
1) Display test(Display test Code) -> OK
2) Touch display test(Touch Screen Test Code) -> OK

sketch sketch

Research¶

I researched how to connect ILI9341 and Raspberry Pi Pico a lot. I also checked python code and tried to use it by thonny. However Raspberry Pi Pico wasn’t recognized at thonny.(maybe because of driver?) I’ll research how to do with python soon.

What I’ve learnt this week¶

This week’s assignment was so hard for me! First of all, connecting lines are so numerous and complicated, it seemed to take forever to make PCB board. I tried to make the line inside the components, the lines crossed all over. I could learn how to make and check the line, and use as less 0Ω resistor as possible.
I was so relieved when I finish this week’s assignment!

Useful links¶

Code¶

Display test Code

/* graphicstest.io */
/***************************************************
  This is our GFX example for the Adafruit ILI9341 Breakout and Shield
  ----> http://www.adafruit.com/products/1651

  Check out the links above for our tutorials and wiring diagrams
  These displays use SPI to communicate, 4 or 5 pins are required to
  interface (RST is optional)
  Adafruit invests time and resources providing this open source code,
  please support Adafruit and open-source hardware by purchasing
  products from Adafruit!

  Written by Limor Fried/Ladyada for Adafruit Industries.
  MIT license, all text above must be included in any redistribution
 ****************************************************/


#include "SPI.h"
#include "Adafruit_GFX.h"
#include "Adafruit_ILI9341.h"

// For the Adafruit shield, these are the default.
/*
#define TFT_DC 9
#define TFT_CS 10
*/
/* Setting for Xiao RP2040
#define TFT_DC    5
#define TFT_CS    1
#define TFT_MOSI  3
#define TFT_CLK   2
#define TFT_RST   0
#define TFT_MISO  4

*/
// 0401 for Pi Pico
#define TFT_DC    28
#define TFT_CS    17
#define TFT_MOSI  19
#define TFT_CLK   18
#define TFT_RST   22
#define TFT_MISO  16

// Use hardware SPI (on Uno, #13, #12, #11) and the above for CS/DC
// Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC);
// If using the breakout, change pins as desired
Adafruit_ILI9341 tft = Adafruit_ILI9341(TFT_CS, TFT_DC, TFT_MOSI, TFT_CLK, TFT_RST, TFT_MISO);


void setup() {
  Serial.begin(9600);
  Serial.println("ILI9341 Test!"); 

  tft.begin();

  // read diagnostics (optional but can help debug problems)
  uint8_t x = tft.readcommand8(ILI9341_RDMODE);
  Serial.print("Display Power Mode: 0x"); Serial.println(x, HEX);
  x = tft.readcommand8(ILI9341_RDMADCTL);
  Serial.print("MADCTL Mode: 0x"); Serial.println(x, HEX);
  x = tft.readcommand8(ILI9341_RDPIXFMT);
  Serial.print("Pixel Format: 0x"); Serial.println(x, HEX);
  x = tft.readcommand8(ILI9341_RDIMGFMT);
  Serial.print("Image Format: 0x"); Serial.println(x, HEX);
  x = tft.readcommand8(ILI9341_RDSELFDIAG);
  Serial.print("Self Diagnostic: 0x"); Serial.println(x, HEX); 

  Serial.println(F("Benchmark                Time (microseconds)"));
  delay(10);
  Serial.print(F("Screen fill              "));
  Serial.println(testFillScreen());
  delay(500);

  Serial.print(F("Text                     "));
  Serial.println(testText());
  delay(3000);

  Serial.print(F("Lines                    "));
  Serial.println(testLines(ILI9341_CYAN));
  delay(500);

  Serial.print(F("Horiz/Vert Lines         "));
  Serial.println(testFastLines(ILI9341_RED, ILI9341_BLUE));
  delay(500);

  Serial.print(F("Rectangles (outline)     "));
  Serial.println(testRects(ILI9341_GREEN));
  delay(500);

  Serial.print(F("Rectangles (filled)      "));
  Serial.println(testFilledRects(ILI9341_YELLOW, ILI9341_MAGENTA));
  delay(500);

  Serial.print(F("Circles (filled)         "));
  Serial.println(testFilledCircles(10, ILI9341_MAGENTA));

  Serial.print(F("Circles (outline)        "));
  Serial.println(testCircles(10, ILI9341_WHITE));
  delay(500);

  Serial.print(F("Triangles (outline)      "));
  Serial.println(testTriangles());
  delay(500);

  Serial.print(F("Triangles (filled)       "));
  Serial.println(testFilledTriangles());
  delay(500);

  Serial.print(F("Rounded rects (outline)  "));
  Serial.println(testRoundRects());
  delay(500);

  Serial.print(F("Rounded rects (filled)   "));
  Serial.println(testFilledRoundRects());
  delay(500);

  Serial.println(F("Done!"));

}


void loop(void) {
  for(uint8_t rotation=0; rotation<4; rotation++) {
    tft.setRotation(rotation);
    testText();
    delay(1000);
  }
}

unsigned long testFillScreen() {
  unsigned long start = micros();
  tft.fillScreen(ILI9341_BLACK);
  yield();
  tft.fillScreen(ILI9341_RED);
  yield();
  tft.fillScreen(ILI9341_GREEN);
  yield();
  tft.fillScreen(ILI9341_BLUE);
  yield();
  tft.fillScreen(ILI9341_BLACK);
  yield();
  return micros() - start;
}

unsigned long testText() {
  tft.fillScreen(ILI9341_BLACK);
  unsigned long start = micros();
  tft.setCursor(0, 0);
  tft.setTextColor(ILI9341_WHITE);  tft.setTextSize(1);
  tft.println("Hello World!");
  tft.setTextColor(ILI9341_YELLOW); tft.setTextSize(2);
  tft.println(1234.56);
  tft.setTextColor(ILI9341_RED);    tft.setTextSize(3);
  tft.println(0xDEADBEEF, HEX);
  tft.println();
  tft.setTextColor(ILI9341_GREEN);
  tft.setTextSize(5);
  tft.println("Groop");
  tft.setTextSize(2);
  tft.println("I implore thee,");
  tft.setTextSize(1);
  tft.println("my foonting turlingdromes.");
  tft.println("And hooptiously drangle me");
  tft.println("with crinkly bindlewurdles,");
  tft.println("Or I will rend thee");
  tft.println("in the gobberwarts");
  tft.println("with my blurglecruncheon,");
  tft.println("see if I don't!");
  return micros() - start;
}

unsigned long testLines(uint16_t color) {
  unsigned long start, t;
  int           x1, y1, x2, y2,
                w = tft.width(),
                h = tft.height();

  tft.fillScreen(ILI9341_BLACK);
  yield();

  x1 = y1 = 0;
  y2    = h - 1;
  start = micros();
  for(x2=0; x2<w; x2+=6) tft.drawLine(x1, y1, x2, y2, color);
  x2    = w - 1;
  for(y2=0; y2<h; y2+=6) tft.drawLine(x1, y1, x2, y2, color);
  t     = micros() - start; // fillScreen doesn't count against timing

  yield();
  tft.fillScreen(ILI9341_BLACK);
  yield();

  x1    = w - 1;
  y1    = 0;
  y2    = h - 1;
  start = micros();
  for(x2=0; x2<w; x2+=6) tft.drawLine(x1, y1, x2, y2, color);
  x2    = 0;
  for(y2=0; y2<h; y2+=6) tft.drawLine(x1, y1, x2, y2, color);
  t    += micros() - start;

  yield();
  tft.fillScreen(ILI9341_BLACK);
  yield();

  x1    = 0;
  y1    = h - 1;
  y2    = 0;
  start = micros();
  for(x2=0; x2<w; x2+=6) tft.drawLine(x1, y1, x2, y2, color);
  x2    = w - 1;
  for(y2=0; y2<h; y2+=6) tft.drawLine(x1, y1, x2, y2, color);
  t    += micros() - start;

  yield();
  tft.fillScreen(ILI9341_BLACK);
  yield();

  x1    = w - 1;
  y1    = h - 1;
  y2    = 0;
  start = micros();
  for(x2=0; x2<w; x2+=6) tft.drawLine(x1, y1, x2, y2, color);
  x2    = 0;
  for(y2=0; y2<h; y2+=6) tft.drawLine(x1, y1, x2, y2, color);

  yield();
  return micros() - start;
}

unsigned long testFastLines(uint16_t color1, uint16_t color2) {
  unsigned long start;
  int           x, y, w = tft.width(), h = tft.height();

  tft.fillScreen(ILI9341_BLACK);
  start = micros();
  for(y=0; y<h; y+=5) tft.drawFastHLine(0, y, w, color1);
  for(x=0; x<w; x+=5) tft.drawFastVLine(x, 0, h, color2);

  return micros() - start;
}

unsigned long testRects(uint16_t color) {
  unsigned long start;
  int           n, i, i2,
                cx = tft.width()  / 2,
                cy = tft.height() / 2;

  tft.fillScreen(ILI9341_BLACK);
  n     = min(tft.width(), tft.height());
  start = micros();
  for(i=2; i<n; i+=6) {
    i2 = i / 2;
    tft.drawRect(cx-i2, cy-i2, i, i, color);
  }

  return micros() - start;
}

unsigned long testFilledRects(uint16_t color1, uint16_t color2) {
  unsigned long start, t = 0;
  int           n, i, i2,
                cx = tft.width()  / 2 - 1,
                cy = tft.height() / 2 - 1;

  tft.fillScreen(ILI9341_BLACK);
  n = min(tft.width(), tft.height());
  for(i=n; i>0; i-=6) {
    i2    = i / 2;
    start = micros();
    tft.fillRect(cx-i2, cy-i2, i, i, color1);
    t    += micros() - start;
    // Outlines are not included in timing results
    tft.drawRect(cx-i2, cy-i2, i, i, color2);
    yield();
  }

  return t;
}

unsigned long testFilledCircles(uint8_t radius, uint16_t color) {
  unsigned long start;
  int x, y, w = tft.width(), h = tft.height(), r2 = radius * 2;

  tft.fillScreen(ILI9341_BLACK);
  start = micros();
  for(x=radius; x<w; x+=r2) {
    for(y=radius; y<h; y+=r2) {
      tft.fillCircle(x, y, radius, color);
    }
  }

  return micros() - start;
}

unsigned long testCircles(uint8_t radius, uint16_t color) {
  unsigned long start;
  int           x, y, r2 = radius * 2,
                w = tft.width()  + radius,
                h = tft.height() + radius;

  // Screen is not cleared for this one -- this is
  // intentional and does not affect the reported time.
  start = micros();
  for(x=0; x<w; x+=r2) {
    for(y=0; y<h; y+=r2) {
      tft.drawCircle(x, y, radius, color);
    }
  }

  return micros() - start;
}

unsigned long testTriangles() {
  unsigned long start;
  int           n, i, cx = tft.width()  / 2 - 1,
                      cy = tft.height() / 2 - 1;

  tft.fillScreen(ILI9341_BLACK);
  n     = min(cx, cy);
  start = micros();
  for(i=0; i<n; i+=5) {
    tft.drawTriangle(
      cx    , cy - i, // peak
      cx - i, cy + i, // bottom left
      cx + i, cy + i, // bottom right
      tft.color565(i, i, i));
  }

  return micros() - start;
}

unsigned long testFilledTriangles() {
  unsigned long start, t = 0;
  int           i, cx = tft.width()  / 2 - 1,
                   cy = tft.height() / 2 - 1;

  tft.fillScreen(ILI9341_BLACK);
  start = micros();
  for(i=min(cx,cy); i>10; i-=5) {
    start = micros();
    tft.fillTriangle(cx, cy - i, cx - i, cy + i, cx + i, cy + i,
      tft.color565(0, i*10, i*10));
    t += micros() - start;
    tft.drawTriangle(cx, cy - i, cx - i, cy + i, cx + i, cy + i,
      tft.color565(i*10, i*10, 0));
    yield();
  }

  return t;
}

unsigned long testRoundRects() {
  unsigned long start;
  int           w, i, i2,
                cx = tft.width()  / 2 - 1,
                cy = tft.height() / 2 - 1;

  tft.fillScreen(ILI9341_BLACK);
  w     = min(tft.width(), tft.height());
  start = micros();
  for(i=0; i<w; i+=6) {
    i2 = i / 2;
    tft.drawRoundRect(cx-i2, cy-i2, i, i, i/8, tft.color565(i, 0, 0));
  }

  return micros() - start;
}

unsigned long testFilledRoundRects() {
  unsigned long start;
  int           i, i2,
                cx = tft.width()  / 2 - 1,
                cy = tft.height() / 2 - 1;

  tft.fillScreen(ILI9341_BLACK);
  start = micros();
  for(i=min(tft.width(), tft.height()); i>20; i-=6) {
    i2 = i / 2;
    tft.fillRoundRect(cx-i2, cy-i2, i, i, i/8, tft.color565(0, i, 0));
    yield();
  }

  return micros() - start;
}

Touch Screen Test Code

#include <Adafruit_GFX.h>
#include <Adafruit_ILI9341.h>
#include <XPT2046_Touchscreen.h>
#include <SPI.h>


#define COMMON_SCK  18
#define COMMON_MOSI 19
#define COMMON_MISO 16

#define TOUCH_CS 20


#define TFT_DC  28
#define TFT_CS  17
#define TFT_RST 22

// Define for Xiao
/*
#define COMMON_SCK  2
#define COMMON_MOSI 3
#define COMMON_MISO 4

#define TOUCH_CS 29

#define TFT_DC    7 
#define TFT_CS    1
#define TFT_MOSI  3
#define TFT_CLK   2
#define TFT_RST   0
#define TFT_MISO  4
*/

#define RADIUS (2)

XPT2046_Touchscreen ts(TOUCH_CS);
Adafruit_ILI9341 tft = Adafruit_ILI9341(&SPI, TFT_DC, TFT_CS, TFT_RST);

void setup()
{
  Serial.begin(115200);

  //RP2040 SPI ピン設定
  SPI.setTX(COMMON_MOSI);
  SPI.setRX(COMMON_MISO);
  SPI.setSCK(COMMON_SCK);

  //表示開始
  tft.begin();
  tft.setRotation(1);
  tft.setTextSize(2);
  tft.fillScreen(ILI9341_BLACK);

  //タッチ入力開始
  ts.begin();
  ts.setRotation(3);

}

void loop()
{
  //タッチ状態読み取り
  boolean bTouch = ts.touched();

  //タッチがあればタッチされている座標の表示
  if (bTouch == true)
  {
    const int16_t Offset_x = 150;
    const int16_t Offset_y = 150;
    float RateX = (float)320 / (3700 - Offset_x);
    float RateY = (float)240 / (3700 - Offset_y);

    TS_Point tPoint = ts.getPoint();

    int16_t x = (float)(tPoint.x - Offset_x) * RateX;
    int16_t y = (float)(tPoint.y - Offset_y) * RateY;
//    tft.fillCircle(x, y, RADIUS, ILI9341_WHITE);
    tft.fillCircle(x, y, RADIUS, ILI9341_MAGENTA);
    Serial.printf("(x,y) = (%d, %d) : (%d, %d)\r\n", tPoint.x, tPoint.y, x, y);
  }
}