@Dino-Tech we’re working on updating the Home Assistant demo on the website and would love to include parts of your config. Would you want to contribute the config of 2 or 3 tabs for the demo? Instructions how to contribute can be found here https://github.com/home-assistant/home-assistant-polymer/wiki/Contributing-a-Lovelace-config-for-the-demo
1 Like
Would be honored. I’ll follow up on this today. 
Just started working on some new style views thanks to @thomasloven’s layout card and card-modder . Switching background and card images with input_select and I’ll try to automate that randomly. I’d like to randomly have them change when view is clicked or a set timer.
Automated now…
Have been working on this simple and easy *NO custom cards view:
Use with Darkest-Nightz theme as main HA theme and use Clear-Nightz-II theme for the view.
Code:
title: radar_view
theme: Clear-Nightz-II
background: center / cover no-repeat url("/local/backgroundz/Purple-fractals.jpg") fixed
icon: mdi:weather-partlycloudy
cards:
- type: vertical-stack
cards:
- type: entities
title: 'Dark Sky Summary'
show_header_toggle: false
entities:
- sensor.dark_sky_summary
- sensor.dark_sky_minutely_summary
- sensor.dark_sky_hourly_summary
- sensor.dark_sky_daily_summary
- type: divider
- sensor.dark_sky_temperature
- sensor.dark_sky_apparent_temperature
- type: iframe
url: https://embed.windy.com/embed2.html
aspect_ratio: 72%
- type: vertical-stack
cards:
- type: weather-forecast
entity: weather.covington_forecast
- type: entities
entities:
- type: divider
- type: entities
entities:
- sensor.dark_sky_daytime_high_temperature_0
- sensor.dark_sky_overnight_low_temperature_0
- sensor.dark_sky_precip_intensity
- sensor.dark_sky_precip_probability
- sensor.dark_sky_humidity
- sensor.dark_sky_dew_point
- sensor.dark_sky_pressure
- sensor.dark_sky_wind_speed
- type: vertical-stack
cards:
- type: history-graph
title: 'Outside Conditions'
entities:
- entity: sensor.outside_ht_temp
name: Patio Temp
unit_of_measurement: F
- entity: sensor.outside_ht_humidity
name: Patio Humidity
- entity: sensor.dark_sky_temperature
name: Outside Temp
unit_of_measurement: F
- entity: sensor.dark_sky_humidity
name: Outside Humidity
- entity: sensor.garage_smoke_temp
name: Garage Temp
unit_of_measurement: F
- type: markdown
content: >
##
Local Radar
- type: horizontal-stack
cards:
- type: picture-entity
entity: camera.local_radar
camera_image: camera.local_radar
show_state: false
show_name: false
- type: picture-entity
entity: camera.new_orleans_radar
camera_image: camera.new_orleans_radar
show_state: false
show_name: false
3 Likes
Okay. I got this working, but not the way I want…yet. Live camera feeds as background image. Haven’t seen this yet, but it has potential. Just pulling random input selections for images for now. Would like to have PIR detection designate the camera feed displayed. I know this has been done with the custom : surveillance-card, but would like help if anyone has an idea of how to accomplish.
horrible hardware here, but good enough to get the idea…
do you have a link for this? It didn’t come up when I searched
thanks 
1 Like
Is Tinycam Pro / Wyzecam working stable for you ? I have the same setup and get lots of timeouts / errors. I’m running TCP on a VM with android though, so maybe thats the issue.
care to share how you managed to accomplish this? 
You really need a github for the awesome stuff you come up with lol
1 Like
Fairly decent. Can’t complain much here due to my total investments in the set up. $47 android tab wall mount(alarm panel controls), running on LAN through a $4 app with 5 $20 cameras presently. Much better quality when viewed directly with TinyCam’s webserver IP on PC though, but I don’t use the feeds for main security, just for occasional viewing if alerted or curious.
This is what makes the background display the live feed:
title: test4_view
theme: Clear-Nightz-II
icon: mdi:tablet
panel: true
cards:
- type: custom:card-modder
style:
background-image: "url(http://192.168.1.250:8083/axis-cgi/mjpg/video.cgi?cameraId=[[ input_select.auto_camera.state ]]&user=<username>&pwd=<password>)"
background-repeat: no-repeat
background-size: 100% 100%
display: block #THIS IS ESSENTIAL!
card:
type: custom:layout-card
layout: vertical
cards:
- type: custom:card-modder
...
and this is the automation:
- alias: '[Auto] camera background select'
trigger:
platform: time_pattern
seconds: '/15'
action:
- service: input_select.set_options
entity_id: input_select.auto_camera
data_template:
options: '{{ ["1234567890", "2345678901", "3456789012"] | random }}'
and create an input_select.auto_camera
and need : card-tools; custom:layout-card; custom:card-modder installed and working before setting up page
1 Like
***learning my way through the GH process currently. Hope to accomplish in near future…
1 Like
You could also get the dafang hack, works fine. Probably best used with iframe.
Was working on a few new mobile views, but had a ground up rebuild to take care of before I could finish these up. Basically just home screen and second navigation screen for now.
There are lot of new custom cards and plenty of options…
Some simple room screens for mobile.
1 Like
Code example for 2 rooms. Pretty much all the same, depending on what you add per room.
- id: 21
title: living_room_view
theme: Clear-Nightz-II
background: center / cover no-repeat url("/local/images-lovelace/backgroundz/blue_line.jpg") fixed
icon: mdi:hotel
cards:
- type: custom:card-loader
wait:
- compact-custom-header
- card-modder
card:
type: custom:card-modder
style:
background-color: rgba(0, 13, 255,0.15) # 0, 0, 179
background-size: 100% 100%
border-radius: 25px
border: solid 10px rgb(0, 13, 255)
padding: 5px 8px 0px 7px
display: block
card:
type: vertical-stack
cards:
- type: custom:compact-custom-header
- type: picture-glance
entities:
- binary_sensor.living_room_motion
- binary_sensor.hallway_motion
- switch.living_room_ceiling_light
- switch.living_room_ceiling_fan
- switch.living_room_lamp
- light.fireplace_lights
- switch.tv_accent_lights
- switch.subwoofer
state_image:
"on": /local/images-lovelace/card_backz/Living2.ON.png
"off": /local/images-lovelace/card_backz/Living2.OFF.png
entity: group.living_room_lights
aspect_ratio: 16x9 #18x11 #
- type: horizontal-stack
cards:
- type: custom:circle-sensor-card
entity: sensor.living_room_thermostat_temperature
max: 90
min: 30
stroke_width: 12
stroke_color: "#000dff"
gradient: true
units: ' '
name: Temp
font_style:
color: "#000dff" # #0000b3
font-size: 1.6em
text-shadow: '2.2px 2.2px black'
font-family: 'Righteous'
color_stops:
75: "#000dff"
80: "#ffff66"
style:
top: 50%
left: 50%
width: 50px
height: 50px
- type: custom:circle-sensor-card
entity: sensor.living_room_thermostat_humidity
max: 90
min: 30
stroke_width: 12
stroke_color: "#000dff"
gradient: true
units: ' '
name: Humidity
font_style:
color: "#000dff"
font-size: 1.6em
text-shadow: '2.2px 2.2px black'
font-family: 'Righteous'
color_stops:
75: "#000dff"
80: "#ffff66"
style:
top: 50%
left: 50%
width: 75px
height: 75px
- type: custom:circle-sensor-card
entity: sensor.filtered_realistic_temperature
max: 90
min: 30
stroke_width: 12
stroke_color: "#000dff"
gradient: true
units: ' '
name: Ambient
font_style:
color: "#000dff"
font-size: 1.6em
text-shadow: '2.2px 2.2px black'
font-family: 'Righteous'
color_stops:
75: "#000dff"
80: "#ffff66"
style:
top: 50%
left: 50%
width: 50px
height: 50px
- type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: Hallway
items:
- switch.hallway_light
- binary_sensor.hallway_motion
- switch.living_room_fan
- type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: Foyer
items:
- switch.foyer_light
- switch.foyer_accent_lights
- type: custom:mini-media-player
entity: media_player.foyer_speaker
icon: mdi:google-home
artwork: cover
group: true
hide:
icon: true
source: true
power_state: false
- type: conditional
conditions:
- entity: media_player.living_room_tv
state_not: "off"
- entity: media_player.living_room_tv
state_not: unavailable
card:
type: media-control
entity: media_player.living_room_tv
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0)
border-radius: 90px
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
card:
type: picture
image: /local/icons/round/round_home.png
tap_action:
action: navigate
navigation_path: /lovelace/0 # ?kiosk&show_tabs
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0)
border-radius: 90px
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
card:
type: picture
image: /local/icons/round/round_close.png
tap_action:
action: navigate
navigation_path: /lovelace/1 # ?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0)
border-radius: 90px
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
card:
type: picture-entity
entity: input_boolean.browser_refresh
tap_action:
action: toggle
show_state: false
show_name: false
state_image:
"on": /local/icons/round/round_redo.png
"off": /local/icons/round/round_redo.png
- id: 22
title: office_view
theme: Clear-Nightz-II
background: center / cover no-repeat url("/local/images-lovelace/backgroundz/black_carbon.jpg") fixed
icon: mdi:laptop-chromebook
cards:
- type: custom:card-loader
wait:
- compact-custom-header
- card-modder
card:
type: custom:card-modder
style:
background-color: rgba(255, 187, 51,0.1)
background-size: 100% 100%
border-radius: 25px
border: solid 10px rgb(255, 187, 51)
padding: 0px 10px 0px 10px
display: block
card:
type: vertical-stack
cards:
- type: custom:compact-custom-header
- type: picture-glance
entities:
- binary_sensor.office_motion
- switch.office_ceiling_light
- light.22507506807d3a4c9f35 # office desk light
- switch.office_ceiling_fan
- switch.office_lamps
- light.corner_light
- light.bed_light
- switch.office_work_bench
state_image:
"on": /local/images-lovelace/card_backz/Office2.ON.png
"off": /local/images-lovelace/card_backz/Office2.OFF.png
entity: group.office_lights
aspect_ratio: 16x9
- type: horizontal-stack
cards:
- type: custom:circle-sensor-card
entity: sensor.office_temp
max: 90
min: 30
stroke_width: 12
stroke_color: "#ffbb33"
gradient: true
units: ' '
name: Temp
font_style:
color: "#e69900"
font-size: 1.6em
text-shadow: '2.2px 2.2px black'
font-family: 'Righteous'
color_stops:
75: "#ffbb33"
80: "#ffff66"
style:
top: 50%
left: 50%
width: 50px
height: 50px
- type: custom:circle-sensor-card
entity: sensor.office_humidity
max: 90
min: 30
stroke_width: 12
stroke_color: "#ffbb33"
gradient: true
units: ' '
name: Humidity
font_style:
color: "#e69900"
font-size: 1.6em
text-shadow: '2.2px 2.2px black'
font-family: 'Righteous'
color_stops:
75: "#ffbb33"
80: "#ffff66"
style:
top: 50%
left: 50%
width: 75px
height: 75px
- type: custom:circle-sensor-card
entity: sensor.office_temp_avg
max: 90
min: 30
stroke_width: 12
stroke_color: "#ffbb33"
gradient: true
units: ' '
name: Ambient
font_style:
color: "#e69900"
font-size: 1.6em
text-shadow: '2.2px 2.2px black'
font-family: 'Righteous'
color_stops:
75: "#ffbb33"
80: "#ffff66"
style:
top: 50%
left: 50%
width: 50px
height: 50px
- type: entities
entities:
- type: divider
- type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: Color Lights
items:
- type: "custom:light-entity-row"
entity: light.corner_light
icon: mdi:lamp
name: Corner Light
buttons:
- name: Red
service_data:
color_name: red
- name: Green
service_data:
color_name: green
- name: Purple
service_data:
color_name: purple
- name: Teal
service_data:
color_name: teal
- name: Blue
service_data:
color_name: blue
- type: section
- type: "custom:light-entity-row"
entity: light.bed_light
icon: mdi:lamp
name: Left Light
buttons:
- name: Red
service_data:
color_name: red
- name: Green
service_data:
color_name: green
- name: Purple
service_data:
color_name: purple
- name: Teal
service_data:
color_name: teal
- name: Blue
service_data:
color_name: blue
- type: section
- type: "custom:light-entity-row"
entity: light.22507506807d3a4c9f35 # office desk light
icon: mdi:lamp
name: Desk Lamp
buttons:
- name: Red
service_data:
color_name: red
- name: Green
service_data:
color_name: green
- name: Purple
service_data:
color_name: purple
- name: Teal
service_data:
color_name: teal
- name: Blue
service_data:
color_name: blue
- type: horizontal-stack
cards:
- type: entity-button
entity: switch.office_sound
name: Audio
tap_action:
action: toggle
- type: entity-button
entity: switch.office_video
name: Video
tap_action:
action: toggle
- type: entity-button
entity: switch.air_cleaner
name: Purifier
tap_action:
action: toggle
- type: entity-button
entity: switch.printer
name: Printer
tap_action:
action: toggle
- type: horizontal-stack
cards:
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0)
border-radius: 90px
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
card:
type: picture
image: /local/icons/round/round_home.png
tap_action:
action: navigate
navigation_path: /lovelace/0 # ?kiosk&show_tabs
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0)
border-radius: 90px
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
card:
type: picture
image: /local/icons/round/round_close.png
tap_action:
action: navigate
navigation_path: /lovelace/1 # ?kiosk
- type: custom:card-modder
style:
background-color: rgba(0,0,0,0.0)
border-radius: 90px
box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.0)
card:
type: picture-entity
entity: input_boolean.browser_refresh
tap_action:
action: toggle
show_state: false
show_name: false
state_image:
"on": /local/icons/round/round_redo.png
"off": /local/icons/round/round_redo.png
Active borders for alarms, alerts, timers and notifications that display on all devices viewing Lovelace…
Started on a tablet view for wall mount. First go at it!
along with a Sleep screensaver that has active notifications.
1 Like
Different options for a more flexible product. Neutral gray and accents can be changed to fit user…
@Dino-Tech those screen shots look awesome. Any chance you can share your js file for the solo camera shots above? I’ve got surveillance-card working…but I trying to figure how to show the live feed for one camera in the same size of a picture-entity card. something like this but convert surveillance-card for the driveway camera.
