<html>
<body>
<div style="font-family: Verdana, Arial, Helvetica, Sans-Serif;">
<table bgcolor="#f9f3c9" width="100%" cellpadding="12" style="border: 1px #c9c399 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tr>
<td>
This is an automatically generated e-mail. To reply, visit:
<a href="https://git.reviewboard.kde.org/r/124550/">https://git.reviewboard.kde.org/r/124550/</a>
</td>
</tr>
</table>
<br />
<table bgcolor="#fefadf" width="100%" cellspacing="0" cellpadding="12" style="border: 1px #888a85 solid; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;">
<tr>
<td>
<div>Review request for Marble.</div>
<div>By Dennis Nienhüser.</div>
<div style="margin-top: 1.5em;">
<b style="color: #575012; font-size: 10pt;">Repository: </b>
marble
</div>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Description </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: 1px solid #b8b5a0">
<tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Currently we have no (good, easy) way to place a QML item on top of the map and have it stick to a certain geo position. The approach in this patch is taken from the marble-touch app: Any QML code can be assigned to the new placemarkDelegate property of the Search. Similar to a delegate of e.g. a ListView, for any item in the model a QML object is then instantiated from that QML delegate component prototype. Context properties (e.g. index, name, longitude, latitude) are queried from the model and assigned to each instantiated item, and the C++ part takes care of setting the screen position and the visibility of each QML placemark instance.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">The QML part e.g. looks like this</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;"><div class="codehilite" style="background: #f8f8f8"><pre style="line-height: 125%">SearchBackend {
...
placemarkDelegate: Image {
transformOrigin: Item.Bottom
source: "qrc:/ic_place_black_18dp.png"
MouseArea {
anchors.fill: parent
onClicked: console.log("Clicked on result (" + index + ") " + name + " at (" + longitude.toFixed(6) + ", " + latitude.toFixed(6) + ")")
}
}
}
</pre></div>
</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">and the maintenance (creation, position+visibility updates, deletion) of the items happens behind the scenes in C++. The result you get is something like this: http://nienhueser.de/marble/android-placemark-delegate.png
<img alt="Search result placemark delegates" src="http://nienhueser.de/marble/android-placemark-delegate.png" style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: normal;" /></p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">As the delegate code is in QML and context properties are directly available, any sort of interaction can be done very easily. It's not perfect though: Since all rendering is done outside of Marble's rendering, the QML delegates are always rendered on top of every other map items, including float items. For Marble Maps this should be OK though.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">You can see a similar thing when starting bin/marble-touch from latest master. The search activity there uses the same approach to display search results and start routing from them (routing is not yet ported in there). The weather activity is quite interesting as well: It uses QML delegates to replace the C++ rendering of a whole plugin layer (weather items) with custom QML delegates.</p>
<p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">I don't intend to push the code as-is, rather see it as a base for discussion and possibly further work on top of it.</p></pre>
</td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Testing </h1>
<table width="100%" bgcolor="#ffffff" cellspacing="0" cellpadding="10" style="border: 1px solid #b8b5a0">
<tr>
<td>
<pre style="margin: 0; padding: 0; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;"><p style="padding: 0;text-rendering: inherit;margin: 0;line-height: inherit;white-space: inherit;">Tested on the Nexus 4 and Desktop</p></pre>
</td>
</tr>
</table>
<h1 style="color: #575012; font-size: 10pt; margin-top: 1.5em;">Diffs</b> </h1>
<ul style="margin-left: 3em; padding-left: 0;">
<li>data/android/drawable-xxxhdpi/ic_place_black_18dp.png <span style="color: grey">(PRE-CREATION)</span></li>
<li>src/apps/marble-maps/MarbleMaps.qrc <span style="color: grey">(d027af9)</span></li>
<li>src/apps/marble-maps/Search.qml <span style="color: grey">(896f266)</span></li>
<li>src/lib/marble/declarative/SearchBackend.h <span style="color: grey">(b041de3)</span></li>
<li>src/lib/marble/declarative/SearchBackend.cpp <span style="color: grey">(5c80cc3)</span></li>
</ul>
<p><a href="https://git.reviewboard.kde.org/r/124550/diff/" style="margin-left: 3em;">View Diff</a></p>
</td>
</tr>
</table>
</div>
</body>
</html>