Skip to content

Commit

Permalink
Merge pull request #5 from andyblac/dev
Browse files Browse the repository at this point in the history 
Merge latest dev branch
  • Loading branch information
@andyblac
andyblac authored Oct 16, 2023
2 parents a9a6d94 + 0d3ed18 commit 1d0319a
Show file tree
Hide file tree
Showing 7 changed files with 299 additions and 3 deletions.
6 changes: 3 additions & 3 deletions custom_cards/custom_card_andyblac_room/custom_card_andyblac_room.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
custom_card_andyblac_room:
# v2.0.2
# v2.0.3
template:
- "ulm_translation_engine"

Expand Down Expand Up @@ -662,9 +662,9 @@ custom_card_andyblac_room_sensor_icon:
- fill: >
[[[
if (variables.ulm_custom_card_andyblac_room_sensor_color_on == 'theme') {
return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),0.2)';
return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color+'),0.2)';
} else {
return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color_on+'),0.4)';
return 'rgba(var(--color-'+variables.ulm_custom_card_andyblac_room_sensor_color+'),0.4)';
}
]]]
state:
Expand Down
67 changes: 67 additions & 0 deletions custom_cards/custom_card_andyblac_room/icons/fan_animation.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
fan_animation:
variables:
timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
triggers_update: "all"
show_icon: false
custom_fields:
icon: >
[[[
let path = `
<path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12.5,2C17,2 17.11,5.57 14.75,6.75C13.76,7.24 13.32,8.29 13.13,9.22C13.61,9.42 14.03,9.73 14.35,10.13C18.05,8.13 22.03,8.92 22.03,12.5C22.03,17 18.46,17.1 17.28,14.73C16.78,13.74 15.72,13.3 14.79,13.11C14.59,13.59 14.28,14 13.88,14.34C15.87,18.03 15.08,22 11.5,22C7,22 6.91,18.42 9.27,17.24C10.25,16.75 10.69,15.71 10.89,14.79C10.4,14.59 9.97,14.27 9.65,13.87C5.96,15.85 2,15.07 2,11.5C2,7 5.56,6.89 6.74,9.26C7.24,10.25 8.29,10.68 9.22,10.87C9.41,10.39 9.73,9.97 10.14,9.65C8.15,5.96 8.94,2 12.5,2Z"/>
`,
style = `
<svg viewBox="0 0 24 24">
<style>
@keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg) translateZ(0);
}
100% {
transform: rotate(1080deg) translateZ(0);
}
}
.start {
animation: rotate 2.8s ease-in;
transform-origin: center;
visibility: hidden;
will-change: transform;
}
.on {
animation: rotate 1.8s linear infinite;
transform-origin: center;
animation-delay: 2.8s;
visibility: hidden;
will-change: transform;
}
.end {
animation: rotate 2.8s;
transform-origin: center;
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
will-change: transform;
}
.start_timeout {
animation: rotate 1.8s linear infinite;
transform-origin: center;
visibility: hidden;
will-change: transform;
}
.end_timeout {
transform-origin: center;
will-change: transform;
}
</style>
`;
if (entity.state === 'on' && variables.timeout < 1000) {
return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`;
}
if (entity.state === 'off' && variables.timeout < 1000) {
return `${style}<g class="end">${path}</g></svg>`;
}
if (entity.state === 'on' && variables.timeout > 1000) {
return `${style}<g class="start_timeout">${path}</g></svg>`;
} else {
return `${style}<g class="end_timeout">${path}</g></svg>`;
}
]]]
img_cell: "[[[ return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
58 changes: 58 additions & 0 deletions custom_cards/custom_card_andyblac_room/icons/garage-door_animation.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
garage-door_animation:
variables:
timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
# triggers_update: "all"
show_icon: false
custom_fields:
icon: >
[[[
let path = `
<path d="M22 9V20H20V11H4V20H2V9L12 5L22 9M19 12H5V14H19V12M19 18H5V20H19V18M19 15H5V17H19V15Z" />
`,
style = `
<svg viewBox="0 0 24 24">
<style>
@keyframes door_open {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 83%, 15% 83%, 14% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 61%, 15% 61%, 14% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 45%, 15% 45%, 14% 100%, 0 100%); }
}
@keyframes door_close {
0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 45%, 15% 45%, 14% 100%, 0 100%); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 61%, 15% 61%, 14% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 86% 83%, 15% 83%, 14% 100%, 0 100%); }
75% { clip-path: inset(0 0 0 0); }
}
.start {
animation: door_open 3s steps(1);
}
.on {
clip-path: polygon(0 0, 0 100%, 10% 100%, 10% 45%, 85% 45%, 85% 100%, 100% 100%, 100% 0);
}
.end {
animation: door_close 3s steps(1);
}
.start_timeout {
clip-path: polygon(0 0, 0 100%, 10% 100%, 10% 45%, 85% 45%, 85% 100%, 100% 100%, 100% 0);
}
.end_timeout {
transform-origin: center;
will-change: transform;
}
</style>
`;
if (entity.state === 'open' && variables.timeout < -1000) {
return `${style}<g class="start">${path}</g></svg>`;
}
if (entity.state === 'closed' && variables.timeout < 1000) {
return `${style}<g class="end">${path}</g></svg>`;
}
if (entity.state === 'open' ) {
return `${style}<g class="start_timeout">${path}</g></svg>`;
} else {
return `${style}<g class="end_timeout">${path}</g></svg>`;
}
]]]
img_cell: "[[[ return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
48 changes: 48 additions & 0 deletions custom_cards/custom_card_andyblac_room/icons/motion_animation.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
motion_animation:
variables:
timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
triggers_update: "all"
show_icon: false
custom_fields:
icon: >
[[[
let path = `
<path d="M10,0.2C9,0.2 8.2,1 8.2,2C8.2,3 9,3.8 10,3.8C11,3.8 11.8,3 11.8,2C11.8,1 11,0.2 10,0.2M15.67,1A7.33,7.33 0 0,0 23,8.33V7A6,6 0 0,1 17,1H15.67M18.33,1C18.33,3.58 20.42,5.67 23,5.67V4.33C21.16,4.33 19.67,2.84 19.67,1H18.33M21,1A2,2 0 0,0 23,3V1H21M7.92,4.03C7.75,4.03 7.58,4.06 7.42,4.11L2,5.8V11H3.8V7.33L5.91,6.67L2,22H3.8L6.67,13.89L9,17V22H10.8V15.59L8.31,11.05L9.04,8.18L10.12,10H15V8.2H11.38L9.38,4.87C9.08,4.37 8.54,4.03 7.92,4.03Z" />
`,
style = `
<svg viewBox="0 0 24 24">
<style>
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
.start {
animation: clip 2s linear infinite;
}
.on {
animation: clip 2s linear infinite;
}
.end {
clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%);
}
.start_timeout {
animation: clip 2s linear infinite;
}
.end_timeout {
clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%);
}
</style>
`;
if (entity.state === 'on' && variables.timeout < -1000) {
return `${style}<g class="start">${path}</g></svg>`;
}
if (entity.state === 'off' && variables.timeout < 1000) {
return `${style}<g class="end">${path}</g></svg>`;
}
if (entity.state === 'on') {
return `${style}<g class="start_timeout">${path}</g></svg>`;
} else {
return `${style}<g class="end_timeout">${path}</g></svg>`;
}
]]]
img_cell: "[[[ return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
67 changes: 67 additions & 0 deletions custom_cards/custom_card_andyblac_room/icons/shower_animation.yaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
shower_animation:
variables:
timeout: "[[[ return Date.now() - Date.parse(entity.last_changed); ]]]"
# triggers_update: "all"
show_icon: false
custom_fields:
icon: >
[[[
let path = `
<path d="M20,20A1,1 0 0,1 21,21A1,1 0 0,1 20,22A1,1 0 0,1 19,21A1,1 0 0,1 20,20M16,20A1,1 0 0,1 17,21A1,1 0 0,1 16,22A1,1 0 0,1 15,21A1,1 0 0,1 16,20M12,20A1,1 0 0,1 13,21A1,1 0 0,1 12,22A1,1 0 0,1 11,21A1,1 0 0,1 12,20M8,20A1,1 0 0,1 9,21A1,1 0 0,1 8,22A1,1 0 0,1 7,21A1,1 0 0,1 8,20M4,20A1,1 0 0,1 5,21A1,1 0 0,1 4,22A1,1 0 0,1 3,21A1,1 0 0,1 4,20M6,17A1,1 0 0,1 7,18A1,1 0 0,1 6,19H6A1,1 0 0,1 5,18A1,1 0 0,1 6,17H6M10,17A1,1 0 0,1 11,18A1,1 0 0,1 10,19A1,1 0 0,1 9,18A1,1 0 0,1 10,17M14,17A1,1 0 0,1 15,18A1,1 0 0,1 14,19A1,1 0 0,1 13,18A1,1 0 0,1 14,17M18,17A1,1 0 0,1 19,18A1,1 0 0,1 18,19A1,1 0 0,1 17,18A1,1 0 0,1 18,17M8,14A1,1 0 0,1 9,15A1,1 0 0,1 8,16A1,1 0 0,1 7,15A1,1 0 0,1 8,14M12,14A1,1 0 0,1 13,15A1,1 0 0,1 12,16A1,1 0 0,1 11,15A1,1 0 0,1 12,14M16,14A1,1 0 0,1 17,15A1,1 0 0,1 16,16A1,1 0 0,1 15,15A1,1 0 0,1 16,14M19,12H5V10H19V12M17.92,9H6.08C6.5,6.5 8.5,4.5 11,4.08V2H13V4.08C15.5,4.5 17.5,6.5 17.92,9Z" />
`,
style = `
<svg viewBox="0 0 24 24">
<style>
@keyframes clip {
0% {
visibility: visible;
clip-path: inset(0 0 45% 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
.start {
animation: clip 1.4s ease-out;
transform-origin: center;
visibility: hidden;
will-change: transform;
}
.on {
animation: clip 1.4s ease-out infinite;
transform-origin: center;
animation-delay: 0.7s;
visibility: hidden;
will-change: transform;
}
.end {
animation: clip 1.4s ease-out;
transform-origin: center;
animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
will-change: transform;
}
.start_timeout {
animation: clip 1.4s ease-out infinite;
transform-origin: center;
visibility: hidden;
will-change: transform;
}
.end_timeout {
transform-origin: center;
will-change: transform;
}
</style>
`;
if (entity.state === 'on' && variables.timeout < 1000) {
return `${style}<g class="start">${path}</g><g class="on">${path}</g></svg>`;
}
if (entity.state === 'off' && variables.timeout < 1000) {
return `${style}<g class="end">${path}</g></svg>`;
}
if (entity.state === 'on' && variables.timeout > 1000) {
return `${style}<g class="start_timeout">${path}</g></svg>`;
} else {
return `${style}<g class="end_timeout">${path}</g></svg>`;
}
]]]
img_cell: "[[[ return `<svg viewBox='0 0 24 24'><ellipse stroke='none' fill='none'></ellipse></svg>`; ]]]"
Loading

0 comments on commit 1d0319a

Please sign in to comment.