Lovelace: Weather Mp4 Backgrounds

perdemot · October 13, 2018, 9:44am

When looking into Lovelace I found a post on Reddit about using gifs as a background. Sadly a 1080p gif tends to be quite big in file size. So here is an option that allows you to use an mp4.

This card uses position absolute to load itself in the background. And I use an Iframe to then set the content of the absolute div. This is due to the fact that using the

How to install:

Copy “weatherbg-card.js” and the folder “weather-animations” into your /www/
Add the card to your resources in the ui-lovelace.yaml

      - url: /local/weatherbg-card.js
        type: module

Load the card as the last card in your view and hand it a weather object

        - type: "custom:weatherbg-card"
          weather: weather.dark_sky
          #NO CARDS AFTER THIS THEY WILL NOT BE SHOWN

You can change the videos to whatever you like by editing the HTML files in “weather-animations”.
By default, the video has a 20% opacity black overlay. This can be adjusted in the main .js file by changing the background of “.bg-wrap:before”

views:
  - title: Example
    id: example
    background: 
    theme:
    cards:
      - type: weather-forecast
        entity: weather.dark_sky
        
      - type: "custom:weatherbg-card"
        url: /local/custom_ui/weather-animations/cloud.html
        weather: weather.dark_sky
        #NO CARDS AFTER THIS THEY WILL NOT BE SHOWN

I am still looking on how to improve this or even creating a PR for Polymer.

firstof9 · October 13, 2018, 10:45pm

Using the code you passed me I did this:

The choppiness is from the capture program, it’s actually smooth.

matisaul · October 14, 2018, 1:09am

Holy sh*t … That’s amazing!!! Could you share how did you do that??

Thanks @perdemot for this nice card!!

callifo · October 14, 2018, 1:18am

That’s amazing, what impact does it have on the client, is this still usable remotely?

firstof9 · October 14, 2018, 3:28am

FYI @perdemot I used this bit in the HTML to autoplay and loop the video:

<video autoplay muted loop>
     <source src="myvideoloop.mp4" type="video/mp4">
</video>

firstof9 · October 14, 2018, 3:33am

Runs smooth as silk when I browse it from my phone

perdemot · October 14, 2018, 2:59pm

Using the same in my iframe setup, but it doens’t properly work on some devices. Might be my adblock. Currently looking into it.

firstof9 · October 14, 2018, 3:20pm

True, I only have tested it in Chrome on my desktop and cell phone.

I did have to modify the iframe a touch too:

<iframe class="bg-iframe" scrolling="no" src="${config.url}"/>

with a small mod to the css as well:

        .bg-wrap{
            position: absolute;
            right: 0;
            bottom: 0;
            min-width: 100vw; 
            min-height: 100vh;
            top:-117px;
            z-index: -1;
        }

Trace-star · October 24, 2018, 8:26am

I want to know how to change different gifs

sparkydave · October 24, 2018, 8:57am

this needs to be a built-in HA option on any screen. thats killer, well done!

maurizio53 · October 24, 2018, 10:31am

I set this in ui-lovelace.yaml:

  - icon: mdi:weather-cloudy
    id: meteo2
    title: Meteo2
    cards:
      - type: "custom:weatherbg-card"
        weather: weather.meteo_darksky

And i have weather.meteo_darksky configured in this way:

  - type: weather-forecast
    entity: weather.meteo_darksky

In configuration.yaml i have:

weather:
  - platform: darksky
    api_key: !secret darksky_api_key
    name: Meteo DarkSky
    mode: daily

But in the front end i can see only the mp4 video and not the card.
Where am i wrong?

maurizio53 · October 24, 2018, 4:26pm

Anyone can help me in finding where i am wrong?

Justin_Wuffen · October 24, 2018, 7:04pm

Is it easy to set it as background in a weather card?

maurizio53 · October 26, 2018, 11:59am

I cannot get the card over the background… i followed the instructions here, but i get only the mp4 background.

firstof9 · October 26, 2018, 1:44pm

What browser are you using?

maurizio53 · October 26, 2018, 2:44pm

Chrome on a MAC Os X

firstof9 · October 26, 2018, 10:42pm

Can you post your whole lovelace.yaml ?

maurizio53 · October 27, 2018, 10:20am

  - url: /local/weatherbg-card.js
    type: module

  - icon: mdi:weather-cloudy
    id: meteo2
    title: Meteo2
    cards:
      - type: "custom:weatherbg-card"
        weather: weather.meteo_darksky

firstof9 · October 27, 2018, 11:35am

So you don’t have a weather card set to display so, try something like this:

    - type: custom:dark-sky-weather-card
      entity_sun: sun.sun
      entity_daily_summary: sensor.dark_sky_daily_summary
      entity_current_conditions: sensor.dark_sky_icon  
      entity_humidity: sensor.dark_sky_humidity
      entity_pressure: sensor.dark_sky_pressure
      entity_temperature: sensor.dark_sky_temperature
      entity_visibility: sensor.dark_sky_visibility
      entity_wind_bearing: sensor.dark_sky_wind_bearing
      entity_wind_speed: sensor.dark_sky_wind_speed
      entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
      entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
      entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
      entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
      entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
      entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature
      entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
      entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
      entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
      entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
      entity_forecast_icon_1: sensor.dark_sky_icon_1
      entity_forecast_icon_2: sensor.dark_sky_icon_2
      entity_forecast_icon_3: sensor.dark_sky_icon_3
      entity_forecast_icon_4: sensor.dark_sky_icon_4
      entity_forecast_icon_5: sensor.dark_sky_icon_5   

      - type: "custom:weatherbg-card"
        weather: weather.meteo_darksky

maurizio53 · October 27, 2018, 12:23pm

Yes, i have it… forgot to quote…

  - type: custom:dark-sky-weather-card
    title: Meteo
    entity_weather: weather.meteo_darksky
    entity_sun: sun.sun
    entity_daily_summary: sensor.dark_sky_daily_summary
    entity_current_conditions: sensor.dark_sky_icon  
    entity_humidity: sensor.dark_sky_humidity
    entity_pressure: sensor.dark_sky_pressure
    entity_temperature: sensor.dark_sky_temperature
    entity_visibility: sensor.dark_sky_visibility
    entity_wind_bearing: sensor.dark_sky_wind_bearing
    entity_wind_speed: sensor.dark_sky_wind_speed
    entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
    entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
    entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
    entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
    entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
    entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature
    entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
    entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
    entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
    entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
    entity_forecast_icon_1: sensor.dark_sky_icon_1
    entity_forecast_icon_2: sensor.dark_sky_icon_2
    entity_forecast_icon_3: sensor.dark_sky_icon_3
    entity_forecast_icon_4: sensor.dark_sky_icon_4
    entity_forecast_icon_5: sensor.dark_sky_icon_5
    entity_background: Beach.jpg