HSLiders | Color Selector

[RicardoTM]

-------- HSLiders Classic--------
by RicardoTM and Yincognito
Deprecated: Newer Version here: https://forum.rainmeter.net/viewtopic.php?p=223053#p223052

"RGB is completely useless as a color specification for real people. Almost anything is better; certainly HSL is better."

"The annoying RGB notation is troubling to many users and certainly error prone. I encourage you to adopt a more human-centered solution and HSL seems to be the only candidate for now. The W3C campaign for universal access would be undermined by adoption of only RGB."

What started as a rework of the RGBCode skin I use on my ResizableGauges skin, became an experiment on Color Models and the challenge of doing it using only Rainmeter. No images, libraries nor scripting, pure math.
After a lot of research and experimentation, Yincognito and I got to this result:

HSLiders.jpg

The design is inspired on RGBCode skin and HSLPicker website.

You can either drag, scroll, or input HSL or RGB values directly to select a color, then you can copy the color code on RGB or HEX format.
You can also save up to 30 color swatches. Neat, right?.
Why HSL? Because I like it, that's it. You can select any color and then find different shades and tones pretty quickly.
Hex output is quite useful when working on Photoshop, Illustrator or any other software, even Rainmeter, you just copy the code and paste it wherever you need to.

HSLIders1.gif

While not the most simple skin code-wise (700+ lines), it gets the job done quite nicely.

Although it was designed mainly as an standalone tool, it can be perfectly implemented on other skins, all colors (including swatches) are stored on a separated .inc file.

How it works:

RGB2HSL and HSL2RGB color space conversions (1), RGB2HEX conversion (2), as well as POS2VAL and VAL2POS circular dragging conversions (3) made by Yincognito:

(1) The OfRGB and OfHSL, aka "FromRGB" and "FromHSL" measures use the color space conversion formulas for the corresponding intervals to get the other color space attributes, when the current color space attributes are changed.

(2) The RGB2HEX measure is using addition and multiplication in the base conversion formulas to store the decimal representations of the hexadecimal digits in a decimal number, whose string is then substituted into the proper hexadecimal form (where 10 is A, 11 is B, and so on).

(3) The MOUSE plugin measure retrieves the X and Y of the mouse pointer and calculates the two argument arctangent angle representing the POSition of the mouse in relation to the center of the circle or rotation. It also subsequently converts that angle into suited intervals and directions to get the VALue of H, S, L or R, G and B corresponding to it on the circular shape, taking into account the excluded arc on which dragging is not permitted. Then, in the Shape meter, the ratios of the said VALues of R, G or B to their maximums, in relation to the starting and rotation angles, are used with the trigonometric functions to display the dragging marker in the proper POSition on the circular shape.

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
CONTROLS
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

HSL:
Mouse Dragging | Scrolling | Right click to input new value | Double click to reset.

RGB:
Mouse Dragging | Scrolling | Left click on value to input new value.

Copy Color Code to Clipboard:
Click on either RGB or HEX.

Color Swatches:
Click on "▼" to open swatches tab.
Right click on a swatch to set swatch to current color.
Left click to set current color to swatch.
Scroll wheel click to delete.
Click on "▲" to close swatches tab.

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
Package
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
This version is deprecated
Newer version on the post below.

HSLiders_1.0.rmskin

Enjoy it

Happy New Year.

[RicardoTM]

--- HSLidersSTA ---
STand Alone
Designed as an Independent Tool

Since my "skinning" skills have increased, I decided to re-make HSLiders from the ground up to make it work with raincolors.lua. I wanted to make it the most compact I could, without sacrificing features, with the only one missing being the swatches (for now, might come in a future patch). Don't worry there are new features, it can generate complementary colors and includes a pretty eyedropper.



This is the STA version, designed to be used as an independent tool.

HSLidersSTA_1.0.13.04.24.rmskin

On the post below you'll find the STD version, which was designed to be implemented on other skins.

Right click on swatch to open color manipulation menu.
Press scroll wheel on the swatch to copy the color, Left click to paste it.

ezgif.com-video-to-gif-converter (10).gif

Click on Scale icon to change its size and aspect ratio.
Scroll on the top part to resize.

dAsset 8d.jpg

Press scroll wheel to open color manipulation menu.
The Eyedropper copies the color automatically.

Untitled2-ezgif.com-video-to-gif-converter.gif

It includes all Adobe color themes, Windows 10 and 11 and 3 extra user themes.

dAsset 9b.jpg

dAsset 10c.jpg

• Plugins used:
• Cursor Color v1.3.0.0 by jsmorley
• HotKey v1.0.0.12 by Brian
• Mouse v3.2.0 by NighthawkSLO
• PluginClipboard v1.0.0 by Evgenii
  
  Scripts used:
• NirCmd.exe v2.86 by NirSoft
• raincolors.lua v1.3 by RicardoTM
• Eyedropper.lua by raiguard

*Known bugs:
The paste icon on the swatch won't show on first mouse over.

Changelog:
13/04/2024 - v1.0 Released

[RicardoTM]

--- HSLidersSTD ---
STandarD
Designed to be implemented on other skins

This version can be easily implemented on other skins. It retains almost all STA version functions, except it can't be minimized, no themes, it has a write icon, and has file structure differences.

The package includes a Dynamic Example skin.

HSLidersSTD_1.0.rmskin

ezgif.com-video-to-gif-converter (12).gif

Remember you have to include these plugins on your packages to distribute your skins:

• Plugins used:
• Cursor Color v1.3.0.0 by jsmorley
• HotKey v1.0.0.12 by Brian
• Mouse v3.2.0 by NighthawkSLO
• PluginClipboard v1.0.0 by Evgenii
  
  Scripts used:
• NirCmd.exe v2.86 by NirSoft
• raincolors.lua v1.3 by RicardoTM
• Eyedropper.lua by raiguard

How to implement:
Copy HSLidersSTD folder and paste it on your skin's root folder.
Copy @Resoruces\Fonts folder and paste it on your skin's @Resources folder.
Follow instructions inside Example.ini and HSLiders.ini

Changelog:
15/04/2024 - v1.0 Released

[RicardoTM]

Update:HSLidersSTA v1.0 has been released, package on this post.

[eclectic-tech]

Very nice work!

Thanks for sharing!

[RicardoTM]

Very nice work!

Thanks for sharing!

Thanks for trying it, I'm glad you liked it

[RicardoTM]

Update:HSLidersSTD v1.0 has been released, package on this post.

[sl23]

I've quite often needed a colour picker in general. There are so many apps, some good, some not so, some very bloated. I like the idea of this and how compact it is. It saves me having a dedicated app for something that doesn't get used a great deal but is there when needed.

One thing I would request, which may or may not be welcomed by yourself or others, is that I have now planned to install several utilities from the forums. But due to how people organise their skins, as discussed before, they become a mess when using a single @Resources folder. I have manually moved all components to a sub folder called #@#HSLidersSTA. My reasoning is that when you install several skins to be combined into a suite of utilities as I am currently doing, the resources folder becomes a complete jumbled mess due to poor organisation. Basically, everyone dumps their files straight into the @Resources folder making it difficult to dissect if you decide to remove or work on something that a user has added.

An example, let's say I add this skin, my skin launcher, my Segoe Fluent Font selector, and several of the top of the list utilities from the forum. Now if all of those were to be placed directly in a combined suite, they generally all just have random files placed directly within @Resources, how do you know which files belong to which skins? I suggested before and do so again here, requesting that you make a slight change and place all your files within a subfolder named after the skin.

For advanced users like yourself, the moderators and the dev's, they create their own stuff that they use. Most of us have to make do with what we find on here as we have little chance of creating something this complex. Which means we are left trying to organise a mess of files or having a ton of different Suites folders with one or two skins in to avoid turning the resources folder into a jumbled mess of random skin files. Fonts I have kept in the same place though.

Although the several others disagreed with my previous post, hopefully you will change this. Although I have personally changed it, I imagine many users don't know how to and rely solely on the Rainstaller to manage their installations. I dislike that as I don't know where things are being installed to. I like to know what's being put where.

Anyway, great skin, very much appreciated, thanks for sharing!
I would like to see not only the swatches, but the ability to load and save a palette of swatches.

[RicardoTM]

I've quite often needed a colour picker in general. There are so many apps, some good, some not so, some very bloated. I like the idea of this and how compact it is. It saves me having a dedicated app for something that doesn't get used a great deal but is there when needed.

One thing I would request, which may or may not be welcomed by yourself or others, is that I have now planned to install several utilities from the forums. But due to how people organise their skins, as discussed before, they become a mess when using a single @Resources folder. I have manually moved all components to a sub folder called #@#HSLidersSTA. My reasoning is that when you install several skins to be combined into a suite of utilities as I am currently doing, the resources folder becomes a complete jumbled mess due to poor organisation. Basically, everyone dumps their files straight into the @Resources folder making it difficult to dissect if you decide to remove or work on something that a user has added.

An example, let's say I add this skin, my skin launcher, my Segoe Fluent Font selector, and several of the top of the list utilities from the forum. Now if all of those were to be placed directly in a combined suite, they generally all just have random files placed directly within @Resources, how do you know which files belong to which skins? I suggested before and do so again here, requesting that you make a slight change and place all your files within a subfolder named after the skin.

For advanced users like yourself, the moderators and the dev's, they create their own stuff that they use. Most of us have to make do with what we find on here as we have little chance of creating something this complex. Which means we are left trying to organise a mess of files or having a ton of different Suites folders with one or two skins in to avoid turning the resources folder into a jumbled mess of random skin files. Fonts I have kept in the same place though.

Although the several others disagreed with my previous post, hopefully you will change this. Although I have personally changed it, I imagine many users don't know how to and rely solely on the Rainstaller to manage their installations. I dislike that as I don't know where things are being installed to. I like to know what's being put where.

Anyway, great skin, very much appreciated, thanks for sharing!
I would like to see not only the swatches, but the ability to load and save a palette of swatches.

Hey sl23, thank you for bringing this to my attention. I can surely take it into consideration for this and future projects, as I understand how complex organizing multiple skin files can become.

Could you please share the skin with me to see exactly how you organized it? This would save me some time since I'm focusing on the next update for my Gauges.

I have my doubts about this since, according to the docs, the @Resources folder is ignored when scanning for skins, so using it to store resources improves the initial load time. But I'm open to try it out and see what happens. I think this HSLiders folder could very well be inside the @Resources folder anyway. Although I still have doubts about the fonts, since the docs say "fonts in the @Resources\Fonts folder are automatically loaded and can be used with the FontFace option in string meters." Which makes me wonder what happens with fonts that are not in this folder, do they have to be loaded manually? How?

And thank you, I'm glad you like HSLiders

[sl23]

I think you misunderstand. I'm still using the @Resources folder from your skin. I created a new folder within the Rainmeter/Skins folder called Utilities:

Code: Select all

Skins/
 - Utilities/
   - HSLidersSTA/HSLiders.ini
     - Eyedropper/Eyedropper.ini and ZoomBitmap.bmp
   - @Resources/
     - HSLidersSTA/ (all files for the skin placed here)
     - Fonts/ (Fonts still in here)

I went through every file in your skin and change the location to add the extra subfolder, which I just named after the skin, then moved all those files into it.

Hope that makes sense.

Thanks for accepting the idea.
I think it makes sense for users not so savvy when wanting to uninstall skins. And helps those who are a little more savvy how to organise and keep track of which files belong to which skin. This way, I can create my own suite, which is a collection of useful utilities.