Ili9341 couleurs RVB inversées

Bonjour,
sur ESPHome + ili9341, j’ai un problème sur les couleurs qui sont inversées en RVB
Voici la configuration

esphome:
  name: esp-affichage
  friendly_name: esp-affichage  
  
esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "X3tSsqsyHPK2e3KyiHHxgjgLQdDPPKAJYCf8b/JWLjo="

ota:
  password: "080de7bf5f81b03b41384214726ecc00"

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

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Esp-Affichage Fallback Hotspot"
    password: "Thj37Xq8iNsN"

captive_portal:
    # Example configuration entry

web_server:
  port: 80

psram:
  mode: octal
  speed: 80MHz

spi:
  clk_pin: GPIO18 # (Pin on display - SCK/T_CLK)
  mosi_pin: GPIO23 # (Pin on display - SDI(MOSI)/T_DIN)
  miso_pin: GPIO19 # (Pin on display - SDO(MISO)/T_DO)



display:
  - platform: ili9xxx  
    model: ili9341    

    rotation: 0
    cs_pin: GPIO15  # Broche CS (Chip Select)
    dc_pin: GPIO05  # Broche DC (Data/Command)
    reset_pin: GPIO04  # Broche de réinitialisation    
    dimensions: 320x240
    update_interval: 1s

Pour mes couleurs je suis obligé d’inverser

color:
  - id: my_red
    red: 0%
    green: 0%
    blue: 100%
  - id: my_green
    red: 0%
    green: 100%
    blue: 0%
  - id: my_blue
    red: 100%
    green: 0%
    blue: 0%
  - id: my_yellow
    red: 0%
    green: 100%
    blue: 100%
  - id: my_white
    red: 100%
    green: 100%
    blue: 100%
  - id: my_black
    red: 0%
    green: 0%
    blue: 0%
  - id: my_orange
    red_int: 0
    green_int: 50
    blue_int: 255
    white_int: 0

Donc impossible de mettre de belles icône et/ou de petites images
Le rouge devient bleu etc

Ai-je fais une erreur de câblage sur GPO ou est-ce un problème de configuration YAML ?

Merci de tout cœur pour votre aide

Bonjour, tu n’as pas une inversion dans ton code entre le bleu (my_blue) et rouge (my_red)

MY red devrait pas plutot etre RED à 100% ?
My blue devrait pas plutot etre blue à 100% ?

2 « J'aime »

Bonjour,
Tu peux aussi simplifier l’écriture avec :

  - id: my_orange
    hex: FF8100

  - id: my_vert
    hex: C2F907

  - id: my_bleu
    hex: 03a9f4

Bob

Oui je le sais, mais pour avoir du rouge, je suis obligé de mettre

- id: my_red
    red: 0%
    green: 0%
    blue: 100%

Le Blanc et noir sont ok, je dois tricher pour faire les autres couleurs

j’ai trouvé, il faut mettre

color_order: rgb

Tout se règle avec cette instruction

Reste le problème des accents et apostrophe
Je progresse petit à petit sur ce projet

Pour les accents je n’ai pas de souci, voici la déclaration de la police:

  - file: "fonts/arial-1.ttf"
    id: my_font12
    size: 12
    glyphs: "<>♡ÆØÅæøå!'%(){}+,-_.:;*=°?~#0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéèfghijklmnopqrstuvwxyzôç"

Pour les symboles :

  - file: "fonts/materialdesignicons-webfont.ttf"
    id: material30
    size: 58
    glyphs: 
      - "\U000F0769" # mdi:ceiling-light
      - "\U000F17C7" # mdi:ceiling-light-outline
      - "\U000F08DD" # mdi:floor-lamp
      - "\U000F17C8" # mdi:floor-lamp-outline
      - "\U000F06B5" # mdi:mdi:lamp
      - "\U000F17D0" # mdi:mdi:lamp-outline
      - "\U000F0335" # mdi:lightbulb
      - "\U000F0336" # mdi:lightbulb-outline
      - "\U000F0731" # mdi:arrow-left-bold
      - "\U000F0734" # mdi:arrow-right-bold
      - "\U000F1051" # mdi:led-strip-variant
      - "\U000F1A4B" # mdi:led-strip-variant-off
      - "\U000F0521" # mdi:toggle-switch
      - "\U000F0A19" # mdi:toggle-switch-off-outline
      - "\U000F032A" # mdi:leaf
      - "\U000F04B9" # mdi:sofa
      - "\U000F0717" # mdi:snowflake
      - "\U000F0A48" # mdi:exit-run
      - "\U000F0238" # mdi:fire
      - "\U000F0594" # mdi:weather-night
      - "\U000F0827" # mdi:home-heart

Bob

1 « J'aime »

Si cela peut t’aider, code ESPHome pour un ILI9341 avec tactile et 4 pages :

esphome:
  name: esp32displaytouch
  friendly_name: Esp32 9341 touch

esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "UD6gWnftSqqILNKrKxxxxxx+oyu0epgLWf3c8sw+4KY="

ota:
  password: "8ce94a8e33f9d3xxxxxx351d3f7278e1"

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password
  manual_ip:
    static_ip: 192.168.1.28
    gateway: 192.168.1.254
    subnet: 255.255.255.0

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Esp32Displaytouch"
    password: "HXXXXXXqiHVD"

captive_portal:

#psram:
#  mode: octal
#  speed: 80MHz
  
spi:
  clk_pin: GPIO18
  mosi_pin: GPIO23
  miso_pin: GPIO19
    
sensor:
  - platform: homeassistant
    id: current_temperature_salon
    entity_id: sensor.new_temp_regul_chauffage
  - platform: homeassistant
    id: current_humidite_salon
    entity_id: sensor.psalon_humidite
  - platform: homeassistant
    id: current_temperature_ext
    entity_id: sensor.temperature_ext
  - platform: homeassistant
    id: current_temperature_chambre
    entity_id: sensor.temperature_23_chambre
  - platform: homeassistant
    id: current_temperature_garage
    entity_id: sensor.temperature_garage
  - platform: homeassistant
    id: target_temperature_sejour
    entity_id: climate.sejour
    attribute: temperature

# Example configuration entry 
time:
  - platform: homeassistant
    id: homeassistant_time

text_sensor:  
  - platform: homeassistant
    id: preset_mode_sejour
    entity_id: climate.sejour
    attribute: preset_mode

  - platform: homeassistant
    id: hvac_action_sejour
    entity_id: climate.sejour
    attribute: hvac_action

  - platform: homeassistant
    id: presence_bob
    entity_id: device_tracker.iphone_x2a
  

#Déclarer ici les entitées qui seront utilisées sur conditions dans les pages
binary_sensor: 
  - platform: homeassistant
    id: lampe_marine
    entity_id: light.lampe_marine
    internal: true
  - platform: homeassistant
    id: lampe_cuisine
    entity_id: light.cuisine
    internal: true
  - platform: homeassistant
    id: lampe_plante
    entity_id: light.salon_plante_10
    internal: true
  - platform: homeassistant
    id: light_salon
    entity_id: light.light_salon
    internal: true
  - platform: homeassistant
    id: light_mezzanine
    entity_id: light.light_mezzanine
    internal: true
  - platform: homeassistant
    id: lampe_salon
    entity_id: light.lampe_salon
    internal: true
  - platform: homeassistant
    id: lampe_ampli
    entity_id: light.lampe_ampli
    internal: true    
  - platform: homeassistant
    id: salon_escalier_11
    entity_id: light.salon_escalier_11
    internal: true 
  - platform: homeassistant
    id: ruban_led_color_light_21
    entity_id: light.ruban_led_color_light_21
    internal: true  
  #Cet input_boolean est utilisé pour passer en mode away mon chauffage quand je sors d'une zone de 100km de mon domicile
  - platform: homeassistant
    id: intchauffage
    entity_id: input_boolean.intchauffage
    internal: true   
  - platform: homeassistant
    id: prise_chaudiere
    entity_id: switch.on_off_plug_in_unit_3_chaudiere 
    internal: true 
  - platform: homeassistant
    id: prise_chambre
    entity_id: switch.on_off_plug_in_unit_15
    internal: true 

  - platform: touchscreen
    id: touch_key1
    name: Zone 1
    x_min: 0
    x_max: 79
    y_min: 0
    y_max: 79
    #Pour définir que cette zone est active uniquement sur la page 1
    page_id: page2
    #on_press:
    #- logger.log: "Key0 was touched"
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key1
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.cuisine

  - platform: touchscreen
    id: touch_key2
    name: Zone 2
    x_min: 82
    x_max: 159
    y_min: 0
    y_max: 79
    page_id: page2
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key2
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.light_salon

  - platform: touchscreen
    id: touch_key3
    name: Zone 3
    x_min: 162
    x_max: 239
    y_min: 0
    y_max: 69
    page_id: page2
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key3
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.light_mezzanine

  - platform: touchscreen
    id: touch_key4
    name: Zone 4
    x_min: 0
    x_max: 79
    y_min: 82
    y_max: 159
    page_id: page2
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key4
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.lampe_marine

  - platform: touchscreen
    id: touch_key5
    name: Zone 5
    x_min: 82
    x_max: 159
    y_min: 82
    y_max: 159
    page_id: page2
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key5
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.lampe_salon

  - platform: touchscreen
    id: touch_key6
    name: Zone 6
    x_min: 162
    x_max: 239
    y_min: 82
    y_max: 159
    page_id: page2
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key6
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.lampe_ampli

  - platform: touchscreen
    id: touch_key7
    name: Zone 7
    x_min: 0
    x_max: 79
    y_min: 162
    y_max: 239
    page_id: page2
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key7
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.salon_plante_10

  - platform: touchscreen
    id: touch_key8
    name: Zone 8
    x_min: 82
    x_max: 159
    y_min: 162
    y_max: 239
    page_id: page2
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key8
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.salon_escalier_11

  - platform: touchscreen
    id: touch_key9
    name: Zone 9
    x_min: 162
    x_max: 239
    y_min: 162
    y_max: 239
    page_id: page2
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key9
        then: 
        - homeassistant.service:
            service: light.toggle
            data: 
              entity_id: light.ruban_led_color_light_21

  - platform: touchscreen
    id: touch_key10
    x_min: 0
    x_max: 79
    y_min: 242
    y_max: 319
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key10
        then: 
        - display.page.show_previous: my_display 

  - platform: touchscreen
    id: touch_key11
    x_min: 182
    x_max: 239
    y_min: 242
    y_max: 319
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key11
        then: 
        - display.page.show_next: my_display  

  - platform: touchscreen
    id: touch_key1d
    name: Zone 1d
    x_min: 0
    x_max: 79
    y_min: 0
    y_max: 79
    page_id: page3
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key1d
        then: 
        - homeassistant.service:
            service: climate.set_preset_mode
            data: 
              entity_id: climate.sejour
              preset_mode: away

  - platform: touchscreen
    id: touch_key2d
    name: Zone 2d
    x_min: 82
    x_max: 159
    y_min: 0
    y_max: 79
    page_id: page3
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key2d
        then: 
        - homeassistant.service:
            service: climate.set_preset_mode
            data: 
              entity_id: climate.sejour
              preset_mode: sleep

  - platform: touchscreen
    id: touch_key3d
    name: Zone 3d
    x_min: 162
    x_max: 239
    y_min: 0
    y_max: 69
    page_id: page3
    on_press:
    - logger.log: "Bruno"
    - logger.log:
        format: "Situation chauffage  %s and consigne %.1f"
        args: [ 'id(preset_mode_sejour).state.c_str()', 'id(target_temperature_sejour).state' ]
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key3d
        then: 
        - homeassistant.service:
            service: climate.set_preset_mode
            data: 
              entity_id: climate.sejour
              preset_mode: eco



  - platform: touchscreen
    id: touch_key6d
    name: Zone 6d
    x_min: 162
    x_max: 239
    y_min: 82
    y_max: 159
    page_id: page3
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key6d
        then: 
        - homeassistant.service:
            service: input_boolean.toggle
            data: 
              entity_id: input_boolean.intchauffage

  - platform: touchscreen
    id: touch_key4d
    name: Zone 4d
    x_min: 0
    x_max: 79
    y_min: 82
    y_max: 159
    page_id: page3
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key4d
        then: 
        - homeassistant.service:
            service: climate.set_preset_mode
            data: 
              entity_id: climate.sejour
              preset_mode: home

  - platform: touchscreen
    id: touch_key5d
    name: Zone 5d
    x_min: 82
    x_max: 159
    y_min: 82
    y_max: 159
    page_id: page3
    on_state: 
      if: 
        condition: 
          binary_sensor.is_on: touch_key5d
        then: 
        - homeassistant.service:
            service: climate.set_preset_mode
            data: 
              entity_id: climate.sejour
              preset_mode: comfort

font:
  - file: "fonts/arial-1.ttf"
    id: my_font
    size: 16
    glyphs: "<>♡ÆØÅæøå!'%(){}+,-_.:;*=°?~#0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéfghijklmnopqrstuvwxyzôç"
  
  - file: "fonts/arial-1.ttf"
    id: my_font11
    size: 11
    glyphs: "<>♡ÆØÅæøå!'%(){}+,-_.:;*=°?~#0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéfghijklmnopqrstuvwxyzôç"

  - file: "fonts/arial-1.ttf"
    id: my_font12
    size: 12
    glyphs: "<>♡ÆØÅæøå!'%(){}+,-_.:;*=°?~#0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéèfghijklmnopqrstuvwxyzôç"

  - file: "fonts/arial-1.ttf"
    id: my_font20
    size: 20
    glyphs: "<>♡ÆØÅæøå!'%(){}+,-_.:;*=°?~#0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéfghijklmnopqrstuvwxyzôç"

  - file: "fonts/arial-1.ttf"
    id: my_font18
    size: 18
    glyphs: "<>♡ÆØÅæøå!'%(){}+,-_.:;*=°?~#0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéfghijklmnopqrstuvwxyzôç"

  - file: "fonts/comic-sans-ms.ttf"
    id: my_font2
    size: 18
    glyphs: "<>♡ÆØÅæøå!'%(){}+,-_.:;*=°?~#0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdeéfghijklmnopqrstuvwxyzôç"

  #https://pictogrammers.com/library/mdi/ copier depuis le site
  #https://forum.hacf.fr/t/besoin-daide-avec-les-glyphs-et-les-fonts/26543
  #https://github.com/Templarian/MaterialDesign-Webfont/blob/master/fonts/materialdesignicons-webfont.ttf

  - file: "fonts/materialdesignicons-webfont.ttf"
    id: material30
    size: 58
    glyphs: 
      - "\U000F0769" # mdi:ceiling-light
      - "\U000F17C7" # mdi:ceiling-light-outline
      - "\U000F08DD" # mdi:floor-lamp
      - "\U000F17C8" # mdi:floor-lamp-outline
      - "\U000F06B5" # mdi:mdi:lamp
      - "\U000F17D0" # mdi:mdi:lamp-outline
      - "\U000F0335" # mdi:lightbulb
      - "\U000F0336" # mdi:lightbulb-outline
      - "\U000F0731" # mdi:arrow-left-bold
      - "\U000F0734" # mdi:arrow-right-bold
      - "\U000F1051" # mdi:led-strip-variant
      - "\U000F1A4B" # mdi:led-strip-variant-off
      - "\U000F0521" # mdi:toggle-switch
      - "\U000F0A19" # mdi:toggle-switch-off-outline
      - "\U000F032A" # mdi:leaf
      - "\U000F04B9" # mdi:sofa
      - "\U000F0717" # mdi:snowflake
      - "\U000F0A48" # mdi:exit-run
      - "\U000F0238" # mdi:fire
      - "\U000F0594" # mdi:weather-night
      - "\U000F0827" # mdi:home-heart

  - file: "fonts/materialdesignicons-webfont.ttf"
    id: material28
    size: 28
    glyphs: 
      - "\U000F1A80" # mdi:thermometer-water
      - "\U000F050F" # mdi:thermometer
      - "\U000F058E" # mdi:water-percent


# Define a PWM output on the ESP32
output:
  - platform: ledc
    pin: 32
    id: gpio_32_backlight_pwm

# Define a monochromatic, dimmable light for the backlight
light:
  - platform: monochromatic
    output: gpio_32_backlight_pwm
    name: "Display Backlight"
    id: back_light
    restore_mode: ALWAYS_ON

switch:
  - platform: gpio
    name: "LedBleu2"
    pin: 2
    
display:
  - platform: ili9xxx
    #model: ili9488
    model: ili9341
    cs_pin: GPIO15
    dc_pin: GPIO05
    reset_pin: GPIO4
    rotation: 180
    #auto_clear_enabled: false
    update_interval: 1s
    id: my_display

  #A insérer dans une page pour un quadrillage  
  #it.line( 80,   0,  80, 319);
  #it.line(160,   0, 160, 319);
  #it.line(  0,  80, 239,  80);
  #it.line(  0, 160, 239, 160);
  #it.line(  0, 240, 239, 240);

    pages:

      - id: page1
        lambda: |-
          auto white = Color(255, 255, 255);
          auto grey = Color(77, 77, 76);
          it.rectangle(0,  0, it.get_width(), it.get_height());
          it.print(5, 3, id(my_font18), my_red, TextAlign::LEFT, "By Bob : ");
          it.strftime(118, 9, id(my_font12), "%d-%m-%Y %H:%M:%S", id(homeassistant_time).now());

          it.print(5, 30, id(my_font18), "Temp Salon :");
          it.printf(146, 30, id(my_font18), my_yellow, "%.1f °C", id(current_temperature_salon).state);
          it.print(5, 56, id(my_font18), "Temp Ext :");
          it.printf(146, 56, id(my_font18), my_yellow, "%.1f °C", id(current_temperature_ext).state);
          it.print(5, 82, id(my_font18), "Temp Chambre :");
          it.printf(146, 82, id(my_font18), my_yellow, "%.1f °C", id(current_temperature_chambre).state);
          it.print(5, 108, id(my_font18), "Temp Garage :");
          it.printf(146, 108, id(my_font18), my_yellow, "%.1f °C", id(current_temperature_garage).state);
          it.print(5, 134, id(my_font18), "Consigne T °C:");
          it.printf(146, 134, id(my_font18), my_yellow, "%.1f °C", id(target_temperature_sejour).state);
          it.print(5, 160, id(my_font18), "Humidité :");
          it.printf(146, 160, id(my_font18), my_yellow, "%.0f Pct",  id(current_humidite_salon).state);
          
          it.print(5, 186, id(my_font18), "Prise Gaz. :");
          if (id(prise_chaudiere).state) {
            it.printf(146, 186, id(my_font18), my_orange, "Allumée");
          } else {
            it.printf(146, 186, id(my_font18), my_blue, "Eteinte");
          }

          it.print(5, 212, id(my_font18), "Prise Chamb. :");
          if (id(prise_chambre).state) {
            it.printf(146, 212, id(my_font18), my_orange,"Allumée");
          } else {
            it.printf(146, 212, id(my_font18), my_blue, "Eteinte");
          }

          it.rectangle(4, 246, 70, 70, grey);
          it.print(10, 250, id(material30), my_green, "\U000F0731");
          it.print(80,246, id(material28), my_blue, "\U000F050F");
          it.printf(104, 256, id(my_font), my_white, "%.1f °C", id(current_temperature_salon).state);
          it.print(80,282, id(material28), my_blue, "\U000F058E");
          it.printf(104, 290, id(my_font), my_white, "%.0f Pct", id(current_humidite_salon).state);
          it.rectangle(165, 246, 70, 70, grey);
          it.print(172, 250, id(material30), my_green, "\U000F0734");

      - id: page2
        lambda: |-
          it.rectangle(0,  0, it.get_width(), it.get_height());
          auto red = Color(255, 0, 0);
          auto white = Color(255, 255, 255);
          auto yellow = Color(255, 255, 0);
          auto blue = Color(0, 0, 255);
          auto green = Color(0, 255, 0);
          auto grey = Color(77, 77, 76);

          it.rectangle(4, 4, 72, 72, grey);
          it.print(20, 5, id(my_font12), my_white, "Cuisine");
          if (id(lampe_cuisine).state) {
            it.print(10, 14, id(material30), my_orange, "\U000F0769"); 
          } else{
            it.print(10, 14, id(material30), my_blue, "\U000F17C7");
          }
          
          it.rectangle(84, 4, 72, 72, grey);
          it.print(102, 5, id(my_font12), my_white, "Salon");
          if (id(light_salon).state) {
            it.print(90, 14, id(material30), my_orange, "\U000F0769");
          } else{
            it.print(90, 14, id(material30), my_blue, "\U000F17C7");
          }

          it.rectangle(164, 4, 72, 72, grey);
          it.print(172, 5, id(my_font12), my_white, "Mezzanine");
          if (id(light_mezzanine).state) {
            it.print(170, 14, id(material30), my_orange, "\U000F0769");
          } else{
            it.print(170, 14, id(material30), my_blue, "\U000F17C7");
          }

          it.rectangle(4, 84, 72, 72, grey);
          it.print(22, 86, id(my_font12), my_white, "Marine");
          if (id(lampe_marine).state) {
             it.print(10, 94, id(material30), my_orange, "\U000F08DD");
          } else{
             it.print(10, 94, id(material30), my_blue, "\U000F17C8");
          }

          it.rectangle(84, 84, 72, 72, grey);
          it.print(102, 86, id(my_font12), my_white, "Salon");
          if (id(lampe_salon).state) {
             it.print(90, 94, id(material30), my_orange, "\U000F06B5");
          } else{
             it.print(90, 94, id(material30), my_blue, "\U000F17D0");
          }

          it.rectangle(164, 84, 72, 72, grey);
          it.print(184, 86, id(my_font12), my_white, "Ampli");
          if (id(lampe_ampli).state) {
             it.print(170, 94, id(material30), my_orange, "\U000F06B5");
          } else{
             it.print(170, 94, id(material30), my_blue, "\U000F17D0");
          }

          it.rectangle(4, 164, 72, 72, grey);
          it.print(22, 166, id(my_font12), my_white, "Plante");
          if (id(lampe_plante).state) {
             it.print(10, 176, id(material30), my_orange, "\U000F06B5");
          } else{
             it.print(10, 176, id(material30), my_blue, "\U000F17D0");
          }

          it.rectangle(84, 164, 72, 72, grey);
          it.print(96, 166, id(my_font12), my_white, "Escalier");
          if (id(salon_escalier_11).state) {
            it.print(90, 176, id(material30), my_orange, "\U000F06B5");
          } else{
            it.print(90, 176, id(material30), my_blue, "\U000F17D0");
          }

          it.rectangle(164, 164, 72, 72, grey);
          it.print(170, 166, id(my_font12), my_white, "Ruban Led");
          if (id(ruban_led_color_light_21).state) {
             it.print(170, 176, id(material30), my_orange, "\U000F1051");
          } else{
             it.print(170, 176, id(material30), my_blue, "\U000F1A4B");
          }
          
          it.rectangle(4, 244, 72, 72, grey);
          it.print(10, 250, id(material30), my_green, "\U000F0731");
          it.print(80,246, id(material28), my_blue, "\U000F050F");
          it.printf(104, 256, id(my_font), my_white, "%.1f °C", id(current_temperature_salon).state);
          it.print(80,282, id(material28), my_blue, "\U000F058E");
          it.printf(104, 290, id(my_font), my_white, "%.0f Pct", id(current_humidite_salon).state);
          it.rectangle(164, 244, 72, 72, grey);
          it.print(172, 250, id(material30), my_green, "\U000F0734");

#if (id(touchid).touched)
#it.print(165, 70, id(my_font20), "Touche :");

      - id: page3
        lambda: |-
          auto red = Color(255, 0, 0);
          auto green = Color(0, 255, 0);
          auto blue = Color(0, 0, 255);
          auto yellow = Color(255, 255, 0);
          auto white = Color(255, 255, 255);
          auto grey = Color(77, 77, 76);
          it.rectangle(0,  0, it.get_width(), it.get_height());
 
          it.rectangle(4, 4, 72, 72, grey);
          it.print(26, 5, id(my_font12), my_white, "Away");
          if (id(preset_mode_sejour).state == "away") {
            it.printf(52, 60, id(my_font12), my_white, "%.1f", id(target_temperature_sejour).state);
            it.print(10, 14, id(material30), my_orange, "\U000F0A48"); 
          } else{
            it.print(10, 14, id(material30), my_blue, "\U000F0A48");
          }
          
          it.rectangle(84, 4, 72, 72, grey);
          it.print(112, 5, id(my_font12), my_white, "Nuit");
          if (id(preset_mode_sejour).state == "sleep") {
            it.printf(128, 60, id(my_font12), my_white, "%.1f", id(target_temperature_sejour).state);
            it.print(90, 14, id(material30), my_orange, "\U000F0594");
          } else{
            it.print(90, 14, id(material30), my_blue, "\U000F0594");
          }

          it.rectangle(164, 4, 72, 72, grey);
          it.print(190, 5, id(my_font12), my_white, "Eco");
          if (id(preset_mode_sejour).state == "eco") {
            it.print(170, 14, id(material30), my_orange, "\U000F032A");
            it.printf(206, 60, id(my_font12), my_white, "%.1f", id(target_temperature_sejour).state);
          } else{
            it.print(170, 14, id(material30), my_blue, "\U000F032A");
          }

          it.rectangle(4, 84, 72, 72, grey);
          it.print(18, 86, id(my_font12), my_white, "Présent");
          if (id(preset_mode_sejour).state == "home") {
             it.print(10, 94, id(material30), my_orange, "\U000F0827");
             it.printf(52, 142, id(my_font12), my_white, "%.1f", id(target_temperature_sejour).state);             
          } else{
             it.print(10, 94, id(material30), my_blue, "\U000F0827");
          }

          it.rectangle(84, 84, 72, 72, grey);
          it.print(96, 86, id(my_font12), my_white, "Confort");
          if (id(preset_mode_sejour).state == "comfort") {
             it.print(90, 94, id(material30), my_orange, "\U000F04B9");
             it.printf(128, 142, id(my_font12), my_white, "%.1f", id(target_temperature_sejour).state);
          } else{
             it.print(90, 94, id(material30), my_blue, "\U000F04B9");
          }

          it.rectangle(164, 84, 72, 72, grey);
          it.print(174, 86, id(my_font12), my_white, "Int Chauf.");
          if (id(intchauffage).state) {
             it.print(170, 94, id(material30), my_orange, "\U000F0521");
          } else{
             it.print(170, 94, id(material30), my_blue, "\U000F0521");
          }

          it.print(5, 162, id(my_font18), "Mode Chauf. :");
          it.printf(130, 162, id(my_font18), my_yellow, "%s",  id(preset_mode_sejour).state.c_str());

          it.print(5, 184, id(my_font18), "Etat :");
          if (id(hvac_action_sejour).state == "heating") {
            it.printf(130, 184, id(my_font18), my_orange, "En Chauffe");
          } else {
            it.printf(130, 184, id(my_font18), my_blue, "En Pause");
          }

          it.print(5, 206, id(my_font18), "Présence :");
          it.printf(130, 206, id(my_font18), my_yellow, "%s",  id(presence_bob).state.c_str());

          it.rectangle(4, 246, 70, 70, grey);
          it.print(10, 250, id(material30), my_green, "\U000F0731");
          it.print(80,246, id(material28), my_blue, "\U000F050F");
          it.printf(104, 256, id(my_font), my_white, "%.1f °C", id(current_temperature_salon).state);
          it.print(80,282, id(material28), my_blue, "\U000F058E");
          it.printf(104, 290, id(my_font), my_white, "%.0f Pct", id(current_humidite_salon).state);
          it.rectangle(165, 246, 70, 70, grey);
          it.print(172, 250, id(material30), my_green, "\U000F0734");


      - id: page4
        lambda: |-
          auto red = Color(255, 0, 0);
          auto green = Color(0, 255, 0);
          auto blue = Color(0, 0, 255);
          auto white = Color(255, 255, 255);
          auto grey = Color(77, 77, 76);
          // Draw a line from [0,0] to [100,50]
          //it.line(0, 0, 100, 50);
          // Draw the outline of a rectangle with the top left at [50,60], a width of 30 and a height of 42
          it.rectangle(0, 0, 119, 109, white);
          it.rectangle(0, 111, 119, 109, red);
          it.rectangle(121, 0, 119, 109, green);
          it.rectangle(121, 111, 119, 109, blue);
          // Draw the same rectangle, but this time filled.
          //it.filled_rectangle(150, 160, 130, 142);

          // Circles! Let's draw one with the center at [25,25] and a radius of 10
          //it.circle(25, 25, 10);
          // ... and the same thing filled again
          //it.filled_circle(25, 25, 10);
          it.print(5, 7, id(my_font18), "Présence :");
          it.printf(5, 37, id(my_font12), my_yellow, "%s",  id(presence_bob).state.c_str());
          it.printf(5, 124, id(my_font18), "Temp salon :");
          it.printf(5, 152, id(my_font18), "%.1f °C", id(current_temperature_salon).state);
          it.printf(126, 7, id(my_font18), "Temp Ext :");
          it.printf(126, 37, id(my_font18), "%.1f °C", id(current_temperature_ext).state);
          it.printf(126, 124, id(my_font18), "Temp garage :");
          it.printf(126, 152, id(my_font18), "%.1f °C", id(current_temperature_garage).state);
          it.rectangle(4, 246, 70, 70, grey);
          it.print(10, 250, id(material30), my_green, "\U000F0731");
          it.print(80,246, id(material28), my_blue, "\U000F050F");
          it.printf(104, 256, id(my_font), my_white, "%.1f °C", id(current_temperature_salon).state);
          it.print(80,282, id(material28), my_blue, "\U000F058E");
          it.printf(104, 290, id(my_font), my_white, "%.0f Pct", id(current_humidite_salon).state);
          it.rectangle(165, 246, 70, 70, grey);
          it.print(172, 250, id(material30), my_green, "\U000F0734");



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


touchscreen:
  platform: xpt2046
  transform:
      mirror_x: false
      mirror_y: true
      swap_xy: false
  id: touchid
  cs_pin: 14
  interrupt_pin: 27
  update_interval: 500ms
  threshold: 400
  #calibration_x_min: 3780
  #calibration_x_max: 280
  #calibration_y_min: 290
  #calibration_y_max: 3870

  calibration_x_min: 280
  calibration_x_max: 3780
  calibration_y_min: 3870
  calibration_y_max: 290

color:
  - id: my_red
    red: 100%
    green: 0%
    blue: 0%

  - id: my_green
    red: 0%
    green: 100%
    blue: 0%

  - id: my_blue
    red: 0%
    green: 0%
    blue: 100%

  - id: my_yellow
    red: 100%
    green: 100%
    blue: 0%

  - id: my_white
    red: 100%
    green: 100%
    blue: 100%

  - id: my_orange
    hex: FF8100

  - id: my_vert
    hex: C2F907

  - id: my_bleu
    hex: 03a9f4

# Example configuration entry
web_server:
  port: 80   

Bob