MinhThienDX / win10widgets

A fork from https://github.com/tjmarkham/win10widgets
MIT License
48 stars 11 forks source link

Feature Request: Slide performance monitors #25

Closed Devo7v closed 4 years ago

Devo7v commented 4 years ago

I've been messing around with this for a couple days trying to get this to work but can't seem to figure it out since there are so many nested ini's. What I'm trying to do, for example, is have the tiny-cpu monitor on the right side of the screen show just the graph, then when I hover over it, have it slide out to show the rest of the skin.

I've tried editing CPU-Tiny.ini, cpuTemplate.ini, and performanceTemplateX4.ini but can't seem to get it to work. I'm guessing I need to make modifications to all 3 but not sure how. Hopefully you consider this for a future release.

MinhThienDX commented 4 years ago

Can you try this: https://forum.rainmeter.net/viewtopic.php?t=11058 The idea have 2 parts:

  1. Tiny cpu monitor that will disappear when hover
  2. The rest of the skin will appear when hover

There will be some skin overlap with tiny cpu but if it works correctly then only 1 will display at a time. About slide out, there is more work to do: https://forum.rainmeter.net/viewtopic.php?t=23269 I don't know for sure if slide will work with hover, you have to conduct some experiments for that. Good luck and have fun.

Devo7v commented 4 years ago

This is helpful. What I'm trying to do is just show the portion of the CPU-Tiny.ini that displays the graph, then when either hovering over or clicking on it, it slides out to show the entire skin.

The first link seems to cause the skin to fade in and out, not really what I'm trying to do but useful for some other things I'm working on. The second link is exactly what I'm trying to do, but I can't figure out which ini to put the code in. CPU-Tiny.ini is made up of several parts and I don't know how to treat it as one large part that I can work with.

I'm fairly new to Rainmeter and have been banging my head against a wall to figure this out. I probably shouldn't have tried this with such a complicated skin. I really don't like asking people to do the work for me because I think it's rude and lazy, but I'm honestly at my wit's end and need help.

MinhThienDX commented 4 years ago

I really don't like asking people to do the work for me because I think it's rude and lazy, but I'm honestly at my wit's end and need help.

Asking is not rude, it's how you ask. I don't know how lazy you are but doing Rainmeter take time and effort so you probably aren't lazy.

Personally, I think hover to display information is a little inconvenient but maybe it make sense in this case. Fade or slide is just animation, the end result will be the same (the information is displayed after the animation finished) If you can get it to work using fade, do it using fade first.

I can't figure out which ini to put the code in.

For now just put it in CPU-Tiny.ini

CPU-Tiny.ini is made up of several parts and I don't know how to treat it as one large part that I can work with.

Why do you need to treat it as one large part? Are you trying to see the bigger picture? The project is consist of small parts, each has its use to make things more simple. Big projects are all like this, divide and conquer.

I'm fairly new to Rainmeter and have been banging my head against a wall to figure this out.

When you are new to something, nothing make any sense at all. However, being computer savvy help a lot though. Banging head against wall won't help, you need a break then come back later.

I probably shouldn't have tried this with such a complicated skin.

Correct, you are sabotaging yourself with this task. Don't even look at Iron Man Rainmeter, the complexity will consume you. Newbie should start with tasks like below:

By the way, you should visualize what you want to archive. I mean with detail picture how things look when you are not hovering and when you are hovering. I think easiest approach is using fade.

Devo7v commented 4 years ago

I was able to make the meters fade in and out both using the code you linked to and alternatively by simply adjusting the transparency settings for each skin. This doesn't achieve what I'm trying to do. What I'm trying to do is get the skin to slide in from the right side of the screen. It seems like the second link you send has the code to get it to work but I can't figure out which ini to put it in. See the pictures below for a mock up of what I'm trying to achieve. Focus on the meters on the right side of the desktop.

Shot 1

Shot 2

Shot 3

Devo7v commented 4 years ago

So I eventually figured out how to do this, it breaks the auto borders, but maybe there's a more elegant way to implement this. I'm just going to talk about the CPU meter, but this same process applies to all meters. Several files need to be edited and I'll talk about them individually. See the GIF below for the sliders in action.

GIF 7-29-2020 3-41-58 PM

variables.ini The following variables need to be added to the end:

U=[!UpdateMeasureGroup Sliders][!UpdateMeterGroup Sliders][!Redraw]
W=1
Offset=-110 (this is how far to the right you want the initial position of the meter to start, it will then move to the left on hover or mouse click to 0,0)
SlideAmount=10 (speed of the slide, the higher the number, the faster it slides)

background.ini For each meter in this file the following items need to be added:

It is also necessary to remove/comment out any other group label on any of the meters.  This has the unfortunate side effect of breaking the automatic borders.

**performanceTemplateX4.ini**
Since I'm only talking about the CPU meter I'm only going to describe edits to the 1st Performance Meter, but this also applies to the others if you want to have the other performance meters slide as well.  Add the following to `[Graph1]`, `[GraphBackground1]`, and `[Top1]`:
- All X positions need to be updated to subtract the #Offset# variable
- Group=Sliders
- DynamicVariables=1
- Example

[Graph1] ; Main graph line. Meter=Line MeasureName=#GraphMeasure1# X=(#GraphLeftPadding1#+1-#Offset#) Y=(#GraphTopPadding1#+1) W=(#GraphWidth#-1) H=(#GraphHeight#-2) AntiAlias=1 Group=Monitor1 LineCount=1 LineColor=#GraphColor1# LineWidth=1 Hidden=1 Group=Sliders DynamicVariables=1


**CPU-Tiny.ini**
Add the following code to the end:

[MeasureSlider] Measure=Plugin Plugin=ActionTimer Group=Sliders ActionList1=Repeat Right,#W#,20 ActionList2=Repeat Left,#W#,20 Right=[!SetVariable Offset "(Clamp(#Offset#+#SlideAmount#,-110,0))"]#U# Left=[!SetVariable Offset "(Clamp(#Offset#-#SlideAmount#,-110,0))"]#U# IfCondition=#Offset# = -110 IfTrueAction=[!SetOption BackgroundBox MouseOverAction """[!CommandMeasure MeasureSlider "Stop 2"][!CommandMeasure MeasureSlider "Execute 1"]"""] IfCondition2=#Offset# = 0 IfTrueAction2=[!SetOption BackgroundBox MouseLeaveAction """[!CommandMeasure MeasureSlider "Stop 1"][!CommandMeasure MeasureSlider "Execute 2"]"""] DynamicVariables=1



You can also choose to have the meter slide by clicking instead of hovering by replacing `MouseOverAction` with `LeftMouseUpAction`

**Final Thoughts**
There are a couple of caveats that should be considered when implementing this:

1. As mentioned above, this breaks the ability of the skin to have automatic borders depending of where each meter is docked.  This is because all of the border meters need to be assigned to `Group=Sliders` in order for the skin to automatically slide out.  As far as I can tell there's no way to have a meter assigned to 2 different groups.
2. The graphs themselves get a little messed up during the slide animation.  This is because each step of the slide results in a redraw of the graph causing a long horizontal line to appear in the middle of the graph until the graph updates enough to push that horizontal line off the end of the graph window.  One way to avoid this is to remove `Group=Sliders` from both `[Graph1]` and `[GraphBackground1]` however this will cause the graph to jump to the final position rather than slide smoothly.
3. The method I described above allows you to position the `CPU-Tiny.ini` on the right side of the screen so that you only see the graph, then on hover it will slide to the left to show the whole skin.  You could modify this to be docked on the left and slide to the right by changing `-110` to `+110` in both `variables.ini` and `CPU-Tiny.ini`
4. Sliding can also be implemented for the other skins, you will just need to make additional edits to `performanceTemplateX4.ini` as well as to add the `[MeasureSlider]` to the other skins you wish to slide.

This may not be for everybody, but I figured I'd post it in hopes that somebody could come up with a cleaner more elegant way of implementing this without breaking any other functionality.
MinhThienDX commented 4 years ago

@Devo7v Fantastic job! 👏 About caveats:

  1. Of course, sometimes you have to give up one thing to achieve another.
  2. I afraid slide animation is some thing out of your control. If you dig deep enough, maybe Rainmeter have some method to optimize slide.
  3. Of course, reverse it to turn left => right to right => left.
  4. Thank you for the tutorial.

To close or not to close this issue is your choice 😉

MinhThienDX commented 4 years ago

😂 I take that back, I will close this issue now.