It is currently March 29th, 2024, 1:32 pm

variable text with image background

Get help with creating, editing & fixing problems with skins
User avatar
ShadowDragon
Posts: 44
Joined: January 28th, 2021, 4:30 pm

variable text with image background

Post by ShadowDragon »

when my menubase is nicely dont, the following is something I need to figure out yet
or how some people done it, but there is a catch as well (which I need to adjust again to make it work)
those are specifically the Y settings:

now here is the issue, but not sure if it's possible or how it's done exacly:

A meter can have an image if it has

Code: Select all

Meter=IMAGE
MeterName=#image#
while I need 8 of it, the x and y can be the same, but each sub menu has 5 applications that can be started.
the idea is, to have a image background, and a text inside it and centered (lets asume the image is W=500 and H=100

Code: Select all

[AppTextButton]
Meter=String
Fontcolor=100,100,100,255
FontSize=50
StringStyle=Bold
StringAlign=Center
AntiAlias=1
x=variable
y=-50
text=""
now this doesn't work, x=variable is that this will become copy/paste and placed above the application buttons (see preview here).

while rainmeter doesn't allow negative value, I can set it to 0, and adjust the menu entirely to place it nicely above the top
applications, this for each on their own specific spot above tje applications.

each application require 2 additional actions "MouseOverAction and MouseLeaveAction" to change the text.

Question is, How to use a background image and place the text in the center?
when it's working nicely, I will update the gif on the other thead with the effect on it.

I might need [!SetOptions AppTextButton text "#AppName#"] but I love to know how to set the image, which is not found
or even doable.

Thank you for time :)
Last edited by ShadowDragon on February 22nd, 2021, 5:46 pm, edited 1 time in total.
User avatar
Active Colors
Moderator
Posts: 1251
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany

Re: variable text with image background

Post by Active Colors »

Can you post the whole code of what you have so far? Or maybe you can draw your desired result? I can't follow you really. If you draw an image how you want to make it look we can help you.
User avatar
Active Colors
Moderator
Posts: 1251
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany

Re: variable text with image background

Post by Active Colors »

There are several ways to center a meter relatively to other meter depending on how you want to structure you skin. This is a basic approach:
Capture.PNG

Code: Select all

[App1background]
Meter=Image
X=0
Y=0
W=250
H=100
SolidColor=10,10,10
UpdateDivider=-1

[App1]
Meter=String
X=([App1background:X]+([App1background:W]/2))
Y=([App1background:Y]+([App1background:H]/2))
FontFace=Arial
FontSize=25
FontColor=255,255,255
StringAlign=CenterCenter
AntiAlias=1
SolidColor=150,0,50
Text=Program
DynamicVariables=1
UpdateDivider=-1
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: variable text with image background

Post by balala »

EDIT: Sorry Active Colors, you just beat me (again...)
ShadowDragon wrote: February 19th, 2021, 6:52 pm Question is, How to use a background image and place the text in the center?
There is a pretty simple solution. Supposing you want to place the [MeterString] in center of the [MeterImage] meter, you have to use the following options on the [MeterString] meter:

Code: Select all

[MeterString]
Meter=STRING
X=([MeterImage:X]+[MeterImage:W]/2)
Y=([MeterImage:Y]+[MeterImage:H]/2)
...
StringAlign=CenterCenter
...
DynamicVariables=1
User avatar
ShadowDragon
Posts: 44
Joined: January 28th, 2021, 4:30 pm

Re: variable text with image background

Post by ShadowDragon »

Will try out tomorrow, while the image doesn't move when changing text.

but I notice in this code no Imagename:

Code: Select all

[App1background]
Meter=Image
X=0
Y=0
W=250
H=100
SolidColor=10,10,10
UpdateDivider=-1
which I presume it should still be added?

while the basic setup is mostly what I need, I update after testing around.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: variable text with image background

Post by jsmorley »

ShadowDragon wrote: February 19th, 2021, 9:40 pm Will try out tomorrow, while the image doesn't move when changing text.

but I notice in this code no Imagename:

Code: Select all

[App1background]
Meter=Image
X=0
Y=0
W=250
H=100
SolidColor=10,10,10
UpdateDivider=-1
which I presume it should still be added?

while the basic setup is mostly what I need, I update after testing around.
No, the Image meter can be used to draw a simple square/rectangle, by simply specifying the size, and then using SolidColor to "fill it in".

More precisely, what is going on is that when you have an Image meter with just a size defined with W and H, that becomes the size of the meter container itself, and SolidColor is used to make any entire meter container a solid color.

Just to demonstrate this, it doesn't even really have to be an Image meter... This would work as well, and I'd be tempted to use this since it is perhaps a bit more obvious what the intent is.

Code: Select all

[App1background]
Meter=Shape
X=0
Y=0
W=250
H=100
SolidColor=10,10,10
UpdateDivider=-1
User avatar
ShadowDragon
Posts: 44
Joined: January 28th, 2021, 4:30 pm

Re: variable text with image background

Post by ShadowDragon »

jsmorley wrote: February 19th, 2021, 10:13 pm No, the Image meter can be used to draw a simple square/rectangle, by simply specifying the size, and then using SolidColor to "fill it in".
I mean more as an image than a shape like this as an example (think that the black BG is gone (its a temp solution for visibility)
sample.png
The "App Name" change the name to the application itself, it's not a simple shape (even if it's effection),
but this become a fully themed menu, so I make a full suite of the things around it.

a shape is 1 thing, shape into a fish is another, but this is an image where the text is in between or drawn above it.

if I want it more easier but more time consumine (for creating the image), I need more images, but this also increase in size.
while I can mostly reduce it alot, but this is more text based part, so instead of 40 images in total, I only need 8 or 4
if I re-use it for each meter, but a bit variation makes its more unique.

but I dont know if the H and W are still needed in the code above to center if those size is automatically reconized.
You do not have the required permissions to view the files attached to this post.
User avatar
Active Colors
Moderator
Posts: 1251
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany

Re: variable text with image background

Post by Active Colors »

ShadowDragon wrote: February 20th, 2021, 9:48 am I mean more as an image than a shape like this as an example (think that the black BG is gone (its a temp solution for visibility)

sample.png

The "App Name" change the name to the application itself, it's not a simple shape (even if it's effection),
but this become a fully themed menu, so I make a full suite of the things around it.

a shape is 1 thing, shape into a fish is another, but this is an image where the text is in between or drawn above it.

if I want it more easier but more time consumine (for creating the image), I need more images, but this also increase in size.
while I can mostly reduce it alot, but this is more text based part, so instead of 40 images in total, I only need 8 or 4
if I re-use it for each meter, but a bit variation makes its more unique.

but I dont know if the H and W are still needed in the code above to center if those size is automatically reconized.

Code: Select all

[App1background]
Meter=Image
ImageName=#@#Images/sample.png
X=0
Y=0
W=500
H=100
UpdateDivider=-1
https://docs.rainmeter.net/manual-beta/meters/image/
https://docs.rainmeter.net/manual-beta/meters/general-options/image-options/
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: variable text with image background

Post by balala »

Active Colors wrote: February 20th, 2021, 5:20 pm

Code: Select all

[App1background]
Meter=Image
ImageName=#@#Images/sample.png
X=0
Y=0
W=500
H=100
UpdateDivider=-1
Note that even if the above ImageName option does work (and it definitely does), the correct form of it in Windows environment is ImageName=#@#Images\sample.png. In Windows you have to use backslash (\), not slash (/).
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: variable text with image background

Post by balala »

ShadowDragon wrote: February 20th, 2021, 9:48 am I mean more as an image than a shape like this as an example (think that the black BG is gone (its a temp solution for visibility)

sample.png
Please post the image as well.
ShadowDragon wrote: February 20th, 2021, 9:48 am but I dont know if the H and W are still needed in the code above to center if those size is automatically reconized.
If in some cases the text is longer and it doesn't fit in a single line, you probably will need to define them, along with a ClipString=1 option on the String meter.