Colour Toolbox - 2020
This is a utility application for managing web colours, build using the electron framework this application was created using HTML, CSS, Javascript and C++.
Colour Toolbox
Project Overview
Colour toolbox is an application use specifically for managing web colours. It allows the user to choose colours using a colour wheel and capture on screen colours. Colours are converted into RGBA components and Hexadecimal values. These colours can be grouped into different used defined categories which can be saved. It also supports extracting colours from a CSS file. The UI for the application was developed using the Electron Framework using HTML and CSS. The application code was written in a combination of javascript and C++ using Node.JS addon. This application only captures on screen colours on Windows platforms but can be extended to MacOS and Linux operating systems.
Application features
- Colour Wheel for selecting colours
- Colour picker for capturing on screen colours
- Colour Palette Management
- Read All colours from a CSS or HTML file
- Save and Load colour Palettes
- Copy colour to clipboard when double clicking a colour
- Taskbar Icon for Quick access
- Quick capture by pressing (Shift + Alt + c)
- Currently supports hex and rgba format
- Rename Colour palette groups
- Gradient CSS Generator
- Support for hsl and other color functions
- Drag Drop colour codes into other applications
- Other OS Support (Linux, maybe MacOS at some point)
- Support for different resolution multi monitor setups
Technologies Used
This application uses the Electron Framework, that allows for application development using web technologies such as Javascript, HTML and CSS. Most of the application uses the Electron but in order to perform screen capture I created a C++ NodeJS addon that uses windows API to capture the screen contents. It does work on multiple monitors, but they must have the same screen resolution.
The Colour Wheel
The colour wheel was from a previous project that I worked on, it took a couple of weeks to develop, and for this project I converted it from C++ to Javascript.
The colour Wheel is written in javascript using the HTML5 canvas element, primarily uses RGB/HSV conversion and HUE for the wheel. This control has its own basic math library, which is used for translating, rotating elements via matrices and basic vector operations.
The triangle uses barycentric coordinates to produce a colour gradient over the triangle, also used for testing where in the triangle the mouse is (if it is over the triangle) for given the mouse coordinates x and y. Colour lookup at where the mouse is on the triangle is also achieved by using barycentric coordinates.
On Screen Colour Capture
Screen capture is done via a NodeJS C++ addon, using the windows API. The screen is captured into a bitmap when the capture process begins which is stored as a pixel array. The colour is looked up from this pixel array where the mouse is on screen. It works on multiple monitors if the resolution is the same by capturing the virtual display. The Magnifier window is also created via the C++ addon and is painted directly from the window procedure function, by using the StretchBlt function.
The application can also read in CSS and HTML files and extract colour data if they are in hex or rgb format. Importing will append the colours found in the files into a separate group ‘Imported’. This was achieved using regular expressions while looping through each line in the file.