It is currently May 1st, 2024, 11:15 pm

Separating different instances of <div> with the same code?

Get help with creating, editing & fixing problems with skins
User avatar
severedmars
Posts: 17
Joined: July 17th, 2021, 6:31 pm

Separating different instances of <div> with the same code?

Post by severedmars »

I am working on a skin that displays the daily rocket league item shop. Each separate item has its own section of code, but they all are the same, besides the different item names. how do I distinguish them so that it will update on its own without just repeating the same item?

Website:https://rocket-league.com/items/shop

I want to display each item separately, so I can see the full shop. As of right now, I am only worried about getting the names and pictures, but eventually I want to get item rarities and types. I assume that is the same process? I followed the WebParser tutorial and it hasn't helped me. I appreciate any help I can get.
User avatar
Yincognito
Rainmeter Sage
Posts: 7185
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Separating different instances of <div> with the same code?

Post by Yincognito »

severedmars wrote: August 21st, 2021, 3:21 am I am working on a skin that displays the daily rocket league item shop. Each separate item has its own section of code, but they all are the same, besides the different item names. how do I distinguish them so that it will update on its own without just repeating the same item?

Website:https://rocket-league.com/items/shop

I want to display each item separately, so I can see the full shop. As of right now, I am only worried about getting the names and pictures, but eventually I want to get item rarities and types. I assume that is the same process? I followed the WebParser tutorial and it hasn't helped me. I appreciate any help I can get.
Something along these lines should do (the key in "separating" instances is "extracting" them using regular expression captures, i.e. the (.*) parts, in the RegExp pattern, then referencing those captures through the StringIndex options in the subsequent WebParser "child" measures):

Code: Select all

[Variables]
BaseURL=https://rocket-league.com
URLSite=#BaseURL#/items/shop
Item=.*<div class="rlg-item-shop__item --daily .*">.*<img class="rlg-item-shop__item-image --daily" src="(.*)".*\/>.*<h1 class="rlg-h2 rlg-item-shop__name --daily">(.*)<\/h1>

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

---Measures---

[RocketLeague]
Measure=WebParser
URL=#URLSite#
RegExp=(?siU)#Item##Item##Item##Item##Item##Item#
FinishAction=[!CommandMeasure ItemDImage1 "Update"][!CommandMeasure ItemDImage2 "Update"][!UpdateMeter *][!Redraw]
UpdateRate=600

[ItemImage1]
Measure=WebParser
URL=[RocketLeague]
StringIndex=1

[ItemName1]
Measure=WebParser
URL=[RocketLeague]
StringIndex=2

[ItemImage2]
Measure=WebParser
URL=[RocketLeague]
StringIndex=3

[ItemName2]
Measure=WebParser
URL=[RocketLeague]
StringIndex=4

[ItemDImage1]
Measure=WebParser
URL=#BaseURL#[&ItemImage1]
Download=1
DynamicVariables=1

[ItemDImage2]
Measure=WebParser
URL=#BaseURL#[&ItemImage2]
Download=1
DynamicVariables=1

---Meters---

[MeterBackground]
Meter=Image
W=1320
H=220
SolidColor=0,0,0,64
LeftMouseUpAction=["#URLSite#"]

[MeterItemDImage1]
Meter=Image
MeasureName=ItemDImage1
X=0
Y=0
AntiAlias=1
DynamicVariables=1

[MeterItemName1]
Meter=String
FontFace=Consolas
FontColor=255,255,255,255
Padding=5,5,5,5
FontSize=16
AntiAlias=1
MeasureName=ItemName1
Text=%1
DynamicVariables=1

[MeterItemDImage2]
Meter=Image
MeasureName=ItemDImage2
X=220
Y=0
AntiAlias=1
DynamicVariables=1

[MeterItemName2]
Meter=String
X=220
FontFace=Consolas
FontColor=255,255,255,255
Padding=5,5,5,5
FontSize=16
AntiAlias=1
MeasureName=ItemName2
Text=%1
DynamicVariables=1
RocketLeague.jpg
The rest is just about replicating Image / Name measures / meters accordingly for "item" 3 to "item" 6, as well as adding corresponding [!bangs] in the FinishAction of the [RocketLeague] measure. Other than that it's about adjusting the #Item# / RegExp patterns if you want other categories of "items" or other "item" properties to be displayed. You can even test such patterns or get familiar with the regex syntax on sites like regexr.com or regex101.com, by pasting a sample source code of the desired site.

P.S. Normally, the [ItemDImage...] measures shouldn't have been needed and Download=1 would have been added to the bare [ItemImage...] measures, along with not needing the FinishAction bangs in the [RocketLeague] measure, as well as using the bare ItemImage... as the MeasureName options' values in the meters, but because the site yields the partial image URLs as /content/media/items/avatar/220px/519f3fe4cf1466509330.png and such, appending the base URL (i.e. https://rocket-league.com) is required in separate measures, along with updating them as soon as the bare [ItemImage...] measure values are retrieved in the FinishAction of the WebParser parent / main measure.
You do not have the required permissions to view the files attached to this post.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
severedmars
Posts: 17
Joined: July 17th, 2021, 6:31 pm

Re: Separating different instances of <div> with the same code?

Post by severedmars »

thank you so much! I think I can figure out the rest from here. I will come back if I have other questions.
User avatar
severedmars
Posts: 17
Joined: July 17th, 2021, 6:31 pm

Re: Separating different instances of <div> with the same code?

Post by severedmars »

I added another image and name underneath some parts and the names work, but now none of the images show up.

Code: Select all

[Variables]
BaseURL=https://rocket-league.com
URLSite=#BaseURL#/items/shop
Item=.*<div class="rlg-item-shop__item --daily .*">.*<img class="rlg-item-shop__item-image --daily" src="(.*)".*\/>.*<h1 class="rlg-h2 rlg-item-shop__name --daily">(.*)<\/h1>

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

---Measures---

[RocketLeague]
Measure=WebParser
URL=#URLSite#
RegExp=(?siU)#Item##Item##Item##Item##Item##Item#
FinishAction=[!CommandMeasure ItemDImage1 "Update"][!CommandMeasure ItemDImage2 "Update"][!CommandMeasure ItemDImage3 "Update"][!UpdateMeter *][!Redraw]
UpdateRate=600

[ItemImage1]
Measure=WebParser
URL=[RocketLeague]
StringIndex=1

[ItemName1]
Measure=WebParser
URL=[RocketLeague]
StringIndex=2

[ItemImage2]
Measure=WebParser
URL=[RocketLeague]
StringIndex=3

[ItemName2]
Measure=WebParser
URL=[RocketLeague]
StringIndex=4

[ItemImage3]
Measure=WebParser
URL=[RocketLeague]
StringIndex=5

[ItemName3]
Measure=WebParser
URL=[RocketLeague]
StringIndex=6

[ItemDImage1]
Measure=WebParser
URL=#BaseURL#[&ItemImage1]
Download=1
DynamicVariables=1

[ItemDImage2]
Measure=WebParser
URL=#BaseURL#[&ItemImage2]
Download=1
DynamicVariables=1

[ItemDImage3]
Measure=WebParser
URL=#BaseURL#[&ItemImage3]
Download=1
DynamicVariables=1


---Meters---

[MeterBackground]
Meter=Image
W=1320
H=220
SolidColor=0,0,0,64
LeftMouseUpAction=["#URLSite#"]

[MeterItemDImage1]
Meter=Image
MeasureName=ItemDImage1
X=0
Y=0
AntiAlias=1
DynamicVariables=1

[MeterItemName1]
Meter=String
FontFace=Consolas
FontColor=255,255,255,255
Padding=5,5,5,5
FontSize=16
AntiAlias=1
MeasureName=ItemName1
Text=%1
DynamicVariables=1

[MeterItemDImage2]
Meter=Image
MeasureName=ItemDImage2
X=220
Y=0
AntiAlias=1
DynamicVariables=1

[MeterItemName2]
Meter=String
X=220
FontFace=Consolas
FontColor=255,255,255,255
Padding=5,5,5,5
FontSize=16
AntiAlias=1
MeasureName=ItemName2
Text=%1
DynamicVariables=1

[MeterItemDImage3]
Meter=Image
MeasureName=ItemDImage3
X=440
Y=0
AntiAlias=1
DynamicVariables=1

[MeterItemName3]
Meter=String
X=440
FontFace=Consolas
FontColor=255,255,255,255
Padding=5,5,5,5
FontSize=16
AntiAlias=1
MeasureName=ItemName3
Text=%1
DynamicVariables=1

All I did was copy the parts and change them to be Item 3 rather than 1 or 2.
Any ideas?
User avatar
Yincognito
Rainmeter Sage
Posts: 7185
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Separating different instances of <div> with the same code?

Post by Yincognito »

severedmars wrote: August 21st, 2021, 6:04 pm I added another image and name underneath some parts and the names work, but now none of the images show up.
[...]
All I did was copy the parts and change them to be Item 3 rather than 1 or 2.
Any ideas?
Well, as far as I can see, you did what you should have done perfectly, because it works for me, using the exact same code you posted:
3Items.jpg
Make sure you have the permissions, that you don't poll the site too often, but other than that I have no idea why it doesn't work for you, because it should, as I shown above.
You do not have the required permissions to view the files attached to this post.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
severedmars
Posts: 17
Joined: July 17th, 2021, 6:31 pm

Re: Separating different instances of <div> with the same code?

Post by severedmars »

also, will I have to clear out the files every once in a while? since the website updates with new shop items daily, wouldn't that take up a lot of space on my computer?

and, what does "polling the site too often" mean? I don't really understand a lot of the terminology as I'm still relatively new to the stuff.
User avatar
Yincognito
Rainmeter Sage
Posts: 7185
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Separating different instances of <div> with the same code?

Post by Yincognito »

severedmars wrote: August 21st, 2021, 7:05 pm also, will I have to clear out the files every once in a while? since the website updates with new shop items daily, wouldn't that take up a lot of space on my computer?
Hm, I'm not sure about this, but since the image files are downloaded into your Windows TEMP folder when using the Download=1 option, Windows might automatically take care of that. Alternatively, you could use the DownloadFile option to specify another location to save the file so you can have them in a place where you can delete them yourself if needed (I don't think you'll need to do that since they will be overwritten anyway, but just in case).
severedmars wrote: August 21st, 2021, 7:05 pmand, what does "polling the site too often" mean? I don't really understand a lot of the terminology as I'm still relatively new to the stuff.
It means downloading or requesting data (or accessing resources from it) too often. Some sites ban you if you exaggerate with that.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
severedmars
Posts: 17
Joined: July 17th, 2021, 6:31 pm

Re: Separating different instances of <div> with the same code?

Post by severedmars »

This is what I get when I load the skin, and when I refresh it the text completely disappears.
Itemshop.png
You do not have the required permissions to view the files attached to this post.
User avatar
severedmars
Posts: 17
Joined: July 17th, 2021, 6:31 pm

Re: Separating different instances of <div> with the same code?

Post by severedmars »

Yincognito wrote: August 21st, 2021, 7:14 pm It means downloading or requesting data (or accessing resources from it) too often. Some sites ban you if you exaggerate with that.
is this a temporary thing, where if I did it accidentally without knowing I would still be able to use it later? Or would I just be screwed and not be able to use the skin anymore? how can I tell?
User avatar
Yincognito
Rainmeter Sage
Posts: 7185
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Separating different instances of <div> with the same code?

Post by Yincognito »

severedmars wrote: August 21st, 2021, 7:22 pm is this a temporary thing, where if I did it accidentally without knowing I would still be able to use it later? Or would I just be screwed and not be able to use the skin anymore? how can I tell?
It can be a temprary or a permanent ban, it depends on the "severity of the offense", so to speak. A temporary ban is usually revoked after a day or two, assuming the "offending behavior" is corrected, a permanent one will usually require you to contact the site and try to revoke it (if they want to). I only said it for informative purposes, as these things only happen rarely, depending on the site's policy on this. But then, if you're (still) able to get data from it, it means there's no ban, or at least not yet.

The skin is safe from that regard, as the main WebParser will update every 600 seconds (aka 10 minutes), only the quick downloading of many images very often could possibly trigger that. You only have 3 images at this time, so I would say there is no danger in sight (assuming you were reasonable with trying to access data before).

For me (still using the code you posted earlier):
GGG.jpg
After refresh, it's the same. No problem whatsoever. Maybe taking a screenshot of your About / Skins output and making sure the measures there are properly populated with the appropriate data (and files that actually exist) could help:
AboutSkins.jpg
You do not have the required permissions to view the files attached to this post.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth