Hello, may I ask if the section with an arrow on your air conditioning card will automatically change the title of the second grid card after sliding the card? I want to change the title of the card when sliding it, just like a media card. I don’t know how to achieve this function. If you know, can you tell me? Also, how did you keep the information at the bottom of your sidebar?
Going to feel like a moron, but where is this file located/ how can I access it? Can’t seem to find any folder called js somewhere…
js/plugin/popups.ts
I’ve editted the rest now, just need to do that last one… many thanks!
Hi, I hope you don’t mind I reply to your comment.
I’m having the exact same issue with the Plex Recently Added component, it shows the title/name from the recently added movie or show, it downloads the image, but the image is 0.1kb and doesn’t actually work.
The state of the sensor is fine, it shows the paths to the proper image, but the images themselves seem to be corrupt or something. When I delete the images it redownloads them, but still as 0.1kb and not viewable.
Any idea on why this isn’t working properly? It obviously is making a connection to my Plex but isnt grabbing the proper images…
Go to Plex. Edit Kandahar (2023), select a different poster and/or background (or upload new ones and use those) - then Save Changes.
Delete image files located in Plex_Recently_Added and wait for the new files to be fetched.
Just did, selected a new poster, removed the old files and waited for them to be fetched. Same 0.1 kb files that cannot be used appeared… 
There you go:
pretty_date:
friendly_name: heutiges Datum
value_template: >-
{% set today = states("sensor.date") %}
{% set arr_week_days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"] %}
{% set arr_months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] %}
{% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
{% set day = as_timestamp(today) | timestamp_custom('%d') | round %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
{% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
{{ day }} {{ arr_months[month-1] }} {{ year }}
attribute_templates:
week_day: >-
{% set today = states("sensor.date") %}
{% set arr_week_days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"] %}
{% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
{{ arr_week_days[week_day] }}
day: >-
{% set today = states("sensor.date") %}
{% set day = as_timestamp(today) | timestamp_custom('%d') | round %}
{{ day }}
month_num: >-
{% set today = states("sensor.date") %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | round %}
{{ month }}
month_name: >-
{% set today = states("sensor.date") %}
{% set arr_months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"] %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
{{ arr_months[month-1] }}
year: >-
{% set today = states("sensor.date") %}
{% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
{{ year }}
Yes I solved it and adjusted a little.
But I don’t know how to change the sensor value to just the time hours.
Hi! First of all, absolutely LOVE what you’ve created here, it’s so sleek and good looking, mad props!
Question, how would I be able to make a specific button light up based on the float of the state of an entity?
I have a button that is tracking a smart power socket behind my computer, on which if the power is > 4.0 watt, the card itself should light up. How would I go about doing such a thing? Thanks!
One way is to make a binary sensor.
Hi everyone
I would like to modify the display of the sensor.plex_recently_added sensor: instead of having a random rendering, I would like to display the last 5 with a fade effect between each element. Something like this: https://codepen.io/root00/pen/RGgNrq
Has anyone tried this before or have any tips on how to do this?
THANKS
Hi, I have something similar. I added another swipe card with autoplay…
- type: grid
title: Movies
view_layout:
grid-area: movies
show:
mediaquery: '(min-width: 1441px)'
columns: 1
cards:
#Conditional Media
- type: custom:swipe-card
parameters:
pagination:
type: bullets
clickable: true
direction: horizontal
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: vertical-stack
cards:
- type: custom:swipe-card
start_card: 5
parameters:
autoplay:
delay: 5000
disableOnInteraction: false
reverseDirection: true
mousewheel:
sensitivity: 2
pagination:
type: bullets
clickable: true
grabCursor: true
threshold: 7
speed: 600
spaceBetween: 70
direction: vertical
autoHeight: true
slidesPerView: auto
cards:
- type: grid
columns: 1
cards:
- type: custom:button-card
entity: sensor.added_movies
name: ' '
double_tap_action: !include /config/popup/popup_ymovies.yaml
template:
- added_movies
- type: grid
columns: 1
cards:
- type: custom:button-card
entity: sensor.added_movies
name: ' '
double_tap_action: !include /config/popup/popup_ymovies.yaml
template:
- added_movies
- type: grid
columns: 1
cards:
- type: custom:button-card
entity: sensor.added_movies
name: ' '
double_tap_action: !include /config/popup/popup_ymovies.yaml
template:
- added_movies
- type: grid
columns: 1
cards:
- type: custom:button-card
entity: sensor.added_movies
name: ' '
double_tap_action: !include /config/popup/popup_ymovies.yaml
template:
- added_movies
- type: grid
columns: 1
cards:
- type: custom:button-card
entity: sensor.added_movies
name: ' '
double_tap_action: !include /config/popup/popup_ymovies.yaml
template:
- added_movies
- type: grid
columns: 1
cards:
- type: custom:button-card
name: ' '
entity: sensor.trakt_next_to_watch_only_aired
template:
- conditional_media_shows
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.upcoming_shows
Nice ! Can you share your added_movies template too please ?
Sure, but I don’t have that much experience with coding, so it’s very messy.
I tried to add many animation elements to the air conditioning card, which is running steadily. When the air conditioning switches to each mode, the card will automatically display background animation, which can also add more animation element information to other cards
Wow… can you share?
Hello everyone, first of all, thank you very much to Mattias_ Persson
This is a great job, I really like your interface, but there is something that has been very frustrating for me recently
Recently, I am adding a lock to my card to prevent me from accidentally touching the switch. Adding a lock does not seem to work. I want to display the lock icon in the bottom right corner when the card is opened, and click on the lock icon to lock the card. Clicking on the card will not trigger the physical switch. When clicking on the lock icon again, the card can be activated to switch on and off the entity normally.
My computer is connected to a smart socket, and the switch on this socket will directly cause my computer to suddenly power off
I have been trying for a long time without any results, and even the lock icon does not appear on the card. I am very confused, who can help me? I am worried about accidentally touching the card switch every day, and my computer has unexpectedly lost power countless times because of this mistake! I really need it!
I am trying to create a card that is always shown on and gives me the lux value in the circle. I have it most of the way there, but can’t figure out how to get the lux value to show up. Any help would be greatly appreciated. Here is an image of what I have so far.
Here is my all of my code. I have not altered the original “extra_styles” template.
sensor_on:
template:
- base_on
- circle_sensor
tap_action:
action: more-info
base_on:
template:
- settings
- extra_styles
variables:
state: >
[[[ return !entity || entity.state; ]]]
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
entity_picture: >
[[[ return !entity || entity.attributes.entity_picture; ]]]
aspect_ratio: 1/1
show_state: false
show_label: false
show_icon: false
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"l l"
"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: 110%
- font-size: 15px
- font-weight: bold
state:
- justify-self: start
- line-height: 110%
- font-size: 12px
label:
- justify-self: start
- line-height: 110%
- font-size: 12px
card:
- border-radius: 10px
- border-width: 0
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- --mdc-ripple-color: rgb(0, 0, 0)
- color: rgb(0, 0, 0)
- background-color: rgba(255, 255, 255, 0.85)
circle_sensor:
styles:
card:
- --c-stroke-color-on: 'rgb(0, 0, 0)'
- --c-stroke-color-off: none
- --c-fill-color-on: none
- --c-fill-color-off: none
- --c-stroke-width: 2.3
- --c-stroke-width-dragging: 4
- --c-font-color: 'rgb(0, 0, 0)'
- --c-font-size: 14px
- --c-unit-font-size: 10.5px
- --c-font-weight: 700
- --c-letter-spacing: -0.02rem
custom_fields:
circle:
- display: initial
- width: 88%
- margin: -3% 2% 0 0
- justify-self: end
- opacity: 1
custom_fields:
circle: >
[[[
if (entity) {
let r = 22.1,
c = r * 2 * Math.PI,
tspan = '<tspan dx=".2" dy="-.4">',
domain = entity.entity_id.split('.')[0],
state = entity.state,
input = variables.circle_input || ' ',
unit = variables.circle_input_unit || ' ';
/* * * * * * * * * * * * * * * * * *
* *
* CIRCLE *
* *
* * * * * * * * * * * * * * * * * */
let circle = (state, input, unit) => {
return `
<svg viewBox="0 0 50 50">
<style>
circle {
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: ${c};
stroke-dashoffset: ${typeof input === 'number' && c - input / 100 * c};
stroke-width: var(--c-stroke-width);
stroke: var(--c-stroke-color-on);
fill: var(--c-fill-color-on);
}
text {
font-size: var(--c-font-size);
font-weight: var(--c-font-weight);
letter-spacing: var(--c-letter-spacing);
fill: var(--c-fill-color-on);
}
tspan {
font-size: var(--c-unit-font-size);
}
#circle_value, tspan {
text-anchor: middle;
dominant-baseline: central;
}
</style>
<circle id="circle_stroke" cx="25" cy="25" r="${r}"/>
<text id="circle_value" x="50%" y="52%">${input}${tspan}${unit}</tspan></text>
</svg>
`;
}
/* * * * * * * * * * * * * * * * * *
* *
* SENSOR *
* *
* * * * * * * * * * * * * * * * * */
if (domain === 'sensor') {
return circle(state, input, unit);
}
}
]]]
Use this:
variables:
circle_input: >
[[[
let volume = states['sensor.salon_glosnik_voluma'];
if (volume) return parseInt(volume.state);
]]]
circle_input_unit: '%'
It provided something different, but not exactly what I was after.
Here is the code I used. I am just wanting a full circle with the value inside of it.
variables:
circle_input: >
[[[
let lux = states['sensor.bedroom_ep1_multi_sensor_illuminance'];
if (lux) return parseInt(lux.state);
]]]
circle_input_unit: 'lx'
I think it will be better
variables:
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)}<tspan font-size="10">°C</tspan></text>
</svg>
`;
}
]]]