git.iko.soy/unity8
on xenial help sign in
Move luminance calculation out to Utils.Style
commitf4a7f031c2cbf7fe9568cf0dd3eb40db4b52795e authorMichał Sawicz <michal.sawicz@canonical.com> dateThu 14 Aug 2014, 13:43 (12 years ago) parent80bf239
11 files changed+101−41
compare with xenial
unifiedsplit
plugins/Dash/CardCreator.js+4−3 plugins/Dash/ScopeStyle.qml+6−13 plugins/Utils/Style.js+33 plugins/Utils/qmldir+1 tests/plugins/Dash/cardcreator/2.res+1−1 tests/plugins/Dash/cardcreator/5.res+1−1 tests/plugins/Dash/cardcreator/6.res+1−1 tests/plugins/Dash/cardcreator/7.res+1−1 tests/plugins/Dash/tst_ScopeStyle.qml+1−21 tests/plugins/Utils/CMakeLists.txt+5 tests/plugins/Utils/tst_UtilsStyle.qml+47
plugins/Dash/CardCreator.js+4−3
@@ -29,7 +29,7 @@ var kBackgroundLoaderCode = 'Loader {\n\
2929 gradientColor: getColor(1) || color; \n\
3030 anchors.fill: parent; \n\
3131 image: backgroundImage.source ? backgroundImage : null; \n\
32− property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b; \n\
32+ property real luminance: Style.luminance(color); \n\
3333 property Image backgroundImage: Image { \n\
3434 objectName: "backgroundImage"; \n\
3535 source: { \n\
@@ -108,7 +108,7 @@ var kOverlayLoaderCode = 'Loader { \n\
108108 sourceComponent: ShaderEffect { \n\
109109 id: overlay; \n\
110110 height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
111− property real luminance: 0.2126 * overlayColor.r + 0.7152 * overlayColor.g + 0.0722 * overlayColor.b; \n\
111+ property real luminance: Style.luminance(overlayColor); \n\
112112 property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
113113 property var source: ShaderEffectSource { \n\
114114 id: shaderSource; \n\
@@ -649,7 +649,8 @@ function cardString(template, components) {
649649function createCardComponent(parent, template, components) {
650650 var imports = 'import QtQuick 2.2; \n\
651651 import Ubuntu.Components 1.1; \n\
652− import Dash 0.1;\n';
652+ import Dash 0.1;\n\
653+ import Utils 0.1;\n';
653654 var card = cardString(template, components);
654655 var code = imports + 'Component {\n' + card + '}\n';
655656
plugins/Dash/ScopeStyle.qml+6−13
@@ -15,6 +15,7 @@
1515 */
1616
1717import QtQuick 2.2
18+import Utils 0.1
1819
1920/*! \brief Helper for processing scope customization options.
2021
@@ -27,25 +28,17 @@ QtObject {
2728 /// Style object passed from the scope
2829 property var style: Object()
2930
30− /*! \brief Calculate luminance of the passed color
31−
32− \note If not fully opaque, luminance is dependant on blending.
33− */
34− function luminance(color) {
35− return 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
36− }
37−
3831 /// Color used for text and symbolic icons
3932 readonly property color foreground: "foreground-color" in style ? style["foreground-color"] : d.defaultDark
4033
4134 /// Luminance of the foreground color
42− readonly property real foregroundLuminance: foreground ? luminance(foreground) : d.defaultForegroundLuminance
35+ readonly property real foregroundLuminance: foreground ? Style.luminance(foreground) : d.defaultForegroundLuminance
4336
4437 /// Color used for the overall background
4538 readonly property color background: "background-color" in style ? style["background-color"] : "transparent"
4639
47− /// Luminance of the foreground color
48− readonly property real backgroundLuminance: background ? luminance(background) : d.defaultBackgroundLuminance
40+ /// Luminance of the background color
41+ readonly property real backgroundLuminance: background ? Style.luminance(background) : d.defaultBackgroundLuminance
4942
5043 /*! \brief Luminance threshold for switching between fore and background color
5144
@@ -97,8 +90,8 @@ QtObject {
9790 // FIXME: should be taken from the theme
9891 readonly property color defaultLight: "white"
9992 readonly property color defaultDark: Theme.palette.normal.baseText
100− readonly property real defaultLightLuminance: luminance(defaultLight)
101− readonly property real defaultDarkLuminance: luminance(defaultDark)
93+ readonly property real defaultLightLuminance: Style.luminance(defaultLight)
94+ readonly property real defaultDarkLuminance: Style.luminance(defaultDark)
10295
10396 readonly property var headerStyle: "page-header" in style ? style["page-header"] : { }
10497 }
plugins/Utils/Style.jsnew file+33
@@ -0,0 +1,33 @@
1+/*
2+ * Copyright (C) 2014 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+.pragma library
18+
19+/*! \brief Calculate average luminance of the passed colors
20+
21+ \note If not fully opaque, luminance is dependant on blending.
22+ */
23+function luminance() {
24+ var sum = 0;
25+ for (var k in arguments) {
26+ // only way to convert string to color
27+ var c = Qt.lighter(arguments[k], 1.0);
28+
29+ sum += 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b;
30+ }
31+
32+ return sum / arguments.length;
33+}
plugins/Utils/qmldir+1
@@ -1,3 +1,4 @@
11module Utils
22plugin Utils-qml
33typeinfo Utils.qmltypes
4+Style 0.1 Style.js
tests/plugins/Dash/cardcreator/2.res+1−1
@@ -26,7 +26,7 @@ Loader {
2626 gradientColor: getColor(1) || color;
2727 anchors.fill: parent;
2828 image: backgroundImage.source ? backgroundImage : null;
29− property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
29+ property real luminance: Style.luminance(color);
3030 property Image backgroundImage: Image {
3131 objectName: "backgroundImage";
3232 source: {
tests/plugins/Dash/cardcreator/5.res+1−1
@@ -69,7 +69,7 @@ Loader {
6969 sourceComponent: ShaderEffect {
7070 id: overlay;
7171 height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2);
72− property real luminance: 0.2126 * overlayColor.r + 0.7152 * overlayColor.g + 0.0722 * overlayColor.b;
72+ property real luminance: Style.luminance(overlayColor);
7373 property color overlayColor: cardData && cardData["overlayColor"] || "#99000000";
7474 property var source: ShaderEffectSource {
7575 id: shaderSource;
tests/plugins/Dash/cardcreator/6.res+1−1
@@ -26,7 +26,7 @@ Loader {
2626 gradientColor: getColor(1) || color;
2727 anchors.fill: parent;
2828 image: backgroundImage.source ? backgroundImage : null;
29− property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
29+ property real luminance: Style.luminance(color);
3030 property Image backgroundImage: Image {
3131 objectName: "backgroundImage";
3232 source: {
tests/plugins/Dash/cardcreator/7.res+1−1
@@ -26,7 +26,7 @@ Loader {
2626 gradientColor: getColor(1) || color;
2727 anchors.fill: parent;
2828 image: backgroundImage.source ? backgroundImage : null;
29− property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;
29+ property real luminance: Style.luminance(color);
3030 property Image backgroundImage: Image {
3131 objectName: "backgroundImage";
3232 source: {
tests/plugins/Dash/tst_ScopeStyle.qml+1−21
@@ -18,6 +18,7 @@ import QtQuick 2.2
1818import QtTest 1.0
1919import Dash 0.1
2020import Ubuntu.Components 1.1
21+import Utils 0.1
2122
2223Rectangle {
2324 width: units.gu(40)
@@ -49,27 +50,6 @@ Rectangle {
4950 testCase.color = "transparent";
5051 }
5152
52− function test_luminance_data() {
53− return [
54− { tag: "#F00", luminance: 0.2126 },
55− { tag: "#0F0", luminance: 0.7152 },
56− { tag: "#00F", luminance: 0.0722 },
57− { tag: "white", luminance: 1.0 },
58− { tag: "black", luminance: 0.0 },
59− { tag: "lightgrey", luminance: 0.8275 },
60− { tag: "grey", luminance: 0.5020 },
61− { tag: "darkgrey", luminance: 0.6627 },
62− { tag: "red", luminance: 0.2126 },
63− { tag: "green", luminance: 0.3590 },
64− { tag: "blue", luminance: 0.0722 },
65− ];
66− }
67−
68− function test_luminance(data) {
69− testCase.color = data.tag;
70− compare(tool.luminance(testCase.color).toFixed(4), data.luminance.toFixed(4));
71− }
72−
7353 function test_foreground_data() {
7454 return [
7555 { tag: "default", index: 0, foreground: Theme.palette.normal.foreground, luminance: 0.5725 },
tests/plugins/Utils/CMakeLists.txt+5
@@ -27,3 +27,8 @@ run_tests(
2727 qsortfilterproxymodeltest
2828 timeformattertest
2929 )
30+
31+# plain qml test
32+set(qmltest_DEFAULT_TARGETS qmltests)
33+set(qmltest_DEFAULT_PROPERTIES ENVIRONMENT "QT_QPA_PLATFORM=minimal")
34+add_qml_test(. UtilsStyle IMPORT_PATHS ${CMAKE_BINARY_DIR}/plugins)
tests/plugins/Utils/tst_UtilsStyle.qmlnew file+47
@@ -0,0 +1,47 @@
1+/*
2+ * Copyright (C) 2014 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.2
18+import QtTest 1.0
19+import Utils 0.1
20+
21+TestCase {
22+ id: testCase
23+ name: "UtilsStyle"
24+
25+ property color color
26+
27+ function test_luminance_data() {
28+ return [
29+ { tag: "#F00", luminance: 0.2126 },
30+ { tag: "#0F0", luminance: 0.7152 },
31+ { tag: "#00F", luminance: 0.0722 },
32+ { tag: "white", luminance: 1.0 },
33+ { tag: "black", luminance: 0.0 },
34+ { tag: "lightgrey", luminance: 0.8275 },
35+ { tag: "grey", luminance: 0.5020 },
36+ { tag: "darkgrey", luminance: 0.6627 },
37+ { tag: "red", luminance: 0.2126 },
38+ { tag: "green", luminance: 0.3590 },
39+ { tag: "blue", luminance: 0.0722 },
40+ ];
41+ }
42+
43+ function test_luminance(data) {
44+ testCase.color = data.tag;
45+ compare(Style.luminance(testCase.color).toFixed(4), data.luminance.toFixed(4));
46+ }
47+}