A fluffy banner card for Home Assistant 🥰
License: MIT License
Is this the supposed way to use map_state to set an icon instead of state?
- type: custom:banner-card
background: "#37474F"
heading: "APC UPS"
entities:
- entity: binary_sensor.ups_online_status
name: Status
map_state:
on: mdi:check
off: mdi:close
As a user I would like to have the ability to:
Example:
Expected:
When there are no alerts, the banner card should not be visible at all
Actual:
When there are no alerts, the banner card is present, with only the title shown.
If an entity, among others, is offline/not available the card does not show any entities.
Card shows an error: Can't find entity xxxxxx.xxxxxx
hello
it would be great to integrate this into the banner
is it possible?
thanks
entities:
- entity: cover.estore_cozinha
full_row: false
icon: 'mdi:blinds'
name: Cozinha
type: 'custom:slider-entity-row'
title: null
type: entities
Hi
Is any chance to add support to new store HACS ?
Trying to show my temperature reading and still figuring out how to display a dual thermostat with the pop up card, but in the meantime I am trying to make the entity not send me anywhere when I click on this. I can't see how to do this.
Another enhancement for this card:
Could you add the option to show media players only while there playing some media? I got some media players and cast groups but it looks very confusing when I add them to a single banner card. Its the opposite of what I would like achieve, a clean simple overview.
:-)
I'd love to be able to specify tap and hold actions. This is what I have currently but clicking or holding the icon just shows history pop-up.
type: 'custom:banner-card'
heading: "\U0001F6AA Front Door"
background: '#434954'
entities:
- entity: binary_sensor.front_door_open
name: Open/Closed
map_state:
'on': 'mdi:door-open'
'off': 'mdi:door'
- entity: lock.front_door
name: Lock
map_state:
locked: 'mdi:lock'
unlocked: 'mdi:lock-open-outline'
tap_action:
action: call-service
service: lock.lock
service_data:
entity_id: lock.front_door
hold_action:
action: call-service
service: lock.unlock
service_data:
entity_id: lock.front_door
- entity: sensor.ring_front_door_last_ding
name: Last Ring
Not sure if that is something that is possible. Thanks for the add-on and your time on this already!
I'm looking to make some changes but need to know how to build the project.
I am trying to resize the banner inline and I am not sure how to go about it. I tried card-modder but it doesnt seem to work...
- type: vertical-stack
cards:
- type: custom:banner-card
background: "#EDE7B0"
heading: "\U0001F6CB Living room"
# link: /lovelace/living_room
style: |
.heading {
display: block;
font-size: var(--bc-font-size-heading);
font-weight: 150;
cursor: pointer;
align-self: stretch;
text-align: center;
}
entities:
- type: horizontal-stack
cards:
- type: custom:button-card
template: homekit_light
entity: switch.living_room_hallway
name: living hall
icon: mdi:lightbulb
- type: custom:button-card
template: homekit_dimmer
entity: light.living_room_chandelier
name: living room
icon: 'bha:chandelier'
- type: custom:button-card
template: homekit_light
entity: light.jackies_office_dimmer
name: jackies office
icon: 'bha:ceiling-lamp-round'
- type: "custom:button-card"
color_type: blank-card
- type: "custom:button-card"
color_type: blank-cardAny ideas
At the moment there seems to be a maximum of 3 entities that can be displayed per row before another row is created below it, would it be possible to increase this to 4 entities per row?
I first thought it was the length of the entity output or name length that dictated this but even with 'small' entities the maximum seems to be 3.
If the cover is completely opened or closed the button arrow up / down should by greyed out and should be not clickerable at all. Like it is in "Vanilla" HA
Hi,
With group i just see "off" or "on" not the toggle button...
Missing feature or bug ?
Thk's
P.S : Sorry for my english
Everything was working great but recently the icons for any light entities are not showing up. Any suggestions on how to fix this ?
Thanks for this excellent card !
Would it be possible to get the "Kitchen" and "Office" configuration of the screenshots ?
One of my banner cards does not seem to have any margins when viewed on mobile.
On PC browser:
On Mobile
The Living Room banner card does not have any issues, but the weather alerts does. Here's my card code for the two.
Living Room:
entities:
- entity: sensor.living_room_thermostat_temperature
name: Temperature
- entity: sensor.living_room_thermostat_humidity
name: 'Humidity '
- entity: switch.merossplug1
name: "\U0001F4FA TV"
heading: "\U0001F6CB Living room"
type: 'custom:banner-card'
Weather Alerts:
entities:
- entity: sensor.warnings
name: ' '
when:
attributes:
hidden: false
- entity: sensor.statements
name: null
when:
attributes:
hidden: false
- entity: sensor.advisories
name: null
when:
attributes:
hidden: false
- entity: sensor.watches
name: null
when:
attributes:
hidden: false
heading: ⚠ Weather Alerts
type: 'custom:banner-card'
Sensor that's used for weather alerts is Environment Canada
It will be good to have any TTS as and available configuration options. eg if i light is on we could say some thing over the air to turn off the lights.
tts:
platform: google_translate
language: en
entity_id: media_player.main_bedroom_speaker
Is it possible to implement a when statement with reference to another entities state?
eg:
type: 'custom:banner-card'
background: '#B0C2ED'
entities:
- entity: light.dining_room
name: Dining
- entity: script.1561637538159
icon: 'mdi:lightbulb'
name: Colour
action:
service: script.1561637538159
when: [{{states("light.dining_room")}},"on"]
heading: "Light"
Hi! First of all, thanks for this great card!
Is there a change to add the posibility to don't show any header, and just put the sensors?
Please add support for group of switch entities.
When the cover is not completely closed, it is not possible to open the cover because the arrow up is still deactivated
In a cover position between 1 and 99 both arrows have to be active.
used with homematic ip covers
sorry, there is alreadyan issue created. I close this
the card always disables opening cover, as if the cover was already open all the way, when it isn't. my covers don't have a sensor to state their position.
I tried changing
const isclosed = state === "closed";
into
const isclosed = state === "unknown";
oddly it works for one cover out of two (a template one I based on 2 switches (cucina)) but doesn't for a native cover switch (salotto) on the second it inverts the issue showing close grayed out...
Great work on this card !
I found a little bug when displaying a media_player. If the title is too long, then, the controls disappear.
Hello,
I'm using Banner-Cards on my status screen when I display entities currently in used (in "on" or "playing" state) - for this purpose I use a lot of "when" clauses - it works perfectly.
I think the only thing that has very little customization options is... the look of media-player. For this purpose, I'd like to display just small media-player with regular attribute display (single cell instead of full-width of a row) and I guess this is not possible now. Am I right?
Can you think about enriching customization options for media-players?
Anyway... Thanks for the great work done so far... I really appreciate it :)
Hi !
I tried to use the new feature from v0.7 to have automatically the light or dark text in the heading with a black background but it does not seem to work for me.
Thanks for adding the documentation for the CSS theming but again I can't seem to get this to work. Can you give an example?
Great custom card however I've finding it hard to override the friendly name using entities.name. Can you give an example of usage?
I use the input_boolean as a switch, how do i make to appear as a switch?
Hey @nervetattoo
I'm have issues with the latest update. the mdi Icon set doesn't seem to be recognized.
Version Installed: 0.10.0
Please Help!!
Code Used:
`type: 'custom:banner-card'
heading:
Since I upgraded to 0.100.x today non of my input boolean or toggle switches within my banner cards are displaying.
I’m not seeing any errors and the input Boolean are displaying and working correctly in a standard lovelace card view. This is the same across iOS and Mac with Safari and Chrome.
Great card! Make Banner Card greater, with some more customization, please.
Just my 2C.
I have a script to activate the nightlight hue scene and have added the script as an entity to the banner-card. It would be nice if I could execute the script by tapping that part of the card; currently it opens more info which has an execute button.
Alternatively, is it possible to add tap_action customization options?
Please add the capability to change icon color in map_state. This is important when changing state. It will be very useful
Thanks
I’d like to adjust the height of the heading.
Because I hope there is no much blank lines above and below the title in heading.
So the card height can be reduce.
I believe this can do so by edit some codes.
But I’m not family with CSS.
Could you give me a help?
Thanks
Since this weekend i'm getting the following error when trying to open a lovelace window using banner cards:
TypeError: r is undefinedbanner-card.js:132:1533
set hass/this.entityValues</< https://xxx.xxx/community_plugin/banner-card/banner-card.js:132
set hass/this.entityValues< https://xxx.xxx/community_plugin/banner-card/banner-card.js:132
filter self-hosted:312
set hass https://xxx.xxx/community_plugin/banner-card/banner-card.js:132
createCardElement https://xxx.xxx/frontend_latest/chunk.cfddae4e0bcd25706f5c.js:5804
_rebuildCard https://xxx.xxx/frontend_latest/chunk.cfddae4e0bcd25706f5c.js:5883
createCardElement https://xxx.xxx/frontend_latest/chunk.cfddae4e0bcd25706f5c.js:5804
r https://xxx.xxx/frontend_latest/app.29ef27ad.js:2
vi https://xxx.xxx/frontend_latest/chunk.cfddae4e0bcd25706f5c.js:4773
I tried looking for a non minified version of the script, to get more usefull information, but unfortunately i can't find it. As you can see i'm using HACS, but can't really find if it updated the plugin recently. There also does not seem a way to rollback a version, to see if that fixes the issue. I tried reinstalling the plugin, but that doesn't seem to fix the issue. The version information says the following:
Installed version: 0.5.0
Available version: 0.5.0
I haven't done any changes this weekend to my setup, so i'm pretty confident that isn't the problem.
Hello,
As described in other FR...
I'm using Banner-Cards on my status screen when I display entities currently in used (in "on" or "playing" state) - for this purpose I use a lot of "when" clauses - it works perfectly.
As you can imagine the number of entities displayed varies during the time - sometimes I have just single light displayed sometimes 4 of them, sometimes I have three windows opened sometimes just one. Currently, the entities are moving from place to place and if just a few o them are displayed then single row contains lights and windows and temperature sensors, which looks little messy.
Can you extend the Banner-Card to allow grouping the entities (in lines)... so I could separate temperature sensors (fixed number) from lights and windows (varies over the time). I mean if I have 3 columns for entities and just 1 is displayed in a group the remaining columns of the group stays empty. I mean something like this....
|Temp Sensor |Temp Sensor | |
|Light 1 | | |
|Window 1 |Window 2 |Window 3 |
|Window 4 | | |
|Mediaplayer |
Thanks for the great work done so far...
Related to #8
The cover arrows now visible and greyed out, but if the cover is closed for example to 20%, the up button is still greyed out while the down button is white. So its possible to close the cover fully and then open it again.
To solve this problem, the attribute current_position should be checked instead of the state of the entity.
Banner Card:
Home Assistant:
Is it possible to support icons from Material Design in the card heading, alongside the already supported Emoji's?
background: '#ffb5cc'
entities:
- entity: binary_sensor.bedroom_2_door
name: Door
- entity: light.bedroom_2
name: Bedroom
- entity: binary_sensor.window_bedroom_2
name: Window
heading: "\U0001F6CC Bedroom 2"
link: /lovelace/bedroom_2
type: 'custom:banner-card'
With the above code written in the lovelace UI editor, binary sensors will display off or on as the value.
A workaround is to set the value as such:
background: '#ffb5cc'
entities:
- entity: binary_sensor.bedroom_2_door
name: Door
map_state:
off:
value: Closed
icon: mdi:door-closed
on:
value: Open
icon: mdi:door-open
- entity: light.bedroom_2
name: Bedroom
- entity: binary_sensor.window_bedroom_2
name: Window
map_state:
off:
value: Closed
icon: mdi:window-closed
on:
value: Open
icon: mdi:window-open
heading: "\U0001F6CC Bedroom 2"
link: /lovelace/bedroom_2
type: 'custom:banner-card'
Hey,
i have some problems with the configuration:
Please can someone help me?
It would be a nice feature to be able to add some info in the title, using template and icons such as the following mock-up made by a Reddit user:
Hello
i am trying to change the slider on off for an icon
my code is:
type: 'custom:banner-card'
heading: "\U0001F6C1 Toalheiros"
background: '#B0C2ED'
link: /lovelace/bathroom
entities:
- entity: switch.toalheiro_wc_visitas
name: Visitas
map_state: null
'on': 'mdi:home-account'
'off': 'mdi:walk'
show_icon: true
show_value: true
- entity: switch.toalheiro_wc_1a
name: 1º Andar
- entity: switch.toalheiro_wc_suite
name: Suite
but it does not work. any ideias?
thanks
Hello,
I'm not an expert but I've done some modification in order to enable switch in your module with some modifications
What do you think ? it can be added ?
I really enjoy the work and want to help you if I can do anything :)
regards
julien
If an entity is not available it is shown as "Entity not ready" since 0.7.0
But if a WHEN-Clause is used (in my case, when: playing) a JS error occurs:
Uncaught TypeError: Cannot read property 'state' of undefined at banner-card.js at banner-card.js at Array.filter (<anonymous>) at HTMLElement.set hass [as hass] (banner-card.js) at layout-card.js?1566320465.0516434:178 at Array.forEach (<anonymous>) at HTMLElement.set hass [as hass] (layout-card.js) at HTMLElement.value (hui-root.ts:599) at HTMLElement.<anonymous> (hui-root.ts:68) at debounce.ts:22
I'm using this card for the persons page of our HA dashboard and I'd love to be able to show people's picture as background and have it grayed out when not home..
Great work on the card, VERY useful ! thanks !
Thanks for this card!
I'm thinking this will be great for a tablet interface, but I'm having alignment issues. The heights of different entity types vary, like those with a toggle vs. a text/numerical state vs. an mdi icon vs. media controls. They can differ in height by just a few px or so. So to get three cards in a row to end up with the same overall height, the entity types/states in the flex rows of each card need to be similar.
Please add the ability to change Name for the different states when map_state. E.g.:
entities:
- entity: switch.sonoff_irrigation21
map_state:
"off": mdi:power
name: "Sprinklers off" <-- Being requested
color: grey <-- Being requested issue #24
"on": mdi:power-cycle
name: "Sprinklers on" <-- Being requested
color: green <-- Being requested issue #24
action:
service: switch.toggle
Are we able to potentially change the heading color from the default black?
Many thanks for creating such a nice component. I love the design, however I'm facing some issues. The up blinds button is greyed out and this is only happening with this component. See attached picture.
https://imgur.com/a/C7HDZbI
Hope someone can help, is it possible to theme the buttons? I have the following values in my custom theme but the buttons stay white.
paper-toggle-button-checked-button-color: '#4ab52f'
paper-toggle-button-checked-bar-color: '#4ab52f'
paper-toggle-button-checked-ink-color: '#4ab52f'
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.