Google Summer of Code 2018 with phpMyAdmin - “Automated Theme Generator Tool”

I am very happy to announce that I’ll be working with phpMyAdmin this summer on the project ‘Automated Theme Generator Tool’. Currently there are pre-generated themes that can be manually installed and used. The idea is to create a tool that automates and makes easier the task of creating themes. Themes created from the Theme Generator tool would be less prone to bugs in the long run and could cater to each individuals needs. For the automated themes to look good to the eye, I’ll be using the concepts of Colour Theory.

The major goal of this project is to create a tool, that would create themes giving the users adequate freedom for changes and at the same time, automates the other parameters of the themes itself so that theme looks good i.e. by using colour combinations that are appealing to the eye. Designers use a variety of techniques to create themes and colour combinations that would be good looking. One of the main tools that would be used is a designer’s colour wheel.

Though RGB and Hexadecimal values are important for creating a webpage, they are of little use while studying Colour Theory. The HSB (hue, saturation, and brightness) are more important in working with colors. HSB values can be easily converted from hexadecimal and RGB values.

Munsell Colour System

Primarily we would focus on four types of colour schemes:

  • Monochromatic Colour Schemes

Monochromatic schemes use different tones from the same angle on the colour wheel. All colours are derived from the base colour and the hue value is not changed.

  • Analogous Colour Schemes

Analogous colour schemes are created by using colours that are next to each other on the colour wheel.

  • Complementary Colour Schemes

Complementary schemes are created by combining colours from opposite sides of the colour wheel.

  • Triadic Colour Schemes

Triadic schemes are made up of hues equally spaced around colour wheel.

All the colours generated by the colour scheme using the formulas of colour theory, would be displayed on a colour palette so that the user can further tune each colour according to his choice if they want to. The main elements to keep in mind while assigning colours are:

  1. Headers
  2. Footers
  3. Background
  4. Tables
  5. Groups
  6. Notices
  7. Results
  8. Buttons

Apart from styling the webpage as a whole, the users can use the same color picker tool to customise the font color and a drop down menu to change text font from a set of predefined fonts supported by the browser.

There are many different types of text that would require different colors to distinguish each other. The most important being the following:

  • Headings — These would generally match with the base color of the theme.
  • Links and Links (on hover) — The two text should be distinguished from each other apart from being different from the normal text.
  • Other text — This text would cover up most of the text present on a page.

One thing to keep in mind is that for the maximum visibility of text, the text color should be contrasting to that of the background color, by default. One option is to set complementary colors to that of the colors selected in the theme.

A minor tweak that can be allowed are a set of predefined icons and if time permits, we could start working on adding gradient to the themes. The last thing required would be to save the theme settings so that the same theme opens the every time phpMyAdmin is reopened.

The final tool would look somewhat like this:

Mockup

Mockup

The four color wheels indicate the different scheme types to choose from, currently the monochromatic color scheme is shown to be selected. A color picker tool is shown which could easily convert HSB, RGB and hexadecimal values into each other. The Elements and Text palette shows the colors that would be used for them respectively. On hovering on a particular color, a popup would show for what elements the particular color would be used (Example: The cursor is on the blue color, and a pop-up displays that it would be used for hyperlinks). The Theme name asks for an input to save the theme with a particular name. The Font Style option shows a drop-down menu to select a font style. A Preview and Go button are at the bottom of the page which displays a preview and saves the theme respectively. At the right side the Sample Preview shows various sample previews of four main components(Main Window, Query and Table List, Navigation Panel, Table Data). These preview panels can be hard coded on this page rather than linking it with the original pages, this would save time and make things easier. At the end of the project we could expect the theme generator tool to be completed and ready to be pushed to master branch, and later to STABLE branch after adequate testing. A summarised list of expected deliverables are:

  1. A customised color picker tool.
  2. Different color scheme modes.
  3. Custom text color and fonts.
  4. Theme preview mode.
  5. Save the themes settings and creating the necessary files.
  6. Choice of predefined icons. (Optional — as advised by the mentor)
  7. Color gradient on different elements. (If time permits)
  8. Remove inline style scripts. (As required and as per time)

Project Schedule

April 23, 2018 — May 14, 2018

  • Bonding with community.
  • Discuss and clear the ambiguities and implementation details.

May 14, 2018 — May 21,2018

  • Create a new page for Theme Generator Tools.
  • Implement Basic Colour Picker Tool and customising it according to our needs (adding necessary functions and removing the unnecessary ones).

May 22,2018 — May 29,2018

  • Save theme and create necessary files automatically.
  • Opens the same theme when phpMyAdmin restarts.
  • Test cases and documentation.

May 30,2018 — June 6,2018

  • Add color schemes functions.
  • Integrating the color scheme functions with the color picker tool.
  • Basic color changing webpage.
  • Fix inline styles where necessary.

June 7,2018 — June 14,2018

  • Make-up week.
  • Fix any bugs and write the required documentation.
  • Submit work for phase-1 evaluations.

Mid evaluation: June 11–15, 2018

June 15,2018 — June 22,2018

  • Add remaining color schemes functions.
  • Integrate text color changes with color picker tool.
  • Automate text colors with the selected color scheme.

June 23,2018 — June 30,2018

  • Create Sample Preview Panels
  • Font changes.
  • Write Tests and documentation.

July 1,2018 — July 8,2018

  • Make-up week.
  • Submit work for phase-2 evaluations.

Mid evaluation: July 9–13, 2018

July 9,2018 — July 16,2018

  • Predefined icon picker drop-down menu.
  • Integrate Theme Generator with Sample Preview.
  • Travis test cases.

July 17,2018 — July 24,2018

  • Fine tune CSS features.
  • Fix any bugs that might have gone unnoticed.
  • Remaining Travis test cases.

July 25,2018 — August 1,2018

  • Add gradient tool.
  • Fix any colour scheme automation .
  • Write Documentation.

August 2,2018 — August 6,2018

  • Make up week.
  • Wrap up the work.
  • Fix any bugs and do required documentation.
  • Work on more features if time permits.

Final evaluation: August 6–14, 2018

I’ll be updating my weekly progress of the project on this blog.

Like what you read? Give Saksham Gupta a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.