Can anyone help me diagnose why the emby upcoming media wont work with the cover display?
It works fine with the media card, just wont show in this theme.
Anyone did this or know how to make this?
Borders still there 
Pagination bullets are built into the swipe card.
add
pagination:
type: bullets
to the swipe-card parameters.
example in ui-lovelace.yaml
- type: custom:swipe-card
parameters:
speed: 550
spaceBetween: 40
threshold: 5
pagination:
type: bullets
style with CSS in the swipe card section of the theme file
example in tablet.yaml
$swipe-card$:
.: |
div {
height: 100%;
}
.swiper-container {
margin: -1.5vw !important;
padding: 1.5vw !important;
}
.swiper-pagination {
position: inherit !important;
height: auto;
margin-top: 0.5vh;
}
.swiper-pagination-bullets {
bottom: 5px !important;
}
.swiper-pagination-bullet {
background: rgb(255, 255, 255) !important;
}
.swiper-pagination-bullet-active {
opacity: 0.6 !important;
}
@media screen and (max-width: 800px) {
.swiper-pagination-bullet {
width: 10px !important;
height: 10px !important;
}
.swiper-container {
padding: 1.5vw 1.5vw 5vw !important;
}
}
hui-horizontal-stack-card$:
.: |
hui-conditional-card {
margin: 0 0.15vh 0 0 !important;
}
you might have to adjust your grid size/padding etc to accommodate for the extra height.
4 Likes
Hello. Could you write where exactly it needs to be added? Thanks. Maybe you have it on github? Then I will find myself where to add it
I edited the post with links to the lines in the original repo.
1 Like
The first photo is the view from the computer and below is the view from the phone. Do you know how to reduce the spacing of these dots on your phone? So as to be like on the computer?
you have to edit @media screen position for bullet
2 Likes
Does anyone has a refrigerator icon to share??
I realized I didn’t have an icon for my Twinkly Christmas Tree lights, so I whipped one up.
icon_xmas-tree:
styles:
custom_fields:
icon:
- width: 100%
- margin-left: -15%
- margin-top: -10%
custom_fields:
icon: >
[[[
let path = `
<defs>
<linearGradient id="animatedGradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" style="stop-color: #ff3e5a;">
<animate attributeName="stop-color" values="#ff3e5a; #ff8500; #ffce00; #00ff36; #00edff; #ff45ff; #ff3e5a" dur="3s" repeatCount="indefinite"/>
</stop>
<stop offset="33%" style="stop-color: #ffce00;">
<animate attributeName="stop-color" values="#ffce00; #00ff36; #00edff; #ff45ff; #ff3e5a; #ff8500; #ffce00" dur="3s" repeatCount="indefinite"/>
</stop>
<stop offset="66%" style="stop-color: #00ff36;">
<animate attributeName="stop-color" values="#00ff36; #00edff; #ff45ff; #ff3e5a; #ff8500; #ffce00; #00ff36" dur="3s" repeatCount="indefinite"/>
</stop>
<stop offset="100%" style="stop-color: #00edff;">
<animate attributeName="stop-color" values="#00edff; #ff45ff; #ff3e5a; #ff8500; #ffce00; #00ff36; #00edff" dur="3s" repeatCount="indefinite"/>
</stop>
</linearGradient>
</defs>
<rect class="trunk" x="21.2" y="41.8" width="7.6" height="7.6"/>
<path class="bulb" d="M7.4,41.4c-0.2,0-0.3-0.2-0.3-0.2c0-0.1-0.1-0.2,0.1-0.4l8.8-8.8c0.2-0.2,0.3-0.6,0.2-0.9 c-0.1-0.3-0.4-0.5-0.8-0.5h-3.6c-0.2,0-0.3-0.2-0.3-0.2c0-0.1-0.1-0.2,0.1-0.4l8.8-8.8c0.2-0.2,0.3-0.6,0.2-0.9 c-0.1-0.3-0.4-0.5-0.8-0.5h-3.6c-0.2,0-0.3-0.2-0.3-0.2c0-0.1-0.1-0.2,0.1-0.4L25,9.9l9.2,9.2c0.2,0.2,0.1,0.3,0.1,0.4 c0,0.1-0.1,0.2-0.3,0.2h-3.6c-0.3,0-0.6,0.2-0.8,0.5c-0.1,0.3-0.1,0.7,0.2,0.9l8.8,8.8c0.2,0.2,0.1,0.3,0.1,0.4 c0,0.1-0.1,0.2-0.3,0.2h-3.6c-0.3,0-0.6,0.2-0.8,0.5c-0.1,0.3-0.1,0.7,0.2,0.9l8.8,8.8c0.2,0.2,0.1,0.3,0.1,0.4 c0,0.1-0.1,0.2-0.3,0.2H7.4z"/>
<g>
<path class="tree" d="M43.2,40.4l-8.8-8.8c-0.3-0.3-0.1-0.7,0.3-0.7h3.6c0.7,0,1.1-0.9,0.6-1.4L30,20.8c-0.3-0.3-0.1-0.7,0.3-0.7h3.6 c0.7,0,1.1-0.9,0.6-1.4L25,9.2l-9.5,9.5c-0.5,0.5-0.1,1.4,0.6,1.4h3.6c0.4,0,0.5,0.4,0.3,0.7l-8.8,8.8c-0.5,0.5-0.1,1.4,0.6,1.4 h3.6c0.4,0,0.5,0.4,0.3,0.7l-8.8,8.8c-0.5,0.5-0.1,1.4,0.6,1.4h35.2C43.3,41.8,43.7,40.9,43.2,40.4z M26.4,12.9 c0.9,0,1.7,0.7,1.7,1.7s-0.7,1.7-1.7,1.7s-1.7-0.7-1.7-1.7S25.5,12.9,26.4,12.9z M25.4,19.7c0.9,0,1.7,0.7,1.7,1.7S26.4,23,25.4,23 s-1.7-0.7-1.7-1.7S24.5,19.7,25.4,19.7z M14.1,38.5c-0.9,0-1.7-0.7-1.7-1.7c0-0.9,0.7-1.7,1.7-1.7c0.9,0,1.7,0.7,1.7,1.7 C15.8,37.8,15,38.5,14.1,38.5z M16.8,26.9c0-0.9,0.7-1.7,1.7-1.7s1.7,0.7,1.7,1.7s-0.7,1.7-1.7,1.7S16.8,27.8,16.8,26.9z M20.3,34.7c-0.9,0-1.7-0.7-1.7-1.7c0-0.9,0.7-1.7,1.7-1.7c0.9,0,1.7,0.7,1.7,1.7C21.9,33.9,21.2,34.7,20.3,34.7z M21.4,18.9 c-0.9,0-1.7-0.7-1.7-1.7c0-0.9,0.7-1.7,1.7-1.7s1.7,0.7,1.7,1.7C23,18.2,22.3,18.9,21.4,18.9z M22.6,28.8c0-0.9,0.7-1.7,1.7-1.7 c0.9,0,1.7,0.7,1.7,1.7c0,0.9-0.7,1.7-1.7,1.7C23.4,30.4,22.6,29.7,22.6,28.8z M26.4,38.5c-0.9,0-1.7-0.7-1.7-1.7 c0-0.9,0.7-1.7,1.7-1.7s1.7,0.7,1.7,1.7C28.1,37.8,27.3,38.5,26.4,38.5z M28.1,25.2c0-0.9,0.7-1.7,1.7-1.7s1.7,0.7,1.7,1.7 c0,0.9-0.7,1.7-1.7,1.7S28.1,26.1,28.1,25.2z M30.6,32.1c-0.9,0-1.7-0.7-1.7-1.7s0.7-1.7,1.7-1.7s1.7,0.7,1.7,1.7 S31.6,32.1,30.6,32.1z M35.2,39c-0.9,0-1.7-0.7-1.7-1.7c0-0.9,0.7-1.7,1.7-1.7c0.9,0,1.7,0.7,1.7,1.7C36.9,38.3,36.2,39,35.2,39z"/>
</g>
<path class="star" d="M27.1,5.4l1.7-1.6c0.2-0.2,0.1-0.5-0.2-0.6l-2.3-0.3l-1-2.1c-0.1-0.2-0.5-0.2-0.6,0l-1,2.1l-2.3,0.3c-0.3,0-0.4,0.4-0.2,0.6 l1.7,1.6l-0.4,2.3C22.4,8,22.7,8.2,23,8l1.4-0.8l-1,3.6h3.3l-1-3.6L27,8c0.2,0.1,0.5-0.1,0.5-0.4L27.1,5.4z"/>
</svg>
`,
style_on = `
<svg version="1.1" x="0px" y="0px" viewBox="0 0 50 50">
<style>
.bulb {
fill: url(#animatedGradient);
}
.tree {
fill: green;
}
.star {
fill: DarkGoldenRod;
}
.trunk {
fill: SaddleBrown;
}
</style>
`,
style_off = `
<svg version="1.1" x="0px" y="0px" viewBox="0 0 50 50">
<style>
.bulb {
fill: none;
}
.tree {
fill: #9ca2a5;
}
.star {
fill: #9ca2a5;
}
.trunk {
fill: #9ca2a5;
}
</style>
`;
if (variables.state_on) {
return `${style_on}${path}`;
}
if (variables.state === 'off') {
return `${style_off}${path}`;
} else {
return `${style_off}${path}`;
}
]]]
12 Likes
can you share me how you managed to get the value of the temperature sensor in your circle on DOM / Zew?
- type: custom:button-card
entity: sensor.airly_pm25
name: PM 2.5
state_display: >
[[[ return ' '; ]]]
template:
- base
- circle
custom_fields:
icon: >
<ha-icon icon="mdi:lungs" style="color: #9da0a2;"></ha-icon>
circle: >
[[[
if (entity) {
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20.5" stroke="none" stroke-width="1.5" fill="rgba(255,255,255,0.04)" />
<text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${parseInt(entity.state)}</text>
</svg>
`;
}
]]]
graph:
card:
type: sensor
entity: >
[[[ return entity.entity_id; ]]]
graph: line
card_mod:
style: |
.header, .value, .measurement {
display: none !important;
}
push_graph: >
[[[
setTimeout(() => {
let elt = this.shadowRoot,
card = elt.getElementById('card'),
container = elt.getElementById('container'),
graph = elt.getElementById('graph');
if (elt && card && container && graph) {
card.insertBefore(graph, container);
}
}, 0);
return null;
]]]
styles:
custom_fields:
graph:
- position: absolute
- width: 100%
- height: 100%
- clip-path: inset(0 round var(--custom-button-card-border-radius))
- left: 0
- bottom: 0
1 Like
you can do that:
circle_input: >
[[[
if (entity.state === 'heat') return entity.attributes.current_temperature
]]]
1 Like
Thank you for your help.
I have created variable in my media.yaml template:
variables:
active_app: >
[[[ return ['App Store', 'ARD Mediathek', 'Computers', 'Movies', 'Music', 'Netflix', 'Photos', 'Plex', 'Prime Video', 'Search', 'Settings', 'TV', 'YouTube', 'Prime ZDFmediathek']
.indexOf(!entity || entity.attributes.app_name) !== -1; ]]]
Now I think I have to plug it in to here:
styles:
custom_fields:
icon:
- width: 70%
- margin-left: 2%
- fill: '#9da0a2'
- display: >
[[[
if (variables.is_youtube) {
return `none`;
}
else {
return variables.media_off || variables.entity_picture === undefined
? 'initial'
: 'none';
}
]]]
Is my thinking correct?
1 Like
Hi All,
Thanks for this beautifull UI !
I use this dashboard with my door tablet but i have refresh issues.
After few secondes, screensaver on and screen off. When a motion is detect, screensaver off and screen switch to on, but the dahboard is not “actualised”, for example, time is freezed. I need wait 1 or 2 second for an update. It is unpleasant.
Does anyone else have the same problem as me?
How fix it ?
Thanks
Can anyone help with this? I have spent a week trying to get this working with console logs and different methods of parsing the data. but nothing.
You might have to make a template sensor to help parse the data. For instance, I need the following templates to get the same info from the plex recently added sensor and the emby latest sensor
{{ state_attr('sensor.plex_recently_added', 'data')[1].title }}
{{ (state_attr('sensor.emby_latest_tv_shows', 'data') | from_json)[1].title }}
Also, the emby sensor will always split libraries (at the very least) creating 2 sensors, one for TV, one for movies, so that is another challenge that will have to be taken into account. You’ll have to parse the last updated timestamps and pull from whichever one was updated most recently.
{{ as_timestamp(states.sensor.emby_latest_tv_shows.last_updated) }}
{{ as_timestamp(states.sensor.emby_latest_movies.last_updated) }}
This works just to get the title, which now shows, but i loose the ability for the remaining to shuffle and the images dont show.
right, you’ll have the match the other attributes like poster etc to use the media card included in this theme/dashboard. I’m not sure what you’re talking about in regards to shuffle.