Animate A dock or app drawer

[pegasus19x]

I have to understand you couldn't and you still need assistance to add them?

i managed to add only one card after long time (A day) ,because i had difficulty to understand how to adjust the X and Y options properly:
i don't understand what does (r) after the numeric value like (X=120r) means ,and why when i modify the X and Y options of something every icon or text after it changes it's position.


i need assistance in adjusting the searchbar position and to know how to make the same type of animation to another skin but with some differences. if you may help me with animating the new skin and/or if it doesn't bother you, it would be awesome and i can then send you the code and discus it with you.

Change the Text option of the [MeterOpenCloseString] meter, adding the desired symbol. This in case the String meter is alright and you want to add a string character. But if you want an image, that's another case, the above string meter has to be replaced by an Image meter. Please let me know if this is the case, to help you, supposing you don't know how to do it by yourself.

I changed the background color (fill color) to be transparet ,but eventually i stacked the google assistant logo to hide it.

There are more possibilities, but I think the easiest way is to modify the X and Y options of the [MeterOpenClose] meter (take care this meter is positioned relatively to the previous one, so change the numeric value, without removing the r tag). But if you do this, you have to modify the X and Y options of the [cardHolder] meter as well (leave unchanged the X=0r and Y=0r options of the [MeterOpenCloseString] meter), decreasing them by the same value with which you increased the X and Y values of the [MeterOpenClose] meter (if this is not clear enough, here is an example: if you add 10 to the value of the X option of the [MeterOpenClose] meter - getting X=690r instead of the existing X=680r, leave the X=0r and Y=0r on the [MeterOpenCloseString] meter and replace the options of the [cardHolder] meter with X=-748r, instead of the existing X=-738r). This way the following meters will remain on the same place they were previously, otherwise they are moving.

woaa THANK YOU . i really needed to know that. i will try that now. thank you

No, just take care to position all of them relatively to the previous meters, to get them moving when the animation is running. Please come back if you don't succeed.

i didn't succeed ,but after trying i got the hang of it. i'll add more cards it will take much more time but it's great experience

No, you didn't. The purpose of this forum is exactly to get answers to your questions related to Rainmeter. So, don't worry, just feel free to ask, whenever you have questions...

thank you balala

[balala]

i don't understand what does (r) after the numeric value like (X=120r) means

It indicates that the meter is positioned relatively to the previous one. For instance the meter which has the X=120r option, is at 120 pixels at right of the previous meter of the code.

and why when i modify the X and Y options of something every icon or text after it changes it's position.

Because as described above, this is the essence of relative positioning. If all meters of a code are positioned so, if you move any of them, all following meters are moving accordingly.
Supposing you have the following three meters:

Code: Select all

[Meter1]
...
X=100r
...

[Meter2]
...
X=10r
...

[Meter3]
...
X=50r
...

and you want to move [Meter2] 10 pixels to right. You have to add 10 to its X option, getting X=20r. but this moves not only [Meter2], but all meters placed after it and positioned relatively, so in this case it moves [Meter3] as well. To get [Meter3] unmoved, you have to extract the same value from its X option as which you've added to the X of [Meter2]. Accordingly you have this:

Code: Select all

[Meter1]
...
X=100r
...

[Meter2]
...
X=20r
...

[Meter3]
...
X=40r
...

In such a case, only [Meter2] has been moved, [Meter3] is on the same place as previously. But if you don't modify the X option of [Meter3], you get it moved as well with 10 pixels to right.
I admit it's not extremely simple, but if you keep working, you'll get used how these options are working. After all, it’s not that hard.

i need assistance in adjusting the searchbar position and to know how to make the same type of animation to another skin but with some differences. if you may help me with animating the new skin and/or if it doesn't bother you, it would be awesome and i can then send you the code and discus it with you.

No, it definitely doesn't bother at all. Post the code, please.

I changed the background color (fill color) to be transparet ,but eventually i stacked the google assistant logo to hide it.

Which Fill Color have you changed? There are more shape meters, which one are we talking about?
What you could try is to make the color not completely transparent, but add a transparency of 1, from 255. For instance if you want to get [PlaceHolder2] transparent, don't set its Fill Color to Fill Color 236,239,241,0, but to Fill Color 236,239,241,1 (Shape=Rectangle 5,5,800,400,7 | Fill Color 236,239,241,1 | StrokeWidth 0 | Stroke Color 45,45,45). For the naked eyes, these seem the same way transparent, but a transparency of 1 makes it not transparent from th epoint of view of Rainmeter.

I changed the background color (fill color) to be transparet ,but eventually i stacked the google assistant logo to hide it.



woaa THANK YOU . i really needed to know that. i will try that now. thank you



i didn't succeed ,but after trying i got the hang of it. i'll add more cards it will take much more time but it's great experience


thank you balala

[pegasus19x]

It indicates that the meter is positioned relatively to the previous one. For instance the meter which has the X=120r option, is at 120 pixels at right of the previous meter of the code.

Because as described above, this is the essence of relative positioning. If all meters of a code are positioned so, if you move any of them, all following meters are moving accordingly.
Supposing you have the following three meters:

Code: Select all

[Meter1]
...
X=100r
...

[Meter2]
...
X=10r
...

[Meter3]
...
X=50r
...

and you want to move [Meter2] 10 pixels to right. You have to add 10 to its X option, getting X=20r. but this moves not only [Meter2], but all meters placed after it and positioned relatively, so in this case it moves [Meter3] as well. To get [Meter3] unmoved, you have to extract the same value from its X option as which you've added to the X of [Meter2]. Accordingly you have this:

Code: Select all

[Meter1]
...
X=100r
...

[Meter2]
...
X=20r
...

[Meter3]
...
X=40r
...

In such a case, only [Meter2] has been moved, [Meter3] is on the same place as previously. But if you don't modify the X option of [Meter3], you get it moved as well with 10 pixels to right.
I admit it's not extremely simple, but if you keep working, you'll get used how these options are working. After all, it’s not that hard.

that explains alot. now i can add new cards in much shorter time than before.

No, it definitely doesn't bother at all. Post the code, please.

that's awesome. i will finish the new skin ,and i'll send you the code ASAP.

Which Fill Color have you changed? There are more shape meters, which one are we talking about?
What you could try is to make the color not completely transparent, but add a transparency of 1, from 255. For instance if you want to get [PlaceHolder2] transparent, don't set its Fill Color to Fill Color 236,239,241,0, but to Fill Color 236,239,241,1 (Shape=Rectangle 5,5,800,400,7 | Fill Color 236,239,241,1 | StrokeWidth 0 | Stroke Color 45,45,45). For the naked eyes, these seem the same way transparent, but a transparency of 1 makes it not transparent from th epoint of view of Rainmeter.

no i didn't make the placeholder transparent at all. i mean the actiontimer meterstring.
i will continue adding the rest of the cards when i finish my medical online exams.i'm almost done actually , i'll finish the exams on 2/7/2020. so for now that's the best i could get so far after polishing some dimensions and scale of the whole skin and objects.

Code: Select all

Hi i'm Abdelrahman (Pegasus)
This is the Google fuchsia OS skin theme.
My Email: abdelrahman10amr@gmail.com
This Theme is built from scratch took me Days to Make it.
Also Big Thanks to Balala (Rainmeter forums user_id=7491) for making the animations and helping me to make the theme come alive.
-----------------------------------------------------------------------------------------------------------
[Variables]
Y=320
Upd=[!UpdateMeasure "MeasureSlide"][!UpdateMeter *][!Redraw]

[MeasureSlide]
Measure=Plugin
Plugin=ActionTimer
Group=Sliders
ActionList1=Repeat Down,20,20
Down=[!SetVariable Y "(Clamp((#Y#+50),0,320))"]#Upd#
ActionList2=Repeat Up,20,40
Up=[!SetVariable Y "(Clamp((#Y#-50),0,850))"]#Upd#
IfCondition=(#Y#=0)
IfTrueAction=[!SetOption MeterOpenCloseString LeftMouseUpAction """[!CommandMeasure "MeasureSlide" "Execute 1"][!CommandMeasure "MeasureSlide" "Stop 2"]"""][!UpdateMeter "MeterOpenCloseString"]
IfFalseAction=[!SetOption MeterOpenCloseString LeftMouseUpAction """[!CommandMeasure "MeasureSlide" "Stop 1"][!CommandMeasure "MeasureSlide" "Execute 2"]"""][!UpdateMeter "MeterOpenCloseString"]
DynamicVariables=1

[PlaceHolder2]
Meter=Shape
Y=#Y#
Shape=Rectangle 5,5,800,800,7 | Fill Color 236,239,241| StrokeWidth 0 | Stroke Color 45, 45, 45
IfTrueAction=[!SetOption SomeMeter X "5"][!SetOption SomeMeter X "10"]
DynamicVariables=1

;[cardHolder4]
;Meter=Shape
;Shape=Rectangle 5,5,360,100,10 | Fill Color 255,255,255 | StrokeWidth 0 | Stroke Color 45, 45, 45
;LeftMouseUpAction=["LeftMouseUpAction=[!CommandMeasure "searchbar" "ExecuteBatch 1"]
;X=20
;Y=240

[SearchIcon]
Meter=Image
ImageName=#@#Images\search.png
X=745r
Y=30r
;X=745
;Y=30
W=35
H=28

[GoogleIcon]
Meter=Image
ImageName=#@#Images\Google.png
X=-715r
Y=0r
;X=30
;Y=30
W=30
H=30


[PlaceHolder]
Meter=Shape
X=-30r
Y=-30r
Shape=Rectangle 5,5,800,80,5 | Fill Color 255,255,255 | StrokeWidth 0 | Stroke Color 00, 00, 00
LeftMouseUpAction=[!CommandMeasure "searchbar" "ExecuteBatch 1"]

[Bargreating]
Meter=String
FontSize=14
FontFace=ROBOTO
Text=Ask for anything
FontColor=119,119,119
AntiAlias=10
X=80r
Y=30r
W=30
H=30

[MeterOpenClose]
Meter=Shape
X=680r
Y=15r
Shape=Ellipse 0,0,10 | Fill Color | StrokeWidth 2 | Stroke Color 
DynamicVariables=1

[MeterOpenCloseString]
Meter=STRING
X=0r
Y=0r
FontColor=255,255,255
FontSize=25
FontFace=Roboto
StringStyle=BOLD
StringAlign=CenterCenter
AntiAlias=1
Text=00
DynamicVariables=1
TransformationMatrix=(Cos(PI*(#Y#=0)));(-Sin(PI*(#Y#=0)));(Sin(PI*(#Y#=0)));(Cos(PI*(#Y#=0)));((([MeterOpenCloseString:X]+[MeterOpenCloseString:W]/2)-([MeterOpenCloseString:X]+[MeterOpenCloseString:W]/2)*Cos(PI)-([MeterOpenCloseString:Y]+[MeterOpenCloseString:H]/2)*Sin(PI))*(#Y#=0));((([MeterOpenCloseString:Y]+[MeterOpenCloseString:H]/2)+([MeterOpenCloseString:X]+[MeterOpenCloseString:W]/2)*Sin(PI)-([MeterOpenCloseString:Y]+[MeterOpenCloseString:H]/2)*Cos(PI))*(#Y#=0))

[cardHolder]
Meter=Shape
Shape=Rectangle 5,5,360,100,10 | Fill Color 255,255,255 | StrokeWidth 0 | Stroke Color 45, 45, 45
LeftMouseUpAction=["https://mail.google.com/mail/u/0/"]
X=-738r
Y=57r
;X=-731r
;Y=64r

[MainGmailicon]
Meter=Image
ImageName=#@#Images\gmail.png
X=5r
Y=5r
W=100
H=100
LeftMouseUpAction=[!CommandMeasure "searchbar" "ExecuteBatch 1"]

[CardInfo]
Meter=String
FontSize=10
Text=Gmail
FontFace=Noto Sans JP thin
FontColor=0,0,0
AntiAlias=1
X=105r
Y=13r
W=20
H=30

[CardDetails]
Meter=String
FontFace=Noto Sans JP
FontSize=15
Text=You received a new email
FontWeight=20
FontColor=0,0,0
AntiAlias=1
X=0r
Y=17r
W=20
H=30

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

[cardHolder2]
Meter=Shape
Shape=Rectangle 5,5,360,100,10 | Fill Color 255,255,255 | StrokeWidth 0 | Stroke Color 45, 45, 45
LeftMouseUpAction=["C:\Users\abdel\Desktop\Telegram Desktop"]
X=290r
Y=-35r

[MainTelegram]
Meter=Image
ImageName=#@#Images\telegram.png
X=-3r
Y=-4r
;X=417
;Y=106
W=118
H=118
LeftMouseUpAction=["C:\Users\abdel\Desktop\Telegram Desktop"]

[Cardinfo2]
Meter=String
FontSize=10
Text=Telegram
FontFace=Noto Sans JP thin
FontColor=0,0,0
AntiAlias=1
X=111r
;528
Y=22r
;128
W=20
H=30

[CardDetails2]
Meter=String
FontFace=Noto Sans JP
FontSize=15
Text=Check your channel
FontWeight=20
FontColor=0,0,0
AntiAlias=1
X=0r
Y=17r
W=20
H=30

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

[cardHolder3]
Meter=Shape
Shape=Rectangle 5,5,360,100,10 | Fill Color 255,255,255 | StrokeWidth 0 | Stroke Color 45, 45, 45
LeftMouseUpAction=["https://www.youtube.com/"]
X=-108r
Y=95r
;X=420
;Y=240

[MainYoutube]
Meter=Image
ImageName=#@#Images\youtube1.png
X=-5r
Y=-25r
W=120
H=158
LeftMouseUpAction=["https://www.youtube.com/"]

[Card3]
Meter=String
FontSize=10
Text=Youtube
FontFace=Noto Sans JP thin
FontColor=0,0,0
AntiAlias=10
X=113r
Y=43r
X=528
Y=258
W=20
H=30

[Card3details]
Meter=String
FontFace=Noto Sans JP
FontSize=15
Text=videos you may like
FontWeight=20
FontColor=0,0,0
AntiAlias=10>
X=0r
Y=17r
W=20
H=30

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

[CARDDISCORD]
Meter=Shape
Shape=Rectangle 5,5,360,100,10 | Fill Color 255,255,255 | StrokeWidth 0 | Stroke Color 45, 45, 45
LeftMouseUpAction=["C:\Users\abdel\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Discord Inc\Discord"]
X=-508r
Y=-35r
;X=20
;Y=240

[DISCORDICON]
Meter=Image
ImageName=#@#Images\discord.png
X=0r
Y=0r
W=110
H=110
LeftMouseUpAction=["C:\Users\abdel\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Discord Inc\Discord"]

[CardinfoDIS]
Meter=String
FontSize=10
Text=Discord
FontFace=Noto Sans JP light
FontColor=0,0,0
AntiAlias=10
X=110r
Y=18r
W=20
H=30

[CardDetailDIS]
Meter=String
FontFace=Noto Sans JP
FontSize=15
Text=Lets's make a Group-call
FontWeight=20
FontColor=0,0,0
AntiAlias=10
X=0r
Y=17r
W=20
H=30

[Asisstant]
Meter=Image
ImageName=#@#Images\search.png
X=613r
Y=-230r
W=33
H=28

[Google]
Meter=Image
ImageName=#@#Images\Google.png
X=-715r
Y=0r
;X=30
;Y=30
W=30
H=30
LeftMouseUpAction=[!CommandMeasure "searchbar" "ExecuteBatch 1"]

[Edgecarrd]
Meter=Shape
Shape=Rectangle 5,5,360,100,10 | Fill Color 255,255,255 | StrokeWidth 0 | Stroke Color 45, 45, 45
LeftMouseUpAction=  ["C:\Program Files (x86)\Microsoft\Edge\Application\msedge"]
X=-8r
Y=330r

[Esgeicon]
Meter=Image
ImageName=#@#Images\edge.png
X=-2r
Y=-4r
W=118
H=118
LeftMouseUpAction=["C:\Program Files (x86)\Microsoft\Edge\Application\msedge"]

[Edgecardinfo]
Meter=String
FontSize=10
Text=Edge
FontFace=Noto Sans JP THIN
FontColor=0,0,0
AntiAlias=10
X=113r
Y=20r
W=20
H=30

[Edgecarddetails]
Meter=String
FontFace= Noto Sans JP
FontSize=15
Text=Search for anything
FontWeight=20
FontColor=0,0,0
AntiAlias=10
X=0r
Y=20r
W=20
H=30

[searchbar]
Measure=Plugin
Plugin=InputText
FontFace= Noto Sans JP
FontSize=15
FontColor=0,0,0
AntiAlias=10
Command1=!Execute ["https://www.google.com/search?q=$UserInput$"] DefaultValue=""
FocusDismiss=1
X=80
Y=#Y#
W=600
H=30
UpdateDivider=-1
SolidColor=255,255,255 [code]



 :thumbup:
[/quote]

[balala]

that explains alot. now i can add new cards in much shorter time than before.

I'm glad. Feel free to come back if new questions are arasing.

that's awesome. i will finish the new skin ,and i'll send you the code ASAP.

Alright.

no i didn't make the placeholder transparent at all. i mean the actiontimer meterstring.

Which is the ActionTmer meterstring? [MeterOpenClose]?

i will continue adding the rest of the cards when i finish my medical online exams.i'm almost done actually , i'll finish the exams on 2/7/2020. so for now that's the best i could get so far after polishing some dimensions and scale of the whole skin and objects.

Wish you luck on those exams.