I’m hoping to setup a few Amazon Fire tablets as the main control interface. Are there any special considerations I should think about before looking to implement? Specifically, will I need to change scale, etc?
For scaling as long as you work with % it will follow the resolution
Fire tablets don’t handle custom cards well, so as long as you stay away from those, you should be alright.
Here is the Lovelace part that cover my floor plan. There is a lot of code CSS and custom cards to achieve that look. I don’t know if i will be ever done i keep adding stuff but soon i will make a detailed post covering only that floorplan.
Main cards:
Picture element
Custom cards:
Config Template Card
auto-entities
card-modder
popup-card
useful-markdown-card
- background: center / cover repeat-y url("/local/back.jpg") fixed
badges: []
cards:
- cards:
- card:
card:
elements:
- image: /local/topfloor.png
style:
left: 50%
pointer-events: none
top: 50%
width: 100%
z-index: 1
type: image
- entity: sensor.power
prefix: Total Power
style:
font-size: 15px
font-weight: bolder
left: 83.8%
top: 41.5%
transform: perspective(280px) rotateX(8deg) skewX(11deg)
width: 17.88%
type: state-label
- entity: sensor.internetleft
style:
'--ha-card-box-shadow': '-25px 65px 25px 0px rgba(50,50,50,0)'
'--paper-card-background-color': 'rgba(180,180,180,0)'
background-color: 'rgba(250, 250, 250, 0)'
font-size: 22px
font-weight: bolder
right: '-2.6%'
top: 32.4%
transform: perspective(280px) rotateX(8deg) skewX(11deg)
width: 17.88%
type: state-label
- card: null
content: |
GB Remaining
style:
'--ha-card-box-shadow': '-25px 65px 25px 0px rgba(50,50,50,0)'
'--paper-card-background-color': 'rgba(180,180,180,0)'
background-color: 'rgba(250, 250, 250, 0)'
font-size: 12px
left: 85.9%
top: 32.3%
transform: perspective(280px) rotateX(8deg) skewX(11deg)
width: 17.88%
type: 'custom:useful-markdown-card'
- card: null
content: |
Day
style:
'--ha-card-box-shadow': '-25px 65px 25px 0px rgba(50,50,50,0)'
'--paper-card-background-color': 'rgba(180,180,180,0)'
background-color: 'rgba(250, 250, 250, 0)'
font-size: 14px
left: 88.4%
top: 30.45%
transform: perspective(280px) rotateX(8deg) skewX(11deg)
width: 17.88%
type: 'custom:useful-markdown-card'
- entity: sensor.days_left
style:
font-size: 29px
font-weight: bolder
left: 86.9%
top: 29.8%
transform: perspective(280px) rotateX(8deg) skewX(11deg)
width: 17.88%
type: state-label
- entity: sensor.total_download
style:
font-size: 16px
font-weight: bolder
left: 83.5%
top: 39%
transform: perspective(280px) rotateX(8deg) skewX(11deg)
width: 17.88%
type: state-label
- entity: sensor.total_upload
style:
font-size: 16px
font-weight: bolder
left: 83.3%
top: 36.3%
transform: perspective(280px) rotateX(8deg) skewX(11deg)
width: 17.88%
type: state-label
- entity: light.kitchen
image: /local/fp_kitchen_off.png
state_filter:
'off': opacity(0%)
'on': >-
${"opacity(" +
(states['light.kitchen'].attributes.brightness / 2.55) +
"%)"}
style:
left: 66.9%
top: 23.49%
width: 17.88%
z-index: 5
type: image
- card:
type: glance
filter:
include:
- entity_id: sensor.kitchen_temperature
- entity_id: switch.coffee
state: 'on'
style:
'--ha-card-box-shadow': '-25px 65px 25px 0px rgba(50,50,50,0.8)'
background-color: 'rgba(250, 250, 250, 1)'
border-bottom: 'solid 3px #0086b3'
border-left: none
border-radius: 0px 12px 12px 0px
border-right: 'solid 3px #0086b3'
border-top: 'solid 3px #0086b3'
color: 'rgba(100,100,100,1)'
font-size: 12px
font-weight: bolder
left: 74.9%
top: 10.5%
transform: perspective(280px) rotateX(8deg) skewX(11deg)
type: 'custom:auto-entities'
- entity: light.office
image: /local/fp_office_off.png
state_filter:
'off': opacity(0%)
'on': >-
${"opacity(" +
(states['light.office'].attributes.brightness / 2.55) +
"%)"}
style:
left: 40.75%
top: 17.6%
width: 35.245%
z-index: 5
type: image
- card:
type: glance
filter:
include:
- entity_id: sensor.office_temperature
- entity_id: climate.office
state: heat
- entity_id: switch.computer
state: 'on'
- entity_id: switch.002006822c3ae80d1f27
state: 'on'
- entity_id: switch.plex_server
state: 'on'
- entity_id: binary_sensor.frank_office
state: 'on'
style:
'--ha-card-box-shadow': '25px 65px 25px 0px rgba(50,50,50,0.8)'
background-color: 'rgba(250, 250, 250, 1)'
border-bottom: 'solid 3px #0086b3'
border-left: 'solid 3px #0086b3'
border-radius: 12px 0px 0px 12px
border-right: solid 0px
border-top: 'solid 3px #0086b3'
color: 'rgba(100,100,100,1)'
font-size: 12px
font-weight: bolder
right: 76.03%
top: 10.5%
transform: perspective(280px) rotateX(8deg) skewX(-13.5deg)
type: 'custom:auto-entities'
- entity: light.bedroom
image: /local/fp_bedroom_off.png
state_filter:
'off': opacity(0%)
'on': >-
${"opacity(" +
(states['light.bedroom'].attributes.brightness / 2.55) +
"%)"}
style:
left: 33.3%
top: 59.3%
width: 27.4%
z-index: 5
type: image
- card:
type: glance
filter:
include:
- entity_id: sensor.entrance_temperature
style:
'--ha-card-box-shadow': '25px 65px 25px 0px rgba(50,50,50,0.8)'
background-color: 'rgba(250, 250, 250, 1)'
border-bottom: 'solid 3px #0086b3'
border-left: 'solid 3px #0086b3'
border-radius: 12px 0px 0px 12.3px
border-right: solid 0px
border-top: 'solid 3px #0086b3'
color: 'rgba(100,100,100,1)'
font-size: 12px
font-weight: bolder
right: 79.29%
top: 52%
transform: perspective(280px) rotateX(8deg) skewX(-10.1deg)
type: 'custom:auto-entities'
- entity: light.bathroom
image: /local/fp_bathroom_off.png
state_filter:
'off': opacity(0%)
'on': >-
${"opacity(" +
(states['light.bathroom'].attributes.brightness / 2.55)
+ "%)"}
style:
left: 55.9%
top: 59.1%
width: 17.4%
z-index: 5
type: image
- camera_image: camera.aarlo_living_room
card: null
style:
background-color: 'rgba(250, 250, 250, 1)'
border-bottom: 'solid 3px #0086b3'
border-left: 'solid 3px #0086b3'
border-radius: 0px 0px 12px 12px
border-right: 'solid 3px #0086b3'
border-top: solid 0px
box-shadow: '3px 35px 25px 0px rgba(50,50,50,0.8)'
color: 'rgba(100,100,100,1)'
font-size: 12px
font-weight: bolder
right: 22%
top: 75.645%
transform: perspective(480px) rotateX(9deg) skewX(7deg)
width: 210px
type: image
- card:
type: glance
filter:
include:
- entity_id: sensor.bathroom_temperature
style:
'--ha-card-box-shadow': '3px 35px 25px 0px rgba(50,50,50,0.8)'
background-color: 'rgba(250, 250, 250, 1)'
border-bottom: 'solid 3px #0086b3'
border-left: 'solid 3px #0086b3'
border-radius: 0px 0px 12px 12px
border-right: 'solid 3px #0086b3'
border-top: solid 0px
color: 'rgba(100,100,100,1)'
font-size: 12px
font-weight: bolder
right: 41%
top: 75.645%
transform: perspective(480px) rotateX(9deg) skewX(1.3deg)
width: 110px
type: 'custom:auto-entities'
- entity: light.living_room
image: /local/fp_livingroom_off.png
state_filter:
'off': opacity(0%)
'on': >-
${"opacity(" +
(states['light.living_room'].attributes.brightness /
2.55) + "%)"}
style:
left: 69.4%
top: 53%
width: 20.2%
z-index: 5
type: image
- card:
type: glance
filter:
include:
- entity_id: sensor.living_room_temperature
- entity_id: climate.livingroom
state: heat
- entity_id: switch.pioneer
state: 'on'
- entity_id: switch.tv
state: 'on'
- entity_id: switch.living_room_blind
state: 'on'
style:
'--ha-card-box-shadow': '-25px 65px 25px 0px rgba(50,50,50,0.8)'
background-color: 'rgba(250, 250, 250, 1)'
border-bottom: 'solid 3px #0086b3'
border-left: solid 0px
border-radius: 0px 12px 12px 0px
border-right: 'solid 3px #0086b3'
border-top: 'solid 3px #0086b3'
color: 'rgba(100,100,100,1)'
font-size: 12px
font-weight: bolder
left: 78.34%
top: 52%
transform: perspective(280px) rotateX(8deg) skewX(10.8deg)
type: 'custom:auto-entities'
- entity: light.front_door
image: /local/fp_entrance_off.png
state_filter:
'off': opacity(0%)
'on': >-
${"opacity(" +
(states['light.front_door'].attributes.brightness /
2.55) + "%)"}
style:
left: 27.1%
top: 36.5%
width: 9.7%
z-index: 5
type: image
- entity: light.hallway
image: /local/fp_corridor_off.png
state_filter:
'off': opacity(0%)
'on': >-
${"opacity(" +
(states['light.hallway'].attributes.brightness / 2.55) +
"%)"}
style:
left: 49.3%
top: 36.5%
width: 41.3%
z-index: 5
type: image
image: /local/floorplan.png
type: 'custom:hui-picture-elements-card'
style:
'--primary-background-color': 'rgba(180,180,180,0)'
background-color: 'rgba(200,200,200,0.0)'
box-shadow: '0px 0px 1px 1px rgba(0,0,0,0.0)'
type: 'custom:card-modder'
entities:
- sensor.office_temperature
- sensor.living_room_temperature
- sensor.kitchen_temperature
- sensor.entrance_temperature
- sensor.bathroom_temperature
- climate.office
- climate.livingroom
- light.kitchen
- light.office
- light.bathroom
- light.hallway
- light.front_door
- light.living_room
- light.bedroom
- switch.coffee
- switch.computer
- switch.002006822c3ae80d1f27
- switch.plex_server
- switch.pioneer
- switch.tv
- switch.living_room_blind
- binary_sensor.frank_office
- sensor.total_download
- sensor.total_upload
- sensor.internetleft
- sensor.days_left
- sensor.power
- camera.aarlo_living_room
type: 'custom:config-template-card'
- type: 'custom:compact-custom-header'
type: horizontal-stack
icon: 'mdi:floor-plan'
id: FLOORPLAN
panel: true
popup_cards:
camera.aarlo_living_room:
card:
card:
entity: camera.aarlo_living_room
show:
- motion
- sound
- snapshot
- battery_level
- signal_strength
- captured_today
type: 'custom:aarlo-glance'
style:
border-radius: 12px 12px 12px 12px
color: 'rgba(100,100,100,0)'
font-size: 12px
font-weight: bolder
type: 'custom:card-modder'
large: true
style:
box-shadow: '3px 35px 25px 0px rgba(10,10,10,0.8)'
background-color: 'rgba(200,200,200,1)'
border: 'solid 3px #0086b3'
border-radius: 12px 12px 12px 12px
width: 75%
title: ''
light.office:
card:
card:
type: 'custom:slider-entity-row'
entity: light.office
secondary_info: last-changed
toggle: true
style:
border-radius: 12px 12px 12px 12px
color: 'rgba(100,100,100,1)'
font-size: 12px
font-weight: bolder
type: 'custom:card-modder'
large: true
style:
box-shadow: '3px 35px 25px 0px rgba(10,10,10,0.8)'
background-color: 'rgba(200,200,200,1)'
border: 'solid 3px #0086b3'
border-radius: 12px 12px 12px 12px
width: 45%
title: ''
theme: FLOORPLAN
title: FLOORPLAN
2 Likes
I was going to go down the route of building this for Fire Tablets around the home but from researching it seems that the kiosk mode doesn’t work with most custom Lovelace cards and the general hardware specs aren’t great for the cheap Fire 7’s.
What are other folks using for tablet hardware and would the theme above work we’ll still or is it really only optimized for desktop?
This is by far the coolest and most intuitive floor plan I’ve seen so far. Never really wanted to bother doing a floor plan view myself until I saw this one… so thanks for all the extra work?? 
My tablet is a Galaxy S3 and it works fine on it for the other hardware maybe some else have experience and could bring some inputs
thank you have fun…
Is this the code for FLOORPLAN?
I know its a while ago but do you have an actual tutorial to 0.98 and the new “card-mod” plugin? I cant get it to work 
this is so cool, can I ask where to put the theme.yaml ??
Couldn´t you share alla the scripts thats depending on the theme? And tell the location to put it, its alot of files to hunt down by our self 
Would really appreciate it
You have a github homepage ? I will love to follow you, I really love your floorplan, I dream about such a good ability to draw a nice 3D floorplan, but I’m not so much into that world