right here GitHub - andyblac/UI-Minimalist-Custom-Cards: A modified version of Minimalist Room Card.
Hello Andy, You are a lifesaver! I have updated the room card and everything is now working OK as seen below. You have lifted a heavy load from my head, Professor!. I get back if I encounter any issues.
2 Likes
Hello Andy,
Good evening and hope this message finds you well at your end. I wonder if you could please review my query and advice.
I have âmushroom-template-cardâ that shows the following:
washing machine & microwave animation when a washing machine or microwave starts. Below is the yaml config for the washing machine card. How can add this to the kitchen room like the spinning extractor fan. It would be great if I could see a spinning washing machine on the room card, but I do know how I can ass the card to the âhome.yamlâ file. Your assistance will be very much appreciated.
type: custom:mushroom-template-card
entity: input_select.microwave_status
icon: mdi:microwave
secondary: |-
{% if is_state('input_select.washing_machine_status_2', 'Running') -%}
Running
{%- else -%}
Off
{%- endif %}
icon_color: |-
{% if is_state('input_select.washing_machine_status_2','Running') -%}
blue
{%- else -%}
red
{%- endif %}
layout: vertical
primary: microwave
card_mod:
style: |
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
{% if is_state('input_select.washing_machine_status_2','Running') %}
animation: cook 1s linear infinite;
{% endif %}
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}
...
animations require a separate template file and then ad to sensor templates see here for examples
and to use them like this:
sensor_3:
entity_id: switch.front_garden_water_control
templates:
- sprinkler_animation
Status Card:
just added support for more state colour options, it now supports low, medium, high colour option like gauge card.
how to use see here UI-Minimalist-Custom-Cards/docs/usage/custom_cards/custom_card_andyblac_status.md at 227ef4ae73866617b16fc4ed3ae92a73d752d486 ¡ andyblac/UI-Minimalist-Custom-Cards ¡ GitHub
also, added support for 3 text based state values.
example:
- type: custom:button-card
name: "Electric Usage"
entity: sensor.mainspower_power
template:
- custom_card_andyblac_status
variables:
ulm_custom_card_andyblac_status_color_low_value: 1000
ulm_custom_card_andyblac_status_color_high_value: 3000
dowload the latest dev branch to test, please report any bugs, thanks.
https://github.com/andyblac/UI-Minimalist-Custom-Cards/archive/refs/heads/dev.zip
hi Andy, thank you for share your project.
Iâm trying to create a small test card to start from, and I didnât succeed, so I used all your configuration and I get the same error. Some of the cards appeared but without color and with the squares visible
update:
ok resolved a part of icon color.
but i show error:
post your yaml for a room that having issues, iâlll take a look see if I can spot anything.
- type: horizontal-stack
cards:
- type: custom:button-card
template: custom_card_andyblac_scene
entity: script.alexa_alza_tapparelle
variables:
ulm_custom_card_andyblac_scene_color: yellow
- type: custom:button-card
template: custom_card_andyblac_scene
entity: script.alexa_buonanotte
variables:
ulm_custom_card_andyblac_scene_color: blue
- type: horizontal-stack
cards:
- type: custom:button-card
template: custom_card_andyblac_person
entity: person.silvio_iphone
variables:
ulm_card_person_use_entity_picture: true
ulm_address: sensor.silvio_icloudv3_zone_name
ulm_card_person_eta: sensor.silvio_icloudv3_zone_distance
battery:
entity_id: sensor.silvio_iphone_battery_level
can you show me the states of sensor.silvio_icloudv3_zone_distance , sensor.silvio_icloudv3_zone_name , person.silvio_iphone
thanks.
also make sure your using the latest button-card, do not use the ones that can be installed by minimalist UI, install all the required cards manually, as the ones installed by minimalist are never unto date.
for instructions on how to do this is here GitHub - andyblac/UI-Minimalist-Custom-Cards: A modified version of Minimalist Room Card.
the current version of button-card is v4.1.2
ok ok thanks, now is ok
1 Like
Hello Andy,
My I have noticed that my zone displays a distance along with my home zone.
I have multiple zones, London, Juaso-Ghana, Dublin,etc. I use proximity and zone together.
For example, I am at home in London, but I have also noticed the card is displaying distance in km which is way off. Could you please assist me. I tried everything but to no avail. I do not know where I am going wrong. I would appreciate your assistance on this.
Kwame
what entities do you have assigned to your person ?, also regarding unknown for the 2nd person card, you have a device tracker entity assigned to the main entity, this should be a person entity not a device tracker entity.
Hello Andy, thanks for your quick responds, could you please clarify your last comment " What entities do you have assigned to your person?." I donât understand, should assigned entities to my person? and how can I do that.
Kwame
go to Setting â People and make sure you have assigned the device you want to use to track your location.
see below like this:
Thank so much Andy, all sorted.
1 Like
Hi, i need some help with custom_popups - it all looks very bigâŚ
My Code:
- type: custom:button-card
entity: sensor.absolte_feuchte_outdoor_hausecke_absolute_humidity
template:
- custom_card_andyblac_status
variables:
button:
popup_content: !include ../popup/popup_andyblac.yaml
popup_title: "Ich bin ein Test!"
icon: "mdi:ab-testing"
templates:
- custom_popup_andyblac_hold
- custom_popup_andyblac_tap
The popup worksâŚ
Any hints what´s wrong?
you need to give you cards in the popup a font-size like
styles: card: - font-size: your_size;
1 Like
The popup looks great!
The card which is styled by
- custom_card_andyblac_status
looks bigâŚ
yes, the code snippet from this card in the style section is as follows:
styles:
name:
- justify-self: "start"
- align-self: "end"
- font-weight: "bold"
- font-size: "16px"
- margin-left: "33%"
- margin-top: "4%"
- max-width: "65%"
- text-overflow: "ellipsis"
- overflow: "hidden"
state:
- justify-self: "start"
- align-self: "end"
- font-weight: "bold"
- filter: "opacity(40%)"
- font-size: "15px"
- margin-left: "33%"
- margin-top: "0%"
- max-width: "65%"
- text-overflow: "ellipsis"
- overflow: "hidden"
grid:
- grid-template-areas: "'i n' 'i s'"
- grid-template-columns: "min-content auto"
- grid-template-rows: "min-content min-content"
card:
- border-radius: "15px"
- box-shadow: "var(--box-shadow)"
- padding: "5px"
custom_fields:
icon: &custom_card_andyblac_status_widget_styling
- position: "absolute"
- left: "-6%"
- top: "18%"
- width: "35%"
What you want to do to reduce text size or icon size for that matter to add a section to you code:
- type: custom:button-card
entity: sensor.absolte_feuchte_outdoor_hausecke_absolute_humidity
template:
- custom_card_andyblac_status
styles: <--------------------THIS ONE
name:
- font-size: your_size <---------- and so forth
variables:
button:
popup_content: !include ../popup/popup_andyblac.yaml
popup_title: "Ich bin ein Test!"
icon: "mdi:ab-testing"
templates:
- custom_popup_andyblac_hold
- custom_popup_andyblac_tap
Basically you override the properties of the template with your own styles.