Comments (10)
You can add invisible buttons on the left (like 2 for eg) to reduce the overall size:
type: custom:button-card
color_type: blank-card
setting width and height should be only used in very specific case as it completely breaks when used with different devices. That's why aspect_ratio was introduced as it respects how lovelace works
from decluttering-card.
Please share the template code also (and the button card template if any).
from decluttering-card.
Here is the decluttering template
motion_sensors_battery_square:
card:
type: 'custom:button-card'
template: motion_sensors_square_new3
name: '[[name]]'
entity: '[[entity]]'
custom_fields:
notification: >
[[[ return states['[[entity2]]'].state + '%'; ]]]
battery: >
[[[
var batval = states['[[entity2]]'].state;
if (batval < 10) return `<ha-icon
icon="mdi:battery-10" style="color: #FF0000;">
</ha-icon>`
else if (batval <= 20) return `<ha-icon
icon="mdi:battery-20" style="color: #ff6600;">
</ha-icon>`
else if (batval <= 30) return `<ha-icon
icon="mdi:battery-30" style="color: #ff9933;">
</ha-icon>`
else if (batval <= 40) return `<ha-icon
icon="mdi:battery-40" style="color: #ffcc00;">
</ha-icon>`
else if (batval <= 50) return `<ha-icon
icon="mdi:battery-50" style="color: #FFFF00;">
</ha-icon>`
else if (batval <= 60) return `<ha-icon
icon="mdi:battery-60" style="color: #FFFF00;">
</ha-icon>`
else if (batval <= 70) return `<ha-icon
icon="mdi:battery-70" style="color: #FFFF00;">
</ha-icon>`
else if (batval <= 80) return `<ha-icon
icon="mdi:battery-80" style="color: #CCFF33;">
</ha-icon>`
else if (batval <= 90) return `<ha-icon
icon="mdi:battery-90" style="color: #66FF33;">
</ha-icon>`
else return `<ha-icon icon="mdi:battery" style="color: #279b37;"></ha-icon>`
]]]
And button-card template:
motion_sensors_square_new3:
template: generic_sensors_square
show_last_changed: true
state:
- id: sensor_on
icon: mdi:run-fast
- value: "off"
icon: mdi:run
styles:
label:
- font-size: 8px
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 70%
- top: 80%
- height: 20px
- width: 30px # 20px
- font-size: 12px
- line-height: 20px
battery:
- border-radius: 50%
- position: absolute
- left: 70%
- top: 10%
- height: 35px
- width: 15px
- font-size: 10px
- line-height: 20px
generic_sensors_square:
name_template: >
var sensor_name = entity.attributes.friendly_name;
if (sensor_name.split(' ')[sensor_name.split(' ').length - 1] === 'Door') {
var sensor_name = sensor_name.replace(' Door', '');
return sensor_name;
} else {
var sensor_name = sensor_name.replace(' Window', '');
var sensor_name = sensor_name.replace('Left', '(L)');
var sensor_name = sensor_name.replace('Centre', '(C)');
var sensor_name = sensor_name.replace('Right', '(R)');
return sensor_name;
}
show_label: true
show_state: true
show_entity_picture: true
label_template: >
return entity.state === 'on' ? '-MOVEMENT-' : '' ## Maybe this has to be specific for motion only, if so move it in the motion one
size: 30%
styles:
card:
- border-radius: 12px
- width: 90px
- height: 90px
- padding-left: 5px
- padding-right: 5px
- -webkit-box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
- box-shadow: 0px 0px 9px 3px var(--button-card-light-color)
name:
- justify-self: start
- padding-left: 3px
- font-weight: bold
- font-family: Helvetica
- font-size: 12px
label:
- font-size: 12px
- font-weight: bold
- justify-self: start
state:
- font-size: 10px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 3px
- color: var(--button-card-light-color)
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
img_cell:
- align-self: center
- text-align: start
state:
- value: "on"
id: sensor_on
styles:
lock:
- color: red
- opacity: 1
state:
- color: black
name:
- color: black
label:
- color: black
card:
- border: 2px solid rgb(164,33,75)
- --paper-card-background-color: rgb(254, 239, 179)
- box-shadow: 0px 0px 10px 3px var(--paper-card-background-color)
icon:
- color: black
- value: "off"
styles:
lock:
- color: red
- opacity: 1
state:
- color: red
card:
- box-shadow: 0px 0px 8px 2px var(--secondary-text-color)
- border: 0px 0px 10px 3px rgba(130,70,70,0.75)
tap_action:
action: none
hold_action:
action: none
from decluttering-card.
Thanks.
This is something I can't fix but you can :)
The width of the decluttering-card is defined by the parent horizontal-stack (automatically, it's a flexbox) but you have set the width and height of the button-card in pixels.
Instead replace your width and height of the button-card with aspect_ration: 1/1
. You'll still have square buttons and they will auto-adapt to the size. If you want to have an empty space in a line use: color_type: blank-card
.
from decluttering-card.
darn it. I tried using aspect_ratio: 1/1
in the base template 'generic_sensors_square' and commented out width: 90px height: 90px
but the buttons are rather big.
How do I prevent that?
from decluttering-card.
Bingo! Thank you for the explanation. I thought earlier behavior was due to combination of both cards. I will update all other button-cards with the same aspect_ratio.
- type: horizontal-stack
cards:
- type: 'custom:button-card'
template: blank_card_2px_width_style
- type: custom:decluttering-card
template: motion_sensors_battery_square
variables:
- name: Bedroom
- entity: binary_sensor.wyzesense_777bfd2e
- entity2: sensor.tmpl_wyze_br_motion_sensor_battery
- type: 'custom:button-card'
template: blank_card_2px_width_style
- type: custom:decluttering-card
template: motion_sensors_battery_square
variables:
- name: Laundry
- entity: binary_sensor.wyzesense_77a5f319
- entity2: sensor.tmpl_wyze_lr_motion_sensor_battery
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
from decluttering-card.
Looks like this setup messed up on mobile device. Do I have to setup differently for mobile devices?
from decluttering-card.
Text never scales automatically but there are some tricks that you can use:
See here: https://css-tricks.com/books/fundamental-css-tactics/scale-typography-screen-size/
Welcome to the amazing (or not) world of web development
from decluttering-card.
Welcome to the amazing (or not) world of web development
oh, no. Its CSS. Run Forrest Run.. :)
from decluttering-card.
I just ran against this myself.
I've added CSS Card Mod via HACS and then just floated the button as needed.
ex:
decluttering_templates:
group_toggle_button:
card:
type: "custom:button-card"
entity: "[[entity]]"
show_label: false
state_color: true
show_name: false
color_type: icon
color: rgb(145, 226, 237)
icon: mdi:power
tap_action:
action: toggle
styles:
card:
- height: 40px
- width: 75px
- border-radius: 8px
style: |
:host{
padding-top: 7px;
float: right;
}
from decluttering-card.
Related Issues (20)
- Decluttering card does not handle text values with new line characters properly. HOT 1
- Decluttering not possible with conditional row? reports missing card HOT 3
- Need to restart HA to see decluttering_template changes in dashboard HOT 7
- Where is decluttering-card.js? HOT 2
- Screenshots? HOT 1
- Misleading error reported due to control flow in config check
- Help to pass input_select helper to decluttering template HOT 5
- The card uses non-unique ids for CSS elements inside a card HOT 1
- Using !Include to templates in .yaml HOT 3
- Card takes up space in a vertical stack card even when all content is hidden
- decluttering inside a core grid card behaves oddly, changes size of the grid tile
- Passing a jinjia template causes an error HOT 1
- Problem with decluttering card and lovelace_gen together HOT 2
- Default referencing variable
- Broken in HomeAssistant beta (2023.4b0) HOT 10
- The automated release is failing 🚨 HOT 1
- decluttering-card references appear broken with Core 2023.4.0 HOT 12
- Polymer will be deprecated in HA 2023.5 HOT 2
- Cannot read properties issue since 2023.4.x HOT 9
- Inherit another template or optional variables? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from decluttering-card.