How can i get a white line around images and ability to move this skin

[xbowflex]

Hi, i'm new to Rainmeter skins, but i was able with some help to create this skin (code with images.txt file).

But i need 2 more things:

1) a white line around the images...

2) the ability to move the skin whatever i want in the screen.

I'd appreciate if someone can improve it.

Thanks for your help

[RicardoTM]

Please properly pack your skin so others can test it.

Also code, if provided, needs to be embedded using the code flag (the </> icon).

Like this

Code: Select all

[your code goes here]

Skins move around the screen just by dragging them with the mouse, unless you did something like making the skin occupy the whole width and height of you screen.

To answer your first question, you can add another image meter to act as your background.

Code: Select all

[BG]
Meter=Image
SolidColor=255,255,255
W=220
H=120

[Image1]
Meter=Image
SolidColor=255,0,0
X=10
Y=10
W=100
H=100

[Image2]
Meter=Image
SolidColor=0,255,0
X=R
Y=r
W=100
H=100

Your Background would have to be some pixels bigger than your images, and you'll have to move your images accordingly.

Also you can't move your skin because the X and Y cordinates you are using are wrong, X and Y should be 0 for the first image (which would be your background), then x=somevalue y=somevalue on the second image meter and finally X=R Y=r for the third image meter. R means relative, so it would be right next to it read X,Y on the docs.

You can check on the example code above, the [BG] meter doesn't have X nor Y options, that means both are 0. Then Image1 X=10 Y=10, which means it is moved 10 pixels to the right and 10 down. Then the final image position is relative to the first image.

Since the [BG] is 20 pixels bigger on both sides, the images will be perfectly centered on a frame 10 pixels wide on every side.

[jsmorley]

-- Edit: RicardoTM beat me to it...


I had to approximate your images, but something like this:

Code: Select all

[Rainmeter]
Author=ESQO
Update=1000

[Metadata]
Name=TideWave
Description=TideWave
License=ESQO AlgoBox
Version=1.0

[Variables]
; Caminhos das imagens
TideImage1="Images\tide_black.png"
TideImage2="Images\tide_blue.png"
TideImage3="Images\tide_red.png"

WaveImage1="Images\wave_black.png"
WaveImage2="Images\wave_blue.png"
WaveImage3="Images\wave_red.png"

; Contadores
TideCounter=0
WaveCounter=0

[TideCounter]
Measure=Calc
Formula=(TideCounter + 1) % 3
UpdateDivider=-1
IfCondition=TideCounter= 1
IfTrueAction=[!SetOption TideShape ImageName "#TideImage1#"][!UpdateMeter *][!Redraw]
IfCondition2=TideCounter= 2
IfTrueAction2=[!SetOption TideShape ImageName "#TideImage2#"][!UpdateMeter *][!Redraw]
IfCondition3=TideCounter= 0
IfTrueAction3=[!SetOption TideShape ImageName "#TideImage3#"][!UpdateMeter *][!Redraw]

[MeterOuterBorder]
Meter=Image
W=186
; 88 X 2 + 10
H=98
; 88 + 10
SolidColor=255,255,255,255

[TideShape]
Meter=Image
ImageName=#TideImage1#
X=5
Y=5
W=88
H=88
LeftMouseUpAction=[!UpdateMeasure TideCounter]

[WaveCounter]
Measure=Calc
Formula=(WaveCounter + 1) % 3
UpdateDivider=-1
IfCondition=WaveCounter= 1
IfTrueAction=[!SetOption WaveShape ImageName "#WaveImage1#"][!UpdateMeter *][!Redraw]
IfCondition2=WaveCounter= 2
IfTrueAction2=[!SetOption WaveShape ImageName "#WaveImage2#"][!UpdateMeter *][!Redraw]
IfCondition3=WaveCounter= 0
IfTrueAction3=[!SetOption WaveShape ImageName "#WaveImage3#"][!UpdateMeter *][!Redraw]

[WaveShape]
Meter=Image
ImageName=#WaveImage1#
X=88r
; Start 88 pixels from the "left edge" of the previous meter
Y=5
W=88
H=88
LeftMouseUpAction=[!UpdateMeasure WaveCounter]

1.jpg

tide_black.png

tide_blue.png

tide_red.png

wave_black.png

wave_blue.png

wave_red.png

So to explain:

1) Create an Image meter (or Shape meter) that you put "before" the other meters, so it will be "behind". Set the size as much larger than the height of the image(s) and the combined width of the two images. Add twice the size of the border you want to the W and H size of the background image, for the "border".

2) Move the squares down(Y) and to the right(X) the amount you want for the border.

3) Don't use X and Y, or W and H, to position the skin on the screen. Just drag it where you want it.

4) Don't use LeftMouseDownAction, but rather LeftMouseUpAction, so you can still drag the skin without triggering the event(s).

5) [!Redraw] without a preceding [!UpdateMeter *] does nothing. I suspect this is why you had Update=10, but see 6) below.

6) There is absolutely no need to set Update in the Rainmeter section to anything other than 1000. The [!UpdateMeter *] bang will ensure that the change happens instantly when you click on the shape(s).


7) I strongly suggest that you set your "folder options" to display file extensions. It will make it a lot easier to work on Rainmeter skins, and really there is just no excuse for leaving them off (in my opinion).

2.jpg

3.jpg

[xbowflex]

Thanks guys... you helped me a lot.

The skin is already fine for my personal need.