RGB Slider Color Selector

[SizeableSchlong]

This is my first project, so just looking for general feedback. Also, how can I optimize this to make it easy to import for others? Should I set it up as an extension? Any feedback is appreciated.

Link to Demo https://imgur.com/RTVV8qD

Code: Select all

[Rainmeter]
Update=0
DynamicWindowSize=1

[MetaData]
Name=RGBColorSlider
Author=SizeableSchlong

** Notes ** 
		
		You can reference the RGB Values by either: 
		
			referencing individual colors with #Red#, #Green#, #Blue#, or #Alpha#
 	or		combining #Red# + #Green# + #Blue# + #Alpha#
 	or		referencing [RGBColorStringMeter]
 	or		referencing [RGBColorStringMeasure]

		All icons / sliders / etc user the "Image" format, so they should be easy to replace,
		should you want to add linked image files such as a .png
		
		Almost all positioning is done in reference to the slider above it, so be cautious
		if removing a bar. 


[Variables]
Red=255
Green=255
Blue=255
Alpha=255
PositionRed=100
PositionGreen=100
PositionBlue=100
PositionAlpha=100

[BackgroundImage]
Meter=Image
AntiAlias=1
X=0
Y=0
W=350
H=320
SolidColor=41,46,45,255

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[RedLine]
Meter=Image
AntiAlias=1
X=20
Y=30
W=200
H=10
SolidColor=0,0,0,255
LeftMouseUpAction=[!SetVariable PositionRed "$MouseX:%$"][!SetVariable Red "(255*$MouseX:%$/100)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterSliderRed]
Meter=Image
AntiAlias=1
X=(#PositionRed#*[RedLine:W]/100)r
Y=-3r
W=5
H=16
SolidColor=255,0,0,255
DynamicVariables=1

[MeterPositionRed]
Meter=String
AntiAlias=1
X=15R
Y=10R
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=RIGHT
AntiAlias=1
Text=#PositionRed#%
DynamicVariables=1

[RedLinePreviewBox]
Meter=Image
X=([RedLine:X]+[RedLine:W]+35)
Y=([RedLine:Y]-5)
W=([RedLine:H]+10)
H=([RedLine:H]+10)
SolidColor=#Red#,0,0,255
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[GreenLine]
Meter=Image
AntiAlias=1
X=20
Y=([MeterPositionRed:Y]+30)
W=200
H=10
SolidColor=0,0,0,255
LeftMouseUpAction=[!SetVariable PositionGreen "$MouseX:%$"][!SetVariable Green "(255*$MouseX:%$/100)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterSliderGreen]
Meter=Image
AntiAlias=1
X=(#PositionGreen#*[GreenLine:W]/100)r
Y=-3r
W=5
H=16
SolidColor=0,255,0,255
DynamicVariables=1

[MeterPositionGreen]
Meter=String
AntiAlias=1
X=15R
Y=10R
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=RIGHT
AntiAlias=1
Text=#PositionGreen#%
DynamicVariables=1

[GreenLinePreviewBox]
Meter=Image
X=([GreenLine:X]+[GreenLine:W]+35)
Y=([GreenLine:Y]-5)
W=([GreenLine:H]+10)
H=([GreenLine:H]+10)
SolidColor=0,#Green#,0,255
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


[BlueLine]
Meter=Image
AntiAlias=1
X=20
Y=([MeterPositionGreen:Y]+30)
W=200
H=10
SolidColor=0,0,0,255
LeftMouseUpAction=[!SetVariable PositionBlue "$MouseX:%$"][!SetVariable Blue "(255*$MouseX:%$/100)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterSliderBlue]
Meter=Image
AntiAlias=1
X=(#PositionBlue#*[BlueLine:W]/100)r
Y=-3r
W=5
H=16
SolidColor=0,0,255,255
DynamicVariables=1

[MeterPositionBlue]
Meter=String
AntiAlias=1
X=15R
Y=10R
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=RIGHT
AntiAlias=1
Text=#PositionBlue#%
DynamicVariables=1

[BlueLinePreviewBox]
Meter=Image
X=([BlueLine:X]+[BlueLine:W]+35)
Y=([BlueLine:Y]-5)
W=([BlueLine:H]+10)
H=([BlueLine:H]+10)
SolidColor=0,0,#Blue#,255
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[AlphaLine]
Meter=Image
AntiAlias=1
X=20
Y=([MeterPositionBlue:Y]+30)
W=200
H=10
SolidColor=0,0,0,255
LeftMouseUpAction=[!SetVariable PositionAlpha "$MouseX:%$"][!SetVariable Alpha "(255*$MouseX:%$/100)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterSliderAlpha]
Meter=Image
AntiAlias=1
X=(#PositionAlpha#*[AlphaLine:W]/100)r
Y=-3r
W=5
H=16
SolidColor=255,255,255,255
DynamicVariables=1

[MeterPositionAlpha]
Meter=String
AntiAlias=1
X=15R
Y=10R
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=RIGHT
AntiAlias=1
Text=#PositionAlpha#%
DynamicVariables=1

[AlphaTextDescription]
Meter=String
AntiAlias=1
X=([BlueLinePreviewBox:X]+[BlueLinePreviewBox:W]/2)
Y=([AlphaLine:Y]+[AlphaLine:H]/2)
Text=Alpha
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=12
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CenterCenter
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[RGBPreviewBox]
Meter=Image
X=20
Y=([MeterPositionAlpha:Y]+30)
W=50
H=50
SolidColor=#Red#,#Green#,#Blue#,#Alpha#
DynamicVariables=1


; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


[RedFormatText]
Measure=Calc
Formula=Round(#Red#,0)
DynamicVariables=1

[GreenFormatText]
Measure=Calc
Formula=Round(#Green#,0)
DynamicVariables=1

[BlueFormatText]
Measure=Calc
Formula=Round(#Blue#,0)
DynamicVariables=1

[AlphaFormatText]
Measure=Calc
Formula=Round(#Alpha#,0)
DynamicVariables=1

[RGBColorStringMeasure]
Measure=String
String=RGB:([RedFormatText], [GreenFormatText], [BlueFormatText], [AlphaFormatText])
DynamicVariables=1

[RGBColorStringMeter]
Meter=String
String=([RedFormatText],[GreenFormatText],[BlueFormatText],[Alpha])
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


[RGBColorTextOutput]
Meter=String
X=(([RGBPreviewBox:W]+10)+([RGBPreviewBox:X]))
Y=(([RGBPreviewBox:Y])+([RGBPreviewBox:H]/2))
FontColor = 255,255,255,255
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=15
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LeftCenter
AntiAlias=1
Text=[RGBColorStringMeasure]
DynamicVariables=1

[eclectic-tech]

Nice skin!

I might suggest adding mouse scroll controls to make it easier to fine tune the selected value.
Below is your code with scroll up/down added to each component RGBA.

To distribute your skin, I would suggest following the instructions to create a skin package for publication.

Code: Select all

[Rainmeter]
Update=0
DynamicWindowSize=1

[MetaData]
Name=RGBColorSlider
Author=SizeableSchlong

** Notes **
      
      You can reference the RGB Values by either:
      
         referencing individual colors with #Red#, #Green#, #Blue#, or #Alpha#
    or      combining #Red# + #Green# + #Blue# + #Alpha#
    or      referencing [RGBColorStringMeter]
    or      referencing [RGBColorStringMeasure]

      All icons / sliders / etc user the "Image" format, so they should be easy to replace,
      should you want to add linked image files such as a .png
      
      Almost all positioning is done in reference to the slider above it, so be cautious
      if removing a bar.


[Variables]
Red=255
Green=255
Blue=255
Alpha=255
PositionRed=100
PositionGreen=100
PositionBlue=100
PositionAlpha=100

[BackgroundImage]
Meter=Image
AntiAlias=1
X=0
Y=0
W=350
H=320
SolidColor=41,46,45,255

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[RedLine]
Meter=Image
AntiAlias=1
X=20
Y=30
W=200
H=10
SolidColor=0,0,0,255
LeftMouseUpAction=[!SetVariable PositionRed "$MouseX:%$"][!SetVariable Red "(255*$MouseX:%$/100)"][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!SetVariable PositionRed "(Clamp(#PositionRed#+1,0,100))"][!SetVariable Red "(255*#PositionRed#/100)"][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable PositionRed "(Clamp(#PositionRed#-1,0,100))"][!SetVariable Red "(255*#PositionRed#/100)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterSliderRed]
Meter=Image
AntiAlias=1
X=(#PositionRed#*[RedLine:W]/100)r
Y=-3r
W=5
H=16
SolidColor=255,0,0,255
DynamicVariables=1

[MeterPositionRed]
Meter=String
AntiAlias=1
X=15R
Y=10R
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=RIGHT
AntiAlias=1
Text=#PositionRed#%
DynamicVariables=1

[RedLinePreviewBox]
Meter=Image
X=([RedLine:X]+[RedLine:W]+35)
Y=([RedLine:Y]-5)
W=([RedLine:H]+10)
H=([RedLine:H]+10)
SolidColor=#Red#,0,0,255
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[GreenLine]
Meter=Image
AntiAlias=1
X=20
Y=([MeterPositionRed:Y]+30)
W=200
H=10
SolidColor=0,0,0,255
LeftMouseUpAction=[!SetVariable PositionGreen "$MouseX:%$"][!SetVariable Green "(255*$MouseX:%$/100)"][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!SetVariable PositionGreen "(Clamp(#PositionGreen#+1,0,100))"][!SetVariable Green "(255*#PositionGreen#/100)"][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable PositionGreen "(Clamp(#PositionGreen#-1,0,100))"][!SetVariable Green "(255*#PositionGreen#/100)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterSliderGreen]
Meter=Image
AntiAlias=1
X=(#PositionGreen#*[GreenLine:W]/100)r
Y=-3r
W=5
H=16
SolidColor=0,255,0,255
DynamicVariables=1

[MeterPositionGreen]
Meter=String
AntiAlias=1
X=15R
Y=10R
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=RIGHT
AntiAlias=1
Text=#PositionGreen#%
DynamicVariables=1

[GreenLinePreviewBox]
Meter=Image
X=([GreenLine:X]+[GreenLine:W]+35)
Y=([GreenLine:Y]-5)
W=([GreenLine:H]+10)
H=([GreenLine:H]+10)
SolidColor=0,#Green#,0,255
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


[BlueLine]
Meter=Image
AntiAlias=1
X=20
Y=([MeterPositionGreen:Y]+30)
W=200
H=10
SolidColor=0,0,0,255
LeftMouseUpAction=[!SetVariable PositionBlue "$MouseX:%$"][!SetVariable Blue "(255*$MouseX:%$/100)"][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!SetVariable PositionBlue "(Clamp(#PositionBlue#+1,0,100))"][!SetVariable Blue "(255*#PositionBlue#/100)"][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable PositionBlue "(Clamp(#PositionBlue#-1,0,100))"][!SetVariable Blue "(255*#PositionBlue#/100)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterSliderBlue]
Meter=Image
AntiAlias=1
X=(#PositionBlue#*[BlueLine:W]/100)r
Y=-3r
W=5
H=16
SolidColor=0,0,255,255
DynamicVariables=1

[MeterPositionBlue]
Meter=String
AntiAlias=1
X=15R
Y=10R
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=RIGHT
AntiAlias=1
Text=#PositionBlue#%
DynamicVariables=1

[BlueLinePreviewBox]
Meter=Image
X=([BlueLine:X]+[BlueLine:W]+35)
Y=([BlueLine:Y]-5)
W=([BlueLine:H]+10)
H=([BlueLine:H]+10)
SolidColor=0,0,#Blue#,255
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[AlphaLine]
Meter=Image
AntiAlias=1
X=20
Y=([MeterPositionBlue:Y]+30)
W=200
H=10
SolidColor=0,0,0,255
LeftMouseUpAction=[!SetVariable PositionAlpha "$MouseX:%$"][!SetVariable Alpha "(255*$MouseX:%$/100)"][!UpdateMeter *][!Redraw]
MouseScrollUpAction=[!SetVariable PositionAlpha "(Clamp(#PositionAlpha#+1,0,100))"][!SetVariable Alpha "(255*#PositionAlpha#/100)"][!UpdateMeter *][!Redraw]
MouseScrollDownAction=[!SetVariable PositionAlpha "(Clamp(#PositionAlpha#-1,0,100))"][!SetVariable Alpha "(255*#PositionAlpha#/100)"][!UpdateMeter *][!Redraw]
DynamicVariables=1

[MeterSliderAlpha]
Meter=Image
AntiAlias=1
X=(#PositionAlpha#*[AlphaLine:W]/100)r
Y=-3r
W=5
H=16
SolidColor=255,255,255,255
DynamicVariables=1

[MeterPositionAlpha]
Meter=String
AntiAlias=1
X=15R
Y=10R
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=10
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=RIGHT
AntiAlias=1
Text=#PositionAlpha#%
DynamicVariables=1

[AlphaTextDescription]
Meter=String
AntiAlias=1
X=([BlueLinePreviewBox:X]+[BlueLinePreviewBox:W]/2)
Y=([AlphaLine:Y]+[AlphaLine:H]/2)
Text=Alpha
FontColor=220,220,220
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=12
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=CenterCenter
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[RGBPreviewBox]
Meter=Image
X=20
Y=([MeterPositionAlpha:Y]+30)
W=50
H=50
SolidColor=#Red#,#Green#,#Blue#,#Alpha#
DynamicVariables=1


; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


[RedFormatText]
Measure=Calc
Formula=Round(#Red#,0)
DynamicVariables=1

[GreenFormatText]
Measure=Calc
Formula=Round(#Green#,0)
DynamicVariables=1

[BlueFormatText]
Measure=Calc
Formula=Round(#Blue#,0)
DynamicVariables=1

[AlphaFormatText]
Measure=Calc
Formula=Round(#Alpha#,0)
DynamicVariables=1

[RGBColorStringMeasure]
Measure=String
String=RGB:([RedFormatText], [GreenFormatText], [BlueFormatText], [AlphaFormatText])
DynamicVariables=1

[RGBColorStringMeter]
Meter=String
String=([RedFormatText],[GreenFormatText],[BlueFormatText],[Alpha])
DynamicVariables=1

; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
; - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


[RGBColorTextOutput]
Meter=String
X=(([RGBPreviewBox:W]+10)+([RGBPreviewBox:X]))
Y=(([RGBPreviewBox:Y])+([RGBPreviewBox:H]/2))
FontColor = 255,255,255,255
FontEffectColor=0,0,0
StringEffect=Shadow
FontSize=15
FontFace=Segoe UI
StringStyle=BOLD
StringAlign=LeftCenter
AntiAlias=1
Text=[RGBColorStringMeasure]
DynamicVariables=1

[balala]

just looking for general feedback.

Update=0 in the [Rainmeter] section is not a valid value. The smallest valid, not negative value is Update=16 (second paragraph here also see below for negative values), however are very less cases when a such value should be used (usually on skins working with the AudioLevel plugin, or neither there).
In fact at least as far as I looked through the code, for you the best value would be Update=-1, which means the skin is never updated. For mouse controled skins I think this is the best option.

[jsmorley]

You can in fact make a real "slider" out of those elements, rather than, or in addition to, clicking somewhere on the bar.

https://forum.rainmeter.net/viewtopic.php?p=136100#p136100

[eclectic-tech]

You can in fact make a real "slider" out of those elements, rather than, or in addition to, clicking somewhere on the bar.

https://forum.rainmeter.net/viewtopic.php?p=136100#p136100

I thought about mentioning that, but I think the OP wanted to create something that can easily be incorporated into other setting skin controls.

Adding a third party plugin to provide drag adjustment might complicate the process (for newbies) and discourage adding these features to a setting skin.

Just my take on their intention.

Of course an author has the option to do as they please, and all suggestions are better than none

[SizeableSchlong]

Thanks for the feedback everyone! I've looked into using some plugins, but I wanted to see what I could do without them first. Great idea with the scroll wheel, implemented it immediately. I thought about adding a "+1" and "-1" option, but the scroll wheel was much more adequate. As for update=0, I have no idea why that was there. I have it as -1 in my file, and must've forgot to save before copying the code. Nice catch!

[balala]

As for update=0, I have no idea why that was there. I have it as -1 in my file, and must've forgot to save before copying the code.

In your post you had Update=0, that's why I made that comment. But if you're using your skin with Update=-1, it's much better, congratulations.