It is currently May 17th, 2024, 5:26 am

make horizontal links vertical

Get help with creating, editing & fixing problems with skins
DrRoboculous
Posts: 8
Joined: June 7th, 2020, 7:18 pm

make horizontal links vertical

Post by DrRoboculous »

So, i want to turn the launcher (links) of a skin sideways basically. So instead of aligning horizontally across the top or bottom of the screen, the links align run down the side of the screen. Like if i took the whole thing and rotated it left (or right) 90°, but in the correct way so the links are still side-by-side and aren't all on top of each other.
Here's the link to the suite: https://www.deviantart.com/hiphopium/art/Stylistic-768748630
Here's the code for the Links skin part of this suite:

Code: Select all

Update=-1
Author=Connect-R
BackgroundMode=2
SolidColor=0,0,0,1
DynamicWindowSize=1
AccurateText=1
MouseScrollUpAction=[!SetVariable Scale "(#Scale#+#ScrollMouseIncrement#)"][!WriteKeyValue Variables Scale "(#Scale#+#ScrollMouseIncrement#)"][!Refresh] 
MouseScrollDownAction=[!SetVariable Scale "(#Scale#-#ScrollMouseIncrement# < 0.2 ? 0.2 : #Scale#-#ScrollMouseIncrement#)"][!WriteKeyValue Variables Scale "(#Scale#-#ScrollMouseIncrement# < 0.2 ? 0.2 : #Scale#-#ScrollMouseIncrement#)"][!Refresh]


[Variables]
@include=#@#Variables.inc
@include2=#@#Language\#Language#.inc
Scale=0.35

;-------------------------------------------------------------
;-------------------------------------------------------------

;HERE BELOW, YOU CAN CHANGE LINK NAMES AND PATHS.	

Name1=Google
Link1=chrome.exe

Name2=Facebook
Link2=https://facebook.com/

Name3=Twitter
Link3=https://twitter.com/

Name4=YouTube
Link4=https://www.youtube.com/

Name5=Behance
Link5=https://www.behance.net/

Name6=Gmail
Link6=https://mail.google.com/mail/

Name7=Deviantart
Link7=https://www.deviantart.com/popular-24-hours/

;-------------------------------------------------------------
;-------------------------------------------------------------

[MeterLink1ButtonPassive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(20*#Scale#)
X=(140*#Scale#)
Y=(60*#Scale#)
Text="#Name1#"
AntiAlias=1
MouseOverAction=[!ShowMeter MeterLink1ButtonActive][!HideMeter MeterLink1ButtonPassive][!Update]

[MeterLink1ButtonActive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(25*#Scale#)
X=(0*#Scale#)r
Y=(0*#Scale#)r
Text="#Name1#"
AntiAlias=1
Hidden=1
MouseLeaveAction=[!ShowMeter MeterLink1ButtonPassive][!HideMeter MeterLink1ButtonActive][!Update]
LeftMouseUpAction=["#Link1#"]

[MeterLink2ButtonPassive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(20*#Scale#)
X=(220*#Scale#)r
Y=(0*#Scale#)r
Text="#Name2#"
AntiAlias=1
MouseOverAction=[!ShowMeter MeterLink2ButtonActive][!HideMeter MeterLink2ButtonPassive][!Update]

[MeterLink2ButtonActive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(25*#Scale#)
X=(0*#Scale#)r
Y=(0*#Scale#)r
Text="#Name2#"
AntiAlias=1
Hidden=1
MouseLeaveAction=[!ShowMeter MeterLink2ButtonPassive][!HideMeter MeterLink2ButtonActive][!Update]
LeftMouseUpAction=["#Link2#"]

[MeterLink3ButtonPassive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(20*#Scale#)
X=(220*#Scale#)r
Y=(0*#Scale#)r
Text="#Name3#"
AntiAlias=1
MouseOverAction=[!ShowMeter MeterLink3ButtonActive][!HideMeter MeterLink3ButtonPassive][!Update]

[MeterLink3ButtonActive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(25*#Scale#)
X=(0*#Scale#)r
Y=(0*#Scale#)r
Text="#Name3#"
AntiAlias=1
Hidden=1
MouseLeaveAction=[!ShowMeter MeterLink3ButtonPassive][!HideMeter MeterLink3ButtonActive][!Update]
LeftMouseUpAction=["#Link3#"]

[MeterLink4ButtonPassive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(20*#Scale#)
X=(220*#Scale#)r
Y=(0*#Scale#)r
Text="#Name4#"
AntiAlias=1
MouseOverAction=[!ShowMeter MeterLink4ButtonActive][!HideMeter MeterLink4ButtonPassive][!Update]

[MeterLink4ButtonActive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(25*#Scale#)
X=(0*#Scale#)r
Y=(0*#Scale#)r
Text="#Name4#"
AntiAlias=1
Hidden=1
MouseLeaveAction=[!ShowMeter MeterLink4ButtonPassive][!HideMeter MeterLink4ButtonActive][!Update]
LeftMouseUpAction=["#Link4#"]

[MeterLink5ButtonPassive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(20*#Scale#)
X=(220*#Scale#)r
Y=(0*#Scale#)r
Text="#Name5#"
AntiAlias=1
MouseOverAction=[!ShowMeter MeterLink5ButtonActive][!HideMeter MeterLink5ButtonPassive][!Update]

[MeterLink5ButtonActive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(25*#Scale#)
X=(0*#Scale#)r
Y=(0*#Scale#)r
Text="#Name5#"
AntiAlias=1
Hidden=1
MouseLeaveAction=[!ShowMeter MeterLink5ButtonPassive][!HideMeter MeterLink5ButtonActive][!Update]
LeftMouseUpAction=["#Link5#"]

[MeterLink6ButtonPassive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(20*#Scale#)
X=(210*#Scale#)r
Y=(0*#Scale#)r
Text="#Name6#"
AntiAlias=1
MouseOverAction=[!ShowMeter MeterLink6ButtonActive][!HideMeter MeterLink6ButtonPassive][!Update]

[MeterLink6ButtonActive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(25*#Scale#)
X=(0*#Scale#)r
Y=(0*#Scale#)r
Text="#Name6#"
AntiAlias=1
Hidden=1
MouseLeaveAction=[!ShowMeter MeterLink6ButtonPassive][!HideMeter MeterLink6ButtonActive][!Update]
LeftMouseUpAction=["#Link6#"]

[MeterLink7ButtonPassive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(20*#Scale#)
X=(230*#Scale#)r
Y=(0*#Scale#)r
Text="#Name7#"
AntiAlias=1
MouseOverAction=[!ShowMeter MeterLink7ButtonActive][!HideMeter MeterLink7ButtonPassive][!Update]

[MeterLink7ButtonActive]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(25*#Scale#)
X=(0*#Scale#)r
Y=(0*#Scale#)r
Text="#Name7#"
AntiAlias=1
Hidden=1
MouseLeaveAction=[!ShowMeter MeterLink7ButtonPassive][!HideMeter MeterLink7ButtonActive][!Update]
LeftMouseUpAction=["#Link7#"]
Can someone tell me where i should insert which code or what i need to do here? I'm sure it's something simple but i can't figure it out yet. Thanks in advance.
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: make horizontal links vertical

Post by mak_kawa »

Hi DrRoboculous

I think it's not so easy, because it is a matter of skin design... but anyway;

First, insert a VSpacing=50 line to the [Variables] section.
Second, replace X= and Y= lines in every "[*Passive]" meter after [MeterLink2ButtonPassive] with;

Code: Select all

X=(0*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Don't replace the line in [MeterLink1ButtonPassive], because it is a start point. And, value of VSpacing represents the vertical spacing of the links, so you can modify it as you want.

Ah... I am not sure whether this way works or not after changing the skin scale with mouse scroll wheel, maybe not, sorry.
User avatar
Yincognito
Rainmeter Sage
Posts: 7258
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: make horizontal links vertical

Post by Yincognito »

mak_kawa wrote: August 13th, 2020, 7:32 amAh... I am not sure whether this way works or not after changing the skin scale with mouse scroll wheel, maybe not, sorry.
It does. And nicely as well. :thumbup:
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: make horizontal links vertical

Post by mak_kawa »

Hi DrRoboculousand and Yincognito

Now some trick has come to my mind...

Add a HSpacing=0 line in [Variables] section.
And, replace a X= line in every "[*Passive]" meter after [MeterLink2ButtonPassive] with X=(#HSpacing#*#Scale#)r.
So what? When you set HSpacing=0 and VSpacing=50 (or some), links are horizontally arranged, and when VSpacing=0 and HSpacing=150 (or some), links are vertically arranged. Isn't this nice? :-)
Last edited by mak_kawa on August 13th, 2020, 11:28 am, edited 1 time in total.
User avatar
Yincognito
Rainmeter Sage
Posts: 7258
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: make horizontal links vertical

Post by Yincognito »

mak_kawa wrote: August 13th, 2020, 11:11 am Hi DrRoboculousand Yincognito

Now some trick has come to my mind...

Add a HSpacing=0 line in [Variables] section.
And, replace a X= line in every "[*Passive]" meter after [MeterLink2ButtonPassive] with X=(#HSpacing#*#Scale#)r.
So what? When you set HSpacing=0 and VSpacing=50 (or some), links are horizontally arranged, and when VSpacing=0 and HSpacing=150 (or some), links are vertically arranged. Isn't this nice? :-)
Oh yes it is. :great: See now why I always look to set things easily from the [Variables] section in my codes? One or two changes there and you changed the skin behavior completely. No need to edit a ton of measures / meters afterwards, if you built the skin like that from the start... ;-)
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
balala
Rainmeter Sage
Posts: 16225
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: make horizontal links vertical

Post by balala »

To be honest this skin is extremelly weird writte. There are more string meter pairs, the first of them named Passive, while the second ones named Active (for instance [MeterLink1ButtonPassive] and its pair, [MeterLink1ButtonActive]). From these meters, the Active meters are hidden, while the Passive are shown. When you're hovering the mouse over any of the Passive meters, it is hidden and the corresponding Active meter is shown. when you're leaving it, the opposite action takes place: the Active meter is hidden, while the Passive is shown. Obviously the two corresponding meters have the same Text, but a few other options are different (for instance their size).
Much more reliable in my opinion (and much simpler) would be to have one single string meter and change its options when the mouse is hovered over it, then change it back when the mouse leaves it.
Another interesting thing, which doesn't make too much sense: the X and Y options of the Active meters are set to X=(0*#Scale#)r and Y=(0*#Scale#)r. The much simpler X=0r and Y=0r are much more logical. Zero multiplied by anything is still zero, so (0*#Scale#) makes no sense.
User avatar
Mor3bane
Posts: 943
Joined: May 7th, 2016, 7:32 am

Re: make horizontal links vertical

Post by Mor3bane »

JRiver Media Player is by far the best media handler I have used or coded for - it has all of the options and the year works, unlike AIMP where the year does not work...

Worth exploring IMHO.
My DevArt Gallery

There are many ways to be different - there is only one way to be yourself - be amazing at it

The law of averages says what it means; even if you get everything right, you will get something wrong. Therefore; self managing error trapping initiates another set of averages - amongst the errors, some of them will not be errors, instead those instances will appear to be "luck". One cannot complain of the 'appearance' of 'infinite regress of causation', even if it does not have a predictable pattern, only that it requires luck to achieve.
User avatar
Mor3bane
Posts: 943
Joined: May 7th, 2016, 7:32 am

Re: make horizontal links vertical

Post by Mor3bane »

Mor3bane wrote: August 13th, 2020, 5:44 pm JRiver Media Player is by far the best media handler I have used or coded for - it has all of the options and the year works, unlike AIMP where the year does not work...

Worth exploring IMHO.
JRiver has versatile colour schemes that are fully customisable, huge array of playback options, and supports flac which is a lossless media file type.

Amongst these things, it is fast and light weight when running, the list goes on...
My DevArt Gallery

There are many ways to be different - there is only one way to be yourself - be amazing at it

The law of averages says what it means; even if you get everything right, you will get something wrong. Therefore; self managing error trapping initiates another set of averages - amongst the errors, some of them will not be errors, instead those instances will appear to be "luck". One cannot complain of the 'appearance' of 'infinite regress of causation', even if it does not have a predictable pattern, only that it requires luck to achieve.
User avatar
balala
Rainmeter Sage
Posts: 16225
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: make horizontal links vertical

Post by balala »

Mor3bane wrote: August 13th, 2020, 5:44 pm JRiver Media Player is by far the best media handler I have used or coded for
Might be. Its only disadvantage is it is not free, as many other softwares these days.
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: make horizontal links vertical

Post by mak_kawa »

Hi balala

You are absolutely right indeed... but the original code works anyway. :-)

DrRoboculous, I have modified/restructured your code according with balala's suggestion. Hope it would work as you intend. Set variables HSpacing and VSpacing as you like.

Code: Select all

[Rainmeter]
Update=-1
Author=Connect-R, modified by mak_kawa with suggestion from balala.
BackgroundMode=2
SolidColor=0,0,0,1
DynamicWindowSize=1
AccurateText=1
MouseScrollUpAction=[!SetVariable Scale "(#Scale#+#ScrollMouseIncrement#)"][!WriteKeyValue Variables Scale "(#Scale#+#ScrollMouseIncrement#)"][!Refresh] 
MouseScrollDownAction=[!SetVariable Scale "(#Scale#-#ScrollMouseIncrement# < 0.2 ? 0.2 : #Scale#-#ScrollMouseIncrement#)"][!WriteKeyValue Variables Scale "(#Scale#-#ScrollMouseIncrement# < 0.2 ? 0.2 : #Scale#-#ScrollMouseIncrement#)"][!Refresh]


[Variables]
@include=#@#Variables.inc
@include2=#@#Language\#Language#.inc
Scale=0.35
HSpacing=0
VSpacing=50
BaseSize1=20
BaseSize2=20
BaseSize3=20
BaseSize4=20
BaseSize5=20
BaseSize6=20
BaseSize7=20

;-------------------------------------------------------------
;-------------------------------------------------------------

;HERE BELOW, YOU CAN CHANGE LINK NAMES AND PATHS.	

Name1=Google
Link1=chrome.exe

Name2=Facebook
Link2=https://facebook.com/

Name3=Twitter
Link3=https://twitter.com/

Name4=YouTube
Link4=https://www.youtube.com/

Name5=Behance
Link5=https://www.behance.net/

Name6=Gmail
Link6=https://mail.google.com/mail/

Name7=Deviantart
Link7=https://www.deviantart.com/popular-24-hours/

;-------------------------------------------------------------
;-------------------------------------------------------------

[MeterLink1Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#BaseSize1#*#Scale#)
X=(140*#Scale#)
Y=(60*#Scale#)
Text="#Name1#"
AntiAlias=1
MouseOverAction=[!SetVariable BaseSize1 25][!Update]
MouseLeaveAction=[!SetVariable BaseSize1 20][!Update]
LeftMouseUpAction=["#Link1#"]
DynamicVariables=1

[MeterLink2Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#BaseSize2#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name2#"
AntiAlias=1
MouseOverAction=[!SetVariable BaseSize2 25][!Update]
MouseLeaveAction=[!SetVariable BaseSize2 20][!Update]
LeftMouseUpAction=["#Link2#"]
DynamicVariables=1

[MeterLink3Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#BaseSize3#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name3#"
AntiAlias=1
MouseOverAction=[!SetVariable BaseSize3 25][!Update]
MouseLeaveAction=[!SetVariable BaseSize3 20][!Update]
LeftMouseUpAction=["#Link3#"]
DynamicVariables=1

[MeterLink4Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#BaseSize4#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name4#"
AntiAlias=1
MouseOverAction=[!SetVariable BaseSize4 25][!Update]
MouseLeaveAction=[!SetVariable BaseSize4 20][!Update]
LeftMouseUpAction=["#Link4#"]
DynamicVariables=1

[MeterLink5Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#BaseSize5#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name5#"
AntiAlias=1
MouseOverAction=[!SetVariable BaseSize5 25][!Update]
MouseLeaveAction=[!SetVariable BaseSize5 20][!Update]
LeftMouseUpAction=["#Link5#"]
DynamicVariables=1

[MeterLink6Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#BaseSize6#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name6#"
AntiAlias=1
MouseOverAction=[!SetVariable BaseSize6 25][!Update]
MouseLeaveAction=[!SetVariable BaseSize6 20][!Update]
LeftMouseUpAction=["#Link6#"]
DynamicVariables=1

[MeterLink7Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#BaseSize7#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name7#"
AntiAlias=1
MouseOverAction=[!SetVariable BaseSize7 25][!Update]
MouseLeaveAction=[!SetVariable BaseSize7 20][!Update]
LeftMouseUpAction=["#Link7#"]
DynamicVariables=1