It is currently March 29th, 2024, 6:37 am

embed an image that's embedded in a website

Get help with creating, editing & fixing problems with skins
nivram
Posts: 6
Joined: April 6th, 2018, 9:58 am

embed an image that's embedded in a website

Post by nivram »

Hi,

I'd like to use https://projects.noahliebman.net/goes-east/ as my background.

Every 15 minutes or so it will update the embedded image to the most recent one from NOAA's site.

Using something like

Code: Select all

[MeasureImage]
Measure=Plugin
Plugin=WebParser
URL=https://projects.noahliebman.net/goes-east/
Download=1
fails to download an index.png to embed

I've tried the solution by Eclectic-Tech based on work by Echelon5 and it doesn't do it well. There are errors rendering the site and there's an ugly border.

Any recommendations?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: embed an image that's embedded in a website

Post by jsmorley »

nivram wrote:Hi,

I'd like to use https://projects.noahliebman.net/goes-east/ as my background.

Every 15 minutes or so it will update the embedded image to the most recent one from NOAA's site.

Using something like

Code: Select all

[MeasureImage]
Measure=Plugin
Plugin=WebParser
URL=https://projects.noahliebman.net/goes-east/
Download=1
fails to download an index.png to embed

I've tried the solution by Eclectic-Tech based on work by Echelon5 and it doesn't do it well. There are errors rendering the site and there's an ugly border.

Any recommendations?
That is a web site, not an image. The single purpose is to display that image, but you still have to parse it to get the URL to the image itself.

<img id="theworld" src="https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/5424x5424.jpg">

Code: Select all

[MeasureImage]
Measure=Plugin
Plugin=WebParser
URL=https://projects.noahliebman.net/goes-east/
RegExp=<img id="theworld" src="(.*)">
StringIndex=1
Download=1
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: embed an image that's embedded in a website

Post by balala »

EDIT: jsmorley beat me. Again. With a probably better solution.

Try to replace the URL option of the WebParser measure with the following one: URL=https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/5424x5424.jpg?1523014723590. This is the URL of the image, at least right now. I'm not sure if this isn't changing, we'll see.
nivram
Posts: 6
Joined: April 6th, 2018, 9:58 am

Re: embed an image that's embedded in a website

Post by nivram »

I figured out how to do balala's method, but I'm going to switch to jsmorley's.

Thanks!
nivram
Posts: 6
Joined: April 6th, 2018, 9:58 am

Re: embed an image that's embedded in a website

Post by nivram »

hmmm... rainmeter seems dangerous... I could spend way too much time messing around with it...

Is there any way for me to cache the last 3-5 images I downloaded and then fade between them?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: embed an image that's embedded in a website

Post by jsmorley »

nivram wrote:hmmm... rainmeter seems dangerous... I could spend way too much time messing around with it...

Is there any way for me to cache the last 3-5 images I downloaded and then fade between them?
This is likely doable, but would be a bit (ok, a lot) complicated.

First and foremost, you MUST know how often and when that image is updated. If it is updated once an hour, there is no sense in getting the image every 10 minutes, the last 3-5 will all be the same.

If you can know that information, you might set up a Time measure that checks the time, and when it hits the target hour or minute, uses !CommandMeasure to update the WebParser that gets the image.

You will also need some kind of Loop measure, that counts from 1 to 5, that you use to name the file that is downloaded in such a way that it is "Image1.jpg", "Image2.jpg"... etc.

Then you will need some FinishAction on the WebParser measure that fires off an ActionTimer plugin that fades out one Image meter and fades in a second.

You would have to first change the ImageName option on two Image meters, so they use the correct two images (1-2, 2-3, 3-4, 4-5, 5-1) that should be in the pair that are faded out and in.

It wouldn't be trivial, but with some WORK, it could probably be done if you can KNOW when the image is transitioned... Based on what I'm seeing by refreshing that website in my browser, it's not all that often. The keys are that you can know when, and that it is on a reliable schedule.

There are some other "housekeeping" issues about how to deal with the fact that when you first load the skin, there won't be any images yet, and if you unload it and load it again later, all but the latest image will be out of date. Even if you just refresh the skin, that is going to throw off the Loop measure that names the image files. Those are tricky, but likely can be solved by using !WriteKeyValue to make some thing "persistent", if the core functionality can be made to work.
nivram
Posts: 6
Joined: April 6th, 2018, 9:58 am

Re: embed an image that's embedded in a website

Post by nivram »

From what I can tell it seems the image is updated every 15 minutes but takes a while to generate and upload the image to NOAA's site.

all the images can be found here and I think I'm going to work directly with these:
https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/

https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/678x678.jpg
refers to the most recent image, however there are recent timestamped images available from the NOAA link above which makes things a lot easier.

Also, conveniently there's a nice json file at
https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/catalog.json
that could be parsed to get the 5 most recent image names.

Does rainmeter have json parsing? This whole thing would be quite easy in python but I'm still wrapping my head around measures and meters.

It might be doable with regexes but I'm going to have to work at that :(

This seems like its grabbing the 5 most recent image names. I'm sure theres a cleaner way to do it but I don't really like regexs:

Code: Select all

[MeasureSite]
Measure=WebParser
URL=https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/catalog.json
RegExp=(?siU)"([^"]*.jpg)",\s*"([^"]*.jpg)",\s*"([^"]*.jpg)",\s*"([^"]*.jpg)",\s*"([^"]*.jpg)"\s*],\s*"678x678"
From there I get how to set up a couple of Measure-webparser-Image things. I should probably figure out how to make sure I only download them once, and then on exit, delete everything in the folder? I'm going to start by just downloading each of them as 0.jpg .. 4.jpg each time there's an update, but I'd like to figure out how to only have to download one at a time because I'm already getting lagspikes when playing a game if I leave rainmeter on in the background because these are very large images.

I was trying to display the images this way:

Code: Select all

[MeasureImage4]
Measure=WebParser
URL=#URL#[MeasureSite]
StringIndex=4
Download=1
DownloadFile=3.jpg

[MeasureImage5]
Measure=WebParser
URL=#URL#[MeasureSite]
StringIndex=5
Download=1
DownloadFile=4.jpg

[ImageNumberCalc]
Measure=Calc
Formula=Counter % 5

[MeterImage]
Meter=Image
MeasureName=#ROOTCONFIGPATH#DownloadFile\[ImageNumberCalc].jpg
DynamicVariables=1
But never got it to work and I think NOAA is blocking my rainmeter now since I get stuck on fetching catalog.json because I was downloading too many files too often. Hopefully its just temporary.

Any advice for when I try again?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: embed an image that's embedded in a website

Post by jsmorley »

You might try something like this:

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
OnCloseAction=[!CommandMeasure Delete "Run"]

[Delete]
Measure=Plugin
Plugin=RunCommand
Parameter=del "#CURRENTPATH#DownloadFile\*.jpg"
State=Hide

[MeasureSite]
Measure=WebParser
URL=https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/catalog.json
RegExp=(?siU)"images": {.*"678x678": \[.*"(.*)".*"(.*)".*"(.*)".*"(.*)".*"(.*)"
UpdateRate=900
FinishAction=[!ShowMeterGroup Images][!UpdateMeterGroup Images][!Redraw]

[MeasureImage1]
Measure=Plugin
Plugin=WebParser
URL=https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/[MeasureSite]
StringIndex=1
Download=1
DownloadFile=1.jpg

[MeasureImage2]
Measure=Plugin
Plugin=WebParser
URL=https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/[MeasureSite]
StringIndex=2
Download=1
DownloadFile=2.jpg

[MeasureImage3]
Measure=Plugin
Plugin=WebParser
URL=https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/[MeasureSite]
StringIndex=3
Download=1
DownloadFile=3.jpg

[MeasureImage4]
Measure=Plugin
Plugin=WebParser
URL=https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/[MeasureSite]
StringIndex=4
Download=1
DownloadFile=4.jpg

[MeasureImage5]
Measure=Plugin
Plugin=WebParser
URL=https://cdn.star.nesdis.noaa.gov/GOES16/ABI/FD/GEOCOLOR/[MeasureSite]
StringIndex=5
Download=1
DownloadFile=5.jpg

[Carousel]
Measure=Loop
StartValue=1
EndValue=5
Increment=1
UpdateDivider=10

[MeterImage]
Meter=Image
Group=Images
ImageName=#CURRENTPATH#DownloadFile\[Carousel].jpg
DynamicVariables=1
Hidden=1
It's unlikely you have been blocked by NOAA, but rather that in testing, and repeatedly refreshing the skin before it can "finish" all the WebParser work, it has "hung" the WebParser measure. Try just restarting Rainmeter entirely.

This is a straight up "replace" transition between the images. It can be done with a "fade" between them, but that is a bit more complicated and we can tackle it if you get this working and want to dig a little deeper. To be honest, I'm not sure a fade buys you much in this particular case, as the natural transition from one image to another is already pretty pleasing when they are done in order. I'm not sure that a fade between wouldn't both be redundant, and even a bit "weird" looking.

There is no json parsing capability in Rainmeter. WebParser just downloads whatever text a site returns when you connect to it and parses it with regular expression. json is just text like any other, and can easily be parsed with regular expression.

As to "lag", there shouldn't be a lot with this, it should use very little CPU, and while five 678X678 .jpg images will take a bit of bandwidth to download, it's not a huge amount. If you are playing some online action game, I guess you could see a bit of a hiccup when the images are downloaded. I'd be tempted to unload this skin while playing. Otherwise, that camper is going to poon you when you spawn...
nivram
Posts: 6
Joined: April 6th, 2018, 9:58 am

Re: embed an image that's embedded in a website

Post by nivram »

Thanks for so much help!!!

I would never have figured out that I hung the webparser.

I played around with the regexps for a while. Your regexp gets the oldest 5 images on the server. I'm also using the 5424x5424 images (which is why theres a bit more lag). Another issue I'm having with the size of the images is that loading the new image into memory seems to cause a noticeable frame rate drop, even when I'm just in my windows manager. Is there any way to keep the images in memory, or better yet GPU memory?
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: embed an image that's embedded in a website

Post by jsmorley »

nivram wrote:Thanks for so much help!!!

I would never have figured out that I hung the webparser.

I played around with the regexps for a while. Your regexp gets the oldest 5 images on the server. I'm also using the 5424x5424 images (which is why theres a bit more lag). Another issue I'm having with the size of the images is that loading the new image into memory seems to cause a noticeable frame rate drop, even when I'm just in my windows manager. Is there any way to keep the images in memory, or better yet GPU memory?
I would never get those 5424X5424 images. I know you don't have a monitor that big, and man, those are going to be really large to download, and a lot of work for Rainmeter to resize to a reasonable size.

Sorry, images are cached in Rainmeter, but I doubt that they are when they are downloaded like that. Rainmeter is going to see them as a different file each time they are downloaded.