It is currently June 26th, 2024, 7:22 pm

Convert <svg path> from html and display in shape meter

Get help with creating, editing & fixing problems with skins
emp00
Posts: 112
Joined: October 7th, 2022, 8:08 pm

Convert <svg path> from html and display in shape meter

Post by emp00 »

Dear Team,

I'm trying to make a rainmeter skin displaying my PV / photovoltaic system status information. Since there is no workable API, my plan is simply extracting the key data from the html of the official PV app. I have already set up a browser extension automatically saving this html every 10 minutes so that I can parse the html-file via a Webparser measure. Most numerical data I can quite easily extract from the html - however, one is tricky for me.

See below the <div class="battery-graph-series"> section - this contains the daily battery charge trend (%). Obviously it's an <svg> object and the actual charge% curve (one % value every 15 mins) is found in the <path> code at the very end.

Question: Does anybody have an idea how I can read such svg path information via regex and display it in a skin, similar to the official app? See screenshot, this is exactly what the below "battery-graph-series" html is displaying ... Only the green charge% trend is what I would like to display in my skin. I already have some experience with Shape=Path Graph meters and I'm sure the svg path can somehow be converted to such a shape meter. Has anybody already done this? Any ideas are are welcome. :confused:

Image

Code: Select all

<div class="battery-graph-series"><div style="width: 100%; height: 100%;"><div class="rv-xy-plot area-series" style="width: 519px; height: 70px;"><svg class="rv-xy-plot__inner" width="519" height="70"><g transform="translate(45,60)" class="rv-xy-plot__axis rv-xy-plot__axis--horizontal"><line x1="0" x2="459" y1="0" y2="0" class="rv-xy-plot__axis__line"></line><g transform="translate(0, 0)" class="rv-xy-plot__axis__ticks"><g transform="translate(0, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line x1="0" x2="0" y1="-6" y2="6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="middle" dy="0.72em" transform="translate(0, 14)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">12 am</text></g><g transform="translate(57.97894736842105, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line x1="0" x2="0" y1="-6" y2="6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="middle" dy="0.72em" transform="translate(0, 14)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">3</text></g><g transform="translate(115.9578947368421, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line x1="0" x2="0" y1="-6" y2="6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="middle" dy="0.72em" transform="translate(0, 14)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">6</text></g><g transform="translate(173.93684210526317, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line x1="0" x2="0" y1="-6" y2="6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="middle" dy="0.72em" transform="translate(0, 14)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">9</text></g><g transform="translate(231.9157894736842, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line x1="0" x2="0" y1="-6" y2="6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="middle" dy="0.72em" transform="translate(0, 14)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">12 pm</text></g><g transform="translate(289.89473684210526, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line x1="0" x2="0" y1="-6" y2="6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="middle" dy="0.72em" transform="translate(0, 14)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">3</text></g><g transform="translate(347.87368421052633, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line x1="0" x2="0" y1="-6" y2="6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="middle" dy="0.72em" transform="translate(0, 14)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">6</text></g><g transform="translate(405.85263157894735, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line x1="0" x2="0" y1="-6" y2="6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="middle" dy="0.72em" transform="translate(0, 14)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">9</text></g></g></g><g transform="translate(0,10)" class="rv-xy-plot__axis rv-xy-plot__axis--vertical"><line x1="45" x2="45" y1="0" y2="50" class="rv-xy-plot__axis__line"></line><g transform="translate(45, 0)" class="rv-xy-plot__axis__ticks"><g transform="translate(0, 50)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line y1="0" y2="0" x1="6" x2="-6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="end" dy="0.32em" transform="translate(-14, 0)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">0 %</text></g><g transform="translate(0, 0)" class="rv-xy-plot__axis__tick" style="font-size: 10px; fill: rgb(161, 170, 179);"><line y1="0" y2="0" x1="6" x2="-6" class="rv-xy-plot__axis__tick__line" style="font-size: 10px; fill: rgb(161, 170, 179);"></line><text text-anchor="end" dy="0.32em" transform="translate(-14, 0)" class="rv-xy-plot__axis__tick__text" style="font-size: 10px; fill: rgb(161, 170, 179);">100 %</text></g></g></g><path d="M0,12L4.832,12.5L9.663,13L14.495,13L19.326,13.5L24.158,14L28.989,14L33.821,14L38.653,14.5L43.484,14.5L48.316,15L53.147,15L57.979,15.5L62.811,15.5L67.642,15.5L72.474,16L77.305,16.5L82.137,16.5L86.968,17L91.8,17.5L96.632,17.5L101.463,17.5L106.295,18L111.126,18L115.958,18.5L120.789,18.5L125.621,19L130.453,19L135.284,19L140.116,19L144.947,19.5L149.779,19.5L154.611,19.5L159.442,19.5L164.274,18.5L169.105,18L173.937,17L178.768,16L183.6,15L188.432,14L193.263,14L198.095,12.5L202.926,11.5L207.758,10.5L212.589,9L217.421,8L222.253,5.5L227.084,4L231.916,2.5L236.747,0L241.579,0L246.411,0L251.242,0L256.074,0L260.905,0L265.737,0L270.568,0L275.4,0L280.232,0L285.063,0L289.895,0L294.726,0L299.558,0L304.389,0L309.221,0L314.053,0L318.884,0L323.716,0L328.547,0L333.379,0L338.211,0L343.042,0L347.874,0L352.705,0L357.537,0.5L362.368,0L367.2,0L372.032,0L376.863,0L381.695,0L386.526,0L391.358,0L396.189,0L401.021,0.5L401.021,50L396.189,50L391.358,50L386.526,50L381.695,50L376.863,50L372.032,50L367.2,50L362.368,50L357.537,50L352.705,50L347.874,50L343.042,50L338.211,50L333.379,50L328.547,50L323.716,50L318.884,50L314.053,50L309.221,50L304.389,50L299.558,50L294.726,50L289.895,50L285.063,50L280.232,50L275.4,50L270.568,50L265.737,50L260.905,50L256.074,50L251.242,50L246.411,50L241.579,50L236.747,50L231.916,50L227.084,50L222.253,50L217.421,50L212.589,50L207.758,50L202.926,50L198.095,50L193.263,50L188.432,50L183.6,50L178.768,50L173.937,50L169.105,50L164.274,50L159.442,50L154.611,50L149.779,50L144.947,50L140.116,50L135.284,50L130.453,50L125.621,50L120.789,50L115.958,50L111.126,50L106.295,50L101.463,50L96.632,50L91.8,50L86.968,50L82.137,50L77.305,50L72.474,50L67.642,50L62.811,50L57.979,50L53.147,50L48.316,50L43.484,50L38.653,50L33.821,50L28.989,50L24.158,50L19.326,50L14.495,50L9.663,50L4.832,50L0,50Z" class="rv-xy-plot__series rv-xy-plot__series--line" transform="translate(45,10)" style="opacity: 1; stroke: rgb(163, 217, 126); fill: rgb(163, 217, 126);"></path></svg></div></div></div>
Last edited by Yincognito on June 8th, 2024, 1:52 pm, edited 1 time in total.
Reason: To post code, select it and click the </> button above the message box.
User avatar
Yincognito
Rainmeter Sage
Posts: 7534
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Convert <svg path> from html and display in shape meter

Post by Yincognito »

emp00 wrote: June 8th, 2024, 10:40 am Question: Does anybody have an idea how I can read such svg path information via regex and display it in a skin, similar to the official app? See screenshot, this is exactly what the below "battery-graph-series" html is displaying ... Only the green charge% trend is what I would like to display in my skin. I already have some experience with Shape=Path Graph meters and I'm sure the svg path can somehow be converted to such a shape meter. Has anybody already done this? Any ideas are are welcome. :confused:
See here for the syntax of the <path> tag from a <svg> one:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

The first thing you notice after reading the relevant parts there is that in this case, they replicate almost identically the syntax of the Path custom option from the Shape meter (e.g. M is basically the first Path point in the Shape, the following L-s are the LineTo-s in the Shape, and Z is more or less the ClosePath part in the Shape). In other words, once you extract the contents of the <path> tag, three or four simple Substitute parts on that contents measure will easily "convert" it into what you'll use in the custom "Graph" path option (e.g. Substitute="L":" | LineTo " to which you add whatever M or Z parts as desired):
https://docs.rainmeter.net/manual/meters/shape/#Path

As for extracting the contents of the <path> tag, you only need to follow its syntax, e.g. assuming you get the above HTML part in a WebParser, something like RegExp=(?sU)<div class="battery-graph-series">.*<svg .*>.*<path d="(.*)".*>.*<\/path>.*<\/svg>.*<\/div> and then referencing the contents capture through StringIndex / StringIndex2 depending on your WebParser parent-child structure you're using should do (notice that I omitted the ?i aka case insensitive from (?siU) since some of the <path> syntax is actually case sensitive).

I have no idea if this <path> contents is the desired green part that's marked in your screenshot, you'll have to figure that (or if further Substitute refinements are needed) out yourself.

Obviously, as I said, the way your WebParser options are written will depend on their parent-child structure and what exactly you're already getting / capturing in the existing code.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
emp00
Posts: 112
Joined: October 7th, 2022, 8:08 pm

Re: Convert <svg path> from html and display in shape meter

Post by emp00 »

Hurray, you are a genius!! Thank you so much Yincognito! I made it! It works! Crazy, I need a drink :-)
Took me just 20 minutes, I still can't believe it ...see result screenshot, compare with the App screenshot above.
Working code for reference below as well. All credits^2 go to you!

Now I finally would like to do this :
1) Scale the shape to a smaller size, I guess I "simply" need to multiply all coordinates with my scale-factor, e.g. 0.5 for "half the size"?
2) Shift the meter by an X and Y offset e.g. X+10 and Y+50, so I "simply" need to add the string "+10" "+50" after every X/Y-coordinate?
Thinking about this, I probably need to use a smart regex to achieve this... Can you give me a hint how you would do this, probably another line in [EBa-SVG-to-Shape] ?

Image

Code: Select all

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

[EnphaseParser2]
; Enphase BatteryTrend metrics, extracts svg section for shape meter
Measure=WebParser
UpdateRate=600
; 600 = 10 minutes; 60 = 1 minute
URL=file://#CURRENTPATH#EnphaseEnlighten-Webparser-BatteryTrend.txt
; This parses the svg section for the BatteryTrend graph, credits to Yincognito !!
RegExp=(?sU)<div class="battery-graph-series">.*<svg .*>.*<path d="(.*)".*>.*<\/path>.*<\/svg>.*<\/div>

[EBa-SVG-to-Shape]
; This converts the SVG path to a rainmeter shape string, credits to Yincognito !!
; See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths // https://docs.rainmeter.net/manual/meters/shape/#Path
Measure=WebParser
Url=[EnphaseParser2]
; Combination StringIndex=1 and StringIndex2=1 grabs the SVG section e.g. M0,12L4.832,12.5L9.663,[...],50L4.832,50L0,50Z
StringIndex=1
StringIndex2=1
; Substituting M with "" for the shape meter startX,startY cooordinates
; Substituting L with " | LineTo " for the shape meter LineTo strokes
; Substituting Z with " | ClosePath 1" for closing the shape
Substitute="M":"","L":" | LineTo ","Z":" | ClosePath 1"

[MeterBackground]
Meter=Shape
Shape=Rectangle 0,0,430,70 | Fill Color 255,255,255,255 | StrokeWidth 0

[MeterBatteryTrendShape1]
Meter=Shape
X=1
Y=1
Shape=Path MyPath | StrokeWidth 1.5 | Stroke Color 41,4,2,255 | Fill Color 163,217,126,255
;MyPath=20,0 | LineTo 150,0 | LineTo 170,20 | LineTo 170,60 | LineTo 150,80 | LineTo 20,80 | LineTo 0,60 | LineTo 0,20 | ClosePath 1
MyPath=[EBa-SVG-to-Shape]
DynamicVariables=1
This is the string from [EBa-SVG-to-Shape] for reference, in order to imagine how to do the offset +X/Y and scaling regex ...

Code: Select all

0,12 | LineTo 4.832,12.5 | LineTo 9.663,13 | LineTo 14.495,13 | LineTo 19.326,13.5 | LineTo 24.158,14 | LineTo 28.989,14 | LineTo 33.821,14 | LineTo 38.653,14.5 | LineTo 43.484,14.5 | LineTo 48.316,15 | LineTo 53.147,15 | LineTo 57.979,15.5 | LineTo 62.811,15.5 | LineTo 67.642,15.5 | LineTo 72.474,16 | LineTo 77.305,16.5 | LineTo 82.137,16.5 | LineTo 86.968,17 | LineTo 91.8,17.5 | LineTo 96.632,17.5 | LineTo 101.463,17.5 | LineTo 106.295,18 | LineTo 111.126,18 | LineTo 115.958,18.5 | LineTo 120.789,18.5 | LineTo 125.621,19 | LineTo 130.453,19 | LineTo 135.284,19 | LineTo 140.116,19 | LineTo 144.947,19.5 | LineTo 149.779,19.5 | LineTo 154.611,19.5 | LineTo 159.442,19.5 | LineTo 164.274,18.5 | LineTo 169.105,18 | LineTo 173.937,17 | LineTo 178.768,16 | LineTo 183.6,15 | LineTo 188.432,14 | LineTo 193.263,14 | LineTo 198.095,12.5 | LineTo 202.926,11.5 | LineTo 207.758,10.5 | LineTo 212.589,9 | LineTo 217.421,8 | LineTo 222.253,5.5 | LineTo 227.084,4 | LineTo 231.916,2.5 | LineTo 236.747,0 | LineTo 241.579,0 | LineTo 246.411,0 | LineTo 251.242,0 | LineTo 256.074,0 | LineTo 260.905,0 | LineTo 265.737,0 | LineTo 270.568,0 | LineTo 275.4,0 | LineTo 280.232,0 | LineTo 285.063,0 | LineTo 289.895,0 | LineTo 294.726,0 | LineTo 299.558,0 | LineTo 304.389,0 | LineTo 309.221,0 | LineTo 314.053,0 | LineTo 318.884,0 | LineTo 323.716,0 | LineTo 328.547,0 | LineTo 333.379,0 | LineTo 338.211,0 | LineTo 343.042,0 | LineTo 347.874,0 | LineTo 352.705,0 | LineTo 357.537,0.5 | LineTo 362.368,0 | LineTo 367.2,0 | LineTo 372.032,0 | LineTo 376.863,0 | LineTo 381.695,0 | LineTo 386.526,0 | LineTo 391.358,0 | LineTo 396.189,0 | LineTo 401.021,0.5 | LineTo 401.021,50 | LineTo 396.189,50 | LineTo 391.358,50 | LineTo 386.526,50 | LineTo 381.695,50 | LineTo 376.863,50 | LineTo 372.032,50 | LineTo 367.2,50 | LineTo 362.368,50 | LineTo 357.537,50 | LineTo 352.705,50 | LineTo 347.874,50 | LineTo 343.042,50 | LineTo 338.211,50 | LineTo 333.379,50 | LineTo 328.547,50 | LineTo 323.716,50 | LineTo 318.884,50 | LineTo 314.053,50 | LineTo 309.221,50 | LineTo 304.389,50 | LineTo 299.558,50 | LineTo 294.726,50 | LineTo 289.895,50 | LineTo 285.063,50 | LineTo 280.232,50 | LineTo 275.4,50 | LineTo 270.568,50 | LineTo 265.737,50 | LineTo 260.905,50 | LineTo 256.074,50 | LineTo 251.242,50 | LineTo 246.411,50 | LineTo 241.579,50 | LineTo 236.747,50 | LineTo 231.916,50 | LineTo 227.084,50 | LineTo 222.253,50 | LineTo 217.421,50 | LineTo 212.589,50 | LineTo 207.758,50 | LineTo 202.926,50 | LineTo 198.095,50 | LineTo 193.263,50 | LineTo 188.432,50 | LineTo 183.6,50 | LineTo 178.768,50 | LineTo 173.937,50 | LineTo 169.105,50 | LineTo 164.274,50 | LineTo 159.442,50 | LineTo 154.611,50 | LineTo 149.779,50 | LineTo 144.947,50 | LineTo 140.116,50 | LineTo 135.284,50 | LineTo 130.453,50 | LineTo 125.621,50 | LineTo 120.789,50 | LineTo 115.958,50 | LineTo 111.126,50 | LineTo 106.295,50 | LineTo 101.463,50 | LineTo 96.632,50 | LineTo 91.8,50 | LineTo 86.968,50 | LineTo 82.137,50 | LineTo 77.305,50 | LineTo 72.474,50 | LineTo 67.642,50 | LineTo 62.811,50 | LineTo 57.979,50 | LineTo 53.147,50 | LineTo 48.316,50 | LineTo 43.484,50 | LineTo 38.653,50 | LineTo 33.821,50 | LineTo 28.989,50 | LineTo 24.158,50 | LineTo 19.326,50 | LineTo 14.495,50 | LineTo 9.663,50 | LineTo 4.832,50 | LineTo 0,50 | ClosePath 1
User avatar
Yincognito
Rainmeter Sage
Posts: 7534
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Convert <svg path> from html and display in shape meter

Post by Yincognito »

emp00 wrote: June 8th, 2024, 5:04 pm Hurray, you are a genius!! Thank you so much Yincognito! I made it! It works! Crazy, I need a drink :-)
Took me just 20 minutes, I still can't believe it ...see result screenshot, compare with the App screenshot above.
Working code for reference below as well. All credits^2 go to you!

Now I finally would like to do this :
1) Scale the shape to a smaller size, I guess I "simply" need to multiply all coordinates with my scale-factor, e.g. 0.5 for "half the size"?
2) Shift the meter by an X and Y offset e.g. X+10 and Y+50, so I "simply" need to add the string "+10" "+50" after every X/Y-coordinate?
Thinking about this, I probably need to use a smart regex to achieve this... Can you give me a hint how you would do this, probably another line in [EBa-SVG-to-Shape] ?
Excellent, I'm glad you're happy with the result - feel free to celebrate it! :great:
1) Yes, it's that simple
2) Yes, it's that simple
However, it can be done even simpler from the Shape meter's options, without bothering with the regex in the Substitute (which isn't a big deal either if besides the L-s and such you include / capture the coordinates as well using (\d+) aka a digit taken at least once and use them as \1 and \2 in formatting the output after the : symbol - though you shouldn't forget about adding the round brackets to enclose the formulas). See:
https://docs.rainmeter.net/manual/meters/shape/#TransformModifiers

P.S. Not sure about how these Shape options will affect the "real" size of the meter though.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
emp00
Posts: 112
Joined: October 7th, 2022, 8:08 pm

Re: Convert <svg path> from html and display in shape meter

Post by emp00 »

Yincognito wrote: June 8th, 2024, 7:34 pm However, it can be done even simpler from the Shape meter's options
Took 30 seconds to look up in the Rainmeter docs, added Offset 7,10 | Scale 0.41,1.18,0,0 and getting this beauty of a meter!

Image

Chapeau, Yincognito. I need to pay you a truckload of beers: Problem solved with "minimal" code, parsing an svg html to a Rainmeter shape, how could this have been so simple? Un-be-lievable! You're an animal. THANK YOU^3!

:thumbup: :rosegift: :thumbup:
:cake04
User avatar
Yincognito
Rainmeter Sage
Posts: 7534
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Convert <svg path> from html and display in shape meter

Post by Yincognito »

emp00 wrote: June 8th, 2024, 8:18 pm Took 30 seconds to look up in the Rainmeter docs, added Offset 7,10 | Scale 0.41,1.18,0,0 and getting this beauty of a meter!

Image

Chapeau, Yincognito. I need to pay you a truckload of beers: Problem solved with "minimal" code, parsing an svg html to a Rainmeter shape, how could this have been so simple? Un-be-lievable! You're an animal. THANK YOU^3!

:thumbup: :rosegift: :thumbup:
:cake04
Thanks for the appreciation, you're welcome! :rosegift:

You see, I also have to pay a truckload of beers to everyone here who contributed to my development in Rainmeter stuff, so we're in the same boat, we all owe something to someone else. The rest is our passion, creativity and pleasure to design nice stuff and share what we know with others. You shouldn't underestimate your contribution to the results you get, it's much easier to help when the one being helped is interested in doing his part. ;-)
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
emp00
Posts: 112
Joined: October 7th, 2022, 8:08 pm

Re: Convert <svg path> from html and display in shape meter

Post by emp00 »

I am now working on the last bits of my PV meter (data grabbed from supplier's webapp html via single-file.exe) -> see above, this already includes the battery charge trend. My final task is to convert the below remaining SVG <rect> html section to the equivalent rainmeter Rectangle shape meter section.

The html structure is a series of <rect></rect> with this structure:

Code: Select all

<rect x=0.6265624999999966 width=2.92395833333334 y=0 height=6.197478991596644 style=fill:rgb(243,115,32);opacity:1></rect>
The correct rainmeter Rectangle syntax as per documentation:
Shape=Rectangle X,Y,Width,Height

I already managed to substitute the beginning and final part as well as internal Fill Color (and opacity I used for StrokeWidth) with this Substitute:

Code: Select all

Substitute="<rect x=":"Shape=Rectangle ","fill:rgb":"| Fill Color ","opacity:":"| StrokeWidth ","style=":"",";":" ","(":"",")":"","></rect>":"#CRLF#"
My last remaining problem:
After the X coordinate, unfortunately the html does not continue with Y but with Width! How can I exchange the order of the remaining string sections so that I get the correct Rainmeter syntax? If I understand the documentation correctly, I think this might require RegExpSubstitute - but I'm not sure, so far my regex experience has not dealt with "changing the order" in a string chain. Hopefully, it can be done? A small hint is highly welcome, will try to dig into it. My motivation is close to infinity with this project, it's actually fun and thanks to the usual suspects in this forum, well, I have come THIS far!
:-)

Incomplete Substitute result with my above code:

Code: Select all

Shape=Rectangle 0.6265624999999966 width=2.92395833333334 y=0 height=6.197478991596644 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 4.80364583333333 width=2.92395833333334 y=0 height=7.457983193277312 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 8.980729166666665 width=2.92395833333334 y=0 height=7.142857142857145 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 13.157812499999999 width=2.92395833333334 y=0 height=6.092436974789922 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 17.33489583333333 width=2.92395833333334 y=0 height=3.781512605042017 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 21.511979166666663 width=2.92395833333334 y=0 height=3.781512605042017 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 25.689062499999995 width=2.92395833333334 y=0 height=3.361344537815128 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 29.86614583333333 width=2.92395833333334 y=0 height=3.2563025210084056 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 34.04322916666666 width=2.92395833333334 y=0 height=3.1512605042016832 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 38.22031249999999 width=2.92395833333334 y=0 height=3.361344537815128 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 42.39739583333333 width=2.92395833333334 y=0 height=3.361344537815128 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 46.57447916666666 width=2.92395833333334 y=0 height=5.147058823529408 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 50.7515625 width=2.92395833333334 y=0 height=4.936974789915963 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 54.92864583333333 width=2.92395833333334 y=0 height=4.936974789915963 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 59.105729166666656 width=2.92395833333334 y=0 height=4.621848739495796 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 63.2828125 width=2.92395833333334 y=0 height=3.5714285714285725 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 67.45989583333333 width=2.92395833333334 y=0 height=3.046218487394961 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 71.63697916666666 width=2.92395833333334 y=0 height=3.046218487394961 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 75.8140625 width=2.92395833333334 y=0 height=3.2563025210084056 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 79.99114583333333 width=2.92395833333334 y=0 height=3.2563025210084056 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 84.16822916666666 width=2.92395833333334 y=0 height=3.046218487394961 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 88.3453125 width=2.92395833333334 y=0 height=3.1512605042016832 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 92.52239583333333 width=2.92395833333334 y=0 height=3.1512605042016832 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 96.69947916666666 width=2.92395833333334 y=0 height=4.621848739495796 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 100.87656249999999 width=2.92395833333334 y=0 height=4.831932773109241 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 105.05364583333333 width=2.92395833333334 y=0 height=4.516806722689074 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 109.23072916666668 width=2.92395833333334 y=0 height=4.621848739495796 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 113.40781249999999 width=2.92395833333334 y=0 height=3.2563025210084056 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 117.58489583333333 width=2.92395833333334 y=0 height=3.1512605042016832 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 121.76197916666668 width=2.92395833333334 y=0 height=1.0504201680672232 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 125.93906249999999 width=2.92395833333334 y=0 height=1.36554621848739 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 130.11614583333332 width=2.92395833333334 y=0 height=0.8403361344537785 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 134.29322916666666 width=2.92395833333334 y=0 height=1.1554621848739455 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 138.47031249999998 width=2.92395833333334 y=0 height=2.5210084033613493 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 142.64739583333332 width=2.92395833333334 y=0 height=1.5756302521008347 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 146.82447916666666 width=2.92395833333334 y=0 height=3.046218487394961 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 151.00156249999998 width=2.92395833333334 y=0 height=3.46638655462185 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 155.17864583333332 width=2.92395833333334 y=0 height=3.9915966386554618 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 159.35572916666666 width=2.92395833333334 y=0 height=3.046218487394961 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 163.53281249999998 width=2.92395833333334 y=0 height=3.46638655462185 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 167.70989583333332 width=2.92395833333334 y=0 height=9.033613445378148 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 171.88697916666666 width=2.92395833333334 y=0 height=3.046218487394961 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 176.06406249999998 width=2.92395833333334 y=0 height=7.9831932773109235 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 180.24114583333332 width=2.92395833333334 y=0 height=1.680672268907557 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 184.41822916666666 width=2.92395833333334 y=0 height=6.827731092436978 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 188.59531249999998 width=2.92395833333334 y=0 height=3.46638655462185 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 192.77239583333332 width=2.92395833333334 y=0 height=3.5714285714285725 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 196.94947916666666 width=2.92395833333334 y=0 height=5.357142857142852 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 201.1265625 width=2.92395833333334 y=0 height=8.193277310924369 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 205.30364583333332 width=2.92395833333334 y=0 height=8.298319327731091 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 209.48072916666663 width=2.92395833333334 y=0 height=11.134453781512606 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 213.6578125 width=2.92395833333334 y=0 height=6.827731092436978 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 217.83489583333332 width=2.92395833333334 y=0 height=6.197478991596644 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 222.01197916666663 width=2.92395833333334 y=0 height=3.9915966386554618 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 226.1890625 width=2.92395833333334 y=0 height=3.9915966386554618 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 230.36614583333332 width=2.92395833333334 y=0 height=3.676470588235295 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 234.54322916666663 width=2.92395833333334 y=0 height=3.361344537815128 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 238.7203125 width=2.92395833333334 y=0 height=17.75210084033614 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 242.89739583333332 width=2.92395833333334 y=0 height=2.10084033613446 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 247.07447916666663 width=2.92395833333334 y=0 height=4.516806722689074 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 251.2515625 width=2.92395833333334 y=0 height=9.033613445378148 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 255.42864583333332 width=2.92395833333334 y=0 height=7.563025210084034 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 259.60572916666666 width=2.92395833333334 y=0 height=12.605042016806719 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 263.78281250000003 width=2.92395833333334 y=0 height=8.088235294117647 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 267.95989583333335 width=2.92395833333334 y=0 height=6.197478991596644 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 272.13697916666666 width=2.92395833333334 y=0 height=6.3025210084033665 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 276.31406250000003 width=2.92395833333334 y=0 height=6.197478991596644 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 280.49114583333335 width=2.92395833333334 y=0 height=5.882352941176477 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 284.66822916666666 width=2.92395833333334 y=0 height=3.676470588235295 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 288.84531250000003 width=2.92395833333334 y=0 height=3.46638655462185 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 293.02239583333335 width=2.92395833333334 y=0 height=3.5714285714285725 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 297.19947916666666 width=2.92395833333334 y=0 height=3.9915966386554618 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 301.37656250000003 width=2.92395833333334 y=0 height=5.672268907563019 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 305.55364583333335 width=2.92395833333334 y=0 height=5.777310924369742 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 309.73072916666666 width=2.92395833333334 y=0 height=7.878151260504201 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 313.90781250000003 width=2.92395833333334 y=0 height=7.457983193277312 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 318.08489583333335 width=2.92395833333334 y=0 height=5.9873949579831995 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 322.26197916666666 width=2.92395833333334 y=0 height=5.25210084033613 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 326.43906250000003 width=2.92395833333334 y=0 height=5.147058823529408 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 330.61614583333335 width=2.92395833333334 y=0 height=4.936974789915963 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 334.79322916666666 width=2.92395833333334 y=0 height=5.042016806722685 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 338.97031250000003 width=2.92395833333334 y=0 height=5.147058823529408 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 343.14739583333335 width=2.92395833333334 y=0 height=4.0966386554621845 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 347.32447916666666 width=2.92395833333334 y=0 height=9.873949579831939 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 351.50156250000003 width=2.92395833333334 y=0 height=5.147058823529408 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 355.67864583333335 width=2.92395833333334 y=0 height=4.726890756302518 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 359.85572916666666 width=2.92395833333334 y=0 height=4.936974789915963 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 364.03281250000003 width=2.92395833333334 y=0 height=3.1512605042016832 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 368.20989583333335 width=2.92395833333334 y=0 height=5.882352941176477 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 372.38697916666666 width=2.92395833333334 y=0 height=10.609243697478995 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 376.56406250000003 width=2.92395833333334 y=0 height=7.563025210084034 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 380.74114583333335 width=2.92395833333334 y=0 height=0 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 384.91822916666666 width=2.92395833333334 y=0 height=0 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 389.09531250000003 width=2.92395833333334 y=0 height=0 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 393.27239583333335 width=2.92395833333334 y=0 height=0 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 397.44947916666666 width=2.92395833333334 y=0 height=0 | Fill Color 243,115,32 | StrokeWidth 1
Shape=Rectangle 0.6265624999999966 width=2.92395833333334 y=6.197478991596644 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 4.80364583333333 width=2.92395833333334 y=7.457983193277312 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 8.980729166666665 width=2.92395833333334 y=7.142857142857145 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 13.157812499999999 width=2.92395833333334 y=6.092436974789922 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 17.33489583333333 width=2.92395833333334 y=3.781512605042017 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 21.511979166666663 width=2.92395833333334 y=3.781512605042017 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 25.689062499999995 width=2.92395833333334 y=3.361344537815128 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 29.86614583333333 width=2.92395833333334 y=3.2563025210084056 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 34.04322916666666 width=2.92395833333334 y=3.1512605042016832 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 38.22031249999999 width=2.92395833333334 y=3.361344537815128 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 42.39739583333333 width=2.92395833333334 y=3.361344537815128 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 46.57447916666666 width=2.92395833333334 y=5.147058823529408 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 50.7515625 width=2.92395833333334 y=4.936974789915963 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 54.92864583333333 width=2.92395833333334 y=4.936974789915963 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 59.105729166666656 width=2.92395833333334 y=4.621848739495796 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 63.2828125 width=2.92395833333334 y=3.5714285714285725 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 67.45989583333333 width=2.92395833333334 y=3.046218487394961 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 71.63697916666666 width=2.92395833333334 y=3.046218487394961 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 75.8140625 width=2.92395833333334 y=3.2563025210084056 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 79.99114583333333 width=2.92395833333334 y=3.2563025210084056 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 84.16822916666666 width=2.92395833333334 y=3.046218487394961 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 88.3453125 width=2.92395833333334 y=3.1512605042016832 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 92.52239583333333 width=2.92395833333334 y=3.1512605042016832 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 96.69947916666666 width=2.92395833333334 y=4.621848739495796 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 100.87656249999999 width=2.92395833333334 y=4.831932773109241 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 105.05364583333333 width=2.92395833333334 y=4.516806722689074 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 109.23072916666668 width=2.92395833333334 y=4.621848739495796 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 113.40781249999999 width=2.92395833333334 y=3.2563025210084056 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 117.58489583333333 width=2.92395833333334 y=3.1512605042016832 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 121.76197916666668 width=2.92395833333334 y=1.0504201680672232 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 125.93906249999999 width=2.92395833333334 y=1.36554621848739 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 130.11614583333332 width=2.92395833333334 y=0.8403361344537785 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 134.29322916666666 width=2.92395833333334 y=1.1554621848739455 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 138.47031249999998 width=2.92395833333334 y=2.5210084033613493 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 142.64739583333332 width=2.92395833333334 y=1.5756302521008347 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 146.82447916666666 width=2.92395833333334 y=3.046218487394961 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 151.00156249999998 width=2.92395833333334 y=3.46638655462185 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 155.17864583333332 width=2.92395833333334 y=3.9915966386554618 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 159.35572916666666 width=2.92395833333334 y=3.046218487394961 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 163.53281249999998 width=2.92395833333334 y=3.46638655462185 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 167.70989583333332 width=2.92395833333334 y=9.033613445378148 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 171.88697916666666 width=2.92395833333334 y=3.046218487394961 height=3.361344537815128 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 176.06406249999998 width=2.92395833333334 y=7.9831932773109235 height=26.995798319327733 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 180.24114583333332 width=2.92395833333334 y=1.680672268907557 height=29.201680672268914 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 184.41822916666666 width=2.92395833333334 y=6.827731092436978 height=40.12605042016806 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 188.59531249999998 width=2.92395833333334 y=3.46638655462185 height=42.226890756302524 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 192.77239583333332 width=2.92395833333334 y=3.5714285714285725 height=40.12605042016806 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 196.94947916666666 width=2.92395833333334 y=5.357142857142852 height=30.567226890756302 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 201.1265625 width=2.92395833333334 y=8.193277310924369 height=31.407563025210084 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 205.30364583333332 width=2.92395833333334 y=8.298319327731091 height=38.02521008403362 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 209.48072916666663 width=2.92395833333334 y=11.134453781512606 height=57.24789915966387 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 213.6578125 width=2.92395833333334 y=6.827731092436978 height=55.357142857142854 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 217.83489583333332 width=2.92395833333334 y=6.197478991596644 height=61.1344537815126 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 222.01197916666663 width=2.92395833333334 y=3.9915966386554618 height=70.58823529411764 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 226.1890625 width=2.92395833333334 y=3.9915966386554618 height=69.74789915966386 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 230.36614583333332 width=2.92395833333334 y=3.676470588235295 height=75.52521008403362 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 234.54322916666663 width=2.92395833333334 y=3.361344537815128 height=47.58403361344538 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 238.7203125 width=2.92395833333334 y=17.75210084033614 height=58.71848739495799 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 242.89739583333332 width=2.92395833333334 y=2.10084033613446 height=46.95378151260504 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 247.07447916666663 width=2.92395833333334 y=4.516806722689074 height=30.88235294117647 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 251.2515625 width=2.92395833333334 y=9.033613445378148 height=25.00000000000001 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 255.42864583333332 width=2.92395833333334 y=7.563025210084034 height=42.436974789915965 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 259.60572916666666 width=2.92395833333334 y=12.605042016806719 height=54.20168067226891 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 263.78281250000003 width=2.92395833333334 y=8.088235294117647 height=24.894957983193272 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 267.95989583333335 width=2.92395833333334 y=6.197478991596644 height=32.8781512605042 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 272.13697916666666 width=2.92395833333334 y=6.3025210084033665 height=23.634453781512605 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 276.31406250000003 width=2.92395833333334 y=6.197478991596644 height=35.50420168067227 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 280.49114583333335 width=2.92395833333334 y=5.882352941176477 height=36.659663865546214 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 284.66822916666666 width=2.92395833333334 y=3.676470588235295 height=23.73949579831933 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 288.84531250000003 width=2.92395833333334 y=3.46638655462185 height=34.66386554621849 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 293.02239583333335 width=2.92395833333334 y=3.5714285714285725 height=19.01260504201681 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 297.19947916666666 width=2.92395833333334 y=3.9915966386554618 height=5.987394957983199 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 301.37656250000003 width=2.92395833333334 y=5.672268907563019 height=5.462184873949587 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 305.55364583333335 width=2.92395833333334 y=5.777310924369742 height=7.668067226890756 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 309.73072916666666 width=2.92395833333334 y=7.878151260504201 height=4.621848739495795 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 313.90781250000003 width=2.92395833333334 y=7.457983193277312 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 318.08489583333335 width=2.92395833333334 y=5.9873949579831995 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 322.26197916666666 width=2.92395833333334 y=5.25210084033613 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 326.43906250000003 width=2.92395833333334 y=5.147058823529408 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 330.61614583333335 width=2.92395833333334 y=4.936974789915963 height=2.941176470588238 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 334.79322916666666 width=2.92395833333334 y=5.042016806722685 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 338.97031250000003 width=2.92395833333334 y=5.147058823529408 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 343.14739583333335 width=2.92395833333334 y=4.0966386554621845 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 347.32447916666666 width=2.92395833333334 y=9.873949579831939 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 351.50156250000003 width=2.92395833333334 y=5.147058823529408 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 355.67864583333335 width=2.92395833333334 y=4.726890756302518 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 359.85572916666666 width=2.92395833333334 y=4.936974789915963 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 364.03281250000003 width=2.92395833333334 y=3.1512605042016832 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 368.20989583333335 width=2.92395833333334 y=5.882352941176477 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 372.38697916666666 width=2.92395833333334 y=10.609243697478995 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 376.56406250000003 width=2.92395833333334 y=7.563025210084034 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 380.74114583333335 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 384.91822916666666 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 389.09531250000003 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 393.27239583333335 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 397.44947916666666 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 101,101,105
Shape=Rectangle 0.6265624999999966 width=2.92395833333334 y=6.197478991596644 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 4.80364583333333 width=2.92395833333334 y=7.457983193277312 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 8.980729166666665 width=2.92395833333334 y=7.142857142857145 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 13.157812499999999 width=2.92395833333334 y=6.092436974789922 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 17.33489583333333 width=2.92395833333334 y=3.781512605042017 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 21.511979166666663 width=2.92395833333334 y=3.781512605042017 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 25.689062499999995 width=2.92395833333334 y=3.361344537815128 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 29.86614583333333 width=2.92395833333334 y=3.2563025210084056 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 34.04322916666666 width=2.92395833333334 y=3.1512605042016832 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 38.22031249999999 width=2.92395833333334 y=3.361344537815128 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 42.39739583333333 width=2.92395833333334 y=3.361344537815128 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 46.57447916666666 width=2.92395833333334 y=5.147058823529408 height=0.31512605042016695 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 50.7515625 width=2.92395833333334 y=4.936974789915963 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 54.92864583333333 width=2.92395833333334 y=4.936974789915963 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 59.105729166666656 width=2.92395833333334 y=4.621848739495796 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 63.2828125 width=2.92395833333334 y=3.5714285714285725 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 67.45989583333333 width=2.92395833333334 y=3.046218487394961 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 71.63697916666666 width=2.92395833333334 y=3.046218487394961 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 75.8140625 width=2.92395833333334 y=3.2563025210084056 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 79.99114583333333 width=2.92395833333334 y=3.2563025210084056 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 84.16822916666666 width=2.92395833333334 y=3.046218487394961 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 88.3453125 width=2.92395833333334 y=3.1512605042016832 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 92.52239583333333 width=2.92395833333334 y=3.1512605042016832 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 96.69947916666666 width=2.92395833333334 y=4.621848739495796 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 100.87656249999999 width=2.92395833333334 y=4.831932773109241 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 105.05364583333333 width=2.92395833333334 y=4.516806722689074 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 109.23072916666668 width=2.92395833333334 y=4.621848739495796 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 113.40781249999999 width=2.92395833333334 y=3.2563025210084056 height=0.6302521008403339 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 117.58489583333333 width=2.92395833333334 y=3.1512605042016832 height=1.9957983193277244 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 121.76197916666668 width=2.92395833333334 y=1.0504201680672232 height=6.197478991596644 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 125.93906249999999 width=2.92395833333334 y=1.36554621848739 height=6.197478991596644 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 130.11614583333332 width=2.92395833333334 y=0.8403361344537785 height=7.142857142857145 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 134.29322916666666 width=2.92395833333334 y=1.1554621848739455 height=8.508403361344536 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 138.47031249999998 width=2.92395833333334 y=2.5210084033613493 height=15.441176470588236 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 142.64739583333332 width=2.92395833333334 y=1.5756302521008347 height=18.69747899159664 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 146.82447916666666 width=2.92395833333334 y=3.046218487394961 height=19.537815126050422 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 151.00156249999998 width=2.92395833333334 y=3.46638655462185 height=16.701680672268907 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 155.17864583333332 width=2.92395833333334 y=3.9915966386554618 height=19.432773109243698 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 159.35572916666666 width=2.92395833333334 y=3.046218487394961 height=26.26050420168068 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 163.53281249999998 width=2.92395833333334 y=3.46638655462185 height=31.72268907563025 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 167.70989583333332 width=2.92395833333334 y=9.033613445378148 height=30.252100840336137 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 171.88697916666666 width=2.92395833333334 y=6.407563025210089 height=30.462184873949568 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 176.06406249999998 width=2.92395833333334 y=34.97899159663866 height=7.878151260504197 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 180.24114583333332 width=2.92395833333334 y=30.88235294117647 height=1.680672268907557 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 184.41822916666666 width=2.92395833333334 y=46.95378151260504 height=1.99579831932774 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 188.59531249999998 width=2.92395833333334 y=45.69327731092437 height=0.6302521008403374 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 192.77239583333332 width=2.92395833333334 y=43.69747899159663 height=0.3151260504201687 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 196.94947916666666 width=2.92395833333334 y=35.924369747899156 height=0.8403361344537785 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 201.1265625 width=2.92395833333334 y=39.60084033613445 height=0.42016806722688926 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 205.30364583333332 width=2.92395833333334 y=46.32352941176471 height=0.5252100840336098 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 209.48072916666663 width=2.92395833333334 y=68.38235294117648 height=0.735294117647058 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 213.6578125 width=2.92395833333334 y=62.18487394957983 height=0.42016806722688926 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 217.83489583333332 width=2.92395833333334 y=67.33193277310924 height=0.8403361344537927 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 222.01197916666663 width=2.92395833333334 y=74.5798319327731 height=0.42016806722689637 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 226.1890625 width=2.92395833333334 y=73.73949579831933 height=0.6302521008403374 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 230.36614583333332 width=2.92395833333334 y=79.2016806722689 height=0.42016806722688216 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 234.54322916666663 width=2.92395833333334 y=50.945378151260506 height=0.7352941176470509 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 238.7203125 width=2.92395833333334 y=76.47058823529413 height=0.42016806722688216 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 242.89739583333332 width=2.92395833333334 y=49.0546218487395 height=0.8403361344537785 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 247.07447916666663 width=2.92395833333334 y=35.39915966386555 height=0.21008403361344108 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 251.2515625 width=2.92395833333334 y=34.03361344537816 height=1.5756302521008294 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 255.42864583333332 width=2.92395833333334 y=50 height=0.3151260504201687 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 259.60572916666666 width=2.92395833333334 y=66.80672268907563 height=0.5252100840336169 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 263.78281250000003 width=2.92395833333334 y=32.98319327731092 height=0.4201680672269035 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 267.95989583333335 width=2.92395833333334 y=39.075630252100844 height=0.6302521008403303 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 272.13697916666666 width=2.92395833333334 y=29.936974789915972 height=0.6302521008403339 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 276.31406250000003 width=2.92395833333334 y=41.701680672268914 height=0.3151260504201616 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 280.49114583333335 width=2.92395833333334 y=42.54201680672269 height=0.7352941176470509 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 284.66822916666666 width=2.92395833333334 y=27.415966386554622 height=0.7352941176470544 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 288.84531250000003 width=2.92395833333334 y=38.13025210084034 height=0.3151260504201687 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 293.02239583333335 width=2.92395833333334 y=22.58403361344538 height=0.6302521008403339 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 297.19947916666666 width=2.92395833333334 y=9.97899159663866 height=0.5252100840336116 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 301.37656250000003 width=2.92395833333334 y=11.134453781512606 height=0.6302521008403339 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 305.55364583333335 width=2.92395833333334 y=13.445378151260497 height=0.6302521008403481 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 309.73072916666666 width=2.92395833333334 y=12.499999999999996 height=0.31512605042016695 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 313.90781250000003 width=2.92395833333334 y=7.457983193277312 height=0.8403361344537794 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 318.08489583333335 width=2.92395833333334 y=5.9873949579831995 height=0.7352941176470562 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 322.26197916666666 width=2.92395833333334 y=5.25210084033613 height=0.6302521008403472 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 326.43906250000003 width=2.92395833333334 y=5.25210084033613 height=1.4705882352941257 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 330.61614583333335 width=2.92395833333334 y=7.878151260504201 height=0.5252100840336125 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 334.79322916666666 width=2.92395833333334 y=5.042016806722685 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 338.97031250000003 width=2.92395833333334 y=5.147058823529408 height=0 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 343.14739583333335 width=2.92395833333334 y=4.0966386554621845 height=0.31512605042016695 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 347.32447916666666 width=2.92395833333334 y=9.873949579831939 height=0 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 351.50156250000003 width=2.92395833333334 y=5.147058823529408 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 355.67864583333335 width=2.92395833333334 y=4.726890756302518 height=0.31512605042016695 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 359.85572916666666 width=2.92395833333334 y=4.936974789915963 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 364.03281250000003 width=2.92395833333334 y=3.1512605042016832 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 368.20989583333335 width=2.92395833333334 y=5.882352941176477 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 372.38697916666666 width=2.92395833333334 y=10.609243697478995 height=0.10504201680672232 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 376.56406250000003 width=2.92395833333334 y=7.563025210084034 height=0.21008403361344463 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 380.74114583333335 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 384.91822916666666 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 389.09531250000003 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 393.27239583333335 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 122,207,64
Shape=Rectangle 397.44947916666666 width=2.92395833333334 y=0 height=0 | StrokeWidth 1 | Fill Color 122,207,64
Original html section used as input for the Substitute measure:

Code: Select all

<rect x=0.6265624999999966 width=2.92395833333334 y=0 height=6.197478991596644 style=fill:rgb(243,115,32);opacity:1></rect><rect x=4.80364583333333 width=2.92395833333334 y=0 height=7.457983193277312 style=fill:rgb(243,115,32);opacity:1></rect><rect x=8.980729166666665 width=2.92395833333334 y=0 height=7.142857142857145 style=fill:rgb(243,115,32);opacity:1></rect><rect x=13.157812499999999 width=2.92395833333334 y=0 height=6.092436974789922 style=fill:rgb(243,115,32);opacity:1></rect><rect x=17.33489583333333 width=2.92395833333334 y=0 height=3.781512605042017 style=fill:rgb(243,115,32);opacity:1></rect><rect x=21.511979166666663 width=2.92395833333334 y=0 height=3.781512605042017 style=fill:rgb(243,115,32);opacity:1></rect><rect x=25.689062499999995 width=2.92395833333334 y=0 height=3.361344537815128 style=fill:rgb(243,115,32);opacity:1></rect><rect x=29.86614583333333 width=2.92395833333334 y=0 height=3.2563025210084056 style=fill:rgb(243,115,32);opacity:1></rect><rect x=34.04322916666666 width=2.92395833333334 y=0 height=3.1512605042016832 style=fill:rgb(243,115,32);opacity:1></rect><rect x=38.22031249999999 width=2.92395833333334 y=0 height=3.361344537815128 style=fill:rgb(243,115,32);opacity:1></rect><rect x=42.39739583333333 width=2.92395833333334 y=0 height=3.361344537815128 style=fill:rgb(243,115,32);opacity:1></rect><rect x=46.57447916666666 width=2.92395833333334 y=0 height=5.147058823529408 style=fill:rgb(243,115,32);opacity:1></rect><rect x=50.7515625 width=2.92395833333334 y=0 height=4.936974789915963 style=fill:rgb(243,115,32);opacity:1></rect><rect x=54.92864583333333 width=2.92395833333334 y=0 height=4.936974789915963 style=fill:rgb(243,115,32);opacity:1></rect><rect x=59.105729166666656 width=2.92395833333334 y=0 height=4.621848739495796 style=fill:rgb(243,115,32);opacity:1></rect><rect x=63.2828125 width=2.92395833333334 y=0 height=3.5714285714285725 style=fill:rgb(243,115,32);opacity:1></rect><rect x=67.45989583333333 width=2.92395833333334 y=0 height=3.046218487394961 style=fill:rgb(243,115,32);opacity:1></rect><rect x=71.63697916666666 width=2.92395833333334 y=0 height=3.046218487394961 style=fill:rgb(243,115,32);opacity:1></rect><rect x=75.8140625 width=2.92395833333334 y=0 height=3.2563025210084056 style=fill:rgb(243,115,32);opacity:1></rect><rect x=79.99114583333333 width=2.92395833333334 y=0 height=3.2563025210084056 style=fill:rgb(243,115,32);opacity:1></rect><rect x=84.16822916666666 width=2.92395833333334 y=0 height=3.046218487394961 style=fill:rgb(243,115,32);opacity:1></rect><rect x=88.3453125 width=2.92395833333334 y=0 height=3.1512605042016832 style=fill:rgb(243,115,32);opacity:1></rect><rect x=92.52239583333333 width=2.92395833333334 y=0 height=3.1512605042016832 style=fill:rgb(243,115,32);opacity:1></rect><rect x=96.69947916666666 width=2.92395833333334 y=0 height=4.621848739495796 style=fill:rgb(243,115,32);opacity:1></rect><rect x=100.87656249999999 width=2.92395833333334 y=0 height=4.831932773109241 style=fill:rgb(243,115,32);opacity:1></rect><rect x=105.05364583333333 width=2.92395833333334 y=0 height=4.516806722689074 style=fill:rgb(243,115,32);opacity:1></rect><rect x=109.23072916666668 width=2.92395833333334 y=0 height=4.621848739495796 style=fill:rgb(243,115,32);opacity:1></rect><rect x=113.40781249999999 width=2.92395833333334 y=0 height=3.2563025210084056 style=fill:rgb(243,115,32);opacity:1></rect><rect x=117.58489583333333 width=2.92395833333334 y=0 height=3.1512605042016832 style=fill:rgb(243,115,32);opacity:1></rect><rect x=121.76197916666668 width=2.92395833333334 y=0 height=1.0504201680672232 style=fill:rgb(243,115,32);opacity:1></rect><rect x=125.93906249999999 width=2.92395833333334 y=0 height=1.36554621848739 style=fill:rgb(243,115,32);opacity:1></rect><rect x=130.11614583333332 width=2.92395833333334 y=0 height=0.8403361344537785 style=fill:rgb(243,115,32);opacity:1></rect><rect x=134.29322916666666 width=2.92395833333334 y=0 height=1.1554621848739455 style=fill:rgb(243,115,32);opacity:1></rect><rect x=138.47031249999998 width=2.92395833333334 y=0 height=2.5210084033613493 style=fill:rgb(243,115,32);opacity:1></rect><rect x=142.64739583333332 width=2.92395833333334 y=0 height=1.5756302521008347 style=fill:rgb(243,115,32);opacity:1></rect><rect x=146.82447916666666 width=2.92395833333334 y=0 height=3.046218487394961 style=fill:rgb(243,115,32);opacity:1></rect><rect x=151.00156249999998 width=2.92395833333334 y=0 height=3.46638655462185 style=fill:rgb(243,115,32);opacity:1></rect><rect x=155.17864583333332 width=2.92395833333334 y=0 height=3.9915966386554618 style=fill:rgb(243,115,32);opacity:1></rect><rect x=159.35572916666666 width=2.92395833333334 y=0 height=3.046218487394961 style=fill:rgb(243,115,32);opacity:1></rect><rect x=163.53281249999998 width=2.92395833333334 y=0 height=3.46638655462185 style=fill:rgb(243,115,32);opacity:1></rect><rect x=167.70989583333332 width=2.92395833333334 y=0 height=9.033613445378148 style=fill:rgb(243,115,32);opacity:1></rect><rect x=171.88697916666666 width=2.92395833333334 y=0 height=3.046218487394961 style=fill:rgb(243,115,32);opacity:1></rect><rect x=176.06406249999998 width=2.92395833333334 y=0 height=7.9831932773109235 style=fill:rgb(243,115,32);opacity:1></rect><rect x=180.24114583333332 width=2.92395833333334 y=0 height=1.680672268907557 style=fill:rgb(243,115,32);opacity:1></rect><rect x=184.41822916666666 width=2.92395833333334 y=0 height=6.827731092436978 style=fill:rgb(243,115,32);opacity:1></rect><rect x=188.59531249999998 width=2.92395833333334 y=0 height=3.46638655462185 style=fill:rgb(243,115,32);opacity:1></rect><rect x=192.77239583333332 width=2.92395833333334 y=0 height=3.5714285714285725 style=fill:rgb(243,115,32);opacity:1></rect><rect x=196.94947916666666 width=2.92395833333334 y=0 height=5.357142857142852 style=fill:rgb(243,115,32);opacity:1></rect><rect x=201.1265625 width=2.92395833333334 y=0 height=8.193277310924369 style=fill:rgb(243,115,32);opacity:1></rect><rect x=205.30364583333332 width=2.92395833333334 y=0 height=8.298319327731091 style=fill:rgb(243,115,32);opacity:1></rect><rect x=209.48072916666663 width=2.92395833333334 y=0 height=11.134453781512606 style=fill:rgb(243,115,32);opacity:1></rect><rect x=213.6578125 width=2.92395833333334 y=0 height=6.827731092436978 style=fill:rgb(243,115,32);opacity:1></rect><rect x=217.83489583333332 width=2.92395833333334 y=0 height=6.197478991596644 style=fill:rgb(243,115,32);opacity:1></rect><rect x=222.01197916666663 width=2.92395833333334 y=0 height=3.9915966386554618 style=fill:rgb(243,115,32);opacity:1></rect><rect x=226.1890625 width=2.92395833333334 y=0 height=3.9915966386554618 style=fill:rgb(243,115,32);opacity:1></rect><rect x=230.36614583333332 width=2.92395833333334 y=0 height=3.676470588235295 style=fill:rgb(243,115,32);opacity:1></rect><rect x=234.54322916666663 width=2.92395833333334 y=0 height=3.361344537815128 style=fill:rgb(243,115,32);opacity:1></rect><rect x=238.7203125 width=2.92395833333334 y=0 height=17.75210084033614 style=fill:rgb(243,115,32);opacity:1></rect><rect x=242.89739583333332 width=2.92395833333334 y=0 height=2.10084033613446 style=fill:rgb(243,115,32);opacity:1></rect><rect x=247.07447916666663 width=2.92395833333334 y=0 height=4.516806722689074 style=fill:rgb(243,115,32);opacity:1></rect><rect x=251.2515625 width=2.92395833333334 y=0 height=9.033613445378148 style=fill:rgb(243,115,32);opacity:1></rect><rect x=255.42864583333332 width=2.92395833333334 y=0 height=7.563025210084034 style=fill:rgb(243,115,32);opacity:1></rect><rect x=259.60572916666666 width=2.92395833333334 y=0 height=12.605042016806719 style=fill:rgb(243,115,32);opacity:1></rect><rect x=263.78281250000003 width=2.92395833333334 y=0 height=8.088235294117647 style=fill:rgb(243,115,32);opacity:1></rect><rect x=267.95989583333335 width=2.92395833333334 y=0 height=6.197478991596644 style=fill:rgb(243,115,32);opacity:1></rect><rect x=272.13697916666666 width=2.92395833333334 y=0 height=6.3025210084033665 style=fill:rgb(243,115,32);opacity:1></rect><rect x=276.31406250000003 width=2.92395833333334 y=0 height=6.197478991596644 style=fill:rgb(243,115,32);opacity:1></rect><rect x=280.49114583333335 width=2.92395833333334 y=0 height=5.882352941176477 style=fill:rgb(243,115,32);opacity:1></rect><rect x=284.66822916666666 width=2.92395833333334 y=0 height=3.676470588235295 style=fill:rgb(243,115,32);opacity:1></rect><rect x=288.84531250000003 width=2.92395833333334 y=0 height=3.46638655462185 style=fill:rgb(243,115,32);opacity:1></rect><rect x=293.02239583333335 width=2.92395833333334 y=0 height=3.5714285714285725 style=fill:rgb(243,115,32);opacity:1></rect><rect x=297.19947916666666 width=2.92395833333334 y=0 height=3.9915966386554618 style=fill:rgb(243,115,32);opacity:1></rect><rect x=301.37656250000003 width=2.92395833333334 y=0 height=5.672268907563019 style=fill:rgb(243,115,32);opacity:1></rect><rect x=305.55364583333335 width=2.92395833333334 y=0 height=5.777310924369742 style=fill:rgb(243,115,32);opacity:1></rect><rect x=309.73072916666666 width=2.92395833333334 y=0 height=7.878151260504201 style=fill:rgb(243,115,32);opacity:1></rect><rect x=313.90781250000003 width=2.92395833333334 y=0 height=7.457983193277312 style=fill:rgb(243,115,32);opacity:1></rect><rect x=318.08489583333335 width=2.92395833333334 y=0 height=5.9873949579831995 style=fill:rgb(243,115,32);opacity:1></rect><rect x=322.26197916666666 width=2.92395833333334 y=0 height=5.25210084033613 style=fill:rgb(243,115,32);opacity:1></rect><rect x=326.43906250000003 width=2.92395833333334 y=0 height=5.147058823529408 style=fill:rgb(243,115,32);opacity:1></rect><rect x=330.61614583333335 width=2.92395833333334 y=0 height=4.936974789915963 style=fill:rgb(243,115,32);opacity:1></rect><rect x=334.79322916666666 width=2.92395833333334 y=0 height=5.042016806722685 style=fill:rgb(243,115,32);opacity:1></rect><rect x=338.97031250000003 width=2.92395833333334 y=0 height=5.147058823529408 style=fill:rgb(243,115,32);opacity:1></rect><rect x=343.14739583333335 width=2.92395833333334 y=0 height=4.0966386554621845 style=fill:rgb(243,115,32);opacity:1></rect><rect x=347.32447916666666 width=2.92395833333334 y=0 height=9.873949579831939 style=fill:rgb(243,115,32);opacity:1></rect><rect x=351.50156250000003 width=2.92395833333334 y=0 height=5.147058823529408 style=fill:rgb(243,115,32);opacity:1></rect><rect x=355.67864583333335 width=2.92395833333334 y=0 height=4.726890756302518 style=fill:rgb(243,115,32);opacity:1></rect><rect x=359.85572916666666 width=2.92395833333334 y=0 height=4.936974789915963 style=fill:rgb(243,115,32);opacity:1></rect><rect x=364.03281250000003 width=2.92395833333334 y=0 height=3.1512605042016832 style=fill:rgb(243,115,32);opacity:1></rect><rect x=368.20989583333335 width=2.92395833333334 y=0 height=5.882352941176477 style=fill:rgb(243,115,32);opacity:1></rect><rect x=372.38697916666666 width=2.92395833333334 y=0 height=10.609243697478995 style=fill:rgb(243,115,32);opacity:1></rect><rect x=376.56406250000003 width=2.92395833333334 y=0 height=7.563025210084034 style=fill:rgb(243,115,32);opacity:1></rect><rect x=380.74114583333335 width=2.92395833333334 y=0 height=0 style=fill:rgb(243,115,32);opacity:1></rect><rect x=384.91822916666666 width=2.92395833333334 y=0 height=0 style=fill:rgb(243,115,32);opacity:1></rect><rect x=389.09531250000003 width=2.92395833333334 y=0 height=0 style=fill:rgb(243,115,32);opacity:1></rect><rect x=393.27239583333335 width=2.92395833333334 y=0 height=0 style=fill:rgb(243,115,32);opacity:1></rect><rect x=397.44947916666666 width=2.92395833333334 y=0 height=0 style=fill:rgb(243,115,32);opacity:1></rect><rect x=0.6265624999999966 width=2.92395833333334 y=6.197478991596644 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=4.80364583333333 width=2.92395833333334 y=7.457983193277312 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=8.980729166666665 width=2.92395833333334 y=7.142857142857145 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=13.157812499999999 width=2.92395833333334 y=6.092436974789922 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=17.33489583333333 width=2.92395833333334 y=3.781512605042017 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=21.511979166666663 width=2.92395833333334 y=3.781512605042017 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=25.689062499999995 width=2.92395833333334 y=3.361344537815128 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=29.86614583333333 width=2.92395833333334 y=3.2563025210084056 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=34.04322916666666 width=2.92395833333334 y=3.1512605042016832 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=38.22031249999999 width=2.92395833333334 y=3.361344537815128 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=42.39739583333333 width=2.92395833333334 y=3.361344537815128 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=46.57447916666666 width=2.92395833333334 y=5.147058823529408 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=50.7515625 width=2.92395833333334 y=4.936974789915963 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=54.92864583333333 width=2.92395833333334 y=4.936974789915963 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=59.105729166666656 width=2.92395833333334 y=4.621848739495796 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=63.2828125 width=2.92395833333334 y=3.5714285714285725 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=67.45989583333333 width=2.92395833333334 y=3.046218487394961 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=71.63697916666666 width=2.92395833333334 y=3.046218487394961 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=75.8140625 width=2.92395833333334 y=3.2563025210084056 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=79.99114583333333 width=2.92395833333334 y=3.2563025210084056 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=84.16822916666666 width=2.92395833333334 y=3.046218487394961 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=88.3453125 width=2.92395833333334 y=3.1512605042016832 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=92.52239583333333 width=2.92395833333334 y=3.1512605042016832 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=96.69947916666666 width=2.92395833333334 y=4.621848739495796 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=100.87656249999999 width=2.92395833333334 y=4.831932773109241 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=105.05364583333333 width=2.92395833333334 y=4.516806722689074 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=109.23072916666668 width=2.92395833333334 y=4.621848739495796 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=113.40781249999999 width=2.92395833333334 y=3.2563025210084056 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=117.58489583333333 width=2.92395833333334 y=3.1512605042016832 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=121.76197916666668 width=2.92395833333334 y=1.0504201680672232 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=125.93906249999999 width=2.92395833333334 y=1.36554621848739 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=130.11614583333332 width=2.92395833333334 y=0.8403361344537785 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=134.29322916666666 width=2.92395833333334 y=1.1554621848739455 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=138.47031249999998 width=2.92395833333334 y=2.5210084033613493 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=142.64739583333332 width=2.92395833333334 y=1.5756302521008347 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=146.82447916666666 width=2.92395833333334 y=3.046218487394961 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=151.00156249999998 width=2.92395833333334 y=3.46638655462185 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=155.17864583333332 width=2.92395833333334 y=3.9915966386554618 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=159.35572916666666 width=2.92395833333334 y=3.046218487394961 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=163.53281249999998 width=2.92395833333334 y=3.46638655462185 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=167.70989583333332 width=2.92395833333334 y=9.033613445378148 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=171.88697916666666 width=2.92395833333334 y=3.046218487394961 height=3.361344537815128 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=176.06406249999998 width=2.92395833333334 y=7.9831932773109235 height=26.995798319327733 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=180.24114583333332 width=2.92395833333334 y=1.680672268907557 height=29.201680672268914 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=184.41822916666666 width=2.92395833333334 y=6.827731092436978 height=40.12605042016806 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=188.59531249999998 width=2.92395833333334 y=3.46638655462185 height=42.226890756302524 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=192.77239583333332 width=2.92395833333334 y=3.5714285714285725 height=40.12605042016806 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=196.94947916666666 width=2.92395833333334 y=5.357142857142852 height=30.567226890756302 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=201.1265625 width=2.92395833333334 y=8.193277310924369 height=31.407563025210084 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=205.30364583333332 width=2.92395833333334 y=8.298319327731091 height=38.02521008403362 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=209.48072916666663 width=2.92395833333334 y=11.134453781512606 height=57.24789915966387 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=213.6578125 width=2.92395833333334 y=6.827731092436978 height=55.357142857142854 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=217.83489583333332 width=2.92395833333334 y=6.197478991596644 height=61.1344537815126 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=222.01197916666663 width=2.92395833333334 y=3.9915966386554618 height=70.58823529411764 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=226.1890625 width=2.92395833333334 y=3.9915966386554618 height=69.74789915966386 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=230.36614583333332 width=2.92395833333334 y=3.676470588235295 height=75.52521008403362 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=234.54322916666663 width=2.92395833333334 y=3.361344537815128 height=47.58403361344538 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=238.7203125 width=2.92395833333334 y=17.75210084033614 height=58.71848739495799 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=242.89739583333332 width=2.92395833333334 y=2.10084033613446 height=46.95378151260504 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=247.07447916666663 width=2.92395833333334 y=4.516806722689074 height=30.88235294117647 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=251.2515625 width=2.92395833333334 y=9.033613445378148 height=25.00000000000001 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=255.42864583333332 width=2.92395833333334 y=7.563025210084034 height=42.436974789915965 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=259.60572916666666 width=2.92395833333334 y=12.605042016806719 height=54.20168067226891 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=263.78281250000003 width=2.92395833333334 y=8.088235294117647 height=24.894957983193272 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=267.95989583333335 width=2.92395833333334 y=6.197478991596644 height=32.8781512605042 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=272.13697916666666 width=2.92395833333334 y=6.3025210084033665 height=23.634453781512605 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=276.31406250000003 width=2.92395833333334 y=6.197478991596644 height=35.50420168067227 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=280.49114583333335 width=2.92395833333334 y=5.882352941176477 height=36.659663865546214 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=284.66822916666666 width=2.92395833333334 y=3.676470588235295 height=23.73949579831933 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=288.84531250000003 width=2.92395833333334 y=3.46638655462185 height=34.66386554621849 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=293.02239583333335 width=2.92395833333334 y=3.5714285714285725 height=19.01260504201681 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=297.19947916666666 width=2.92395833333334 y=3.9915966386554618 height=5.987394957983199 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=301.37656250000003 width=2.92395833333334 y=5.672268907563019 height=5.462184873949587 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=305.55364583333335 width=2.92395833333334 y=5.777310924369742 height=7.668067226890756 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=309.73072916666666 width=2.92395833333334 y=7.878151260504201 height=4.621848739495795 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=313.90781250000003 width=2.92395833333334 y=7.457983193277312 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=318.08489583333335 width=2.92395833333334 y=5.9873949579831995 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=322.26197916666666 width=2.92395833333334 y=5.25210084033613 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=326.43906250000003 width=2.92395833333334 y=5.147058823529408 height=0.10504201680672232 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=330.61614583333335 width=2.92395833333334 y=4.936974789915963 height=2.941176470588238 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=334.79322916666666 width=2.92395833333334 y=5.042016806722685 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=338.97031250000003 width=2.92395833333334 y=5.147058823529408 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=343.14739583333335 width=2.92395833333334 y=4.0966386554621845 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=347.32447916666666 width=2.92395833333334 y=9.873949579831939 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=351.50156250000003 width=2.92395833333334 y=5.147058823529408 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=355.67864583333335 width=2.92395833333334 y=4.726890756302518 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=359.85572916666666 width=2.92395833333334 y=4.936974789915963 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=364.03281250000003 width=2.92395833333334 y=3.1512605042016832 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=368.20989583333335 width=2.92395833333334 y=5.882352941176477 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=372.38697916666666 width=2.92395833333334 y=10.609243697478995 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=376.56406250000003 width=2.92395833333334 y=7.563025210084034 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=380.74114583333335 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=384.91822916666666 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=389.09531250000003 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=393.27239583333335 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=397.44947916666666 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(101,101,105)></rect><rect x=0.6265624999999966 width=2.92395833333334 y=6.197478991596644 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=4.80364583333333 width=2.92395833333334 y=7.457983193277312 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=8.980729166666665 width=2.92395833333334 y=7.142857142857145 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=13.157812499999999 width=2.92395833333334 y=6.092436974789922 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=17.33489583333333 width=2.92395833333334 y=3.781512605042017 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=21.511979166666663 width=2.92395833333334 y=3.781512605042017 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=25.689062499999995 width=2.92395833333334 y=3.361344537815128 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=29.86614583333333 width=2.92395833333334 y=3.2563025210084056 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=34.04322916666666 width=2.92395833333334 y=3.1512605042016832 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=38.22031249999999 width=2.92395833333334 y=3.361344537815128 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=42.39739583333333 width=2.92395833333334 y=3.361344537815128 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=46.57447916666666 width=2.92395833333334 y=5.147058823529408 height=0.31512605042016695 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=50.7515625 width=2.92395833333334 y=4.936974789915963 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=54.92864583333333 width=2.92395833333334 y=4.936974789915963 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=59.105729166666656 width=2.92395833333334 y=4.621848739495796 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=63.2828125 width=2.92395833333334 y=3.5714285714285725 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=67.45989583333333 width=2.92395833333334 y=3.046218487394961 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=71.63697916666666 width=2.92395833333334 y=3.046218487394961 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=75.8140625 width=2.92395833333334 y=3.2563025210084056 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=79.99114583333333 width=2.92395833333334 y=3.2563025210084056 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=84.16822916666666 width=2.92395833333334 y=3.046218487394961 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=88.3453125 width=2.92395833333334 y=3.1512605042016832 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=92.52239583333333 width=2.92395833333334 y=3.1512605042016832 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=96.69947916666666 width=2.92395833333334 y=4.621848739495796 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=100.87656249999999 width=2.92395833333334 y=4.831932773109241 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=105.05364583333333 width=2.92395833333334 y=4.516806722689074 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=109.23072916666668 width=2.92395833333334 y=4.621848739495796 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=113.40781249999999 width=2.92395833333334 y=3.2563025210084056 height=0.6302521008403339 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=117.58489583333333 width=2.92395833333334 y=3.1512605042016832 height=1.9957983193277244 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=121.76197916666668 width=2.92395833333334 y=1.0504201680672232 height=6.197478991596644 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=125.93906249999999 width=2.92395833333334 y=1.36554621848739 height=6.197478991596644 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=130.11614583333332 width=2.92395833333334 y=0.8403361344537785 height=7.142857142857145 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=134.29322916666666 width=2.92395833333334 y=1.1554621848739455 height=8.508403361344536 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=138.47031249999998 width=2.92395833333334 y=2.5210084033613493 height=15.441176470588236 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=142.64739583333332 width=2.92395833333334 y=1.5756302521008347 height=18.69747899159664 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=146.82447916666666 width=2.92395833333334 y=3.046218487394961 height=19.537815126050422 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=151.00156249999998 width=2.92395833333334 y=3.46638655462185 height=16.701680672268907 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=155.17864583333332 width=2.92395833333334 y=3.9915966386554618 height=19.432773109243698 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=159.35572916666666 width=2.92395833333334 y=3.046218487394961 height=26.26050420168068 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=163.53281249999998 width=2.92395833333334 y=3.46638655462185 height=31.72268907563025 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=167.70989583333332 width=2.92395833333334 y=9.033613445378148 height=30.252100840336137 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=171.88697916666666 width=2.92395833333334 y=6.407563025210089 height=30.462184873949568 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=176.06406249999998 width=2.92395833333334 y=34.97899159663866 height=7.878151260504197 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=180.24114583333332 width=2.92395833333334 y=30.88235294117647 height=1.680672268907557 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=184.41822916666666 width=2.92395833333334 y=46.95378151260504 height=1.99579831932774 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=188.59531249999998 width=2.92395833333334 y=45.69327731092437 height=0.6302521008403374 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=192.77239583333332 width=2.92395833333334 y=43.69747899159663 height=0.3151260504201687 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=196.94947916666666 width=2.92395833333334 y=35.924369747899156 height=0.8403361344537785 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=201.1265625 width=2.92395833333334 y=39.60084033613445 height=0.42016806722688926 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=205.30364583333332 width=2.92395833333334 y=46.32352941176471 height=0.5252100840336098 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=209.48072916666663 width=2.92395833333334 y=68.38235294117648 height=0.735294117647058 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=213.6578125 width=2.92395833333334 y=62.18487394957983 height=0.42016806722688926 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=217.83489583333332 width=2.92395833333334 y=67.33193277310924 height=0.8403361344537927 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=222.01197916666663 width=2.92395833333334 y=74.5798319327731 height=0.42016806722689637 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=226.1890625 width=2.92395833333334 y=73.73949579831933 height=0.6302521008403374 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=230.36614583333332 width=2.92395833333334 y=79.2016806722689 height=0.42016806722688216 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=234.54322916666663 width=2.92395833333334 y=50.945378151260506 height=0.7352941176470509 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=238.7203125 width=2.92395833333334 y=76.47058823529413 height=0.42016806722688216 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=242.89739583333332 width=2.92395833333334 y=49.0546218487395 height=0.8403361344537785 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=247.07447916666663 width=2.92395833333334 y=35.39915966386555 height=0.21008403361344108 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=251.2515625 width=2.92395833333334 y=34.03361344537816 height=1.5756302521008294 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=255.42864583333332 width=2.92395833333334 y=50 height=0.3151260504201687 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=259.60572916666666 width=2.92395833333334 y=66.80672268907563 height=0.5252100840336169 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=263.78281250000003 width=2.92395833333334 y=32.98319327731092 height=0.4201680672269035 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=267.95989583333335 width=2.92395833333334 y=39.075630252100844 height=0.6302521008403303 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=272.13697916666666 width=2.92395833333334 y=29.936974789915972 height=0.6302521008403339 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=276.31406250000003 width=2.92395833333334 y=41.701680672268914 height=0.3151260504201616 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=280.49114583333335 width=2.92395833333334 y=42.54201680672269 height=0.7352941176470509 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=284.66822916666666 width=2.92395833333334 y=27.415966386554622 height=0.7352941176470544 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=288.84531250000003 width=2.92395833333334 y=38.13025210084034 height=0.3151260504201687 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=293.02239583333335 width=2.92395833333334 y=22.58403361344538 height=0.6302521008403339 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=297.19947916666666 width=2.92395833333334 y=9.97899159663866 height=0.5252100840336116 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=301.37656250000003 width=2.92395833333334 y=11.134453781512606 height=0.6302521008403339 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=305.55364583333335 width=2.92395833333334 y=13.445378151260497 height=0.6302521008403481 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=309.73072916666666 width=2.92395833333334 y=12.499999999999996 height=0.31512605042016695 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=313.90781250000003 width=2.92395833333334 y=7.457983193277312 height=0.8403361344537794 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=318.08489583333335 width=2.92395833333334 y=5.9873949579831995 height=0.7352941176470562 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=322.26197916666666 width=2.92395833333334 y=5.25210084033613 height=0.6302521008403472 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=326.43906250000003 width=2.92395833333334 y=5.25210084033613 height=1.4705882352941257 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=330.61614583333335 width=2.92395833333334 y=7.878151260504201 height=0.5252100840336125 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=334.79322916666666 width=2.92395833333334 y=5.042016806722685 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=338.97031250000003 width=2.92395833333334 y=5.147058823529408 height=0 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=343.14739583333335 width=2.92395833333334 y=4.0966386554621845 height=0.31512605042016695 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=347.32447916666666 width=2.92395833333334 y=9.873949579831939 height=0 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=351.50156250000003 width=2.92395833333334 y=5.147058823529408 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=355.67864583333335 width=2.92395833333334 y=4.726890756302518 height=0.31512605042016695 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=359.85572916666666 width=2.92395833333334 y=4.936974789915963 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=364.03281250000003 width=2.92395833333334 y=3.1512605042016832 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=368.20989583333335 width=2.92395833333334 y=5.882352941176477 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=372.38697916666666 width=2.92395833333334 y=10.609243697478995 height=0.10504201680672232 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=376.56406250000003 width=2.92395833333334 y=7.563025210084034 height=0.21008403361344463 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=380.74114583333335 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=384.91822916666666 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=389.09531250000003 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=393.27239583333335 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(122,207,64)></rect><rect x=397.44947916666666 width=2.92395833333334 y=0 height=0 style=opacity:1;fill:rgb(122,207,64)></rect>
User avatar
balala
Rainmeter Sage
Posts: 16349
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Convert <svg path> from html and display in shape meter

Post by balala »

emp00 wrote: June 17th, 2024, 9:07 pm My last remaining problem:
After the X coordinate, unfortunately the html does not continue with Y but with Width! How can I exchange the order of the remaining string sections so that I get the correct Rainmeter syntax? If I understand the documentation correctly, I think this might require RegExpSubstitute - but I'm not sure, so far my regex experience has not dealt with "changing the order" in a string chain. Hopefully, it can be done? A small hint is highly welcome, will try to dig into it. My motivation is close to infinity with this project, it's actually fun and thanks to the usual suspects in this forum, well, I have come THIS far!
Doesn't matter the order of those parameters. I'd extract the needed parameters (X, Y, Width and Height) one by one with proper WebParser measures and would use them in the needed order. You don't have to get them all by a single measure, just to have to use substitution to get them in right order.
If you don't know how to do this, les us know please, for further help.
User avatar
Yincognito
Rainmeter Sage
Posts: 7534
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Convert <svg path> from html and display in shape meter

Post by Yincognito »

I think you're overcomplicating things, based on the form of the Substitute for the Path option earlier. A Substitute should be adapted to the input string you're currently working with, it's not feasible to always use the same form when another one would be more suited.

In this case, just use the entire <rect ...></rect> part as the pattern of a sole Substitute part (i.e. without trying to substitute only pieces of it), then do your thing through correspondingly using the suited order for the values that you capture, e.g. \1 \3 \2 \4 \5 \6, where the captures, from \1 to \6, are the X, W, Y, H, Fill Color and StrokeWidth values. Obviously, you can easily insert the needed parts between those values in the replacement, as per the Rectangle Shape syntax.

The 1st tricky thing here is another one: numbering the Shape options. Regex can't count by itself and there's no numbering of <rect>-s that you can use from the input string, so this is the actual challenge. There are some creative (or hacking, whatever you want to call them) ways to deal with that, but I'll skip them for now, since...

The 2nd tricky thing here is that Rainmeter doesn't handle well a ton of Shapes, while it handles a longer Shape option slightly better, so you might consider using a number of continuous filled Paths here as well, through additions or subtractions of \N values (where the "rectangles" in the path are "linked" with "line wide" parts between one of their "corners").

Yet another simpler approach would be, since you already have the saved HTML, to "convert" it to a "just the graph(s)" file, which you could then display with the WebView plugin as a local webpage. A few little bits can then be added to simulate skin behavior on drag, right click or left click, if you want (I already shared such techniques in the WebView plugin thread).

It's up to you to decide how to better approach this, given the above performance considerations, so once you make up your mind on that, we can see what can be done about it. Who knows, maybe the number of Shapes isn't yet large enough to choke Rainmeter and seriously increase its CPU usage (UpdateDivider=-1 might alleviate that to a degree), so in that case we might look for a way to number the Shape options, e.g. Shape, Shape2, Shape3 and so on.

EDIT: balala's approach can work too, albeit you'd need a LOT of WebParsers to handle the 4 coordinates plus the fill color and stroke width of an already large number of Rectangles (I'm not even sure using both the StringIndex and StringIndex2 options would be enough, given their maximum value of 99). That being said, this could be one way of dealing with the numbering of Shapes... :???:
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
emp00
Posts: 112
Joined: October 7th, 2022, 8:08 pm

Re: Convert <svg path> from html and display in shape meter

Post by emp00 »

Got it Yincognito and balala - appreciate your feedback!

I have just spent another 3 hours and completely reworked my approach, in short: no more Shape meters. Found a good solution with excellent performance as well, and it's actually none of your proposed ones. Will report here in the coming days when I have more time.

For now IT WORKS - damnit :-)

... and it involved quite a bit of "hardcore" regex which I figured out all by myself, @Yincognito. I'm getting more and more used to regex'ing, and I'm liking it as well. Would never have gotten this far without the support on this forum. Stay tuned for my "solution", will share it here.