main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:interactivity and svg gui:colourPicker object

SVG colourPicker Object, Version 1.0 (2006-10-26), see version history at the end of the page

This SVG colourPicker object should assist authors of SVG webapplications in creating user interfaces.

Why should you create SVG only web applications? Advantages of SVG only applications are flexiblity (you can control every single aspect of a SVG GUI element) and scalability (in SVG your userinterface elements are scalable as well). If you need a pixel-precise, scalable application, HTML is not very well suited, since HTML form elements don't scale well. SVG also potentially allows more sophisticated GUI elements than HTML provides, such as slider, dial knobs, complex colourpickers, etc. Disadvantages include complexity (more complex than using HTML form elements) and a potentially bad user experience, if your SVG GUI elements behave different than native GUI elements of the operating system the user is used to. Some browsers still don't support SVG to HTML or HTML to SVG communication. In that case you are sort of locked into doing everything with SVG in order to reach the broadest audience. Another advantage of creating SVG only applications is, that your applications also work in SVG viewers outside the webbrowser (e.g. Batik, eSVG or SVG embedded applications).

See an example of the SVG colourPicker object. The scripts had been tested in Adobe SVG viewer version 3, version 6, MozillaSVG, Batik and Opera9.

The SVG colourPicker object is free to use. If you do any substantial improvements, please send back your improvements to the author. The GUI elements of carto.net are licensed under the terms of the LGPL license and you need to distribute the license with your code. Additionally, you should create a link to carto.net in your project's "about page" or impressum. If you plan to use the GUI elements in a commercial product, please check back with the author of the GUI elements to investigate arrangements. The original URL for the colourPicker object is http://www.carto.net/papers/svg/gui/colourPicker/.

Documentation

Requirements

To use the colourPicker object, your project needs to meet the following requirements:

Features

Dependencies on external functions

  1. colourPicker.js:
    • all of the objects and functions in this file are necessary
  2. slider.js:
    • all of the objects and functions in this file are necessary
  3. mapApp.js:
    • all of the objects and functions in this file are necessary
  4. helper_functions.js:
    • all the global variables at the top of the file
    • function getTransformToRootElement()
    • function leftOfTest()
    • function intersect2lines()
    • function toPolarDist()
    • function toPolarDir()
    • function rgb2hsv()
    • function hsv2rgb()

Constructor

The following constructor function creates the colourPicker:

var myColourPicker = colourPicker(id,parentNode,x,y,width,height,bgstyles,textstyles,sliderSymbId,satSliderVisible,valSliderVisible,alphaSliderVisible,colValTextVisible,fillVisible,strokeVisible,startHue,endHue,nrStopVals,fillStartColor,strokeStartColor,functionToCall);

Example:
//first some colour picker styles
var cpBgStyles = {"fill":"gainsboro"};
var cpTextStyles = {"font-family":"Arial,Helvetica","font-size":12,"fill":"dimgray"};
myMapApp.colourPickers["myColourPicker1"] = new colourPicker("colourPicker1","colourPickers",200,400,300,120,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,true,true,true,true,0,360,7,"0,255,0,1","0,0,0,0.7",undefined);

The arguments are the following:

  1. id (String):
    id of the colourPicker
  2. parentNode (String or node reference):
    group id or node reference to the parent group that will contain the colourPicker geometry
  3. x (number, float (in viewBox coordinates)):
    the left side of the colour picker box
  4. y (number, float (in viewBox coordinates)):
    the top of the colour picker box
  5. width (number, float (in viewBox coordinates)):
    the width of the colour picker box
  6. height (number, float (in viewBox coordinates)):
    the height of the colour picker box
  7. bgStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the colourPicker background box; could include CSS classes; example: var cpBgStyles = {"fill":"gainsboro"};
  8. textStyles (Array of literals with presentation attributes):
    an array literal containing the presentation attributes of the colourPicker text elements; could include CSS classes; should at least include a "font-size" attribute; example: var cpTextStyles = {"font-family":"Arial,Helvetica","font-size":12,"fill":"dimgray"};
  9. sliderSymbId (string):
    the id (string) of the slider symbol
  10. satSliderVisible (boolean (true|false)):
    determines whether the saturation slider will be visible
  11. valSliderVisible (boolean (true|false)):
    determines whether the value slider will be visible
  12. alphaSliderVisible (boolean (true|false)):
    determines whether the alpha/transparency/opacity slider will be visible
  13. colValTextVisible (boolean (true|false)):
    determines whether the text indicating the current RGBA and HSV color values will be visible
  14. fillVisible (boolean (true|false)):
    determines whether the rectangle representing the fill colour should be visible
  15. strokeVisible (boolean (true|false)):
    determines whether the rectangle representing the stroke colour should be visible
  16. startHue (number, float):
    a value between 0 and 360 representing the start hue value in degrees of the hue slider
  17. endHue (number, float):
    a value between 0 and 360 representing the end hue value in degrees of the hue slider, the endHue value should be higher than the startHue value
  18. nrStopVals (number, integer):
    the number of stop values for the hue gradient definition, a value of 5 means 7 stop value: the start stop value, 5 in between stop values and the end stop value, the stop values are linearly interpolated between the startHue and endHue value
  19. fillStartColor (string):
    a string containing the RGBA start values for the fill color, should be comma separated, the color values are integers between 0 and 255, the alpha value should be between 0 and 1; example: "0,255,0,1"
  20. strokeStartColor (string):
    a string containing the RGBA start values for the stroke color, should be comma separated, the color values are integers between 0 and 255, the alpha value should be between 0 and 1; example: "0,255,0,1"
  21. functionToCall (function, object or undefined):
    callBack function that will be fired after a color was changed: the return values are id of the colourPicker, and values, an object literal containing the values of the colourPicker. Values can be extracted like the following: values.fill.green or values.stroke.alpha or values.stroke.hue.

Note, if you want to change some appearance issues (e.g. positioning of elements), you can do so in the method .createColourpicker. Just be sure not to introduce any logical/functionality changes, only appearance changes.

Methods

Version history




Last modified: Thursday, 26-Oct-2006 22:28:42 CEST
© carto:net (andré m. winter & andreas neumann)
original URL for reference: http://www.carto.net/svg/gui/colourPicker/index.shtml
del.icio.us Add this page to del.icio.us