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:]( "Confused")
![Image]()
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.
Code:
<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>Statistics: Posted by emp00 — June 8th, 2024, 10:40 am — Replies 5 — Views 162