third_party/WebKit/LayoutTests/svg/carto.net/colourpicker.svg

   1 <?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
   2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
   3     <!ATTLIST svg
   4         xmlns:a3 CDATA #IMPLIED
   5         a3:scriptImplementation CDATA #IMPLIED>
   6     <!ATTLIST script
   7         a3:scriptImplementation CDATA #IMPLIED>
   8 ]>
   9 <?AdobeSVGViewer save="snapshot"?>
  10 <svg width="100%" height="100%" viewBox="0 0 1024 768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt);">
  11         <script type="text/ecmascript" xlink:href="resources/helper_functions.js" />
  12         <script type="text/ecmascript" xlink:href="resources/timer.js" />
  13         <script type="text/ecmascript" xlink:href="resources/mapApp.js" />
  14         <script type="text/ecmascript" xlink:href="resources/slider.js" />
  15         <script type="text/ecmascript" xlink:href="resources/button.js" />
  16         <script type="text/ecmascript" xlink:href="resources/colourPicker.js" />
  17         <script type="text/ecmascript"><![CDATA[
  18                 var myMapApp;
  19                 var cpTransBgRect;
  20
  21                 function init(evt) {
  22                         //initialize mapApp
  23                         myMapApp = new mapApp(false,undefined);
  24                         //first some colour picker styles
  25                         var cpBgStyles = {"fill":"gainsboro"};
  26                         var cpTextStyles = {"font-family":"Arial,Helvetica","font-size":12,"fill":"dimgray"};
  27                         //button styles
  28                         var buttonTextStyles = {"font-family":"Arial,Helvetica","fill":"dimgray","font-size":12};
  29                         var buttonStyles = {"fill":"gainsboro"};
  30                         var shadeLightStyles = {"fill":"white"};
  31                         var shadeDarkStyles = {"fill":"dimgray"};
  32                                                 //colourPicker(id,parentNode,x,y,width,height,bgstyles,textstyles,sliderSymbId,satSliderVisible,valSliderVisible,alphaSliderVisible,colValTextVisible,fillVisible,strokeVisible,startHue,endHue,nrStopVals,fillStartColor,strokeStartColor,functionToCall)
  33                         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);
  34                         myMapApp.colourPickers["myColourPicker2"] = new colourPicker("colourPicker2","colourPickerTransformed",500,200,300,90,cpBgStyles,cpTextStyles,"sliderSymbol",true,false,true,true,true,false,90,240,6,"0,255,255,0.5","0,0,0,1",changeBgColor);
  35                         myMapApp.colourPickers["myColourPicker3"] = new colourPicker("colourPicker3","colourPickers",500,200,300,100,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,false,true,true,true,0,180,7,"255,0,0,1","120,120,120,1",undefined);
  36                         myMapApp.colourPickers["myColourPicker4"] = new colourPicker("colourPicker4","colourPickers",700,500,300,120,cpBgStyles,cpTextStyles,"sliderSymbol",true,true,true,true,false,true,0,360,7,"255,0,0,1","120,120,120,1",undefined);
  37
  38                         //create ok button
  39                         myMapApp.buttons["okbutton"] = new button("okbutton","textbuttons",alertColorValues,"rect","OK",undefined,460,499,25,16,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
  40                         //create hide/show buttons
  41                         myMapApp.buttons["showHideButton"] = new button("showHideButton","buttons",showHideCP,"rect","Hide ColourPicker",undefined,510,442,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
  42                         //create set random fill button
  43                         myMapApp.buttons["fullbutton"] = new button("fullbutton","buttons",setRandomCol,"rect","Set Random Fill",undefined,510,470,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
  44                         //create set random stroke button
  45                         myMapApp.buttons["strokebutton"] = new button("strokebutton","buttons",setRandomCol,"rect","Set Random Stroke",undefined,510,498,110,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
  46                         //create resize and moveTo buttons
  47                         myMapApp.buttons["resizebutton"] = new button("resizebutton","buttons",resizeColourPicker,"rect","Randomly Resize Colour Picker",undefined,500,170,180,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
  48                         myMapApp.buttons["movetobutton"] = new button("movetobutton","buttons",moveColourPicker,"rect","Randomly Move Colour Picker",undefined,685,170,180,20,buttonTextStyles,buttonStyles,shadeLightStyles,shadeDarkStyles,1);
  49
  50                         cpTransBgRect = document.getElementById("cpTransBgRect");
  51
  52                 }
  53
  54                 function alertColorValues() {
  55                         values = myMapApp.colourPickers["myColourPicker1"].getValues();
  56                         alert("Fill RGBA: "+values.fill.red+","+values.fill.green+","+values.fill.blue+","+values.fill.alpha+", Stroke RGBA: "+values.stroke.red+","+values.stroke.blue+","+values.stroke.green+","+values.stroke.alpha);
  57                 }
  58
  59                 function changeBgColor(id,values) {
  60                         cpTransBgRect.setAttributeNS(null,"fill-opacity",values.fill.alpha);
  61                         cpTransBgRect.setAttributeNS(null,"fill","rgb("+values.fill.red+","+values.fill.green+","+values.fill.blue+")");
  62                 }
  63
  64                 function showHideCP(id,evt,buttonText) {
  65                         if (buttonText == "Hide ColourPicker") {
  66                                 myMapApp.colourPickers["myColourPicker1"].hide();
  67                                 myMapApp.buttons["okbutton"].hideButton();
  68                                 myMapApp.buttons["showHideButton"].setTextValue("Show ColourPicker");
  69                         }
  70                         else {
  71                                 myMapApp.colourPickers["myColourPicker1"].show();
  72                                 myMapApp.buttons["okbutton"].showButton();
  73                                 myMapApp.buttons["showHideButton"].setTextValue("Hide ColourPicker");
  74                         }
  75                 }
  76
  77                 function resizeColourPicker(id,evt,buttonText) {
  78                         var width = 300 + Math.round(Math.random()*60);
  79                         var height = 100 + Math.round(Math.random()*30);
  80                         myMapApp.colourPickers["myColourPicker3"].resize(width,height);
  81                 }
  82
  83                 function moveColourPicker(id,evt,buttonText) {
  84                         var x = 470 + Math.round(Math.random()*60);
  85                         var y = 200 + Math.round(Math.random()*50);
  86                         myMapApp.colourPickers["myColourPicker3"].moveTo(x,y);
  87                 }
  88
  89                 function setRandomCol(id,evt,buttonText) {
  90                         var colType = "fill";
  91                         if (id == "strokebutton") {
  92                                 colType = "stroke";
  93                         }
  94                         var red = Math.round(Math.random()*255);
  95                         var green = Math.round(Math.random()*255);
  96                         var blue = Math.round(Math.random()*255);
  97                         myMapApp.colourPickers["myColourPicker1"].setRGBAColour(colType,red,green,blue,1,false);
  98                 }
  99
 100 ]]></script>
 101         <defs>
 102                 <!-- Symbol for Slider -->
 103                 <symbol id="sliderSymbol" overflow="visible">
 104                         <line x1="0" y1="-10" x2="0" y2="10" stroke="dimgray" stroke-width="5" pointer-events="none"/>
 105                 </symbol>
 106         </defs>
 107         <rect x="-2000" y="-2000" width="6000" height="6000" fill="white" stroke="none" />
 108         <!-- group for colourPickers -->
 109         <g id="colourPickers" />
 110         <!-- group for transformed colour picker -->
 111         <g id="colourPickerTransformed" transform="translate(0,-400),rotate(45)">
 112                 <rect id="cpTransBgRect" x="490" y="190" width="320" height="110" fill="rgb(0,255,255)" fill-opacity="0.5" />
 113                 <text x="500" y="320" font-family="Arial,Helvetica">This colourPicker has a callBack function<tspan x="500" dy="1.2em">attached that changes the background color</tspan></text>
 114         </g>
 115         <g id="buttons" />
 116 </svg>