Help with website scrape/picture

Configuration Frontend
1

I have a tab in Lovelace that contains all of my weather data from my PWS, NOAA tides, forecasts from OpenWeatherMap, and a static NEXRAD image (from Weather Radar Maps on HACS). I want to add one more picture card, the current surface plot from NOAA’s Aviation Weather Center (AWC - Prog Charts).

In configuration.yaml, I have a scrape sensor defined:

  - platform: scrape
    name: AWC Prog Chart
    resource: https://aviationweather.gov/progchart/sfc
    select: "#image"
    attribute: src

If I look in History, it is accurately pulling the internal URL for the current image (/data/products/progs/20221202/20221202_12_F000_wpc_sfc.gif). I’ve fiddled with the template editor in developer’s tools, and have come up with the following template:

https://aviationweather.gov{{states('sensor.awc_prog_chart')}}

which correctly shows the full URL, that if put into a browser, displays the image I want in a card.

And here is where I am stuck, I have tried to enter that code into the picture card, but I don’t think the image path can accept a template. I’m kind of hitting the limit of my research at this point, and am looking to the community for help!

2

Have you tried to save the image and put it onto your local device?

3

The picture is updated every three hours by NOAA’s Aviation Weather Center, so I wanted it to just scrape the web address and display the current picture on their site - without downloading a picture every 3 hours.

I ended up finding the answer. I found the Lovelace Card Templater on HACS. After installing that, here’s my code for the Lovelace card in case anyone wants to do something similar…

type: custom:card-templater
card:
  type: picture
  image_template: https://aviationweather.gov{{states('sensor.awc_prog_chart')}}
  tap_action:
    action: url
    url_path: https://aviationweather.gov/progchart/sfc
entities:
  - sensor.awc_prog_chart
1 Like
4

I’m trying to achieve the same thing, but without success. I have a scrape entity with the image URL as state, which appears correctly when checked in dev tools => template.

image
image1127×193 26.7 KB

But when I try to use the same template in the card-templater config, it just gives me a broken picture.

type: custom:card-templater
card:
  type: picture
  image_template: >-
    {{ states.sensor.pkga_20_li_c2_air_compressor_attachment_product_image.state
    }}
entites:
  - sensor.pkga_20_li_c2_air_compressor_attachment_product_image

image
image978×570 24.6 KB

And using the browser’s dev tools, I can see that the src for the image is just https://<my-domain>/-.

What may I be doing wrong?