Custom Features for Home Assistant Cards - Buttons, Dropdowns, Selectors, Sliders, and Spinboxes

Maybe it’s because --rgb-deep-orange and --rgb-blue aren’t set? Try this.

type: tile
name: Living Room
entity: climate.pure_hot_cool
icon: mdi:home-thermometer
vertical: false
show_entity_picture: false
features:
  - type: climate-hvac-modes
    hvac_modes:
      - 'off'
      - cool
      - heat
  - type: custom:service-call
    entries:
      - type: slider
        service: fan.set_percentage
        value_attribute: percentage
        thumb: default
        label_color: white
        label: ATTRIBUTE[percentage]%
        color: var(--rgb-state-fan)
        data:
          entity_id: fan.pure_hot_cool
          percentage: VALUE
card_mod:
  style: |
    :host {
      {% if is_state('climate.pure_hot_cool','heat') %}
      --rgb-state-fan: rgb(255, 111, 34);
      {% else %}
      --rgb-state-fan: rgb(33, 150, 243);
      {% endif %}
    }

1 Like

you’re right. What you wrote helped me realize that --rgb-deep-orange and --rgb-blue are part of the Mushroom default theme that came with that old slider.

Once I swapped in my own theme defined values the original card_mod you suggested worked!

This is great, thank you again

1 Like

This might be out of scope for this repo, but would it be possible to add support for navigating to different screens when clicking the tile feature buttons?

Wow, such an amazing addition!!! Immediately tried it out and noticed that @xvlw had the exact question I had :slight_smile:

I was wondering though if it could be a nice addition to optionally indicate that the colour set by the Tile should be followed. E.g. the new Tile adjusts itself for a Climate entity based on the fact if it is heating or cooling like so:


Would be nice if it could follow that, perhaps by indicating it as an option to do so? Just a thought, but it’s already great as is!

Thanks again for all the work put in!! Really appreaciate it.

Install browser mod via HACS and use the browser_mod.navigate service.

type: custom:service-call
entries:
  - type: button
    service: browser_mod.navigate
    data:
      path: /lovelace/0

Using the tile icon color is a good idea! You should be able to do it by setting color to var(--tile-color).

2 Likes

Wait what, it really is that simple? Yes it is!!! :slight_smile:

Really, so amazing, thanks!

1 Like

This is so much cleaner than the card mod edit and it fixes an issue i was having on mobile where it was coming through transparent that I hadn’t dove into

Switched to this :slight_smile:

1 Like

hm… I think, I will give it a try… :slight_smile:
Right now, I am always using “mushroom number card” whenever there is an entity, where I would like to have a slider to set another number value, since the tile-card itself does not yet provide such a slider.

I might give it a try with the tile features service call instead. :slight_smile:

[update]
OK, here’s one example I am struggling a bit, since I usually don’t work much with these service calls…

image
The upper card is the ‘Mushroom Number Entity Card’ - that does provide the Number-Slider by default.
The one below is the tile card, with the ServiceCall feature enabled.

This is the Service Call from the Development-Area:

service: skodaconnect.set_charge_limit
data:
  limit: 90
  device_id: 2c1c0d706fe211bd09c09d56a282aecc

Limit is the State of Charge that I want to set.
Device ID is the "vehicle to set the charge limit for, usefull, if you have more than one car provided by this integration.

Now, how to apply this within the Service Call from the Card?

type: custom:service-call
entries:
  - type: slider
    service: skodaconnect.set_charge_limit

I’m getting the following error:
“extra keys not allowed”
image

I think it should be something like this:

type: custom:service-call
entries:
  - type: slider
    service: skodaconnect.set_charge_limit
    value_attribute: ???
    data:
      limit: VALUE
      device_id: 2c1c0d706fe211bd09c09d56a282aecc

value_attribute should be set to to whatever numerical attribute you want the slider to track/set values for (it defaults to the tile or service call data entity ID state which it looks like it’s doing now).

I’m not familiar with this integration but from what I’m seeing in it’s code it’s services only accept device_id and not entity_id, which isn’t great since Home Assistant services should always accept entity_id and it may break some of the logic I use to track and set the slider value. If it doesn’t work try adding device_id and entity_id to the data field. If that throws an error please create a bug for it on Github so I can remember to add support for weird cases like this.

Also, can you post your full tile card config?

I actually installed this specifically for the mode selector. It is amazing to me that no one else has thought of it/needed it. Thank you very much for putting this together. Your project is a life saver!

1 Like

I haven’t made the mode selector yet! It’s next on my list but I have to fix some possible bugs with this and do a big refactor on my other project (android-tv-card) before I get around to it. For now we have to settle for buttons.

I put out a small bug fix release which should help with weird custom services that do not use entity ID or use a separate entity for the slider and the service call. Try this:

type: custom:service-call
entries:
  - type: slider
    service: skodaconnect.set_charge_limit
    entity_id: input_number.ladebegrenzung # entity ID of the slider
    autofill_entity_id: false
    data:
      limit: VALUE
      device_id: 2c1c0d706fe211bd09c09d56a282aecc
1 Like

Thanks.
I’ll try it later.

I’ve just released version 2.1.0, which adds selectors and a flex-basis option.

3 Likes

You are a legend!

Took the input selector I jammed in at the top of my card to flip between 2 climate devices and you made it even better.

I have a small request, and I believe this is achievable by using templates but having it as default may be cleaner to follow how the default Tile Card acts.

Can you make it so that the icon colour inverts based on which input is selected?

Example: If you see the second row of buttons displaying the heat / cool / off buttons. Once one of the buttons is selected, the icon colour inverts to white (snowflake is white in this case).

When heat is selected the flame icon turns white and the snowflake goes back to black.

1JDeUuY

Q3j8ylq

1 Like

I completely missed the icon inversion since I’m always in dark mode. It should be as easy as applying filter: invert(1) to the icon and label. But I should only do so when in light mode so I’ll have to figure out how to detect that.

Edit: Or even better, calculate the luma of the icon color and invert if it’s too dark. I’ll enable this by default and add a toggle to disable. Nope too hard. I’ll make the whole thing off by default and allow users to enable it.

Edit 2: Released v2.1.1, which adds selector invert_icon and invert_label options at both the entry and option level of selectors. Figuring out how to do it only for light mode or by icon color would be much more difficult to implement so I’m indefinitely shelving that idea.

1 Like

Tested this morning and the invert is working, however the colour it inverts to looks like a grey. Specifically #dedede whereas the default Tile icon inverts to straight #ffffff

I know its a bit tricky, and grey is better than black for both but wanted to report what i saw back in case there was an adjustment that could be made.

bRuzfn7
IDVNrTg

edit 1

Upon further testing, I changed my theme to the Home Assistant default one and tested and it looks like it is working correctly just using the default theme. So maybe the grey issue lies inside my theme file. I’ll have to dig through it and see

KRiIn0O

Which theme were you using? I’m out of town for the next week but can look more into it after. I could add more explicit options for defining selected icon/label text in the future.

I’m using a slightly modified version of the Minimalist UI Theme yaml files.

I’m not using the full blown Minimalist UI project assets, just their theme files if that makes sense.

Mainly the minimalist-desktop.yaml and minimalist-mobile.yaml files.

Also here is the full card im using in my dashboard

type: tile
name: Living Room
entity: climate.pure_hot_cool
icon: mdi:home-thermometer
vertical: false
show_entity_picture: false
state_content:
  - current_temperature
  - current_humidity
features:
  - type: custom:service-call
    buttons:
      - service: input_select.select_option
        icon: mdi:sofa
        data:
          option: Living Room
        target:
          entity_id: input_select.climate
      - service: input_select.select_option
        icon: mdi:bed
        data:
          option: Bedroom
        target:
          entity_id: input_select.climate
  - type: climate-hvac-modes
    hvac_modes:
      - 'off'
      - cool
      - heat
  - type: custom:service-call
    entries:
      - type: selector
        entity_id: fan.pure_hot_cool
        value_attribute: preset_mode
        background_color: var(--tile-color)
        options:
          - service: fan.set_preset_mode
            option: Normal
            icon: mdi:fan
            invert_icon: true
            data:
              preset_mode: Normal
          - service: fan.set_preset_mode
            option: Auto
            icon: mdi:fan-auto
            invert_icon: true
            data:
              preset_mode: Auto
  - type: target-temperature
  - type: custom:service-call
    entries:
      - type: slider
        service: fan.set_percentage
        value_attribute: percentage
        thumb: default
        label_color: white
        color: var(--tile-color)
        background_opacity: 0.3
        label: ATTRIBUTE[percentage]%
        data:
          entity_id: fan.pure_hot_cool
          percentage: VALUE