I made my view 600 pixels wide, so as to accommodate the color swatches. You may want to do the same. (Technically, hard-coding these values is very bad practice. If we ever wanted to update this program, it would be a mess of number-tweaking.)
To add another color swatch, you need to do four things:
- Fetch the value of the color you are creating a swatch for. I do this in a let for the red-value. Perhaps you'll call your variable... green-value?
- Create a new brush object (documentation). In Photoshop, when you use the Paint Bucket tool, you have to choose a color. The brush, in this context, plays a similar role. We're defining what color and stroke will be used to draw on the screen. Define a new brush that will allow us to create a green swatch of color.
- A device context gives us an abstraction for the screen (see the documentation). We draw on the device context. The reason for this abstraction is that the device context might actually represent an image, or a PDF, or perhaps even printer output. But, in all these cases, we just want to draw something. Send the dc a message telling it to use the green brush.
- Immediately after you set the brush of the device context, you can draw a new color swatch. I'm using rounded rectangles. See the documentation for drawing rounded rectangles to figure out which of those numbers mean what.
If you use the code in the view as your guide, you should be able to repeat these steps for both a green color swatch and a blue color swatch. I did it through some copy-paste and a bit of editing, but then, I'm familiar with the code.
(There are more elegant ways to do this... we're not going for elegance today.)
When you get done with this step, you should have a GUI that has three color swatches side-by-side. But, you will still only have the ability to control one of the colors.