From a8e616b2bdd6252829e272dbd34067ec15eda18d Mon Sep 17 00:00:00 2001 From: Mohammed Sameer Date: Thu, 6 Sep 2012 14:29:29 +0300 Subject: [PATCH] More work on image settings page. Now color filter and white balance are fine --- qml/ColorToneButton.qml | 94 ------------------------------- qml/ImageColorFilterPage.qml | 103 ++++++++++++++++++++++++++++++++++ qml/ImageSettingsPage.qml | 96 ++++++++++++++++++++++++------- qml/ImageWhiteBalancePage.qml | 94 +++++++++++++++++++++++++++++++ qml/SectionHeader.qml | 27 +++++++++ qml/WhiteBalanceButton.qml | 86 ---------------------------- 6 files changed, 299 insertions(+), 201 deletions(-) delete mode 100644 qml/ColorToneButton.qml create mode 100644 qml/ImageColorFilterPage.qml create mode 100644 qml/ImageWhiteBalancePage.qml create mode 100644 qml/SectionHeader.qml delete mode 100644 qml/WhiteBalanceButton.qml diff --git a/qml/ColorToneButton.qml b/qml/ColorToneButton.qml deleted file mode 100644 index b917153..0000000 --- a/qml/ColorToneButton.qml +++ /dev/null @@ -1,94 +0,0 @@ -// -*- qml -*- -import QtQuick 1.1 -import com.nokia.meego 1.1 -import QtCamera 1.0 - - -Selector { - id: button - - property alias value: ct.value - - timerConstraints: true // Never trigger - - iconSource: ctIcon(ct.value); - - title: qsTr("Color filter"); - - ColorTone { - id: ct - camera: cam - // TODO: hardcoding - value: ColorTone.Normal - } - - function ctIcon(val) { - var x = row.children.length; - var i = 0; - for (i = 0; i < x; i++) { - if (row.children[i].value == val) { - return row.children[i].normalIcon; - } - } - } - - widget: Row { - id: row - height: button.checked ? 64 : 0 - width: button.checked ? (children.length * height) + (children.length - 1) * spacing : 0 - spacing: 10 - - Behavior on width { - // TODO: seems animation is not working - PropertyAnimation { duration: 250; } - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-no-filter" - checkedIcon: "image://theme/icon-m-camera-no-filter-selected" - controller: ct - value: ColorTone.Normal - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-filter-black-white" - checkedIcon: "image://theme/icon-m-camera-filter-black-white-selected" - controller: ct - value: ColorTone.GrayScale - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-filter-sepia" - checkedIcon: "image://theme/icon-m-camera-filter-sepia-selected" - controller: ct - value: ColorTone.Sepia - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-filter-vivid" - checkedIcon: "image://theme/icon-m-camera-filter-vivid-selected" - controller: ct - value: ColorTone.Vivid - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-filter-negative" - checkedIcon: "image://theme/icon-m-camera-filter-negative-selected" - controller: ct - value: ColorTone.Negative - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-filter-solarize" - checkedIcon: "image://theme/icon-m-camera-filter-solarize-selected" - controller: ct - value: ColorTone.Solarize - doClose: false - } - } -} diff --git a/qml/ImageColorFilterPage.qml b/qml/ImageColorFilterPage.qml new file mode 100644 index 0000000..bfcd338 --- /dev/null +++ b/qml/ImageColorFilterPage.qml @@ -0,0 +1,103 @@ +// -*- qml -*- +import QtQuick 1.1 +import com.nokia.meego 1.1 +import QtCamera 1.0 + +Page { + id: page + property Camera cam: null + + Rectangle { + color: "black" + width: parent.width + height: row.height + title.height + 30 + anchors.bottom: toolBar.top + opacity: 0.5 + + SectionHeader { + id: title + anchors.top: parent.top + anchors.topMargin: 10 + text: qsTr("Color filter"); + } + + Row { + id: row + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: 20 + anchors.rightMargin: 20 + anchors.top: title.bottom + anchors.topMargin: 10 + + IconButton { + width: parent.width / 6 + normalIcon: "image://theme/icon-m-camera-no-filter" + checkedIcon: "image://theme/icon-m-camera-no-filter-selected" + value: ColorTone.Normal + savedValue: settings.imageColorFilter + onClicked: settings.imageColorFilter = value; + text: qsTr("Off"); + } + + IconButton { + width: parent.width / 6 + normalIcon: "image://theme/icon-m-camera-filter-black-white" + checkedIcon: "image://theme/icon-m-camera-filter-black-white-selected" + value: ColorTone.GrayScale + savedValue: settings.imageColorFilter + onClicked: settings.imageColorFilter = value; + text: qsTr("Black & white"); + } + + IconButton { + width: parent.width / 6 + normalIcon: "image://theme/icon-m-camera-filter-sepia" + checkedIcon: "image://theme/icon-m-camera-filter-sepia-selected" + value: ColorTone.Sepia + savedValue: settings.imageColorFilter + onClicked: settings.imageColorFilter = value; + text: qsTr("Sepia"); + } + + IconButton { + width: parent.width / 6 + normalIcon: "image://theme/icon-m-camera-filter-vivid" + checkedIcon: "image://theme/icon-m-camera-filter-vivid-selected" + value: ColorTone.Vivid + savedValue: settings.imageColorFilter + onClicked: settings.imageColorFilter = value; + text: qsTr("Vivid"); + } + + IconButton { + width: parent.width / 6 + normalIcon: "image://theme/icon-m-camera-filter-negative" + checkedIcon: "image://theme/icon-m-camera-filter-negative-selected" + value: ColorTone.Negative + savedValue: settings.imageColorFilter + onClicked: settings.imageColorFilter = value; + text: qsTr("Negative"); + } + + IconButton { + width: parent.width / 6 + normalIcon: "image://theme/icon-m-camera-filter-solarize" + checkedIcon: "image://theme/icon-m-camera-filter-solarize-selected" + value: ColorTone.Solarize + savedValue: settings.imageColorFilter + onClicked: settings.imageColorFilter = value; + text: qsTr("Solarize"); + } + } + } + + ToolBar { + id: toolBar + anchors.bottom: parent.bottom + tools: ToolBarLayout { + id: layout + ToolIcon { iconId: "icon-m-toolbar-back"; onClicked: pageStack.pop(); } + } + } +} diff --git a/qml/ImageSettingsPage.qml b/qml/ImageSettingsPage.qml index 0392a81..efa425a 100644 --- a/qml/ImageSettingsPage.qml +++ b/qml/ImageSettingsPage.qml @@ -5,42 +5,96 @@ import QtCamera 1.0 Page { id: page + property Camera cam: null - // TODO: + property variant __wb: [ + [WhiteBalance.Auto, qsTr("Automatic"), "icon-m-camera-whitebalance-auto-selected"], + [WhiteBalance.Sunset, qsTr("Sunny"), "icon-m-camera-whitebalance-sunny-selected"], + [WhiteBalance.Cloudy, qsTr("Cloudy"), "icon-m-camera-whitebalance-cloudy-selected"], [WhiteBalance.Flourescent, qsTr("Flourescent"), "icon-m-camera-whitebalance-fluorescent-selected"], + [WhiteBalance.Tungsten, qsTr("Tungsten"), "icon-m-camera-whitebalance-tungsten-selected"], + ] + + property variant __cf: [ + [ColorTone.Normal, qsTr("Off"), "icon-m-camera-no-filter-selected"], + [ColorTone.GrayScale, qsTr("Black & white"), "icon-m-camera-filter-black-white-selected"], + [ColorTone.Sepia, qsTr("Sepia"), "icon-m-camera-filter-sepia-selected"], + [ColorTone.Vivid, qsTr("Vivid"), "icon-m-camera-filter-vivid-selected"], + [ColorTone.Negative, qsTr("Negative"), "icon-m-camera-filter-negative-selected"], + [ColorTone.Solarize, qsTr("Solarize"), "icon-m-camera-filter-solarize-selected"] + ] + + function filterData(val, data, item) { + var x = 0; + var i = data.length; + for (x = 0; x < i; x++) { + if (data[x][0] == val) { + return data[x][item]; + } + } + } + + function wbIcon(wb) { + return filterData(wb, __wb, 2); + } + + function wbName(wb) { + return filterData(wb, __wb, 1); + } + + function cfIcon(cf) { + return filterData(cf, __cf, 2); + } + + function cfName(cf) { + return filterData(cf, __cf, 1); + } + + Rectangle { + color: "black" + anchors.fill: parent + } Flickable { - id: flick anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.bottom: toolBar.top - WhiteBalanceButton { - id: wb - anchors.top: parent.top - anchors.left: parent.left - anchors.topMargin: 20 - anchors.leftMargin: 20 - } + Column { + width: parent.width - ColorToneButton { - id: ct - anchors.top: wb.bottom - anchors.left: parent.left - anchors.topMargin: 20 - anchors.leftMargin: 20 + Label { + // TODO: + text: qsTr("Image settings"); + } + + Row { + width: parent.width + + ListItem { + id: wb + width: parent.width / 2 + title: qsTr("White balance"); + subtitle: wbName(settings.imageWhiteBalance); + iconId: wbIcon(settings.imageWhiteBalance); + onClicked: openFile("ImageWhiteBalancePage.qml"); + } + + ListItem { + id: cf + width: parent.width / 2 + title: qsTr("Color filter"); + subtitle: cfName(settings.imageColorFilter); + iconId: cfIcon(settings.imageColorFilter); + onClicked: openFile("ImageColorFilterPage.qml"); + } + } } } ToolBar { id: toolBar anchors.bottom: parent.bottom - // TODO: transparent ? -// height: layout.height -// platformStyle: ToolBarStyle { -// background: "" -// } - tools: ToolBarLayout { id: layout ToolIcon { iconId: "icon-m-toolbar-back"; onClicked: pageStack.pop(); } diff --git a/qml/ImageWhiteBalancePage.qml b/qml/ImageWhiteBalancePage.qml new file mode 100644 index 0000000..c026b99 --- /dev/null +++ b/qml/ImageWhiteBalancePage.qml @@ -0,0 +1,94 @@ +// -*- qml -*- +import QtQuick 1.1 +import com.nokia.meego 1.1 +import QtCamera 1.0 + +Page { + id: page + property Camera cam: null + + Rectangle { + color: "black" + width: parent.width + height: row.height + title.height + 30 + anchors.bottom: toolBar.top + opacity: 0.5 + + SectionHeader { + id: title + anchors.top: parent.top + anchors.topMargin: 10 + text: qsTr("White balance"); + } + + Row { + id: row + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: 20 + anchors.rightMargin: 20 + anchors.top: title.bottom + anchors.topMargin: 10 + + + IconButton { + width: parent.width / 5 + normalIcon: "image://theme/icon-m-camera-whitebalance-auto" + checkedIcon: "image://theme/icon-m-camera-whitebalance-auto-selected" + value: WhiteBalance.Auto + savedValue: settings.imageWhiteBalance + onClicked: settings.imageWhiteBalance = value; + text: qsTr("Automatic"); + } + + IconButton { + width: parent.width / 5 + normalIcon: "image://theme/icon-m-camera-whitebalance-sunny" + checkedIcon: "image://theme/icon-m-camera-whitebalance-sunny-selected" + value: WhiteBalance.Sunset + savedValue: settings.imageWhiteBalance + onClicked: settings.imageWhiteBalance = value; + text: qsTr("Sunset"); + } + + IconButton { + width: parent.width / 5 + normalIcon: "image://theme/icon-m-camera-whitebalance-cloudy" + checkedIcon: "image://theme/icon-m-camera-whitebalance-cloudy-selected" + value: WhiteBalance.Cloudy + savedValue: settings.imageWhiteBalance + onClicked: settings.imageWhiteBalance = value; + text: qsTr("Cloudy"); + } + + IconButton { + width: parent.width / 5 + normalIcon: "image://theme/icon-m-camera-whitebalance-fluorescent" + checkedIcon: "image://theme/icon-m-camera-whitebalance-fluorescent-selected" + value: WhiteBalance.Flourescent + savedValue: settings.imageWhiteBalance + onClicked: settings.imageWhiteBalance = value; + text: qsTr("Flourescent"); + } + + IconButton { + width: parent.width / 5 + normalIcon: "image://theme/icon-m-camera-whitebalance-tungsten" + checkedIcon: "image://theme/icon-m-camera-whitebalance-tungsten-selected" + value: WhiteBalance.Tungsten + savedValue: settings.imageWhiteBalance + onClicked: settings.imageWhiteBalance = value; + text: qsTr("Tungsten"); + } + } + } + + ToolBar { + id: toolBar + anchors.bottom: parent.bottom + tools: ToolBarLayout { + id: layout + ToolIcon { iconId: "icon-m-toolbar-back"; onClicked: pageStack.pop(); } + } + } +} diff --git a/qml/SectionHeader.qml b/qml/SectionHeader.qml new file mode 100644 index 0000000..8933a12 --- /dev/null +++ b/qml/SectionHeader.qml @@ -0,0 +1,27 @@ +// -*- qml -*- +import QtQuick 1.1 +import com.nokia.meego 1.1 + +Row { + id: root + + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: 10 + anchors.rightMargin: 10 + spacing: 10 + + property alias text: label.text + + Label { + id: label + verticalAlignment: Text.AlignVCenter + } + + Rectangle { + color: "darkgray" + height: 2 + width: parent.width - label.width - 20 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/qml/WhiteBalanceButton.qml b/qml/WhiteBalanceButton.qml deleted file mode 100644 index bdd167d..0000000 --- a/qml/WhiteBalanceButton.qml +++ /dev/null @@ -1,86 +0,0 @@ -// -*- qml -*- -import QtQuick 1.1 -import com.nokia.meego 1.1 -import QtCamera 1.0 - -Selector { - id: button - - property alias value: wb.value - - timerConstraints: true // Never trigger - - iconSource: wbIcon(wb.value); - - title: qsTr("White balance mode"); - - WhiteBalance { - id: wb - camera: cam - // TODO: hardcoding - value: WhiteBalance.Auto - } - - function wbIcon(val) { - var x = row.children.length; - var i = 0; - for (i = 0; i < x; i++) { - if (row.children[i].value == val) { - return row.children[i].normalIcon; - } - } - } - - widget: Row { - id: row - height: button.checked ? 64 : 0 - width: button.checked ? (children.length * height) + (children.length - 1) * spacing : 0 - spacing: 10 - - Behavior on width { - // TODO: seems animation is not working - PropertyAnimation { duration: 250; } - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-whitebalance-auto" - checkedIcon: "image://theme/icon-m-camera-whitebalance-auto-selected" - controller: wb - value: WhiteBalance.Auto - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-whitebalance-cloudy" - checkedIcon: "image://theme/icon-m-camera-whitebalance-cloudy-selected" - controller: wb - value: WhiteBalance.Cloudy - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-whitebalance-sunny" - checkedIcon: "image://theme/icon-m-camera-whitebalance-sunny-selected" - controller: wb - value: WhiteBalance.Sunset - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-whitebalance-tungsten" - checkedIcon: "image://theme/icon-m-camera-whitebalance-tungsten-selected" - controller: wb - value: WhiteBalance.Tungsten - doClose: false - } - - CheckButton { - normalIcon: "image://theme/icon-m-camera-whitebalance-fluorescent" - checkedIcon: "image://theme/icon-m-camera-whitebalance-fluorescent-selected" - controller: wb - value: WhiteBalance.Flourescent - doClose: false - } - - } -} -- 2.34.1