tessera

Features Wishlist

YAML override cells and look

govidoSuggested this wish ·

What would you like to add

I tested the new jc3248w535 board, which works great. But I wanted to get rid of the wasted space on the small screen on the edges, but there is currently no way to change the standard.yaml to the compact.yaml as it will create duplicate errors when the package gets added in override yaml. Same for the cells 4.yaml if you want to try 6 instead of 4 tiles. Can the logic be changed to substitutions that load the individual packages? These can be overwritten easily. That way advanced users can create compact dashboards with different sizes and compacter layouts.

In my case I want to use the screen on my office desk, for this the text can be smaller and I want to use more buttons, like a little stream deck, but for HA stuff.

I created a local file with compact view and 6 tiles which works great, but I would like to use the offical config with tweaks available if needed in the override, like DPI, rows, columns, compact or standard and different amount of cells.

How this relates to Home Assistant

Make buttons larger and smaller for HA control from walls at a distance or get more details when used up close on a desk. Not only depending on fixed display hardware alone, but the actual use case, if needed.

Pictures, mockups, or examples

Image

The editor updates fine, but the screen won't show more than 4 tiles on one page, as the 4.yaml is hardcoded.

current yaml override

substitutions:
  GRID_COLS: "3"
  GRID_ROWS: "2"
  DISPLAY_DPI: "130"

Before submitting

  • I searched the existing issues and this has not already been requested

Discussion 2

Add a comment
MaxGramser

Thanks for trying the JC3248W535 and for the clear write-up. You can do this today from the screen's Override YAML, without a copy of the whole package.

Why adding looks/compact.yaml or cells/6.yaml fails: ESPHome joins the lists of every package, so a second look or cells file brings the same fonts and cards a second time, with the same ids. The board file already includes standard.yaml and cells/4.yaml, and an override can't take a package away. What an override can do is set substitutions and add widgets, and that is enough for all three things you want.

1. The grid. GRID_COLS: "3" and GRID_ROWS: "2", as you have. Standing up stays 1 x 3.

2. Six cards instead of four. The board brings four cards. The override adds cards 5 and 6, exactly as packages/cells/6.yaml has them, and replaces BIND_CELLS, the line that hands the cards to the firmware, with the six-card version.

3. The compact look. A look is only a list of sizes, so the override states them itself. The numbers below are what looks/compact.yaml works out on this board's density (164.8 dpi). They are plain numbers on purpose: a size written as a formula in the override (${ ... }) comes out as 0 in the other files that use it, and you get invisible tiles. Want it smaller or larger? Change the numbers themselves.

You can drop DISPLAY_DPI: "130". The numbers below no longer depend on it, and the firmware uses it as the real density of the glass for the sizes it works out on the screen.

The whole Override YAML (More → Override YAML), then Install 
substitutions:
  GRID_COLS: "3"
  GRID_ROWS: "2"
  BIND_CELLS: |-
    runtime_tiles::bind(0, id(tile1), id(t1_title), id(t1_value), id(tile1_icon_circle), id(tile1_icon_lbl));
    runtime_tiles::bind(1, id(tile2), id(t2_title), id(t2_value), id(tile2_icon_circle), id(tile2_icon_lbl));
    runtime_tiles::bind(2, id(tile3), id(t3_title), id(t3_value), id(tile3_icon_circle), id(tile3_icon_lbl));
    runtime_tiles::bind(3, id(tile4), id(t4_title), id(t4_value), id(tile4_icon_circle), id(tile4_icon_lbl));
    runtime_tiles::bind(4, id(tile5), id(t5_title), id(t5_value), id(tile5_icon_circle), id(tile5_icon_lbl));
    runtime_tiles::bind(5, id(tile6), id(t6_title), id(t6_value), id(tile6_icon_circle), id(tile6_icon_lbl));
  LOOK: "compact"
  SCROLL_Y: "46"
  HEADER_Y: "16"
  HEADER_INSET: "13"
  SETTINGS_HOLD_DRIFT_PX: "28"
  GRID_MARGIN: "9"
  GRID_GAP_X: "8"
  GRID_GAP_Y: "4"
  TILE_RADIUS: "21"
  TILE_PAD: "9"
  TILE_ICON_SIZE: "41"
  PAGE_BAR_H: "41"
  PAGE_NUMBER_W: "120"
  PAGE_CHEVRON_INSET: "16"
  CARD_KEY_X: "12"
  CARD_KEY_Y: "9"
  CARD_KEY_SIZE: "46"
  COLOR_TITLE_W: "242"
  COLOR_TITLE_Y: "24"
  ALERT_TITLE_MAX: "48"
  ALERT_BUTTON_MAX: "12"
  ALERT_SUBTITLE_MAX: "160"
  FONT_TIME_SIZE: "21"
  FONT_HEADLINE_SIZE: "21"
  FONT_WATCH_VALUE_SIZE: "25"
  FONT_CLOCK_DIGITS_SIZE: "28"
  FONT_SETPOINT_SIZE: "46"
  BEDSIDE_WITH_NAMES: "0"
  FONT_LABEL_SIZE: "13"
  WIDE_NAME_FONT: "label"
  FONT_SUBLABEL_SIZE: "13"
  FONT_SUBLABEL_BIG_SIZE: "16"
  FONT_ICON_SIZE: "32"
  FONT_ICON_MINI_SIZE: "21"
  FONT_ICON_HOME_SIZE: "29"
  FONT_ICON_BIG_SIZE: "46"
  FONT_WATCH_ICON_SIZE: "14"
  FONT_BRAND_SIZE: "35"
  BRAND_MARK_SIZE: "38"
  LVGL_DEFAULT_FONT: "sublabel_big"
  EFFECTS_ROW_FONT: "sublabel_big"
  TOUCH_TEST_TITLE_FONT: "sublabel"
  TOUCH_TEST_TITLE_Y: "65"
  TOUCH_TEST_INSET: "10"
  TOUCH_TEST_SIZE: "20"
lvgl:
  pages:
    - id: !extend home_page
      widgets:
        - obj:
            id: !extend tile_scroll
            widgets:
              # ---------- CARD 5 ----------
              - obj:
                  id: tile5
                  grid_cell_row_pos: 0
                  grid_cell_column_pos: 0
                  # A seed: runtime_tiles::bind puts the card in a cell of the grid and LVGL stretches it to
                  # that cell, whichever way the glass hangs (firmware 0.2.92+).
                  width: 1
                  height: 1
                  styles: style_tile
                  scrollable: false
                  scrollbar_mode: 'OFF'
                  widgets:
                    - obj:
                        id: tile5_icon_circle
                        width: ${TILE_ICON_SIZE}
                        height: ${TILE_ICON_SIZE}
                        styles: style_icon_circle
                        clickable: false
                        scrollable: false
                        scrollbar_mode: 'OFF'
                        widgets:
                          - label:
                              id: tile5_icon_lbl
                              align: CENTER
                              text_font: materialdesign_icons
                              text: "\U000F002A"
                              clickable: false
                    - label:
                        id: t5_title
                        text: "Tile 5"
                        styles: style_title
                        clickable: false
                    - label:
                        id: t5_value
                        text: "—"
                        styles: style_value
                        clickable: false
              # ---------- CARD 6 ----------
              - obj:
                  id: tile6
                  grid_cell_row_pos: 0
                  grid_cell_column_pos: 0
                  # A seed: runtime_tiles::bind puts the card in a cell of the grid and LVGL stretches it to
                  # that cell, whichever way the glass hangs (firmware 0.2.92+).
                  width: 1
                  height: 1
                  styles: style_tile
                  scrollable: false
                  scrollbar_mode: 'OFF'
                  widgets:
                    - obj:
                        id: tile6_icon_circle
                        width: ${TILE_ICON_SIZE}
                        height: ${TILE_ICON_SIZE}
                        styles: style_icon_circle
                        clickable: false
                        scrollable: false
                        scrollbar_mode: 'OFF'
                        widgets:
                          - label:
                              id: tile6_icon_lbl
                              align: CENTER
                              text_font: materialdesign_icons
                              text: "\U000F002A"
                              clickable: false
                    - label:
                        id: t6_title
                        text: "Tile 6"
                        styles: style_title
                        clickable: false
                    - label:
                        id: t6_value
                        text: "—"
                        styles: style_value
                        clickable: false

Two things to know:

  • One piece of the compact look is left out to keep this short: a slightly bolder name font for wide tiles (WIDE_NAME_FONT: "label" keeps the normal one). Everything else is the same as a compact build with six cards.
  • BIND_CELLS and the card ids are internals, not part of what an override is promised to keep. If a later update changes them, the build will say so, and removing the override (or updating it) brings the screen back.

I haven't really tested this on a screen yet. ESPHome reads it without complaint against the current package, and the result matches a build with the compact look and six cards in the board file itself, so in principle it should work. I'm curious what you run into, so let me know how it goes.

Got a screen running? Tell others which board you have and what works on the Tessera website. It helps everyone pick a screen that works.

Like my work? Consider buying me a coffee, much appreciated!

Original on GitHub

MaxGramser

Thanks @govido! This is better suited to a discussion than an issue, so I moved it here: https://github.com/MaxGramser/homeassistant_espscreen/discussions/108

Please continue the conversation there. I'm closing this issue to keep the tracker for bugs and concrete board requests.

Got a screen running? Tell others which board you have and what works on the Tessera website. It helps everyone pick a screen that works.

Like my work? Consider buying me a coffee, much appreciated!

Original on GitHub

Add your thoughts, a screenshot or a useful link.

Markdown & basic HTML
Paste or drop images · URLs on their own line become previews0 / 10,000
Sign in with GitHub to commentYour draft stays in this browser tab.