Custom 3 Part Button?

[jminternelia]

I've got a weird sort of concept for a button, and it's a bit confusing to explain, so bear with me.

I am trying to figure out how to get each "bar" of the button to have a different set of actions. Why not split into 3 images? Well, because then the other two wouldn't change colors in coordination with whatever one you're clicking or hovering over. At first I thought about just putting a nearly completely transparent copy of each "bar" on the top, but that would wipe out the button's effect, which replies on a triple wide image. So is there some kind of "mouse to color coordinates" craziness that someone has thought up? I'm almost (not really) sure there is a way, I'm just not sure what it is. Any suggestions?

[balala]

Why not split into 3 images? Well, because then the other two wouldn't change colors in coordination with whatever one you're clicking or hovering over.

Wrong! They can be set up to change color on all three, whenever you're hovering the mouse over any of them.
Spliting it would be I think the best solution.

[jsmorley]

No, I think you will have to have three image meters. That is the only way you can get three distinct mouse actions.

You can create 9 images, and use three !SetOption bangs with MouseOverAction / LeftMouseDownAction / MouseLeaveAction to change the images used on all the meters at once, when you interact with any of them.

Or perhaps use 3 white images, and just change ImageTint on all of them as needed.

Edit: Balala beat me this time...

[balala]

No, I think you will have to have three image meters. That is the only way you can get three distinct mouse actions.

Not absolutely necessary, but for sure this is the simplest solution.
If kept the single image solution, could be driven some (almost) transparent Shape meters and assign the mouse actions to them.
Although not easy, probably not impossible would be. However I don't think it would worth doing something like this.

[jsmorley]

So something like this:

Code: Select all

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

[Variables]
Color1=105,222,239
Color2=189,254,248
Color3=86,146,154
U=[!UpdateMeter *][!Redraw]

[ButtonTop]
Meter=Image
ImageName=#@#Images\Image1.png
ImageTint=#Color1#
MouseOverAction=[!SetOption ButtonTop ImageTint "#Color3#][!SetOption ButtonLeft ImageTint "#Color1#][!SetOption ButtonRight ImageTint "#Color2#]#U#
LeftMouseDownAction=[!SetOption ButtonTop ImageTint "#Color2#][!SetOption ButtonLeft ImageTint "#Color3#][!SetOption ButtonRight ImageTint "#Color1#]#U#
MouseLeaveAction=[!SetOption ButtonTop ImageTint "#Color1#][!SetOption ButtonLeft ImageTint "#Color2#][!SetOption ButtonRight ImageTint "#Color3#]#U#
LeftMouseUpAction=[!Log "Clicked Top"]

[ButtonLeft]
Meter=Image
ImageName=#@#Images\Image2.png
ImageTint=#Color2#
MouseOverAction=[!SetOption ButtonTop ImageTint "#Color3#][!SetOption ButtonLeft ImageTint "#Color1#][!SetOption ButtonRight ImageTint "#Color2#]#U#
LeftMouseDownAction=[!SetOption ButtonTop ImageTint "#Color2#][!SetOption ButtonLeft ImageTint "#Color3#][!SetOption ButtonRight ImageTint "#Color1#]#U#
MouseLeaveAction=[!SetOption ButtonTop ImageTint "#Color1#][!SetOption ButtonLeft ImageTint "#Color2#][!SetOption ButtonRight ImageTint "#Color3#]#U#
LeftMouseUpAction=[!Log "Clicked Left"]

[ButtonRight]
Meter=Image
ImageName=#@#Images\Image3.png
ImageTint=#Color3#
MouseOverAction=[!SetOption ButtonTop ImageTint "#Color3#][!SetOption ButtonLeft ImageTint "#Color1#][!SetOption ButtonRight ImageTint "#Color2#]#U#
LeftMouseDownAction=[!SetOption ButtonTop ImageTint "#Color2#][!SetOption ButtonLeft ImageTint "#Color3#][!SetOption ButtonRight ImageTint "#Color1#]#U#
MouseLeaveAction=[!SetOption ButtonTop ImageTint "#Color1#][!SetOption ButtonLeft ImageTint "#Color2#][!SetOption ButtonRight ImageTint "#Color3#]#U#
LeftMouseUpAction=[!Log "Clicked Right"]

Images: Ok they are more or less white on white here in the forums...

Image1.png

Image2.png

Image3.png

GIF.gif

Do be aware though, that with this approach the three images are not treated as a single entity, and you will get mouse-leave actions as you move the cursor from one section to the other. Might make it feel a bit "jumpy". No way around that really.

[jminternelia]

So something like this:

Code: Select all

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

[Variables]
Color1=105,222,239
Color2=189,254,248
Color3=86,146,154
U=[!UpdateMeter *][!Redraw]

[ButtonTop]
Meter=Image
ImageName=#@#Images\Image1.png
ImageTint=#Color1#
MouseOverAction=[!SetOption ButtonTop ImageTint "#Color3#][!SetOption ButtonLeft ImageTint "#Color1#][!SetOption ButtonRight ImageTint "#Color2#]#U#
LeftMouseDownAction=[!SetOption ButtonTop ImageTint "#Color2#][!SetOption ButtonLeft ImageTint "#Color3#][!SetOption ButtonRight ImageTint "#Color1#]#U#
MouseLeaveAction=[!SetOption ButtonTop ImageTint "#Color1#][!SetOption ButtonLeft ImageTint "#Color2#][!SetOption ButtonRight ImageTint "#Color3#]#U#
LeftMouseUpAction=[!Log "Clicked Top"]

[ButtonLeft]
Meter=Image
ImageName=#@#Images\Image2.png
ImageTint=#Color2#
MouseOverAction=[!SetOption ButtonTop ImageTint "#Color3#][!SetOption ButtonLeft ImageTint "#Color1#][!SetOption ButtonRight ImageTint "#Color2#]#U#
LeftMouseDownAction=[!SetOption ButtonTop ImageTint "#Color2#][!SetOption ButtonLeft ImageTint "#Color3#][!SetOption ButtonRight ImageTint "#Color1#]#U#
MouseLeaveAction=[!SetOption ButtonTop ImageTint "#Color1#][!SetOption ButtonLeft ImageTint "#Color2#][!SetOption ButtonRight ImageTint "#Color3#]#U#
LeftMouseUpAction=[!Log "Clicked Left"]

[ButtonRight]
Meter=Image
ImageName=#@#Images\Image3.png
ImageTint=#Color3#
MouseOverAction=[!SetOption ButtonTop ImageTint "#Color3#][!SetOption ButtonLeft ImageTint "#Color1#][!SetOption ButtonRight ImageTint "#Color2#]#U#
LeftMouseDownAction=[!SetOption ButtonTop ImageTint "#Color2#][!SetOption ButtonLeft ImageTint "#Color3#][!SetOption ButtonRight ImageTint "#Color1#]#U#
MouseLeaveAction=[!SetOption ButtonTop ImageTint "#Color1#][!SetOption ButtonLeft ImageTint "#Color2#][!SetOption ButtonRight ImageTint "#Color3#]#U#
LeftMouseUpAction=[!Log "Clicked Right"]

Images: Ok they are more or less white on white here in the forums...
Image1.png
Image2.png
Image3.png


GIF.gif

That is absolutely brilliant. And so easy. Sorry guys. It's past my bedtime, and clearly I'm not firing on all cylinders. But much thanks for the help. I'll implement this tomorrow.

[jsmorley]

As I said, do be aware though, that with this approach the three images are not treated as a single entity, and you will get mouse-leave actions as you move the cursor from one section to the other. Might make it feel a bit "jumpy". No way around that really.

Also, yeah... This is a bit weird to me, as it is not obvious what the change in colors signifies. Seem kinda arbitrary...

I could see it if all three started as the same color, and on mouse over and mouse down on one of them, it changed to indicate "selection". But hey, if we all liked the same thing, there would be a hell of a traffic jam.

[kyriakos876]

Not to throw any fuel in the fire, but you COULD create 3 rectangle and rotate them and then put a different action on each rectangle.

[jsmorley]

Not to throw any fuel in the fire, but you COULD create 3 rectangle and rotate them and then put a different action on each rectangle.

Sure. However his original image(s) were not just rounded rectangles, it would take a fairly complicated set of three Shape meters to get exactly what he had.

Certainly doable however, and if he wanted to put in the up-front time to design the single shape in a way that it fit together correctly when duplicated and rotated / positioned, that would certainly be a "lighter" way to go about this.

[kyriakos876]

Sure. However his original image(s) were not just rounded rectangles, it would take a fairly complicated Shape meter to get exactly what he had.

does it matter if they clickable area is a bit bigger than the image that represents the button? Like padding... I think It might even be better to have a bit more clickable area so that the user doesn't have to move themouse EXACTLY on the a button. But yea.... as you said very correctly:

if we all liked the same thing, there would be a hell of a traffic jam.