It is currently August 17th, 2019, 11:48 am

Slide show pic sizes

Help with creating, editing & fixing problems with skins
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3476
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Slide show pic sizes

eclectic-tech » July 16th, 2019, 2:23 pm

CyborgTJB wrote:
July 16th, 2019, 4:42 am
I'll try with your "imageCrop" at evening.
And about time... You got it. I'm waiting.
But plz, explain what you do...
I will probably have some time later today and I will try to explain as best I can why I use any particular method. :D

Another useful tool would be the ImageSize plugin by JSMorley. That could be used to determine what type of cropping needs to be done based on the original size of the image.

In my opinion, trying to make multiple sized images fit into a preset frame is like trying to fit a square peg into a round hole; some will work but most will not fit very well. It is always going to be a trade off to display usable content when the source is constantly changing.

That said, hopefully with some "trial and error" you(we) can get closer to the result you hope for... :)
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3476
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Slide show pic sizes

eclectic-tech » July 18th, 2019, 7:38 pm

EDIT: I modified the formula to vertically center resized images, added that info to the display, and updated the package and code
===
Okay... I put together a skin that utilizes JSMorley's ImageSize Plugin, a Container meter, and PreserveAspectRatio=2 to demonstrate creating a picture gallery with varying image sizes that hopefully solves most of your issues. I tested with images ranging from 400x400 to 2550x1440 and the resized images display was acceptable for me.

As I said before, if your image ratios vary significantly, there is no best way to use Rainmeter to display them; you should resize the images to similar ratios outside of Rainmeter.

It will display a gallery with a defined picture width (#PicWidth# [default is 400 pixels]) and shows the dimensions of your resized images so you can select the optimal picture height variable (#PicHeight#). PreserveAspectRatio=2 will resize the original image to 400 pixels wide and a varying height of pixels based on the original image ratio. You should set the #PicHeight# variable smaller than the smallest value you see for the resized images in the skin. If it is set too high, the image will not fill the entire gallery container meter.

The container meter dimensions are set to "crop" the resized image to your optimal height. A calc measure will determine the difference between the resized image height and the #PicHeight# and shift the displayed image vertically in relation to the container meter; this will center the resized image in the skin.

I added some comments in the code similar to what is here to help you understand what each section is trying to do; this is a good habit especially if you come back a year later and want to edit something!

I created a package that contains the skin and the plugin. It will install "GalleryContainer" in your skin folder. You will have to edit the skin to point the PathToImages variable to your pictures folder. Refresh and try it.

If you have any questions feel free to post them here.
gallery2.gif
Skin code (requires you have ImageSize.dll plugin installed) Download the package below to get the skin and plugin.

Code: Select all

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

ContextTitle=Toggle Information
ContextAction=[!WriteKeyValue Variables HideInfo (1-#HideInfo#)][!SetVariable HideInfo (1-#HideInfo#)][!UpdateMeter MeterDimensions][!Redraw]

[Metadata]
Name=Gallery Container
Author=Eclectic Tech
Information=Resize, crop, and shift images for better display of gallery skins using images of varying sizes. Set the "PicWidth" to your desired size. Set "PicHeight" based on the smallest value of your images when resized to your "PicWidth" using "PreserveAspectRatio=2"; uses JSMorley's ImageSize plugin to allow you to test and determine the optimal "PicHeight" based on your resized image's height.
License=Creative Commons Attribution-Non-Commercial-Share Alike 4.0
Version=July 18, 2019a

[Variables]
; Set this to your image folder
PathToImages=%USERPROFILE%\Pictures\Walls

; Seconds between image changes
PicRate=10

; Set to your desired gallery width
PicWidth=400

; Set based on the smallest value returned by the [ImageHeight] measure :: (Usually half your PicWidth is close , but will be determined by the ratio's of the images you use)
PicHeight=180

; Set to 1 to hide string meter
HideInfo=0

[MeasureQuote]
Measure=Plugin
Plugin=QuotePlugin
PathName=#PathToImages#
OnUpdateAction=[!EnableMeasureGroup Sizes][!UpdateMeasureGroup Sizes]
UpdateDivider=#PicRate#

[MeasureWidth]
Group=Sizes
Measure=Plugin
Plugin=ImageSize
ImageName=[MeasureQuote]
Dimension=Width
DynamicVariables=1
Disabled=1
UpdateDivider=-1

[MeasureHeight]
Group=Sizes
Measure=Plugin
Plugin=ImageSize
ImageName=[MeasureQuote]
Dimension=Height
DynamicVariables=1
Disabled=1
UpdateDivider=-1

; Calculate an amount of vertical shift (used to better center the resized image vertically) based on the image height divided by the same ratio used for width on the resized image when using PreserveAspectRation=2
[MeasureYPosition]
Measure=Calc
Formula=Round((#PicHeight#-(MeasureHeight/(MeasureWidth/#PicWidth#)))*0.5)

; A "Container" meter used to "Crop" the resized image to #PicHeight# (If resized images height is less than #PicHeight# they will not fill the image window; so #PicHeight# should be set to the samllest height of your resized images. 
[MeterContainer]
Meter=Shape
Shape=Rectangle 0,0,#PicWidth#,#PicHeight#,10

; Image display. Y position is half the resized image height minus your #PicHeight# (Used to center images vertically)
[MeterImage]
Meter=Image
MeasureName=MeasureQuote
Y=([MeasureYPosition])
W=#PicWidth#
PreserveAspectRatio=2
DynamicVariables=1
Container=MeterContainer

; Information meter : This can be hidden once you determine your optimal #PicHeight# 
[MeterDimensions]
Meter=String
Y=3R
MeasureName=MeasureWidth
MeasureName2=MeasureHeight
FontSize=13
FontColor=255,255,255,255
SolidColor=47,47,47,255
W=(#PicWidth#-30)
Padding=15,5,15,5
AntiAlias=1
Text="Resized Image: [MeterImage:W] X [MeterImage:H]  |  V-Shift: [MeasureYPosition]#CRLF#Original Image Size: %1 X %2"
Hidden=#HideInfo#
DynamicVariables=1
You do not have the required permissions to view the files attached to this post.
User avatar
CyborgTJB
Posts: 56
Joined: August 22nd, 2016, 4:20 am
Location: 26°26'29.14" N, 90°2'2.96" E

Re: Slide show pic sizes

CyborgTJB » July 20th, 2019, 1:01 pm

"eclectic-tech"

:o ...
You are amazing...
Thanks for everything, especially for explanation. I really do enjoyed every word of it. It's really great to know that which code is doing what...
Thanks a lot.
CyborG, I love and like to collect and join. :sly:
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3476
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Slide show pic sizes

eclectic-tech » July 20th, 2019, 3:24 pm

You are welcome, happy to help :welcome: