Initial attempt at creating the room card #125
Conversation
|
@CM000n Can you add the WIP label to this pull request? |
|
Of course, no problem 🙂 |
|
Thanks for creating the PR Bavo! The only thing i can't figuring out is making the background of the buttons on the right being addaptive. I mean it have different shapes depening on the screensize + how much grid rows (1, 2 and 3...). I hope someone can take a look at the code and fix this. :) |
|
I thought i had already done that for the icons. |
|
Wow! This is awesome!😍 |
|
My code now (icons do not respond to states) room_test:
tap_action:
action: more-info
color: var(--google-grey-500)
show_icon: true
show_name: true
show_label: true
size: 45%
aspect_ratio: 1/1
label: |-
[[[
var temperature = entity.attributes.room_temperature;
if (temperature == null || isNaN(temperature)) {
var temperature = entity.attributes.temperature;
if (temperature == null || isNaN(temperature)) {
var temperature = entity.state;
if (temperature == null || isNaN(temperature)) {
var temperature = '-';
}
}
}
return temperature + '°C'
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: 50%
- border: 2px solid var(--card-background-color)
- width: 24.5px
- height: 24.5px
- position: absolute
- left: 50%
- top: 50%
- transform: translate(-50%,-50%)
- margin-top: 35%
- margin-left: -35%
- line-height: 0
- display: grid
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
value: unavailable
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 5px
grid:
- grid-template-areas: '"n n n i1" "l l l i2" "i i . i3" "i i . i4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
- justify-items: center
icon:
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- background-color: "rgba(var(--color-theme),0.05)"
- border-radius: 50%
- width: 75%
- height: 75%
- max-width: none
- max-height: none
- position: absolute
- left: 50%
- top: 50%
- transform: translate(-50%,-50%)
- margin-top: 25%
- margin-left: -25%
name:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 6px
- margin-top: 3px
label:
- justify-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 6px
- margin-top: -50%
state:
- justify-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 6px
custom_fields:
i1:
- border-radius: 50%
- width: 80%
- height: 80%
- line-height: 0
- display: grid
- background-color: >
[[[
return "rgba(var(--color-yellow), 0.2)";
]]]
i2:
- border-radius: 50%
- width: 80%
- height: 80%
- line-height: 0
- display: grid
- background-color: >
[[[
return "rgba(var(--color-green), 0.2)";
]]]
i3:
- border-radius: 50%
- width: 80%
- height: 80%
- line-height: 0
- display: grid
- background-color: >
[[[
return "rgba(var(--color-red), 0.2)";
]]]
i4:
- border-radius: 50%
- width: 80%
- height: 80%
- line-height: 0
- display: grid
- background-color: >
[[[
return "rgba(var(--color-blue), 0.2)";
]]]
custom_fields:
i1: >
[[[
return `<ha-icon icon="mdi:lightbulb" style="width: 50%; height: 50%; color: rgba(var(--color-yellow),1);"></ha-icon>`
]]]
i2: >
[[[
return `<ha-icon icon="mdi:power-plug" style="width: 50%; height: 50%; color: rgba(var(--color-green),1);"></ha-icon>`
]]]
i3: >
[[[
return `<ha-icon icon="mdi:thermometer" style="width: 50%; height: 50%; color: rgba(var(--color-red),1);"></ha-icon>`
]]]
i4: >
[[[
return `<ha-icon icon="mdi:speaker" style="width: 50%; height: 50%; color: rgba(var(--color-blue),1);"></ha-icon>`
]]]
notification: >
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
}
]]]and - type: "custom:button-card"
template:
- room_test
- blue_no_state
entity: sensor.living_room_wall_multi_sensor_temperature
name: Bathroom
icon: mdi:shower |
|
@sildehoop First of all thanks for the code you shared with me making this Room Card possible. Like i said before the hardest part i think is making the icons responsive but with the code style you using it's hard to accomplish this (for me it this...). That's why i taked out some parts to make all icons responsive and making the code as much styling the minimalist checks to be passed. I'm sure there will be someone that are more skilled than me that can fix that issue, i think it's also one of the only issues that need to be fixed apart from some variables names etc fixes. |
|
Sorry if I came off a little agressieve I hadden looked good at your code and didn't now how I did is was not good I am going to try myself an let you now if I get it working |
|
@sildehoop I have integrated some of your changes posted above + added the notification icon. I did not change the icons on the right by as you showed in your example. This allows us to add some tap_actions to the icons ;) |
|
Made every icon in the sidebar optional. The icon is not displayed when no entity_id is specified for the icons 1-4. Still todo:
PS: @CM000n I think I broke the "format code" check 😕 |
|
@bavo The format is broken because all the icon-items have a |
|
😄🤦♂️ |
This is very hard if you use grid so maybe we can make the icons gray when off that is easier and this way you can toggle them on and off |
|
Added new commit where the predefined icon is removed and instead we use the icon from the entity |
|
Does anyone have any idea's on how to give the end users control over the colors on the right side? |
|
Something else I'm hoping to get your opinion about: Should we fix the temperature of the room card right below the name? |
|
The temperature sits in an other grid row and moved by -50 but I don't now how to fix thad |
You could extend the variables to chose a color template And maybe extend the color templates with additional types of states, specified to the type of device for instance: Or set certain colors templates to be used when the entity variable is a certain type of device. This can be achieved with if/else statements. This approach is less customizable, but better to use for those with less knowledge or effort to maintain his lovelace-files. |
Changing some parameters in de label and name grid should make them appear close to each other: By changing |
In my local setup i have some more color options: This allows me to use the But this would mean another breaking change in every configuration 😒 |
bavo
force-pushed
the
new-room-card
branch
4 times, most recently
from
543ab9b to
130b82d
Compare
|
Testing the new changes on the room card and I getting mixed results.. I don't know if everyone if going to use it with more than 2 cards next to each other. But I will use it 2 cards.. And get this results instead and I'm more pleased with. But this changes makes the name / label on the cards get wrong position.. But works great with 1 or 2 cards. |
|
If you choose to set:
And as I want to trigger POPUP card for more info about the room from the entity so couldn't I get the temperature shown so I changed it so you have to add entity_temp: sensor.yoursensorhere so get the temperature in the label.. from: to: I don't know if this is the right was to do it but I got I working.. |
bavo
force-pushed
the
new-room-card
branch
4 times, most recently
from
0c4bf47 to
040b6c7
Compare
|
I like this solution but it doesn't work for attributes 🤔 |
I don't think it is necessary to dynamically show the icons gray when off is a good solution I think. You can add yourself to the credits to @bavo 😉 more than deserved |
|
I did integrate the on/off translations when neither temperature or brightness is selected and a default fallback to show the room state when its not on or off |
|
@CM000n I think this is ready for release 😄 |
| - font-size: "12px" | ||
| - filter: "opacity(40%)" | ||
| - margin-left: "6px" | ||
| - margin-top: "-30%" |
There was a problem hiding this comment.
Temporary fix this does not work when the text gets larger
- margin-top: 20px
- position: absolute
|
If I select the dark theme, the icons on the right side show a separate background. This can be fixed by adding; To the widget_icon_room card style. It will get rid of that weird background issue. Edit; |
|
Hi @bavo I don't know how to submit proposals... I hope this is okay:
Here is the code comparison: https://www.textcompare.org/yaml/?id=62240f625053ac2c15ff2a3d ETA: I see now that widget_icon_room refers to the one room icon, but adding actions & haptic to that (points 2 & 3) affect (enable) it on the i1-i4 entities? I'm very confused but it works. Thank you to the 3 of you I see, I love the card. PS: ripple on mobile (iOS) isn't great (square borders). Shown here. |
|
I'll look into this 😃 |
|
Hello, I can't do it with "horizontal-stack" because those cards don't seem to work woth it - I see a white, blank bar instead of the square. |
These cards work with Horizontal-stack. Otherwise try Grid card. Does one card work for you? |
Hello, Yes, one card does work for me, but if I want to put two in horizontal-stack, I see only small rectangles as a result: When I was copying my yaml to send it, I saw that I didn't allign content of the "room-card" properly (it was mismatched with the header). Thank you for the reply! If you hadn't asked me for the yaml, I wouldn't have found the bug. Regards, |
|
Hello, sorry to bother you, but please tell me how to make a beautiful 1 small card. If the card is 1, then it is very large |
Put it within a Grid card and set the column number to your liking. The card will get smaller, and of course occupy the left side only. |
thank you very much!) have a nice day |
|
I've added a button to each room that summons the robot vacuum on that floor to come and clean:
Is there a way I can change the button to active when the vacuum is active? vacuum.henry states are 'cleaning', 'paused' & 'docked' |
See the image at: https://community-assets.home-assistant.io/original/4X/2/5/4/25455a9fe8e4a73931f632c1e1e85ee2c525d101.png
Still some work to do:
All credits go to AndyVR and @sildehoop