It is currently March 29th, 2024, 3:28 pm

Trying to create background image transparent

Get help with creating, editing & fixing problems with skins
DavidFw1960
Posts: 42
Joined: December 27th, 2016, 1:32 am

Trying to create background image transparent

Post by DavidFw1960 »

Hi,

I am trying to create a background image like the Illustro background image - but I only want to use the lower colour.... The Illustro image seems to be split and I don't even understand how this happens..

The code:

Code: Select all

[Rainmeter]
; This section contains general settings that can be used to change how Rainmeter behaves.
Update=1000
Background=#@#Background.png
; #@# is equal to Rainmeter\Skins\illustro\@Resources
BackgroundMode=3
BackgroundMargins=0,34,0,14
So I have tried to create a transparent image in Gimp. Starting with a box but clipping the corners so I get rounded corners and then I select the white corners and clear it... But if I then try and convert the image color to alpha the whole image has this checkerplate look and does not look right.

I'm tearing my hair out trying to just have a transparent image like illustro but without the 2 tone effect.

What am I doing wrong?
Last edited by DavidFw1960 on May 14th, 2018, 10:29 pm, edited 1 time in total.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Trying to create background image transparent

Post by eclectic-tech »

DavidFw1960 wrote:Hi,

I am trying to create a background image like the Illustro background image - but I only want to use the lower colour.... The Illustro image seems to be split and I don't even understand how this happens..
Read: BackgroundMode and BackgroundMargins
DavidFw1960 wrote:The code:

Code: Select all

[Rainmeter]
; This section contains general settings that can be used to change how Rainmeter behaves.
Update=1000
Background=#@#Background.png
; #@# is equal to Rainmeter\Skins\illustro\@Resources
BackgroundMode=3
BackgroundMargins=0,34,0,14
When background mode is 3 (scaled), then you can specify which areas of the background are scaled using the background margins; the image will be scaled beginning at the left (0), 34 pixels from the top will not be scaled, scaled to the right edge (0), then the bottom 14 pixels will not be scaled.
DavidFw1960 wrote:So I have tried to create a transparent image in Gimp. Starting with a box but clipping the corners so I get rounded corners and then I select the white corners and clear it... But if I then try and convert the image color to alpha the whole image has this checkerplate look and does not look right.

I'm tearing my hair out trying to just have a transparent image like illustro but without the 2 tone effect.

What am I doing wrong?
PaintDotNet is a simpler program to use to create semi-transparent images. The "checkerplate" indicates transparency, it does not show in the displayed image.
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Trying to create background image transparent

Post by balala »

Beside eclectic-tech's (as usually very good) answer, I'd add that probably since Rainmeter got the Shape meters, I don1t think it worth to create complicate backgrounds using any image manipulation tool (like PaintDotNet, Gimp, Photoshop or whatever), especially that if you're using any of those apps, when you want to modify the created background, you have practically to create a new one. Instead I'd use a properly written Shape meter for the background. Eg the following one:

Code: Select all

[MeterBackground]
Meter=Shape
X=1
Y=1
Shape=Rectangle 0,0,220,70,5 | Extend MyModifiers1, MyModifiers2
MyModifiers1=StrokeWidth 2 | Stroke Color 0,120,255
MyModifiers2=Fill Color 0,0,0,120
UpdateDivider=-1
Just take care that:
  • You can't scale this meter as you scale the background (set up with the Background option in the [Rainmeter] section).
  • If you create a such meter, remove the Background option (along with all related options, like BackgroundMode, BackgroundMargins or whatever), from the [Rainmeter] section.
  • [MeterBackground] MUST have to be the FIRST meter of the code. This is very important, because if there are meters before this one, the background will cover the previously placed meters.
DavidFw1960
Posts: 42
Joined: December 27th, 2016, 1:32 am

Re: Trying to create background image transparent

Post by DavidFw1960 »

I'm going to have a play with the shape meter as suggested and will report back.

I changed yesterday to using this:

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
BackgroundMode=2
SolidColor=15,15,15,150
BevelType=0
And that is exactly what I want except the corners are square and I'd like rounded corners like illustro. I'll also check out that other image program suggestion. In Gimp, I'm not sure how to change the % transparence when converting to alpha and that might be why I'm seeing it doing what it's doing.

Will look at shape meter.

Thanks
DavidFw1960
Posts: 42
Joined: December 27th, 2016, 1:32 am

Re: Trying to create background image transparent

Post by DavidFw1960 »

Well crap!! That was easy!

Code: Select all

[MeterShapes]
Meter=Shape
Shape=Rectangle 0,0,210,105,7 | Fill Color 15,15,15,200
That is exactly what I was after. I had to use a fixed size so I don't suppose it can be adaptive in size?

I tried this:

Code: Select all

[MeterSize]
Measure=Calc
Formula=MeasureAllowanceGB < 99999 ? 105 : 85

[MeterShapes]
Meter=Shape
Shape=Rectangle 0,0,210,[MeterSize],7 | Fill Color 15,15,15,200
But that doesn't work. Any way I can make the meter a certain size based on a measure?
Last edited by DavidFw1960 on May 14th, 2018, 11:05 pm, edited 1 time in total.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Trying to create background image transparent

Post by jsmorley »

DavidFw1960 wrote:Well crap!! That was easy!

Code: Select all

[MeterShapes]
Meter=Shape
Shape=Rectangle 0,0,210,105,7 | Fill Color 15,15,15,200
That is exactly what I was after. I had to use a fixed size so I don't suppose it can be adaptive in size?

Code: Select all

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

[Variables]

[MeterShape]
Meter=Shape
Shape=Rectangle 0,0,([MeterString:W]+10),([MeterString:H]+10),7 | Fill Color 15,15,15,200
DynamicVariables=1

[MeterString]
Meter=String
X=5
Y=5
FontSize=12
FontWeight=400
FontColor=255,255,255,255
AntiAlias=1
Text=Now is the time#CRLF#for all good men#CRLF#to come to the aid#CRLF#of their country
OnUpdateAction=[!UpdateMeter MeterShape][!Redraw]
1.jpg
Note that we have to go back and update [MeterShape] after [MeterString] is drawn, since the shape has to be "behind" the string, and so much be first in the .ini, but is dependent on the size of the string meter.
You do not have the required permissions to view the files attached to this post.
DavidFw1960
Posts: 42
Joined: December 27th, 2016, 1:32 am

Re: Trying to create background image transparent

Post by DavidFw1960 »

THANK YOU!!!!!!!!!

This is what I ended up with and it's doing exactly what I was after.

Code: Select all

[MeterShapes]
Meter=Shape
Shape=Rectangle 0,0,210,([MeterSize:H]),7 | Fill Color 15,15,15,200
DynamicVariables=1

[MeterSize]
Meter=String
H=([MeasureAllowanceGB] < 99999 ? 105 : 95)
DynamicVariables=1