Lovelace: Versatile Swiss Army Knife Custom Card

SirUlbrich · August 12, 2023, 2:27pm

on my “normal” dashboard with entity card its working to change the value by the slider.
not sure where’s my fault on sak.

do you know which action and service i need to use?

        entity_index: "[[var_entity_index2]]"
        slider_action:
          update_interval: 200      # Update every 200 ms while dragging
          service: set_value
        scale:
          min: 0
          max: 100
          step: 5

        entity_index: "[[var_entity_index2]]"
        slider_action:
          update_interval: 200      # Update every 200 ms while dragging
          service: input_number.set_value
        scale:
          min: 0
          max: 100
          step: 5

both not working

its just like a fan speed. normally no big project

AmoebeLabs · August 12, 2023, 2:40pm

Afaik if you select the entity in the developer tab, states or services, you should be able to find the right service.

AmoebeLabs · August 12, 2023, 2:53pm

It might be the case that SAK is still using the service_data tag instead of data. Must look into that.

Try the fan.set_percentage call, altough I don;t know if percentage is passed as it should…

automation:
  trigger:
    platform: time
    at: "07:15:00"
  action:
    - service: fan.set_percentage
      target:
        entity_id: fan.kitchen
      data:
        percentage: 33

SirUlbrich · August 12, 2023, 3:02pm

found the serice." triggered by service number . set_value

thats what i found by homeassistant:

    action:
      service: input_number.set_value
      target:
        entity_id: input_number.target_temp
      data:
        value: "{{ trigger.payload }}"

        slider_action:
          update_interval: 200      # Update every 200 ms while dragging
          service: number.set_value
          target: 
            entity_id: "[[var_entity_index2]]"

how do i know the data value?

ValMarDav · August 12, 2023, 3:48pm

Hi, It works very well .

I created tiles for my rooms. As there are several devices in the same room, I had to repeat the same code several times, which I found redundant. Merci!

At the same time as @kkaapp . I was working to create a tile for my rooms. I had a problem because not all rooms have the same number of devices. So @kkaapp published the code for his tiles and I saw that it used a boolean dummy for entities not present, thank you @kkaapp .

Here is the result for my room tiles.

AmoebeLabs · August 12, 2023, 4:15pm

See: User Interactions - Swiss Army Knife Card

Use the parameter to define “value”. The current state will be passed by SAK.

And do you use the entity_index or the id for the entity_id?

AmoebeLabs · August 12, 2023, 4:21pm

Great! And that is a lot of information in a room tile!

I completely understand why you want to use templates. Much less yaml and much easier to maintain!

SirUlbrich · August 12, 2023, 5:39pm

I will take a look at home to your link, thanks a lot. I use the entity about the index.

AmoebeLabs · August 12, 2023, 6:41pm

The service requires an entity_id. If you don’t specify anything, SAK will use the entity_id for which entity_index is specified. An entity_index won’t work.

The state will be passed to the parameter specified, ie the percentage.

SirUlbrich · August 12, 2023, 7:52pm

i dont wanna specify. i wanna do on the number of the entity_index.
I think I’m too new and too stupid to implement this. everything i tried on the slider didn’t work. thank you very much for trying to help me.

AmoebeLabs · August 13, 2023, 1:31pm

Home Assistant needs the id, not the index.
If you don’t specify the entity ID, then SAK will use the entity id from the current tool.

Assuming that is the entity for the slider, this might just work

SAK will use input_number.target_temp as the entity,
SAK will put the state of that entity (0…100) into the value parameter

      tap_action:
        actions:
          - action: call-service
            service: number.set_value
            parameter: value

SirUlbrich · August 14, 2023, 11:42am

Thank you. I will try again after work

AmoebeLabs · August 14, 2023, 2:54pm

I made some cards for Awair Element owners…

Much more compact than the previous cards I made. These fit nicely on my phone.
At first, I wanted to make an integrated dashboard, but this was enough for my needs.

Three variations.

the first with a typical Awair display. Just the score and the five sensors (you must know which one is which)
The second one adds icons to help you see what is what. The circles are a bit small to fit everything in the space I have for those visual elements
The third breaks with the typical Awair display, and uses rounded rectangles, which are better visible than the smaller circles.

ValMarDav · August 14, 2023, 3:12pm

Can we use these cards with sensors that are not from Awair? I have a Netatmo station that provides almost the same data.

AmoebeLabs · August 14, 2023, 3:28pm

That should be possible yes.

Be aware though that Awair has some special grading for temperature and humidity. They define multiple ranges that show the same color. Effectively a special type of colorstop that includes ranks and is displayed in that order.

A normal colorstop would show 9 values, and start with a red color. In this case the ranking (0…4) determines the display, so you see 5 grades for each sensor.

Green for instance is a temperature between 18 and (up to/including) 25 degrees Celsius.

I have no idea how Netatmo works in this regard. Of course, you can use the same colorstops and ranking. The card will just display the sensor data as if it was coming from an Awair Element!

The colorstops for each sensor are fixed (I use a colorstop template, but it is not a template variable) Of course you can replace the fixed color stop template with a variable, so you can choose the colorstop that is used.

Below you can see the used colorstop for the temperature:

sak_colorstops_awair_temperature_v2:
  template:
    type: colorstops
    defaults:
      - dummy: 0
  colorstops:
    colors:
      - value: -1000
        color: '#e63740'    # Red
        rank: 4
      - value:  9
        color: '#fb8600'    # Dark Orange
        rank: 3
      - value: 11
        color: '#faaa00'    # Light Orange
        rank: 2
      - value: 17
        color: '#fdd125'    # Yellow
        rank: 1
      - value: 18
        color: '#49ce4c'    # Green
        rank: 0
      - value: 25.001
        color: '#fdd125'    # Yellow
        rank: 1
      - value: 26.001
        color: '#faaa00'    # Light Orange
        rank: 2
      - value: 31.001
        color: '#fb8600'    # Dark Orange
        rank: 3
      - value: 33.001
        color: '#e63740'    # Red
        rank: 4

If the hex colors would be replaced by CSS Variables that are defined in a color swatch, you could even redefine the used colors for all these cards without having to change the colorstop…

For completeness, the view definition for such a card:

      - type: 'custom:swiss-army-knife-card'
        entities:
          - entity: sensor.awair_element_bedroom_score
            name: 'Awair Element'
            area: 'Bedroom'
          - entity: sensor.awair_element_bedroom_temperature
          - entity: sensor.awair_element_bedroom_humidity
            decimals: 0
          - entity: sensor.awair_element_bedroom_carbon_dioxide
          - entity: sensor.awair_element_bedroom_volatile_organic_compounds
          - entity: sensor.awair_element_bedroom_pm2_5
            icon: mdi:dots-circle
        layout:
          template:
            name: sak_layout_fce2_awair3c

chintito4ever · August 14, 2023, 6:56pm

Looks great! I have Awair Element. Where can I find the complete code?

AmoebeLabs · August 15, 2023, 7:41am

Not yet released, so nowhere other than some Github repo and my own computer

I might release a dev version, so that you can play. But don’t expect (yet) stability as I’m still changing things to be better maintainable, and/or support for templates.

AmoebeLabs · August 17, 2023, 3:04pm

I think I just completed a major configuration change (again) to make additions in the future easier for the sparkline tool.

After hours of changing software, views, and templates, it was time to make some cards again. Much more fun than changing configurations…

These cards are actually made for Awair sensors, but now I think it can do this for any (analog) sensor, as long as you pass the right colorstops. As you can see, you can also pass the sparkline chart type, chart variant, and of course the scale (only max at this moment for the segmented arc).

The chart types are:

Graded / rank_order chart which shows the typical Awair circles
Area with fade option
Barcode / Audio chart
Simple Line chart

Other charts that also work with this generic setup:

Bar chart
Dots chart

Definitions in the view for the first 4 cards:

    - type: grid
      columns: 2
      square: false
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            - entity: sensor.awair_element_study_humidity
              name: 'Humidity'
              area: 'Study'
              decimals: 0
          layout:
            template:
              name: sak_layout_fce2_awair2a
              variables:
                - sak_layout_awair_chart_type: barcode
                - sak_layout_awair_chart_variant: audio
                - sak_layout_awair_background_icon_disabled: false
                - sak_layout_awair_sensor_colorstop_v1: sak_colorstops_awair_humidity_v1
                - sak_layout_awair_sensor_colorstop_v2: sak_colorstops_awair_humidity_v2
                - sak_layout_awair_sensor_scale_max: 100

          # -------------------------------------------------------------------
        - type: 'custom:swiss-army-knife-card'
          entities:
            - entity: sensor.awair_element_study_pm2_5
              name: 'PM2.5'
              area: 'Study'
              icon: mdi:dots-circle
          layout:
            template:
              name: sak_layout_fce2_awair2a
              variables:
                - sak_layout_awair_chart_type: line
                - sak_layout_awair_background_icon_disabled: false
                - sak_layout_awair_sensor_colorstop_v1: sak_colorstops_awair_pm25_v1
                - sak_layout_awair_sensor_colorstop_v2: sak_colorstops_awair_pm25_v2
                - sak_layout_awair_sensor_scale_max: 100

Again an extra quite flexible functional card, and 3 bugs less in the software

AmoebeLabs · August 18, 2023, 9:29am

I just released a prerelease as v2.5.1-dev.2.

Release v2.5.1-dev.2 · AmoebeLabs/swiss-army-knife-card (github.com)

If you have prereleases enabled in HACS, you can download this prerelease.

Note that you must also download the ha-config part to get the new functional card examples, series 2.

As a slight breaking change:

The folder structure has changed to make fetching templates more reliable. These seem to be fetched in alphabetical order, so I renamed the folders to ensure that dependencies are loaded before the layout templates that use them!
I prefixed all SAK templates with sak-. The layouts already had this prefix. Now the other templates have this too! Some ppl got their files overwritten with each download, as the names were the same.

kkaapp · August 18, 2023, 4:31pm

Everything else works