Using The Color Kit Grande With ESPHome and HomeAssistant

The Color Kit Grande is more than just a simple starter kit for home automation. This kit, which includes an ESP32, a capacitive touch screen, and options for a LiPo battery and 3D-printed enclosure, provides an incredible foundation for building interactive and portable smart home interfaces. When paired with ESPHome and Home Assistant, the Color Kit Grande can control lights, shutters, and other devices, while also displaying real-time data such as temperature, right on its touchscreen.

In this blog post, we’ll explore how the Color Kit Grande integrates with ESPHome and Home Assistant and walk you through the YAML configuration that powers it.

What is the Color Kit Grande?

The Color Kit Grande includes the following components:

• ESP32: A powerful microcontroller that is Wi-Fi-enabled, providing the backbone for the smart interface.
• Capacitive Touch Screen: A 480×320 ILI9488 display that allows you to control lights and other devices interactively.
• LiPo Battery: An optional battery for untethered operation, ideal for portable or inaccessible locations.
• 3D-Printed Enclosure: A custom enclosure for a sleek, finished look, making it easy to integrate into your home.

With ESPHome, you can configure the Color Kit Grande to interact with Home Assistant, enabling advanced automations, real-time monitoring, and user-friendly control interfaces.

Understanding the YAML Configuration

Let’s break down the ESPHome YAML configuration used to turn the Color Kit Grande into a powerful smart home controller.

Basic Setup: ESPHome, Wi-Fi, and Logging

esphome:
  name: esphome-web-c2e08c
  friendly_name: ESPHome CKG Touch

esp32:
  board: esp32dev
  framework:
    type: arduino

• esphome: Defines the ESPHome device name (esphome-web-c2e08c) and a human-friendly name (ESPHome CKG Touch) to identify it in Home Assistant.
• esp32: Specifies the board type (esp32dev) and the use of the Arduino framework for development.

Wi-Fi Configuration

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

  ap:
    ssid: "Esphome-Web-C2E08C"
    password: "JuciUmZ6f9rL"

• Wi-Fi Setup: Here, the device connects to your home network using your hidden Wi-Fi credentials.
• Fallback Hotspot: In case Wi-Fi is unavailable, the Color Kit Grande will create its own hotspot (Esphome-Web-C2E08C), allowing you to still access it.

Display and Touchscreen Configuration

display:
  - platform: ili9xxx
    id: CKG
    model: ILI9488
    rotation: 180
    cs_pin: 15
    dc_pin: 2
    reset_pin: 4
    dimensions:
      width: 480
      height: 320

touchscreen:
  - platform: ft63x6
    interrupt_pin: 27
    display: CKG
    id: touch
    on_touch:
      - logger.log:
          format: Touch %d at (%d, %d)
          args: [touch.id, touch.x, touch.y]

• Display: The ILI9488 display is configured with a resolution of 480×320, and specific pins (e.g., cs_pin, dc_pin, reset_pin) are assigned to connect the display.
• Touchscreen: The FT63x6 touchscreen driver is used to manage touch interactions. The on_touch event logs the position of each touch, which can later be used for controlling lights or other devices.

Displaying Temperature Data from Home Assistant

sensor:
  - platform: homeassistant
    entity_id: sensor.th_sensor_8a0ab5_lywsd03mmc_mjwsd05mmc_atc_tempc
    id: livingroom_temperature
    on_value:
      - lvgl.label.update:
          id: temp_text
          text:
            format: "Living Room: %.1f"
            args: [ 'x' ]  

• Temperature Sensor: This setup pulls temperature data from Home Assistant (sensor.th_sensor_8a0ab5) and updates the on-screen label with the latest value, displaying the temperature of the living room on the touchscreen.

Lighting Control for Backlight and Home Assistant Lights

output:
  - platform: ledc
    pin: 32
    id: gpio_backlight_pwm

light:
  - platform: monochromatic
    output: gpio_backlight_pwm
    name: "Display Backlight"
    id: back_light
    restore_mode: ALWAYS_ON

• Backlight Control: The backlight of the touchscreen is configured as a monochromatic light. You can control its brightness and on/off state via Home Assistant, making it easy to adjust based on the time of day or device usage.

binary_sensor:
  - platform: homeassistant
    name: "Office Light"
    id: ha_office_light
    entity_id: switch.office
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: office_button
          state:
            checked: !lambda return x;

• Home Assistant Light Control: This snippet syncs the office light switch with the touch interface. If the light state changes, the button on the screen updates to reflect the light’s status (on or off).

Touchscreen Buttons for Controlling Devices

lvgl:
  pages:
    - id: main_page
      widgets:
        - button:
            id: office_button
            height: 100
            width: 140
            x: 10
            y: 20
            align: TOP_LEFT
            checkable: true
            widgets:
            - label:
                align: center
                text: "Office"
            on_short_click:
              - homeassistant.service:
                  service: switch.toggle
                  data:
                    entity_id: switch.office

• Office Button: A touch button on the display labeled “Office” is mapped to the office light. When pressed, it triggers the switch.toggle service in Home Assistant to turn the office light on or off.
• Dining Table Button: Similarly, a button is mapped to the dining table light, allowing for easy control from the touchscreen.

Complete Configuration

You can find the complete yaml file in this repository on Github. There is also another example which shows how to display a watch face.

Conclusion

The Color Kit Grande is a powerful starter kit for those looking to add smart home control and interactivity to their home. With its ESP32-based architecture, capacitive touch screen, and compatibility with ESPHome and Home Assistant, it allows for seamless control over devices such as lights, shutters, and sensors. Together with the LiPo Battery and the 3D printed enclosure it makes a beautiful and independent addition to your home automation

This setup enables you to:

• Control lights and other devices directly from the capacitive touch screen.
• Display real-time data such as temperature from Home Assistant.
• Automate and customize device behavior based on your needs.

With a bit of configuration using ESPHome’s YAML file, the Color Kit Grande can transform your home automation system, making it more intuitive, portable, and efficient.