It is currently March 28th, 2024, 11:27 am

Thread for help with the Shape meter

Get help with creating, editing & fixing problems with skins
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Thread for help with the new Shape meter

Post by balala »

sl23 wrote: August 8th, 2019, 1:02 pm Good to know of alternatives
There always are alternatives. In some cases many.
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Thread for help with the new Shape meter

Post by xenium »

Hi,
It is possible to use Shape Meter to achieve this:
Picture2.png
Thanks
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

Sure. Pretty much anything you can draw with vector graphics can be done with a Shape meter.

You can do it purely in handwritten code, but that shape has a lot of bezier curves, and it would be a chore (and that's putting it mildly) to get it right... As you will see in a second, most of the curve measurements are at a granularity of 6 or even 7 decimal places. Yike...

So I imported that .png rastor graphics file into Inkscape and then "traced" it to get a vector representation. Then I deleted the imported bitmap and saved the resulting .svg file.

https://m.wikihow.com/Trace-an-Image-Using-Inkscape

Then I used theAzack9's VectorConverter to convert the .svg file into Rainmeter code for a Shape meter.

Code: Select all

[ConvertedShape]
Meter=Shape
X=0
Y=0
Shape = Path Path1 | fill color 0, 0, 0 | StrokeWidth 0.6542815
Path1 = 38.821234, 69.694048 | CurveTo 7.2946638, 58.857159, 27.741204, 68.706562, 15.731954, 66.751974 | CurveTo 7.0208238, 34.752498, 0.85752381, 52.434597, 2.0064438, 41.68047 | CurveTo 45.824624, 7.235185, 16.069204, 21.225531, 30.861214, 12.755914 | CurveTo 87.617964, 4.002958, 59.090614, 2.682188, 73.882144, -0.21864205 | CurveTo 111.65218, 31.034724, 99.839274, 7.58722, 110.0529, 18.181259 | CurveTo 97.844524, 63.642816, 113.53563, 43.312026, 108.65077, 56.930162 | CurveTo 72.664434, 70.180257, 90.447094, 68.625079, 81.418914, 70.090775 | CurveTo 38.821234, 69.694048, 61.390064, 70.565385, 50.071784, 70.614605 | ClosePath 1

1.jpg


Drawing.svg:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg3750"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
   sodipodi:docname="drawing.svg">
  <defs
     id="defs3744" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-28.571429"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1920"
     inkscape:window-height="1027"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata3747">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       style="fill:#000000;stroke-width:0.6542815"
       d="M 38.821234,69.694048 C 27.741204,68.706562 15.731954,66.751974 7.2946638,58.857159 0.85752381,52.434597 2.0064438,41.68047 7.0208238,34.752498 16.069204,21.225531 30.861214,12.755914 45.824624,7.235185 c 13.26599,-4.552997 28.05752,-7.45382705 41.79334,-3.232227 12.22131,3.584262 22.434936,14.178301 24.034216,27.031766 1.88345,12.277302 -3.00141,25.895438 -13.807656,32.608092 -7.39743,4.982263 -16.42561,6.447959 -25.18009,6.537441 -11.27437,0.385128 -22.59265,0.434348 -33.8432,-0.486209 z"
       id="path3724"
       inkscape:connector-curvature="0" />
  </g>
</svg>
I'm no expert on Inkscape, and to be honest I'm far, far from an expert in vector graphics in general, so play with it to see how best to size and tweak your drawing as you like. Getting a more complex .png image to trace properly is as much arcane dark art as it is science.
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Thread for help with the new Shape meter

Post by xenium »

jsmorley wrote: October 18th, 2019, 11:50 am Sure. Pretty much anything you can draw with vector graphics can be done with a Shape meter.
....
Thanks a lot for explaining the conversion procedure in detail. :bow: :rosegift:
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

xenium wrote: October 18th, 2019, 1:15 pm Thanks a lot for explaining the conversion procedure in detail. :bow: :rosegift:
Glad to help...

Once you have the Shape created by VectorConverter, you can then tweak it as you need in Rainmeter code.

Code: Select all

[ConvertedShape]
Meter=Shape
X=0
Y=0
Shape = Path Path1 | Fill Color 255,0,0,100 | StrokeWidth 2 | Stroke Color 255,255,255,255
Path1 = 38.821234, 69.694048 | CurveTo 7.2946638, 58.857159, 27.741204, 68.706562, 15.731954, 66.751974 | CurveTo 7.0208238, 34.752498, 0.85752381, 52.434597, 2.0064438, 41.68047 | CurveTo 45.824624, 7.235185, 16.069204, 21.225531, 30.861214, 12.755914 | CurveTo 87.617964, 4.002958, 59.090614, 2.682188, 73.882144, -0.21864205 | CurveTo 111.65218, 31.034724, 99.839274, 7.58722, 110.0529, 18.181259 | CurveTo 97.844524, 63.642816, 113.53563, 43.312026, 108.65077, 56.930162 | CurveTo 72.664434, 70.180257, 90.447094, 68.625079, 81.418914, 70.090775 | CurveTo 38.821234, 69.694048, 61.390064, 70.565385, 50.071784, 70.614605 | ClosePath 1

1.jpg
User avatar
xenium
Posts: 841
Joined: January 4th, 2018, 9:52 pm

Re: Thread for help with the new Shape meter

Post by xenium »

jsmorley wrote: October 18th, 2019, 1:31 pm Glad to help...

Once you have the Shape created by VectorConverter, you can then tweak it as you need in Rainmeter code.

Code: Select all

[ConvertedShape]
Meter=Shape
X=0
Y=0
Shape = Path Path1 | Fill Color 255,0,0,100 | StrokeWidth 2 | Stroke Color 255,255,255,255
Path1 = 38.821234, 69.694048 | CurveTo 7.2946638, 58.857159, 27.741204, 68.706562, 15.731954, 66.751974 | CurveTo 7.0208238, 34.752498, 0.85752381, 52.434597, 2.0064438, 41.68047 | CurveTo 45.824624, 7.235185, 16.069204, 21.225531, 30.861214, 12.755914 | CurveTo 87.617964, 4.002958, 59.090614, 2.682188, 73.882144, -0.21864205 | CurveTo 111.65218, 31.034724, 99.839274, 7.58722, 110.0529, 18.181259 | CurveTo 97.844524, 63.642816, 113.53563, 43.312026, 108.65077, 56.930162 | CurveTo 72.664434, 70.180257, 90.447094, 68.625079, 81.418914, 70.090775 | CurveTo 38.821234, 69.694048, 61.390064, 70.565385, 50.071784, 70.614605 | ClosePath 1


1.jpg
:Ok
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

Code: Select all

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

[Variables]

[ConvertedShape]
Meter=Shape
X=0
Y=0
Shape = Path Path1 | fill color 0, 0, 0 | StrokeWidth 0.13229166
Shape2 = Path Path2 | StrokeWidth 0
Shape3 = Combine Shape1 | XOR Shape2
Path1 = 25.557487, 51.049384 | CurveTo 15.834049, 47.746884, 22.439228, 50.745174, 18.580426, 49.434554 | CurveTo 4.788827, 24.27569, 8.707553, 43.367573, 4.781232, 35.024108 | CurveTo 17.585884, 5.7988778, 4.796427, 13.550556, 8.551947, 8.1281808 | CurveTo 37.794465, 4.0583348, 21.502254, 4.7890848, 23.917901, 4.5810278 | CurveTo 100.03769, 4.0725348, 43.554423, 3.8413728, 89.91372, 3.8519528 | CurveTo 121.86582, 5.8786918, 113.84338, 4.3733408, 117.57777, 4.6823418 | CurveTo 134.38692, 22.938907, 130.56652, 8.3061588, 133.98916, 12.969563 | CurveTo 130.31379, 40.831815, 134.65302, 29.608072, 133.16027, 36.165591 | CurveTo 113.4103, 51.051969, 126.87895, 46.462549, 120.22209, 50.487399 | CurveTo 106.29998, 51.056969, 111.47006, 51.212779, 108.21263, 51.214939 | CurveTo 95.24984, 47.461259, 103.23982, 50.803759, 98.69235, 49.324009 | CurveTo 87.42309, 41.533318, 92.41367, 45.926599, 90.19994, 44.249929 | CurveTo 79.33995, 30.812243, 83.73583, 37.926046, 81.34395, 34.753565 | CurveTo 75.96251, 19.128632, 77.30151, 26.80317, 76.46195, 23.898877 | CurveTo 74.61641, 14.858488, 75.66967, 16.33167, 75.51368, 15.836844 | CurveTo 71.84488, 13.078524, 73.88536, 14.061378, 72.91776, 13.439952 | CurveTo 69.34634, 12.839521, 71.11937, 12.834118, 70.76712, 12.800423 | CurveTo 66.70019, 13.361021, 67.76371, 12.883071, 67.64959, 12.905561 | CurveTo 63.5951, 16.581529, 64.98548, 14.183624, 63.97211, 15.234665 | CurveTo 63.2596, 18.970453, 63.49209, 16.949552, 63.34111, 18.024568 | CurveTo 59.88155, 30.884963, 62.87739, 23.405772, 61.8619, 26.987443 | CurveTo 48.642382, 44.370149, 57.42998, 35.709916, 53.13275, 40.865892 | CurveTo 38.758147, 49.709229, 45.701066, 46.665529, 42.15255, 48.582309 | CurveTo 32.897527, 51.045459, 36.269107, 50.535589, 34.841209, 50.861149 | CurveTo 25.557487, 51.049459, 31.289541, 51.197939, 27.101956, 51.200349 | ClosePath 1
Path2 = 63.64594, 12.88234 | CurveTo 70.66894, 10.850943, 65.53098, 11.273298, 67.88622, 10.592047 | CurveTo 75.5628, 12.876745, 72.57179, 11.027977, 74.09595, 11.658901 | CurveTo 76.37165, 13.480057, 75.96246, 13.208567, 76.32645, 13.480057 | CurveTo 76.67784, 12.893498, 76.41685, 13.480057, 76.55464, 13.216106 | CurveTo 77.40397, 11.537509, 76.80104, 12.570891, 77.1278, 11.960696 | CurveTo 85.15488, 6.5820188, 78.74804, 9.4779158, 80.87442, 8.1184278 | CurveTo 87.06209, 5.8621908, 86.17353, 6.2163908, 87.03177, 5.8924678 | CurveTo 69.53344, 5.8138008, 87.09239, 5.8319108, 79.20451, 5.8101408 | LineTo 51.949673, 5.8205008 | LineTo 53.53717, 6.3893828 | CurveTo 60.62366, 10.161621, 57.56393, 7.8323778, 59.13316, 8.6677008 | CurveTo 62.21116, 12.321941, 61.37768, 10.917379, 61.76944, 11.450497 | CurveTo 62.87164, 13.479493, 62.5337, 12.958266, 62.83091, 13.479164 | CurveTo 63.64594, 12.882374, 62.91234, 13.479824, 63.2608, 13.211118 | ClosePath 1

1.jpg
User avatar
Yincognito
Rainmeter Sage
Posts: 7017
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Thread for help with the new Shape meter

Post by Yincognito »

jsmorley wrote: October 18th, 2019, 11:50 amSo I imported that .png rastor graphics file into Inkscape and then "traced" it to get a vector representation. I deleted the imported bitmap and saved the resulting .svg file. [...] Then I used theAzack9's VectorConverter to convert the .svg file into Rainmeter code for a Shape meter.
jsmorley wrote: October 18th, 2019, 2:57 pmImage
Wow, I had no idea you could do such things in Rainmeter! Absolutely amazing! :thumbup:
User avatar
sl23
Posts: 1140
Joined: February 17th, 2011, 7:45 pm
Location: a Galaxy S7 far far away

Re: Thread for help with the new Shape meter

Post by sl23 »

This is something more from curiosity at this stage, but if it's possible, I'd want to change my existing Sidebar skin to use it.

Can a ShapeMeter adjust size dynamically the same way that the [Rainmeter] Background=2 does?
I don't think this will work as it's not taking into account what other meters do.

Perhaps this is more related to the new Container function?
It's just that I quite like the whole shape meter as a background. Rounded corners and show Stroke on hover stuff. Useful and subtle which I prefer. Can that be done with Containers? I'm a bit wary of Containers as it looks a bit too much for me!

Anyway, just a thought...
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Thread for help with the new Shape meter

Post by jsmorley »

sl23 wrote: October 27th, 2019, 10:02 pm This is something more from curiosity at this stage, but if it's possible, I'd want to change my existing Sidebar skin to use it.

Can a ShapeMeter adjust size dynamically the same way that the [Rainmeter] Background=2 does?
I don't think this will work as it's not taking into account what other meters do.

Perhaps this is more related to the new Container function?
It's just that I quite like the whole shape meter as a background. Rounded corners and show Stroke on hover stuff. Useful and subtle which I prefer. Can that be done with Containers? I'm a bit wary of Containers as it looks a bit too much for me!

Anyway, just a thought...
Not exactly as DynamicWindowSize does. That would depend on the Shape meter basing its size on itself, which is a circular reference that can only run amok and never stop growing.

But you can have a Shape meter act as a background dynamically, if you know what other meter(s) are 1) The widest possible in the skin, and 2) The one at the bottom of the skin.

Code: Select all

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

[Variables]

[MeterBackGround]
Meter=Shape
X=0
Y=0
DynamicVariables=1
Shape=Rectangle 0.5,0.5,([WidestMeter:X]+[WidestMeter:W]+10),([LastMeter:Y]+[LastMeter:H]+10),10 | StrokeWidth 1 | Stroke Color 255,255,255,255 | Fill Color 47,47,47,255

[WidestMeter]
Meter=String
X=10
Y=10
FontSize=11
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=Some really wide text in a string meter

[AnotherMeter]
Meter=String
X=10
Y=10R
FontSize=11
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=Some other meter

[LastMeter]
Meter=String
X=10
Y=10R
FontSize=11
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=Some text at the bottom of the skin

1.jpg


There is no way to ask "what is the largest X+W value in the skin?" or "what is the largest Y+H value in the skin?", and even if you could, using that in a Shape meter would just once again cause a circular reference that would run amok.

I don't see that Container adds anything of any value to this.
Post Reply