photo_on_lcd

Example of the component cleishm/idfxx_lcd_image v1.0.0
# Photo on LCD

Shows a JPEG photo on an ILI9341 color LCD, first filling the screen and then fitted in a rectangle with
a caption drawn over it.

## What it demonstrates

- Decoding a JPEG embedded in the app, with an `idfxx::memory_source` and `idfxx::jpeg::decoder`
- Using the panel in landscape with `swap_xy()`, and filling the screen with `idfxx::lcd::write_image()`
- Fitting the whole photo in a rectangle with `placement::target` and `image::layout::fit`
- Drawing a caption over each band with the overlay callback and `idfxx::gfx::canvas`
- Writing the picture a band of rows at a time, with no frame buffer, and sizing the SPI bus's
  `max_transfer_sz` from `write_options::band_rows`
- Setting up the SPI bus, panel I/O and `idfxx::lcd::ili9341` panel as in the `idfxx_lcd_ili9341`
  `color_bars` example

The example uses the exception-based API (`CONFIG_COMPILER_CXX_EXCEPTIONS=y` in `sdkconfig.defaults`).

## Hardware required

- An ESP32-S3 (or other ESP32) development board
- A 240x320 ILI9341 display module with an SPI interface

Wire the display to the board as follows, plus power and ground:

| Display pin     | ESP32 GPIO |
| --------------- | ---------- |
| SCK             | GPIO 12    |
| SDI (MOSI)      | GPIO 11    |
| CS              | GPIO 10    |
| DC              | GPIO 9     |
| RESET           | GPIO 14    |
| LED (backlight) | GPIO 15    |

The example doesn't read from the display, so MISO isn't needed. To use different pins, change the
`PIN_*` constants at the top of `main/display_setup.hpp`. On the ESP32, change the pins first: GPIO 9–11
are connected to the module's SPI flash, and GPIO 12 and 15 are strapping pins.

The photo is shown in landscape, with `swap_xy(true)` in `main/main.cpp`. If it appears mirrored or
upside down on your module, add a call to `mirror()` after that one: `mirror(true, true)` turns the
picture upside down.

## How to use

Create a project from this example:

```bash
idf.py create-project-from-example "cleishm/idfxx_lcd_image:photo_on_lcd"
cd photo_on_lcd
```

Then build and flash it, then watch the serial output:

```bash
idf.py set-target esp32s3
idf.py -p PORT flash monitor
```

Replace `esp32s3` with your target and `PORT` with your board's serial port. Press `Ctrl-]` to exit the monitor.

The display first shows the photo filling the screen, and after 5 seconds the whole photo fitted in a
rectangle, with the word "idfxx" drawn over its bottom edge. To show your own photo, replace
`main/photo.jpg`. A photo stored on its side, with an EXIF orientation saying to turn it, still appears
upright, but needs memory for a whole frame while it is converted.

The photo is `kodim23` from the [Kodak Lossless True Color Image Suite](https://r0k.us/graphics/kodak/),
photographed by Steve Kelly. That page states its understanding that Kodak released the suite for
unrestricted usage.

To create a project from this example, run:

idf.py create-project-from-example "cleishm/idfxx_lcd_image=1.0.0:photo_on_lcd"

or download archive (~79.23 KB)