I'll try it now. thank you so so much. i can't express how thankfull i ambalala 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:Note a few things: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
- 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:
These are not valid Rainmeter options and should be at least commented out.Code: Select all
Hello, I am PEGASUS My Contact Information : Email: abdelrahman10amr@gmail.com Whatsapp: +201020466565
- 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.
It is currently March 29th, 2024, 8:20 am
Animate A dock or app drawer
-
- Posts: 14
- Joined: June 21st, 2020, 10:31 pm
Re: Animate A dock or app drawer
-
- Rainmeter Sage
- Posts: 16110
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Animate A dock or app drawer
You don't have to be. Just try it out and let me know what you think about it.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
-
- Posts: 14
- Joined: June 21st, 2020, 10:31 pm
Re: Animate A dock or app drawer
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.
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.
-
- Posts: 14
- Joined: June 21st, 2020, 10:31 pm
Re: Animate A dock or app drawer
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]
-
- Rainmeter Sage
- Posts: 16110
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Animate A dock or app drawer
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.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
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).
-
- Posts: 14
- Joined: June 21st, 2020, 10:31 pm
Re: Animate A dock or app drawer
sorry i didn't know about the update valuebalala 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).
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.
You do not have the required permissions to view the files attached to this post.
-
- Rainmeter Sage
- Posts: 16110
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Animate A dock or app drawer
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 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 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.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
So finally the question is if it does work as you intended? Is there anything else I can do here?
-
- Posts: 14
- Joined: June 21st, 2020, 10:31 pm
Re: Animate A dock or app drawer
yeah it had four cards not eight you're not missing anything. i thought i can add the new cards after making the animation.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?
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
-
- Rainmeter Sage
- Posts: 16110
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Animate A dock or app drawer
I have to understand you couldn't and you still need assistance to add them?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.
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 the answer for your question is can you tell me how to change the arrow icon
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.
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 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, 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...
-
- Posts: 14
- Joined: June 21st, 2020, 10:31 pm
Re: Animate A dock or app drawer
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.