It is currently March 28th, 2024, 8:22 pm

Image cut after being moved to left

Get help with creating, editing & fixing problems with skins
Sagadeath
Posts: 4
Joined: March 17th, 2018, 4:44 am

Image cut after being moved to left

Post by Sagadeath »

EDIT: Solved

Hello guys
First of all I want to say that I have had fun during this week messing around with rainmeter. I almost have my ideal setup but as the title say, I have problems with my images. The problems are:
1.- Images being cut
2.- I can't align correctly the image's height with the text. As you can see in the img I share the icons are in the top-left
This was the only "partial" solution that I found
PD: The icons are not from honeycomb, I made those with the idea to use honeycomb but I changed my mind and I'll replace them and sorry for my bad english

Code: Select all

[Rainmeter]
Update=10000
BackgroundMode=1
;MiddleMouseUpAction=!Execute ["#CURRENTPATH#Apps.txt"]
RightMouseUpAction=[]

[Metadata]
Name=Launcher
Version=1.0

[Variables]
FontColorPassive=80,80,80,200
FontColorActive=f2f2f2
FontFace=GeosansLight
FontSize=35
#StringEffect=SHADOW
FontEffectColor=3a3a3a
@include="Apps.txt"

;........................................................................
;Meters
;........................................................................


; ===========App1===========



[AppButton1Passive]
Meter=STRING
SolidColor=0,0,0,1
Text=#App1#
FontFace=#FontFace#
FontSize=#FontSize#
FontColor=#FontColorPassive#
StringAlign=LEFT
StringEffect=#StringEffect#
FontEffectColor=#FontEffectColor#
AntiAlias=1
MouseOverAction=[!ShowMeter AppButton1Active][!HideMeter AppButton1Passive][!Update]

[AppButton1Active]
Meter=STRING
x=r
y=r
SolidColor=0,0,0,1
Text=#App1#
FontFace=#FontFace#
FontSize=#FontSize#
FontColor=221,127,51
StringAlign=LEFT
StringEffect=#StringEffect#
FontEffectColor=#FontEffectColor#
AntiAlias=1
Hidden=1
LeftMouseUpAction=[!ToggleConfig "Launcher_Games" "launcher.ini"][!HideFade "Launcher_Main" "launcher.ini"][!Update]
MouseLeaveAction=[!ShowMeter AppButton1Passive][!HideMeter AppButton1Active][!Update]

[gamesIco]
Meter=Image
ImageName=#@#Images\games.png
H=40
x=([AppButton1Active:x]-10)
y=[AppButton1Active:y]


; ===========App2===========

[AppButton2Passive]
Meter=STRING
x=0
y=60r
SolidColor=0,0,0,1
Text=#App2#
FontFace=#FontFace#
FontSize=#FontSize#
FontColor=#FontColorPassive#
StringAlign=LEFT
StringEffect=#StringEffect#
FontEffectColor=#FontEffectColor#
AntiAlias=1
MouseOverAction=!Execute [!ShowMeter AppButton2Active][!HideMeter AppButton2Passive][!Update]

[AppButton2Active]
Meter=STRING
x=r
y=r
SolidColor=0,0,0,1
Text=#App2#
FontFace=#FontFace#
FontSize=#FontSize#
FontColor=57,149,12
StringAlign=LEFT
StringEffect=#StringEffect#
FontEffectColor=#FontEffectColor#
AntiAlias=1
Hidden=1
LeftMouseUpAction=!Execute ["#App2Path#"][!ShowMeter AppButton2Passive][!HideMeter AppButton2Active][!Update]
MouseLeaveAction=!Execute [!ShowMeter AppButton2Passive][!HideMeter AppButton2Active][!Update]

[productivityIco]
Meter=Image
ImageName=#@#Images\productivity.png
H=40
x=([AppButton2Active:x]-10)
y=[AppButton2Active:y]


; ===========App3===========

[AppButton3Passive]
Meter=STRING
x=0
y=60r
SolidColor=0,0,0,1
Text=#App3#
FontFace=#FontFace#
FontSize=#FontSize#
FontColor=#FontColorPassive#
StringAlign=LEFT
StringEffect=#StringEffect#
FontEffectColor=#FontEffectColor#
AntiAlias=1
MouseOverAction=!Execute [!ShowMeter AppButton3Active][!HideMeter AppButton3Passive][!Update]

[AppButton3Active]
Meter=STRING
x=r
y=r
SolidColor=0,0,0,1
Text=#App3#
FontFace=#FontFace#
FontSize=#FontSize#
FontColor=32,162,151
StringAlign=LEFT
StringEffect=#StringEffect#
FontEffectColor=#FontEffectColor#
AntiAlias=1
Hidden=1
LeftMouseUpAction=!Execute ["#App3Path#"][!ShowMeter AppButton3Passive][!HideMeter AppButton3Active][!Update]
MouseLeaveAction=!Execute [!ShowMeter AppButton3Passive][!HideMeter AppButton3Active][!Update]

[filesIco]
Meter=Image
ImageName=#@#Images\files.png
H=40
x=([AppButton3Active:x]-10)
y=[AppButton3Active:y]
You do not have the required permissions to view the files attached to this post.
Last edited by Sagadeath on March 17th, 2018, 4:58 pm, edited 1 time in total.
Sagadeath
Posts: 4
Joined: March 17th, 2018, 4:44 am

Re: Image cut after being moved to left

Post by Sagadeath »

dvo wrote:post the skin and we could look at it .... :17good not only the code otherwise we have to relink and create images ect. :17oops
I'm sorry.
I uploaded a .rar with 2 skins. Launcher_Main is the first and when you click in Games, Launcher_Games should activate
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Image cut after being moved to left

Post by balala »

Sagadeath your skins/package have a few problems:
  • The @Resources folder must be in the root config. In this case this means that you have to move it from the Launcher\Launcher_Main folder, to the root config (Launcher). If the @Resources folder isn't in the root config, the images aren't loaded.
  • The StringEffect variable in the Launcher_Main\launcher.ini skin has an extra character: [color=#FF0000]#[/color]StringEffect=SHADOW. Remove it.
  • To avoid cutting off the icons, move to right the [AppButton1Passive], [AppButton2Passive] and [AppButton3Passive] meters. Add for example a X=10 option to each of these meters.
  • To vertically align the image and the strings, replace the Y option of the [gamesIco], [productivityIco] and [filesIco] meters, as it follows:

    Code: Select all

    [gamesIco]
    ...
    y=([AppButton1Active:y]+(([AppButton1Active:H]+[AppButton1Passive:H]-[#CURRENTSECTION#:H])/2))
    DynamicVariables=1
    
    [productivityIco]
    ...
    y=([AppButton2Active:y]+(([AppButton2Active:H]+[AppButton2Passive:H]-[#CURRENTSECTION#:H])/2))
    DynamicVariables=1
    
    [filesIco]
    ...
    y=([AppButton3Active:y]+(([AppButton3Active:H]+[AppButton3Passive:H]-[#CURRENTSECTION#:H])/2))
    DynamicVariables=1
    Because these meters are using section variables, the DynamicVariables=1 option is required. Add it, as well.
    Probably replacing the above Y options will also require to reduce the Y value of the [AppButton2Passive] and [AppButton3Passive] meters.
Sagadeath
Posts: 4
Joined: March 17th, 2018, 4:44 am

Re: Image cut after being moved to left

Post by Sagadeath »

balala wrote:
  • The @Resources folder must be in the root config. In this case this means that you have to move it from the Launcher\Launcher_Main folder, to the root config (Launcher). If the @Resources folder isn't in the root config, the images aren't loaded.
That was my fault. Both files Launcher_Main and Launcher_Games are skins on their own and each one have a @Resources file. I put them together in Launcher to upload the file.
balala wrote:
  • The StringEffect variable in the Launcher_Main\launcher.ini skin has an extra character: [color=#FF0000]#[/color]StringEffect=SHADOW. Remove it.
  • To avoid cutting off the icons, move to right the [AppButton1Passive], [AppButton2Passive] and [AppButton3Passive] meters. Add for example a X=10 option to each of these meters.
  • To vertically align the image and the strings, replace the Y option of the [gamesIco], [productivityIco] and [filesIco] meters
All suggestions work perfectly.

Just being curious but how did you calculated that formula? Or that's like the standard to align? Sorry for the newbie question.
Thanks for your time :)
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Image cut after being moved to left

Post by balala »

Sagadeath wrote:Both files Launcher_Main and Launcher_Games are skins on their own and each one have a @Resources file. I put them together in Launcher to upload the file.
I supposed. However related to the posted package, what I said had to be said.
Sagadeath wrote:Just being curious but how did you calculated that formula? Or that's like the standard to align? Sorry for the newbie question.
Don't worry, no newbie question at all.
It's not so complicated as it seems at a first look. The basic idea is that for example in case of the formula used to the Y option of the [gamesIco] meter, both meters ([gamesIco] itself and the appropriate [AppButton1Passive] or [AppButton1Active]) have certain height. I extracted the height of the [gamesIco] meter (because the formula is placed into this meter, I used its height as [#CURRENTSECTION#:H], not as [gamesIco:H]), from the sum of heights of [AppButton1Active] and [AppButton1Passive] meters. I had to calculate the sum of these two height because just one of these two meters is visible at a time. The height of a hidden meter is set to zero, so the mentioned sum represents the height of the currently visible meter, whatever would be that one, at a time. Then I divided the previous difference to 2 and this way I got how lower the image meter should have to be placed relatively to the string meter. Finally I added the vertical position of the [AppButton1Active] meter ([AppButton1Active:Y]), to get the image alignment related to the appropriate string meter.
Due to the fact that all these calculations are using section variables, the DynamicVariables=1 option had to be added.
Sagadeath
Posts: 4
Joined: March 17th, 2018, 4:44 am

Re: Image cut after being moved to left

Post by Sagadeath »

Thanks for your time!
All my questions were solved... for now :)
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Image cut after being moved to left

Post by balala »

Sagadeath wrote:All my questions were solved... for now :)
Ok. If you have any other, feel free to come back with it.