Gradient Generator Notes


The value of this utility is in its simplicity. Image, photo, and graphical editors are very action-intensive. This tool allows a selection of a single color, the width/height, and then it creates all four gradients. This is a very fast way to create custom gradients, and it is easy to use.


  • Page should not require scrolling to operate, read instructions, and access gradients and text.
  • Interface should allow both mouse and keyboard control. Gradients can be generated by mouse only, or keyboard.
  • Interface should allow entry of hex color code and width/height directly.
  • It is assumed the gradient will have enough color that a white title will be visible.

LAMP Stack

  • CSS/divs are used to layout the page.
  • ColorPicker is a dojox widget. Additional widgets are the width/height input and the slider. Client-side validation is run off the widgets.
  • Two buttons are offered, one that creates the gradients and one that resets the inputs to the default values.
  • When the create button is clicked, the form is validated and submitted to the server.
  • PHP5 is used for the back-end script because it supports json_encode.
  • HTML is returned from the back-end script and placed in the dojo ContentPane.
  • The background image for the page is set to one of the gradients. This is a good preview method and it makes the page more interesting.
  • ImageMagick is used to create the gradients. It creates one gradient and rotates it to create the remaining three.
  • Directory index should not be accessible. This is accomplished by another file.
  • File system - image files must be writeable by Apache.