Resizing image inside circle

[Space_Crime]

Hi All,

I came across 2 separate widgets, one was a small image display from SPEED skin suite and the other was a Circle widget with clock time and date:-

Original source:-
https://www.deviantart.com/fallingtitan/art/Moto-Widget-Clock-temp-date-etc-1-715539432
https://www.deviantart.com/minhtrimatrix/art/Speed-165136605

I just want to use the image display (shuffle through pictures from a folder) inside the circle. I managed to edit the circle widget to show the image inside the circle, however, I need help having the image fully resize/crop inside the circle. The circle size if a perfect fit for a wallpaper I have.

See attached snapshot of my desktop.

Much appreciated.

Code: Select all

[Rainmeter]

Update=90000
refreshed ~ 0m:30s

[Variables]
@include=#@#Variables.ini

ImagePath=C:\Users\jayla\OneDrive\Pictures\Headshot
subF=1
fFilter=*.jpg;*.jpeg;*.png;*.bmp

[O]
Measure=Plugin
Plugin=Plugins\QuotePlugin.dll
PathName=#ImagePath#
FileFilter=#fFilter#
Subfolders=#subF#

[Pic]
MeasureName=O
Meter=IMAGE
X=65
Y=100
W=180
H=105

[BG]
Meter=IMAGE
X=0
Y=0
ImageName=bg.png

;================================================

[Background]
Meter=Shape
Shape=Ellipse (#Scale#*160), (#Scale#*160), (#Scale#*160) | StrokeWidth 0 | Fill Color #Color#, ((256*0.25)-1)
Shape2=Ellipse (#Scale#*160), (#Scale#*160), (#Scale#*152) | StrokeWidth 0

Shape3=Combine Shape | Exclude Shape2

Shape4=Ellipse (#Scale#*160), (#Scale#*160), (#Scale#*152) | StrokeWidth 0 | Fill Color 0, 0, 0, ((256*0.50)-1)

[RoundBar]
Meter=Roundline
MeasureName=Measure#RoundBarMeasure#
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineStart=(#Scale#*(160-8))
LineLength=(#Scale#*160)
LineColor=#Color#
Solid=1

X=(#Scale#*(320*0.5))
Y=(#Scale#*(320*0.5))

AntiAlias=1

;================================================

[eclectic-tech]

You didn't supply the variables.inc file or contents but we can supply the logical values for the missing scale, color.

You do not need the [BG] or [Background] meters. They are not needed to show images.

To show rectangular images inside a circle the simplest solution is to use a Container meter for the images; we will use the dimensions of the [Background] shape meter to create a Container meter. That will hide any portions of the image that are outside of the circle shape.
Note Container meters are not drawn, they act as limits on the assigned meters.

Start by adding the missing variables for scale and color.
I set the picture path to the "%UserProfile%\Pictures" folder; every system has that.
Then create a container meter [BackgroundContainer] using the ellipse shape with a radius of 160; that means our images should be resized to 320x320 pixels. The container will hide the image corners that are outside of the ellipse shape.
We change the dimensions of our [Pic] section to 320x320, add the container, and add PreserveAspectRatio=2 so the images are resized to best fit the new dimension.

Finally, the [RoundBar] section draws an edge circle around the image.

I added a LeftMouseUpAction=[!Refresh] to the [Rainmeter] section to show a new random image when the skin is clicked.

EDIT: I added the Scale multiplier to the [Pic] meter dimensions.

circle.png

Here is the modified code:

Code: Select all

[Rainmeter]
Update=90000
; refreshed ~ 0m:90s
LeftMouseUpAction=[!Refresh]


[Variables]
; @include=#@#Variables.ini
scale=1
color=247,247,247
ImagePath=%UserProfile%\Pictures\
subF=1
fFilter=*.jpg;*.jpeg;*.png;*.bmp


[O]
Measure=Plugin
Plugin=Plugins\QuotePlugin.dll
PathName=#ImagePath#
FileFilter=#fFilter#
Subfolders=#subF#


[BackgroundContainer]
Meter=Shape
Shape=Ellipse (#Scale#*160), (#Scale#*160), (#Scale#*160) | StrokeWidth 0


[Pic]
MeasureName=O
Meter=IMAGE
X=0
Y=0
W=(#Scale#*320)
H=(#Scale#*320)
PreserveAspectRatio=2
Container=BackgroundContainer

[RoundBar]
Meter=Roundline
; MeasureName=Measure#RoundBarMeasure#
StartAngle=(Rad(270))
RotationAngle=(Rad(360))
LineStart=(#Scale#*(160-8))
LineLength=(#Scale#*160)
LineColor=#Color#
Solid=1

X=(#Scale#*(320*0.5))
Y=(#Scale#*(320*0.5))

AntiAlias=1

;================================================

; [Background]
; Meter=Shape
; Shape=Ellipse (#Scale#*160), (#Scale#*160), (#Scale#*160) | StrokeWidth 0 | Fill Color #Color#, 1
; ; ((256*0.25)-1)
; Shape2=Ellipse (#Scale#*160), (#Scale#*160), (#Scale#*152) | StrokeWidth 0

; Shape3=Combine Shape | Exclude Shape2

; Shape4=Ellipse (#Scale#*160), (#Scale#*160), (#Scale#*152) | StrokeWidth 0 | Fill Color 0, 0, 0, 1
; ((256*0.50)-1)

;================================================

[Space_Crime]

Thank you eclectic-tech, wonderfully done!

My apologies, I should have mentioned I am new to this and attempted basic tinkering with code by combining the two widgets to get the desired result by removing unwanted items, so don't recall seeing any variable.ini file.

I do love the left mouse click option you added, once again much appreciated.

[eclectic-tech]

Thank you eclectic-tech, wonderfully done!

My apologies, I should have mentioned I am new to this and attempted basic tinkering with code by combining the two widgets to get the desired result by removing unwanted items, so don't recall seeing any variable.ini file.

I do love the left mouse click option you added, once again much appreciated.

Happy to help.

Don't worry about being new, we all started out the same way; changing existing skins to do what we wanted.
That's one of the best ways to learn how things work.