ColorPane, a suite of color tools for Studio [v0.4.0]

Resources Community Resources
, ,
#21

Yeah, that was what I was asking because plugins usually don’t put their api scripts in Core gui.

#22

A really neat feature I’d like to see added into the gradient editor is the ability to utilize gamma correction, or a different interpolation space, using that other module of yours.

In my eyes, the option would have 3 modes, “Off”, “Standard”, and “Ultra”, where “off” does nothing but stock Roblox interpolation and allows for all 20 keypoints. “Standard” would only allow 10 keypoints, and would reserve one hidden keypoint between each of the available 10 that adjusts the middle between the two editable keypoints appropriately (resulting in 19 keypoints on the sequence used). “Ultra” would allow only 8 keypoints, but have two hidden keypoints between each (resulting in all 20 keypoints on the sequence being used).

For most of my personal use cases, one keypoint between them is good enough to work with, but having the extra resolution could be useful.

Your thoughts on this?

1 Like
#23

Cool plugin, can you give out a non plugin version, like a GUI and scripted and stuff and it will have rgb value inside the GUI ?
Bc I really needed one of these for a customize preference GUI for my plugin

#24

I’ve been thinking about creating a version of ColorPane that has just the color picking components where you can integrate them into existing UI, but I haven’t really worked out any of the details on how that would work.

I may work on something like that in the future, but there aren’t any immediate plans to do so.

#25

It sounds like an interesting idea, and it doesn’t seem too complicated to add into the plugin. I’ll consider adding such a feature in a future version.

1 Like
#26

Hello everyone, ColorPane has been updated to v0.3.1. This is a very small update which fixes a single bug:

  • Fixed a bug where trying to use the scroll wheel on a dropdown selector (e.g. slider or palette pickers) resulted in a blank page

If you don’t know what this update is talking about, there is a shortcut where you can use the scroll wheel to switch between sliders and palettes instead of having to open the dropdown. Here’s a video (scroll wheel not included):

Technical information about the bug

As far as I can tell, sometime between v0.3.0 and v0.3.1 there was an update where the Z component of an InputObject’s Position was changed from -1 or 1 to -0.5 or 0.5. The original dropdown UI code relied on this value being -1 or 1, so the change broke scroll wheel functionality.

Apologies for the lack of new stuff in this update. Unless there are new bugs discovered or reported, the next version should be a feature update.

In other news, we recently passed 300 sales! It means a lot to know that so many people have tried out ColorPane. Thank you for using the plugin, and happy holidays!

:christmas_tree: :cookie:

3 Likes
#27

Thanks for making this available to the community! I am interested in using this as part of a plugin, as it appears Roblox Studio does not provide color picker functionality for plugin authors. I’ve seen a lot of Roblox devs asking for this feature, so I imagine yours would be great for many of us.

How can I reference ColorPane from my plugin? I am OK with either compiling your code directly into mine or requiring the end user to have already downloaded your plugin and referencing it that way. I tried both and failed.

Reference Github Sources
When I cloned your repo from github and referenced it from my script, I get all sorts of errors relating to not being able to find referenced .lua files. Specifically, the folders under your ‘include’ dir are empty - promises, roact, etc.

I could take some guesses at which repo/release/etc. to clone for each of those repos and try to manually plumb things in, but I’m guessing there is some procedure to do this automatically that I’m not aware of.

Reference Live Plugin
I am not familiar with how to reference an existing live plugin, so I guessed a few things - CoreGui:WaitForChild(…), PluginGuiService(…) - and haven’t yet been able to figure it out.

Thanks for your help!

#28

To use the color pickers from another plugin, you need to use the ColorPane API, which requires having the plugin installed.

This API is only exposed after the user presses the Inject API button in the toolbar, or at start-up if the user has the specific setting enabled. If the user allows this, there will be a ModuleScript inserted into CoreGui named ColorPane which will contain the API. You can read this page for more information about how to inject and acquire the API, and this page for the API reference.

You don’t need to compile any code unless you want to contribute to the plugin’s development. Hope this helps!

1 Like
#29

Thank you! This helped me better understand what “Inject API” means and I was able to get the color picker to pop up from my plugin. Success!

One note to other “promise-newbies” like me: I had a hard time figuring out how to determine if the user had pressed the “Cancel” button on ColorPane. This is what I ended up with to detect cancellation:

        promise
            :andThen(
                function(newColor)
                    -- This never seems to get triggered.  Don't know why... 
                    -- ... but it's not important because we get notified in PromptOptions::OnColorChanged
                    print("Promise finished with status=" .. tostring(promise:getStatus()))
                end,
                function(errorObject)
                    error("Caught promise error: " .. tostring(errorObject))
                end)
            :doneCall(
                function()
                    local promiseStatus = promise:getStatus()
                    if (promiseStatus == "Cancelled") then
                        print("User cancelled color selection")
                    end
                end)
            :catch(
                function(errorObject)
                    error("Promise catch block entered: " .. tostring(errorObject))
                end)
#30

Can you color a specific face on the part?

#31

No, but as far as I know you can’t color individual faces of Parts anyway. This plugin doesn’t add building utilities like the one you’re describing, it adds ways for designers to choose colors for their projects.

1 Like
#32

This looks pretty cool, I wanted to try this out myself at one point but I couldn’t figure out the math.

Anyway, is there any chance of a built-in module that just calculates the colors with the UI? This would make it easier for integration with games, where a localscript can just call a function in a modulescript, passing in a folder which contains the UI, and gets the Color3 as a response.

#33

I think I need clarification on what you’re asking for. Are you asking for a module that lets you pass a GUI element to hook up for picking colors?

1 Like
#34

Yes, so developers can get the color tools UI, add it to their game and use a module to handle updating the UI and get the selected color etc.

#35

Ok, I see. I don’t have any plans on making such a module, but I have been thinking about how ColorPane could be adapted to be used in games. It’s a project I want to try in the future, but I don’t have any immediate plans to work on it. Sorry about that.

1 Like
#36

Just an update on how things are going

Hello everyone, v0.4 isn’t ready yet, but there are some important things I want to tell you about before its release. I’m planning for a release by the end of the month, if nothing goes wrong.

Translations

I’ve recently added localisation functionality, so that ColorPane can be accessible to people who speak different languages. I don’t know any langauges other than English, however, so I would like your help to translate the plugin.

If you’re interested in helping to translate ColorPane, you can contribute to the Crowdin project.

API Injection Changes

API injection is becoming automatic in v0.4. The first time you open up ColorPane after the update, you will receive a prompt that you are about to be asked for script injection. You won’t be able to use the plugin until you click “I understand”.

Script injection prompt

This is being done to simplify user experience. If you’re not comfortable with script injection, you can of course deny the permission, however you won’t be able to export palettes to ModuleScripts or let other plugins use the API, which may break the functionality of plugins that require it.

API Changes (for plugin developers)

There are some changes to the API coming in v0.4. You can view the updated API reference here.

  • API.PromptForColorSequence is being deprecated. API.PromptForGradient will be replacing it.
  • API.IsColorSequenceEditorOpen is being deprecated. API.IsGradientEditorOpen will be replacing it, but it works the exact same way.
  • Immediately-rejected Promises returned by the API return a PromptError (see below) instead of a string with a message.

API.PromptForGradient works similarly to PromptForColorSequence, but has different options.

{
    PromptTitle: string?,
    GradientType: string?,
    InitialGradient: (Gradient | ColorSequence)?,
    InitialColorSpace: string?,
    InitialHueAdjustment: string?,
    InitialPrecision: number?,
    OnGradientChanged: ((Gradient | ColorSequence) -> nil)?
}
  • PromptTitle will not be changed.
  • InitialColor will be changed to InitialGradient.
  • OnColorChanged will be changed to OnGradientChanged.

If you’re using API.PromptForColorSequence you will need to change your code for the renamed options, but otherwise should work as before.

Explanations of the other options

Unless you want to get really specific about how the gradient is constructed, you don’t need to read this section.

  • GradientType tells what the data type of the gradient is, either ColorSequence or Gradient.
    • If you pass InitialGradient but not GradientType, it will be inferred by the data type of InitialGradient.
    • If you pass both InitialGradient and GradientType, they must correspond with each other, otherwise the Promise will be immediately rejected with an InvalidPromptOptions error.
  • InitialColorSpace refers to the color space that the gradient should be in. By default, this option is RGB, but you can specify any of the available color spaces.
  • InitialHueAdjustment refers to the hue adjustment for the gradient. By default, this option is Shorter, but you can specify any of the available adjustments.
  • InitialPrecision refers to the “precision” of the gradient, or how closely it resembles what the gradient should actually look like. This can range from 0-18, but the maximum precision depends on the number of keypoints in the gradient.
    • Specifically, the maximum precision for k keypoints, with maximum km keypoints (currently 20) is math.floor((km - 1) / (k - 1)) - 1

Additionally, there will be some new API members:

  • API.GetVersion returns the version of the API as a tuple.
  • API.PromptError is an enum with the following members: InvalidPromptOptions, PromptAlreadyOpen, and ReservationProblem. You can view what each of these means in the updated API reference.

Any deprecated API members will be removed with the v1.0 update, but there’s no ETA on when v1.0 is coming, if it ever does. I don’t anticipate on removing them before 1.0, though.

If you have any question, don’t hesitate to PM me or reply to the message.

In other news, we recently passed 500 sales! :tada: I honestly didn’t expect my plugin to get this many sales. Thank you to everyone who’s tried out ColorPane, even if you ended up uninstalling it.

Apologies for the latest update taking longer than previous versions. I’ve gone back to school, which means that I have less time to work on the plugin.

:cookie:

2 Likes
#37

v0.4.0

Hello everyone, it’s been a long while since the last major update (I’ve been busy with school), but I’m happy to announce that a new version is available. A lot of the work for this version is focused on the API and internal plumbing, but there a plenty of new features in the mix. As always, you can read the full changelog here.

The update notes for this release are split into two sections, one for user-related changes, and one for API-related changes.

User-related Highlights

  • Added color interpolation controls and ColorSequence code exporting to the Gradient Editor
  • Added the Color Tools section where the Color Info page used to be
  • Added HWB, Lab, Luv, LCh(ab/uv), xyY, and XYZ to Color Info
  • Added a color sorter that uses CIEDE2000 in the Color Tools section
  • Added a Picular palette (idea from csqrl’s Picular plugin)
  • Added a Gradient picker tool which allows users to pick colors from their gradients
  • Color Properties now shows the color type of the each property
  • Mouse drag inputs now work outside of editor windows
  • Scrollbars no longer interfere with mouse drag inputs
  • Improved keypoint dragging behaviour in the Gradient Editor
  • Exporting palettes now lists color components correctly (components were listed in the order RBG instead of RGB)
  • A first-time use prompt will now appear informing the user that script injection is required for exporting palettes to ModuleScripts and the API
  • API injection is now automatically done at startup
Video gallery of some new features


The new Picular palette


The new gradient pickers


The new color sorter

Automatic API injection

As of v0.4, API injection will now be automatic. When you install the plugin for the first time (or you run the plugin for the first time if you were using it before v0.4), a prompt will pop up notifying you about the automatic API injection.

After you click the “I understand” button, if you’ve never injected the API before you will get a prompt to allow script injection. Afterwards, the plugin will inject the API automatically whenever you start up the plugin. You can’t use the plugin until you’ve clicked the button.

What if I don't want to allow script injection?

Of course, you don’t have to allow script injection. if you’re not comfortable with a script being injected, you can deny the permission, however you will be getting a warning every time the plugin starts up. You can always turn script injection on (or off) if you change your mind later.

Most of the plugin will work, regardless of whether you allow script injection. Other plugins, however, will not be able to use the API, which may limit or break their functionality.

Better mouse dragging

In previous versions of ColorPane, mouse drag inputs would stop updating once the mouse left the plugin window. This update changes the internals of how mouse dragging works, so mouse inputs should now continue to update outside the plugin window.

You may remember a certain bug I mentioned in the v0.3.0 release. With the changes made to mouse dragging, this bug no longer occurs. Whether or not it still exists, you won’t run into it anymore. :tada:

API-related Changes

  • Added API.GetVersion which allows external applications to check which version of the plugin is installed (the absence of this function indicates versions below v0.4)
  • Added API.PromptForGradient as a replacement for API.PromptForColorSequence, which can prompt for either Gradients or ColorSequences
  • API.PromptForColor now allows for prompting either Colors or Color3s
  • API.PromptForColor and API.PromptForGradient now reject with PromptErrors instead of message strings
  • API.PromptForColorSequence has been deprecated, please use API.PromptForGradient for new work
  • API.IsColorSequenceEditorOpen has been deprecated, please use API.IsGradientEditorOpen for new work

The primary prompt function for gradients is now API.PromptForGradient. API.PromptForColorSequence will continue to work until v1, which releases soon™. This is a summary of how the arguments have changed:

API.PromptForGradient({
    InitialGradient = ..., -- not InitialColor anymore
    OnGradientChanged = ..., -- not OnColorChanged anymore
})

All prompt options now return a API.PromptError, which is an enum with the following items:

  • InvalidPromptOptions, if the options passed to the prompt function are invalid (e.g. trying to pass a Color3 value to the InitialGradient key of GradientPromptOptions).
  • PromptAlreadyOpen, which should be self-explanatory.
  • ReservationProblem, if you either try to prompt for a color and the gradient editor is already open, or you try to prompt for a gradient and the color editor is already open.

Example usage:

API.PromptForColor({
    ...
}):andThen(function()
    ...
end, function(e)
    if (e == API.PromptError.PromptAlreadyOpen) then
        ...
    end
end)

In addition, there are new prompt options that allow for advanced usage. You can review the updated API reference for more information.

There will be more significant API changes in future versions, so please pay attention to future releases.

Thank you for using ColorPane. :cookie:

2 Likes
#38

This looks like a very well-made resource. However, I don’t understand why this would be useful. Can you please explain?

#39

Thank you for your interest in ColorPane.

I don’t know your individual situation, so I can’t tell you why it would be useful for you. Other people may find some of the color picker methods useful, or perhaps they would prefer the color wheel arrangement in the plugin over the color square arrangement in the default picker.

Another reason is the palette capability. The default color picker doesn’t have robust capability for storing colors, only a small palette of custom colors. ColorPane lets you create discrete palettes, and lets you share them with others. If you do UI work in Studio, you might to use palettes to keep track of component colors, keeping a consistent color scheme throughout the UI.

Hopefully I’ve explained to you why this plugin would be useful, if not to you, then to others. If you have any further questions, feel free to reply or send a PM.

2 Likes
#40

Hello everyone, it has come to my attention that the plugin asset in the library was uploaded with some missing files, which resulted in the plugin not working. This issue has been fixed, and I’m very sorry that I didn’t notice this issue earlier.

This does not affect the plugin file uploaded on GitHub.

If there are other problems, please don’t hesitate to send me a message. Thank you.