Football (soccer...) skin

[balala]

it works here shows liverpool 29 27 1 1 66 21 +45 82 over here in black

The Code works

Yep, indeed it does work, was just my inattention. I had black fonts on a completely black background I have on the desktop, so I didn't see what was shown. So yes, it is working. Is it ok tom0711?

[tom0711]

It’s ok,but again, need more info(all the teams,fixtures and results)

[balala]

It’s ok,but again, need more info(all the teams,fixtures and results)

Alright, here it is:

Code: Select all

[Rainmeter]
Update=1000

[Variables]
Item=tablebodyContainer.*span class="long">(.*)</span.*<t.*>(.*)</.*<t.*>(.*)</.*<t.*>(.*)</.*<t.*>(.*)</.*<t.*>(.*)</.*<t.*>(.*)</.*<t.*>..........(.*)</.*<t.*>(.*)</

[StringStyle]
FontSize=21
FontColor=0,0,0
AntiAlias=1
W=130
H=60
ClipString=1
Text=%1

[Team1]
Measure=WebParser
URL=https://www.premierleague.com/tables
RegExp=(?siU)#Item#.*#Item#.*#Item#.*#Item#.*#Item#
StringIndex=1

[Played1]
Measure=WebParser
URL=[Team1]
StringIndex=2

[Won1]
Measure=WebParser
URL=[Team1]
StringIndex=3

[Drawn1]
Measure=WebParser
URL=[Team1]
StringIndex=4

[Lost1]
Measure=WebParser
URL=[Team1]
StringIndex=5

[GF1]
Measure=WebParser
URL=[Team1]
StringIndex=6

[GA1]
Measure=WebParser
URL=[Team1]
StringIndex=7

[GD1]
Measure=WebParser
URL=[Team1]
StringIndex=8

[Points1]
Measure=WebParser
URL=[Team1]
StringIndex=9

[Team2]
Measure=WebParser
URL=[Team1]
StringIndex=10

[Played2]
Measure=WebParser
URL=[Team1]
StringIndex=11

[Won2]
Measure=WebParser
URL=[Team1]
StringIndex=12

[Drawn2]
Measure=WebParser
URL=[Team1]
StringIndex=13

[Lost2]
Measure=WebParser
URL=[Team1]
StringIndex=14

[GF2]
Measure=WebParser
URL=[Team1]
StringIndex=15

[GA2]
Measure=WebParser
URL=[Team1]
StringIndex=16

[GD2]
Measure=WebParser
URL=[Team1]
StringIndex=17

[Points2]
Measure=WebParser
URL=[Team1]
StringIndex=18

[Team3]
Measure=WebParser
URL=[Team1]
StringIndex=19

[Played3]
Measure=WebParser
URL=[Team1]
StringIndex=20

[Won3]
Measure=WebParser
URL=[Team1]
StringIndex=21

[Drawn3]
Measure=WebParser
URL=[Team1]
StringIndex=22

[Lost3]
Measure=WebParser
URL=[Team1]
StringIndex=23

[GF3]
Measure=WebParser
URL=[Team1]
StringIndex=24

[GA3]
Measure=WebParser
URL=[Team1]
StringIndex=25

[GD3]
Measure=WebParser
URL=[Team1]
StringIndex=26

[Points3]
Measure=WebParser
URL=[Team1]
StringIndex=27

[Team4]
Measure=WebParser
URL=[Team1]
StringIndex=28

[Played4]
Measure=WebParser
URL=[Team1]
StringIndex=29

[Won4]
Measure=WebParser
URL=[Team1]
StringIndex=30

[Drawn4]
Measure=WebParser
URL=[Team1]
StringIndex=31

[Lost4]
Measure=WebParser
URL=[Team1]
StringIndex=32

[GF4]
Measure=WebParser
URL=[Team1]
StringIndex=33

[GA4]
Measure=WebParser
URL=[Team1]
StringIndex=34

[GD4]
Measure=WebParser
URL=[Team1]
StringIndex=35

[Points4]
Measure=WebParser
URL=[Team1]
StringIndex=36

[Team5]
Measure=WebParser
URL=[Team1]
StringIndex=37

[Played5]
Measure=WebParser
URL=[Team1]
StringIndex=38

[Won5]
Measure=WebParser
URL=[Team1]
StringIndex=39

[Drawn5]
Measure=WebParser
URL=[Team1]
StringIndex=40

[Lost5]
Measure=WebParser
URL=[Team1]
StringIndex=41

[GF5]
Measure=WebParser
URL=[Team1]
StringIndex=42

[GA5]
Measure=WebParser
URL=[Team1]
StringIndex=43

[GD5]
Measure=WebParser
URL=[Team1]
StringIndex=44

[Points5]
Measure=WebParser
URL=[Team1]
StringIndex=45

; = = = = = METERS = = = = =

[TextTeam1]
Meter=String
MeterStyle=StringStyle
MeasureName=Team1
X=0
Y=0

[TextPlayed1]
Meter=String
MeterStyle=StringStyle
MeasureName=Played1
X=140
Y=0r

[TextWon1]
Meter=String
MeterStyle=StringStyle
MeasureName=Won1
X=180
Y=0r

[TextDrawn1]
Meter=String
MeterStyle=StringStyle
MeasureName=Drawn1
X=220
Y=0r

[TextLost1]
Meter=String
MeterStyle=StringStyle
MeasureName=Lost1
X=260
Y=0r

[TextGF1]
Meter=String
MeterStyle=StringStyle
MeasureName=GF1
X=300
Y=0r

[TextGA1]
Meter=String
MeterStyle=StringStyle
MeasureName=GA1
X=340
Y=0r

[TextGD1]
Meter=String
MeterStyle=StringStyle
MeasureName=GD1
X=380
Y=0r

[TextPoints1]
Meter=String
MeterStyle=StringStyle
MeasureName=Points1
X=450
Y=0r

[TextTeam2]
Meter=String
MeterStyle=StringStyle
MeasureName=Team2
X=0
Y=0R

[TextPlayed2]
Meter=String
MeterStyle=StringStyle
MeasureName=Played2
X=140
Y=0r

[TextWon2]
Meter=String
MeterStyle=StringStyle
MeasureName=Won2
X=180
Y=0r

[TextDrawn2]
Meter=String
MeterStyle=StringStyle
MeasureName=Drawn2
X=220
Y=0r

[TextLost2]
Meter=String
MeterStyle=StringStyle
MeasureName=Lost2
X=260
Y=0r

[TextGF2]
Meter=String
MeterStyle=StringStyle
MeasureName=GF2
X=300
Y=0r

[TextGA2]
Meter=String
MeterStyle=StringStyle
MeasureName=GA2
X=340
Y=0r

[TextGD2]
Meter=String
MeterStyle=StringStyle
MeasureName=GD2
X=380
Y=0r

[TextPoints2]
Meter=String
MeterStyle=StringStyle
MeasureName=Points2
X=450
Y=0r

[TextTeam3]
Meter=String
MeterStyle=StringStyle
MeasureName=Team3
X=0
Y=0R

[TextPlayed3]
Meter=String
MeterStyle=StringStyle
MeasureName=Played3
X=140
Y=0r

[TextWon3]
Meter=String
MeterStyle=StringStyle
MeasureName=Won3
X=180
Y=0r

[TextDrawn3]
Meter=String
MeterStyle=StringStyle
MeasureName=Drawn3
X=220
Y=0r

[TextLost3]
Meter=String
MeterStyle=StringStyle
MeasureName=Lost3
X=260
Y=0r

[TextGF3]
Meter=String
MeterStyle=StringStyle
MeasureName=GF3
X=300
Y=0r

[TextGA3]
Meter=String
MeterStyle=StringStyle
MeasureName=GA3
X=340
Y=0r

[TextGD3]
Meter=String
MeterStyle=StringStyle
MeasureName=GD3
X=380
Y=0r

[TextPoints3]
Meter=String
MeterStyle=StringStyle
MeasureName=Points3
X=450
Y=0r

[TextTeam4]
Meter=String
MeterStyle=StringStyle
MeasureName=Team4
X=0
Y=0R

[TextPlayed4]
Meter=String
MeterStyle=StringStyle
MeasureName=Played4
X=140
Y=0r

[TextWon4]
Meter=String
MeterStyle=StringStyle
MeasureName=Won4
X=180
Y=0r

[TextDrawn4]
Meter=String
MeterStyle=StringStyle
MeasureName=Drawn4
X=220
Y=0r

[TextLost4]
Meter=String
MeterStyle=StringStyle
MeasureName=Lost4
X=260
Y=0r

[TextGF4]
Meter=String
MeterStyle=StringStyle
MeasureName=GF4
X=300
Y=0r

[TextGA4]
Meter=String
MeterStyle=StringStyle
MeasureName=GA4
X=340
Y=0r

[TextGD4]
Meter=String
MeterStyle=StringStyle
MeasureName=GD4
X=380
Y=0r

[TextPoints4]
Meter=String
MeterStyle=StringStyle
MeasureName=Points4
X=450
Y=0r

[TextTeam5]
Meter=String
MeterStyle=StringStyle
MeasureName=Team5
X=0
Y=0R

[TextPlayed5]
Meter=String
MeterStyle=StringStyle
MeasureName=Played5
X=140
Y=0r

[TextWon5]
Meter=String
MeterStyle=StringStyle
MeasureName=Won5
X=180
Y=0r

[TextDrawn5]
Meter=String
MeterStyle=StringStyle
MeasureName=Drawn5
X=220
Y=0r

[TextLost5]
Meter=String
MeterStyle=StringStyle
MeasureName=Lost5
X=260
Y=0r

[TextGF5]
Meter=String
MeterStyle=StringStyle
MeasureName=GF5
X=300
Y=0r

[TextGA5]
Meter=String
MeterStyle=StringStyle
MeasureName=GA5
X=340
Y=0r

[TextGD5]
Meter=String
MeterStyle=StringStyle
MeasureName=GD5
X=380
Y=0r

[TextPoints5]
Meter=String
MeterStyle=StringStyle
MeasureName=Points5
X=450
Y=0r

I'd modify the options of the String meters (now all common options are collected into the [StringStyle] section and this section is applied on all String meters), but this is just a design question and it can be done easily.

[tom0711]

i dont wanna be rude, but thats it?

[balala]

i dont wanna be rude, but thats it?

Exactly, that's it. Is there something wrong with it? As said in my last reply, I also would improve the design of he skin, but basically it does work.

[Yincognito]

I'm not sure it can be done, especially that there are a lot of information. Note that a WebParser measure can get up to 99 data from the site. And if the number of entries varies (what i suppose), we should have to use Lookahead Assertion. All these complicates the code a little bit.
But let's see...

It can be done, it has nothing to do with the 99 captures possible in regex, since one can split the data into multiple regexes, it doesn't have to be a single parent. For example, by using StringIndex and StringIndex2 in the WebParser children measures.

It’s ok,but again, need more info(all the teams,fixtures and results)

i dont wanna be rude, but thats it?

See, Tom, the thing is, it's easy to need something, but it's harder to get what you need, LOL. For that, if you rely only on others, you'll end up empty handed, because nobody is willing to to all the heavy lifting for you, that's a fact of life. Balala was nice enough to give you a start, and if you really want to make this skin work, it's mostly up to you to continue what Balala started.

I know, I know: you don't know how to do it, otherwise you'd have done it already, right? Well, all of us started "not knowing" how to do stuff, but we were stubborn enough to persevere and in the end managed to do things. The good thing is that you can get all the PL tables and results at Premier League - Tables, but as far as I can see you can't get the PL fixtures (maybe another source would come handy with that).

So, to start familiarizing with what you have to do, you should:
- view the page source of the webpage above in your browser
- select all and copy it
- find a HTML formatter service online (e.g. Free Formatter), paste it there and format it in a new window
- select all and copy again
- assuming you have Notepad++ (maybe even RainLexer plugin?), paste it and set the "Language" to HTML from the menu
- find the bits / parts that you need and try to guess the structure in the HTML in order to be able to "locate" every occurence of those bits so you can display them later in the skin
- build a regex to parse the page source; yes, this is the hard part, but mostly you'll use the (?siU) flags at the start of the regex, and then .* (i.e. any character any number of times) to discard what you don't need, and when you get to the parts that you need use what you got from the HTML structure (i.e. tags, separators, quotes, etc.) to set the "bounds" of what you want to capture. You capture using the same .* pattern, but enclosed in round brackets, like this: (.*). For example, say you want to get the team name from this part:

Code: Select all

                              <tr class="expandable" data-filtered-table-row-expander="18">
                                 <td colspan="13">
                                    <a href="/clubs/18/Sheffield-United/overview" class="expandableTeam">
                                    <span class="badge badge-image-container" data-widget="club-badge-image" data-size="50">
                                    <img class="badge-image badge-image--50" src="https://resources.premierleague.com/premierleague/badges/50/t49.png" srcset="https://resources.premierleague.com/premierleague/badges/50/t49@x2.png 2x" />
                                    </span>
                                    <span class="teamName">Sheffield United</span>
                                    </a>

then you'd use something like (?siU).*<span class="teamName">(.*)</span>.* (notice the span structure that we used to grab some closeby contents)
- use that regex in your code, typically in a RegExp option from a WebParser measure.

Now this is just how things can be done, a modus operandi if you like. It seems hard, but it's not that hard, in the end. You can test your regex as you like on sites like I linked to (regex101.com is another), even using the same text and the same pattern. If it works in the test, it should work in your skin as well.

That being said, you can ask anytime for help if you try and stumble a bit, but in principle this should be your job to do, once you know the way it should be approached. Today I'm not in the mood for this, but maybe tomorrow I will take a look at how the page source can be parsed. I don't promise anything, and I won't do it all for you, but I may be able to help with the regex part.

[tom0711]

thank you for the explanation. how do i know what parts of the HTML i need?
unfortunately i'm not able to share the notepad++ file

[Yincognito]

unfortunately i'm not able to share the notepad++ file

No need to share it. It's up to you to find what you need there (although I might help along the way, since I have it too).

thank you for the explanation. how do i know what parts of the HTML i need?

Simple: where you see things that interest you. For example, you need the standings of Liverpool (1st place in the PL) and its results, right? You seach in the Notepad++ file (using the menu, obviously) for some relatively unique text in order to find the values in the table or the results. Relatively unique because for sure you don't want to spend half and hour looking through all the 76 occurences of "Liverpool" (I found they're 76 because Notepad++ can also count how many occurences of a certain text there are in the file, in the same Find window) to find which one belongs to the part you're interested in. On the other hand, the "+45" text (the goal difference) looks like a good candidate to be unique because of the "+" in front of it, so you enter it in the Find window, push Count and lo and behold, there is only 1 occurence of it, so you know you hit the jackpot, LOL. You press Find Next and there you go, a lot of HTML tags (a tag is enclosed by < and >, by the way: <tagname> is an opening tag, </tagname> is a closing one) containing all kinds of data on Liverpool's standing in the table and its results.

Next, you must find an actual unique tag or string that you can use in the regex pattern to find this data in the Rainmeter skin. Since the file is indented and formatted (like I advised you to), it's easy to see that these bits belong to a bigger tag called <tbody class="tableBodyContainer isPL"> (a table body) which is located slightly above the "+45" text earlier. You check if that tag is unique, and lo and behold again, it surely is, so you're lucky, you can use it. In it there are a series of table rows (<tr>), table data (<td>, basically a "cell" in that row) that hold some other tag elements like containers (<span>), lists (<li>) and so on that you can further use to get to the needed data. So, that's about it, it's like a said, a bit of guess work to figure out what you can use to get to what you want. A table with 20 rows, each row holding a number of "cells" from which you can "extract" the desired info.

[tom0711]

Okay, I found everything I needed for the table,now how do I build the regex?

BTW,sorry for all the questions, it’s a new thing for me

[Yincognito]

Okay, I found everything I needed for the table,now how do I build the regex?

BTW,sorry for all the questions, it’s a new thing for me

No problem. To build the regex, start with something simple, and add to it as you progress further with other elements, and at each step make sure it works as expected, either using an online regex tester or the Rainmeter skin itself (better using an online tester with all the original, not formatted HTML source text pasted there, to avoid polling the site too much during tests and get blocked or banned).

Remember, use only the parts that are either unique or really help you find the needed string in your regex pattern, otherwise just "fill the blanks" / discard the unneeded or useless bits using the .* (no round brackets enclosing it) pattern. Once you get to the needed part, use (.*) to capture it, once you make sure it is properly enclosed in tags or other characters that can serve as "bounds" for the capture.

Also, remember that formatting your HTML adds some differences compared to the original HTML source text (like line feeds, tabs, spaces and such) that are only good for visualising the whole structure better, i.e. clarity. These do not exist in your original source, so that's why they only serve to easier and quicker find what you need, but not in the actual testing of the regex pattern (where the original is highly recommended).

Simple example - getting the 1st place (i.e. Liverpool's) data and the first result from the 5 included in the Form column (you can continue this yourself, with the rest of the elements for Liverpool / 1st place) from this (formatted form, for easier visualizing):

Code: Select all

                           <tbody class="tableBodyContainer isPL">
                              <tr class="tableDark" data-compseason="274" data-filtered-entry-size="20" data-filtered-table-row="10" data-filtered-table-row-name="Liverpool" data-filtered-table-row-opta="t14" data-position="1"
                                 data-filtered-table-row-abbr="10" >
                                 <td class="revealMore" style="display:none;" tabindex="0" role="button">
                                    <div class="icn chevron-downgrey-normal"></div>
                                 </td>
                                 <td class="pos button-tooltip" tabindex="0" id="Tooltip">
                                    <span class="value">1</span>
                                    <span class="movement  none">
                                    <span class="tooltipContainer tooltip-left" role="tooltip">
                                    <span class="tooltip-content">Previous Position
                                    <span class="resultHighlight">
                                    1
                                    </span>
                                    </span>
                                    </span>
                                    </span>
                                 </td>
                                 <td class="team" scope="row">
                                    <a href="/clubs/10/Liverpool/overview">
                                    <span class="badge badge-image-container" data-widget="club-badge-image" data-size="25">
                                    <img class="badge-image badge-image--25" src="https://resources.premierleague.com/premierleague/badges/25/t14.png" srcset="https://resources.premierleague.com/premierleague/badges/25/t14@x2.png 2x" />
                                    </span>
                                    <span class="long">Liverpool</span>
                                    <span class="short">LIV</span>
                                    </a>
                                 </td>
                                 <td>29</td>
                                 <td>27</td>
                                 <td>1</td>
                                 <td>1</td>
                                 <td class="hideSmall">66</td>
                                 <td class="hideSmall">21</td>
                                 <td> 
                                    +45
                                 </td>
                                 <td class="points">82</td>
                                 <td class="form hideMed">
                                    <li tabindex="0" class="win button-tooltip" id="Tooltip">
                                       <abbr title="Won" class="form-abbreviation">W</abbr>
                                       <a href="/match/46849" class="tooltipContainer linkable tooltip-link tooltip-right" role="tooltip">
                                          <span class="tooltip-content">
                                             <div class="matchAbridged">
                                                <span class="matchInfo">Saturday 1 February 2020</span>
                                                <span class="teamName"><abbr title="Liverpool">LIV</abbr></span>
                                                <span class="badge badge-image-container" data-widget="club-badge-image" data-size="20">
                                                <img class="badge-image badge-image--20" src="https://resources.premierleague.com/premierleague/badges/20/t14.png" srcset="https://resources.premierleague.com/premierleague/badges/20/t14@x2.png 2x"  />
                                                </span>
                                                <span class="score">4 <span>-</span>0</span>
                                                <span class="badge badge-image-container" data-widget="club-badge-image" data-size="20">
                                                <img class="badge-image badge-image--20" src="https://resources.premierleague.com/premierleague/badges/20/t20.png" srcset="https://resources.premierleague.com/premierleague/badges/20/t20@x2.png 2x"  />
                                                </span>
                                                <span class="teamName"><abbr title="Southampton">SOU</abbr></span>
                                                <span class="icn arrow-right"></span>
                                             </div>
                                          </span>
                                       </a>
                                    </li>

results in the following regex patterrn (yes, it's long, but it can be shortened according to possibilities):

Code: Select all

(?siU).*<tbody class="tableBodyContainer isPL".*>.*<td class="pos button-tooltip".*>.*<span class="value".*>(.*)<\/span>.*<span class="resultHighlight".*>\s*?(.*)\s*?<\/span>.*<td class="team".*>.*<span class="long".*>(.*)<\/span>.*<td.*>(.*)<\/td>.*<td.*>(.*)<\/td>.*<td.*>(.*)<\/td>.*<td.*>(.*)<\/td>.*<td.*>(.*)<\/td>.*<td.*>(.*)<\/td>.*<td.*>\s*?(.*)\s*?<\/td>.*<td.*>(.*)<\/td>.*<td class="form hideMed".*>.*<li.*>.*<abbr title=.*>(.*)<\/abbr>.*<span class="matchInfo".*>(.*)<\/span>.*<abbr title=.*>(.*)<\/abbr>.*<span class="score".*>\s*?(.*)\s*?<span.*>.*<\/span>\s*?(.*)\s*?<\/span>.*<abbr title=.*>(.*)<\/abbr>.*<\/li>.*

Check regexr.com (use the RegEx Reference choice from the left side menu) or regex101.com (you'll figure out there) to see what each character you don't understand means, and why there are some backslashes, \s or question marks where they shouldn't be. It's a matter of copy pasting the "bound tags" (like <td class="..."> or </td>) used for locating the needed string and then adding as many .* as necessary to either "fill the blanks" or capture something (you'd use round brackets for the latter, as mentioned before).

You can reference a capture as:
- \N in the online regex testers or a Rainmeter regex Substitute option, where N is the capture's index (starting from 1, as \0 is the whole text)
- or, simply through a StringIndex=N or a StringIndex2=N (the same N index as before) in a WebParser measure

For example, if you paste the above regex pattern in the Expression field in Regexr.com (make sure you choose the PCRE regex flavor instead of Java script in the top right corner, as this is what Rainmeter uses), the original source text in the Text field and something like :

Code: Select all

Position=\1\nPrevious=\2\nClub=\3\nPlayed=\4\nWon=\5\nDrawn=\6\nLost=\7\nGF=\8\nGA=\9\nGD=\10\nPoints=\11\nResult1=\12\nDate1=\13\nMatch1=\14-\17\nScore1=\15-\16\n

in the Tools field (after choosing List nearby) you would get:

Code: Select all

Position=1
Previous=1
Club=Liverpool
Played=29
Won=27
Drawn=1
Lost=1
GF=66
GA=21
GD=+45
Points=82
Result1=W
Date1=Saturday 1 February 2020
Match1=LIV-SOU
Score1=4-0

so almost all that you want (bar the next 4 results and the fixtures) for the 1st place club. Next, some tricks can be used in the Rainmeter code to avoid having to use more than 99 captures (i.e. (.*) parts) in the regex pattern, like trying to get each team's data in 20 "big captures" first (one for each team), then using StringIndex and StringIndex2 options in the WebParser measure in order to further "split" the big captures into those 17 or so fields above.

Hopefully, you won't think this is too complicated, because it isn't, really. It's a slightly long and tedious process, yes, but the advantage is that you only need to do it once, since the same pattern repeats itself for each of the clubs in the table. Copy paste is your friend here, you only need to stay focused when designing the regex pattern, the rest is only repetitive work, actually.