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