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. Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
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. Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
<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 — Today, 10:40 am — Replies 0 — Views 6