Custom Lovelace Card - Homekit style card

Martin_Pejstrup · January 7, 2021, 10:53am

Is it possible to get the action buttion into the switch-popup-card?

I tried this, no luck

    hold_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        title: '[[[ return entity.attributes.friendly_name ]]]'
        deviceID: this
        card:
          type: entities
          entities:
            - type: custom:switch-popup-card
              entity: '[[[ return entity.entity_id ]]]'
              icon: none
              fullscreen: false
              brightnessWidth: 120px
              brightnessHeight: 240px
              borderRadius: 1.7em
              sliderColor: '#c7c7c7'
              sliderTrackColor: rgba(25, 25, 25, 0.9)
              noActiveState: '-'
              entity_value_path: attributes.brightness
              service: light.turn_on
              service_data:
                entity_id: this
                brightness: value
              entities:
              - '[[[ return entity.entity_id ]]]'
              buttons:
                - icon: "mdi:lightbulb-on"
                  value: 255
                  name: "100%"
                  color: "#FFF"
                  icon_color: "rgba(255,255,255,1)"
                - icon: "mdi:lightbulb-on"
                  value: 192
                  name: "75%"
                  color: "#FFF"
                  icon_color: "rgba(255,255,255,0.8)"
                - icon: "mdi:lightbulb-on"
                  value: 128
                  name: "25%"
                  color: "#FFF"
                  icon_color: "rgba(255,255,255,0.6)"
                - icon: "mdi:lightbulb-on"
                  value: 64
                  name: "25%"
                  color: "#FFF"
                  icon_color: "rgba(255,255,255,0.4)"              
              actionSize: 4.5em
              actionsInARow: 2
              actions:
                - service: light.turn_on
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                    color_temp: 447
                    brightness: 145                    
                  color: "#FDCA64"
                  name: Relax
                - service: light.turn_on
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                    color_temp: 346
                    brightness: 255                    
                  color: "#FFFF83"
                  name: Bright
                - service: light.turn_on
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                    color_temp: 367
                    brightness: 77
                  color: "#cc8800"
                  name: Dimmed
                - service: browser_mod.popup
                  name: Options
                  service_data:
                    title: '[[[ return entity.attributes.friendly_name ]]]'
                    deviceID: this
                    card:
                      type: entities
                      show_header_toggle: false
                      entities:
                        - entity: '[[[ return entity.entity_id ]]]'
                          secondary_info: last-changed
                        - type: custom:light-entity-card
                          entity: '[[[ return entity.entity_id ]]]'
                          brightness: false
                          color_temp: true
                          full_width_sliders: true
                          hide_header: true
                          show_slider_percent: true
                          smooth_color_wheel: true
                          consolidate_entities: true

DBuit · January 7, 2021, 12:10pm

Hi,

No switch card has no actions

Martin_Pejstrup · January 7, 2021, 12:21pm

Ok, would that be something to integrate?

DBuit · January 7, 2021, 12:23pm

Ye probably

Martin_Pejstrup · January 7, 2021, 12:31pm

Cool, just gave the open issue a +1 on Github.
Also made a feature request for the image on action buttion icons I mentioned in the other tread

royle · January 7, 2021, 12:59pm

Hi,

I having some problems adding calendar card to my tablet dashboard.

When I am using the widerSize and higherSize

the other tile that I am adding are to small and a there is a gap I can’t fill with tiles.

Any suggestions ?

DBuit · January 7, 2021, 3:30pm

set masonry to true. This will make it possible for smaller tiles to fill the gapes.

SlipperyPickle · January 7, 2021, 4:24pm

The website works great on mobile, the HomeKit panel syle looks amazing. And scrolling works fine. But I’m not able to scroll in the home assistant app. Am I doing something wrong?

andrew47 · January 7, 2021, 4:42pm

Set home to false and the tiles start at the top

Jimmy_Berglund · January 8, 2021, 10:47pm

Well to put it in a easy as i can.
If one could use a entities card funktion on that extra status option that would make us able to have a washer switch as main and as status you use a Enteties card funktion as the status so that the time get to be shown the right way so to speak.
So that this button as showned below.

Will become this like this button in the picture below. or something like it.

The way i did it in the picture is shorten down hour to h, And in this cause Minuts could be m and Second s. That propably would make other statuses in the process look better.
This way you can get other status you cant right now. In my example the washing time when its done or when it was completed.

But now i was just free basing. of what i think would be the ideal case. I know your a new dad so i being a dad myself i get if this dont get a high priorety. But one could always wish for a late christmas present

kaosmagix · January 9, 2021, 10:32am

This card is great and made it very easy to create a nice usable mobile UI.

I would like to add the Volume level of a media player as the additional state shown (top right circle) using the state and statePath setting. This works but it shows the value unrounded and with all digits. The volume_level ranges between 0-1 and I would like to show it in the circle as a percentage (so 40% and not 0.400000000000023) and if possible also showing the circle fill like brightness does for example. Is it possible to add functionality to add settings for rounding of the attribute, and the option to show it in the circle like for example Brightness does?

# lovelace_gen
entity: {{ media_player_entity }}
state: {{ media_player_entity }}
statePath: attributes.volume_level

e1miran · January 10, 2021, 4:25pm

Is the “user” variable implemented in JS templating? I can’t get it to work. Maybe my code is incorrect? The if statement always resolves false no matter the user.

        hide: |
          [[[ 
            if (user == "Anthony")
              return true;
            else
              return false;
          ]]]

ryanmsnyder · January 11, 2021, 8:25pm

I love this option but it slightly uneven as seen in the screenshot. Any ideas how to fix this?

maxym · January 12, 2021, 12:19am

Hello
No one is using popup card defined for multiple entities at once together with settingsCard?

How do you access more light attributes with HK style GUI?

e1miran · January 12, 2021, 7:14am

Figured it out. Should be user.name.

Jimmy_Berglund · January 12, 2021, 7:54am

Just wanted to share if someone allse has problems with Enteties time line the code ive found and gotten to work to get the right sensor showing the right time for my washer.

  - platform: template
    sensors:
      washer_status_iso:
        friendly_name: "Status"
        value_template: >-
          {% if is_state('sensor.tvattmaskin_washer_job_state', 'none') %}
            Avstängd
          {% elif is_state('sensor.tvattmaskin_washer_machine_state', 'pause') %}
            Väntar
          {% elif is_state('sensor.tvattmaskin_washer_machine_state', 'stop') %}
            Stoppad
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'airWash') %}
            LuftSköljer
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'cooling') %}
            Kyler
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'delayWash') %}
            Förlängdtvätt
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'drying') %}
            Torkar
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'finish') %}
            Färdig
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'preWash') %}
            Förtvätt
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'rinse') %}
            Sköljer
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'spin') %}
            Snurra
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'wash') %}
            Tvättar
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'weightSensing') %}
            Viktsensor
          {% elif is_state('sensor.tvattmaskin_washer_job_state', 'wrinklePrevent') %}
            Vikelskyddar
          {% endif %}
          
### Template sensor for Maq Lavar state, depending on SmartThings auto-generated sensors ###
      state_maq_lavar_new:
        friendly_name: "Tvättmaskin"
        value_template:  >-
                        {%- if states('switch.tvattmaskin')|lower == "off" -%}
                          Off
                        {%- elif states('switch.tvattmaskin')|lower == "on" -%}
                            {%- if states('sensor.tvattmaskin_washer_machine_state')|lower != "run" -%}
                              {{ states('sensor.tvattmaskin_washer_machine_state')|capitalize }}
                            {%- else -%}
                              {{ states('sensor.tvattmaskin_washer_job_state')|capitalize }}
                            {%- endif -%}
                        {%- else -%}
                          Unavailable
                        {%- endif -%}
        icon_template: "{{ 'mdi:washing-machine' }}"

### Template sensor for Maq Lavar remaining cycle Time, depending on SmartThings auto-generated sensors ###
      maq_lavar_remaining:
        friendly_name: "Remaining Time"
        value_template:  >-
                        {%- if states('switch.tvattmaskin')|lower == "on" and states('sensor.tvattmaskin_washer_machine_state')|lower != "stop" -%}
                            {%- if states('sensor.tvattmaskin_washer_job_state')|lower != "none" and states('sensor.tvattmaskin_washer_job_state')|lower != "finish" -%}
                              {%- if as_timestamp(states('sensor.tvattmaskin_washer_completion_time')) > utcnow().timestamp() -%}
                                {%- if states('sensor.tvattmaskin_washer_job_state')|lower == "delaywash" -%}
                                  -{{ (( as_timestamp(states('sensor.tvattmaskin_washer_completion_time')) - utcnow().timestamp() ) + 60) | timestamp_custom ("%H:%M", false) }}
                                {%- else -%}
                                  {{ (( as_timestamp(states('sensor.tvattmaskin_washer_completion_time')) - utcnow().timestamp() ) + 60) | timestamp_custom ("%H:%M", false) }}
                                {%- endif -%}
                              {%- else -%}
                                Done
                              {%- endif -%}
                            {%- else -%}
                              Idle
                            {%- endif -%}
                        {%- elif states('switch.tvattmaskin')|lower == "off" -%}
                          Idle
                        {%- else -%}
                          Unavailable
                        {%- endif -%}
        icon_template: "{{ 'mdi:washing-machine' }}"

Jimmy_Berglund · January 12, 2021, 7:56am

Hi m8 here what i use on my washer to get the time right. Maby you can modefy it to get it working for you.

### Template sensor for Maq Lavar remaining cycle Time, depending on SmartThings auto-generated sensors ###
      maq_lavar_remaining:
        friendly_name: "Remaining Time"
        value_template:  >-
                        {%- if states('switch.tvattmaskin')|lower == "on" and states('sensor.tvattmaskin_washer_machine_state')|lower != "stop" -%}
                            {%- if states('sensor.tvattmaskin_washer_job_state')|lower != "none" and states('sensor.tvattmaskin_washer_job_state')|lower != "finish" -%}
                              {%- if as_timestamp(states('sensor.tvattmaskin_washer_completion_time')) > utcnow().timestamp() -%}
                                {%- if states('sensor.tvattmaskin_washer_job_state')|lower == "delaywash" -%}
                                  -{{ (( as_timestamp(states('sensor.tvattmaskin_washer_completion_time')) - utcnow().timestamp() ) + 60) | timestamp_custom ("%H:%M", false) }}
                                {%- else -%}
                                  {{ (( as_timestamp(states('sensor.tvattmaskin_washer_completion_time')) - utcnow().timestamp() ) + 60) | timestamp_custom ("%H:%M", false) }}
                                {%- endif -%}
                              {%- else -%}
                                Done
                              {%- endif -%}
                            {%- else -%}
                              Idle
                            {%- endif -%}
                        {%- elif states('switch.tvattmaskin')|lower == "off" -%}
                          Idle
                        {%- else -%}
                          Unavailable
                        {%- endif -%}
        icon_template: "{{ 'mdi:washing-machine' }}"

LAndre · January 12, 2021, 9:16pm

Hi guys!

Firts, DBuit, great work, your card is amazing.

I have some issues with one card, I am using a weather card but I cant seem to be able to make a card transparent in no way. It shows the weather forecast card and white background (if I put color it has strange white border?)
Can somebody help?

I saw your youtube video with Weather icon on top, that would also be nice, how did you do it?

Many thanks!

Jimmy_Berglund · January 12, 2021, 9:28pm

U could use a diffrent theme for it.

Of you search weather in this thread u should find some examples how to theme it.

Virgil_Popa · January 13, 2021, 9:48am

Hello, does anyone else have this problem? for a few weeks every time I enter the application I get this error, it stays for a few seconds(2-5) and then it displays everything ok.