Ways of `mimicking` standard Lovelace elements in custom cards (like button-card), anyone?

@AhmadK wrote:

Hi All,

I played for some time with a great custom button-card creating a card for my ventilation config.
What I noticed was the difference between font sizes Lovelace and button-card use to display entity’s name, for example:

and here’s the config

type: entities
entities:
  - type: custom:button-card
    entity: input_number.ventilation_1st_floor_bathroom_shower_humidity_gradient_threshold
    show_icon: false
  - entity: input_number.ventilation_1st_floor_bathroom_shower_temperature_gradient_threshold

As I wanted to have both standard and custom cards mixed within the Entities card, my goal was to have that “if greater than” string look the same in both input_number and button-card.
In fact, it was a bit bigger - as I use button-card and card-mod anyway, I wanted my custom card to look as close to standard Lovelace card as possible in terms of fonts and colours used (and it’s not limited by input_number, it’s just an example here).
And as it’s custom, it would allow to change it to something different as well (like font size of input_boolean's input field)

To achieve my goal I created several input_text sensor that hold default values for font size and color:

ventilation_ll_auto_settings_font_size:
  initial: '14px'

ventilation_ll_auto_settings_color:
  initial: 'var(--primary-text-color)'

ventilation_ll_auto_settings_input_width:
  initial: '3rem'

and then I use them to create some button-card templates

var_const_states:
  variables:
    invalid_states: ['unknown', 'unavailable']
    
base_row:
  template: var_const_states
  variables:
    margin_left: 0

    current_font_size_entity_id: 'input_text.font_size'
    default_font_size: 'var(--paper-input-container-shared-input-style_-_font-size)'

  styles:
    card:
      # set space between input field and name
      - margin-left: >-
          [[[ return variables.margin_left ]]]
      - margin-right: 3px
    # set standard font size and color
    name:
      - font-size: >-
          [[[
            var val = states[variables.current_font_size_entity_id];
            if (val === null || val.state === null || variables.invalid_states.includes(val.state)) return variables.default_font_size;
            return val.state;
          ]]]

As you can see, it pulls data from input_text and falls back to variables (overcomplicating things?)
And the beauty of using input_boolean here is that it can be accessed from any templateable card (like card-mod)/script and exposed in UI so one can change parameters on the fly/call set_value from an automation and voila, your card picks up changes immediately (well, at least button-card does).

So if I use that base_row as a template, I get a better result

Currently the step I’m missing is how to initialise that input_texts so they hold current (or default) Lovelace values? I.e instead of setting initial (which will reset them on every HA restart) I’d prefer to pull it from Lovelace.

It might be possible to do so from within button-card, for example, as it allows to execute Javascript code so things like querySelector can be used (I can grab font-size of “html”) but I’m not a web designer and at the moment it looks like it would be difficult to dive into shadow DOM to find that information - happy to be wrong here, please show me how!

tl/dr is there any way to store attributes’ values Lovelace uses to display its elements in input_text apart from hard coding them? I had an informative discussion with @RomRider about it, but maybe people like @Bram_Kragten, @thomasloven, @iantrich, @petro or anyone else knowledgeable (I believe there are many of them here) can chime in and guide me a little bit?

Thanks for reading.

p.s There is a good source of default values here, which I’ll hard code if there is no other option.

Posts: 4

Participants: 2

Read full topic