It is currently September 21st, 2020, 3:15 am

Animate A dock or app drawer

Help with creating, editing & fixing problems with skins
pegasus19x
Posts: 14
Joined: June 21st, 2020, 10:31 pm

Re: Animate A dock or app drawer

Post by pegasus19x »

balala wrote: June 24th, 2020, 10:03 am No, it's still not good enough, because the consecutive meters should be positioned relatively. In such a case when you want to animate the whole skin you have to take care about only the first meter, the others being relatively positioned, will follow the first one.
So, I rewrote the code and added the appropriate ActionTimer plugin measure. I also added a button to the right side of the [PlaceHolder] meter (through the [MeterOpenClose] and [MeterOpenCloseString] meters), which is used to open and close the panel (to run the animation). Please give a try to the following code and let me know how does it work:

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
SkinWidth=805
SkinHeight=405

[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#+16),0,320))"]#Upd#
ActionList2=Repeat Up,20,40
Up=[!SetVariable Y "(Clamp((#Y#-16),0,320))"]#Upd#
IfCondition=(#Y#=0)
IfTrueAction=[!EnableMouseAction GoogleIcon "LeftMouseUpAction"][!EnableMouseAction PlaceHolder "LeftMouseUpAction"][!EnableMouseAction MainGmailicon "LeftMouseUpAction"][!SetOption MeterOpenClose LeftMouseUpAction """[!CommandMeasure "MeasureSlide" "Execute 1"][!CommandMeasure "MeasureSlide" "Stop 2"]"""][!UpdateMeter "MeterOpenClose"]
IfFalseAction=[!DisableMouseAction GoogleIcon "LeftMouseUpAction"][!DisableMouseAction PlaceHolder "LeftMouseUpAction"][!DisableMouseAction MainGmailicon "LeftMouseUpAction"][!SetOption MeterOpenClose LeftMouseUpAction """[!CommandMeasure "MeasureSlide" "Stop 1"][!CommandMeasure "MeasureSlide" "Execute 2"]"""][!UpdateMeter "MeterOpenClose"]
DynamicVariables=1

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

[PlaceHolder2]
Meter=Shape
Y=#Y#
Shape=Rectangle 5,5,800,400,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=[""]
;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
LeftMouseUpAction=[!CommandMeasure "CharcoalSearchMeasure" "ExecuteBatch 1"]

[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 "CharcoalSearchMeasure" "ExecuteBatch 1"]

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

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

[MeterOpenCloseString]
Meter=STRING
X=0r
Y=0r
FontColor=255,255,255
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CenterCenter
AntiAlias=1
Text=^
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 "CharcoalSearchMeasure" "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
Note a few things:
  • In your initial and the rewritten code as well were a lot of comments / information, which although should have been commented out, were not. I removed most of them and commented out the others. For instance I removed the following information, posted more times into the code:

    Code: Select all

    Hello, I am PEGASUS
    My Contact Information :
    Email: abdelrahman10amr@gmail.com
    Whatsapp: +201020466565
    These are not valid Rainmeter options and should be at least commented out.
  • Although not completely forbidden, it's not a good idea to use spaces into section names. That's why I renamed the [Card info] and [Card Details] to [CardInfo] and [CardDetails]. If you keep the spaces you have to take extremely care to include the name into quotes whenever are you using it. Renouncing to spaces, can easier a lot of things.
  • I don't have the needed images (search.png, Google.png and so on), so I couldn't try out the code with those, but I suppose there will be no problems. Please let me know if there are.
I'll try it now. thank you so so much. i can't express how thankfull i am
User avatar
balala
Rainmeter Sage
Posts: 11369
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Animate A dock or app drawer

Post by balala »

pegasus19x wrote: June 24th, 2020, 12:32 pm I'll try it now. thank you so so much. i can't express how thankfull i am
You don't have to be. Just try it out and let me know what you think about it.
pegasus19x
Posts: 14
Joined: June 21st, 2020, 10:31 pm

Re: Animate A dock or app drawer

Post by pegasus19x »

it's great . i think i will add the google and search icons no problems ,but why when i close the card it shows that trail of bars??. how to fix it?

also if i want to change the animation to expand further or to change the arrow location. how to do that?.

I tried to edit the code ,but i found it too complicated. i want to make the maincards starting point and the expanding point as these two screenshots.
You do not have the required permissions to view the files attached to this post.
pegasus19x
Posts: 14
Joined: June 21st, 2020, 10:31 pm

Re: Animate A dock or app drawer

Post by pegasus19x »

i fixed the trail of bars by removing this code. now i just want to know how to change the icon of the arrow that starts actiontimer , the position of the arrow ,and to make it expand the cards rather than collapsing them.

Code: Select all

[Rainmeter]
Update=100
DynamicWindowSize=1
SkinWidth=990
SkinHeight=405
[code]
User avatar
balala
Rainmeter Sage
Posts: 11369
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Animate A dock or app drawer

Post by balala »

pegasus19x wrote: June 24th, 2020, 1:30 pm i fixed the trail of bars by removing this code. now i just want to know how to change the icon of the arrow that starts actiontimer , the position of the arrow ,and to make it expand the cards rather than collapsing them.

Code: Select all

[Rainmeter]
Update=100
DynamicWindowSize=1
SkinWidth=990
SkinHeight=405
Have you removed the [Rainmeter] section? This is not a good idea. If you renounce to the SkinHeight option, the whole skin is visible all the time, which just moves up and down when you click the button.
Also why have you modified the Update value to 100 (supposing you didn't remove this option as well)? Doesn't worth, in most cases (including this one as well), the default Update=1000 is the best approach. If you're decreasing the Update value it means that instead of one update per second, you get one update per a tenth of second (100 milliseconds), which has no benefit in this case, but are increasing the CPU usage. I recommend you to go back to the default Update=1000.
What I think is causing the issue seen on last image, is the hardware acceleration. Recommend you to try this out: go back to the last code I posted and check if you have enabled the hardware acceleration in the Settings tab of Rainmeter Manage. I suppose you have it and if I'm right, try unchecking the appropriate checkbox (take care you have to completely restart Rainmeter in order to get hardware acceleration disabled) (alternatively a better approach is to update the video card driver of your computer, in which case you can leave the Hardware acceleration enabled).
pegasus19x
Posts: 14
Joined: June 21st, 2020, 10:31 pm

Re: Animate A dock or app drawer

Post by pegasus19x »

balala wrote: June 24th, 2020, 3:38 pm Have you removed the [Rainmeter] section? This is not a good idea. If you renounce to the SkinHeight option, the whole skin is visible all the time, which just moves up and down when you click the button.
Also why have you modified the Update value to 100 (supposing you didn't remove this option as well)? Doesn't worth, in most cases (including this one as well), the default Update=1000 is the best approach. If you're decreasing the Update value it means that instead of one update per second, you get one update per a tenth of second (100 milliseconds), which has no benefit in this case, but are increasing the CPU usage. I recommend you to go back to the default Update=1000.
What I think is causing the issue seen on last image, is the hardware acceleration. Recommend you to try this out: go back to the last code I posted and check if you have enabled the hardware acceleration in the Settings tab of Rainmeter Manage. I suppose you have it and if I'm right, try unchecking the appropriate checkbox (take care you have to completely restart Rainmeter in order to get hardware acceleration disabled) (alternatively a better approach is to update the video card driver of your computer, in which case you can leave the Hardware acceleration enabled).
sorry i didn't know about the update value
when using your default code with hardware acceleration off, the animation gets too buggy and slow.
also the original idea of the cards and animation is that, at default, the main card is expanded to show 4 app cards ,and by clicking the arrow to start the ActionTimer animation it expands further to show another 4 app cards to be in tottal showing 8 app cards then by clicking the arrow again it shrinks to only show 4 app cards.

by deleting the [Rainmeter] section i noticed that the skin is visible all the time and by adjusting position and increasing the main grey card height it's back to the original shape and almost perfect for me and identical to google fushsia os ui demo. first two images are of my rainmeter skin and the other 2 are the Google Fuchsia UI.
non expand real.png
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 11369
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Animate A dock or app drawer

Post by balala »

pegasus19x wrote: June 24th, 2020, 4:56 pm when using your default code with hardware acceleration off, the animation gets too buggy and slow.
also the original idea of the cards and animation is that, at default, the main card is expanded to show 4 app cards ,and by clicking the arrow to start the ActionTimer animation it expands further to show another 4 app cards to be in tottal showing 8 app cards then by clicking the arrow again it shrinks to only show 4 app cards.
Yes, but your original code had only four cards, not eight. And had no place for the other four. Or have I missed something?
pegasus19x wrote: June 24th, 2020, 4:56 pm by deleting the [Rainmeter] section i noticed that the skin is visible all the time and by adjusting position and increasing the main grey card height it's back to the original shape and almost perfect for me and identical to google fushsia os ui demo. first two images are of my rainmeter skin and the other 2 are the Google Fuchsia UI.non expand real.png
Yes but as i said if you completely remove the [Rainmeter] section you have visible the entire skin, with all of the four (eight) cards, all the time and they are just moving up and down when you click. I added the SkinHeight option exactly to get the cards which don't have to be visible when the skin is not sliding up, outside of the skin, by going below the position set by the set SkinHeight.

So finally the question is if it does work as you intended? Is there anything else I can do here?
pegasus19x
Posts: 14
Joined: June 21st, 2020, 10:31 pm

Re: Animate A dock or app drawer

Post by pegasus19x »

balala wrote: June 24th, 2020, 5:26 pm Yes, but your original code had only four cards, not eight. And had no place for the other four. Or have I missed something?

Yes but as i said if you completely remove the [Rainmeter] section you have visible the entire skin, with all of the four (eight) cards, all the time and they are just moving up and down when you click. I added the SkinHeight option exactly to get the cards which don't have to be visible when the skin is not sliding up, outside of the skin, by going below the position set by the set SkinHeight.

So finally the question is if it does work as you intended? Is there anything else I can do here?
yeah it had four cards not eight you're not missing anything. i thought i can add the new cards after making the animation.

i'm truly sorry for the inconvenience.

the answer for your question is can you tell me how to change the arrow icon and how to change it's position?
also if i'm going to add the new cards, is there anything i should do more than just adding them to the skin?

sorry again if i bothered you
User avatar
balala
Rainmeter Sage
Posts: 11369
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Animate A dock or app drawer

Post by balala »

pegasus19x wrote: June 24th, 2020, 5:39 pm i thought i can add the new cards after making the animation.

i'm truly sorry for the inconvenience.
I have to understand you couldn't and you still need assistance to add them?
pegasus19x wrote: June 24th, 2020, 5:39 pm the answer for your question is can you tell me how to change the arrow icon
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.
pegasus19x wrote: June 24th, 2020, 5:39 pm and how to change it's position?
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.
pegasus19x wrote: June 24th, 2020, 5:39 pm also if i'm going to add the new cards, is there anything i should do more than just adding them to the skin?
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.
pegasus19x wrote: June 24th, 2020, 5:39 pm sorry again if i bothered you
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...
pegasus19x
Posts: 14
Joined: June 21st, 2020, 10:31 pm

Re: Animate A dock or app drawer

Post by pegasus19x »

balala wrote: June 25th, 2020, 4:27 pm 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.