The UniFi cam icon is not really used there, yet. And it’s too messy atm.
It’s getting there, tho… I can share it once I’m done.
base_camera:
tap_action:
action: >
[[[
return !(variables.state === 'off' || variables.state === 'standby') ? 'call-service' : 'none';
]]]
service: media_player.media_play_pause
service_data:
entity_id: >
[[[ return entity === undefined || entity.entity_id; ]]]
double_tap_action:
action: call-service
service: >
[[[ return variables.state === 'off' || variables.state === 'standby' ? 'media_player.turn_on' : 'media_player.turn_off'; ]]]
service_data:
entity_id: >
[[[ return entity === undefined || entity.entity_id; ]]]
styles:
card:
- color: >
[[[
let entity_picture = entity === undefined || entity.attributes.entity_picture;
if (variables.state === 'off' || variables.state === 'standby' ||
variables.state === 'unknown' || variables.state === 'unavailable' || entity === undefined) {
return 'rgba(255, 255, 255, 0.3)';
}
return (variables.state != 'off' && variables.state != 'standby') && (entity_picture == null) ? 'rgba(0, 0, 0, 0.6)' : '#efefef';
]]]
- text-shadow: >
[[[
let entity_picture = entity === undefined ? null : entity.attributes.entity_picture;
return entity_picture == null ? 'none' : '1px 1px 5px rgba(18, 22, 23, 0.9)';
]]]
camera:
template:
- base
- base_camera
state_display: >
[[[ if (variables.state == 'idle' || variables.state == 'recording') return ' '; ]]]
styles:
custom_fields:
icon:
- width: 70%
- fill: '#9da0a2'
- opacity: >
[[[
let entity_picture = entity === undefined ? null : entity.attributes.entity_picture;
if (entity.state !== 'unavailable' && entity.state !== 'standby') {
return entity_picture == null ? 1 : 0;
}
]]]
card:
#- align-self: middle
- background-color: none
- background-size: cover #137% 101%
- background-position: center
- background-repeat: no-repeat
- background-image: >
[[[
let entity_picture = entity === undefined || entity.attributes.entity_picture;
if (variables.state === 'off' || variables.state === 'standby' ||
variables.state === 'unknown' || variables.state === 'unavailable' || entity === undefined) {
return 'linear-gradient(0deg, rgba(115, 115, 115, 0.2) 0%, rgba(115, 115, 115, 0.2) 100%)';
}
return (variables.state != 'off' && variables.state != 'standby') && (entity_picture == null) ?
'linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%)' :
'linear-gradient(0deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 100%), url(' + entity_picture + ')';
]]]
conditional_camera:
template:
- camera
- base_camera
state_display: >
[[[
if (entity.attributes.online === 'false') {
return 'No cameras online';
}
return entity.attributes.online === 'true' && variables.state === 'recording' ? 'No title' : entity.attributes.last_tripped_time;
]]]
custom_fields:
blur: >
[[[
if (entity.attributes.entity_picture !== undefined) return '<div></div>';
]]]
overlay: >
[[[
if (entity && entity.attributes.entity_picture === undefined && entity.state !== 'unavailable' && entity.state !== 'standby') return '<div></div>';
]]]
media_image: >
<div></div>
play_pause: >
[[[
let style = `
<style>
.scale-up {
animation: scale-up 1s forwards;
cubic-bezier(.05, .5, .3, 1);
transform-origin: center center;
}
@keyframes scale-up {
0% {
opacity: 0;
transform: scale(0);
}
20% {
transform: scale(1);
}
30% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
`;
if (variables.state === 'paused' && variables.timeout < 2000) {
return `
<svg viewBox="0 0 166 166">${style}
<path class="scale-up" d="M0 0h59.9v166H0zm106.1 0H166v166h-59.9z"/>
</svg>
`;
}
if (variables.state === 'playing' && variables.timeout < 2000) {
return `
<svg viewBox="0 0 166 166">${style}
<path class="scale-up" d="M0 0l166 83L0 166z"/>
</svg>
`;
}
]]]
styles:
name:
- z-index: 3
- margin-bottom: -1%
state:
- z-index: 3
card:
- background-color: rgba(115, 115, 115, 0.2)
- padding: 5%
- border-radius: calc(var(--custom-button-card-border-radius) / 2)
- backdrop-filter: blur(0) #fix chrome bug
- -webkit-clip-path: inset(0) #fix safari bug
custom_fields:
blur:
- z-index: 2
- top: 75%
- left: 0%
- width: 100%
- height: 25.5%
- position: absolute
- background-color: rgba(0, 0, 0, 0.2)
- backdrop-filter: blur(0.4em)
- -webkit-backdrop-filter: blur(0.4em)
overlay:
- z-index: 2
- opacity: 1
- top: 75.5%
- left: 0%
- width: 100%
- height: 26%
- position: absolute
- background-color: rgba(255, 255, 255, 0.8)
media_image:
- z-index: 1
- top: 0
- left: 0
- width: 100%
- height: 100%
- position: absolute
- background-size: cover
- background-position: center
- background-repeat: no-repeat
- background-image: >
[[[
return entity.attributes.entity_picture === undefined ? 'none' : `url(${entity.attributes.entity_picture})`;
]]]
play_pause:
- z-index: 3
- top: 0
- right: 0
- bottom: 0
- left: 0
- margin: auto
- width: 21%
- height: 21%
- position: absolute
- fill: '#dedede'
- overflow: visible
- filter: >
[[[
let entity_picture = entity === undefined || entity.attributes.entity_picture;
return entity_picture == null ? 'none' : 'drop-shadow(0 0 1.3vw rgba(0,0,0,0.7))';
]]]
icon:
- z-index: 3
- width: 29%
- fill: >
[[[
return variables.state === 'off' || variables.state === 'standby' ||
variables.state === 'unknown' || variables.state === 'unavailable' || entity === undefined ?
'#9da0a2' :
'rgba(255, 255, 255, 0.8)';
]]]