Need help parsing a <div> while using Multiscrape

Third party integrations
1

I’m using multiscrape to create some sensors to supplement my personal weather station data. My weather station isn’t mounted high enough and is blocked by houses to accurately measure wind speed and direction, so I’d like to scrape data from a nearby weather station on Weather Underground.

I have the wind speed and text direction, but I believe it is possible to get the wind direction numerically as well, but need to do some work with a value template.

Example URL: Hilliard, OH Weather Conditions | Weather Underground

The element that has the info looks like this:

Selector from Chrome: #inner-content > div.region-content-main > div:nth-child(1) > div > div:nth-child(1) > div:nth-child(1) > lib-city-current-conditions > div > div.conditions-extra.small-9.medium-5.columns.small-centered.medium-uncentered > div > div.condition-wind.small-6.medium-12.columns > lib-wind-gauge > div > div.wind-compass

I’d like to get the value of the rotate before degrees.

I tried this for my value_template:
value_template: “{{ value.split(‘rotate(’)[1].split(‘deg’)[0] }}”

but I get “unavailable” for the sensor.

Can anyone help? It isn’t critical for me as I have the direction in terms of text (SSW), but want to continue improving my HA skills as I’m just getting my HA going for a few weeks now.

Thanks,
Scott

2

It works for me - but you have not pasted as code and the single quotes have been tinkered with - which might be the forum paste or the original (which would cause a problem). But this is what worked for me:

{{ value.split('rotate(')[1].split('deg')[0] }}
3

OK, I got this working! In the end, the key was to use the “style” attribute first (I previously assumed that “value” represented the entire element string, but maybe that wasn’t correct). Then the value_template provided a string output.

I then modified the value_template to convert to int and subtracted 180 to reflect the fact that the graphic roates from due South, which is 180 degrees in terms of wind direction, so 180 needs to be subtracted. I suppose I should add a unit_of_measurement attribute to the sensor as well and probably will before I button this up.

The selector that Chrome provides is a starting point and that worked, but it can be simplified. I was fooled a bit by Chrome because when I used the simple selector of “div.arrow-wrapper”, the Chrome console returned a Nodelist with two items in it, both appearing to be the same. So that threw me off for awhile, but reducing the default selector provided by Chrome to what I have now worked like I thought it should in HA. Just wanted to point out that Multiscrape will “select” a bit differently than Chrome, which I had noticed from other posts related to scraping in HA. Thought I’d point that out for everyone that might learn something from this post.

So in summary, here is the HTML element that is returned from the web page with the selector specified as below:

<div _ngcontent-app-root-c262="" class="arrow-wrapper" style="transform: translateX(-50%) rotate(183deg);"><img _ngcontent-app-root-c262="" alt="img" src="./Personal Weather Station Dashboard _ Weather Underground_files/Wind-Marker.svg"></div>

And here is the YAML config for Multiscrape that works:

    - unique_id: nh_wind_dir_num
      name: Wind Dir Num
      select: "div.arrow-wrapper"
      attribute: "style"
      value_template: "{{ value.split('rotate(')[1].split('deg')[0] | int -180 }}"