Mouse over label?

[Ninjashizzle]

Hello all, I'm having a crack at making a skin. A Minecraft skin.

This is how it looks so far:

I'm going to use the Minecraft hotbar (for those of you who don't play Minecraft): with different items/blocks in it for shortcuts to programs or documents etc. However, I would like to make it so when I hover over the items/blocks I can have a hover-over label that looks like the Minecraft one:


How would I go about doing this?

[Mordasius]

If you intend to do the whole thing with images, then something like this for each of your Item / Blocks should do the trick. You'll have to add the X and Y positions, etc.

Code: Select all

[MeterItemBlock1]
Meter=IMAGE
ImageName=#@#Images\ItemBlock1.png
AntiAlias=1
MouseOverAction=[!ShowMeter HoverOver1][!Update]
MouseLeaveAction=[!HideMeter HoverOver1][!Update]
LeftMouseUpAction=[!Shortcut1]

[HoverOver1]
Meter=IMAGE
ImageName=#@#Images\HoverOverBlock1.png
AntiAlias=1
Hidden=1

Alternatively, you could make [HoverOver1] a STRING meter if you have a suitable font and only want to show text.

Code: Select all

[HoverOver1]
Meter=STRING
FontFace=MyMineCraftFont
FontSize=10
StringStyle=BOLD
StringAlign=CENTERCENTER
StringEffect=SHADOW
FontColor=ffffffee
FontEffectColor=000000
SolidColor=25275E
W=50
H=30
Text="Block 1"
AntiAlias=1
Hidden=1

[Ninjashizzle]

If you intend to do the whole thing with images, then something like this for each of your Item / Blocks should do the trick. You'll have to add the X and Y positions, etc.

Code: Select all

[MeterItemBlock1]
Meter=IMAGE
ImageName=#@#Images\ItemBlock1.png
AntiAlias=1
MouseOverAction=[!ShowMeter HoverOver1][!Update]
MouseLeaveAction=[!HideMeter HoverOver1][!Update]
LeftMouseUpAction=[!Shortcut1]

[HoverOver1]
Meter=IMAGE
ImageName=#@#Images\HoverOverBlock1.png
AntiAlias=1
Hidden=1

Alternatively, you could make [HoverOver1] a STRING meter if you have a suitable font and only want to show text.

Code: Select all

[HoverOver1]
Meter=STRING
FontFace=MyMineCraftFont
FontSize=10
StringStyle=BOLD
StringAlign=CENTERCENTER
StringEffect=SHADOW
FontColor=ffffffee
FontEffectColor=000000
SolidColor=25275E
W=50
H=30
Text="Block 1"
AntiAlias=1
Hidden=1

Thanks for the reply, I'll put it to good use. Is there a way to combine the two? Having a background image and text generated in the centre would be great, because I was intending to release the skin when it's finished and people could add their own short cuts and not be limited to images I've made.

[MerlinTheRed]

Sure you can just display a background image and text on it. I'd use the StringAlign options to center the text on that tooltip background. Just display both the image and the string meter when hovering over the icon.

The only problem is that your tooltip background will probably be fixed-size as there is no really comfortable way to determine how wide a string is and then making the background adapt to that. I think you can do it with a Lua script but that would be a little tedious.

[KreAch3R]

It's not really tedious, it's pretty simple with the latest Lua changes, the main problem is finding a background image that can be stretched "well". A plain SolidColor Image Meter would work best, but defeats the purpose, as you can set SolidColor in the string meter itself. For the record, try this:

(I 've included an image background quickly and dirty taken from your screenshot.)

[Ninjashizzle]

It's not really tedious, it's pretty simple with the latest Lua changes, the main problem is finding a background image that can be stretched "well". A plain SolidColor Image Meter would work best, but defeats the purpose, as you can set SolidColor in the string meter itself. For the record, try this:

(I 've included an image background quickly and dirty taken from your screenshot.)

Thanks for the help, and I think I understand the Lua script. But how do I get the script to use the correct name for the correct button?

So far I've done this (using your script).

Code: Select all

function Initialize()

	Text = SKIN:GetMeter("ButtonName")
	Background= SKIN:GetMeter("Background")

end

function Update()

	TextWidth = Text:GetW()
	
	Background:SetW(TextWidth)
	
	return 'Success! The Width is: '..TextWidth
	
end --function Update

Code: Select all

[ButtonName]
Meter=STRING
StringAlign=CENTER
Text=#Button1Name#

Code: Select all

[Background]
Meter=IMAGE
ImageName=#ROOTCONFIGPATH#Shortcut Bar\Tooltip\Tooltip.png

[MerlinTheRed]

The script gets the meters it should operate on in the initialize function:

Code: Select all

function Initialize()

   Text = SKIN:GetMeter("ButtonName")
   Background= SKIN:GetMeter("Background")

end

If you have multiple tooltips you want to display, you can either

• a) make a script for each tooltip where you change the name of the meters in the initialize function
  b) let the script get all meters (you'd have to create a table or more variables, one for each meter) and modify each of them accordingly

[KreAch3R]

Merlin is right. You should define your own names in the Initialize() function. Given the nature of your task (MouserOver triggered tooltip), I wouldn't use multiple meters, I would use only one background meter and move it around.

Take a look at this updated version. Mind that, it is a complete rework, but I think it works best for your specific needs.

You must do 2 things when you want to add another App String.

1. Add another one "StringNUM" meter and "ToolTipNUM" meter, incrementing the previous number by one, in every occasion. Like this:
   
   [String4]
   SolidColor=0,0,0,1
   Meter=STRING
   FontSize=12
   X=R
   Y=r
   Text=AppName4
   MouseOverAction=[!ShowMeterGroup ToolTip4][!CommandMeasure "mLuaScript" "Size('ToolTip4', '#CURRENTSECTION#')"][!Redraw]
   MouseLeaveAction=[!HideMeterGroup ToolTip4][!Redraw]
   
   [ToolTip4]
   Group=ToolTip4
   Meter=STRING
   FontColor=FFFFFF
   Text=this is an apple.
   Hidden=1
2. Add the ToolTipNUM in the Group Value of the Background meter.

The ToolTip meters' X,Y values are controlled only by the 'Hovered' (AppName) meter, and they are centered to it. So if you change the first String1 X value to 150, everything including the ToolTips will move to that position.

Use anything you see fit.

PS: I added this ScaleMargins=5,0,5,0 to the Background Meter. It makes the scaling so much better. Play with the pixels to get it to fit your Background image.

[Ninjashizzle]

You guys are legends. I'm extremely close to finishing, just one final thing. The tool tips seem to be getting cut off sometimes, how can I make it so they ignore the boundaries of the shortcut bar?

Code: Select all

[Background]
Group=ToolTip1 | ToolTip2 | ToolTip3 | ToolTip4 | ToolTip5 | ToolTip6 | ToolTip7 | ToolTip8 | ToolTip9
Meter=IMAGE
ImageName=#ROOTCONFIGPATH#Shortcut Bar\Tooltip\Tooltip.png
ScaleMargins=3,0,3,0
Hidden=1

[ToolTip1]
Group=ToolTip1
SolidColor=0,0,0,1
Meter=STRING
FontFace=#FontFace#
FontColor=#FontColor#
Text=#Button1Name#
AntiAlias=1
Hidden=1

And here's a picture.

[KreAch3R]

Unfortunately I can't get much from the screenshot and the shared code. If I had to guess, I would say that it gets cropped off because it gets outside the skin main rendering window. So, if you have your shortcut bar placed at Y<=30, try to increase that, because if you noticed in the Script measure:

Code: Select all

[mLuaScript]
Measure=Script
ScriptFile=Script.lua
ToolTipHeight=30

the toolTipHeight key defines how higher (from the AppNames) the tooltip will appear. So, try to increase both X, Y of the shortcut bar so that Rainmeter can draw the appeared Tooltip. I did a messy job at explaining the above, so if you have problems or I didn't guess it right please share the whole skin so that we can take a look at the problem.