It is currently December 15th, 2019, 6:35 am

interactive random background objects

Help with creating, editing & fixing problems with skins
BLACKCTS
Posts: 3
Joined: October 28th, 2019, 1:52 pm

interactive random background objects

BLACKCTS » October 28th, 2019, 1:58 pm

I have an idea that I really want to do and Rainmeter is the only way I can think of to accomplish this. I got the idea from Spotify and the mobile visualizer for the song "Tragedy" by Being As An Ocean.
Basically I want to use a background of a galaxy with stars/planets, and use a random targeting lockbox that pops up over the background image, and maybe has quick links to files. I want the boxes to be able to be behind desktop icons but still clickable. Here is a screenshot of the visualizer:
unnamed.png
If anyone can give me a good starting point, I would appreciate it. Thank you!
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 19870
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: interactive random background objects

jsmorley » October 28th, 2019, 2:00 pm

Before you go too far down this road, I must point out that Rainmeter skins can never be "behind" desktop icons or shortcuts.

In my view, that will make this idea practically unworkable. You would need pretty much a "full-screen" skin that has some "hotspots" defined on it, and it is just going to get in the way of using your desktop normally.
User avatar
jsmorley
Developer
Posts: 19870
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: interactive random background objects

jsmorley » October 28th, 2019, 2:24 pm

So having said that, the way I would approach this is:

1) Find a desktop wallpaper that you like, that has the "spots" on it that you want to use for "hotspots". Be sure the wallpaper is exactly the same size as your screen, so it isn't in any way sized by Windows when it is set as the desktop wallpaper.

2) Using a graphics editor like Photoshop or Gimp or something, make copies of the little areas you want to be "hotspots". These should be as small as possible, just big enough to detect the mouse on the "spot" you have in mind. Save these as separate small image files.

3) Create a full-screen skin. It should mostly be FULLY transparent. We never want it to detect the mouse except on the "hotspots". This skin should be set with Update=-1, so it NEVER updates. It should only be driven by mouse actions.

4) In this skin, carefully place Image meters with the little "hotspot" images you created above. They need to be placed so they exactly overlay the same spot on your desktop wallpaper. This is going to be a bit tricky, as meters in Rainmeter can only be positioned at integer "pixel" positions, so you can't move a meter a "half pixel" to get it to exactly line up. To say the least, this will take some "doing" to get right.

Another option is to make the separate small hotspots in effect "invisible", but with just enough opacity to detect the mouse. This reduces the amount of work required to get things to exactly "line up". In this case you might be able to just use some Shape meters to create the "hotspots".

5) Add Tooltips, mouse-over effects and mouse actions as you desire to these "hotspot" Image / Shape meters.

6) Never put a desktop icon or shortcut where these hotspots are. Windows will INSIST that the icon or shortcut be at the "bottom", and the skin will interfere with getting at them.

7) Don't even bother trying to "distribute" this skin. It's only ever going to work for someone who 1) has the same screen resolution and DPI scaling as you, and 2) uses the same image as their Windows background.
Yincognito
Posts: 684
Joined: February 27th, 2015, 2:38 pm

Re: interactive random background objects

Yincognito » October 28th, 2019, 2:54 pm

jsmorley wrote:
October 28th, 2019, 2:24 pm
Be sure the wallpaper is exactly the same size as your screen, so it isn't in any way sized by Windows when it is set as the desktop wallpaper.
It doesn't have to be exactly the size of the screen, if one designs the subsequent skin to use percentage/proportional formulas in placing the little hotspot images and resize the said images by setting their width/height also proportional to the ratio between the screen dimension (the #WORKAREA...# built-in variables in Rainmeter) and the actual size of the walpaper image.

Also, if the "outskirts"/edges of the little hotspot images are uniform (i.e. the space sky, in this case), rounding issues with half pixels won't be that serious, it may even be visually suggestive to "move" (or even "grow") a little the stars corresponding to the hotspots when the mouse hovers over them (the same way you move/grow a button in the same situation, in order to suggest some kind of "animation" on hover)...
BLACKCTS
Posts: 3
Joined: October 28th, 2019, 1:52 pm

Re: interactive random background objects

BLACKCTS » October 31st, 2019, 2:01 am

Ok, I would like to simplify this a little more (hopefully). I would like to have rainmeter display the box when I hover over it with the mouse. I would like the box to have some animation however. I would like it to make a dot in the middle, then "draw" a box around the dot like the one in the picture.
After the box is drawn, then I would like a line to connect it, followed by the "name box". So this would be three separate animations. If you need more specifics as to what I am after, and if you have Spotify on iOS, watch the visualizer for the song.

To make say, the animated box how would I go about doing that? Do I need to make a GIF using multiple .png files? I have never animated anything before but I am willing to learn.
Yincognito
Posts: 684
Joined: February 27th, 2015, 2:38 pm

Re: interactive random background objects

Yincognito » October 31st, 2019, 2:37 pm

BLACKCTS wrote:
October 31st, 2019, 2:01 am
Ok, I would like to simplify this a little more (hopefully). I would like to have rainmeter display the box when I hover over it with the mouse. I would like the box to have some animation however. I would like it to make a dot in the middle, then "draw" a box around the dot like the one in the picture.
After the box is drawn, then I would like a line to connect it, followed by the "name box". So this would be three separate animations. If you need more specifics as to what I am after, and if you have Spotify on iOS, watch the visualizer for the song.

To make say, the animated box how would I go about doing that? Do I need to make a GIF using multiple .png files? I have never animated anything before but I am willing to learn.
Something like the code below might be a good starting point, assuming you have a spot/dot/star at the (293,264) position on your screen - which I do. Now, of course, for multiple spots you'd have to duplicate the last 3 meters while giving the duplicates incremental names (e.g. [MeterBox2], [MeterLine2], [MeterText2] and so on) and changing the duplicates' reference coordinates from (293,264) to whatever your next spot's coordinates are. Naturally, if you set your monitor to a different resolution, you'd have to set all the coordinates to be equivalent in the new resolution, which more or less means that you'd have to multiply coordinates with the ratio between the new resolution and the resolution you used as reference when you designed the location of the spots (so, for example, if you set the location of the spots in a 1366x768 resolution, the (293,264) coordinate should become (293*(#SCREENAREAWIDTH#/1366),264*(#SCREENAREAHEIGHT#/768)), where #SCREENAREAWIDTH# and #SCREENAREAHEIGHT# are Rainmeter built-in variables holding the dimensions of the current screen resolution).

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[Variables]
Opacity=1

[MeterFrame]
Meter=Shape
X=0
Y=0
Shape=Rectangle 0,0,(#WORKAREAWIDTH#),(#WORKAREAHEIGHT#) | StrokeWidth 1 | Stroke Color 255,255,255,255 | Fill Color 47,47,47,0
UpdateDivider=-1
OnUpdateAction=[!Move "#WORKAREAX#" "#WORKAREAY#"]
DynamicVariables=1

[MeterBox]
Meter=Shape
X=293
Y=264
Shape=Rectangle 0,0,30,30 | StrokeWidth 1 | Stroke Color 255,255,255,(#Opacity#) | Fill Color 47,47,47,1
UpdateDivider=-1
MouseOverAction=[!SetVariable Opacity 64][!UpdateMeter "MeterBox"][!Redraw][!Delay 100][!SetVariable Opacity 128][!UpdateMeter "MeterBox"][!Redraw][!Delay 100][!SetVariable Opacity 192][!UpdateMeter "MeterBox"][!Redraw][!Delay 100][!SetVariable Opacity 255][!UpdateMeter "MeterBox"][!Redraw][!Delay 100][!SetVariable Opacity 64][!UpdateMeter "MeterLine"][!Redraw][!Delay 100][!SetVariable Opacity 128][!UpdateMeter "MeterLine"][!Redraw][!Delay 100][!SetVariable Opacity 192][!UpdateMeter "MeterLine"][!Redraw][!Delay 100][!SetVariable Opacity 255][!UpdateMeter "MeterLine"][!Redraw][!Delay 100][!SetVariable Opacity 64][!UpdateMeter "MeterText"][!Redraw][!Delay 100][!SetVariable Opacity 128][!UpdateMeter "MeterText"][!Redraw][!Delay 100][!SetVariable Opacity 192][!UpdateMeter "MeterText"][!Redraw][!Delay 100][!SetVariable Opacity 255][!UpdateMeter "MeterText"][!Redraw]
MouseLeaveAction=[!SetVariable Opacity 192][!UpdateMeter "MeterText"][!Redraw][!Delay 100][!SetVariable Opacity 128][!UpdateMeter "MeterText"][!Redraw][!Delay 100][!SetVariable Opacity 64][!UpdateMeter "MeterText"][!Redraw][!Delay 100][!SetVariable Opacity 1][!UpdateMeter "MeterText"][!Redraw][!Delay 100][!SetVariable Opacity 192][!UpdateMeter "MeterLine"][!Redraw][!Delay 100][!SetVariable Opacity 128][!UpdateMeter "MeterLine"][!Redraw][!Delay 100][!SetVariable Opacity 64][!UpdateMeter "MeterLine"][!Redraw][!Delay 100][!SetVariable Opacity 1][!UpdateMeter "MeterLine"][!Redraw][!Delay 100][!SetVariable Opacity 192][!UpdateMeter "MeterBox"][!Redraw][!Delay 100][!SetVariable Opacity 128][!UpdateMeter "MeterBox"][!Redraw][!Delay 100][!SetVariable Opacity 64][!UpdateMeter "MeterBox"][!Redraw][!Delay 100][!SetVariable Opacity 1][!UpdateMeter "MeterBox"][!Redraw]
DynamicVariables=1

[MeterLine]
Meter=Shape
X=(293+30)
Y=(264+30)
Shape=Line 0,0,50,50 | StrokeWidth 1 | Stroke Color 255,255,255,(#Opacity#)
UpdateDivider=-1
DynamicVariables=1

[MeterText]
Meter=String
X=(293+30+50)
Y=(264+30+50)
FontSize=11
FontWeight=400
FontColor=0,0,0,(#Opacity#)
SolidColor=255,255,255,(#Opacity#)
Padding=5,5,5,5
StringAlign=Center
AntiAlias=1
Text=Metallica - Nothing Else Matters
UpdateDivider=-1
DynamicVariables=1
And how it looks:
Desktop_2019_10_31_15_31_05_128.gif
P.S. The frame meter is just for convenience, in order to have a non-transparent 1px frame that you can right click on to refresh the skin. It can be made transparent in the final product, by setting the shape's Stroke Color to, say, 255,255,255,0 (i.e. 0 opacity). The fade of the meters can be speeden up by decreasing the values passed to the !Delay bangs.
You do not have the required permissions to view the files attached to this post.
BLACKCTS
Posts: 3
Joined: October 28th, 2019, 1:52 pm

Re: interactive random background objects

BLACKCTS » October 31st, 2019, 3:30 pm

Fantastic! Yes this gives me a very good starting point! You are awesome. Ill post my results once I am done. Thank you so much!
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3645
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: interactive random background objects

eclectic-tech » October 31st, 2019, 4:26 pm

Yincognito beat me with a workable example. My example is using an ActionTimer plugin.

To use an ActionTimer controlled version, simply replace the [MeterBox] in Yincognito's code with the sections below; this changes the mouseover actions and adds the [MeasureActilonTimer]. Save the code with a new name (if desired). Refresh All to see the new skin.

Code: Select all

[MeterBox]
Meter=Shape
X=293
Y=264
Shape=Rectangle 0,0,30,30 | StrokeWidth 1 | Stroke Color 255,255,255,(#Opacity#) | Fill Color 47,47,47,1
UpdateDivider=-1
MouseOverAction=[!CommandMeasure MeasureActionTimer "Stop 1"][!CommandMeasure MeasureActionTimer "Stop 2"][!CommandMeasure MeasureActionTimer "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureActionTimer "Stop 1"][!CommandMeasure MeasureActionTimer "Stop 2"][!CommandMeasure MeasureActionTimer "Execute 2"]
DynamicVariables=1

[MeasureActionTimer]
Measure=Plugin
Plugin=ActionTimer

ActionList1=Repeat FadeIn, 100, 4
ActionList2=Repeat FadeOut, 100, 4

FadeIn=[!SetVariable Opacity (Clamp(#Opacity#+64,1,255))][!UpdateMeasure #CurrentSection#][!UpdateMeter *][!Redraw]
FadeOut=[!SetVariable Opacity (Clamp(#Opacity#-64,1,255))][!UpdateMeasure #CurrentSection#][!UpdateMeter *][!Redraw]
DynamicVariables=1

When you load this new skin, you will not see any difference in the action. But the code is a bit easier to adapt for more meters or animation speed control.

If you want to define more points and actions; create a second opacity variable "Opacity2=1" in [Variables], duplicate the 3 meters (as Yincognito states) with update X&Y points, using #Opacity2#, updated MouseOver/MouseLeave commands on the new "box" meter to "Stop 3" and "Stop4", then execute the appropriate ActionList#.
Add a new set of ActionLists ("ActionList3" and "ActionList4") and action bangs ("FadeIn2" and "FadeOut2") to [MeasureActionTimer] that will control the value of your #Opacity2# variable.

Code: Select all

[MeasureActionTimer]
Measure=Plugin
Plugin=ActionTimer

ActionList1=Repeat FadeIn, 100, 4
ActionList2=Repeat FadeOut, 100, 4
ActionList3=Repeat FadeIn2, 100, 4
ActionList4=Repeat FadeOut2, 100, 4

FadeIn=[!SetVariable Opacity (Clamp(#Opacity#+64,1,255))][!UpdateMeasure #CurrentSection#][!UpdateMeter *][!Redraw]
FadeOut=[!SetVariable Opacity (Clamp(#Opacity#-64,1,255))][!UpdateMeasure #CurrentSection#][!UpdateMeter *][!Redraw]

FadeIn2=[!SetVariable Opacity2 (Clamp(#Opacity2#+64,1,255))][!UpdateMeasure #CurrentSection#][!UpdateMeter *][!Redraw]
FadeOut2=[!SetVariable Opacity2 (Clamp(#Opacity2#-64,1,255))][!UpdateMeasure #CurrentSection#][!UpdateMeter *][!Redraw]
DynamicVariables=1

Either suggested code will work, I just thought I would offer one using the ActionTimer as an alternative.

EDIT: added a link to ActionTimer plugin info in the manual.
Yincognito
Posts: 684
Joined: February 27th, 2015, 2:38 pm

Re: interactive random background objects

Yincognito » October 31st, 2019, 4:56 pm

BLACKCTS wrote:
October 31st, 2019, 3:30 pm
Fantastic! Yes this gives me a very good starting point! You are awesome. Ill post my results once I am done. Thank you so much!
You're welcome. You might want to check eclectic-tech's variant as well, so that you can see how the alternative works. Then you can choose whichever variant you're most comfortable with (or whichever variant serves the most in your plans for the skin). ;-)
Yincognito
Posts: 684
Joined: February 27th, 2015, 2:38 pm

Re: interactive random background objects

Yincognito » October 31st, 2019, 5:27 pm

eclectic-tech wrote:
October 31st, 2019, 4:26 pm
My example is using an ActionTimer plugin. [...] The code is a bit easier to adapt for more meters or animation speed control.
This is probably the better way to do it, since ActionTimer is dedicated for such purposes.

However, in my code I intentionally set UpdateDivider=-1 on the meters and avoided to update them with [!UpdateMeter *] in order to be able to use a single #Opacity# variable for every spot one might have on the screen. This variable can change and use the new spot's (or the new situation's) opacity value due to DynamicVariables=1, but as long as the "old" spot's meters don't update, the fade in/out effect is applied only to the "new" spot's meter that gets updated. In programming terms, I looked to make #Opacity# a "global variable" that can be reused for subsequent spots.

That's why the long chain of bangs in the MouseOver/Leave options gives the impression of a slight difficulty in adapting to subsequent spots/situations. In other words, my choices were deliberate in order to have a bigger gain somewhere else - just saying.