It is currently July 12th, 2020, 3:49 pm

Football (soccer...) skin

Help with creating, editing & fixing problems with skins
tom0711
Posts: 36
Joined: April 29th, 2020, 5:55 pm

Re: Football (soccer...) skin

Post by 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
User avatar
Yincognito
Posts: 1917
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Football (soccer...) skin

Post by Yincognito »

tom0711 wrote:
May 26th, 2020, 9:53 am
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).
tom0711 wrote:
May 26th, 2020, 9:53 am
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
Posts: 36
Joined: April 29th, 2020, 5:55 pm

Re: Football (soccer...) skin

Post by 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
User avatar
Yincognito
Posts: 1917
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Football (soccer...) skin

Post by Yincognito »

tom0711 wrote:
May 26th, 2020, 12:57 pm
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.
User avatar
balala
Rainmeter Sage
Posts: 11012
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Football (soccer...) skin

Post by balala »

tom0711 wrote:
May 26th, 2020, 12:57 pm
Okay, I found everything I needed for the table,now how do I build the regex?
Ok, I suppose you've started to work with the skin, with the help of Yincognito. This is very good. Go ahead. :thumbup:
tom0711 wrote:
May 26th, 2020, 12:57 pm
BTW,sorry for all the questions, it’s a new thing for me
As Yincognito said, this is not a problem. That's why this forum has been created: to get answers to your questions. So don't be afraid to ask, if any question arises.
tom0711
Posts: 36
Joined: April 29th, 2020, 5:55 pm

Re: Football (soccer...) skin

Post by tom0711 »

i don't understand,i get this(in the image),i dont get what you got.
did i do something wrong?
You do not have the required permissions to view the files attached to this post.
dvo
Posts: 818
Joined: February 7th, 2016, 6:08 am

Re: Football (soccer...) skin

Post by dvo »

try it with this tool :

https://rainmeter.net/RainRegExp.zip
User avatar
balala
Rainmeter Sage
Posts: 11012
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Football (soccer...) skin

Post by balala »

tom0711 wrote:
May 26th, 2020, 7:03 pm
i don't understand,i get this(in the image),i dont get what you got.
did i do something wrong?
Where or how do you get this? :o
dvo
Posts: 818
Joined: February 7th, 2016, 6:08 am

Re: Football (soccer...) skin

Post by dvo »

i know that it's still on the site balala :D now he can get the right regexp instead of regexr
User avatar
balala
Rainmeter Sage
Posts: 11012
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Football (soccer...) skin

Post by balala »

dvo wrote:
May 26th, 2020, 7:26 pm
i know that it's still on the site balala :D now he can get the right regexp instead of regexr
What is on the site and on which site? Sorry, but I can't follow...