ciotlosm / lovelace-thermostat-dark-card Goto Github PK
View Code? Open in Web Editor NEW🌡 Thermostat card with a round and black feel to it
License: MIT License
🌡 Thermostat card with a round and black feel to it
License: MIT License
Users report that using panel: true
in lovelace with monster-card breaks.
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
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
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)
Add versioning to cards. This should permit users to:
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
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!
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.
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.
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.
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.
New card: Alarm with code buttons
Add "severity" for bignumber-card
as background
Create a custom component that can:
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'
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).
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 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
Allow a new card that would:
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.
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|
According to docs, show_header_toggle
on monster-card not available at the moment
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'
Monster card: Add support for friendly name filtering using *
Sent with GitHawk
Clicking bignumber card doesn't open more-info dialog
Create entity-attributes-card:
Attributes should show on card as a table with alternating color rows
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.
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
Correct sizing when using with panel: true
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.
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.
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.
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
Option to remove sensor titles on Glance Card and for Glance Card itself
Sent with GitHawk
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
@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.
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
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/
Bignumber card to have better scaling Maybe even alow scla number like gauge to have the height match
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.)
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.
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.
Difference from entity-picture with image states is for lights that show color and respect themes
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.