| /* |
| Scripts to create interactive colour pickers in SVG using ECMA script |
| Copyright (C) <2006> <Andreas Neumann> |
| Version 1.0, 2006-10-26 |
| neumann@karto.baug.ethz.ch |
| http://www.carto.net/ |
| http://www.carto.net/neumann/ |
| |
| Credits: |
| * none so far |
| |
| ---- |
| |
| Documentation: http://www.carto.net/papers/svg/gui/colourPicker/ |
| |
| ---- |
| |
| current version: 1.0 |
| |
| version history: |
| 1.0 (2006-10-26) |
| initial version |
| |
| ------- |
| |
| |
| This ECMA script library is free software; you can redistribute it and/or |
| modify it under the terms of the GNU Lesser General Public |
| License as published by the Free Software Foundation; either |
| version 2.1 of the License, or (at your option) any later version. |
| |
| This library is distributed in the hope that it will be useful, |
| but WITHOUT ANY WARRANTY; without even the implied warranty of |
| MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU |
| Lesser General Public License for more details. |
| |
| You should have received a copy of the GNU Lesser General Public |
| License along with this library (lesser_gpl.txt); if not, write to the Free Software |
| Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA |
| |
| ---- |
| |
| original document site: http://www.carto.net/papers/svg/gui/colourPicker/ |
| Please contact the author in case you want to use code or ideas commercially. |
| If you use this code, please include this copyright header, the included full |
| LGPL 2.1 text and read the terms provided in the LGPL 2.1 license |
| (http://www.gnu.org/copyleft/lesser.txt) |
| |
| ------------------------------- |
| |
| Please report bugs and send improvements to neumann@karto.baug.ethz.ch |
| If you use this control, please link to the original (http://www.carto.net/papers/svg/gui/colourPicker/) |
| somewhere in the source-code-comment or the "about" of your project and give credits, thanks! |
| |
| */ |
| |
| function colourPicker(id,parentNode,x,y,width,height,bgstyles,textstyles,sliderSymbId,satSliderVisible,valSliderVisible,alphaSliderVisible,colValTextVisible,fillVisible,strokeVisible,startHue,endHue,nrStopVals,fillStartColor,strokeStartColor,functionToCall) { |
| var nrArguments = 21; |
| var createColourPicker= true; |
| if (arguments.length == nrArguments) { |
| this.id = id; //the id of the colour picker |
| this.parentNode = parentNode; //the id or node reference of the parent group where the button can be appended |
| this.x = x; //upper left corner of colour picker |
| this.y = y; //upper left corner of colour picker |
| this.width = width; //width of colour picker |
| this.height = height; //height of colour picker |
| this.bgstyles = bgstyles; //an array of literals containing presentation attributes of the colourpicker background |
| this.textstyles = textstyles; //if shadowcolor = none than no shadow will be used |
| this.sliderSymbId = sliderSymbId; //id referencing the slider symbol to be used for the sliders |
| this.satSliderVisible = satSliderVisible; //possible values for visibility: true/false |
| this.valSliderVisible = valSliderVisible; //possible values for visibility: true/false |
| this.alphaSliderVisible = alphaSliderVisible; //possible values for visibility: true/false |
| this.colValTextVisible = colValTextVisible; //possible values for visibility: true/false |
| this.fillVisible = fillVisible; //possible values for visibility: true/false |
| this.strokeVisible = strokeVisible; //possible values for visibility: true/false |
| this.startHue = startHue; //start hue in degree (0 to 360) |
| this.endHue = endHue; //end hue in degree (0 to 360), end hue should be larger than start hue |
| this.nrStopVals = nrStopVals; //nr of stop vals in between, in addition to start and end |
| this.fillStartColors = fillStartColor.split(","); //string, rgba.format, f.e. 255,0,0,1 |
| this.strokeStartColors = strokeStartColor.split(","); //string, rgba.format, f.e. 255,0,0,1 |
| this.functionToCall = functionToCall; //a function or object to call, in case of an object, the method "getColor" is called; if you don't need any, than just say undefined |
| if (this.fillVisible) { |
| this.activeColourType = "fill"; |
| } |
| else { |
| this.activeColourType = "stroke"; |
| } |
| //now test if defs section is available |
| try { |
| this.svgdefs = document.getElementsByTagNameNS(svgNS,"defs").item(0); |
| } |
| catch (ex) { |
| createColourPicker = false; |
| alert("Error "+ex+", Could not find a <defs /> section in your svg-file!\nPlease add at least an empty <defs /> element!"); |
| } |
| this.created = false; |
| } |
| else { |
| createColourPicker = false; |
| alert("Error in colourPicker ("+id+") constructor: wrong nr of arguments! You have to pass over "+nrArguments+" parameters."); |
| } |
| if (createColourPicker) { |
| this.createColourpicker(); |
| } |
| else { |
| alert("Could not create colourPicker with id '"+id+"' due to errors in the constructor parameters"); |
| } |
| } |
| |
| //test if parent group exists |
| colourPicker.prototype.testParent = function() { |
| //test if of type object |
| var nodeValid = false; |
| this.parentGroup = document.createElementNS(svgNS,"g"); |
| if (typeof(this.parentNode) == "object") { |
| if (this.parentNode.nodeName == "svg" || this.parentNode.nodeName == "g" || this.parentNode.nodeName == "svg:svg" || this.parentNode.nodeName == "svg:g") { |
| this.parentNode.appendChild(this.parentGroup); |
| nodeValid = true; |
| } |
| } |
| else if (typeof(this.parentNode) == "string") { |
| //first test if button group exists |
| if (!document.getElementById(this.parentNode)) { |
| this.parentGroup.setAttributeNS(null,"id",this.parentNode); |
| document.documentElement.appendChild(this.parentGroup); |
| nodeValid = true; |
| } |
| else { |
| document.getElementById(this.parentNode).appendChild(this.parentGroup); |
| nodeValid = true; |
| } |
| } |
| return nodeValid; |
| } |
| |
| |
| colourPicker.prototype.createColourpicker = function() { |
| var result = this.testParent(); |
| if (result) { |
| this.nrSliders = 1; //these are to define the distribution along y-axis |
| this.nrRects = 0; //these are to define the distribution along x-axis |
| |
| //create gradients in defs section |
| //hueGradient |
| var hueGradientDefs = document.createElementNS(svgNS,"linearGradient"); |
| hueGradientDefs.setAttributeNS(null,"id",this.id+"_hueGradient"); |
| var curHue = this.startHue; |
| var curPerc = 0; |
| var hueIncr = (this.endHue - this.startHue) / (this.nrStopVals - 1); |
| var percIncr = 100 / (this.nrStopVals - 1); |
| for (i = 0;i<this.nrStopVals;i++) { |
| if (curPerc > 100) { |
| curPerc = 100; |
| } |
| if (curHue > this.endHue) { |
| curHue = this.endHue; |
| } |
| var stopVal = document.createElementNS(svgNS,"stop"); |
| stopVal.setAttributeNS(null,"offset",curPerc+"%"); |
| myRgbArr = hsv2rgb(Math.round(curHue),1,1); |
| stopVal.setAttributeNS(null,"stop-color","rgb("+myRgbArr['red']+","+myRgbArr['green']+","+myRgbArr['blue']+")"); |
| hueGradientDefs.appendChild(stopVal); |
| curPerc += percIncr; |
| curHue += hueIncr; |
| } |
| if (this.created) { |
| this.svgdefs.replaceChild(hueGradientDefs,document.getElementById(this.id+"_hueGradient")); |
| } |
| else { |
| this.svgdefs.appendChild(hueGradientDefs); |
| } |
| //generate satGradient if visible |
| if (this.satSliderVisible) { |
| var satGradientDefs = document.createElementNS(svgNS,"linearGradient"); |
| satGradientDefs.setAttributeNS(null,"id",this.id+"_satGradient"); |
| this.satStartGradient = document.createElementNS(svgNS,"stop"); |
| this.satStartGradient.setAttributeNS(null,"offset","0%"); |
| this.satStartGradient.setAttributeNS(null,"stop-color","rgb(255,255,255)"); |
| satGradientDefs.appendChild(this.satStartGradient); |
| this.satEndGradient = document.createElementNS(svgNS,"stop"); |
| this.satEndGradient.setAttributeNS(null,"offset","100%"); |
| this.satEndGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)"); |
| satGradientDefs.appendChild(this.satEndGradient); |
| if (this.created) { |
| this.svgdefs.replaceChild(satGradientDefs,document.getElementById(this.id+"_satGradient")); |
| } |
| else { |
| this.svgdefs.appendChild(satGradientDefs); |
| } |
| this.nrSliders++; |
| } |
| //generate valGradient if visible |
| if (this.valSliderVisible) { |
| var valGradientDefs = document.createElementNS(svgNS,"linearGradient"); |
| valGradientDefs.setAttributeNS(null,"id",this.id+"_valGradient"); |
| this.valStartGradient = document.createElementNS(svgNS,"stop"); |
| this.valStartGradient.setAttributeNS(null,"offset","0%"); |
| this.valStartGradient.setAttributeNS(null,"stop-color","rgb(0,0,0)"); |
| valGradientDefs.appendChild(this.valStartGradient); |
| this.valEndGradient = document.createElementNS(svgNS,"stop"); |
| this.valEndGradient.setAttributeNS(null,"offset","100%"); |
| this.valEndGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)"); |
| valGradientDefs.appendChild(this.valEndGradient); |
| if (this.created) { |
| this.svgdefs.replaceChild(valGradientDefs,document.getElementById(this.id+"_valGradient")); |
| } |
| else { |
| this.svgdefs.appendChild(valGradientDefs); |
| } |
| this.nrSliders++; |
| } |
| //generate opacityGradient if visible |
| if (this.alphaSliderVisible) { |
| var alphaGradientDefs = document.createElementNS(svgNS,"linearGradient"); |
| alphaGradientDefs.setAttributeNS(null,"id",this.id+"_alphaGradient"); |
| this.alphaStartGradient = document.createElementNS(svgNS,"stop"); |
| this.alphaStartGradient.setAttributeNS(null,"offset","0%"); |
| this.alphaStartGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)"); |
| this.alphaStartGradient.setAttributeNS(null,"stop-opacity",0); |
| alphaGradientDefs.appendChild(this.alphaStartGradient ); |
| this.alphaEndGradient = document.createElementNS(svgNS,"stop"); |
| this.alphaEndGradient.setAttributeNS(null,"offset","100%"); |
| this.alphaEndGradient.setAttributeNS(null,"stop-color","rgb(255,0,0)"); |
| this.alphaEndGradient.setAttributeNS(null,"stop-opacity",1); |
| alphaGradientDefs.appendChild(this.alphaEndGradient); |
| if (this.created) { |
| this.svgdefs.replaceChild(alphaGradientDefs,document.getElementById(this.id+"_alphaGradient")); |
| } |
| else { |
| this.svgdefs.appendChild(alphaGradientDefs); |
| } |
| this.nrSliders++; |
| } |
| |
| //create bg rectangle |
| var bgRect = document.createElementNS(svgNS,"rect"); |
| bgRect.setAttributeNS(null,"x",this.x); |
| bgRect.setAttributeNS(null,"y",this.y); |
| bgRect.setAttributeNS(null,"width",this.width); |
| bgRect.setAttributeNS(null,"height",this.height); |
| for (var attrib in this.bgstyles) { |
| bgRect.setAttributeNS(null,attrib,this.bgstyles[attrib]); |
| } |
| this.parentGroup.appendChild(bgRect); |
| |
| //now createSliders |
| var invisSliderLineWidth = this.width * 0.05; |
| var slidRectHeight = invisSliderLineWidth * 0.5; |
| var sliderStyles = {"stroke":"none","fill":"none"}; |
| var yNew = this.y + this.height * 0.13; |
| var yNewInc = this.height * 0.8 / this.nrSliders; |
| //create hue slider |
| //first create rectangle behind slider to hold gradient |
| this.rectHue = document.createElementNS(svgNS,"rect"); |
| this.rectHue.setAttributeNS(null,"x",(this.x + this.width * 0.04)); |
| this.rectHue.setAttributeNS(null,"y",(yNew - slidRectHeight * 0.5)); |
| this.rectHue.setAttributeNS(null,"width",(this.x + this.width * 0.7)-(this.x + this.width * 0.04)); |
| this.rectHue.setAttributeNS(null,"height",slidRectHeight); |
| this.rectHue.setAttributeNS(null,"fill","url(#"+this.id+"_hueGradient)"); |
| this.parentGroup.appendChild(this.rectHue); |
| this.slidHue = new slider("hueSlider_"+this.id,this.parentGroup,this.x + this.width * 0.04,yNew,this.startHue,this.x + this.width * 0.7,yNew,this.endHue,0,sliderStyles,invisSliderLineWidth,this.sliderSymbId,this,true); |
| var hueText = document.createElementNS(svgNS,"text"); |
| hueText.setAttributeNS(null,"x",this.slidHue.x2 + this.width * 0.02); |
| hueText.setAttributeNS(null,"y",this.slidHue.y2 + this.width * 0.015); |
| hueText.setAttributeNS(null,"pointer-events","none"); |
| for (var attrib in this.textstyles) { |
| hueText.setAttributeNS(null,attrib,this.textstyles[attrib]); |
| } |
| var hueTextNode = document.createTextNode("Hue ("+this.startHue+String.fromCharCode(176)+"-"+this.endHue+String.fromCharCode(176)+")"); |
| hueText.appendChild(hueTextNode); |
| this.parentGroup.appendChild(hueText); |
| |
| //create rects to show colour values for fill and stroke |
| if (this.strokeVisible) { |
| this.strokeRect = document.createElementNS(svgNS,"rect"); |
| if (this.fillVisible) { |
| this.strokeRect.setAttributeNS(null,"x",this.slidHue.x1 + this.width * 0.1); |
| this.strokeRect.setAttributeNS(null,"y",this.y + this.height * 0.45); |
| } |
| else { |
| this.strokeRect.setAttributeNS(null,"x",this.slidHue.x1); |
| this.strokeRect.setAttributeNS(null,"y",this.y + this.height * 0.3); |
| } |
| this.strokeRect.setAttributeNS(null,"width",this.width * 0.15); |
| this.strokeRect.setAttributeNS(null,"height",this.height * 0.3); |
| this.strokeRect.setAttributeNS(null,"fill","none"); |
| this.strokeRect.setAttributeNS(null,"stroke","rgb("+this.strokeStartColors[0]+","+this.strokeStartColors[1]+","+this.strokeStartColors[2]+")"); |
| this.strokeRect.setAttributeNS(null,"stroke-width",invisSliderLineWidth * 0.5); |
| this.strokeRect.setAttributeNS(null,"stroke-opacity",this.strokeStartColors[3]); |
| this.strokeRect.setAttributeNS(null,"id",this.id+"_strokeColour"); |
| this.strokeRect.setAttributeNS(null,"pointer-events","all"); |
| this.strokeRect.addEventListener("click",this,false); |
| this.parentGroup.appendChild(this.strokeRect); |
| this.nrRects++; |
| } |
| if (this.fillVisible) { |
| this.fillRect = document.createElementNS(svgNS,"rect"); |
| this.fillRect.setAttributeNS(null,"x",this.slidHue.x1); |
| this.fillRect.setAttributeNS(null,"y",this.y + this.height * 0.3); |
| this.fillRect.setAttributeNS(null,"width",this.width * 0.15); |
| this.fillRect.setAttributeNS(null,"height",this.height * 0.3); |
| this.fillRect.setAttributeNS(null,"fill","rgb("+this.fillStartColors[0]+","+this.fillStartColors[1]+","+this.fillStartColors[2]+")"); |
| this.fillRect.setAttributeNS(null,"fill-opacity",this.fillStartColors[3]); |
| this.fillRect.setAttributeNS(null,"id",this.id+"_fillColour"); |
| this.fillRect.addEventListener("click",this,false); |
| if (this.activeColourType == "stroke") { |
| this.parentGroup.insertBefore(this.fillRect,this.strokeRect); |
| } |
| else { |
| this.parentGroup.appendChild(this.fillRect); |
| } |
| this.nrRects++; |
| } |
| |
| switch(this.nrRects) { |
| case 0: |
| slidLeft = this.slidHue.x1; |
| break; |
| case 1: |
| slidLeft = this.slidHue.x1 + this.width * 0.2; |
| break; |
| default: |
| slidLeft = this.slidHue.x1 + this.width * 0.3; |
| break; |
| } |
| |
| yNew = yNew + yNewInc; |
| if (this.satSliderVisible) { |
| //create rectangle to hold sat gradient |
| this.rectSat = document.createElementNS(svgNS,"rect"); |
| this.rectSat.setAttributeNS(null,"x",slidLeft); |
| this.rectSat.setAttributeNS(null,"y",(yNew - slidRectHeight * 0.5)); |
| this.rectSat.setAttributeNS(null,"width",(this.x + this.width * 0.7)-slidLeft); |
| this.rectSat.setAttributeNS(null,"height",slidRectHeight); |
| this.rectSat.setAttributeNS(null,"fill","url(#"+this.id+"_satGradient)"); |
| this.parentGroup.appendChild(this.rectSat); |
| //create sat slider |
| this.slidSat = new slider("satSlider_"+this.id,this.parentGroup,slidLeft,yNew,0,this.x + this.width * 0.7,yNew,100,100,sliderStyles,invisSliderLineWidth,this.sliderSymbId,this,true); |
| var satText = document.createElementNS(svgNS,"text"); |
| for (var attrib in this.textstyles) { |
| satText.setAttributeNS(null,attrib,this.textstyles[attrib]); |
| } |
| satText.setAttributeNS(null,"pointer-events","none"); |
| satText.setAttributeNS(null,"x",this.slidSat.x2 + this.width * 0.02); |
| satText.setAttributeNS(null,"y",this.slidSat.y2 + this.width * 0.015); |
| var satTextNode = document.createTextNode("Saturation (%)"); |
| satText.appendChild(satTextNode); |
| this.parentGroup.appendChild(satText); |
| yNew = yNew + yNewInc; |
| } |
| if (this.valSliderVisible) { |
| //create rectangle to hold val gradient |
| this.rectVal = document.createElementNS(svgNS,"rect"); |
| this.rectVal.setAttributeNS(null,"x",slidLeft); |
| this.rectVal.setAttributeNS(null,"y",(yNew - slidRectHeight * 0.5)); |
| this.rectVal.setAttributeNS(null,"width",(this.x + this.width * 0.7)-slidLeft); |
| this.rectVal.setAttributeNS(null,"height",slidRectHeight); |
| this.rectVal.setAttributeNS(null,"fill","url(#"+this.id+"_valGradient)"); |
| this.parentGroup.appendChild(this.rectVal); |
| //create val slider |
| this.slidVal = new slider("valSlider_"+this.id,this.parentGroup,slidLeft,yNew,0,this.x + this.width * 0.7,yNew,100,100,sliderStyles,invisSliderLineWidth,this.sliderSymbId,this,true); |
| var valText = document.createElementNS(svgNS,"text"); |
| for (var attrib in this.textstyles) { |
| valText.setAttributeNS(null,attrib,this.textstyles[attrib]); |
| } |
| valText.setAttributeNS(null,"pointer-events","none"); |
| valText.setAttributeNS(null,"x",this.slidVal.x2 + this.width * 0.02); |
| valText.setAttributeNS(null,"y",this.slidVal.y2 + this.width * 0.015); |
| var valTextNode = document.createTextNode("Value (%)"); |
| valText.appendChild(valTextNode); |
| this.parentGroup.appendChild(valText); |
| yNew = yNew + yNewInc; |
| } |
| if (this.alphaSliderVisible) { |
| //create rectangle to hold alpha gradient |
| this.rectAlpha = document.createElementNS(svgNS,"rect"); |
| this.rectAlpha.setAttributeNS(null,"x",slidLeft); |
| this.rectAlpha.setAttributeNS(null,"y",(yNew - slidRectHeight * 0.5)); |
| this.rectAlpha.setAttributeNS(null,"width",(this.x + this.width * 0.7)-slidLeft); |
| this.rectAlpha.setAttributeNS(null,"height",slidRectHeight); |
| this.rectAlpha.setAttributeNS(null,"fill","url(#"+this.id+"_alphaGradient)"); |
| this.parentGroup.appendChild(this.rectAlpha); |
| //create val slider |
| this.slidAlpha = new slider("alphaSlider_"+this.id,this.parentGroup,slidLeft,yNew,0,this.x + this.width * 0.7,yNew,100,100,sliderStyles,invisSliderLineWidth,this.sliderSymbId,this,true); |
| var alphaText = document.createElementNS(svgNS,"text"); |
| for (var attrib in this.textstyles) { |
| alphaText.setAttributeNS(null,attrib,this.textstyles[attrib]); |
| } |
| alphaText.setAttributeNS(null,"pointer-events","none"); |
| alphaText.setAttributeNS(null,"x",this.slidAlpha.x2 + this.width * 0.02); |
| alphaText.setAttributeNS(null,"y",this.slidAlpha.y2 + this.width * 0.015); |
| var alphaTextNode = document.createTextNode("Opacity (%)"); |
| alphaText.appendChild(alphaTextNode); |
| this.parentGroup.appendChild(alphaText); |
| } |
| //create text to hold rgb/hsv values |
| if (this.colValTextVisible) { |
| this.colValText = document.createElementNS(svgNS,"text"); |
| for (var attrib in this.textstyles) { |
| this.colValText.setAttributeNS(null,attrib,this.textstyles[attrib]); |
| } |
| this.colValText.setAttributeNS(null,"x",this.slidHue.x1); |
| this.colValText.setAttributeNS(null,"y",this.y + this.height * 0.95); |
| var textNode = document.createTextNode("RGB: 255,0,0; HSV: 0,100,100"); |
| this.colValText.appendChild(textNode); |
| this.parentGroup.appendChild(this.colValText); |
| } |
| |
| fillHSVvar = rgb2hsv(parseInt(this.fillStartColors[0]),parseInt(this.fillStartColors[1]),parseInt(this.fillStartColors[2])); |
| strokeHSVvar = rgb2hsv(parseInt(this.strokeStartColors[0]),parseInt(this.strokeStartColors[1]),parseInt(this.strokeStartColors[2])); |
| this.hue = new Array(); |
| this.hue["fill"] = fillHSVvar["hue"]; |
| this.hue["stroke"] = strokeHSVvar["hue"]; |
| this.sat = new Array(); |
| this.sat["fill"] = fillHSVvar["sat"]; |
| this.sat["stroke"] = strokeHSVvar["sat"]; |
| this.val = new Array(); |
| this.val["fill"] = fillHSVvar["val"]; |
| this.val["stroke"] = strokeHSVvar["val"]; |
| this.alpha = new Array(); |
| this.alpha["fill"] = parseFloat(this.fillStartColors[3]); |
| this.alpha["stroke"] = parseFloat(this.strokeStartColors[3]); |
| this.rgbArr = new Array(); |
| this.rgbArr["fill"] = hsv2rgb(this.hue["fill"],this.sat["fill"],this.val["fill"]); |
| this.rgbArr["stroke"] = hsv2rgb(this.hue["stroke"],this.sat["stroke"],this.val["stroke"]); |
| this.setRGBAColour(this.activeColourType,this.rgbArr[this.activeColourType]["red"],this.rgbArr[this.activeColourType]["green"],this.rgbArr[this.activeColourType]["blue"],this.alpha[this.activeColourType],false); |
| |
| //indicate that it was created once |
| this.created = true; |
| } |
| else { |
| alert("could not create or reference 'parentNode' of button with id '"+this.id+"'"); |
| } |
| } |
| |
| colourPicker.prototype.handleEvent = function(evt) { |
| var el = evt.target; |
| if (evt.type == "click") { |
| var id = el.getAttributeNS(null,"id"); |
| if (id == this.id+"_fillColour") { |
| this.activeColourType = "fill"; |
| if (this.strokeVisible) { |
| this.parentGroup.insertBefore(this.strokeRect,this.fillRect); |
| } |
| } |
| if (id == this.id+"_strokeColour") { |
| this.activeColourType = "stroke"; |
| if (this.fillVisible) { |
| this.parentGroup.insertBefore(this.fillRect,this.strokeRect); |
| } |
| } |
| if (id == this.id+"_fillColour" || id == this.id+"_strokeColour") { |
| this.setRGBAColour(this.activeColourType,this.rgbArr[this.activeColourType]["red"],this.rgbArr[this.activeColourType]["green"],this.rgbArr[this.activeColourType]["blue"],this.alpha[this.activeColourType],false); |
| } |
| } |
| } |
| |
| //this method should be used from external |
| colourPicker.prototype.getValues = function() { |
| var result = {"fill":{"red":this.rgbArr["fill"]["red"],"green":this.rgbArr["fill"]["green"],"blue":this.rgbArr["fill"]["blue"],"alpha":this.alpha["fill"],"hue":this.hue["fill"],"sat":this.sat["fill"],"val":this.val["fill"]},"stroke":{"red":this.rgbArr["stroke"]["red"],"green":this.rgbArr["stroke"]["green"],"blue":this.rgbArr["stroke"]["blue"],"alpha":this.alpha["stroke"],"hue":this.hue["stroke"],"sat":this.sat["stroke"],"val":this.val["stroke"]}}; |
| return result; |
| } |
| |
| //this method is used by this object but may be also used from external |
| colourPicker.prototype.setRGBAColour = function(colourType,red,green,blue,alpha,fireFunction) { |
| //colourType = fill|stroke |
| hsvArr = rgb2hsv(red,green,blue); |
| this.hue[colourType] = hsvArr["hue"]; |
| this.sat[colourType] = hsvArr["sat"]; |
| this.val[colourType] = hsvArr["val"]; |
| this.alpha[colourType] = alpha; |
| this.rgbArr[colourType]["red"] = red; |
| this.rgbArr[colourType]["green"] = green; |
| this.rgbArr[colourType]["blue"] = blue; |
| if (colourType == this.activeColourType) { |
| this.slidHue.setValue(this.hue[colourType]); |
| if (this.satSliderVisible) { |
| this.slidSat.setValue(Math.round(this.sat[colourType] * 100)); |
| rgbSatEnd = hsv2rgb(this.hue[this.activeColourType],1,this.val[this.activeColourType]); |
| rgbSatStart = hsv2rgb(this.hue[this.activeColourType],0,this.val[this.activeColourType]); |
| this.satStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbSatStart["red"]+","+rgbSatStart["green"]+","+rgbSatStart["blue"]+")"); |
| this.satEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbSatEnd["red"]+","+rgbSatEnd["green"]+","+rgbSatEnd["blue"]+")"); |
| if (myMapApp.navigator == "Batik") { |
| this.rectSat.removeAttributeNS(null,"fill"); |
| this.rectSat.setAttributeNS(null,"fill","url(#"+this.id+"_satGradient)"); |
| } |
| } |
| if (this.valSliderVisible) { |
| this.slidVal.setValue(Math.round(this.val[colourType] * 100)); |
| rgbValEnd = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],1); |
| rgbValStart = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],0); |
| this.valStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbValStart["red"]+","+rgbValStart["green"]+","+rgbValStart["blue"]+")"); |
| this.valEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbValEnd["red"]+","+rgbValEnd["green"]+","+rgbValEnd["blue"]+")"); |
| if (myMapApp.navigator == "Batik") { |
| this.rectVal.removeAttributeNS(null,"fill"); |
| this.rectVal.setAttributeNS(null,"fill","url(#"+this.id+"_valGradient)"); |
| } |
| } |
| if (this.alphaSliderVisible) { |
| this.slidAlpha.setValue(Math.round(this.alpha[colourType] * 100)); |
| rgbAlpha = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],this.val[this.activeColourType]); |
| this.alphaStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbAlpha["red"]+","+rgbAlpha["green"]+","+rgbAlpha["blue"]+")"); |
| this.alphaEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbAlpha["red"]+","+rgbAlpha["green"]+","+rgbAlpha["blue"]+")"); |
| if (myMapApp.navigator == "Batik") { |
| this.rectAlpha.removeAttributeNS(null,"fill"); |
| this.rectAlpha.setAttributeNS(null,"fill","url(#"+this.id+"_alphaGradient)"); |
| } |
| } |
| if (this.colValTextVisible) { |
| this.colValText.firstChild.nodeValue = "RGBA: "+this.rgbArr[this.activeColourType]["red"]+","+this.rgbArr[this.activeColourType]["green"]+","+this.rgbArr[this.activeColourType]["blue"]+","+Math.round(this.alpha[this.activeColourType] * 100) +"; HSVA: "+this.hue[this.activeColourType]+","+Math.round(this.sat[this.activeColourType] * 100)+","+Math.round(this.val[this.activeColourType] * 100)+","+Math.round(this.alpha[this.activeColourType] * 100); |
| } |
| } |
| //set values in fill and stroke rectangles |
| if (colourType == "stroke") { |
| this.strokeRect.setAttributeNS(null,"stroke","rgb("+red+","+green+","+blue+")"); |
| this.strokeRect.setAttributeNS(null,"stroke-opacity",alpha); |
| } |
| if (colourType == "fill") { |
| this.fillRect.setAttributeNS(null,"fill","rgb("+red+","+green+","+blue+")"); |
| this.fillRect.setAttributeNS(null,"fill-opacity",alpha); |
| } |
| if (fireFunction) { |
| this.fireFunction(); |
| } |
| } |
| |
| //this is a helper method to be used by this object only |
| colourPicker.prototype.getSliderVal = function(changeType,sliderId,slidValue) { |
| //get all colour values from sliders |
| if (sliderId == "hueSlider_"+this.id) { |
| this.hue[this.activeColourType] = Math.round(this.slidHue.value); |
| } |
| if (sliderId == "satSlider_"+this.id && this.satSliderVisible) { |
| this.sat[this.activeColourType] = Math.round(this.slidSat.value) / 100; |
| } |
| if (sliderId == "valSlider_"+this.id && this.valSliderVisible) { |
| this.val[this.activeColourType] = Math.round(this.slidVal.value) / 100; |
| } |
| if (sliderId == "alphaSlider_"+this.id && this.alphaSliderVisible) { |
| this.alpha[this.activeColourType] = Math.round(this.slidAlpha.value) / 100; |
| } |
| this.rgbArr[this.activeColourType] = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],this.val[this.activeColourType]); |
| if (this.fillVisible && this.activeColourType == "fill") { |
| this.fillRect.setAttributeNS(null,"fill","rgb("+this.rgbArr["fill"]["red"]+","+this.rgbArr["fill"]["green"]+","+this.rgbArr["fill"]["blue"]+")"); |
| this.fillRect.setAttributeNS(null,"fill-opacity",this.alpha[this.activeColourType]); |
| } |
| if (this.strokeVisible && this.activeColourType == "stroke") { |
| this.strokeRect.setAttributeNS(null,"stroke","rgb("+this.rgbArr["stroke"]["red"]+","+this.rgbArr["stroke"]["green"]+","+this.rgbArr["stroke"]["blue"]+")"); |
| this.strokeRect.setAttributeNS(null,"stroke-opacity",this.alpha[this.activeColourType]); |
| } |
| if (this.colValTextVisible) { |
| this.colValText.firstChild.nodeValue = "RGBA: "+this.rgbArr[this.activeColourType]["red"]+","+this.rgbArr[this.activeColourType]["green"]+","+this.rgbArr[this.activeColourType]["blue"]+","+Math.round(this.alpha[this.activeColourType] * 100) +"; HSVA: "+this.hue[this.activeColourType]+","+Math.round(this.sat[this.activeColourType] * 100)+","+Math.round(this.val[this.activeColourType] * 100)+","+Math.round(this.alpha[this.activeColourType] * 100); |
| } |
| if (this.satSliderVisible) { |
| rgbSatEnd = hsv2rgb(this.hue[this.activeColourType],1,this.val[this.activeColourType]); |
| rgbSatStart = hsv2rgb(this.hue[this.activeColourType],0,this.val[this.activeColourType]); |
| this.satStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbSatStart["red"]+","+rgbSatStart["green"]+","+rgbSatStart["blue"]+")"); |
| this.satEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbSatEnd["red"]+","+rgbSatEnd["green"]+","+rgbSatEnd["blue"]+")"); |
| if (myMapApp.navigator == "Batik") { |
| this.rectSat.removeAttributeNS(null,"fill"); |
| this.rectSat.setAttributeNS(null,"fill","url(#"+this.id+"_satGradient)"); |
| } |
| } |
| if (this.valSliderVisible) { |
| rgbValEnd = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],1); |
| rgbValStart = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],0); |
| this.valStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbValStart["red"]+","+rgbValStart["green"]+","+rgbValStart["blue"]+")"); |
| this.valEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbValEnd["red"]+","+rgbValEnd["green"]+","+rgbValEnd["blue"]+")"); |
| if (myMapApp.navigator == "Batik") { |
| this.rectVal.removeAttributeNS(null,"fill"); |
| this.rectVal.setAttributeNS(null,"fill","url(#"+this.id+"_valGradient)"); |
| } |
| } |
| if (this.alphaSliderVisible) { |
| rgbAlpha = hsv2rgb(this.hue[this.activeColourType],this.sat[this.activeColourType],this.val[this.activeColourType]); |
| this.alphaStartGradient.setAttributeNS(null,"stop-color","rgb("+rgbAlpha["red"]+","+rgbAlpha["green"]+","+rgbAlpha["blue"]+")"); |
| this.alphaEndGradient.setAttributeNS(null,"stop-color","rgb("+rgbAlpha["red"]+","+rgbAlpha["green"]+","+rgbAlpha["blue"]+")"); |
| if (myMapApp.navigator == "Batik") { |
| this.rectAlpha.removeAttributeNS(null,"fill"); |
| this.rectAlpha.setAttributeNS(null,"fill","url(#"+this.id+"_alphaGradient)"); |
| } |
| } |
| this.fireFunction(); |
| } |
| |
| //this hides a colourPicker |
| colourPicker.prototype.hide = function() { |
| this.parentGroup.setAttributeNS(null,"display","none"); |
| } |
| |
| //this method shows a colourPicker once it was hidden |
| colourPicker.prototype.show = function() { |
| this.parentGroup.setAttributeNS(null,"display","inherit"); |
| } |
| |
| //this is an internal method |
| colourPicker.prototype.fireFunction = function() { |
| var values = this.getValues(); |
| if (typeof(this.functionToCall) == "function") { |
| this.functionToCall(this.id,values); |
| } |
| if (typeof(this.functionToCall) == "object") { |
| this.functionToCall.colourChanged(this.id,values); |
| } |
| if (typeof(this.functionToCall) == undefined) { |
| return; |
| } |
| } |
| |
| //this method is for internal use only |
| colourPicker.prototype.rebuild = function() { |
| this.fillStartColors = new Array(this.rgbArr["fill"]["red"],this.rgbArr["fill"]["green"],this.rgbArr["fill"]["blue"],this.alpha["fill"]); |
| this.strokeStartColors = new Array(this.rgbArr["stroke"]["red"],this.rgbArr["stroke"]["green"],this.rgbArr["stroke"]["blue"],this.alpha["stroke"]); |
| this.parentGroup.parentNode.removeChild(this.parentGroup); |
| this.createColourpicker(); |
| } |
| |
| //this method allows to move the colourPicker to a different position |
| colourPicker.prototype.moveTo = function(x,y) { |
| this.x = x; |
| this.y = y; |
| this.rebuild(); |
| } |
| |
| //this method changes the size of the colourPicker, you should make sure that the width and height values aren't too small, otherwise the colourPicker would look a bit strange ... |
| colourPicker.prototype.resize = function(width,height) { |
| this.width = width; |
| this.height = height; |
| this.rebuild(); |
| } |
