Closed aj-chan closed 1 year ago
Yes. I read already. For the water tap, i wanna it has the infinite cycle animation, i wanna make the water drops effect keep drop on the name and state. So wanna ask how can set the css parameters to make the overflowing grid of the icon , so that the overflowing icon grid does not push the name and state out of the button card boundary, but overlaps it on the name and state
Because my purpose is to want the icon area of the grid, when the size of an svg is too large, the name and status can be overlapped and displayed together, without pushing the name and status out of the boundary
it shouldn't
share your template and icons
Here it is. Thankyou.
icon_worktop_light:
styles:
custom_fields:
icon:
- margin-top: 3%
- margin-left: 0%
- width: 130%
custom_fields:
icon: |
[[[
const state = (variables.state_on && variables.timeout < 2000) ? 'on' : null;
const style = `
<style>
@keyframes water-drop {
0%{
-webkit-transform: translate(0px,0px) scaleX(0.8) scaleY(0.8);
-webkit-transform-origin: 56.3% 20%;
-webkit-opacity: 0;
}
10%{
-webkit-transform: translate(0px,4px) scaleX(1.3) scaleY(1.3) ;
-webkit-transform-origin: 56.3% 20%;
-webkit-opacity: 1;
}
50%{
-webkit-transform: translate(0px,8px) scaleX(0.8) scaleY(2) ;
-webkit-transform-origin: 56.3% 20%;
-webkit-opacity: 1;
}
95%{
-webkit-transform: translate(0px,7px) scaleX(1.3) scaleY(1.7) ;
-webkit-transform-origin: 56.3% 20%;
-webkit-opacity: 1;
}
100%{
-webkit-transform: translate(0px,40px) scaleX(1) scaleY(1) ;
-webkit-transform-origin: bottom;
-webkit-opacity: 1;
}
}
.water-drop {
-webkit-animation-direction: normal;
-webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
-webkit-animation: water-drop 4s infinite ease-in-out ;
-webkit-transform-origin: 81.8% 12.7%;
}
</style>
`;
if (variables.state === 'on' ) {
return `
<svg viewBox="0 0 55 90"> ${style}
<path fill="red" d="M26.88 4.4023v2.1154c0 .7-.5719 1.246-1.2313 1.176L15.68 6.6416l-9.9687 1.05c-.6594.07-1.2313-.4767-1.2313-1.176V4.4023c0-.7.5719-1.246 1.2313-1.176l9.9687 1.05 9.9687-1.05C26.3081 3.1563 26.88 3.703 26.88 4.4023Z"/>
<path class="water-drop" fill="#74ccf4" d="M 31.6825 15.0983 C 31.5385 14.5785 30.7915 14.556 30.6295 15.0983 C 29.788 17.9378 27.988 18.7095 27.988 20.7098 C 27.988 22.4828 29.4055 23.916 31.156 23.916 S 34.324 22.4828 34.324 20.7098 C 34.324 18.6983 32.5285 17.9513 31.6825 15.0983 Z M 31.156 22.764 C 30.0445 22.764 29.14 21.8595 29.14 20.748 C 29.14 20.5883 29.2683 20.46 29.428 20.46 S 29.716 20.5883 29.716 20.748 C 29.716 21.5423 30.3618 22.188 31.156 22.188 C 31.3158 22.188 31.444 22.3163 31.444 22.476 C 31.444 22.6358 31.3158 22.764 31.156 22.764 Z"/>
<path fill="#3d454a" d="M 24.64 13.44 H 21.952 C 20.832 12.5439 19.488 11.872 17.92 11.4239 V 8.0639 L 15.68 7.84 L 13.44 8.0639 V 11.4239 C 11.872 11.872 10.528 12.5439 9.408 13.44 H 1.12 C 0.448 13.44 0 13.888 0 14.56 V 21.28 C 0 21.952 0.448 22.4 1.12 22.4 H 7.6161 C 8.96 25.088 12.0961 26.88 15.68 26.88 S 22.4 25.088 23.7439 22.4 H 24.64 C 25.9839 22.4 26.88 23.2959 26.88 24.64 C 26.88 25.9839 27.7761 26.88 29.12 26.88 H 33.6 C 34.9439 26.88 35.84 25.9839 35.84 24.64 C 35.84 18.368 30.912 13.44 24.64 13.44 Z M 17.92 3.1359 V 1.12 C 17.92 0.448 17.472 0 16.8 0 H 14.56 C 13.888 0 13.44 0.448 13.44 1.12 V 3.1359 L 15.68 3.36 L 17.92 3.1359 Z"/>
</svg>
`;
} else {
return `
<svg viewBox="0 0 55 75">
<path fill="#9da0a2" d="M26.88 4.4023v2.1154c0 .7-.5719 1.246-1.2313 1.176L15.68 6.6416l-9.9687 1.05c-.6594.07-1.2313-.4767-1.2313-1.176V4.4023c0-.7.5719-1.246 1.2313-1.176l9.9687 1.05 9.9687-1.05C26.3081 3.1563 26.88 3.703 26.88 4.4023Z"/>
<path fill="#9da0a2" d="M 24.64 13.44 H 21.952 C 20.832 12.5439 19.488 11.872 17.92 11.4239 V 8.0639 L 15.68 7.84 L 13.44 8.0639 V 11.4239 C 11.872 11.872 10.528 12.5439 9.408 13.44 H 1.12 C 0.448 13.44 0 13.888 0 14.56 V 21.28 C 0 21.952 0.448 22.4 1.12 22.4 H 7.6161 C 8.96 25.088 12.0961 26.88 15.68 26.88 S 22.4 25.088 23.7439 22.4 H 24.64 C 25.9839 22.4 26.88 23.2959 26.88 24.64 C 26.88 25.9839 27.7761 26.88 29.12 26.88 H 33.6 C 34.9439 26.88 35.84 25.9839 35.84 24.64 C 35.84 18.368 30.912 13.44 24.64 13.44 Z M 17.92 3.1359 V 1.12 C 17.92 0.448 17.472 0 16.8 0 H 14.56 C 13.888 0 13.44 0.448 13.44 1.12 V 3.1359 L 15.68 3.36 L 17.92 3.1359 Z"/>
</svg>
`;
}
]]]
base:
template:
- settings
- tilt
- extra_styles
variables:
state_on: >
[[[ return ['on', 'home', 'cool', 'fan_only', 'playing', 'unlocked'].indexOf(!entity || entity.state) !== -1; ]]]
state: >
[[[ return !entity || entity.state; ]]]
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
entity_picture: >
[[[ return !entity || entity.attributes.entity_picture; ]]]
timeout: >
[[[ return !entity || Date.now() - Date.parse(entity.last_changed); ]]]
aspect_ratio: 1/1
show_state: true
show_icon: false
# show_last_changed: true
state_display: >
[[[ if (variables.state === true) return variables.translate_unknown; ]]]
tap_action:
ui_sound_tablet: |
[[[
let screensaver = states[variables.entity_tablet] === undefined ||
states[variables.entity_tablet].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state_on && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
card_bounce: |
[[[
// add animation
if (this.getElementsByTagName("style").length === 0) {
// phone condition
let mq = window.matchMedia('(max-width: 800px)').matches;
let style = document.createElement('style');
style.innerHTML = `
@keyframes card_bounce {
0% { transform: scale(1); }
10% { transform: scale(${ mq ? '0.92' : '0.94' }); }
25% { transform: scale(1); }
30% { transform: scale(${ mq ? '0.96' : '0.98' }); }
100% { transform: scale(1); }
}
`;
this.appendChild(style);
}
// duration
let duration = 800;
// animate
this.style.animation = `card_bounce ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`;
// reset
window.setTimeout(() => { this.style.animation = "none"; }, duration + 100)
]]]
action: toggle
haptic: medium
double_tap_action:
haptic: success
hold_action:
action: call-service
service: browser_mod.toast
service_data:
duration: 3000
message: >
Tip! Double click to open popup menu
haptic: failure
styles:
grid:
- grid-template-areas: |
"icon circle"
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(3, min-content)
- gap: 1.3%
- align-items: start
- will-change: transform
name:
- justify-self: start
- line-height: 121%
label:
- align-self: end
- justify-self: end
- color: gray
state:
- align-self: end
- justify-self: start
- line-height: 115%
card:
- border-radius: var(--button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- --mdc-ripple-color: >
[[[
return variables.state_on
? 'rgb(0, 0, 0)'
: '#97989c';
]]]
- color: >
[[[
return variables.state_on
? '#4b5254'
: '#97989c';
]]]
- background-color: >
[[[
return variables.state_on
? 'rgba(255, 255, 255, 0.85)'
: 'rgba(115, 115, 115, 0.25)';
]]]
# prevent for icon and name shaking
custom_fields:
ripple: >
[[[
if (window.matchMedia('(max-width: 800px)').matches) {
window.setTimeout(() => {
let elt = this.shadowRoot;
let ripple = elt.getElementById('ripple').shadowRoot.querySelector('div');
ripple.style.display = 'none';
}, 200)
}
]]]
the changes you've made causes this, redownload base.yaml
Okay. I will try. I will close the ticket. Thanks for assist.
Let's say I made some icon svg and used in the button card. But seems the icon has a little bigger cause the entity 'Name' and 'State' on the Button Card moved down and moved out of the boundary of the button card. it should the css problem. I cannot found the answer on google. I tried overflow:hidden cannot fix this issue. the goal I wanna to do is the icon of some animation can show on top of the name or just cover the name a little bit is fine.
<img width="317" alt="CleanShot 2022-11-30 at 01 22 30@2x" src="https://user-images.githubusercontent.com
/55744541/204600431-b2440e02-53a9-458d-9cbc-637ec8bfa360.png">