Added new blend modes to Blend effect

25 files changed, 257 insertions, 13 deletions

diff --git a/doc/src/images/Blend_mode10.png b/doc/src/images/Blend_mode10.png
new file mode 100644
index 0000000..282725b
--- /dev/null
+++ b/doc/src/images/Blend_mode10.png
diff --git a/doc/src/images/Blend_mode11.png b/doc/src/images/Blend_mode11.png
new file mode 100644
index 0000000..e4e0db6
--- /dev/null
+++ b/doc/src/images/Blend_mode11.png
diff --git a/doc/src/images/Blend_mode12.png b/doc/src/images/Blend_mode12.png
new file mode 100644
index 0000000..0f9c98a
--- /dev/null
+++ b/doc/src/images/Blend_mode12.png
diff --git a/doc/src/images/Blend_mode13.png b/doc/src/images/Blend_mode13.png
new file mode 100644
index 0000000..ac2567c
--- /dev/null
+++ b/doc/src/images/Blend_mode13.png
diff --git a/doc/src/images/Blend_mode14.png b/doc/src/images/Blend_mode14.png
new file mode 100644
index 0000000..cea329b
--- /dev/null
+++ b/doc/src/images/Blend_mode14.png
diff --git a/doc/src/images/Blend_mode15.png b/doc/src/images/Blend_mode15.png
new file mode 100644
index 0000000..5c7bc40
--- /dev/null
+++ b/doc/src/images/Blend_mode15.png
diff --git a/doc/src/images/Blend_mode16.png b/doc/src/images/Blend_mode16.png
new file mode 100644
index 0000000..cda82c1
--- /dev/null
+++ b/doc/src/images/Blend_mode16.png
diff --git a/doc/src/images/Blend_mode17.png b/doc/src/images/Blend_mode17.png
new file mode 100644
index 0000000..7dfa8d8
--- /dev/null
+++ b/doc/src/images/Blend_mode17.png
diff --git a/doc/src/images/Blend_mode18.png b/doc/src/images/Blend_mode18.png
new file mode 100644
index 0000000..25cd7b0
--- /dev/null
+++ b/doc/src/images/Blend_mode18.png
diff --git a/doc/src/images/Blend_mode19.png b/doc/src/images/Blend_mode19.png
new file mode 100644
index 0000000..f9565cc
--- /dev/null
+++ b/doc/src/images/Blend_mode19.png
diff --git a/doc/src/images/Blend_mode20.png b/doc/src/images/Blend_mode20.png
new file mode 100644
index 0000000..80cb192
--- /dev/null
+++ b/doc/src/images/Blend_mode20.png
diff --git a/doc/src/images/Blend_mode21.png b/doc/src/images/Blend_mode21.png
new file mode 100644
index 0000000..be97d63
--- /dev/null
+++ b/doc/src/images/Blend_mode21.png
diff --git a/doc/src/images/Blend_mode22.png b/doc/src/images/Blend_mode22.png
new file mode 100644
index 0000000..a5d0280
--- /dev/null
+++ b/doc/src/images/Blend_mode22.png
diff --git a/doc/src/images/Blend_mode3.png b/doc/src/images/Blend_mode3.png
index 11b0b55..cd14337 100644
--- a/doc/src/images/Blend_mode3.png
+++ b/doc/src/images/Blend_mode3.png
diff --git a/doc/src/images/Blend_mode4.png b/doc/src/images/Blend_mode4.png
index ed1aba9..509b372 100644
--- a/doc/src/images/Blend_mode4.png
+++ b/doc/src/images/Blend_mode4.png
diff --git a/doc/src/images/Blend_mode5.png b/doc/src/images/Blend_mode5.png
index 282725b..8f557c0 100644
--- a/doc/src/images/Blend_mode5.png
+++ b/doc/src/images/Blend_mode5.png
diff --git a/doc/src/images/Blend_mode6.png b/doc/src/images/Blend_mode6.png
index cea329b..de85ea6 100644
--- a/doc/src/images/Blend_mode6.png
+++ b/doc/src/images/Blend_mode6.png
diff --git a/doc/src/images/Blend_mode7.png b/doc/src/images/Blend_mode7.png
index 25cd7b0..11b0b55 100644
--- a/doc/src/images/Blend_mode7.png
+++ b/doc/src/images/Blend_mode7.png
diff --git a/doc/src/images/Blend_mode8.png b/doc/src/images/Blend_mode8.png
index 80cb192..7376f44 100644
--- a/doc/src/images/Blend_mode8.png
+++ b/doc/src/images/Blend_mode8.png
diff --git a/doc/src/images/Blend_mode9.png b/doc/src/images/Blend_mode9.png
index be97d63..ed1aba9 100644
--- a/doc/src/images/Blend_mode9.png
+++ b/doc/src/images/Blend_mode9.png
diff --git a/doc/src/qtgraphicaleffects-blend.qdoc b/doc/src/qtgraphicaleffects-blend.qdoc
index 48a1823..f383696 100644
--- a/doc/src/qtgraphicaleffects-blend.qdoc
+++ b/doc/src/qtgraphicaleffects-blend.qdoc
@@ -95,7 +95,8 @@
 /*!
     \qmlproperty string QtGraphicalEffects::Blend::mode
 
-    This property defines the mode which is used when foregroundSource is blended over backgroundSource.
+    This property defines the mode which is used when foregroundSource is blended over backgroundSource. Values are
+    case insensitive.
 
     \table
     \header
@@ -108,8 +109,23 @@
         \o addition
         \o The pixel component values from backgroundSource and foregroundSource are added together and written.
     \row
+        \o average
+        \o The pixel component values from backgroundSource and foregroundSource are averaged and written.
+    \row
+        \o color
+        \o The lightness value from backgroundSource is combined with hue and saturation from foregroundSource and written.
+    \row
+        \o colorBurn
+        \o The darker pixels from backgroundSource are darkened more, if both backgroundSource and foregroundSource pixels are light the result is light.
+    \row
+        \o colorDodge
+        \o The lighter pixels from backgroundSource are lightened more, if both backgroundSource and foregroundSource pixels are dark the result is dark.
+    \row
         \o darken
-        \o The darkest pixel component value from backgroundSource and foregroundSource is written.
+        \o The darker pixel component value from backgroundSource and foregroundSource is written.
+    \row
+        \o darkerColor
+        \o The lower luminance pixel rgb-value from backgroundSource and foregroundSource is written.
     \row
         \o difference
         \o The absolute pixel component value difference between backgroundSource and foregroundSource is written.
@@ -117,17 +133,42 @@
         \o divide
         \o The pixel component values from backgroundSource is divided by the value from foregroundSource and written.
     \row
-        \o multiply
-        \o The pixel component values from backgroundSource and foregroundSource are multiplied together and written.
+        \o exclusion
+        \o The pixel component value difference with reduced contrast between backgroundSource and foregroundSource is written.
+    \row
+        \o hardLight
+        \o The pixel component values from backgroundSource are lightened or darkened according to foregroundSource values and written.
+    \row
+        \o hue
+        \o The hue value from foregroundSource is combined with saturation and lightness from backgroundSource and written.
     \row
         \o lighten
         \o The lightest pixel component value from backgroundSource and foregroundSource is written.
     \row
+        \o lighterColor
+        \o The higher luminance pixel rgb-value from backgroundSource and foregroundSource is written.
+    \row
+        \o lightness
+        \o The lightness value from foregroundSource is combined with hue and saturation from backgroundSource and written.
+    \row
+        \o multiply
+        \o The pixel component values from backgroundSource and foregroundSource are multiplied together and written.
+    \row
+        \o negation
+        \o The inverted absolute pixel component value difference between backgroundSource and foregroundSource is written.
+    \row
+        \o saturation
+        \o The saturation value from foregroundSource is combined with hue and lightness from backgroundSource and written.
+    \row
         \o screen
         \o The pixel values from backgroundSource and foregroundSource are negated, then multiplied, negated again, and written.
     \row
         \o subtract
         \o Pixel value from foregroundSource is subracted from backgroundSource and written.
+    \row
+        \o softLight
+        \o The pixel component values from backgroundSource are lightened or darkened slightly according to foregroundSource values and written.
+
     \endtable
 
     \table
@@ -151,25 +192,62 @@
     \row
         \o \bold { mode: normal }
         \o \bold { mode: addition }
-        \o \bold { mode: darken }
+        \o \bold { mode: average }
     \row
         \o \image Blend_mode4.png
         \o \image Blend_mode5.png
         \o \image Blend_mode6.png
     \row
-        \o \bold { mode: difference }
-        \o \bold { mode: divide }
-        \o \bold { mode: lighten }
+        \o \bold { mode: color }
+        \o \bold { mode: colorBurn }
+        \o \bold { mode: colorDodge }
     \row
         \o \image Blend_mode7.png
         \o \image Blend_mode8.png
         \o \image Blend_mode9.png
     \row
+        \o \bold { mode: darken }
+        \o \bold { mode: darkerColor }
+        \o \bold { mode: difference }
+    \row
+        \o \image Blend_mode10.png
+        \o \image Blend_mode11.png
+        \o \image Blend_mode12.png
+    \row
+        \o \bold { mode: divide }
+        \o \bold { mode: exclusion }
+        \o \bold { mode: hardlight }
+    \row
+        \o \image Blend_mode13.png
+        \o \image Blend_mode14.png
+        \o \image Blend_mode15.png
+    \row
+        \o \bold { mode: hue }
+        \o \bold { mode: lighten }
+        \o \bold { mode: lighterColor }
+    \row
+        \o \image Blend_mode16.png
+        \o \image Blend_mode17.png
+        \o \image Blend_mode18.png
+    \row
+        \o \bold { mode: lightness }
+        \o \bold { mode: negation }
         \o \bold { mode: multiply }
+    \row
+        \o \image Blend_mode19.png
+        \o \image Blend_mode20.png
+        \o \image Blend_mode21.png
+    \row
+        \o \bold { mode: saturation }
         \o \bold { mode: screen }
         \o \bold { mode: subtract }
+    \row
+        \o \image Blend_mode22.png
+    \row
+        \o \bold { mode: softLight }
     \endtable
 
+
 */
 
 /*!
diff --git a/doc/src/snippets/Blend-example.qml b/doc/src/snippets/Blend-example.qml
index 26da3c3..2b830ab 100644
--- a/doc/src/snippets/Blend-example.qml
+++ b/doc/src/snippets/Blend-example.qml
@@ -68,7 +68,7 @@ Item {
         anchors.fill: blendSourceItem1
         backgroundSource: blendSourceItem1
         foregroundSource: blendSourceItem2
-        mode: "screen"
+        mode: "subtract"
     }
 }
 //! [example]
diff --git a/src/effects/Blend.qml b/src/effects/Blend.qml
index f9fc01d..80fb249 100644..100755
--- a/src/effects/Blend.qml
+++ b/src/effects/Blend.qml
@@ -79,16 +79,29 @@ Item {
         function buildFragmentShader() {
             var shader = fragmentShaderBegin
 
-            switch (mode) {
-                case "darken" : shader += blendModeDarken; break;
+            switch (mode.toLowerCase()) {
                 case "addition" : shader += blendModeAddition; break;
+                case "average" : shader += blendModeAverage; break;
+                case "color" : shader += blendModeColor; break;
+                case "colorburn" : shader += blendModeColorBurn; break;
+                case "colordodge" : shader += blendModeColorDodge; break;
+                case "darken" : shader += blendModeDarken; break;
+                case "darkercolor" : shader += blendModeDarkerColor; break;
                 case "difference" : shader += blendModeDifference; break;
                 case "divide" : shader += blendModeDivide; break;
+                case "exclusion" : shader += blendModeExclusion; break;
+                case "hardlight" : shader += blendModeHardLight; break;
+                case "hue" : shader += blendModeHue; break;
                 case "lighten" : shader += blendModeLighten; break;
+                case "lightercolor" : shader += blendModeLighterColor; break;
+                case "lightness" : shader += blendModeLightness; break;
+                case "negation" : shader += blendModeNegation; break;
                 case "normal" : shader += blendModeNormal; break;
                 case "multiply" : shader += blendModeMultiply; break;
+                case "saturation" : shader += blendModeSaturation; break;
                 case "screen" : shader += blendModeScreen; break;
                 case "subtract" : shader += blendModeSubtract; break;
+                case "softlight" : shader += blendModeSoftLight; break;
                 default: shader += "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);"; break;
             }
 
@@ -108,20 +121,107 @@ Item {
         }
 
         property string blendModeAddition: "result.rgb = min(rgb1 + rgb2, 1.0);"
+        property string blendModeAverage: "result.rgb = 0.5 * (rgb1 + rgb2);"
+        property string blendModeColor: "result.rgb = HSLtoRGB(vec3(RGBtoHSL(rgb2).xy, RGBtoL(rgb1)));"
+        property string blendModeColorBurn: "result.rgb = clamp(1.0 - ((1.0 - rgb1) / max(vec3(1.0 / 256.0), rgb2)), vec3(0.0), vec3(1.0));"
+        property string blendModeColorDodge: "result.rgb = clamp(rgb1 / max(vec3(1.0 / 256.0), (1.0 - rgb2)), vec3(0.0), vec3(1.0));"
         property string blendModeDarken: "result.rgb = min(rgb1, rgb2);"
+        property string blendModeDarkerColor: "result.rgb = 0.3 * rgb1.r + 0.59 * rgb1.g + 0.11 * rgb1.b > 0.3 * rgb2.r + 0.59 * rgb2.g + 0.11 * rgb2.b ? rgb2 : rgb1;"
         property string blendModeDifference: "result.rgb = abs(rgb1 - rgb2);"
         property string blendModeDivide: "result.rgb = clamp(rgb1 / rgb2, 0.0, 1.0);"
+        property string blendModeExclusion: "result.rgb = rgb1 + rgb2 - 2.0 * rgb1 * rgb2;"
+        property string blendModeHardLight: "result.rgb = vec3(channelBlendHardLight(rgb1.r, rgb2.r), channelBlendHardLight(rgb1.g, rgb2.g), channelBlendHardLight(rgb1.b, rgb2.b));"
+        property string blendModeHue: "result.rgb = HSLtoRGB(vec3(RGBtoHSL(rgb2).x, RGBtoHSL(rgb1).yz));"
         property string blendModeLighten: "result.rgb = max(rgb1, rgb2);"
+        property string blendModeLighterColor: "result.rgb = 0.3 * rgb1.r + 0.59 * rgb1.g + 0.11 * rgb1.b > 0.3 * rgb2.r + 0.59 * rgb2.g + 0.11 * rgb2.b ? rgb1 : rgb2;"
+        property string blendModeLightness: "result.rgb = HSLtoRGB(vec3(RGBtoHSL(rgb1).xy, RGBtoL(rgb2)));"
         property string blendModeMultiply: "result.rgb = rgb1 * rgb2;"
+        property string blendModeNegation: "result.rgb = 1.0 - abs(1.0 - rgb1 - rgb2);"
         property string blendModeNormal: "result.rgb = rgb2;"
+        property string blendModeSaturation: "lowp vec3 hsl1 = RGBtoHSL(rgb1); result.rgb = HSLtoRGB(vec3(hsl1.x, RGBtoHSL(rgb2).y, hsl1.z));"
         property string blendModeScreen: "result.rgb = 1.0 - (vec3(1.0) - rgb1) * (vec3(1.0) - rgb2);"
         property string blendModeSubtract: "result.rgb = max(rgb1 - rgb2, vec3(0.0));"
+        property string blendModeSoftLight: "result.rgb = rgb1 * ((1.0 - rgb1) * rgb2 + (1.0 - (1.0 - rgb1) * (1.0 - rgb2)));"
 
         property string fragmentShaderBegin: "
             varying mediump vec2 qt_TexCoord0;
             uniform highp float qt_Opacity;
             uniform sampler2D backgroundSource;
             uniform sampler2D foregroundSource;
+
+            highp float RGBtoL(highp vec3 color) {
+                highp float cmin = min(color.r, min(color.g, color.b));
+                highp float cmax = max(color.r, max(color.g, color.b));
+                highp float l = (cmin + cmax) / 2.0;
+                return l;
+            }
+
+            highp vec3 RGBtoHSL(highp vec3 color) {
+                highp float cmin = min(color.r, min(color.g, color.b));
+                highp float cmax = max(color.r, max(color.g, color.b));
+                highp float h = 0.0;
+                highp float s = 0.0;
+                highp float l = (cmin + cmax) / 2.0;
+                highp float diff = cmax - cmin;
+
+                if (diff > 1.0 / 256.0) {
+                    if (l < 0.5)
+                        s = diff / (cmin + cmax);
+                    else
+                        s = diff / (2.0 - (cmin + cmax));
+
+                    if (color.r == cmax)
+                        h = (color.g - color.b) / diff;
+                    else if (color.g == cmax)
+                        h = 2.0 + (color.b - color.r) / diff;
+                    else
+                        h = 4.0 + (color.r - color.g) / diff;
+
+                    h /= 6.0;
+                }
+                return vec3(h, s, l);
+                }
+
+            highp float hueToIntensity(highp float v1, highp float v2, highp float h) {
+                h = fract(h);
+                if (h < 1.0 / 6.0)
+                    return v1 + (v2 - v1) * 6.0 * h;
+                else if (h < 1.0 / 2.0)
+                    return v2;
+                else if (h < 2.0 / 3.0)
+                    return v1 + (v2 - v1) * 6.0 * (2.0 / 3.0 - h);
+
+                return v1;
+            }
+
+            highp vec3 HSLtoRGB(highp vec3 color) {
+                highp float h = color.x;
+                highp float l = color.z;
+                highp float s = color.y;
+
+                if (s < 1.0 / 256.0)
+                    return vec3(l, l, l);
+
+                highp float v1;
+                highp float v2;
+                if (l < 0.5)
+                    v2 = l * (1.0 + s);
+                else
+                    v2 = (l + s) - (s * l);
+
+                v1 = 2.0 * l - v2;
+
+                highp float d = 1.0 / 3.0;
+                highp float r = hueToIntensity(v1, v2, h + d);
+                highp float g = hueToIntensity(v1, v2, h);
+                highp float b = hueToIntensity(v1, v2, h - d);
+                return vec3(r, g, b);
+            }
+
+            lowp float channelBlendHardLight(lowp float c1, lowp float c2) {
+                return c2 > 0.5 ? (1.0 - (1.0 - 2.0 * (c2 - 0.5)) * (1.0 - c1)) : (2.0 * c1 * c2);
+            }
+
             void main() {
                 lowp vec4 result = vec4(0.0);
                 lowp vec4 color1 = texture2D(backgroundSource, qt_TexCoord0);
diff --git a/tests/manual/testbed/TestBlend.qml b/tests/manual/testbed/TestBlend.qml
index 0c9caf1..fc0d8f8 100644..100755
--- a/tests/manual/testbed/TestBlend.qml
+++ b/tests/manual/testbed/TestBlend.qml
@@ -102,11 +102,36 @@ TestCaseTemplate {
                     onPressedChanged: blendMode.value = caption
                 }
                 RadioButton {
+                    caption: "average"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "color"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "colorBurn"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "colorDodge"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
                     caption: "darken"
                     selected: caption == blendMode.value
                     onPressedChanged: blendMode.value = caption
                 }
                 RadioButton {
+                    caption: "darkerColor"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
                     caption: "difference"
                     selected: caption == blendMode.value
                     onPressedChanged: blendMode.value = caption
@@ -117,7 +142,17 @@ TestCaseTemplate {
                     onPressedChanged: blendMode.value = caption
                 }
                 RadioButton {
-                    caption: "multiply"
+                    caption: "exclusion"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "hardLight"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "hue"
                     selected: caption == blendMode.value
                     onPressedChanged: blendMode.value = caption
                 }
@@ -127,11 +162,41 @@ TestCaseTemplate {
                     onPressedChanged: blendMode.value = caption
                 }
                 RadioButton {
+                    caption: "lighterColor"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "lightness"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "multiply"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "negation"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
+                    caption: "saturation"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
                     caption: "screen"
                     selected: caption == blendMode.value
                     onPressedChanged: blendMode.value = caption
                 }
                 RadioButton {
+                    caption: "softlight"
+                    selected: caption == blendMode.value
+                    onPressedChanged: blendMode.value = caption
+                }
+                RadioButton {
                     caption: "subtract"
                     selected: caption == blendMode.value
                     onPressedChanged: blendMode.value = caption
diff --git a/tools/pngdumper/ItemModel.qml b/tools/pngdumper/ItemModel.qml
index 8b627fe..ccb43d0 100644..100755
--- a/tools/pngdumper/ItemModel.qml
+++ b/tools/pngdumper/ItemModel.qml
@@ -51,7 +51,8 @@ VisualItemModel {
         property string __name: "Blend"
         property variant __properties: ["mode"]
         property string __varyingProperty: "mode"
-        property variant __values: ["normal", "addition", "darken", "difference", "divide", "lighten", "multiply", "screen", "subtract"]
+        property variant __values: ["normal", "addition","average", "color", "colorBurn","colorDodge", "darken", "darkerColor", "difference", "divide",
+           "exclusion", "hardlight", "hue", "lighten", "lighterColor", "lightness", "negation", "multiply", "saturation", "screen", "subtract", "softLight"]
     }
 
     BrightnessContrast {