Made my first skin from scratch

[joe0121]

was on call for work yesterday and working all day from home so I decided to learn to make my own skin. It's pretty basic and im ashamed to say I put several hours into it between dealing with as/400 problems at work.

I have a ton of questions/tweaks I need to make ill post in the help topic but wanted to show off my progress so far.

Shout out to jsmorley his posts and especially his weather tutorial were invaluable.

[jsmorley]

Looks good!

[joe0121]

Thanks man!

[balala]

im ashamed to say I put several hours into it

No, don't be. It's not a shame if you don't know how to do something and it takes a lot of time until you figure it out. Worst is if you don't try and renounce to all at first problem. So go ahead and keep working. Satisfactions will come as you're accumulating experience.

I have a ton of questions/tweaks I need to make ill post in the help topic

Feel free to ask whenever you have questions.

[CyberTheWorm]

Great first job, looks way better than my first one.

[joe0121]

So here it the .ini for the sytem info meter.

Ideally I want to to do is have the widget for lack of a better term have a background image and have the widget have rounded corner and the image to be opaque. I also want to use the same image for all the individual section and have it scale accordingly but I used BackgroundMode=3 and the image didn't scale it was just the full size image with the rest of the text in the top right corner.


Something Akin to this:

widget.PNG

But with an actual image as the background and not the solid color and I want the image to scale with the size of the section, or heck even just center the image inside the box. bonus point for locking the width of each section to something like 360 pixel because as a work around I just set my bar graphs width to 350 pixel to keep all the widgets to the same length.

I know I could just use paint and crop a bunch of picture to the correct size but that seems ham fisted especially since I plan on making other changes later like adding or removing graphs.

Code: Select all

[Rainmeter]
Update=3000
AccurateText=1
DynamicWindowSize=1
BackgroundMode=2
SolidColor=34,34,34,75


[Metadata]
Name=Multi Core
Author= J. M. Dandrea
Information= simple skin to monitor system utilization
Version= 0.5 Beta
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0

[Variables]

[styleTitle]
StringAlign=Center
StringEffect=SHADOW
FontEffectColor=0,0,0
FontColor=0,204,51
FontFace=Courier New
FontWeight=900
FontSize=15
Padding=5,10,5,10

[MeasureOSVersion]
Measure=Plugin
Plugin=SysInfo
SysInfoType=OS_VERSION
UpdateDivider=-1

[MeasureSystemName]
Measure=Plugin
Plugin=SysInfo
SysInfoType=COMPUTER_NAME
UpdateDivider=-1


[MeterString_name]
Meter=String
MeterStyle=styleTitle
X=175R
Text=System Info


[MeterSysName]
Meter=String
X=0
Y=0R
StringEffect=SHADOW
FontEffectColor=0,0,0
MeasureName=MeasureSystemName
AntiAlias=1
FontColor=0,204,51
FontFace=Courier New
FontWeight=800
FontSize=10
Text=Host Name: %1

[MeterOS]
Meter=String
X=0
Y=0R
StringEffect=SHADOW
FontEffectColor=0,0,0
MeasureName=MeasureOSVersion
AntiAlias=1
FontColor=0,204,51
FontFace=Courier New
FontWeight=800
FontSize=10
Text=OS Version: %1

[MeasureDate]
Measure=Time
Format=%A, %b %#d, %Y

[MeterDate]
Meter=String
X=0
Y=0R
StringEffect=SHADOW
FontEffectColor=0,0,0
MeasureName=MeasureDate
AntiAlias=1
FontColor=0,204,51
FontFace=Courier New
FontWeight=800
FontSize=10
Text="Date: %1"


[MeasureUptime]
Measure=Uptime
Format="%4!i! days, %3!i! hours, %2!i! minutes"

[MeterUptime]
Meter=String
X=0
Y=0R
StringEffect=SHADOW
FontEffectColor=0,0,0
MeasureName=MeasureUptime
AntiAlias=1
FontColor=0,204,51
FontFace=Courier New
FontWeight=800
FontSize=10
Text="Uptime: %1"
Padding=0,0,60,5

[joe0121]

Great first job, looks way better than my first one.

Thank you for the kind words!

got tired of trying to glue other people stuff together and i've been learning programming and scripting for work so though hey learning to create rain meter skins from scratch might be good practice.

[balala]

Ideally I want to to do is have the widget for lack of a better term have a background image and have the widget have rounded corner and the image to be opaque. I also want to use the same image for all the individual section and have it scale accordingly but I used BackgroundMode=3 and the image didn't scale it was just the full size image with the rest of the text in the top right corner.

Instead of creating and using an image as background image, I'd recommend you to create a Shape meter and use that one as background. Since such a Shape meter is created purely by code, no image or other type of files are involved, it is extremely simple to modify it whenever needed. You can even dynamically modify it, for instance increase its height if there is more information at a given moment you have to show on the skin, then decrease the height when less information are present. Shape meters are complex enough to can create a good looking and working background. No more need to use a BackgroundImage and scale it.
My opinion...

[joe0121]

Instead of creating and using an image as background image, I'd recommend you to create a Shape meter and use that one as background. Since such a Shape meter is created purely by code, no image or other type of files are involved, it is extremely simple to modify it whenever needed. You can even dynamically modify it, for instance increase its height if there is more information at a given moment you have to show on the skin, then decrease the height when less information are present. Shape meters are complex enough to can create a good looking and working background. No more need to use a BackgroundImage and scale it.
My opinion...

Ok thanks for the advice I will play around with it this evening

[balala]

Ok thanks for the advice I will play around with it this evening

That's a much versatile way to create backgrounds. Feel free to ask if you have any question.