Permalink
Browse files
[FEATURE] New custom QGIS color picker dialog. Basically
it's a Frankenstein's monster of the best bits of lots of other color picker implementations. Features include: - Sliders for hue, saturation, value, red, green, blue color components - Alpha slider - Option to copy/paste html color codes (in a variety of formats) - Before/after color preview, with alpha preview - Interactive 2D color ramp widget - Hue wheel/triangle widget - Editable color swatch lists - Live color sampler with option to sample over a set radius - Supports interaction with other apps via drag and drop of colors (OS support dependant) - Option to disable the dialog and use the native picker dialog instead (TODO: make the dialog so awesome that even @dakcarto switches across...) Credit for icons goes to 3nids!
- Loading branch information
Showing
with
3,152 additions
and 171 deletions.
- +4 −0 images/images.qrc
- +307 −0 images/themes/default/mIconColorBox.svg
- +152 −0 images/themes/default/mIconColorPicker.svg
- +253 −0 images/themes/default/mIconColorSwatches.svg
- +343 −0 images/themes/default/mIconColorWheel.svg
- +12 −12 python/gui/qgscolorbuttonv2.sip
- +95 −0 python/gui/qgscolordialog.sip
- +7 −7 python/gui/qgscolorschemelist.sip
- +6 −5 python/gui/qgscolorwidgets.sip
- +2 −2 src/app/composer/qgscomposerarrowwidget.cpp
- +2 −2 src/app/composer/qgscomposeritemwidget.cpp
- +4 −4 src/app/composer/qgscomposermapwidget.cpp
- +4 −4 src/app/composer/qgscomposerscalebarwidget.cpp
- +3 −3 src/app/composer/qgscomposertablewidget.cpp
- +2 −2 src/app/qgsannotationwidget.cpp
- +4 −3 src/app/qgsdiagramproperties.cpp
- +2 −2 src/app/qgslabelinggui.cpp
- +8 −5 src/app/qgsoptions.cpp
- +3 −3 src/app/qgsprojectproperties.cpp
- +1 −1 src/app/qgstextannotationdialog.cpp
- +38 −7 src/gui/qgscolorbutton.cpp
- +51 −23 src/gui/qgscolorbuttonv2.cpp
- +17 −19 src/gui/qgscolorbuttonv2.h
- +717 −1 src/gui/qgscolordialog.cpp
- +152 −1 src/gui/qgscolordialog.h
- +13 −1 src/gui/qgscolorschemelist.cpp
- +7 −7 src/gui/qgscolorschemelist.h
- +16 −10 src/gui/qgscolorwidgets.cpp
- +6 −5 src/gui/qgscolorwidgets.h
- +2 −1 src/gui/raster/qgspalettedrendererwidget.cpp
- +2 −2 src/gui/raster/qgssinglebandpseudocolorrendererwidget.cpp
- +2 −2 src/gui/symbology-ng/qgsellipsesymbollayerv2widget.cpp
- +2 −2 src/gui/symbology-ng/qgsrendererv2widget.cpp
- +10 −10 src/gui/symbology-ng/qgssymbollayerv2widget.cpp
- +1 −1 src/gui/symbology-ng/qgssymbolslistwidget.cpp
- +21 −9 src/gui/symbology-ng/qgsvectorgradientcolorrampv2dialog.cpp
- +869 −0 src/ui/qgscolordialog.ui
- +12 −15 src/ui/qgsoptionsbase.ui
| @@ -0,0 +1,307 @@ | ||
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> | ||
| <svg | ||
| xmlns:dc="http://purl.org/dc/elements/1.1/" | ||
| xmlns:cc="http://creativecommons.org/ns#" | ||
| xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | ||
| xmlns:svg="http://www.w3.org/2000/svg" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| xmlns:xlink="http://www.w3.org/1999/xlink" | ||
| xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | ||
| xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | ||
| viewBox="0 0 16 16" | ||
| id="svg2" | ||
| version="1.1" | ||
| inkscape:version="0.48.4 r9939" | ||
| width="100%" | ||
| height="100%" | ||
| sodipodi:docname="mIconColorBox.svg"> | ||
| <sodipodi:namedview | ||
| pagecolor="#ffffff" | ||
| bordercolor="#666666" | ||
| borderopacity="1" | ||
| objecttolerance="10" | ||
| gridtolerance="10" | ||
| guidetolerance="10" | ||
| inkscape:pageopacity="0" | ||
| inkscape:pageshadow="2" | ||
| inkscape:window-width="1296" | ||
| inkscape:window-height="874" | ||
| id="namedview69" | ||
| showgrid="true" | ||
| inkscape:zoom="16.685714" | ||
| inkscape:cx="1.8318781" | ||
| inkscape:cy="8.4843315" | ||
| inkscape:window-x="323" | ||
| inkscape:window-y="34" | ||
| inkscape:window-maximized="0" | ||
| inkscape:current-layer="svg2"> | ||
| <inkscape:grid | ||
| type="xygrid" | ||
| id="grid3002" | ||
| empspacing="5" | ||
| visible="true" | ||
| enabled="true" | ||
| snapvisiblegridlinesonly="true" /> | ||
| </sodipodi:namedview> | ||
| <defs | ||
| id="defs4"> | ||
| <linearGradient | ||
| id="arcoiris" | ||
| x1="10" | ||
| y1="10" | ||
| x2="310" | ||
| y2="10" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(0.04037581,0,0,0.04392388,1.7650425,-14.683388)"> | ||
| <stop | ||
| style="stop-color:#F00" | ||
| offset="0" | ||
| id="stop7" /> | ||
| <stop | ||
| style="stop-color:#FF0" | ||
| offset=".1666" | ||
| id="stop9" /> | ||
| <stop | ||
| style="stop-color:#0F0" | ||
| offset=".3333" | ||
| id="stop11" /> | ||
| <stop | ||
| style="stop-color:#0FF" | ||
| offset=".5" | ||
| id="stop13" /> | ||
| <stop | ||
| style="stop-color:#00F" | ||
| offset=".6666" | ||
| id="stop15" /> | ||
| <stop | ||
| style="stop-color:#F0F" | ||
| offset=".8333" | ||
| id="stop17" /> | ||
| <stop | ||
| style="stop-color:#F00" | ||
| offset="1" | ||
| id="stop19" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| id="cinza" | ||
| y2="310" | ||
| x2="10" | ||
| x1="10" | ||
| y1="10" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(0.04037581,0,0,0.04392388,1.7650425,-14.683388)"> | ||
| <stop | ||
| style="stop-color:#7F7F7F;stop-opacity:0" | ||
| offset="0" | ||
| id="stop22" /> | ||
| <stop | ||
| style="stop-color:#ffffff;stop-opacity:1;" | ||
| offset="1" | ||
| id="stop24" /> | ||
| </linearGradient> | ||
| <linearGradient | ||
| inkscape:collect="always" | ||
| xlink:href="#arcoiris" | ||
| id="linearGradient3797" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(0.04037581,0,0,0.04392388,1.7650425,-14.683388)" | ||
| x1="10" | ||
| y1="10" | ||
| x2="310" | ||
| y2="10" /> | ||
| <linearGradient | ||
| inkscape:collect="always" | ||
| xlink:href="#cinza" | ||
| id="linearGradient3799" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(0.04037581,0,0,0.04392388,1.7650425,-14.683388)" | ||
| x1="10" | ||
| y1="10" | ||
| x2="10" | ||
| y2="310" /> | ||
| <linearGradient | ||
| inkscape:collect="always" | ||
| xlink:href="#cinza" | ||
| id="linearGradient3802" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(0.04,0,0,0.04333333,1.6000001,-14.433341)" | ||
| x1="10" | ||
| y1="10" | ||
| x2="10" | ||
| y2="310" /> | ||
| <linearGradient | ||
| inkscape:collect="always" | ||
| xlink:href="#arcoiris" | ||
| id="linearGradient3805" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(0.0397351,0,0,0.04304635,1.642384,-14.387417)" | ||
| x1="10" | ||
| y1="10" | ||
| x2="310" | ||
| y2="10" /> | ||
| <linearGradient | ||
| inkscape:collect="always" | ||
| xlink:href="#arcoiris" | ||
| id="linearGradient3808" | ||
| gradientUnits="userSpaceOnUse" | ||
| gradientTransform="matrix(0.04,0,0,0.04333333,1.6000001,-14.433341)" | ||
| x1="10" | ||
| y1="10" | ||
| x2="310" | ||
| y2="10" /> | ||
| </defs> | ||
| <script | ||
| type="text/javascript" | ||
| id="script35">var h = 0, s = 100, l = 50, Cr = 255, Cg = 0, Cb = 0; | ||
| var arrastarHS = false, arrastarL = false; | ||
| function $(id) { return document.getElementById(id); } | ||
| function inic() { | ||
| $("doc").onmousemove = retornar; | ||
| $("doc").onmousedown = function(event) { | ||
| var x = event.clientX - 10, y = event.clientY - 10; | ||
| if(x > 0 && x < 300 && y > 0 && y < 300) arrastarHS = true; | ||
| if(x > 310 && x < 350 && y > 0 && y < 300) arrastarL = true; | ||
| } | ||
| $("doc").onmouseup = function() { arrastarHS = arrastarL = false; } | ||
| $("doc").onmouseout = function() { arrastarHS = arrastarL = false; } | ||
| } | ||
| function retornar(event) { | ||
| var x = event.clientX - 10; | ||
| var y = event.clientY - 10; | ||
| if(x > 0 && x < 300 && y > 0 && y < 300) $("doc").style.cursor = "crosshair"; | ||
| else $("doc").style.cursor = "auto"; | ||
| if(arrastarHS) { | ||
| if(x < 0) x = 0; | ||
| else if(x > 300) x = 300; | ||
| if(y < 0) y = 0; | ||
| else if(y > 300) y = 300; | ||
| h = Math.round(x * 1.2); | ||
| s = Math.round(-(y / 3) + 100); | ||
| cor(); | ||
| $("cic").setAttribute("cx", x + 10); | ||
| $("cic").setAttribute("cy", y + 10); | ||
| } | ||
| if(arrastarL) { | ||
| if(y < 0) y = 0; | ||
| else if(y > 300) y = 300; | ||
| l = Math.round(-(y / 3) + 100); | ||
| quad(); | ||
| $("mar").setAttribute("transform", "translate(0, "+y+")"); | ||
| } | ||
| } | ||
| function cor() { | ||
| var b = h / 60 - 3; | ||
| if(b < 0) b = 6 + b; | ||
| Cr = Math.round((b<1||b>5?1:b>2&&b<4?0:b<3?2-b:b-4) * 255); | ||
| Cg = Math.round((b>1&&b<3?1:b>4?0:b<2?b:4-b) * 255); | ||
| Cb = Math.round((b>3&&b<5?1:b<2?0:b<4?b-2:6-b) * 255); | ||
| Cr = Math.round(127.5 + (127.5 - Cr) * s / 100); | ||
| Cg = Math.round(127.5 + (127.5 - Cg) * s / 100); | ||
| Cb = Math.round(127.5 + (127.5 - Cb) * s / 100); | ||
| $("cic").style.fill = $("cor").style.fill = "#" + hex(Cr) + hex(Cg) + hex(Cb); | ||
| quad(); | ||
| } | ||
| function quad() { | ||
| var b = h / 60 - 3; | ||
| if(b < 0) b = 6 + b; | ||
| Cr = Math.round((b<1||b>5?1:b>2&&b<4?0:b<3?2-b:b-4) * 255); | ||
| Cg = Math.round((b>1&&b<3?1:b>4?0:b<2?b:4-b) * 255); | ||
| Cb = Math.round((b>3&&b<5?1:b<2?0:b<4?b-2:6-b) * 255); | ||
| Cr = Math.round(127.5 + (127.5 - Cr) * s / 100); | ||
| Cg = Math.round(127.5 + (127.5 - Cg) * s / 100); | ||
| Cb = Math.round(127.5 + (127.5 - Cb) * s / 100); | ||
| Cr = Math.round(l > 50 ? Cr + (l / 50 - 1) * (255 - Cr) : l / 50 * Cr); | ||
| Cg = Math.round(l > 50 ? Cg + (l / 50 - 1) * (255 - Cg) : l / 50 * Cg); | ||
| Cb = Math.round(l > 50 ? Cb + (l / 50 - 1) * (255 - Cb) : l / 50 * Cb); | ||
| $("RGB1").firstChild.nodeValue = Cr; | ||
| $("RGB2").firstChild.nodeValue = Cg; | ||
| $("RGB3").firstChild.nodeValue = Cb; | ||
| $("HSL1").firstChild.nodeValue = h + "º"; | ||
| $("HSL2").firstChild.nodeValue = s + "%"; | ||
| $("HSL3").firstChild.nodeValue = l + "%"; | ||
| $("quad").style.fill = $("HEX").firstChild.nodeValue = "#" + hex(Cr) + hex(Cg) + hex(Cb); | ||
| } | ||
| function hex(n) { | ||
| if(n < 16) return "0" + n.toString(16).toUpperCase(); | ||
| else return n.toString(16).toUpperCase(); | ||
| } | ||
| window.onload = inic;</script> | ||
| <rect | ||
| y="-14" | ||
| x="2" | ||
| style="fill:url(#linearGradient3808)" | ||
| height="13" | ||
| width="12" | ||
| id="rect39" | ||
| transform="matrix(0,1,-1,0,0,0)" /> | ||
| <rect | ||
| y="-14" | ||
| x="2" | ||
| style="fill:url(#linearGradient3802);fill-opacity:1" | ||
| height="13" | ||
| width="12" | ||
| id="rect41" | ||
| transform="matrix(0,1,-1,0,0,0)" /> | ||
| <metadata | ||
| id="metadata67"> | ||
| <rdf:RDF> | ||
| <cc:Work> | ||
| <dc:format>image/svg+xml</dc:format> | ||
| <dc:type | ||
| rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | ||
| <cc:license | ||
| rdf:resource="http://creativecommons.org/licenses/publicdomain/" /> | ||
| <dc:publisher> | ||
| <cc:Agent | ||
| rdf:about="http://openclipart.org/"> | ||
| <dc:title>Openclipart</dc:title> | ||
| </cc:Agent> | ||
| </dc:publisher> | ||
| <dc:title /> | ||
| <dc:date>2011-01-27T17:35:20</dc:date> | ||
| <dc:description>interactive, color, colors, color picker, javascript, drag and drop. | ||
| \nTwo errors fixed: | ||
| \nWrong color representation in Webkit and initial representation of red as rgb(255, 255, 255)</dc:description> | ||
| <dc:source>https://openclipart.org/detail/110227/cores2-by-guerreiro</dc:source> | ||
| <dc:creator> | ||
| <cc:Agent> | ||
| <dc:title>Guerreiro</dc:title> | ||
| </cc:Agent> | ||
| </dc:creator> | ||
| <dc:subject> | ||
| <rdf:Bag> | ||
| <rdf:li>color</rdf:li> | ||
| <rdf:li>color picker</rdf:li> | ||
| <rdf:li>colors</rdf:li> | ||
| <rdf:li>drag and drop</rdf:li> | ||
| <rdf:li>interactive</rdf:li> | ||
| <rdf:li>javascript</rdf:li> | ||
| </rdf:Bag> | ||
| </dc:subject> | ||
| </cc:Work> | ||
| <cc:License | ||
| rdf:about="http://creativecommons.org/licenses/publicdomain/"> | ||
| <cc:permits | ||
| rdf:resource="http://creativecommons.org/ns#Reproduction" /> | ||
| <cc:permits | ||
| rdf:resource="http://creativecommons.org/ns#Distribution" /> | ||
| <cc:permits | ||
| rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /> | ||
| </cc:License> | ||
| </rdf:RDF> | ||
| </metadata> | ||
| <rect | ||
| style="fill:none;stroke:#f9f9f9;stroke-width:0.99329752;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | ||
| id="rect3004-6" | ||
| width="14.006702" | ||
| height="13.006702" | ||
| x="0.49664885" | ||
| y="1.4966488" /> | ||
| <rect | ||
| style="fill:none;stroke:#999999;stroke-width:1.00365841;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" | ||
| id="rect3004" | ||
| width="14.996342" | ||
| height="14.996342" | ||
| x="0.50182921" | ||
| y="0.50182909" /> | ||
| </svg> |
Oops, something went wrong.