Iframe state card for Home Assistant
KNOWN PROBLEMS: CSS and code could be better arranged, scalling on page zoom/resize could be better.
- Download
/www/custom_ui/state-card-iframe.htmlto<your-hass-configuration-dir>/www/custom_ui/(create the folder structure if you don't have it - mind the permissions) - Add it to your
configuration.yaml:
frontend:
extra_html_url:
- /local/custom_ui/state-card-iframe.html- Create one or more template sensors, binary_sensor(s), input_text(s) etc. in your
configuration.yaml. E.g.:
sensor:
- platform: template
sensors:
iframe:
value_template: iframe
iframe2:
value_template: iframe- Add your sensor to a group.. E.g.:
group:
group_iframe:
name: ' ' > in this format the iframe will not have a name above
entities:
- sensor.iframe
group_iframe2:
name: 'Name' > with a name
entities:
- sensor.iframe2- Customize your newly created sensor in the
customizesection or yourcustomize.yamlfile:
The scale, height and scale should create the right size for the iframes. Iframes are a bit finicky to work with and sometimes the content they show don't scale properly.
- All options are mandatory! customize:
sensor.iframe:
custom_ui_state_card: state-card-iframe
config:
height: 490 > in pixels, height of the iframe (more work needed)
width: 108 > in %, width of the iframe (more work needed)
scale: 1 > scales up or down the content of the iframe (it affects both the height and the width)
url: https://www.youtube.com/embed/tgbNymZ7vqY > url of the resource (**please note that some websites won't allow iframe embeding**)
sensor.iframe2:
custom_ui_state_card: state-card-iframe
config:
height: 350
width: 108
scale: 1
url: https://embed.windy.com/embed2.htmlOBSOLETE. For Lovelace
Download /www/custom_ui/lovelace-iframe.html to <your-hass-configuration-dir>/www/custom_ui/ and add the following to your configuration.
frontend:
extra_html_url:
- /local/custom_ui/lovelace-iframe.html
# Example ui-lovelace.yaml. Create this file as <config>/ui-lovelace.yaml.
# Parameters: url is mandatory, height is recommended for better fit, everything else is optional and can be deleted if desired.
views:
- name: Iframe
cards:
- type: "custom:lovelace-iframe"
url: https://embed.windy.com/embed2.html?lat=48.234&lon=8.598&zoom=5&level=surface&overlay=radar&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=48.234&detailLon=8.598&metricWind=default&metricTemp=default&radarRange=-12
height: 700
title: WEATHER
title-color: white
title-background-color: darkgrey
title-font-size: 15px
title-font-weight: 500
Version 20180624:
Added Lovelace custom card
Version 20180206:
Disabled more info card
Version 20180129:
Added functionality to prevent scrolling in the iframe (e.g. for embedded maps). To enable scrolling, click once.