Warning, /sdk/licensedigger/autotests/testdata/GPL-2.0-or-later/ColorPicker.qml is written in an unsupported language. File is not indexed.

0001 /*
0002  * Copyright 2014 Denis Steckelmacher <steckdenis@yahoo.fr>
0003  *
0004  * This program is free software; you can redistribute it and/or modify
0005  * it under the terms of the GNU General Public License as published by
0006  * the Free Software Foundation; either version 2 of the License, or
0007  * (at your option) any later version.
0008  *
0009  * This program is distributed in the hope that it will be useful,
0010  * but WITHOUT ANY WARRANTY; without even the implied warranty of
0011  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
0012  * GNU General Public License for more details.
0013  *
0014  * You should have received a copy of the GNU General Public License
0015  * along with this program; if not, write to the Free Software
0016  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 2.010-1301, USA.
0017  */
0018 import QtQuick 2.2
0019 
0020 PropertyWidget {
0021     id: picker
0022     width: 214
0023     height: 140
0024 
0025     property real hue
0026     property real saturation
0027     property real lightness
0028 
0029     function currentColor() {
0030         return Qt.hsla(picker.hue, picker.saturation, picker.lightness, 1.0)
0031     }
0032 
0033     onInitialValueChanged: {
0034         // QML does not expose any way of getting the components of a color
0035         // parsed by Qt, thus we have to do the parsing ourselves (this breaks
0036         // named colors)
0037         // TODO: QtQuick2 exposes the r, g and b attributes of color.
0038         var clr = picker.initialValue;
0039         console.log(clr);
0040 
0041         if (clr[0] == '"') {
0042             clr = clr.slice(1, 8);
0043         }
0044         if (clr[0] == '#') {
0045             clr = clr.slice(1);
0046         }
0047 
0048         var r = parseInt(clr.slice(0, 2), 16) / 255;
0049         var g = parseInt(clr.slice(2, 4), 16) / 255;
0050         var b = parseInt(clr.slice(4, 6), 16) / 255;
0051 
0052         // Formulae taken from ColorPicker.qml, Plasma Workspace,
0053         // Copyright 2013 Marco Martin <mart@kde.org>
0054         var min = Math.min(r, Math.min(g, b))
0055         var max = Math.max(r, Math.max(g, b))
0056         var c = max - min
0057         var h
0058 
0059         if (c == 0) {
0060             h = 0
0061         } else if (max == r) {
0062             h = ((g - b) / c) % 6
0063         } else if (max == g) {
0064             h = ((b - r) / c) + 2
0065         } else if (max == b) {
0066             h = ((r - g) / c) + 4
0067         }
0068 
0069         picker.hue = (1/6) * h
0070         picker.saturation = c / (1 - Math.abs(2 * ((max+min)/2) - 1))
0071         picker.lightness = (max + min)/2
0072 
0073         return true;
0074     }
0075 
0076     // Rectangle that displays the hue and the saturation of the color
0077     MouseArea {
0078         id: rectangle
0079         width: 140
0080         height: 140
0081 
0082         onPositionChanged: {
0083             picker.hue = mouse.x/width
0084             picker.saturation = 1 - mouse.y/height
0085 
0086             updateTimer.restart()
0087         }
0088         // Display the colors
0089         Rectangle {
0090             anchors.fill: parent
0091             z: 0
0092             rotation: 270
0093 
0094             gradient: Gradient {
0095                 GradientStop { position: 0.0/6.0; color: Qt.hsla(0.0/6.0, 1, picker.lightness, 1) }
0096                 GradientStop { position: 1.0/6.0; color: Qt.hsla(1.0/6.0, 1, picker.lightness, 1) }
0097                 GradientStop { position: 2.0/6.0; color: Qt.hsla(2.0/6.0, 1, picker.lightness, 1) }
0098                 GradientStop { position: 3.0/6.0; color: Qt.hsla(3.0/6.0, 1, picker.lightness, 1) }
0099                 GradientStop { position: 4.0/6.0; color: Qt.hsla(4.0/6.0, 1, picker.lightness, 1) }
0100                 GradientStop { position: 5.0/6.0; color: Qt.hsla(5.0/6.0, 1, picker.lightness, 1) }
0101                 GradientStop { position: 6.0/6.0; color: Qt.hsla(6.0/6.0, 1, picker.lightness, 1) }
0102             }
0103         }
0104 
0105         // Display the saturation
0106         Rectangle {
0107             anchors.fill: parent
0108             z: 1
0109 
0110             gradient: Gradient {
0111                 GradientStop { position: 0.0; color: Qt.hsla(0, 0, picker.lightness, 0) }
0112                 GradientStop { position: 1.0; color: Qt.hsla(0, 0, picker.lightness, 1) }
0113             }
0114         }
0115 
0116         // Marker
0117         Rectangle {
0118             id: hsMarker
0119             width: 5
0120             height: 5
0121             x: picker.hue * rectangle.width - 2
0122             y: rectangle.height * (1.0 - picker.saturation)
0123 
0124             color: "black"
0125             border {
0126                 color: "white"
0127                 width: 1
0128             }
0129         }
0130     }
0131 
0132     // Vertical bar that displays the lightness of the color
0133     MouseArea {
0134         id: bar
0135         width: 20
0136         height: 140
0137         anchors.left: rectangle.right
0138         anchors.leftMargin: 7
0139 
0140         onPositionChanged: {
0141             picker.lightness = 1 - mouse.y/height
0142 
0143             updateTimer.restart()
0144         }
0145 
0146         Rectangle {
0147             anchors.fill: parent
0148 
0149             gradient: Gradient {
0150                 GradientStop { position: 0.0; color: Qt.hsla(picker.hue, picker.saturation, 1, 1) }
0151                 GradientStop { position: 0.5; color: Qt.hsla(picker.hue, picker.saturation, 0.5, 1) }
0152                 GradientStop { position: 1.0; color: Qt.hsla(picker.hue, picker.saturation, 0, 1) }
0153             }
0154         }
0155         Rectangle {
0156             id: vMarker
0157             width: 19
0158             height: 5
0159             y: bar.height * (1 - picker.lightness)
0160 
0161             color: "black"
0162             border {
0163                 color: "white"
0164                 width: 1
0165             }
0166         }
0167     }
0168 
0169     // Preview of the color
0170     Rectangle {
0171         id: preview
0172         anchors.left: bar.right
0173         anchors.verticalCenter: bar.verticalCenter
0174         anchors.leftMargin: 7
0175         width: 40
0176         height: 30
0177         color: picker.currentColor()
0178     }
0179 
0180     // Timer to update the value only 4 times per second
0181     Timer {
0182         id: updateTimer
0183         interval: 250
0184         repeat: false
0185 
0186         onTriggered: {
0187             picker.value = '"' + currentColor().toString() + '"';
0188         }
0189     }
0190 }