@@ -15,6 +15,7 @@
17import QtQuick 2.4
17import QtQuick 2.4
18+import QtGraphicalEffects 1.0
18import Ubuntu.Components 1.3
19import Ubuntu.Components 1.3
19import Wizard 0.1
20import Wizard 0.1
20import Ubuntu.SystemSettings.TimeDate 1.0
21import Ubuntu.SystemSettings.TimeDate 1.0
@@ -33,6 +34,36 @@ LocalComponents.Page {
33 // for testing
34 // for testing
34 readonly property alias tdModule: timeDatePanel
35 readonly property alias tdModule: timeDatePanel
37+ function highlightTimezone(offset) {
38+ highlightImage.source = "file:/usr/share/libtimezonemap/ui/timezone_" + offset + ".png";
41+ // geo coords conversion functions (adapted from libtimezonemap)
42+ function radians (degrees) {
43+ return degrees * Math.PI / 180;
46+ function longitudeToX(longitude, map_width) {
47+ var xdeg_offset = -6;
48+ var x = (map_width * (180.0 + longitude) / 360.0) + (map_width * xdeg_offset / 180.0);
52+ function latitudeToY(latitude, map_height) {
53+ var bottom_lat = -59;
56+ var top_per = top_lat / 180.0;
57+ var y = 1.25 * Math.log(Math.tan(0.25*Math.PI + 0.4 * radians(latitude)));
58+ var full_range = 4.6068250867599998;
59+ var top_offset = full_range * top_per;
60+ var map_range = Math.abs(1.25 * Math.log(Math.tan(0.25*Math.PI + 0.4 * radians(bottom_lat))) - top_offset);
61+ y = Math.abs(y - top_offset);
36 UbuntuTimeDatePanel {
67 UbuntuTimeDatePanel {
37 id: timeDatePanel
68 id: timeDatePanel
@@ -110,8 +141,13 @@ LocalComponents.Page {
112 onClicked: {
143 onClicked: {
144+ highlightTimezone(offset);
113 ListView.view.currentIndex = index;
145 ListView.view.currentIndex = index;
114 selectedTimeZone = timeZone;
146 selectedTimeZone = timeZone;
147+ print("Clicked at city with coords:", longitude, latitude);
148+ print("Highlight at (x,y):", longitudeToX(longitude, map.width), latitudeToY(latitude, map.height));
149+ pinImage.x = longitudeToX(longitude, map.width) - 8;
150+ pinImage.y = latitudeToY(latitude, map.height) - 16;
@@ -120,16 +156,16 @@ LocalComponents.Page {
120 id: column
156 id: column
121 anchors {
157 anchors {
122 fill: content
158 fill: content
123− topMargin: customMargin
159+ topMargin: units.gu(4)
124− leftMargin: desktopLook ? parent.leftMargin : 0
160+ leftMargin: desktopLook ? staticMargin : 0
125− rightMargin: desktopLook ? parent.rightMargin : 0
161+ rightMargin: desktopLook ? staticMargin : 0
128 LocalComponents.WizardTextField {
164 LocalComponents.WizardTextField {
129 id: searchField
165 id: searchField
130 objectName: "tzFilter"
166 objectName: "tzFilter"
131 anchors.left: parent.left
167 anchors.left: parent.left
132− anchors.right: parent.right
168+ anchors.right: !desktopLook ? parent.right : undefined
133 anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
169 anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
134 anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
170 anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
135 placeholderText: i18n.tr("Enter your city")
171 placeholderText: i18n.tr("Enter your city")
@@ -138,13 +174,14 @@ LocalComponents.Page {
138 // reset when switching between filter modes (text/country)
174 // reset when switching between filter modes (text/country)
139 selectedTimeZone = ""
175 selectedTimeZone = ""
140 tzList.currentIndex = -1
176 tzList.currentIndex = -1
177+ highlightImage.source = ""
144 Rectangle {
181 Rectangle {
145 id: divider
182 id: divider
146 anchors.left: parent.left
183 anchors.left: parent.left
147− anchors.right: parent.right
184+ anchors.right: !desktopLook ? parent.right : undefined
148 anchors.top: searchField.bottom
185 anchors.top: searchField.bottom
149 anchors.topMargin: units.gu(3)
186 anchors.topMargin: units.gu(3)
150 height: units.dp(1)
187 height: units.dp(1)
@@ -161,14 +198,73 @@ LocalComponents.Page {
162 anchors {
199 anchors {
163 left: parent.left
200 left: parent.left
164− right: parent.right
201+ right: !desktopLook ? parent.right : undefined
165 top: divider.bottom
202 top: divider.bottom
205+ width: desktopLook ? searchField.width : undefined
168 height: column.height - searchField.height - column.anchors.topMargin - divider.height
206 height: column.height - searchField.height - column.anchors.topMargin - divider.height
169 model: tzFilterModel
207 model: tzFilterModel
170 delegate: tzComponent
208 delegate: tzComponent
213+ visible: desktopLook
218+ bottom: parent.bottom
223+ width: units.dp(800)
224+ height: units.dp(410)
231+ source: "file:/usr/share/libtimezonemap/ui/bg.png"
232+ sourceSize: Qt.size(map.width, map.height)
233+ fillMode: Image.PreserveAspectFit
240+ sourceSize: Qt.size(map.width, map.height)
241+ fillMode: Image.PreserveAspectFit
249+ source: backgroundImage
250+ foregroundSource: highlightImage
254+ anchors.fill: parent
256+ print("Clicked map at:", mouseX, mouseY)
262+ source: "file:/usr/share/libtimezonemap/ui/pin.png"
263+ visible: selectedTimeZone != ""
174 Component {
270 Component {