@@ -15,6 +15,7 @@
1515 */
1616
1717import QtQuick 2.4
18+import QtGraphicalEffects 1.0
1819import Ubuntu.Components 1.3
1920import Wizard 0.1
2021import Ubuntu.SystemSettings.TimeDate 1.0
@@ -33,6 +34,36 @@ LocalComponents.Page {
3334 // for testing
3435 readonly property alias tdModule: timeDatePanel
3536
37+ function highlightTimezone(offset) {
38+ highlightImage.source = "file:/usr/share/libtimezonemap/ui/timezone_" + offset + ".png";
39+ }
40+
41+ // geo coords conversion functions (adapted from libtimezonemap)
42+ function radians (degrees) {
43+ return degrees * Math.PI / 180;
44+ }
45+
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);
49+ return x;
50+ }
51+
52+ function latitudeToY(latitude, map_height) {
53+ var bottom_lat = -59;
54+ var top_lat = 81;
55+
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);
62+ y = y / map_range;
63+ y = y * map_height;
64+ return y;
65+ }
66+
3667 UbuntuTimeDatePanel {
3768 id: timeDatePanel
3869 }
@@ -110,8 +141,13 @@ LocalComponents.Page {
110141 }
111142
112143 onClicked: {
144+ highlightTimezone(offset);
113145 ListView.view.currentIndex = index;
114146 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;
115151 }
116152 }
117153 }
@@ -120,16 +156,16 @@ LocalComponents.Page {
120156 id: column
121157 anchors {
122158 fill: content
123− topMargin: customMargin
124− leftMargin: desktopLook ? parent.leftMargin : 0
125− rightMargin: desktopLook ? parent.rightMargin : 0
159+ topMargin: units.gu(4)
160+ leftMargin: desktopLook ? staticMargin : 0
161+ rightMargin: desktopLook ? staticMargin : 0
126162 }
127163
128164 LocalComponents.WizardTextField {
129165 id: searchField
130166 objectName: "tzFilter"
131167 anchors.left: parent.left
132− anchors.right: parent.right
168+ anchors.right: !desktopLook ? parent.right : undefined
133169 anchors.leftMargin: column.anchors.leftMargin == 0 ? staticMargin : 0
134170 anchors.rightMargin: column.anchors.rightMargin == 0 ? staticMargin : 0
135171 placeholderText: i18n.tr("Enter your city")
@@ -138,13 +174,14 @@ LocalComponents.Page {
138174 // reset when switching between filter modes (text/country)
139175 selectedTimeZone = ""
140176 tzList.currentIndex = -1
177+ highlightImage.source = ""
141178 }
142179 }
143180
144181 Rectangle {
145182 id: divider
146183 anchors.left: parent.left
147− anchors.right: parent.right
184+ anchors.right: !desktopLook ? parent.right : undefined
148185 anchors.top: searchField.bottom
149186 anchors.topMargin: units.gu(3)
150187 height: units.dp(1)
@@ -161,14 +198,73 @@ LocalComponents.Page {
161198
162199 anchors {
163200 left: parent.left
164− right: parent.right
201+ right: !desktopLook ? parent.right : undefined
165202 top: divider.bottom
166203 }
167204
205+ width: desktopLook ? searchField.width : undefined
168206 height: column.height - searchField.height - column.anchors.topMargin - divider.height
169207 model: tzFilterModel
170208 delegate: tzComponent
171209 }
210+
211+ Item {
212+ id: mapContainer
213+ visible: desktopLook
214+ anchors {
215+ left: tzList.right
216+ right: parent.right
217+ top: parent.top
218+ bottom: parent.bottom
219+ }
220+
221+ Item {
222+ id: map
223+ width: units.dp(800)
224+ height: units.dp(410)
225+ anchors {
226+ centerIn: parent
227+ }
228+
229+ Image {
230+ id: backgroundImage
231+ source: "file:/usr/share/libtimezonemap/ui/bg.png"
232+ sourceSize: Qt.size(map.width, map.height)
233+ fillMode: Image.PreserveAspectFit
234+ smooth: true
235+ visible: false
236+ }
237+
238+ Image {
239+ id: highlightImage
240+ sourceSize: Qt.size(map.width, map.height)
241+ fillMode: Image.PreserveAspectFit
242+ smooth: true
243+ visible: false
244+ }
245+
246+ Blend {
247+ anchors.fill: map
248+ cached: true
249+ source: backgroundImage
250+ foregroundSource: highlightImage
251+ }
252+
253+ MouseArea {
254+ anchors.fill: parent
255+ onClicked: {
256+ print("Clicked map at:", mouseX, mouseY)
257+ }
258+ }
259+
260+ Image {
261+ id: pinImage
262+ source: "file:/usr/share/libtimezonemap/ui/pin.png"
263+ visible: selectedTimeZone != ""
264+ z: map.z + 1
265+ }
266+ }
267+ }
172268 }
173269
174270 Component {