Custom Web Software Development

JavaScript, HTML 5, CSS 4, & PHP 8: Innovative Enterprise level Scripting for interactive sites, SaaS, & cross-platform desktop apps
  • Home
  • Automotive Dealer Website Development
  • Free desktop apps
  • Rainbow-Maker
  • MasterColorPicker
  • Free libraries: JavaScript and PHP
  • <input type="picker">
  • RGB_Calc color-space converter
  • FormFieldGenie fieldset multiplier
  • UniDOM.js x-browser solution +
  • eMail address validation scripts
  • PHP Utility Functions
  • SoftMoon Humane Use License
  • ActiveState Komodo Edit support
  • SoftMoon-WebWare’s Rainbow-Maker and the PHP Rainbow Class

    Before you start using the Rainbow Class, keep in mind it was developed within the PHP 5.2/5.3 environment.  In particular, the ability to create irregular polygons depends on PHP 5.3’s powerful new feature: closure functions.  However, the script will degrade gracefully when run on systems still stuck in the dark past, and irregular polygons will not be available.  The rainbowmaker.php file requires PHP 5.2, at least to support the json_encode() function, and there may be other reasons I'm currently unaware of that require 5.2 within the code of the rainbowmaker.php file and the Rainbow Class in general, and also maybe some of the support code.  But you could always try lesser systems, particularly if you supply a json_encode() function.  So now let’s look at using the Rainbow Class and the Rainbow-Maker in general.

    First lets make a few things clear to all.  The Rainbow Class is a composite of several files, from the base RGBaa Class to the RainbowGradient Class to the RainbowSculptor Class to the RainbowBuilder Class, with each one extending the previous.  The RGBaa Class gives basic RGB support with an additional 2 channels for transparency.  It can take a color defined by name, hex (as used in CSS files), string-based comma-separated decimal RGB or CMYK (i.e. "255,255,255" or "100,100,100,100"), or array-based RGB or CMYK, and return the appropriate R, G, and B values (from 0-255 each) plus the two alpha-channels.  The RainbowGradient Class creates gradient data from the user-given colors; it can apply that color to an image in a limited, linear fashion.  The RainbowSculptor Class can sculpt (¡not simply cut!) the gradient into all the various different shapes.  The RainbowBuilder Class adds graphic-file integration.

    You can download the source files for the Rainbow Maker package from our download page.  You can try out the Rainbow Maker User Interface here: http://softmoon-webware.com/rainbowmaker.php or New! check out the front-end of the soon to be released Rainbow-Maker 2 Wizard

    Using the Rainbow Class with rainbowmaker.php

    The Rainbow Class was designed to be a stand-alone supplement to the PHP GD package, but the HTML form generated and processed by rainbowmaker.php is an easy-to-use human interface designed to help the casual user make the most of this powerful and complex software.

    The Rainbow Class has limited input-data verification, and yet requires tightly configured and/or restricted & limited values.  The JavaScript incorporated into the rainbowmaker.php HTML form will guide the user into proper input values.  When using this form, pay close attention that every active form input field has a value typed in, with a few exceptions: if the field is one that automatically pops up a new field (“pie slices,” background and foreground images) it may be left blank.  Only fields that are relevant to your selections will be active.  Don’t overlook the “width” field associated with each color when choosing linear gradient shapes.  The JavaScript will restrict you from entering improper characters, as well as out-of-range numerical values; any out-of-range values will be altered to fit the legal range.  However, with some browsers, pressing the <enter> key while typing into a form field will submit that form without a final JavaScript check on the value you typed into that specific field.  There is currently no “final” check on the form field values by JavaScript.

    The color specifications are one exception.  If a valid color is entered by the user, a “color swatch” shows that color next to the input box.  However, invalid entries are not corrected, as are the other numerical values you may enter.

    Any errors in data that are either found by the Rainbow Class itself, or that generate a PHP error, will be caught and reported by the rainbowmaker.php form-processor, and will not “crash” the program.  The data that you entered will not be lost.  There should never be “true” PHP errors or class-specific errors, as long as the JavaScript is allowed to do its job and you enter valid colors; if you can document such an error, please contact me at:
    rainbow1@softmoon-webware.com

    Choose the shape you want filled with the rainbow gradient from the list at the top-left of the HTML form. This is the primary graphic.  There are also “supergraphic” options that you can choose, that take the primary shape you choose and repeats it circularly in many different ways.  These “supergraphic” choices can be found just under the section of the form labeled “apply colorband.”  The shape “linear/block” cannot be used with these “supergraphic” choices.

    Most shapes are filled radially, that is, from a centerpoint to the edge of the shape.  Unlike other graphic creation software, the Rainbow Class is designed to fill the shape with the gradient right to the edge all the way around.  Other software creates a circular or elliptical gradient, then “cuts out” the desired shape from this circular gradient.  Some shapes generated by the Rainbow Class are filled with a linear or “fountain” gradient.  The first shape listed (linear/block) is the most simple and fastest, creating a linear gradient of varying widths; but it only rotates “correctly” in multiples of 90°.  The shape “basic block” produces the same shape as “linear/block,” but uses a different algorithm and therefore can rotate at any angle, however at a loss of speed.  While using the rainbowmaker.php on a desktop setup with a local private server this loss of speed is inconsequential, but on a public server it can mean a lot.  If the Rainbow Class is being used programmatically to generate an image in real-time (for a web page – see the next section below) the difference between these two seemingly identical shapes can become critical.

    The different shapes take different data sets, and as mentioned above, the JavaScript will activate only the fields you need to fill in for the given shape.  Also, different options may require additional data.  Many form fields have “pop-ups” (in red) that offer a simple description of the field or other help. Most options “should” become self evident with a little experimentation if not obvious from the beginning. Some of the finer points are elaborated on below.

    First let’s get to the heart of shape generation: the rainbow color gradient.  The gradient is specified by the “base” colors involved and the number of pixels between each base color.  Each pixel will progress though the gradient.  The overall size of the chosen shape will depend on this gradient, and the total number of pixels in it.  For radially filled shapes, the longest radius will be the same number of pixels as the gradient (excepting the use of user masks and also possibly involved with custom user shapes; more on that below).  Adjusting the “master scale” will automatically change the size of the created gradient, and therefore of the generated shape.

    The shapes can be “scrunched” (not stretched!) using the height/width ratio (the height ÷ the width).  A ratio greater than 1 means the height is greater, and the width gets “scrunched,” while a value less than 1 yields the opposite effect.  “Stretching” the shape could “strain” the color gradient and create “banding” of the colors, so ideally the longest radius (from the centerpoint to a point on the shape’s edge) will match the length of the colorband.

    Using the “rotate” options is fairly straightforward, with the following notes.  Rotating the graphic will rotate the height/width ratio scrunch effect, and the rest of the details with it.  Rotating aspects of the shape itself (i.e. points, slices, spiral), however, rotates the shape within the scrunched height/width ratio.  By combining these three values you can create a “skew” effect.  For example, create a 7-point star (from a gradient of about 100 pixels total so you can easily see the effect), give it a height/width (h/w) ratio of about 62%, rotate the graphic 30° (this is clockwise), and rotate the points -30° (counterclockwise).  You will have a star with a point pointing up, skewed diagonally.  If the h/w ratio is 1, no effect is seen.

    Extending the colorband by reflection or repetition brings the rainbow gradient outside of the basic shape. The “core” shape will be filled the same way and be sized the same, although the overall effect may appear quite bigger. However, if you choose to size the generated image to the shape (see below) it will only be sized to this “core” size; you must adjust the margins manually (or fit to a larger background) to capture the colorband extension effects in full.

    Any radially filled shape may be “cut” into “pie slices.”  These slices may be defined by their start-stop angles in degrees, or by slice number of a specified total number of equal-sized slices.  When you define a pie slice, a new set of blank fields pops up automatically.  You may leave these blank or use them for another slice.  I tried to make this form as easy to use by the mathematically challenged as possible. So for example, you may create a 6-point star with pie slices 2, 4, and 6, of 6 total, and you will have only those 3 points showing, no need to calculate how many degrees per point and where each point slice starts and stops. Then take that generated graphic and use it as the background (see below), apply the same rainbow colorband in reverse (or create a new one of the same number (or even a different number and adjust the point-depth accordingly) of pixels), select pie slices 1, 3, and 5, of 6 total, and whah-la!  You have a nice 6-point star with alternating points, and you never had to calculate anything.

    By “squishing” the pie slices to match the h/w ratio, the slices come out more “even.” A slice of a perfect circle from 0-45 degrees is 1/8 of the total, but of an ellipse is not (try it to see why).

    The “supergraphic” options take the given shape and repeat it in a circle or ellipse.  The circle is broken into sectors (pie slices) and each sector gets filled with a shape.  For Nova, Supernova, Nebulae and Quasars, the shape is sized and squished to fit the sector which makes it seem to burst forth from and wrap around the centerpoint of the supergraphic. For Hubs, Wheels, Spokes, and Fans, the shape is not distorted, and the supergraphic will be sized to allow each graphic element to fit inside a sector; but if you bring the graphic elements closer to the center by making the offset negative they may naturally reach into adjacent sectors.  If the colorband is extended, it will act differently with these different supergraphics.  For Nova and Spokes, the edge of a sector is a border that each shape and its extended colorband will never cross.  For Supernova, Nebulae, and Quasars, the colorband can extend into the other sectors and are really only useful with extended colorbands.  With Supernova and Wheels, the shape within its home sector is given precedence.  If a pixel is not set by that shape, an extension of the colorband from another sector may set that pixel’s color, with precedence given to the closest sectors.  Nebulae, similar to Supernova, are only useful when the rainbow gradient contains transparencies and the colorband is extended.  Any transparency shows though to any extended colorband from another sector.  Quasars and Fans “overlap” the extended colorband (either clockwise or counterclockwise), but no transparencies show through to other extended colorbands; and like Nova and Supernova, transparencies show through to the background.

    One of the defining aspects of the Rainbow Class is its abilities with transparency gradients.  For each pixel you may have a color defined by RGB channels plus 2 (two) transparency channels.  These two transparency channels are independent of each other.  One transparency channel is used to blend the rainbow gradient’s color into the background, while the other defines the final transparency of the pixel (after it is mixed with the background, if it is mixed at all).  You may even specify a “rainbow” with no color and only a final transparency gradient, then apply that to a given background image as a given shape.  For example, you can take a given picture and impose a star-shaped transparency on a portion, then (if saved as a .png file) you can use that image as a floating mask over another (maybe in a web page somewhere), with the underlying image showing though the star-shape.

    To create an anti-alias effect at the edges of your created shape, simple repeat the last color for 1 to 3 pixels (experiment with the number to obtain the best results, depending on the shape you're creating) and turn on the transparency option.  This transparency should progress –to– about 80%-90% at the final pixel.  You would therefore normally use a transparency gradient from 0% to 90%; but if your shape’s gradient already has a transparent value in the last color, you would adjust the values (of the anti-alias pixels) accordingly.

    Using the Rainbow Class with your own project

    The first step to using the Rainbow Class is to get to know it with rainbowmaker.php.  Once you understand what it can do, and perhaps even what you want it to do in terms of what gradient-filled shape you want to create, you’re ready to use the Class with your own PHP script.

    The Rainbow Class was developed with the idea that static-sized graphics in web pages do not re-size in the same detail on different browsers, and in fact some browsers do quite a poor job, while others do a fairly good job.  WebKit based browsers (Apple’s® Safari and Google’s® Chrome) do a nice job; a graphic containing fancy text may look OK if these browsers re-size it.  Internet Exploder, however, creates grainy images when re-sized.

    The solution to this problem is to use Ajax techniques.  With JavaScript you can find the end-user’s screen-width in pixels and report that back to the server.  A PHP script can generate a custom-sized graphic with fancy text in full-detail and send that to the end-user’s browser.  What was missing in this solution was the GD package’s ability to create complex gradients and work with transparencies in an advanced way. The Rainbow Class also supplies solutions to complex mathematical problems in tiling the graphic in a circle.  This would be virtually impossible to do by taking a given image and copying it into another when the image co-ordinates overlap.

    Be sure to read the comments throughout the Rainbow Class files.  There is plenty of info within describing how to use the methods and the overall Class in general.  That info will not be repeated here.

    The easiest way to use the Rainbow Class is to hack into the rainbowmaker.php file and at the appropriate place (after the instance of the Rainbow Class is created, before a method is called), un-comment the following line:

    $rainbow->¿dumpAttributes=TRUE;

    Then use rainbowmaker.php (in your browser) to create the graphic you want.  All the values needed to be passed into the RainbowBuilder Class will be shown with their given IDs.  From this you can create custom arrays to pass into the Rainbow Class in your own project, adjusting the proper values in the arrays by a (possibly variable) percentage amount.

    The Rainbow Class is modular so you can use just what you need.  For many of your own projects, the RainbowSculptor Class or even the RainbowGradient Class may be all you need.  You may find that you are building a multi-layered image however, and the RainbowBuilder Class will give you tools to do this quite a bit easier.

    The Rainbow Class will automatically create a GD image resource if you don’t give it one to work with.  By creating an instance of the Class, you have a reusable tool.  Calling a method once will generate a GD image; calling another method or the same one again will use the previously generated GD image.  Or you may create an instance (i.e. $Rainbow=New RainbowGradient;), and then before calling a method set the GD image (i.e. $Rainbow->image=imagecreatetruecolor( ... ); or maybe something like $Rainbow->image=imagecreatefromjpg( ... ); or maybe you create something with the GD package and want to add to it using the Rainbow Class by $Rainbow->image=$myGDhandle; ).

    Note that if you supply a GD image resource, or when you call a second method (or more) on the same instance, the RainbowBuilder will normally not set the background-color.  However, background images and the final transparency value, if any, will be added.  Also, most image-sizing options will be ignored (except “autosizing to select images”); the final image will be the same size as the one passed in - in fact it will be the one passed in, only with the added Rainbow.

    If you “autosize to select images” and supply your own GD image resource, the resource will always be “sized to”, and its {x,y} position will be {0,0}.  If any other resource (back/foreground images or the Rainbow itself) is “sized to,” the Rainbow instance image -may- be re-generated to any required larger size with the passed-in GD resource copied in at the appropriate place, and it will then also receive the specified background color.