Security card

[jamorenom]

Congratulations on your amazing job here! I need your help, basically I "recreated" your security card and added it into my dashboard, everything works like a charm except for the "triggered" version of the card, it just turns black, card doesn't show any kind of message/icon. What am I doing wrong?

Thank you in advance

type: custom:button-card entity: alarm_control_panel.alarmo show_name: false show_icon: false show_label: true show_state: false tap_action: action: more-info styles: grid:

• grid-template-areas: '"item1 l" "item1 item2"'
• grid-template-rows: min-content min-content
• grid-template-columns: 40% 55%
• column-gap: 5%
• row-gap: 8px card:
• height: 100%
• border-radius: 16px
• padding: 2rem
• overflow: visible
• justify-items: center
• justify-content: center label:
• text-align: left
• font-size: 1.5rem
• font-family: Montserrat
• font-weight: 600
• justify-self: start
• align-self: end
• color: rgb(255,255,255) custom_fields: item2:
  • align-self: start
  • align-content: start
  • align-items: start
  • background: none state:
    • value: arming label: Stand by... styles: label:
    • animation:
      • flash 2s linear infinite
    • value: armed_home icon: mdi:shield-outline label: Armed Home
    • value: armed_away label: Armed Away
    • value: disarmed label: Disarmed custom_fields: item1: card: type: custom:button-card entity: '[[[ return entity.entity_id ]]]' show_name: false show_icon: true show_label: false show_state: false styles: img_cell:
      • height: 100px
      • width: 100px
      • box-shadow: 5px 5px 10px rgba(0,0,0,.5), -5px -5px 10px rgba(255,255,255,.03)
      • border-radius: 200px
      • justify-self: center
      • align-self: start icon:
      • color: rgb(136,136,136) state:
    • value: arming icon: mdi:shield-refresh-outline styles: icon:
      • color: '#F46036'
      • animation:
        • flash 2s linear infinite
    • value: armed_home icon: mdi:shield-outline styles: icon:
      • color: '#39bb4f'
      • animation:
        • rotate 4s linear infinite
    • value: armed_away icon: mdi:shield-outline styles: icon:
      • color: '#F46036'
      • animation:
        • rotate 4s linear infinite
    • value: disarmed icon: mdi:shield-off-outline extra_styles: | @keyframes flash { 0% {opacity: 100%;} 50% {opacity: 0%;} 100% {opacity: 100%;} } @keyframes rotate { from {transform: rotateY(-deg);} to {transform: rotateY(360deg);} } item2: card: type: custom:button-card entity: '[[[ return entity.entity_id ]]]' icon: mdi:dots-grid label: Numpad show_name: false show_icon: true show_label: true show_state: false tap_action: action: more-info styles: grid:
      • grid-template-areas: '"i l"'
      • grid-template-rows: 1fr
      • grid-template-columns: min-content 1fr
      • column-gap: 8px card:
      • background: none
      • overflow: visible
      • padding: 0 label:
      • text-align: left
      • font-size: 1rem
      • font-family: Montserrat
      • font-weight: 500
      • color: rgb(136,136,136)
      • text-align: left
      • justify-self: start img_cell:
      • justify-self: center icon:
      • width: 30px
      • color: rgb(136,136,136)
      • padding: 0
      • margin: 0 state:
    • value: arming label: Activando
    • value: armed_home label: Desactivar
    • value: armed_away label: Desactivar
    • value: disarmed label: Activar extra_styles: | @keyframes flash { 0% {opacity: 100%;} 50% {opacity: 0%;} 100% {opacity: 100%;} } @keyframes rotate { from {transform: rotateY(-deg);} to {transform: rotateY(360deg);} }

[fredrikpersson92]

Hey, glad you like it! Hmm I'm not following in your code. It seems you have not defined any styles for the icon? And also looks like you have doubled some things? Can you paste the code in proper format so it's easier to read? or Pastebin and share the link?

[jamorenom]

Thank you on your quick response. Here it is: https://pastebin.com/X8vRfGnX

[jamorenom]

This is how the card looks like when the alarm is triggered

[fredrikpersson92]

I just pasted your code without changing anything and it works just fine. Are you sure you installed Alarmo correct?

[jamorenom]

I just pasted your code without changing anything and it works just fine. Are you sure you installed Alarmo correct?

Thank you for your answer. Maybe I'm missing something from your minihass theme (I'm not using it) I'm just using the code from your security card. Alarmo Is working fine (when I use it with its own card, it works fine).

Your card works perfect, just when the alarm is triggered I can't make it work.

Alarm triggered:

[fredrikpersson92]

oh okay now I understand. I have not actually though about the triggered state :) I should design for it. Is the state called "triggered"?

[jamorenom]

oh okay now I understand. I have not actually though about the triggered state :) I should design for it. Is the state called "triggered"?

Yes, "triggered". It happens when your alarm is armed and you activate one of your triggers/sensors (example, open a door)

Here an example

[fredrikpersson92]

add this next to the other states and define the styles you wish to have - value: triggered

[jamorenom]

add this next to the other states and define the styles you wish to have - value: triggered

Thank you for all your answers!

this is my final card, hope you like it:

https://pastebin.com/Hkz4rGeD