New card: Alarm with code buttons

Create a custom card that uses condition instead of filter to determine if the card should display itself or not.

The card should use entities list like rest of cards

Currently have and Arlo base station (hub for security cameras) and it appears that the arm/disarm function will only work if you enter some code (any keystroke)... event tho one it is not required/used at the moment. I have set the "hide_keypad: true" and it still requires something and provides the field to do so. It can be a single entry and can be run from the services section.

A Plex sensor in home assistant produces individual attributes for each user watching. For example:

{
  "jamesk - James Phone": "Hustle (2004) - S8 · E1 - Gold Finger",
  "James_k_wife - BedroomTV": "The Greatest Showman (2017)",
  "unit_of_measurement": "Watching",
  "friendly_name": "My Plex Server",
  "icon": "mdi:plex",
  "name": "Plex"
}

There are other similar sensors where the attribute names aren't fixed, and there are a potentially unknown (large) number of them, so you can't specify them in yaml. Thus I'd like a card that is able to list all attributes for a given entity (with the ability to filter out some specified exclusions, such as friendly name), but without having to list it the attribute names in yaml, since this isn't possible under the circumstances. (In the above example, the could be a third, fourth, fifth person also using the Plex server, theoretically).

Hello everyone! I've been trying for a couple of days without success get this useful custom card to work.

I want to create a cart just for the vacuum, but I get this:

This is my code:

- type: entities
  title: Aspirador
  show_header_toggle: no
  entities:
    - switch.aspirador
    - sensor.xiaomi_status
    - sensor.xiaomi_battery_level
    - input_select.estados_de_succao
    - input_select.zonas_de_aspiracao
    - type: custom:entity-attributes-card
      entity: vacuum.aspirador
      attributes:
        - key: vacuum.aspirador.do_not_disturb
          name: "Não perturbe"
        - key: vacuum.aspirador.cleaning_time
          name: "Tempo limpando"
        - key: vacuum.aspirador.cleaned_area
          name: "Área limpa"
        - key: vacuum.aspirador.main_brush_left
          name: "Escova principal"
        - key: vacuum.aspirador.side_brush_left
          name: "Escova lateral"
        - key: vacuum.aspirador.filter_left
          name: "Filtro"

Here is the list of all attributes:

status: Charging
battery_level: 100
battery_icon: mdi:battery-charging-100
fan_speed: Balanced
fan_speed_list: Quiet,Balanced,Turbo,Max
do_not_disturb: off
do_not_disturb_start: 22:00:00
do_not_disturb_end: 08:00:00
cleaning_time: 2
cleaned_area: 2
cleaning_count: 39
total_cleaned_area: 222
total_cleaning_time: 302
main_brush_left: 294
side_brush_left: 194
filter_left: 144
friendly_name: Aspirador
supported_features: 2047

Did I miss something here?

Thanks a lot!

See https://codepen.io/dalhundal/pen/KpabZB for inspiration for SVG

receiving

https://my.url.com/local/monster-card.js?v=1:60:33 Uncaught ReferenceError: _getEntities is not defined

using:

      - type: "custom:monster-card"
        show_header_toggle: false
        show_empty: false
        card:
          title: Eating power
        filter:
          include:
            - domain: light
              entity_id: '*lamp'
              state: 'on'
            - domain: light
              state: 'on'
              entity_id: "*_level"
            - domain: switch
              state: 'on'
              entity_id: "*_switch"
            - domain: fan
              state: 'on'
          exclude:
            - domain: switch
              entity_id: "*modem*"
        

if I comment out the exclude, it works fine.

As discussed on Discord, we should probably change the colors on the card to make them in line with the standard practice. I am attaching a few examples that I found online that should make the color choices clear:

Looks like Green for disarmed, Amber for Home/Night, and Red for Armed is the way to go.

Padlocks (open/close) with the right colors should be perfect for icons.

A card that displays a multiline text in a nicer format and allows for a custom icon either from sensor or specified in the config or if both missing, shows a mdi:beer.

Sample input

The Great Deciever West Coast Beersmiths
Flyktsoda IPA Omnipollo
Magic #411  Omnipollo
Hilma Omnipollo
Original Ice Cream Pale Ale Omnipollo
Milkshake IPA (Strawberry) Omnipollo
Half & Half Lemonade Iced Tea IPA Evil Twin Brewing
Habanero Sculpin Ballast Point Brewing Company

According to docs, show_header_toggle on monster-card not available at the moment

I have noticed this odd issue with my monster cards that show up as blank until I hit "refresh" when coming from another tab. I am using Chrome 67 on Windows 10, have also cleared cache but the issue keeps coming back. This is what it looks like:

This is what my configuration looks like, don't want to crowd the space so linking to my github:

https://github.com/dshokouhi/Home-AssistantConfig/blob/master/ui-lovelace.yaml#L459

associated error:

2:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    at Object.<anonymous> (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at Generator.next (<anonymous>)
    at n (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at self.babelHelpers.asyncToGenerator (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at new Promise (<anonymous>)
    at Object.self.babelHelpers.asyncToGenerator (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at Object.workbox.core.j.fetch (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at :8123/frontend_latest/workbox-v3.3.0/workbox-strategies.prod.js:1
    at Generator.next (<anonymous>)
    at n (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
2:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'ServiceWorkerGlobalScope': 'only-if-cached' can be set only with 'same-origin' mode
    at Object.<anonymous> (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at Generator.next (<anonymous>)
    at n (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at self.babelHelpers.asyncToGenerator (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at new Promise (<anonymous>)
    at Object.self.babelHelpers.asyncToGenerator (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at Object.workbox.core.j.fetch (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)
    at :8123/frontend_latest/workbox-v3.3.0/workbox-strategies.prod.js:1
    at Generator.next (<anonymous>)
    at n (:8123/frontend_latest/workbox-v3.3.0/workbox-core.prod.js:1)

It would be great to ba able to filter entities based on attributes.
Some usecases for it:
I have a custom_component to interact with ha-dockermon
This component and many others add attributes with info to make them differentiate from the others:

with an attribute filter, users could easy filter on icon, component, version :)

For device_trackers there is a source attribute that would be good for filtering.

idea for filtering:

- type: custom:monster-card
  card:
    type: glance
    title: Monster
  filter:
    include:
      - attribute: icon
        state: 'mdi:docker'

Allow a new card that would:

• reverse all monster card filters to show everything else that is not matching
• use current unused entities card to filter down even more
• allow extra filtering to avoid showing automations or groups for example

Card that fills with color meter-style horizontally or vertically. Maybe as an option for bignumber? Could be used together with horizontal stacks to create a row of meters or combined with gauges and bignumber.

@davec proposed:

See image of an example security alarm keypad here - https://goo.gl/images/8fKdwb 24

I was trying to suggest that like a PIN number for your credit card you may use a word that translates to numbers on a keypad, such as you would find on some alarm panels and most phones.
Your access card is still a sequence of numbers, the letters on the buttons are simply a reminder of what key is what letter.

Users report that using panel: true in lovelace with monster-card breaks.

If any card inside a vertical-stack-in-card contains an input_select entry, it will keep flashing (there's a short animation as the input_select loads, and it will keep running).

This seems to be because setConfig of all child cards are called frequently (every time the hass property is updated?).

I'm not really up to speed on how things are supposed to work, but the docs tells me that setConfig should be run rarely. I believe the problem can be fixed by moving the line
root.childNodes[index].setConfig(item) from the set hass() statement to the setConfig() function in vertical-stack-in-card.js.
At least that seems to work for me.

I did not make a pull request, because I do not know WHY the setConfig call is where it is currently. Perhaps it needs to be there to update child cards in configurations I have not encountered?

Build a card for toggle entities to allow just the icon in big format and a custom title underneath.

• use entity icon by default
• allow custom icon
• action should be on/off

Difference from entity-picture with image states is for lights that show color and respect themes

Since home-assistant/frontend#1404 we can use entity-attributes-card in other entities card.

We need a fix to remove the need for entity as the custom card no longer needs it.

The alarm card does not show the keypad because it is checking if code_format return type is a Number. Many panels that exist in the current components for homeassistant return code_type as a string regex.

Currently mentions only alarm_control_panel.manual, but should say any alarm in domain alarm_control_panel

Should this config be valid? The state bit from the prior entity-filter wasn't mentioned for monster-card but I assume it supports similiar.

    - type: "custom:monster-card"
      card:
        type: entities
        title: On
      filter:
        include:
          - domain: light
            state: 'on'
          - domain: switch
            state: 'on'
        exclude:
          - entity_id: "*undercounter*"
          - entity_id: switch.outside_front
          - entity_id: switch.outside_lights
          - entity_id: switch.dryer_switch
          - entity_id: switch.washer_switch

This generates an error:
local/monster-card.js:52:46 Uncaught TypeError: Cannot read property 'filter' of undefined

I assume this is just a configuration issue on my part but there wasn't sufficient examples for me to see what I might be doing wrong.

EDIT:
Rereading the docs it sounds like entity_id, state, and domain may be mutually exclusive under filters. I tried the following but got the same error:

        include:
          - state: 'on'

After a configured number of digits are entered, say 4, automatically call the service with the code. Allow the user to press "away", "home", etc before code is submitted and that becomes the arm type that is sent with the code.

Example config:
auto_arm_length: 4
default_auto_arm: arm_away

Example UX:
User presses "Arm home" (this changes from the default arm_away)
User presses 4 digits and after pressing the 4th digit service is called with arm_home and the 4 digits.
Text field clears, arm_away set as default button again. Card updates according to whatever state changes as it does now.

Add "severity" for bignumber-card as background

If I want to have multiple floorplans in one card, it's impossible to read top/left values as they show just under the top panel and floorplan is further below, need of scrolling.

Would be great if box could just float and be visible all the time

Create entity-attributes-card:

• allow choosing attributes to display
• allow renaming attributes
• allow renaming card

Attributes should show on card as a table with alternating color rows

Clicking bignumber card doesn't open more-info dialog

Maybe you could add a custom color into severity. For example:

        - type: "custom:bignumber-card"
          title: Bedroom Temperature
          entity: sensor.temperature_bedroom
          severity:
            level1: 0
              - color: #FFF000
            level2: 15
              - color: #F0F0F0   
            level3: 25
              - color: #000000

Just an idea. This is good for setting colors on temperatures sensors (blue for cold levels, red in high temp.)

Firefox

Chrome

Example:

    - type: custom:monster-card
      card:
        type: entities
      filter:
        include:
          - entity_id: sensor.automations_on
          - entity_id: sensor.automations_all
          - entity_id: automation.*

This will list all automations, followed by sensor.automations_all and sensor.automations_on.

I assume entities are displayed in alphabetical order. In order of matching by include list would be more intuitive and homogenized with how other cards work.

Create a custom component that can:

• display cursor coordinates in % when on top of images
• can create a floating div with the coordinate on click that users can copy/paste

Create a new custom entities card allowing to control entity attributes for lights (brightness or color) and fans (speed)

Some potential inspiration: https://community.home-assistant.io/t/custom-ui-with-buttons-fan-control/13808/6

Demo Fan/Lights/Switch available: https://www.home-assistant.io/components/demo/

A Personal greeter card that shows calendar events from calendar sensor and time of day and any additional sensor that the user wants

dynamic backgrounds from unsplash using their api lib already available

https://github.com/unsplash/unsplash-js

got a mock card layout as a suggestion

_{Sent with GitHawk}

Option to remove sensor titles on Glance Card and for Glance Card itself

Monster card: Add support for friendly name filtering using *

Loving these new cards, and have set up a nice panel for my rooftop solar using the guage and big number cards. Looks awesome, except on my iPhone using both the HA app and Safari.

On loading up the Lovelace UI, I get a big red box with the following message:

n.setConfig is not a function. (In 'n.setConfig(t)', 'n.setConfig' is undefined

Under that is just the usual settings for the card. This is happening for all 5 cards I have added using guage and big number cards.

In the backend for HA in the error log, I have the following for each card:

2018-07-18 10:21:18 ERROR (MainThread) [frontend.js.es5.201807080] https://ha.smns.me/local/bignumber-card.js?v=1:2:14 TypeError: Cannot call a class constructor without |new|

Bignumber card to have better scaling Maybe even alow scla number like gauge to have the height match

Card tracker does not update ui-lovelace on hassio. It shows it's updated but on refresh / check it goes back to old version. Also the sed temporary file is not written, so maybe a permissions problem.

_{Sent with GitHawk}

Thank You for you work!

I would like to ask a new Lock Card!
Something like this

Using the config below with some automations sharing the name will result in exclusion not being applied correctly.

      - type: custom:monster-card
        filter:
          include:
            - name: '*bedroom*'
               options:
                 secondary_info: last-changed
            - name: '*bedside*'
          exclude:
            - domain: automation
        card:
          type: entities
          title: Bedroom
          show_header_toggle: false

Probably due to #45

cc: @minchik

I was thinking it would be really neat if we could have a card that only shows up when entity-filter cards defined underneath have no entities and have show_empty: false defined. Think of it as a user who wants to place all safety/security items in entity-filters. Let's say I have a few different filters setup to show if the house detected leaks, smoke detectors going off, doors/windows open or unlocked, alarm tripped etc... If none of those entities are shown the panel/card would show a green check mark or whatever the user defined. This would allow for a quick check on the status of items with user friendly feedback that all is well.

Example:

    - type: "custom:monster-card"
        show_empty: false
        card:
          title: Low Battery
          show_header_toggle: false
        filter:
          include:
            - domain: sensor
              entity_id: '*battery*' 
              state: < 20     

I think the numbers are a bit too big. Definetely there is a bug when in horizontal stack you put 3 cards: in portait mode the third number is cutoff, in landscape is totally absent

Correct sizing when using with panel: true

Attributes card allow more custom approach:

- type: custom:entity-attributes-card
  title: Attributes Card
  attributes:
    - key: media_player.bedroom.attributes.app_name
      name: Application
    - key: media_player.bedroom.attributes.media_title
      name: Media center
    - key: climate.bedroom.attributes.current_temperature
      name: Bedroom TV

Allow card tracker to use custom folders. This would cover the case for users that just wish to git clone the complete custom-lovelace in their www

This probably needs an implementation in https://github.com/custom-components/custom_cards

Add versioning to cards. This should permit users to:

• Find out when new versions are out
• Get a change-log of updates
• Allow for easier cache busting than manual ?v=X