esphome color issues with ili9342 Cheap Yellow Display CYD

Grey-Lancaster commented 10 months ago

The problem

The problem is images only show 3 colors maybe/ Not at all like the ili9341

Color test BGR ili9342 which displays text properly

Color test RGB ili9342 colors for text are wrong

Lolin ili9341 color test which I am led to believe is correct

Lolin ili 9341 image

CYD ILI9342 image

Which version of ESPHome has the issue?

2023.12.7

What type of installation are you using?

Home Assistant Add-on

Which version of Home Assistant has the issue?

2023.12.4

What platform are you using?

ESP32

Board

CYD ESP32-2432S028R

Component causing the issue

ili9xxx

Example YAML snippet

esphome:
  name: cyd1
  friendly_name: CYD1

esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "hkm95e5mVzQKWzzEmzmOLeM5IjAioXf7oxvEfKYkoQw="

ota:
  password: "d570ab1a6e51f564abf18152ff316734"

wifi:
  networks:

  - ssid: "thegreyfox"
    password: ""
  - ssid: "shop2"
    password: "mine0313"
  - ssid: "wled"  
    password: ""

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Cyd1 Fallback Hotspot"
    password: "EY5ubMujtVvU"

captive_portal:

time:
  - platform: homeassistant
    id: esptime
sensor:
  - platform: homeassistant
    id: outside_temperature
    entity_id: sensor.office_outside_temp_2
    internal: true

  - platform: homeassistant
    id: inside_temperature
    entity_id: sensor.big_room_temperature
    internal: true

  - platform: homeassistant
    id: nannie_out_temperature
    entity_id: sensor.outdoor_temperature
    internal: true

  - platform: homeassistant
    id: nannie_in_temperature
    entity_id: sensor.indoor_temperature
    internal: true

  - platform: homeassistant
    id: office_temperature
    entity_id: sensor.office_temp
    internal: true

color:
  - id: my_light_red
    hex: FFFF00  #yello
  - id: my_black
    hex: '000000'  # Hex code for black
  - id: white
    hex: ffffff
  - id: blue
    hex: 0000FF    

graph:
  - id: officegraph
    sensor: outside_temperature
    duration: 3h
    width: 220
    height: 180
    x_grid: 30min
    y_grid: 5.0
    max_value: 55.0
    min_value: 15.0
    color: blue
  - id: officegraph2
    sensor: inside_temperature
    duration: 1h
    width: 220
    height: 180
    x_grid: 10min
    y_grid: 5.0
    max_value: 70.0
    min_value: 15.0
    color: blue
font:
  # - file: 'Roboto.ttf'
  #    id: font1
  #    size: 26

  - file:
      type: gfonts
      family: Roboto
      weight: 900
    id: font1
    size: 26    
  - file: 'Arimo-Regular.ttf'
    id: arimo48
    size: 48
    glyphs: " .,°0123456789CF"
  - file: 'Arimo-Regular.ttf'
    id: arimo14
    size: 14
    glyphs: "0123456789"     
image:
  - file: http://192.168.1.50:8123/local/dad2.PNG
    id: my_image
    resize: 120x120
    type: RGB24

# ============================================================ 
# Home Assistant related setup
#
light:
  - platform: monochromatic
    output: backlight_pwm
    name: Display Backlight
    id: backlight
    restore_mode: ALWAYS_ON

# ============================================================ 
# Hardware related setup
#
# Setup SPI for the display. The ESP32-2432S028R uses separate SPI buses for display and touch
spi:
  - id: tft
    clk_pin: GPIO14
    mosi_pin: GPIO13
    miso_pin: GPIO12
  - id: touch
    clk_pin: GPIO25
    mosi_pin: GPIO32
    miso_pin: GPIO39

# Setup a pin to control the backlight
output:
  - platform: ledc
    pin: GPIO21
    id: backlight_pwm

# Setup the ili9xxx platform
#
# Display is used as 240x320 by default so we rotate it to 90°
display:
  - platform: ili9xxx
    model: ili9342
    spi_id: tft
    cs_pin: GPIO15
    dc_pin: GPIO2
    rotation: 90
    color_order: RGB
    id: "my_display"    
    pages:
      - id: page1    
        lambda: |-
          it.fill(id(my_black));   
          it.print(20, 0, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Hello WIZARD!");

          it.print(20, 30, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Time:");
          char buffer[15];
          auto time = id(esptime).now();
          int hour = time.hour % 12; // convert to 12-hour format
          hour = hour ? hour : 12; // handle midnight and noon
          sprintf(buffer, "%d:%02d", hour, time.minute);
          it.print(100, 30, id(font1), id(my_light_red), TextAlign::TOP_LEFT,  buffer);

          it.printf(25, 55, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Inside:");
          it.printf(25, 80, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Outside:");  
          it.printf(2, 105, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Nannie Out:");      
          it.printf(2, 130, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Nannie In:");
          it.printf(2, 155, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Office:");

          if (id(inside_temperature).has_state()) {      
          it.printf(120, 55, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(inside_temperature).state);
          }      
          if (id(outside_temperature).has_state()) {      
          it.printf(130, 80, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(outside_temperature).state);
          } 
          if (id(nannie_out_temperature).has_state()) {      
          it.printf(145, 105, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(nannie_out_temperature).state);
          } 
          if (id(nannie_in_temperature).has_state()) {      
          it.printf(145, 130, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(nannie_in_temperature).state);
          } 
          if (id(office_temperature).has_state()) {      
          it.printf(145, 155, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(office_temperature).state);
          } 
          it.image(60, 200, id(my_image)); 
      - id: page2
        lambda: |-
          it.fill(id(Color::BLACK));
          it.print(0, 60, id(arimo14), TextAlign::TOP_LEFT, "75");
          it.print(0, 105, id(arimo14), TextAlign::CENTER_LEFT, "65");
          it.print(0, 150, id(arimo14), TextAlign::CENTER_LEFT, "55");
          it.print(0, 195, id(arimo14), TextAlign::CENTER_LEFT, "45");
          it.print(0, 240, id(arimo14), TextAlign::BOTTOM_LEFT, "35");
          if (id(outside_temperature).has_state()) {
          it.printf(160, 0, id(arimo48), id(blue),TextAlign::TOP_CENTER, "%.1f °C", id(inside_temperature).state);
          }
          it.graph(20, 60, id(officegraph2));

      - id: page3
        lambda: |-
          it.fill(id(Color::BLACK));
          it.print(0, 60, id(arimo14), TextAlign::TOP_LEFT, "55");
          it.print(0, 105, id(arimo14), TextAlign::CENTER_LEFT, "45");
          it.print(0, 150, id(arimo14), TextAlign::CENTER_LEFT, "35");
          it.print(0, 195, id(arimo14), TextAlign::CENTER_LEFT, "25");
          it.print(0, 240, id(arimo14), TextAlign::BOTTOM_LEFT, "15");
          if (id(outside_temperature).has_state()) {
          it.printf(160, 0, id(arimo48), id(blue),TextAlign::TOP_CENTER, "%.1f °F", id(outside_temperature).state);
          }
          it.graph(20, 60, id(officegraph));

interval:
  - interval: 5s
    then:
      - display.page.show_next: my_display
      - component.update: my_display

Anything in the logs that might be useful for us?

No response

Additional information

No response

Grey-Lancaster commented 10 months ago

I have been messing with this for a couple of days and just got it to work. The image is washed out on it. also. The developer said his did not look like his. Suggested reducing/changing the contrast which I have no clue how

Well it does say no psram. An esp32 wroom does not have it??

[15:31:39][C][light:105]: Default Transition Length: 1.0s [15:31:39][C][light:106]: Gamma Correct: 2.80 [15:31:39][C][homeassistant.time:010]: Home Assistant Time:

[15:31:39][C][psram:021]: Available: NO [15:31:39][C][graph:389]: Graph for sensor outside_temperature

nielsnl68 commented 10 months ago

Then sadly you can have a nice look atm sorry. I am working on a new display_driver class that allows you to send data direct to the display as long you do not use the default draw system (for now). However when you use the (WIP)LVGL component set then you can already make use of direct 565 color system. Now you have 332 colors to chose from.

I'm sorry i did not checked the existence of the PSRAM earlier, that would have been less headache for you and me .

nielsnl68 commented 10 months ago

On thing you could try is making use of the color palette possibility.

Grey-Lancaster commented 10 months ago

Thanks, I have a "normal" CYD due in soon. Will see how it does. So I was googling and it says the esp32 wrooms have psram and then I looked and questioned if I had the right board selected in esphome. My esp32 wrover works well So I dunno, I guess it is just the board because I have tried esphome and https://github.com/rzeldent/esp32-smartdisplay-demo both have lousy images.

Grey

Grey-Lancaster commented 10 months ago

Still waiting on my new board Found a slideshow .ino that works fine does this help

  // Fix image quality for CYD2USB
#ifdef TFT_INVERSION_ON
  tft.writecommand(ILI9341_GAMMASET); //Gamma curve selected
  tft.writedata(2);
  delay(120);
  tft.writecommand(ILI9341_GAMMASET); //Gamma curve selected
  tft.writedata(1);
#endif

Grey-Lancaster commented 10 months ago

Got my "normal" CYD today. This code works (dev mode) but the image is still lousy. I know the board can display images because the slide show example is beautiful.

Anyway to try that TFT_inversion?

https://github.com/witnessmenow/ESP32-Cheap-Yellow-Display/tree/main/Examples/Showcases/1-Slideshow

esphome:
  name: cyd-v1
  friendly_name: CYD_V1

esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "t5/ChNs1LJ1f8aB9xrfku8Vpixfw8GenT1VGZtwW6Lk="

ota:
  password: "3366167611974d3b468d70eae3b5c099"

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Cyd-V1 Fallback Hotspot"
    password: "C3r4clzj8U07"

captive_portal:

time:
  - platform: homeassistant
    id: esptime
sensor:
  - platform: homeassistant
    id: outside_temperature
    entity_id: sensor.office_outside_temp_2
    internal: true

  - platform: homeassistant
    id: inside_temperature
    entity_id: sensor.big_room_temperature
    internal: true

  - platform: homeassistant
    id: nannie_out_temperature
    entity_id: sensor.outdoor_temperature
    internal: true

  - platform: homeassistant
    id: nannie_in_temperature
    entity_id: sensor.indoor_temperature
    internal: true

  - platform: homeassistant
    id: office_temperature
    entity_id: sensor.office_temp
    internal: true

color:
  - id: my_light_red
    hex: FFFF00  #yello
  - id: my_black
    hex: '000000'  # Hex code for black
  - id: white
    hex: ffffff
  - id: blue
    hex: 0000FF    

graph:
  - id: officegraph
    sensor: outside_temperature
    duration: 3h
    width: 220
    height: 180
    x_grid: 30min
    y_grid: 5.0
    max_value: 55.0
    min_value: 15.0
    color: blue
  - id: officegraph2
    sensor: inside_temperature
    duration: 1h
    width: 220
    height: 180
    x_grid: 10min
    y_grid: 5.0
    max_value: 70.0
    min_value: 15.0
    color: blue
font:
  # - file: 'Roboto.ttf'
  #    id: font1
  #    size: 26

  - file:
      type: gfonts
      family: Roboto
      weight: 300
    id: font1
    size: 26    
  - file:
      type: gfonts
      family: Roboto
      weight: 300
    id: font3
    size: 60  
  - file:
      type: gfonts
      family: Roboto
      weight: 900
    id: font4
    size: 36           
  - file: 'Arimo-Regular.ttf'
    id: arimo48
    size: 48
    glyphs: " .,°0123456789CF"
  - file: 'Arimo-Regular.ttf'
    id: arimo14
    size: 14
    glyphs: "0123456789"     
image:
  - file: http://192.168.1.50:8123/local/dad2.PNG
    id: my_image
    resize: 120x120
    type: RGB24

# ============================================================ 
# Home Assistant related setup
#
light:
  - platform: monochromatic
    output: backlight_pwm
    name: Display Backlight
    id: backlight
    restore_mode: ALWAYS_ON

# ============================================================ 
# Hardware related setup
#
# Setup SPI for the display. The ESP32-2432S028R uses separate SPI buses for display and touch
spi:
  - id: tft
    clk_pin: GPIO14
    mosi_pin: GPIO13
    miso_pin: GPIO12
  - id: touch
    clk_pin: GPIO25
    mosi_pin: GPIO32
    miso_pin: GPIO39

# Setup a pin to control the backlight
output:
  - platform: ledc
    pin: GPIO21
    id: backlight_pwm

# Setup the ili9xxx platform
#
# Display is used as 240x320 by default so we rotate it to 90°
display:
  - platform: ili9xxx
    model: ili9341
    spi_id: tft
    cs_pin: GPIO15
    dc_pin: GPIO2
    id: "my_display"   
    dimensions: 240X320
    color_order: RGB
    transform:
       mirror_y: false
       mirror_x: false
       swap_xy: true
    pages:
      - id: page1    
        lambda: |-
          it.fill(id(my_black));   
          it.print(20, 0, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Hello WIZARD!");

          it.print(20, 30, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Time:");
          char buffer[15];
          auto time = id(esptime).now();
          int hour = time.hour % 12; // convert to 12-hour format
          hour = hour ? hour : 12; // handle midnight and noon
          sprintf(buffer, "%d:%02d", hour, time.minute);
          it.print(100, 30, id(font1), id(my_light_red), TextAlign::TOP_LEFT,  buffer);

          it.printf(25, 55, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Inside:");
          it.printf(25, 80, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Outside:");  

          it.printf(2, 155, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Office:");

          if (id(inside_temperature).has_state()) {      
          it.printf(120, 55, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(inside_temperature).state);
          }      
          if (id(outside_temperature).has_state()) {      
          it.printf(130, 80, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(outside_temperature).state);
          } 

          if (id(office_temperature).has_state()) {      
          it.printf(145, 155, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(office_temperature).state);
          } 
          it.image(60, 200, id(my_image)); 
      - id: page2
        lambda: |-

          it.print(20, 15, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Time:");
          char buffer[15];
          auto time = id(esptime).now();
          int hour = time.hour % 12; // convert to 12-hour format
          hour = hour ? hour : 12; // handle midnight and noon
          sprintf(buffer, "%d:%02d", hour, time.minute);
          it.print(20, 30, id(font3), id(my_light_red), TextAlign::TOP_LEFT,  buffer);
          it.printf(25, 100, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Inside:"); 
          if (id(inside_temperature).has_state()) {      
          it.printf(30, 100, id(font3), id(my_light_red), TextAlign::TOP_LEFT, "%.1f°", id(inside_temperature).state);
          it.printf(20, 160, id(font1), id(my_light_red), TextAlign::TOP_LEFT, "Outside:");        
          }             
      - id: page3
        lambda: |-
          it.fill(id(Color::BLACK));
          it.print(0, 60, id(arimo14), TextAlign::TOP_LEFT, "55");
          it.print(0, 105, id(arimo14), TextAlign::CENTER_LEFT, "45");
          it.print(0, 150, id(arimo14), TextAlign::CENTER_LEFT, "35");
          it.print(0, 195, id(arimo14), TextAlign::CENTER_LEFT, "25");
          it.print(0, 240, id(arimo14), TextAlign::BOTTOM_LEFT, "15");
          if (id(outside_temperature).has_state()) {
          it.printf(160, 0, id(arimo48), id(blue),TextAlign::TOP_CENTER, "%.1f °F", id(outside_temperature).state);
          }
          it.graph(20, 60, id(officegraph));

interval:
  - interval: 3s
    then:
      - display.page.show_next: my_display
      - component.update: my_display

nielsnl68 commented 10 months ago

It looks like none of the CYD's has PSRAM onboard sadly. I have also some 3.5" CYD's and those have also no PSRAM on board. so it only works on 8Bit mode using the native Display functions. As soon the LVGL component is ready it will works in 16bit mode.

esphome / issues