JC3248W535 (Guition 3.5”) Config

ESPHome
1

Just wanted to share a basic working config for this device (JC3248W535) :slight_smile:

FYI much of this config is derived from here and I am only creating my own thread in the spirit of sharing the most minimal config possible for each device that I have on-hand.

Note: ESPHome 2024-11.0 (currently in dev) is probably required to use this config.

Heads-up: I try to keep the configs in these posts updated but sometimes the configs in my repo are more up-to-date!

Here are the device-specific bits of the config separated out from everything else:

esphome:
  platformio_options:
    upload_speed: 921600
    board_build.flash_mode: dio
    board_build.f_flash: 80000000L
    board_build.f_cpu: 240000000L

esp32:
  board: esp32-s3-devkitc-1
  flash_size: 16MB
  framework:
    type: esp-idf
    sdkconfig_options:
      CONFIG_ESP32S3_DEFAULT_CPU_FREQ_240: y
      CONFIG_ESP32S3_DATA_CACHE_64KB: y
      CONFIG_ESP32S3_DATA_CACHE_LINE_64B: y
      CONFIG_SPIRAM_FETCH_INSTRUCTIONS: y
      CONFIG_SPIRAM_RODATA: y

psram:
  mode: octal
  speed: 80MHz # 120MHz is not supported and falls back to 40MHz

spi:
  - type: quad
    clk_pin: 47
    data_pins: [21, 48, 40, 39]

i2c:
  - sda: 4
    scl: 8

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

light:
  - id: backlight
    name: Backlight
    platform: monochromatic
    output: gpio_backlight_pwm
    restore_mode: ALWAYS_ON

display:
  - id: main_display
    platform: qspi_dbi
    dimensions:
      height: 480
      width: 320
    model: CUSTOM
    data_rate: 40MHz
    cs_pin:
      number: 45
      ignore_strapping_warning: true
    draw_from_origin: true
    update_interval: never
    auto_clear_enabled: false

touchscreen:
  - id: main_touchscreen
    platform: axs15231
    # on_touch:
    #   - lambda: |-
    #         ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
    #           touch.x,
    #           touch.y,
    #           touch.x_raw,
    #           touch.y_raw
    #         );

I like to keep device-specific code like that its own file separate from everything else so that I can use the Packages component to import it into multiple relevant projects, rather than duplicate the whole thing into each one. In my case I save it into a file called templates/JC3248W535.yaml.

In the spirit of not duplicating code into multiple projects, I create another file that is not device-specific but is common/repetitive among all my projects. In my case I chose to call it templates/common.yaml and it has code like so:

esphome:
  name: "${device_name}"
  friendly_name: "${friendly_name}"

logger:
  level: INFO

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

web_server:
  port: 80

ota:
  - platform: esphome

api:

Finally, this is how I use both of the above files together in a project:

substitutions:
  device_name: guition-35-test-device
  friendly_name: Guition 3.5 Test Device

packages:
  common: !include templates/common.yaml
  device: !include templates/JC3248W535.yaml
  # dashboard: !include templates/dashboard_480x320.yaml

#sensor: ...

Note: The contents of the dashboard package referenced above aren’t in this post but I have it in the example to illustrate the power of setting up a config this way. In my case templates/dashboard_480x320.yaml is a file that I’ve created with HA sensors and LVGL pages in it, and it can be reused on any of my devices that support the same resolution as this one.

Concerns / Potential Improvements

  • TBD

More in my GitHub repo

2 Likes
2

That is nice! I will eventually start using the packages component, it does make things much cleaner.

How do you edit your ESPhome files? I just started using VS code and enjoying it so far. I’m compiling and installing them with the run command from separate terminal.

1 Like
3

Thanks!

I run ESPHome in Docker on a linux machine so I use VS Code with the Remote SSH plugin to edit my layouts and I usually just go back to the ESPHome dashboard in a browser to update devices, but sometimes I update from VS Code directly (either a task I setup or from the built-in terminal).

The task I have setup, if curious, is this:
.vscode/tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build and Flash",
            "type": "shell",
            "command": "docker compose exec esphome esphome run --device OTA --no-logs ${fileBasename}",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

This allows me to press CTRL+SHIFT+B while in a config and VSCode will run docker compose exec esphome esphome run --device OTA --no-logs ${fileBasename} for me. esphome is the name of the ESPHome service in my docker-compose.yaml which is why it shows up twice in the command.

1 Like
4

Thank you! Did anyone managed to get the speaker the work with ESPHome? It works with the demo program that the Chinese sellers put on these devices, but there is no info about which IO it’s connected to.