For a first timer a helluva good-looking setup. Goed gedaan man. Share? 
!Dank je! At this piont itâs not finished yet and i have to make some big changes because CH wonât work in the future. So at this point i wanna have a look in which direction i will go. Will update when i have made progression
I canât download
Here is a configuration to set the time of an automation :
Disabling the alarm clock prevents editing of the configuration.
The change of color and icon is done thanks to the customize part.
Rest assured the colors will match your theme 
This card uses:
- card-mod : https://github.com/thomasloven/lovelace-card-mod
- time-picker-card : https://github.com/GeorgeSG/lovelace-time-picker-card
- button-card: https://github.com/custom-cards/button-card
- custom-ui: https://github.com/Mariusthvdb/custom-ui
- a transparent image : --> here |
| <-- here
Card code
elements:
- entity: sensor.vide
prefix: RĂ©veil 1
style:
color: var(--primary-color)
font-size: 20px
font-variant: small-caps
left: 13%
pointer-events: none
top: 70%
tap_action:
action: none
type: state-label
- entity: input_boolean.wakestatus_1
style:
'--paper-item-icon-color': var(--primary-color)
left: 13%
top: 35%
tap_action:
action: toggle
type: state-icon
- entity: input_datetime.wake_time_1
hide:
name: true
hour_step: 1
layout:
align_controls: center
name: inside
link_values: true
minute_step: 1
name: ''
style:
.: |
ha-card {
box-shadow: none;
background-color: rgba(0,0,0,0);
opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
}
.time-picker-row{
margin-left: 5px !important;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
display: none;
}
time-unit:
$: |
.time-unit {
padding: 2px !important;
}
.time-input {
border: 2px solid var(--primary-color) !important;
background-color: rgba(0,0,0,0) !important;
color: black !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
z-index: 100;
}
left: 45%
top: 50%
type: 'custom:time-picker-card'
- entity: input_boolean.wakeweekday_mon_1
icon: 'mdi:alpha-l-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 17%
top: 20%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_tue_1
icon: 'mdi:alpha-m-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 7%
top: 20%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_wed_1
icon: 'mdi:alpha-m-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 22%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_thu_1
icon: 'mdi:alpha-j-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 12%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_fri_1
icon: 'mdi:alpha-v-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 2%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sat_1
icon: 'mdi:alpha-s-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 17%
top: 80%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sun_1
icon: 'mdi:alpha-d-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 7%
top: 80%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
image: /local/images/transparent/transparent.png
type: picture-elements
Entities code
#Input_booleans
input_boolean:
wakestatus_1:
name: Alarm 1
icon: mdi:alarm
wakeweekday_sun_1:
name: Sunday
icon: mdi:calendar
wakeweekday_mon_1:
name: Monday
icon: mdi:calendar
wakeweekday_tue_1:
name: Tuesday
icon: mdi:calendar
wakeweekday_wed_1:
name: Wednesday
icon: mdi:calendar
wakeweekday_thu_1:
name: Thursday
icon: mdi:calendar
wakeweekday_fri_1:
name: Friday
icon: mdi:calendar
wakeweekday_sat_1:
name: Saturday
icon: mdi:calendar
#Input_datetime
input_datetime:
wake_time_1:
name: wake_time_1
has_date: false
has_time: true
#Sensors
sensor:
- platform: template
sensors:
vide:
value_template: ""
automation:
- id: 'wake_1_detect_time'
alias: Wake 1
trigger:
platform: template
value_template: "{{states('sensor.time') == (state_attr('input_datetime.wake_time_1','timestamp') | int | timestamp_custom('%H:%M', False))}}"
condition:
condition: template
value_template: >
{% set today = 'input_boolean.wakeweekday_' ~ now().strftime("%a") | lower ~ '_1' %}
{{ is_state('input_boolean.wakestatus_1', 'on') and is_state(today, 'on') }}
action:
homeassistant:
customize:
input_boolean.wakestatus_1:
templates:
icon_color: if (state === 'on') return 'green'; else return 'red';
icon: if (state === 'on') return 'mdi:alarm-check'; else return 'mdi:alarm-off';
3 Likes
How did you 1 background for - sidebar and other part
Itâs just a Picture Elements card with my floorplan as image. On top i have the custom:sidebar-card and some other cards. I also use Custom Header to hide the top header, but that function will break with the next update.
Buth how you have same image underneath side bar, whole background looks like one background
The background is just the background as it is in the theme. On top i have the Picture Elements card, in the tab in the header make sure panelmodus is selected. So the card spread over the whole screen. The image i use in de Picture Elements card is my floorplan.png, so with transparacy around the âhouseâ.
In the Picture elements card i also placed the Sidebar-card, with the background set to transparant.
Reply to my own post for an update. Full write up, explanation and code is shared here: Fully loaded media player card (picture-elements project)
1 Like
This is my new home assistant interface 
itâs specifically designed for tablet in kiosk mode
I recorded a small video
This is my config
26 Likes
Very nice 
2 Likes
You did an amazing job with your setup. Iâm sure that you will be soon be inundated with many questions about it. Iâll startâŠ
- How did you accomplish the drag on your floorplan to rotate to a different floor? (at ~ 1:17 in the video) Is that specific to kiosk mode? The rotation animation and transition is really nice.
2 Likes
Judging by the animation and the pagination bullets at the top, I believe this is swiper card with effect: cube as parameter.
2 Likes
You win Home Assistant.
1 Like
Thanks. I wasnât aware of that card.
Hi, great job, can I ask you how did you manage to get this cool pop up ?
Thank you guys 
@cdopp as ASNNetworks said the home section is a swipe card with cube effect. each floor is a picture elements card inside the swipe card
@MrJelly17 I donât know if you are talking to me and which popup you are referring to, btw, each popup window is made using browser_mod.popup service
Great work! any chance of seeing some code? 
Iâm also interested in how you added the ânow playingâ in your setup. Looks great!