Text Editor with Adaptive Colour Selection

Cherry Zhang
David R. Cheriton School of Computer Science

[Homepage] [Project Page]

---

Motivations

• Discover Ways to Improve Existing Text Editors
There are two types of text editors:
- type I: provide users with a set of pre-defined highlighting schemes; auto-highlight keywords based on the scheme chosen by users - problem: users can only toggle between sets schemes; colour selections are pre-defined within each scheme
- type II: allow users to customize the colour for each syntactic component of a programming language
- problem: tedious work for users, but greater user satisfaction
The first goal of the project is to provide a text editor with adaptive colour selection. In particular, users are allowed to set preferable colours to certain syntactic components, such as background, if-else, and comments, and the application will automatically select colours for all the other components.


• Study and Experiment with Common Colour Schemes
The second goal of this project is to demonstrate the feasibility of using common colour schemes in real-world applications such as text editors. The application also provides controls for experimenting with variations of each colour scheme. The controls also provide a simple interface for studying and evaluating the effectiveness of the adaptive colour selection algorithm.

Background

• RGB and HSL Colour Models
  A color model is a mathematical model describing how colours can be represented by a set of numbers. The most common ones are RGB, HSV/HSL, CMYK, and CIE-XYZ, etc. In this project, RGB and HSL models are used.
  RGB (Red, Green and Blue) is an additive colour model in which the amount of three components are specified: red, green and blue. RGB is mainly used in displaying images in electronic systems.
  HSL (Hue, Saturation, and Lightness) represent points in an RGB colour space. HSL attempts to describe perceptual colour relationships more accurately than RGB.
  In this application, RGB system is used to specify colours used in the user interface. HSL is used to calculate the colours produced by common colour schemes.
  
  
• Common Colour Schemes
  The following colour schemes are used in implementing the adaptive colour selection algorithm of the application:
  Monochromatic: In HSL system, monochromatic colours have a single hue, varied lightness and saturation. Monochromatic colours should be used sparingly and purposefully to attract the eye. Monochromatic colours are naturally harmonious and bland.
  
  
  
  Figure 1: Example of monochromatic colours
  
  
  Complementary: Complementary colours are colours that are opposite to each other on the HSL colour wheel. Complementary colours create high contrast. Usually one colour is used as dominant colour and the other one is used as subordinates.
  
  
  
  Figure 2: Example of complementary colours
  
  
  Analogous: Analogous colours are colours that are adjacent to each other on the HSL colour wheel. Analogous colours are harmonious by nature.
  
  
  
  Figure 3: Example of analogous colours
  
  
  Triadic: Three colours that are evenly spaced on the HSL colour wheel. Triadic colours create very colourful and potentially striking palettes.
  
  
  
  Figure 4: Example of triadic colours
  
  

User Interface

• Feature 0: Colour Selection Panels
  The colour for each syntactic component of the text file can be selected through colour selection panels. The colours for the other components will be automatically selected and updated.
  
  
• Feature 1: Analogous Colour Degree Slider
  The slider can be used to adjust the angles in analogous colour scheme.
  
  
• Feature 2: Lightness Reduction Slider
  The slider can be used to adjust the amount of lightness reduction on inactive windows.
  
  
• Feature 3: Load/Save Source File
  Any text file can be loaded, modified and saved from the harddrive. The text will be automatically highlighted upon loading.
  
  
• Feature 4: Support for Multiple Windows
  Four windows for editing are presented at the same time. One and only one window is active for editing at any time. Different text files can be loaded to different windows. Each window can have different colour schemes.
  
  

Implementation Details

• Objective 0: User Interface Setup
  The application is implemented in Java. The user interface is implemented with the Swing class. An external library is used for colour chooser feature.
  
  
• Objective 1: Active Window Selection
  When a window is clicked on, it is set to be active. The other three windows are set to inactive. The rim of the active window will be set to RED. RED is chosen because it is the colour that attracts most attention. The overall colour (background and syntactic keywords, etc) will all be in dimmer settings so that they do not distract users from focusing on the active window. Dimmer settings are achieved by reducing the lightness (in HSL model) and increase the saturation of each colour. Reducing lightness and increasing saturation result in less aggressive colours that attract least attention.
  
  
• Objective 2: Automatic Colour Selection for Comments
  In a programming language, comments are used as tools for documentation. They are least frequently modified by the users and do not require as much attention from the users when they program. Therefore, in an ideal programming environment, comments should be visible and not distracting. Of all the common colour schemes, analogous colour scheme produces set of colours that are "close" and do not contrast with each other too much. In the application, when the background colour is selected by the user, the colour for comments will be automatically set to an analogous colour of the background colour. One challenge in using the analogous colour scheme is setting how "further apart" the colours are (i.e. the angle of analogous colour). To solve this problem, a slider is used for experimenting purposes. The initial angle is set to be 40.
  
  
• Objective 3: Automatic Colour Selection for Syntactic Words
  Aside from backgrounds and comments, the application supports auto-highlighting of the following syntactic keywords: if-else, for, while, keywords, identifiers(public/private), and include/define/import. When the user chooses a colour for any of the keywords above, the colours for the other keywords will be auto-selected. The colour scheme used is hexa-adic, which is a variation of the triadic colour scheme. Six evenly spaced colours on the HSL colour wheel are chosen. Each is assigned to highlight one set of keywords. By the nature of HSL colour wheel, hexa-adic colour scheme produces distinct colours, which is essential for keyword highlighting in a programming language. For simplicity, same lightness and saturation are used when selecting hexa-adic colours.
  
  
• Objective 4: Automatic Colour Selection for Other Code
  Other code refers to non-comments and non-syntactic components. The colour scheme for auto-selecting other code colour is triadic. Once the background colour is chosen, the triadic colour of the background colour is used to highlight other code. Triadic colour scheme is used because it creates a fairly high contrast between texts and backgrounds. The contrast is not as striking and aggressive to the eyes of the user, compare to complementary colours.
  
  

Possible Future Improvement

• Improvement 0: Programming Language Support
  The current text editor only supports a subset of the Java programming language. Limited number syntactic keywords can be identified and processed. In the future, the application could be extended to include a better language parser, to support Java.
  
  
• Improvement 1: More Sophisticated Adaptive Algorithm
  As outlined in implementation details, the colour selection algorithm has very simple heuristics. For example, when calculating triadic colours, the lightness and saturation are fixed. For a more sophisticated algorithm, lightness and saturation could be set to vary based on the range of colours used on the colour wheel. For example, the contrast between red and yellow may be too aggressive to the eyes of the user, when the lightness and saturation are held constant. To reduce the contrast, we could restrict the colour searching algorithm to be in the yellow colour range with lower lightness and higher saturation. On the other hand, the contrast between red and blue may be just right for the current context, so no restrictions on the lightness or saturation are required.
  
  
• Improvement 2: More Controls for Experimentation
  The current application supports controls for changing how far apart the analogous colours should be, and the amount of "dimness" of the inactive window. In the future, we could implement controls for experimenting with changing saturations. The users could potentially use the control to adjust the colours to be more comfortable.
  
  

What I Have Learned

• Knowledge 0: definitions and theories of commonly used colour schemes
• Knowledge 1: conversion between colour models (i.e. RGB to HSL, HSL to RGB)
• Knowledge 2: how to apply colour schemes to real-world applications (i.e. text editors)
• Knowledge 3: experimenting with variations in colour schemes
• Knowledge 4: using Java to effectively implement desired user interface and algorithms

Results/Demos

Initial state of the application. The colours for keywords are not set.


Colour chooser. Colours can be selected using a palette.


Dim inactive window. The inactive windows are dimmed. The active window is brightened.


Auto colour selection. After the colour of one syntactic component is selected, the colours of the other components are auto-selected. The text in the window is updated accordingly.

Discussions

• Effects of Changing Angles in Analogous Colour Scheme
  The colour of comments is an analogous colour of the background. When the "angle" between the two colours are too small, the comments are less noticeable. When the "angle" between the two colours are close to 60 degrees on the colour wheel or even higher, the comments become more noticeable. The contrast of the colours remain at a comfortable level to the eyes.
  
  
  
  Figure 9: 40 degree vs 60 degree
  
  
• Effects of Changing Brightness of Inactive Windows
  Experimentally, the lightness of the inactive window must be increased to approximately 50% of the original value to achieve the "dim inactive window" effect. Increasing in lightness results in "washed out" colours, which creates low contrast and does not attract user's attention.
  
  
  
  Figure 10: 27% lightness increase vs 50% lightness increase
  
  

Acknowledgement

I would like to acknowledge my supervisor Professor Bill Cowan for all his generous help throughout the term. Professor Cowan offered me many insights and advice in selecting project topics, as well as designing of the project. I would also like to thank Elodie Fourquet, for helping me set up Java environment, and providing valuable opinions on the design and implementation of this project. Special thanks to Blair MacIntyre, for this project was heavily based on his Master's thesis.

References

[1] Blair MacIntyre. A Constraint-Based Approach to Dynamic Colour Management for Windowing Interface.Master's Thesis University of Waterloo, 1991.
[2] http://www.workwithcolor.com/hsl-color-schemer-01.htm
[3] http://colorschemedesigner.com/
[4] http://www.easyrgb.com/index.php?X=MATH&H=18#text18