It is currently May 2nd, 2024, 2:51 am

make horizontal links vertical

Get help with creating, editing & fixing problems with skins
User avatar
balala
Rainmeter Sage
Posts: 16194
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: make horizontal links vertical

Post by balala »

mak_kawa wrote: August 13th, 2020, 8:26 pm but the original code works anyway. :-)
Yep, it does. I tried it out, so I'm absolutely positive it does. However it it better as you've rewrote it.
mak_kawa wrote: August 13th, 2020, 8:26 pm 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.
Just one small advice: when you're setting a new value to the BaseSizeX variable (with the !SetVariable bangs of the MouseOverAction and MouseLeaveAction options of the String meters), doesn't worth to update the whole skin. Updating the current meter is completely enough. That's why I suggest to replace the [!Update] bangs of the mentioned options with [!UpdateMeter "#CURRENTSECTION#"][!Redraw].
User avatar
Yincognito
Rainmeter Sage
Posts: 7185
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: make horizontal links vertical

Post by Yincognito »

balala wrote: August 13th, 2020, 3:41 pm 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.
I agree with you on the passive/active meters, I would have dynamically changed their options as well, but I slightly disagree on the X=(0*#Scale#)r and Y=(0*#Scale#)r. Maybe the author wanted some sort of "consistency" in how the skin was written, thus writing these options like that to resemble the other X and Y options in the skin, although they could obviously been written as 0r as well. Just for comparison, one could likewise say that writing them as 0r makes just as much sense (i.e. none), because in the end they could have been written simply as r - you see what I mean? :D Exactly the same logic. :confused:
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 balala

Again, you are right indeed. And... I feel a bit redundant for the BaseSizeN. So, I have modified it to use !SetOption as you first said.

DrRoboculous, modified code is as follows;

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
MouseOverSize=25
MouseLeaveSize=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=(#MouseLeaveSize#*#Scale#)
X=(140*#Scale#)
Y=(60*#Scale#)
Text="#Name1#"
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# FontSize (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link1#"]

[MeterLink2Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#MouseLeaveSize#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name2#"
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# FontSize (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link2#"]

[MeterLink3Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#MouseLeaveSize#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name3#"
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# FontSize (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link3#"]

[MeterLink4Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#MouseLeaveSize#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name4#"
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# FontSize (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link4#"]

[MeterLink5Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#MouseLeaveSize#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name5#"
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# FontSize (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link5#"]

[MeterLink6Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#MouseLeaveSize#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name6#"
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# FontSize (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link6#"]

[MeterLink7Button]
Meter=String
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#MouseLeaveSize#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
Text="#Name7#"
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# FontSize (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link7#"]
Ps.: In the case that section name includes spaces, #CURRENTSECTION# descriptions in the mouse actions have to be enveloped with ""; as "#CURRENTSECTION#".
Last edited by mak_kawa on August 13th, 2020, 9:24 pm, edited 1 time in total.
User avatar
Yincognito
Rainmeter Sage
Posts: 7185
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: make horizontal links vertical

Post by Yincognito »

mak_kawa wrote: August 13th, 2020, 9:04 pm Hi balala

Again, you are right indeed. And... I feel a bit redundant for the BaseSizeN. So, I have modified it to use !SetOption as you first said.

DrRoboculous, modified code is as follows;
It looks better and cleaner indeed, but poor DrRoboculous must be lost now in these restructured of restructured codes. :lol:
Just joking, of course. The good doctor is probably sleeping now and will take whatver version comes last when he wakes up. :D
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
DrRoboculous
Posts: 8
Joined: June 7th, 2020, 7:18 pm

Re: make horizontal links vertical

Post by DrRoboculous »

Wow; thanks so much for all that, everybody. I didn't expect that much response. :thumbup: So now, what if i wanted to make it look like this Image / https://imgur.com/QFmP49X how would one go about doing that? Is that much more difficult? Thanks again for all the help.

PS: and for some reason the last link (Deviantart) clips off part of the word on the left side when i hover over it or change that field to, say, anything more than 12 characters long it cuts off too.
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: make horizontal links vertical

Post by mak_kawa »

Hi DrRoboculous

Ah... it could be achieved by the TransformationMatrix option for the meter, but I am not sure how to do. I leave it to balala who is the "TransformationMatrix wizard"!! :-)

Or... if you don't stick to String meter, you can use ImageRotate option as ImageRotate=90. Of course, you have to convert the texts to images probably of PNG format with transparent background.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5407
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: make horizontal links vertical

Post by eclectic-tech »

DrRoboculous wrote: August 14th, 2020, 12:08 am Wow; thanks so much for all that, everybody. I didn't expect that much response. :thumbup: So now, what if i wanted to make it look like this Image / https://imgur.com/QFmP49X how would one go about doing that? Is that much more difficult? Thanks again for all the help.

PS: and for some reason the last link (Deviantart) clips off part of the word on the left side when i hover over it or change that field to, say, anything more than 12 characters long it cuts off too.
Try this modified mak-kawa's code. Added a meter style for the text 'buttons'. Added an ANGLED variable and added Angle=#Angle# to the [ButtonStyle]. Added SolidColor=0,0,0,1 to [ButtonStyle] to improve mouse detection.

By changing the HSpacing, VSpacing, and Angled variables, you can control the display style: horizontal, vertical, rotated(vertical)

** NOTE: that rotated text does not change the mouse active area, so clicks will only work on the very center of the rotated text
See more about rotating text in this post by jsmorley

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=1

; 0 for vertical | 150 for horizontal | 0 for rotated
HSpacing=0
; 50 for vertical | 0 for horizontal | 140 for rotated
VSpacing=140
; (Rad(90)) for rotated | (Rad(0)) for vertical or horizontal
Angled=(Rad(90))
; ** NOTE: that rotated text does not change the mouse active area, so clicks will only work on the very center of the rotated text

MouseOverSize=25
MouseLeaveSize=20
ScrollMouseIncrement=0.1

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

;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/

;-------------------------------------------------------------
[ButtonStyle]
StringAlign=Center
StringCase=Upper
FontFace=Futurist Fixed-width
FontColor=#TextColor#
FontSize=(#MouseLeaveSize#*#Scale#)
X=(#HSpacing#*#Scale#)r
Y=(#VSpacing#*#Scale#)r
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# FontSize (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# FontSize (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
Angle=#Angled#
SolidColor=0,0,0,1

;-------------------------------------------------------------
[MeterLink1Button]
Meter=String
MeterStyle=ButtonStyle
X=(140*#Scale#)
Y=(60*#Scale#)
Text="#Name1#"
LeftMouseUpAction=["#Link1#"]

[MeterLink2Button]
Meter=String
MeterStyle=ButtonStyle
Text="#Name2#"
LeftMouseUpAction=["#Link2#"]

[MeterLink3Button]
Meter=String
MeterStyle=ButtonStyle
Text="#Name3#"
LeftMouseUpAction=["#Link3#"]

[MeterLink4Button]
Meter=String
MeterStyle=ButtonStyle
Text="#Name4#"
LeftMouseUpAction=["#Link4#"]

[MeterLink5Button]
Meter=String
MeterStyle=ButtonStyle
Text="#Name5#"
LeftMouseUpAction=["#Link5#"]

[MeterLink6Button]
Meter=String
MeterStyle=ButtonStyle
Text="#Name6#"
LeftMouseUpAction=["#Link6#"]

[MeterLink7Button]
Meter=String
MeterStyle=ButtonStyle
Text="#Name7#"
LeftMouseUpAction=["#Link7#"]
Last edited by eclectic-tech on August 14th, 2020, 1:13 am, edited 1 time in total.
Reason: Added 'SolidColor=0,0,0,1' to [ButonStyle] for better mouse detection.
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: make horizontal links vertical

Post by mak_kawa »

Hi eclectic-tech

I have completely missed Angle= option in the String meter... shame.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5407
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: make horizontal links vertical

Post by eclectic-tech »

mak_kawa wrote: August 14th, 2020, 1:50 am Hi eclectic-tech

I have completely missed Angle= option in the String meter... shame.
Late to the party for me!

Don't worry about that, this method, while it is easy to rotate the displayed meters, has lots of undesirable side effects as described in the link to "Working with angle on string meters".

Besides the hassles to resize the meters to prevent clipping, positioning meters is a lot of "trial and error" and the mouse reaction is still lacking (IMO).

So as you suggested, Image meters may be a better way to go to provide reliable mouse actions and meter arrangement variety.
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: make horizontal links vertical

Post by mak_kawa »

Hi DrRoboculousand

Here is a quick example using image files (PNG). How about this? Each link is already rotated PNG file made by some graphic software. They are attached as a zip file.
Untitled.gif

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.50
VSpacing=15
MouseOverSize=25
MouseLeaveSize=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=Image
ImageName=#Name1#.png
X=0
Y=0
W=(#MouseLeaveSize#*#Scale#)
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# W (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# W (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link1#"]

[MeterLink2Button]
Meter=Image
ImageName=#Name2#.png
X=0
Y=#VSpacing#R
W=(#MouseLeaveSize#*#Scale#)
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# W (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# W (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link2#"]

[MeterLink3Button]
Meter=Image
ImageName=#Name3#.png
X=0
Y=#VSpacing#R
W=(#MouseLeaveSize#*#Scale#)
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# W (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# W (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link3#"]

[MeterLink4Button]
Meter=Image
ImageName=#Name4#.png
X=0
Y=#VSpacing#R
W=(#MouseLeaveSize#*#Scale#)
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# W (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# W (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link4#"]

[MeterLink5Button]
Meter=Image
ImageName=#Name5#.png
X=0
Y=#VSpacing#R
W=(#MouseLeaveSize#*#Scale#)
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# W (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# W (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link5#"]

[MeterLink6Button]
Meter=Image
ImageName=#Name6#.png
X=0
Y=#VSpacing#R
W=(#MouseLeaveSize#*#Scale#)
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# W (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# W (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link6#"]

[MeterLink7Button]
Meter=Image
ImageName=#Name7#.png
X=0
Y=#VSpacing#R
W=(#MouseLeaveSize#*#Scale#)
AntiAlias=1
MouseOverAction=[!SetOption #CURRENTSECTION# W (#MouseOverSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# W (#MouseLeaveSize#*#Scale#)][!UpdateMeter #CURRENTSECTION#][!Redraw]
LeftMouseUpAction=["#Link7#"]
Again, I am not sure whether the scale-change function works or not... and sorry if I am misunderstanding your aim.
You do not have the required permissions to view the files attached to this post.