Yeah, looks great!
I think I will use a combination of HKI (which I’m already using) for the phone and your take on lovelace for the tablet. I really like your clever approach to this, thanks a lot for sharing your code. Highly appreciated!
1 Like
Thanks!
I don’t plan to no. I like the one page layout.
Since it’s made for a specific tablet resolution, no. You could make one page for tablet and one for mobile. An other option is to design for mobile first. But the homekit app is sufficent for me.
WOW so nice !!! This show how flexible HA code can be!! I gonna try to rebuild my WebUI with those nice settings… Gonna inspect your GitHub how you did it !!!
1 Like
@Mattias_Persson nice UI! What are your ideas with the alarm panel card? 
i wonder if you have any sketch/ideas for that too 
I did 2 wget action to get 2 files from your GitHub. But now get 2 errors on those files:
compact-custom-header.js
popup-backdrop-filter.js:
2020-02-03 10:54:33 ERROR (MainThread) [frontend.js.latest.202001082] https://192.168.100.24:8123/community_plugin/compact-custom-header.js:7:1 Uncaught SyntaxError: Unexpected token '<'
2020-02-03 10:54:34 ERROR (MainThread) [frontend.js.latest.202001082] https://192.168.100.24:8123/community_plugin/popup-backdrop-filter.js:7:1 Uncaught SyntaxError: Unexpected token '<'
what can I do to solve this?
Hi really great work you have done. I am working in Lovelace raw editor and having some issues implementing this. I have taken the part of DATORLAMPA and used my own entities but it keeps giving me error when implementing in manual card. Can you post an example of this on how to implement in manual card?
What do you mean by “manual card”? Just the slider/dimmer would be something like
- color_temp: true
entity: light.datorlampa
header: false
persist_features: true
type: 'custom:light-slider-card'
I didn’t find them in hacs ''s…
popup-backdrop-filter has to be added to hacs
maykar/compact-custom-header is replaced by custom-header
1 Like
Make sure you download the raw files from github.
Added Media
Conditionally display media player controls based on last active device such as Apple TV, Playstation 4, Google Nest Mini. If nothing is active for 15 minutes then a poster of last downloaded movie/episode is shown (Radarr/Sonarr). But what if I want to control the second last active device? Swipe to reveal…
3 Likes
Added them via HACS and problem solved!! Thanks!
Hi Mattias.
So i am trying to take the code that generates “datorlampa” from your lovelace.yaml file and inserting it in a manual card. I understand it is made for a full view but how can i make it as a single card?
elements:
- entity: light.stue_kuglelampe
state_image:
'off': /local/studio_datorlampa_off.png
'on': /local/studio_datorlampa_on.png
unavailable: /local/unknown.png
style:
left: 55.18%
top: 20.35%
width: 10%
type: image
- conditions:
- entity: light.stue_kuglelampe
state_not: unavailable
elements:
- entity: light.stue_kuglelampe
icon: 'bha:hue-bulb'
style:
'--iron-icon-height': 1.87vw
'--iron-icon-width': 1.87vw
left: 52.19%
top: 15.55%
type: state-icon
type: conditional
- conditions:
- entity: light.stue_kuglelampe
state: 'on'
elements:
- entity: sensor.stue_kuglelampe_percent
fill: '#FFFFFF10'
font_style:
color: '#7d7e80'
font-size: 1.0vw
font-weight: 400
margin-left: '-0.8%'
margin-top: 1.9%
gradient: true
max: 100
min: 0
stroke_color: '#aaabad'
stroke_width: 6
style:
height: 3.15vw
left: 57.65%
opacity: 0.7
top: 16.3%
width: 3.15vw
type: 'custom:circle-sensor-card'
units: '%'
type: conditional
- hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: light.stue_kuglelampe
secondary_info: last-changed
style: |
ha-card {
z-index: 5
}
type: entities
- entities:
- color_temp: true
entity: light.stue_kuglelampe
header: false
persist_features: true
type: 'custom:light-slider-card'
show_header_toggle: false
style: |
ha-card {
z-index: 0;
}
type: entities
- brightness: false
color_picker: false
color_temp: true
effects_list: false
entity: light.stue_kuglelampe
full_width_sliders: false
header: false
persist_features: true
show_slider_percent: false
style: |
ha-card {
padding-bottom: 3em;
margin-top: -1.5em;
margin-left: -1.8em;
opacity: 0.7;
z-index: 5;
}
type: 'custom:light-entity-card'
- entities:
- buttons:
- icon: 'mdi:'
service: browser_mod.popup
service_data:
card:
cards:
- entities:
- entity: light.stue_kuglelampe
secondary_info: last-changed
type: entities
- brightness: false
color_temp: false
entity: light.stue_kuglelampe
full_width_sliders: true
header: false
persist_features: true
show_slider_percent: true
smooth_color_wheel: true
type: 'custom:light-entity-card'
type: 'custom:vertical-stack-in-card'
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: Datorlampa
style:
background: >-
radial-gradient(circle at 50% 0,
rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%,
rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%,
rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%)
beige
border-radius: 50%
font-weight: 500
margin-bottom: 0.5em
margin-top: 0.8em
padding: 1.8em
type: 'custom:button-entity-row'
style: |
ha-card {
margin-top: -2.3em;
}
type: entities
type: 'custom:vertical-stack-in-card'
deviceID:
- this
style:
'--ha-card-border-radius': 0vw 0vw 0.8vw 0.8vw
border-radius: 0.8vw
opacity: 0.9
title: Datorlampa
image: /local/overlay.svg
style:
left: 55.18%
opacity: 0
top: 20.35%
width: 10%
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: light.stue_kuglelampe
image: /local/uibg0.png
type: picture-elements
@Mattias_Persson do you have light scenes based on Apple TV status? I have when playing light go low, when paused lights go normal again. But Netflix have the preview video show feature, this is also a status “video” for Apple TV. If you also use status for control lights, how did you do this?
Second: How did you get the slider vertical for light? Apple TV look one?
I had a scene based on Apple TV state but removed it. The problem is if I watch short videos on youtube the whole room becomes a disco of dimmed to normal light. I prefer to activate the scene manually.
I’m not sure this is the best way to go about it. You also have the full background image: /local/uibg0.png in your card.
I would suggest to look over the documentation for picture elements, try on your own and then revisit my code for reference.
1 Like
I have a 5 seconds delay so when status is still changed in 5 seconds then start the scene. When a video stop and a new one play within 5 seconds then the same scene will be active Otherwise you have a disco indeed!
How did you let work the FKB Screen on and off function. I have it work, but when tablet screen is off, on a certain moment when I want turn it on it won’t react. I need turn it on again with hardcore button of the tablet.
Tablet is also unavailable then.
(Im using the browser_mod) not the CURL command actions. Maybe that is the problem?
EDIT: When I use your way with:
http://192.168.x.x:2323/?cmd=screenOn&type=json&password=PASSWORD
then the screen go on. So maybe it is the browser_mod part …