activities/color_mix/ColorChooser.qml

0001 /* GCompris - ColorChooser.qml
0002 *
0003 * SPDX-FileCopyrightText: 2014 Stephane Mankowski <stephane@mankowski.fr>
0004 *
0005 * Authors:
0006 *   Matilda Bernard <serah4291@gmail.com> (GTK+ version)
0007 *   Stephane Mankowski <stephane@mankowski.fr> (Qt Quick port)
0008 *
0009 *   SPDX-License-Identifier: GPL-3.0-or-later
0010 */
0011 import QtQuick 2.12
0012 import GCompris 1.0
0013
0014 import "colormix.js" as Activity
0015 import "."
0016
0017 Image {
0018     id: chooser
0019     z: 1
0020
0021     property int maxSteps: 10
0022     property int currentStep: 0
0023     property string brushHue
0024     onCurrentStepChanged: setSliderX();
0025
0026     Image {
0027         id: intensityScreen
0028         source: activity.modeRGB ? Activity.url + "flashlight2" + brushHue + ".svg" : "qrc:/gcompris/src/core/resource/empty.svg"
0029         sourceSize.height: parent.sourceSize.height
0030         sourceSize.width: parent.sourceSize.width
0031         z: 2
0032         opacity: currentStep / maxSteps
0033         visible: activity.modeRGB
0034     }
0035
0036     Image {
0037         id: intensityBrush
0038         source: Activity.url + (activity.modeRGB ?
0039                     "light" + brushHue + ".svg" : "brush" + brushHue + ".svg")
0040         sourceSize.height: parent.sourceSize.height * 0.25 + currentStep / maxSteps * 15
0041         z: 2
0042         anchors {
0043             left: parent.right
0044             leftMargin: activity.modeRGB ? -20 * ApplicationInfo.ratio : 0
0045             verticalCenter: parent.verticalCenter
0046         }
0047         opacity: activity.modeRGB ? currentStep / maxSteps * 2 : 1
0048         visible: currentStep > 0
0049         fillMode: Image.PreserveAspectFit
0050     }
0051
0052     ColorButton {
0053         id: plusButton
0054         source: Activity.url + "plus.svg"
0055         anchors {
0056             verticalCenter: parent.verticalCenter
0057             right: parent.right
0058             rightMargin: parent.width * 0.2
0059         }
0060         onClicked: currentStep = Math.min(currentStep + 1, maxSteps);
0061     }
0062
0063     Item {
0064         id: sliderLayout
0065         height: parent.height * 0.25
0066         anchors {
0067             verticalCenter: parent.verticalCenter
0068             left: minusButton.right
0069             right: plusButton.left
0070         }
0071     }
0072
0073     Rectangle {
0074         id: sliderArea
0075         z: 100
0076         height: sliderLayout.height
0077         width: sliderLayout.width * 0.8
0078         anchors.centerIn: sliderLayout
0079         color: "#B0FFFFFF"
0080         radius: height * 0.2
0081         border.width: height * 0.1
0082         border.color: "#888888"
0083         property int maxLimit: width - sliderHandle.width
0084         Rectangle {
0085             id: sliderHandle
0086             width: parent.width * 0.1
0087             height: parent.height
0088             anchors.verticalCenter: parent.verticalCenter
0089             color: "#535353"
0090             radius: height * 0.2
0091             x: 0
0092         }
0093         MouseArea {
0094             anchors.fill: parent
0095             enabled: !items.buttonsBlocked
0096             drag.target: sliderHandle
0097             onPositionChanged: {
0098                 if(sliderHandle.x < 0)
0099                     sliderHandle.x = 0;
0100                 if(sliderHandle.x > sliderArea.maxLimit)
0101                     sliderHandle.x = sliderArea.maxLimit;
0102                 currentStep = Math.round(sliderHandle.x / sliderArea.maxLimit * maxSteps);
0103                 setSliderX();
0104             }
0105         }
0106     }
0107
0108     function setSliderX() {
0109         sliderHandle.x = currentStep * sliderArea.maxLimit / maxSteps;
0110     }
0111
0112     ColorButton {
0113         id: minusButton
0114         source: Activity.url + "minus.svg"
0115         anchors {
0116             verticalCenter: parent.verticalCenter
0117             left: parent.left
0118             leftMargin: parent.width * 0.3
0119         }
0120         onClicked: currentStep = Math.max(currentStep - 1, 0);
0121     }
0122 }