Commit 02f7cd2c authored by Stephane Mankowski's avatar Stephane Mankowski
Browse files

Automatic resizing

Better rendering for tube and flashlight
Remove useless files
Camel case
Re
parent 6a75324a
import GCompris 1.0
ActivityInfo {
name: "color_mix/Color_mix.qml"
name: "color_mix/ColorMix.qml"
difficulty: 4
icon: "color_mix/color_mix.svg"
icon: "color_mix/colormix.svg"
author: "Stephane Mankowski <stephane@mankowski.fr>"
demo: true
title: qsTr("Mixing color of paint")
......
......@@ -24,17 +24,45 @@ import QtGraphicalEffects 1.0
import GCompris 1.0
import "color_mix.js" as Activity
import "colormix.js" as Activity
Image {
id: color1
id: chooser
source: Activity.url + (activity.modeRGB ? "flashlight.svgz" : "tube.svg")
sourceSize.height: 100 * ApplicationInfo.ratio
z:1
property int maxSteps: 10
property int currentStep: 0
property alias hue: color.hue
Image {
id: intensity
source: Activity.url + "flashlight2.svgz"
sourceSize.height: parent.sourceSize.height
visible: activity.modeRGB
anchors.fill: parent
z:2
Colorize {
anchors.fill: parent
source: parent
hue: chooser.hue
lightness: -(maxSteps - currentStep) / maxSteps
saturation: 1
}
}
Rectangle {
anchors {
left: parent.right
verticalCenter: parent.verticalCenter
}
height: parent.sourceSize.height / 4* currentStep/maxSteps
width: parent.sourceSize.height / 2
visible: !activity.modeRGB
color: Activity.getColorFromHsl(chooser.hue, 1, 0.5)
}
Colorize {
id: color
anchors.fill: parent
......@@ -47,11 +75,14 @@ Image {
id: up
height: parent.height / 4
width: height
z:3
radius: width / 2
border.color: "black"
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: parent.width * 0.2
anchors {
verticalCenter: parent.verticalCenter
right: parent.right
rightMargin: parent.width * 0.2
}
Text {
id: upText
......@@ -63,7 +94,9 @@ Image {
}
MouseArea {
anchors.fill: parent
anchors.centerIn: parent
height: 2*parent.height
width: 2*parent.width
onClicked: currentStep = Math.min(currentStep + 1, maxSteps)
}
}
......@@ -72,11 +105,14 @@ Image {
id: down
height: up.height
width: height
z:3
radius: width / 2
border.color: "black"
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: parent.width * 0.4
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: parent.width * 0.4
}
Text {
id: downText
......@@ -88,7 +124,9 @@ Image {
}
MouseArea {
anchors.fill: parent
anchors.centerIn: parent
height: 2*parent.height
width: 2*parent.width
onClicked: currentStep = Math.max(currentStep - 1, 0)
}
}
......
/* GCompris - color_mix.qml
/* GCompris - colormix.qml
*
* Copyright (C) 2014 Stephane Mankowski <stephane@mankowski.fr>
*
......@@ -23,7 +23,7 @@ import QtQuick 2.1
import GCompris 1.0
import "qrc:/gcompris/src/core"
import "color_mix.js" as Activity
import "colormix.js" as Activity
ActivityBase {
id: activity
......@@ -63,6 +63,7 @@ ActivityBase {
property alias currentColor1: color1.currentStep
property alias currentColor2: color2.currentStep
property alias currentColor3: color3.currentStep
property int margins: 20
}
onStart: {
......@@ -75,11 +76,13 @@ ActivityBase {
Rectangle {
id: target
height: width / 2
width: 200
width: parent.width / 5
radius: height / 10
anchors.top: parent.top
anchors.topMargin: 20
anchors.horizontalCenter: parent.horizontalCenter
anchors {
top: parent.top
topMargin: items.margins
horizontalCenter: parent.horizontalCenter
}
border.color: "black"
color: Activity.getColor(items.targetColor1, items.targetColor2,
items.targetColor3)
......@@ -90,10 +93,12 @@ ActivityBase {
font.pointSize: 18
horizontalAlignment: Text.AlignRight
wrapMode: Text.WordWrap
anchors.verticalCenter: target.verticalCenter
anchors.right: target.left
anchors.left: parent.left
anchors.rightMargin: 20
anchors {
verticalCenter: target.verticalCenter
right: target.left
left: parent.left
rightMargin: items.margins
}
}
Text {
......@@ -102,19 +107,23 @@ ActivityBase {
font.pointSize: 16
horizontalAlignment: Text.AlignLeft
wrapMode: Text.WordWrap
anchors.verticalCenter: target.verticalCenter
anchors.left: target.right
anchors.right: parent.right
anchors.leftMargin: 20
anchors {
verticalCenter: target.verticalCenter
left: target.right
right: parent.right
leftMargin: items.margins
}
}
Rectangle {
id: result
height: 150
height: target.height
width: height
radius: height / 2
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: target.bottom
anchors.topMargin: 20
anchors {
horizontalCenter: parent.horizontalCenter
top: target.bottom
topMargin: items.margins
}
border.color: "black"
color: Activity.getColor(items.currentColor1, items.currentColor2,
items.currentColor3)
......@@ -123,29 +132,38 @@ ActivityBase {
ColorChooser {
id: color1
hue: activity.modeRGB ? 0 : 300 / 360 /* red / magenta */
sourceSize.height: result.height
maxSteps: items.maxSteps
anchors.right: result.left
anchors.rightMargin: 20
anchors.verticalCenter: result.verticalCenter
anchors {
right: result.left
rightMargin: items.margins
verticalCenter: result.verticalCenter
}
}
ColorChooser {
id: color2
hue: activity.modeRGB ? 120 / 360 : 60 / 360 /* green / yellow */
sourceSize.height: result.height
maxSteps: items.maxSteps
anchors.horizontalCenter: result.horizontalCenter
anchors.top: result.bottom
anchors.topMargin: 20 + width / 2 - height / 2
anchors {
horizontalCenter: result.horizontalCenter
top: result.bottom
topMargin: items.margins + width / 2 - height / 2
}
rotation: -90
}
ColorChooser {
id: color3
hue: activity.modeRGB ? 240 / 360 : 180 / 360 /* blue / cyan */
sourceSize.height: result.height
maxSteps: items.maxSteps
anchors.left: result.right
anchors.leftMargin: 20
anchors.verticalCenter: result.verticalCenter
anchors {
left: result.right
leftMargin: items.margins
verticalCenter: result.verticalCenter
}
rotation: 180
}
......@@ -154,10 +172,12 @@ ActivityBase {
source: "qrc:/gcompris/src/core/resource/bar_ok.svgz"
sourceSize.width: 66 * bar.barZoom
visible: true
anchors.right: parent.right
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: 20
anchors {
left: color2.right
leftMargin: items.margins
top: color3.bottom
topMargin: items.margins
}
onClicked: {
var message = ""
if (activity.modeRGB) {
......
APP_FILES += \
$$PWD/ActivityInfo.qml \
$$PWD/Color_mix.qml \
$$PWD/ColorMix.qml \
$$PWD/ColorChooser.qml \
$$PWD/color_mix.js \
$$PWD/color_mix.svg \
$$PWD/colormix.js \
$$PWD/colormix.svg \
$$PWD/resource/background.jpg \
$$PWD/resource/flashlight.svgz \
$$PWD/resource/flashlight2.svgz \
$$PWD/resource/tube.svg
/* GCompris - color_mix.js'
/* GCompris - colormix.js'
*
* Copyright (C) 2014 Stephane Mankowski <stephane@mankowski.fr>
*
......@@ -53,10 +53,42 @@ function initLevel() {
}
function getColor(i1, i2, i3) {
return activity.modeRGB ? Qt.rgba(i1 / maxSteps, i2 / maxSteps, i3 / maxSteps, 1) :
Qt.rgba(1 - i3 / maxSteps, 1 - i1 / maxSteps, 1 - i2 / maxSteps, 1)
return activity.modeRGB ? Qt.rgba(i1 / maxSteps, i2 / maxSteps,
i3 / maxSteps,
1) : Qt.rgba(1 - i3 / maxSteps,
1 - i1 / maxSteps,
1 - i2 / maxSteps, 1)
}
function getColorFromHsl(h, s, l) {
var r, g, b
if (s === 0) {
r = g = b = l // achromatic
} else {
function hue2rgb(p, q, t) {
if (t < 0)
t += 1
if (t > 1)
t -= 1
if (t < 1 / 6)
return p + (q - p) * 6 * t
if (t < 1 / 2)
return q
if (t < 2 / 3)
return p + (q - p) * (2 / 3 - t) * 6
return p
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s
var p = 2 * l - q
r = hue2rgb(p, q, h + 1 / 3)
g = hue2rgb(p, q, h)
b = hue2rgb(p, q, h - 1 / 3)
}
return Qt.rgba(r, g, b, 1)
}
function nextLevel() {
if (numberOfLevel <= ++currentLevel) {
currentLevel = 0
......
<?xml version="1.0"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" id="svg6431" viewBox="0 0 207.99 76.2" version="1.0">
<defs id="defs3">
<linearGradient id="linearGradient12398">
<stop id="stop12400" stop-color="#f0f0f0" offset="0"/>
<stop id="stop12402" stop-color="#c8c8c8" offset="1"/>
<?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"
id="svg6431"
viewBox="0 0 207.99 76.2"
version="1.0"
inkscape:version="0.48.4 r9939"
width="100%"
height="100%"
sodipodi:docname="tube.svg">
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview36"
showgrid="false"
inkscape:zoom="5.9155046"
inkscape:cx="147.50504"
inkscape:cy="35.107083"
inkscape:window-x="-4"
inkscape:window-y="-6"
inkscape:window-maximized="1"
inkscape:current-layer="svg6431" />
<defs
id="defs3">
<linearGradient
id="linearGradient12398">
<stop
id="stop12400"
stop-color="#f0f0f0"
offset="0" />
<stop
id="stop12402"
stop-color="#c8c8c8"
offset="1" />
</linearGradient>
<linearGradient id="linearGradient8414">
<stop id="stop8416" stop-color="#fff" offset="0"/>
<stop id="stop8418" stop-color="#fff" stop-opacity="0" offset="1"/>
<linearGradient
id="linearGradient8414">
<stop
id="stop8416"
stop-color="#fff"
offset="0" />
<stop
id="stop8418"
stop-color="#fff"
stop-opacity="0"
offset="1" />
</linearGradient>
<linearGradient id="linearGradient4190" y2="38.906" xlink:href="#linearGradient12398" gradientUnits="userSpaceOnUse" x2="143.65" y1="73.656" x1="141.6"/>
<linearGradient id="linearGradient4205" y2="356.22" gradientUnits="userSpaceOnUse" x2="142.08" gradientTransform="translate(133.53 -137.52)" y1="378.75" x1="130.14">
<stop id="stop8446" stop-color="#e5e5e5" stop-opacity="0" offset="0"/>
<stop id="stop8448" stop-color="#4a4a4a" stop-opacity=".56842" offset=".5"/>
<stop id="stop8450" stop-color="#b8b8b8" stop-opacity="0" offset="1"/>
<linearGradient
id="linearGradient4190"
y2="38.906"
xlink:href="#linearGradient12398"
gradientUnits="userSpaceOnUse"
x2="143.65"
y1="73.656"
x1="141.6" />
<linearGradient
id="linearGradient4205"
y2="356.22"
gradientUnits="userSpaceOnUse"
x2="142.08"
gradientTransform="translate(133.53,-137.52)"
y1="378.75"
x1="130.14">
<stop
id="stop8446"
stop-color="#e5e5e5"
stop-opacity="0"
offset="0" />
<stop
id="stop8448"
stop-color="#4a4a4a"
stop-opacity=".56842"
offset=".5" />
<stop
id="stop8450"
stop-color="#b8b8b8"
stop-opacity="0"
offset="1" />
</linearGradient>
<linearGradient id="linearGradient4208" y2="39.81" xlink:href="#linearGradient8414" gradientUnits="userSpaceOnUse" x2="-106.25" gradientTransform="matrix(.82457 0 0 .95225 -18.827 169.57)" y1="38.985" x1="-96.9"/>
<linearGradient id="linearGradient4211" y2="284.64" xlink:href="#linearGradient12398" spreadMethod="repeat" gradientUnits="userSpaceOnUse" x2="353.17" gradientTransform="matrix(.80037 0 0 .82926 3.1209 -4.34)" y1="287.55" x1="353.17"/>
<linearGradient id="linearGradient4214" y2="371.23" xlink:href="#linearGradient12398" gradientUnits="userSpaceOnUse" x2="99.469" gradientTransform="matrix(1.7486 0 0 1.1547 -282.46 -195.94)" y1="370.93" x1="104.03"/>
<linearGradient id="linearGradient4217" y2="92.378" xlink:href="#linearGradient8414" gradientUnits="userSpaceOnUse" x2="149.1" gradientTransform="matrix(.99685 0 0 1 .31499 167.58)" y1="39.281" x1="150.81"/>
<linearGradient id="linearGradient4220" y2="393.82" gradientUnits="userSpaceOnUse" x2="147" gradientTransform="translate(133.53 -137.52)" y1="375.93" x1="138.4">
<stop id="stop3406" stop-color="#e5e5e5" offset="0"/>
<stop id="stop8432" stop-color="#4a4a4a" offset=".5"/>
<stop id="stop3408" stop-color="#b8b8b8" offset="1"/>
<linearGradient
id="linearGradient4208"
y2="39.81"
xlink:href="#linearGradient8414"
gradientUnits="userSpaceOnUse"
x2="-106.25"
gradientTransform="matrix(0.82457,0,0,0.95225,-18.827,169.57)"
y1="38.985"
x1="-96.9" />
<linearGradient
id="linearGradient4211"
y2="284.64"
xlink:href="#linearGradient12398"
spreadMethod="repeat"
gradientUnits="userSpaceOnUse"
x2="353.17"
gradientTransform="matrix(0.80037,0,0,0.82926,3.1209,-4.34)"
y1="287.55"
x1="353.17" />
<linearGradient
id="linearGradient4214"
y2="371.23"
xlink:href="#linearGradient12398"
gradientUnits="userSpaceOnUse"
x2="99.469"
gradientTransform="matrix(1.7486,0,0,1.1547,-282.46,-195.94)"
y1="370.93"
x1="104.03" />
<linearGradient
id="linearGradient4217"
y2="92.378"
xlink:href="#linearGradient8414"
gradientUnits="userSpaceOnUse"
x2="149.1"
gradientTransform="matrix(0.99685,0,0,1,0.31499,167.58)"
y1="39.281"
x1="150.81" />
<linearGradient
id="linearGradient4220"
y2="393.82"
gradientUnits="userSpaceOnUse"
x2="147"
gradientTransform="translate(133.53,-137.52)"
y1="375.93"
x1="138.4">
<stop
id="stop3406"
stop-color="#e5e5e5"
offset="0" />
<stop
id="stop8432"
stop-color="#4a4a4a"
offset=".5" />
<stop
id="stop3408"
stop-color="#b8b8b8"
offset="1" />
</linearGradient>
<linearGradient id="linearGradient4224" y2="323.45" xlink:href="#linearGradient12398" spreadMethod="reflect" gradientUnits="userSpaceOnUse" x2="126.66" gradientTransform="matrix(.67577 0 0 1.0025 38.717 -56.067)" y1="294.99" x1="125.67"/>
<linearGradient
id="linearGradient4224"
y2="323.45"
xlink:href="#linearGradient12398"
spreadMethod="reflect"
gradientUnits="userSpaceOnUse"
x2="126.66"
gradientTransform="matrix(0.67577,0,0,1.0025,38.717,-56.067)"
y1="294.99"
x1="125.67" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4205"
id="linearGradient3039"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(36.739,-340.31)"
x1="130.14"
y1="378.75"
x2="142.08"
y2="356.22" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient8414"
id="linearGradient3042"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.82457,0,0,0.95225,77.964,-33.22)"
x1="-96.9"
y1="38.985"
x2="-106.25"
y2="39.81" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient12398"
id="linearGradient3048"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.7486,0,0,1.1547,-185.669,-398.73)"
x1="104.03"
y1="370.93"
x2="99.469"
y2="371.23" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient8414"
id="linearGradient3051"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.99685,0,0,1,-96.47601,-35.21)"
x1="150.81"
y1="39.281"
x2="149.1"
y2="92.378" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4220"
id="linearGradient3054"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(36.739,-340.31)"
x1="138.4"
y1="375.93"
x2="147"
y2="393.82" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient12398"
id="linearGradient3057"
gradientUnits="userSpaceOnUse"
x1="141.6"
y1="73.656"
x2="143.65"
y2="38.906"
gradientTransform="matrix(0.99685,0,0,1,-96.16015,-36.38)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient12398"
id="linearGradient3060"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.67577,0,0,1.0025,-58.074,-258.857)"
spreadMethod="reflect"
x1="125.67"
y1="294.99"
x2="126.66"
y2="323.45" />
</defs>
<g id="layer1" transform="translate(-96.791 -202.79)">
<g id="g4226">
<path id="path6381" stroke-linejoin="bevel" style="color:#000000" d="m106.82 204.66l151.48 9.02v55.06l-151.48 9.01v-73.09z" stroke="#6c6c6c" stroke-width=".74076" fill="url(#linearGradient4224)"/>
<path id="path8406" d="m106.56 38.438v35.218h151.41v-26.218l-151.41-9z" style="color:#000000" fill="url(#linearGradient4190)" transform="matrix(.99685 0 0 1 .63085 166.41)"/>
<path id="path6385" d="m280.07 231.74l-22-17.99 0.15 54.96 21.85-18.04v-18.93z" style="color:#000000" fill="url(#linearGradient4220)"/>
<path id="path8410" opacity=".87879" d="m111.1 207.25v27.56c52.56 14.21 100.57 10.85 145.56 5.61 0.33-18.99 0.37-5.02 0.24-22.71-0.2-1.4-1.09-2.67-2.87-2.78l-142.93-7.68z" style="color:#000000" fill="url(#linearGradient4217)"/>
<rect id="rect6383" stroke-linejoin="bevel" style="color:#000000" transform="scale(-1,1)" height="75.316" width="11.302" stroke="#6c6c6c" y="203.23" x="-108.53" stroke-width=".88363" fill="url(#linearGradient4214)"/>
<rect id="rect6387" stroke-linejoin="bevel" style="color:#000000" height="19.295" width="24.276" stroke="#6c6c6c" y="231.7" x="280.14" stroke-width=".73322" fill="url(#linearGradient4211)"/>
<rect id="rect8434" style="color:#000000" transform="scale(-1,1)" height="71.795" width="7.7135" y="204.74" x="-106.44" fill="url(#linearGradient4208)"/>
<path id="path8440" stroke-linejoin="bevel" style="color:#000000" d="m280.07 231.74l-22-17.99 0.15 54.96 21.85-18.04v-18.93z" stroke="#6c6c6c" stroke-width=".9" fill="url(#linearGradient4205)"/>
</g>