Bully89
September 1, 2023, 8:00am
292
Good morning!
Looking for a bit of help, I’m overlooking something but I can’t figure it out.
In this case, I’m using the templates created by @panhans , in particular the title_card card.
Have a sensor to give me a random message and would like to have the title showcase that state, see below.
>- {{ states('sensor.greeting_time') }}, {{ user }}{{["!", ".", ". 😉", "! 👍", ". 🤩"] | random }}
The whole code of the card:
type: custom:button-card
template: title_card
name: >-
{{ states('sensor.greeting_time') }}, {{ user }}{{["!", ".", ". 😉", "! 👍",
". 🤩"] | random }}
label: #test
show_label: false
Anybody has a tip on how to display it correctly
xvlw
September 2, 2023, 6:39pm
293
Can I get the code for the changes you made to the graph card
NovaG
September 7, 2023, 10:17am
294
Thanks for this.
It’s great. I made some of my own if people want the code let me know.
3 Likes
ald112
September 7, 2023, 10:18am
295
did you figure out how to solve it?
ald112
September 7, 2023, 11:22am
296
someone succeed in creating slider of temperture and volume of light in the same window?
NovaG
September 8, 2023, 5:13am
298
Here you go.
Let me know how it goes
type: custom:button-card
label: '[[[ return entity.attributes.current_temperature + "°C"]]]'
show_icon: false
show_label: true
show_name: false
show_state: true
entity: climate.living
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
button:
card:
type: custom:mushroom-chips-card
alignment: center
styles:
card:
- background: var(--contrast2)
- font-family: HK Nova
- padding: 16px
- max-width: 50px
chips:
- type: template
entity: climate.living
tap_action:
action: call-service
service: climate.set_hvac_mode
target:
entity_id: '[[[ return entity.entity_id; ]]]'
data:
hvac_mode: heat
haptic: medium
icon: mdi:fire
icon_color: |
[[[
if (entity.state == 'heat') {
return 'red';
}
]]]
card_mod:
style: |
ha-card {
padding: 0 5px;
--chip-icon-size: 16px;
{% if is_state('climate.living', 'heat') %}
--chip-background: rgba(255,205,210,.40);
{% else %}
--chip-background: rgba(100,100,100,0.10);
{% endif %}
}
- type: template
entity: climate.living
tap_action:
action: call-service
service: climate.set_hvac_mode
target:
entity_id: '[[[ return entity.entity_id; ]]]'
data:
hvac_mode: cool
haptic: medium
icon: mdi:snowflake
icon_color: |
[[[
if (entity.state == 'cool') {
return 'blue';
}
]]]
card_mod:
style: |
ha-card {
padding: 0 5px;
--chip-icon-size: 16px;
{% if is_state('climate.living', 'cool') %}
--chip-background: rgba(164,210,255,1);
{% else %}
--chip-background: rgba(100,100,100,0.10);
{% endif %}
}
- type: template
entity: climate.living
tap_action:
action: call-service
service: climate.turn_off
target:
entity_id: '[[[ return entity.entity_id; ]]]'
haptic: medium
icon: mdi:power
card_mod:
style: |
ha-card {
padding: 0 5px;
--chip-icon-size: 16px;
--chip-background: rgba(100,100,100,0.10);
}
styles:
grid:
- grid-template-areas: '"l" "s" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--contrast2)
- font-family: HK Nova
- padding: 16px
- max-width: 190px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
label:
- justify-self: start
- font-size: 24px
- margin: 4px 0 8px 0
- color: var(--contrast20)
state:
- justify-self: start
- font-size: 14px
- margin: 4px 0 22px 0
- color: var(--contrast8)
- text-transform: uppercase
state:
- value: heat
styles:
card:
- background: var(--red)
icon:
- color: var(--black)
name:
- color: var(--black)
- value: cool
styles:
card:
- background: var(--blue)
icon:
- color: var(--black)
name:
- color: var(--black)
5 Likes
Numotiv
September 10, 2023, 12:20am
300
Sure, I’ll grab it for you when I’m home. I’ve been away with my new born in the hospital. Haven’t had much chance to visit here.
EDIT: Here are the changes I made to the graph. Note it looks good on my iphone…you might have to play around with some numbers for your specific setup.
/* Graph card style */
.graph {
background: var(--blue-tint);
display: flex;
overflow: hidden; /* Temporary fix for graph overflow bug */
height: 120px;
}
.graph .name {
font-size: 12px;
line-height: 18px;
background: var(--black);
color: var(--white);
padding: 6px 10px;
border-radius: 100px;
z-index: 1;
}
.graph .icon {
display: none;
}
.graph .info {
margin-top: 0;
padding: 24px 24px 0 24px;
order: 1;
}
.graph .value::after {
content: '°';
}
.graph .measurement {
visibility: hidden !important;
}
.graph hui-graph-header-footer {
order: 3;
}
.graph .header {
padding: 0 24px;
order: 2;
margin: 4px 0 -48px 0;
z-index: 1;
}
3 Likes
Congrats on becoming a parent! All the best
1 Like
ald112
September 12, 2023, 4:00pm
302
someone know how to create slider for light temperature?
same as dynamic slider for current open lights?
thanks!!
ald112
September 12, 2023, 4:34pm
303
hey, can you explain what you did in your animal page? maybe I will use it (:
Would it be possible to post the code for the cover rounded card that shows the position of the shutter on the slider? Can’t get it to work sadly
update: found your code and applied it in a pop-up card, functionality works perfectly but the popup card doesnt inherit the same layout as the rounded cards. anyone has any advice on how to apply the same layout from the rounded theme to the popup card?
code + screenshots below:
code for the “rolluiken button card”
type: custom:button-card
icon: phu:blind-tilt-open
entity: cover.open_ramen
name: Rolluiken
show_label: false
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: none
haptic: medium
state:
- value: 'open'
styles:
card:
- background-color: var(--yellow)
- box-shadow: none
icon:
- color: var(--black)
name:
- color: var(--black)
label:
- color: var(--black)
- opacity: '0.5'
- value: 'closed'
styles:
card:
- background: var(--contrast2)
- box-shadow: none
icon:
- width: 24px
- color: var(--contrast20)
name:
- color: var(--contrast20)
label:
- color: var(--contrast9)
styles:
icon:
- width: 24px
img_cell:
- justify-content: flex-start
- margin-top: '-4px'
name:
- justify-self: start
- font-size: 14px
- margin-bottom: 0px
card:
- height: 84px
- border-radius: 24px
- padding: 12px 0 12px 14px
- box-sizing: border-box
- '--mdc-ripple-press-opacity': 0
label:
- justify-self: start
- font-size: 14px
code for the popup card itself
type: custom:popup-card
entity: cover.open_ramen
card:
square: false
type: grid
cards:
- type: custom:mushroom-cover-card
entity: cover.screen_mbr
show_position_control: true
show_buttons_control: true
name: Screen master
card_mod:
style: |
ha-card {
{% if states['cover.livingroom'].state == 'open' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.livingroom'].state == 'closed' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.livingroom'].state == 'opening' %}
background-color: var(--yellow);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.livingroom'].state == 'closing' %}
background-color: var(--orange);
{% endif %}
}
- type: custom:mushroom-cover-card
entity: cover.velux_mbr
show_position_control: true
show_buttons_control: true
show_tilt_position_control: false
name: Master bedroom
card_mod:
style: |
ha-card {
{% if states['cover.kitchen'].state == 'open' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closed' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'opening' %}
background-color: var(--yellow);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closing' %}
background-color: var(--orange);
{% endif %}
}
- type: custom:mushroom-cover-card
entity: cover.screen_dressing
show_position_control: true
show_buttons_control: true
name: Dressing
card_mod:
style: |
ha-card {
{% if states['cover.kitchen'].state == 'open' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closed' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'opening' %}
background-color: var(--yellow);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closing' %}
background-color: var(--orange);
{% endif %}
}
- type: custom:mushroom-cover-card
entity: cover.velux_badkamer
show_position_control: true
show_buttons_control: true
name: Badkamer
card_mod:
style: |
ha-card {
{% if states['cover.kitchen'].state == 'open' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closed' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'opening' %}
background-color: var(--yellow);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closing' %}
background-color: var(--orange);
{% endif %}
}
- type: custom:mushroom-cover-card
entity: cover.velux_gastenkamer
show_position_control: true
show_buttons_control: true
name: Gastenkamer
card_mod:
style: |
ha-card {
{% if states['cover.kitchen'].state == 'open' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closed' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'opening' %}
background-color: var(--yellow);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closing' %}
background-color: var(--orange);
{% endif %}
}
- type: custom:mushroom-cover-card
entity: cover.velux_bureau
show_position_control: true
show_buttons_control: true
name: Bureau
card_mod:
style: |
ha-card {
{% if states['cover.kitchen'].state == 'open' %}
background-color: var(--blue);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closed' %}
background-color: var(--red);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'opening' %}
background-color: var(--yellow);
}
:host {
--primary-text-color: black;
}
{% elif states['cover.kitchen'].state == 'closing' %}
background-color: var(--orange);
{% endif %}
}
columns: 2
dismissable: true
title: Rolluiken
right_button: Alles op
left_button: Alles neer
left_button_action:
service: cover.close_cover
data:
entity_id:
- cover.screen_dressing
- cover.screen_mbr
- cover.velux_badkamer
- cover.velux_bureau
- cover.velux_gastenkamer
- cover.velux_mbr
size: normal
right_button_action:
service: cover.open_cover
data:
entity_id:
- cover.screen_dressing
- cover.screen_mbr
- cover.velux_badkamer
- cover.velux_bureau
- cover.velux_gastenkamer
- cover.velux_mbr
1 Like
please do so, also looking forward to it
Joordyy023
September 14, 2023, 7:44pm
307
Does anyone managed to recreate the 30 Sec Back/Forward button in the Sonos card?
I mean the card/button it self is just a simple copy. But anyone been succesfull with the script to really rewind or forward the music which is playing?
Thanks for all the help so far in this topic & especially @LE0N for his awesome design!
TouTje
September 15, 2023, 1:01pm
309
Bully89:
>- {{ states('sensor.greeting_time') }}, {{ user }}{{["!", ".", ". 😉", "! 👍", ". 🤩"] | random }}
This won’t work because your code is jinja specific while custom button card is javascript. It’s probably possible with JavaScript, but I don’t have the knowledge for this.
1 Like
Bully89
September 15, 2023, 2:40pm
310
Thanks for the reply. Also not sure how to, so was hoping that somebody would but no luck yet. Will keep trying
ald112
September 15, 2023, 2:49pm
311
someone created energy consume \ cost ROUNDED card? and want to share? (:
