Javascript Controlled SVG Part 1

In my last post I described the experience and development of my first true attempt at SVG. This post will describe the javascript code which implements the behavior of that color picker. This is meant to describe the code to somebody who understands basic programming but not necessarily javascript or working with graphics. If you have a solid grasp on javascript and programming GUIs you can skip this post.

All code is viewable in the source of the page.

First let’s cover the “global” variables. The first, HEX, is used as a constant in the conversion from decimal to hexadecimal (more on that soon). The colorData variable is used to store the state of the color data and is directly modified and displayed by the sliders. The min and max variables are treated more like constants as they represent the minimum and maximum pixel locations of the sliders. The selected variable points to the currently selected slider, or null if none are selected. To be selected means the user is currently modifying that slider. Finally, button points to the button currently in use by the user, or null if none are in use.

Now for the functions. The code covered in this post does not include application logic. These functions facilitate communication between the graphical state and the data and most are event handlers. Most of them are fairly straightforward.

The first function is mouseCoords. This function is pretty straightforward. It takes any mouse event fired by the browser, extracts the coordinates of the event, and returns a single object containing the x and y coordinates.

deciToHex takes an integer and returns a string of the hexadecimal representation. The deciToHexDigits function converts an integer to a zero padded hex string which has a minimum number of digits. It takes two parameters, the integer to convert and the number of digits.

The update function updates the graphical state to reflect any changes to the data. It should be called anytime the state changes.

The drag function is deprecated and no longer works. However, you will notice it is still being called by some SVG elements. This was used early in development but never removed when replacements were developed. In a non-educational, shipping product any code referring to it should be removed. The reason it is still in the source is because it was handed in that way and this is meant to be an archive of what was graded.

The selectHandle function is the event handler for when a user clicks in one of the handles of a slider. It sets the global for the currently selected handle. The unselect function sets the state of all objects to not selected. It is similar to a “select none” action in most applications. It affects all sliders and buttons.

The buttonOver, buttonDown, buttonOut, and buttonUp functions are all event handlers working in conjunction with makeButtonDown and makeButtonUp to control the graphical state of the buttons. When the user mouse-downs on a button the global button is set to point to that button and the grical state of it changes. The user can then mouse-out and mouse-over the button with only the state of that button changing. If the user then mouse-ups anywhere outside of the button no action is performed and the global is set to null. This functionality is similar to native buttons on most platforms. If the user mouse-downs on a button and proceeds to mouse-up over the same button, it is considered a click. the click is reflected by changing the color data withing the boundaries of each attribute followed by the graphical update.

Color Picker

The next post (Part 2) will cover the application logic and associated code.

Leave a Reply