QtZibit: Simile-Widgets.org Exhibit runs local in QtWebKit rendering from QML/Json.
Niels Mayer
"Exhibit" running locally in QtWebKit, rendering arbitrary Json data
models from QML, Qt or QtMobility.
Some examples implemented in Exhibit: http://simile-widgets.org/exhibit/
With QtZibit, such apps could run locally (although the
google-map-based ones require an internet connection, the timeline,
timeplot, chart, visualizations don't). These can run "standalone" and
the associated JavaScript is loaded in from the local filesystem,
computed in QML/JavaScript/C++ or transferred from the web or local
SQL datastore. QtZibit can be used to visualize arbitrary datamodels
from JSON in QML, and in-turn, this JSON can be rendered via QtWebKit
in Exhibit. In many ways, it duplicates or complements the
"delegate"-based rendering of datamodels in Qt/QML, but uses Web-based
layouts and rendering.
For example, in
http://trunk.simile-widgets.org/exhibit/examples/polymap/medieval-mediterranean.html
, the rendered data comes from JSON elements that look like:
{"id":"15 - Madonna and Child",
"label":"15 - Madonna and Child",
"type":"Item",
"uri":"http://trunk.simile-widgets.org/exhibit/examples/polymap/item#15%20-%20Madonna%20and%20Child",
"modified":"no",
"Image":"http://lh5.ggpht.com/_eb5gxCGMANM/SZ8XlfMwLiI/AAAAAAAAAGE/SbO0e2TncR0/s144/CImabueMadonna.jpg",
"Century":"13th",
"Building+Name":"Church - Santa Trinita",
"latlng":"43.770031,11.250994",
"Medium":"gesso",
"Author":"Cimabue",
"Title":"Madonna and Child",
"City":"Florence",
"origin":"http://trunk.simile-widgets.org/exhibit/examples/polymap/medieval-mediterranean.html#15%20-%20Madonna%20and%20Child"
},
(See http://trunk.simile-widgets.org/exhibit/examples/polymap/ JSON
files visualized by these these "mashups" ; other examples at
http://trunk.simile-widgets.org/exhibit/examples/ )
The map elements in the "medieval mediterranean" example above are
rendered by extracting ".latlng" ".polyline", etc. entities from the
JSON data elements such as the one from the prior example.
<div ex:role="view"
id="the-map"
ex:viewClass="Map"
ex:center="43.76852162810477,11.252446174621582"
ex:zoom="15"
ex:latlng=".latlng"
ex:polyline=".polyline"
ex:mapHeight="600"
ex:borderWidth="7"
ex:borderOpacity="1"
ex:overviewControl="true"
ex:size="large"
>
</div>
Exhibit also has capabilities for rendering SPARQL queries, which
might be useful to combine with the existing "semantic desktop"
facilities in MeeGo/Harmattan that are based on
http://projects.gnome.org/tracker/ . One app that would be pretty cool
for would be to geolocate all phone events onto a map, or be able to
dial around & visualize all phone events on a single timeline, etc.
Or similarly, automatically render thumbnails for captured media on a
map or timeline based on tracker-extracted metadata.
PS: For Harmattan ( http://swipe.nokia.com/ ) , it sure would be nice
if someone developed an Ovi Maps plugin that worked just like the
Google/OpenLayers/OpenStreetMap/VirtualEarth maps Exhibit supports
currently:
http://code.google.com/p/simile-widgets/source/browse/exhibit/trunk/src/webapp/api/extensions/map/map-extension.js
PPS: Unlike the web version, a Mobile or WebKit version of Exhibit can
call out from Exhibit back to QML and therefore allows invocation of
C++ primitives from an Exhibit UI -- Using
http://doc.qt.nokia.com/4.7/qml-webview.html#javaScriptWindowObjects-prop
... which means apps like
http://nielsmayer.com/xwiki/bin/view/Timeline/NprTimeline won't need
Flash for media playback, they'll just invoke QtMultimediaKit Audio or
Video players....
Niels Mayer
> Introducing http://code.google.com/p/qtzibit/
Qtzibit is now checked in and working, and ready for people to try on
MeeGo and other Linux platforms. The idea is to show off the power of
http://simile-widgets.org/exhibit/ and provide a platform for further
integration between QML and Exhibit's advanced data rendering
functionality.
After installation, when you run /opt/qtzibit/bin/qtzibit or click on
launcher /usr/share/applications/qtzibit.desktop
you'll be presented with a list of Exhibit example/demos to run, which
looks like:
http://nielsmayer.com/meego/qml/qtzibit-all-examples.png
Clicking on one of the example titles brings up an interactive page
featuring an Exhibit demo:
http://nielsmayer.com/meego/qml/qtzibit-billionaires.png
http://nielsmayer.com/meego/qml/qtzibit-cerealbox-characters.png
http://nielsmayer.com/meego/qml/qtzibit-medieval-mediterranean-map.png
http://nielsmayer.com/meego/qml/qtzibit-mushroom-identification.png
http://nielsmayer.com/meego/qml/qtzibit-presidents.png
http://nielsmayer.com/meego/qml/qtzibit-redsox-vs-yankees.png
http://nielsmayer.com/meego/qml/qtzibit-us-city-population.png
http://nielsmayer.com/meego/qml/qtzibit-world-populations.png
To get back to the Example Chooser, click the "Browse Examples" link
on the upper-left corner of each Exhibit page. This invokes
"javascript:window.qml.showExampleChooser();" which also shows how you
can call back into QML from JavaScript running in the Exhibit
web-page.
The qtzibit installation places a number of interesting Exhibit
examples directly on the filesystem. In conjunction with the modified
exhibit&timeline, most of these examples work directly in the browser.
Thus the "billionaries" example in the screenshot above can also be
browsed directly e.g.
"firefox /opt/qtzibit/exhibit/src/webapp/examples/billionaires/billionaires.html"
... This makes development and debugging of Exhibit JavaScript easier.
To checkout, build and run qtzibit, first install QtSDK 1.1.2 (
http://labs.qt.nokia.com/2011/06/21/introducing-meego-1-2-harmattan-to-the-qt-sdk/
), then do the following steps:
svn checkout https://qtzibit.googlecode.com/svn/trunk/ qtzibit
qtcreator qtzibit/qtzibit.pro ##
--> In "Target Setup" dialog, select "Use Shadow Building" under
Desktop details.
--> Build All
cd qtzibit-build-desktop ##created by Shadow Building in qtcreator
sudo make install ##need root to install to /opt/qtzibit
/opt/qtzibit/bin/qtzibit ##run the installed qtzibit!
Note that the last step -- installation into /opt/qtzibit -- is
necessary because all the HTML/JavaScript expect the Exhibit and
Timeline code to reside in /opt/qtzibit/exhibit/* and
/opt/qtzibit/timeline/*. Once installed, as long as you're not
changing the code for the simile exhibit or timeline widgets, you can
do your QML/Javascript development in qtcreator and test/debug
in-place.
PS: Next step is to come up with a less "static" demo that mashes-up
dynamic javascript data from QML derived from handset or tablet
events, GPS data, etc. I think that http://zeitgeist-project.com/ data
would be very interesting to present in qtzibit similar to
http://seilo.geekyogre.com/2010/07/zeitgeist-geolocation-magic/ ,
however it's not something i have time to work on now....Anybody else
interested?