QT5/qml2 UI proof of concept (#254)R7551

* Adding qt5/qml2 UI proof of concept

* Code cleanup

* Minor cleanup

* Apply coding style by clang-format -style=WebKit

For better diff tracking, I applied coding style once more.

* Removed useless QtQuick.Controls dependency

39 files changed, 1539 insertions, 13 deletions

diff --git a/navit/gui/qt5_qml/CMakeLists.txt b/navit/gui/qt5_qml/CMakeLists.txt
index a191c9d69..c91a2d394 100644
--- a/navit/gui/qt5_qml/CMakeLists.txt
+++ b/navit/gui/qt5_qml/CMakeLists.txt
@@ -4,4 +4,5 @@ set(CMAKE_INCLUDE_CURRENT_DIR ON)
 set(CMAKE_AUTOMOC ON)
 
 qt5_add_resources(GUI_QT5_QML_QRC "gui_qt5_qml.qrc")
-module_add_library(gui_qt5_qml gui_qt5_qml.cpp ${GUI_QT5_QML_QRC})
+
+module_add_library(gui_qt5_qml gui_qt5_qml.cpp ${GUI_QT5_QML_QRC} backend.cpp qml_map.cpp qml_poi.cpp)
diff --git a/navit/gui/qt5_qml/backend.cpp b/navit/gui/qt5_qml/backend.cpp
new file mode 100644
index 000000000..89e92ffa9
--- /dev/null
+++ b/navit/gui/qt5_qml/backend.cpp
@@ -0,0 +1,135 @@
+#include "item.h"
+#include "attr.h"
+#include "navit.h"
+#include "map.h"
+#include "glib.h"
+#include "transform.h"
+#include "backend.h"
+
+#include "qml_map.h"
+#include "qml_poi.h"
+
+#include "mapset.h"
+
+#include <QQmlContext>
+
+
+Backend::Backend(QObject * parent):QObject(parent)
+{
+}
+
+void
+ Backend::showMenu(struct point *p)
+{
+	struct coord co;
+
+	transform_reverse(navit_get_trans(nav), p, &co);
+	dbg(lvl_debug, "Point 0x%x 0x%x\n", co.x, co.y);
+	dbg(lvl_debug, "Screen coord : %d %d\n", p->x, p->y);
+	transform_to_geo(transform_get_projection(navit_get_trans(nav)), &co, &(this->g));
+	dbg(lvl_debug, "%f %f\n", this->g.lat, this->g.lng);
+	dbg(lvl_debug, "%p %p\n", nav, &c);
+	this->c.pro = transform_get_projection(navit_get_trans(nav));
+	this->c.x = co.x;
+	this->c.y = co.y;
+	dbg(lvl_debug, "c : %x %x\n", this->c.x, this->c.y);
+
+	emit displayMenu();
+}
+
+void
+ Backend::list_maps(int cause)
+{
+	struct attr attr, on, off, description, type, data, active;
+	char * label;
+	bool is_active;
+	struct attr_iter * iter;
+	QList < QObject * >dataList;
+
+	iter = navit_attr_iter_new();
+	on.type = off.type = attr_active;
+	on.u.num = 1;
+	off.u.num = 0;
+	while (navit_get_attr(this->nav, attr_map, &attr, iter)) {
+		if (map_get_attr(attr.u.map, attr_description, &description, NULL)) {
+			label = g_strdup(description.u.str);
+		} else {
+			if (!map_get_attr(attr.u.map, attr_type, &type, NULL))
+				type.u.str = "";
+			if (!map_get_attr(attr.u.map, attr_data, &data, NULL))
+				data.u.str = "";
+			label = g_strdup_printf("%s:%s", type.u.str, data.u.str);
+		}
+		is_active = false;
+		if (map_get_attr(attr.u.map, attr_active, &active, NULL)) {
+			if (active.u.num == 1) {
+				is_active = true;
+			}
+		}
+		dataList.append(new MapObject(label, is_active));
+	}
+
+	this->engine->rootContext()->setContextProperty("maps", QVariant::fromValue(dataList));
+
+}
+
+void
+ Backend::set_navit(struct navit *nav)
+{
+	this->nav = nav;
+}
+
+void
+ Backend::set_engine(QQmlApplicationEngine * engine)
+{
+	this->engine = engine;
+}
+
+void
+ Backend::get_pois()
+{
+
+	struct map_selection * sel, * selm;
+	struct coord c, center;
+	struct mapset_handle * h;
+	struct map * m;
+	struct map_rect * mr;
+	struct item * item;
+	enum projection pro = this->c.pro;
+	int idist, dist;
+
+	QList < QObject * >dataList;
+
+	sel = map_selection_rect_new(&(this->c), dist * transform_scale(abs(this->c.y) + dist * 1.5), 18);
+	center.x = this->c.x;
+	center.y = this->c.y;
+
+	dbg(lvl_debug, "center is at %x, %x\n", center.x, center.y);
+
+	h = mapset_open(navit_get_mapset(this->nav));
+	while ((m = mapset_next(h, 1))) {
+		selm = map_selection_dup_pro(sel, pro, map_projection(m));
+		mr = map_rect_new(m, selm);
+		dbg(lvl_debug, "mr=%p\n", mr);
+		if (mr) {
+			while ((item = map_rect_get_item(mr))) {
+				struct attr
+				    attr;
+				char *
+				    label;
+				idist = transform_distance(pro, &center, &c);
+				if (item_attr_get(item, attr_label, &attr)) {
+					label = map_convert_string(item->map, attr.u.str);
+					dataList.append(new PoiObject(label, true, idist));
+				}
+			}
+			map_rect_destroy(mr);
+		}
+		map_selection_destroy(selm);
+	}
+	map_selection_destroy(sel);
+	mapset_close(h);
+
+	this->engine->rootContext()->setContextProperty("pois", QVariant::fromValue(dataList));
+
+}
diff --git a/navit/gui/qt5_qml/backend.h b/navit/gui/qt5_qml/backend.h
new file mode 100644
index 000000000..6ff5a7825
--- /dev/null
+++ b/navit/gui/qt5_qml/backend.h
@@ -0,0 +1,37 @@
+#ifndef BACKEND_H
+#define BACKEND_H
+
+#include <QObject>
+#include <QDebug>
+#include <QQmlApplicationEngine>
+
+#include "coord.h"
+
+class Backend : public QObject
+{
+    Q_OBJECT
+public:
+    explicit Backend(QObject *parent = 0);
+
+    QString text() const;
+    void showMenu(struct point* p);
+    void set_navit(struct navit* nav);
+    void set_engine(QQmlApplicationEngine* engine);
+
+signals:
+    void displayMenu();
+
+public slots:
+    void list_maps(int cause);
+    void get_pois();
+
+private:
+    struct navit *nav;
+    struct point *p;
+    struct coord_geo g;
+    struct pcoord c;
+    QQmlApplicationEngine* engine;
+
+};
+
+#endif // BACKEND_H
diff --git a/navit/gui/qt5_qml/editor/.gitignore b/navit/gui/qt5_qml/editor/.gitignore
new file mode 100644
index 000000000..fab7372d7
--- /dev/null
+++ b/navit/gui/qt5_qml/editor/.gitignore
@@ -0,0 +1,73 @@
+# This file is used to ignore files which are generated
+# ----------------------------------------------------------------------------
+
+*~
+*.autosave
+*.a
+*.core
+*.moc
+*.o
+*.obj
+*.orig
+*.rej
+*.so
+*.so.*
+*_pch.h.cpp
+*_resource.rc
+*.qm
+.#*
+*.*#
+core
+!core/
+tags
+.DS_Store
+.directory
+*.debug
+Makefile*
+*.prl
+*.app
+moc_*.cpp
+ui_*.h
+qrc_*.cpp
+Thumbs.db
+*.res
+*.rc
+/.qmake.cache
+/.qmake.stash
+
+# qtcreator generated files
+*.pro.user*
+
+# xemacs temporary files
+*.flc
+
+# Vim temporary files
+.*.swp
+
+# Visual Studio generated files
+*.ib_pdb_index
+*.idb
+*.ilk
+*.pdb
+*.sln
+*.suo
+*.vcproj
+*vcproj.*.*.user
+*.ncb
+*.sdf
+*.opensdf
+*.vcxproj
+*vcxproj.*
+
+# MinGW generated files
+*.Debug
+*.Release
+
+# Python byte code
+*.pyc
+
+# Binaries
+# --------
+*.dll
+*.exe
+
diff --git a/navit/gui/qt5_qml/editor/editor.pro b/navit/gui/qt5_qml/editor/editor.pro
new file mode 100644
index 000000000..d0d4cd297
--- /dev/null
+++ b/navit/gui/qt5_qml/editor/editor.pro
@@ -0,0 +1,29 @@
+QT += qml quick
+
+CONFIG += c++11
+
+SOURCES += main.cpp
+
+RESOURCES += qml.qrc
+
+# Additional import path used to resolve QML modules in Qt Creator's code model
+QML_IMPORT_PATH =
+
+# Additional import path used to resolve QML modules just for Qt Quick Designer
+QML_DESIGNER_IMPORT_PATH =
+
+# The following define makes your compiler emit warnings if you use
+# any feature of Qt which as been marked deprecated (the exact warnings
+# depend on your compiler). Please consult the documentation of the
+# deprecated API in order to know how to port your code away from it.
+DEFINES += QT_DEPRECATED_WARNINGS
+
+# You can also make your code fail to compile if you use deprecated APIs.
+# In order to do so, uncomment the following line.
+# You can also select to disable deprecated APIs only up to a certain version of Qt.
+#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
+
+# Default rules for deployment.
+qnx: target.path = /tmp/$${TARGET}/bin
+else: unix:!android: target.path = /opt/$${TARGET}/bin
+!isEmpty(target.path): INSTALLS += target
diff --git a/navit/gui/qt5_qml/editor/main.cpp b/navit/gui/qt5_qml/editor/main.cpp
new file mode 100644
index 000000000..34614e747
--- /dev/null
+++ b/navit/gui/qt5_qml/editor/main.cpp
@@ -0,0 +1,13 @@
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+int main(int argc, char *argv[])
+{
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
+
+    return app.exec();
+}
diff --git a/navit/gui/qt5_qml/editor/main.qml b/navit/gui/qt5_qml/editor/main.qml
new file mode 100644
index 000000000..be7157513
--- /dev/null
+++ b/navit/gui/qt5_qml/editor/main.qml
@@ -0,0 +1,59 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
+
+ApplicationWindow {
+    id: applicationWindow
+    visible: true
+    width: 800
+    height: 480
+    title: qsTr("Hello World 2")
+
+    MouseArea {
+        id: mouseArea
+        z: -1
+        anchors.fill: parent
+        onClicked: {
+            mainMenu.source = "skins/menu.qml"
+            mainMenu.state = 'visible'
+            console.log("showing menu")
+        }
+
+        Image {
+            id: image
+            anchors.left: parent.left
+            anchors.rightMargin: 0
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 0
+            source: "map.png"
+        }
+
+    }
+
+    Loader {
+        id: mainMenu
+        width: parent.width
+        height: parent.height
+        x: parent.width
+        opacity: 0
+
+        states: [
+            State {
+                name: "visible"
+                PropertyChanges {
+                    target: mainMenu
+                    x: 0
+                    opacity: 1
+                }
+            }
+        ]
+        transitions: [
+            Transition {
+                NumberAnimation {
+                    properties: "x,y,opacity";duration: 300
+                }
+            }
+        ]
+    }
+
+}
diff --git a/navit/gui/qt5_qml/editor/map.png b/navit/gui/qt5_qml/editor/map.png
new file mode 100644
index 000000000..998b85eb3
--- /dev/null
+++ b/navit/gui/qt5_qml/editor/map.png
diff --git a/navit/gui/qt5_qml/editor/qml.qrc b/navit/gui/qt5_qml/editor/qml.qrc
new file mode 100644
index 000000000..32df95b82
--- /dev/null
+++ b/navit/gui/qt5_qml/editor/qml.qrc
@@ -0,0 +1,27 @@
+<RCC>
+    <qresource prefix="/">
+        <file>main.qml</file>
+        <file>skins/menu.qml</file>
+        <file>skins/MainMenu.qml</file>
+        <file>skins/navit.svg</file>
+        <file>map.png</file>
+        <file>skins/MainButton.qml</file>
+        <file>skins/settings.qml</file>
+        <file>skins/maps.qml</file>
+        <file>skins/pois.qml</file>
+        <file>skins/icons/appbar.home.variant.svg</file>
+        <file>skins/icons/appbar.rocket.svg</file>
+        <file>skins/icons/appbar.power.svg</file>
+        <file>skins/icons/appbar.cog.svg</file>
+        <file>skins/icons/appbar.layer.svg</file>
+        <file>skins/icons/appbar.layer.delete.svg</file>
+        <file>skins/icons/appbar.map.svg</file>
+        <file>skins/icons/appbar.information.circle.svg</file>
+        <file>skins/icons/appbar.chevron.up.svg</file>
+        <file>skins/icons/appbar.chevron.down.svg</file>
+        <file>skins/icons/appbar.fullscreen.box.svg</file>
+        <file>skins/icons/appbar.transit.car.svg</file>
+        <file>skins/icons/appbar.location.checkin.svg</file>
+        <file>skins/icons/appbar.cogs.svg</file>
+    </qresource>
+</RCC>
diff --git a/navit/gui/qt5_qml/editor/skins b/navit/gui/qt5_qml/editor/skins
new file mode 120000
index 000000000..cdb8b4e07
--- /dev/null
+++ b/navit/gui/qt5_qml/editor/skins
@@ -0,0 +1 @@
+../skins/
\ No newline at end of file
diff --git a/navit/gui/qt5_qml/gui_qt5_qml.cpp b/navit/gui/qt5_qml/gui_qt5_qml.cpp
index a8689843f..14f08bdb4 100644
--- a/navit/gui/qt5_qml/gui_qt5_qml.cpp
+++ b/navit/gui/qt5_qml/gui_qt5_qml.cpp
@@ -19,6 +19,8 @@
 // style with: clang-format -style=WebKit -i *
 
 #include <QQmlApplicationEngine>
+#include <QQmlContext>
+
 #include <glib.h>
 
 extern "C" {
@@ -54,7 +56,6 @@ extern "C" {
 
 #include "layout.h"
 }
-
 struct gui_priv {
     /* navit internal handle */
     struct navit* nav;
@@ -67,7 +68,7 @@ struct gui_priv {
     /* list of callbacks to navit */
     struct callback_list* callbacks;
     /* own callbacks *
-     * TODO: Why do we need them as members? */
+	 * TODO: Why do we need them as members? */
     struct callback* button_cb;
     struct callback* motion_cb;
     struct callback* resize_cb;
@@ -78,7 +79,7 @@ struct gui_priv {
     struct graphics* gra;
     /* root window */
     struct window* win;
-    /* navit root widget dimesnions*/
+    /* navit root widget dimesnions */
     int w;
     int h;
 
@@ -86,11 +87,16 @@ struct gui_priv {
     QQmlApplicationEngine* engine;
     QObject* loader; /* Loader QML component to load our QML parts to the QML engine */
 
+    class Backend* backend;
+
     /* configuration */
     int menu_on_map_click;
 };
 
-static void gui_qt5_qml_button(void* data, int pressed, int button, struct point* p)
+#include "backend.h"
+
+static void
+gui_qt5_qml_button(void* data, int pressed, int button, struct point* p)
 {
     struct gui_priv* gui_priv = (struct gui_priv*)data;
 
@@ -105,10 +111,12 @@ static void gui_qt5_qml_button(void* data, int pressed, int button, struct point
     if (button == 1 && gui_priv->menu_on_map_click) {
         dbg(lvl_debug, "navit wants us to enter menu\n");
         /*TODO: want to emit a signal somewhere? */
+        gui_priv->backend->showMenu(p);
     }
 }
 
-static void gui_qt5_qml_motion(void* data, struct point* p)
+static void
+gui_qt5_qml_motion(void* data, struct point* p)
 {
     struct gui_priv* gui_priv = (struct gui_priv*)data;
     dbg(lvl_debug, "enter (%d, %d)\n", p->x, p->y);
@@ -116,7 +124,8 @@ static void gui_qt5_qml_motion(void* data, struct point* p)
     navit_handle_motion(gui_priv->nav, p);
 }
 
-static void gui_qt5_qml_resize(void* data, int w, int h)
+static void
+gui_qt5_qml_resize(void* data, int w, int h)
 {
     struct gui_priv* gui_priv = (struct gui_priv*)data;
     dbg(lvl_debug, "enter\n");
@@ -124,7 +133,54 @@ static void gui_qt5_qml_resize(void* data, int w, int h)
     navit_handle_resize(gui_priv->nav, w, h);
 }
 
-static int gui_qt5_qml_set_graphics(struct gui_priv* gui_priv, struct graphics* gra)
+static void
+gui_qml_keypress(void* data, char* key)
+{
+    struct gui_priv* this_ = (struct gui_priv*)data;
+    int w, h;
+    struct point p;
+    transform_get_size(navit_get_trans(this_->nav), &w, &h);
+    switch (*key) {
+    case NAVIT_KEY_UP:
+        dbg(lvl_debug, "got KEY_UP\n");
+        p.x = w / 2;
+        p.y = 0;
+        navit_set_center_screen(this_->nav, &p, 1);
+        break;
+    case NAVIT_KEY_DOWN:
+        p.x = w / 2;
+        p.y = h;
+        navit_set_center_screen(this_->nav, &p, 1);
+        break;
+    case NAVIT_KEY_LEFT:
+        p.x = 0;
+        p.y = h / 2;
+        navit_set_center_screen(this_->nav, &p, 1);
+        break;
+    case NAVIT_KEY_RIGHT:
+        p.x = w;
+        p.y = h / 2;
+        navit_set_center_screen(this_->nav, &p, 1);
+        break;
+    case NAVIT_KEY_ZOOM_IN:
+        dbg(lvl_debug, "got ZOOM_IN\n");
+        navit_zoom_in(this_->nav, 2, NULL);
+        break;
+    case NAVIT_KEY_ZOOM_OUT:
+        navit_zoom_out(this_->nav, 2, NULL);
+        break;
+    case NAVIT_KEY_RETURN:
+    case NAVIT_KEY_MENU:
+        p.x = w / 2;
+        p.y = h / 2;
+        break;
+    }
+
+    return;
+}
+
+static int
+gui_qt5_qml_set_graphics(struct gui_priv* gui_priv, struct graphics* gra)
 {
     struct transformation* trans;
     dbg(lvl_debug, "enter\n");
@@ -132,7 +188,7 @@ static int gui_qt5_qml_set_graphics(struct gui_priv* gui_priv, struct graphics*
     /* get navit transition */
     trans = navit_get_trans(gui_priv->nav);
 
-    /* Tell navit to ignore events from graphics. We will hook the ones being supported.*/
+    /* Tell navit to ignore events from graphics. We will hook the ones being supported. */
     navit_ignore_graphics_events(gui_priv->nav, 1);
 
     /* remeber graphics */
@@ -146,7 +202,10 @@ static int gui_qt5_qml_set_graphics(struct gui_priv* gui_priv, struct graphics*
     gui_priv->motion_cb = callback_new_attr_1(callback_cast(gui_qt5_qml_motion), attr_motion, gui_priv);
     graphics_add_callback(gra, gui_priv->motion_cb);
 
-    /* hook resize callback. Will be called imediately!*/
+    gui_priv->keypress_cb = callback_new_attr_1(callback_cast(gui_qml_keypress), attr_keypress, gui_priv);
+    graphics_add_callback(gra, gui_priv->keypress_cb);
+
+    /* hook resize callback. Will be called imediately! */
     gui_priv->resize_cb = callback_new_attr_1(callback_cast(gui_qt5_qml_resize), attr_resize, gui_priv);
     graphics_add_callback(gra, gui_priv->resize_cb);
 
@@ -164,12 +223,19 @@ static int gui_qt5_qml_set_graphics(struct gui_priv* gui_priv, struct graphics*
         return 1;
     }
 
+    gui_priv->backend = new Backend();
+    gui_priv->backend->set_navit(gui_priv->nav);
+    gui_priv->backend->set_engine(gui_priv->engine);
+
+    gui_priv->engine->rootContext()->setContextProperty("backend", gui_priv->backend);
+    // gui_priv->engine->rootContext()->setContextProperty("myModel", QVariant::fromValue(dataList));
+
     /* find the loader component */
     gui_priv->loader = gui_priv->engine->rootObjects().value(0)->findChild<QObject*>("navit_loader");
     if (gui_priv->loader != NULL) {
         dbg(lvl_debug, "navit_loader found\n");
         /* load our root window into the loader component */
-        gui_priv->loader->setProperty("source", "qrc:///gui_qt5_qml.qml");
+        gui_priv->loader->setProperty("source", "qrc:///main.qml");
     }
 
     transform_get_size(trans, &gui_priv->w, &gui_priv->h);
@@ -181,6 +247,7 @@ static int gui_qt5_qml_set_graphics(struct gui_priv* gui_priv, struct graphics*
 
     /* allow navit to draw */
     navit_draw(gui_priv->nav);
+
     return 0;
 }
 
@@ -211,7 +278,8 @@ struct gui_methods gui_qt5_qml_methods = {
     gui_qt5_qml_set_attr,
 };
 
-static struct gui_priv* gui_qt5_qml_new(struct navit* nav, struct gui_methods* meth, struct attr** attrs, struct gui* gui)
+static struct gui_priv*
+gui_qt5_qml_new(struct navit* nav, struct gui_methods* meth, struct attr** attrs, struct gui* gui)
 {
     struct gui_priv* gui_priv;
     struct attr* attr;
diff --git a/navit/gui/qt5_qml/gui_qt5_qml.qrc b/navit/gui/qt5_qml/gui_qt5_qml.qrc
index 51fa8af88..32df95b82 100644
--- a/navit/gui/qt5_qml/gui_qt5_qml.qrc
+++ b/navit/gui/qt5_qml/gui_qt5_qml.qrc
@@ -1,5 +1,27 @@
 <RCC>
     <qresource prefix="/">
-        <file>gui_qt5_qml.qml</file>
+        <file>main.qml</file>
+        <file>skins/menu.qml</file>
+        <file>skins/MainMenu.qml</file>
+        <file>skins/navit.svg</file>
+        <file>map.png</file>
+        <file>skins/MainButton.qml</file>
+        <file>skins/settings.qml</file>
+        <file>skins/maps.qml</file>
+        <file>skins/pois.qml</file>
+        <file>skins/icons/appbar.home.variant.svg</file>
+        <file>skins/icons/appbar.rocket.svg</file>
+        <file>skins/icons/appbar.power.svg</file>
+        <file>skins/icons/appbar.cog.svg</file>
+        <file>skins/icons/appbar.layer.svg</file>
+        <file>skins/icons/appbar.layer.delete.svg</file>
+        <file>skins/icons/appbar.map.svg</file>
+        <file>skins/icons/appbar.information.circle.svg</file>
+        <file>skins/icons/appbar.chevron.up.svg</file>
+        <file>skins/icons/appbar.chevron.down.svg</file>
+        <file>skins/icons/appbar.fullscreen.box.svg</file>
+        <file>skins/icons/appbar.transit.car.svg</file>
+        <file>skins/icons/appbar.location.checkin.svg</file>
+        <file>skins/icons/appbar.cogs.svg</file>
     </qresource>
 </RCC>
diff --git a/navit/gui/qt5_qml/main.qml b/navit/gui/qt5_qml/main.qml
new file mode 100644
index 000000000..6dee2c28b
--- /dev/null
+++ b/navit/gui/qt5_qml/main.qml
@@ -0,0 +1,61 @@
+import com.navit.graphics_qt5 1.0
+import QtQuick 2.2
+// import QtQuick.Controls 1.2
+
+Rectangle {
+    width: 800
+    height: 480
+	Connections {
+		target: backend
+		onDisplayMenu: {
+			mainMenu.source = "skins/menu.qml"
+			mainMenu.state = 'visible'
+			console.log("showing menu")
+		}
+	}
+	color: "black"
+	id: container
+
+	QNavitQuick {
+		id: navit1
+		width: parent.width
+		height: parent.height
+		focus: true
+		opacity: 0;
+		Component.onCompleted: {
+			navit1.setGraphicContext(graphics_qt5_context);
+			navit1.opacity = 1;
+		}
+		Behavior on opacity {
+			NumberAnimation {
+				id: opacityAnimation;duration: 1000;alwaysRunToEnd: true
+			}
+		}
+	}
+
+	Loader {
+		id: mainMenu
+		width: parent.width
+		height: parent.height
+		x: parent.width
+		opacity: 0
+
+		states: [
+			State {
+				name: "visible"
+				PropertyChanges {
+					target: mainMenu
+					x: 0
+					opacity: 1
+				}
+			}
+		]
+		transitions: [
+			Transition {
+				NumberAnimation {
+					properties: "x,y,opacity";duration: 200
+				}
+			}
+		]
+	}
+}
diff --git a/navit/gui/qt5_qml/map.png b/navit/gui/qt5_qml/map.png
new file mode 100644
index 000000000..998b85eb3
--- /dev/null
+++ b/navit/gui/qt5_qml/map.png
diff --git a/navit/gui/qt5_qml/qml_map.cpp b/navit/gui/qt5_qml/qml_map.cpp
new file mode 100644
index 000000000..0f38a4768
--- /dev/null
+++ b/navit/gui/qt5_qml/qml_map.cpp
@@ -0,0 +1,38 @@
+#include "qml_map.h"
+
+MapObject::MapObject(QObject *parent)
+    : QObject(parent)
+{
+}
+
+MapObject::MapObject(const QString &name, const bool &active, QObject *parent)
+    : QObject(parent), m_name(name), m_active(active)
+{
+}
+
+QString MapObject::name() const
+{
+    return m_name;
+}
+
+void MapObject::setName(const QString &name)
+{
+    if (name != m_name) {
+        m_name = name;
+        emit nameChanged();
+    }
+}
+
+bool MapObject::active() const
+{
+    return m_active;
+}
+
+void MapObject::setActive(const bool &active)
+{
+    if (active != m_active) {
+        m_active = active;
+        emit activeChanged();
+    }
+}
+
diff --git a/navit/gui/qt5_qml/qml_map.h b/navit/gui/qt5_qml/qml_map.h
new file mode 100644
index 000000000..55046c712
--- /dev/null
+++ b/navit/gui/qt5_qml/qml_map.h
@@ -0,0 +1,32 @@
+#ifndef MAPOBJECT_H
+#define MAPOBJECT_H
+
+#include <QObject>
+
+class MapObject : public QObject
+{
+    Q_OBJECT
+
+    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
+    Q_PROPERTY(bool active READ active WRITE setActive NOTIFY activeChanged)
+
+public:
+    MapObject(QObject *parent=0);
+    MapObject(const QString &name, const bool &active, QObject *parent=0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+    bool active() const;
+    void setActive(const bool &active);
+
+signals:
+    void nameChanged();
+    void activeChanged();
+
+private:
+    QString m_name;
+    bool m_active;
+};
+
+#endif // MAPOBJECT_H
diff --git a/navit/gui/qt5_qml/qml_poi.cpp b/navit/gui/qt5_qml/qml_poi.cpp
new file mode 100644
index 000000000..0036739fc
--- /dev/null
+++ b/navit/gui/qt5_qml/qml_poi.cpp
@@ -0,0 +1,55 @@
+#include <QDebug>
+#include "qml_poi.h"
+
+PoiObject::PoiObject(QObject *parent)
+    : QObject(parent)
+{
+}
+
+PoiObject::PoiObject(
+    const QString &name,
+    const bool &active,
+    const int idist,
+    QObject *parent)
+    : QObject(parent), m_name(name), m_active(active)
+{
+}
+
+QString PoiObject::name() const
+{
+    return m_name;
+}
+
+void PoiObject::setName(const QString &name)
+{
+    if (name != m_name) {
+        m_name = name;
+        emit nameChanged();
+    }
+}
+
+bool PoiObject::active() const
+{
+    return m_active;
+}
+
+void PoiObject::setActive(const bool &active)
+{
+    if (active != m_active) {
+        m_active = active;
+        emit activeChanged();
+    }
+}
+
+int PoiObject::distance() const
+{
+    return m_distance;
+}
+
+void PoiObject::setDistance(const int distance)
+{
+    if (distance != m_distance) {
+        m_distance = distance;
+        emit distanceChanged();
+    }
+}
diff --git a/navit/gui/qt5_qml/qml_poi.h b/navit/gui/qt5_qml/qml_poi.h
new file mode 100644
index 000000000..f890b0cd1
--- /dev/null
+++ b/navit/gui/qt5_qml/qml_poi.h
@@ -0,0 +1,39 @@
+#ifndef POIOBJECT_H
+#define POIOBJECT_H
+
+#include <QObject>
+
+class PoiObject : public QObject
+{
+    Q_OBJECT
+
+    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)
+    Q_PROPERTY(bool active READ active WRITE setActive NOTIFY activeChanged)
+    Q_PROPERTY(int distance READ distance WRITE setDistance NOTIFY distanceChanged)
+
+public:
+    PoiObject(QObject *parent=0);
+    PoiObject(const QString &name, const bool &active, const int distance, QObject *parent=0);
+
+    QString name() const;
+    void setName(const QString &name);
+
+    bool active() const;
+    void setActive(const bool &active);
+
+    int distance() const;
+    void setDistance(const int distance);
+
+signals:
+    void nameChanged();
+    void activeChanged();
+    void distanceChanged();
+
+private:
+    QString m_name;
+    bool m_active;
+    int m_distance;
+};
+
+#endif // POIOBJECT_H
+
diff --git a/navit/gui/qt5_qml/skins/MainButton.qml b/navit/gui/qt5_qml/skins/MainButton.qml
new file mode 100644
index 000000000..e189ad9a2
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/MainButton.qml
@@ -0,0 +1,71 @@
+import QtQuick 2.2
+import QtQuick.Layouts 1.0
+
+Rectangle {
+    id: container
+
+    signal clicked
+    property string text: "Button"
+    property string icon: "icons/appbar.home.variant.svg"
+
+    smooth: true;
+    width: 200;
+    height: 80
+    color: "#35322f"
+    radius: 2
+    border.width: 1
+
+    MouseArea { id: mr; anchors.fill: parent; onClicked: container.clicked() }
+
+    Text {
+        id: txtItem;
+        color: "#ffffff"
+        text: container.text
+        font.pointSize: 18
+        anchors.left: rectangle.right
+        anchors.leftMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+        z: 1
+    }
+
+    Rectangle {
+        id: rectangle
+        width: container.height
+        height: container.height
+        color: "#35322f"
+        radius: 2
+        border.width: 1
+        anchors.verticalCenter: parent.verticalCenter
+
+        Image {
+            id: imgItem;
+            width: parent.width;
+            height: parent.height;
+            source: container.icon
+            smooth: true
+            scale: 1
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+//            anchors.leftMargin: 8
+            sourceSize.width: parent.width
+            sourceSize.height: parent.height
+        }
+    }
+
+    states: [
+        State {
+            name: "Pressed"; when: mr.pressed == true
+            PropertyChanges {
+                target: txtItem;
+                opacity: 0.6;
+                color: "#84ca43";
+            }
+        }
+    ]
+
+    transitions: Transition {
+        NumberAnimation { properties: "scale"; easing.type: "OutExpo"; duration: 200 }
+    }
+
+}
+
diff --git a/navit/gui/qt5_qml/skins/MainMenu.qml b/navit/gui/qt5_qml/skins/MainMenu.qml
new file mode 100644
index 000000000..5d2a2b34c
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/MainMenu.qml
@@ -0,0 +1,55 @@
+import QtQuick 2.2
+import QtQuick.Layouts 1.0
+
+GridLayout {
+    id: gridLayout
+    anchors.fill: parent
+    columnSpacing: 4
+    rowSpacing: 4
+    rows: 3
+    columns: 2
+
+    MainButton {
+        text: "Where To?"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.location.checkin.svg"
+    }
+
+    MainButton {
+        text: "Around Me"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.information.circle.svg"
+        onClicked: {
+            menucontent.source = "pois.qml"
+        }
+    }
+
+    MainButton {
+        text: "Go Home"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+    }
+
+
+    MainButton {
+        text: "Settings"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.cog.svg"
+        onClicked: {
+            menucontent.source = "settings.qml"
+            console.log("showing settings")
+        }
+    }
+
+    MainButton {
+        text: "Quit"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.power.svg"
+        onClicked: Qt.quit()
+    }
+
+}
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.chevron.down.svg b/navit/gui/qt5_qml/skins/icons/appbar.chevron.down.svg
new file mode 100644
index 000000000..3917fc7cd
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.chevron.down.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 37.8516,39.5833L 52.1016,24.9375L 52.1016,35.2292L 37.8516,50.2708L 23.6016,35.2292L 23.6016,24.9375L 37.8516,39.5833 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.chevron.up.svg b/navit/gui/qt5_qml/skins/icons/appbar.chevron.up.svg
new file mode 100644
index 000000000..b737d9773
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.chevron.up.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 37.8516,35.625L 34.6849,38.7917L 23.6016,50.2708L 23.6016,39.9792L 37.8516,24.9375L 52.1016,39.9792L 52.1016,50.2708L 41.0182,38.7917L 37.8516,35.625 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.cog.svg b/navit/gui/qt5_qml/skins/icons/appbar.cog.svg
new file mode 100644
index 000000000..4ef1ef8c2
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.cog.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 27.5314,21.8628L 33.0126,19.4224L 34.7616,23.3507C 36.6693,22.9269 38.6044,22.8903 40.4668,23.2026L 42.0083,19.1868L 47.6098,21.337L 46.0683,25.3528C 47.6612,26.3669 49.0747,27.6889 50.2088,29.2803L 54.1371,27.5313L 56.5776,33.0126L 52.6493,34.7616C 53.0731,36.6693 53.1097,38.6043 52.7974,40.4668L 56.8131,42.0083L 54.6629,47.6097L 50.6472,46.0683C 49.6331,47.6613 48.3111,49.0748 46.7197,50.2089L 48.4686,54.1372L 42.9874,56.5776L 41.2384,52.6493C 39.3307,53.0731 37.3957,53.1097 35.5333,52.7974L 33.9918,56.8131L 28.3903,54.6629L 29.9318,50.6472C 28.3388,49.6331 26.9252,48.3111 25.7911,46.7196L 21.8628,48.4686L 19.4224,42.9873L 23.3507,41.2383C 22.9269,39.3307 22.8903,37.3957 23.2026,35.5332L 19.1869,33.9918L 21.3371,28.3903L 25.3528,29.9318C 26.3669,28.3388 27.6889,26.9252 29.2804,25.7911L 27.5314,21.8628 Z M 34.3394,29.7781C 29.7985,31.7998 27.7564,37.1198 29.7781,41.6606C 31.7998,46.2015 37.1198,48.2436 41.6606,46.2219C 46.2015,44.2002 48.2436,38.8802 46.2219,34.3394C 44.2002,29.7985 38.8802,27.7564 34.3394,29.7781 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.cogs.svg b/navit/gui/qt5_qml/skins/icons/appbar.cogs.svg
new file mode 100644
index 000000000..e3fdaa4ce
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.cogs.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 32.6227,68.9728C 33.1208,70.2446 33.7077,71.4719 34.3757,72.6471C 35.567,72.7702 36.7761,72.8333 38,72.8333C 40.6447,72.8333 43.2205,72.5386 45.6965,71.9802C 42.2807,68.5449 40.1698,63.8107 40.1698,58.5835C 40.1698,48.0901 48.6764,39.5835 59.1698,39.5835C 64.2047,39.5835 68.7822,41.5419 72.182,44.7385C 72.6094,42.5584 72.8333,40.3053 72.8333,38C 72.8333,36.442 72.731,34.908 72.5328,33.4041C 70.4772,32.3109 68.2718,31.4621 65.9554,30.8963L 65.6219,22.7367C 63.5664,22.3692 61.4511,22.1741 59.2916,22.1671L 57.491,30.1322C 54.2845,30.3184 51.2204,31.0348 48.3848,32.1949L 43.318,25.7887C 41.3995,26.7177 39.5749,27.8102 37.8622,29.0479L 41.0883,36.5527C 38.6742,38.5364 36.5919,40.9091 34.9373,43.575L 27.0703,41.3697C 26.073,43.2256 25.2319,45.178 24.5646,47.2093L 31.5867,51.385C 30.9883,53.6844 30.6698,56.0968 30.6698,58.5835L 30.746,60.6839L 23.0854,63.5239C 23.3743,65.6539 23.8474,67.7255 24.4881,69.7219L 32.6227,68.9728 Z M 27.0669,37.1755L 34.9338,39.3807C 35.9312,37.5248 36.7723,35.5724 37.4395,33.5412L 30.4175,29.3654C 31.0159,27.066 31.3344,24.6537 31.3344,22.1669L 31.2581,20.0665L 38.9187,17.2265C 38.6299,15.0965 38.1568,13.0249 37.5161,11.0285L 29.3815,11.7776C 28.4787,9.47258 27.2844,7.31377 25.8439,5.34655C 22.7943,6.48232 19.9467,8.03307 17.3698,9.93015C 20.1557,13.2359 21.8344,17.5054 21.8344,22.1669C 21.8344,32.5019 13.5826,40.9096 3.30816,41.1611C 3.60321,44.4411 4.35293,47.59 5.49381,50.5444C 8.34489,50.2806 11.0742,49.5968 13.6194,48.5555L 18.6861,54.9617C 20.6046,54.0327 22.4293,52.9403 24.142,51.7025L 20.9158,44.1977C 23.3299,42.2141 25.4123,39.8414 27.0669,37.1755 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.fullscreen.box.svg b/navit/gui/qt5_qml/skins/icons/appbar.fullscreen.box.svg
new file mode 100644
index 000000000..13e6840e5
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.fullscreen.box.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 19,57L 19,19L 57,19L 57,57L 19,57 Z M 24,29L 47,29L 47,52L 52,52L 52,24L 24,24L 24,29 Z M 24,34L 24,52L 42,52L 42,34L 24,34 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.home.variant.svg b/navit/gui/qt5_qml/skins/icons/appbar.home.variant.svg
new file mode 100644
index 000000000..ea951fd19
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.home.variant.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76.0106" height="76.0106" viewBox="0 0 76.01 76.01" enable-background="new 0 0 76.01 76.01" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 24.0033,56.0078L 24.0033,38.0053L 22.0031,40.0056L 19.0027,35.0049L 38.0053,20.0028L 45.0063,25.5299L 45.0063,21.753L 49.0068,21.0029L 49.0068,28.6882L 57.008,35.0049L 54.0075,40.0056L 52.0073,38.0053L 52.0073,56.0078L 24.0033,56.0078 Z M 38.0053,26.9204L 27.0038,36.005L 27.0038,53.0074L 38.0045,53.0075L 38.0045,41.0061L 46.0058,41.0061L 46.0059,53.0075L 49.0068,53.0074L 49.0068,36.005L 38.0053,26.9204 Z M 30.004,41.0057L 35.0049,41.0057L 35.0049,47.0066L 30.004,47.0066L 30.004,41.0057 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.information.circle.svg b/navit/gui/qt5_qml/skins/icons/appbar.information.circle.svg
new file mode 100644
index 000000000..031bd37f5
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.information.circle.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 38,19C 48.4934,19 57,27.5066 57,38C 57,48.4934 48.4934,57 38,57C 27.5066,57 19,48.4934 19,38C 19,27.5066 27.5066,19 38,19 Z M 33.25,33.25L 33.25,36.4167L 36.4166,36.4167L 36.4166,47.5L 33.25,47.5L 33.25,50.6667L 44.3333,50.6667L 44.3333,47.5L 41.1666,47.5L 41.1666,36.4167L 41.1666,33.25L 33.25,33.25 Z M 38.7917,25.3333C 37.48,25.3333 36.4167,26.3967 36.4167,27.7083C 36.4167,29.02 37.48,30.0833 38.7917,30.0833C 40.1033,30.0833 41.1667,29.02 41.1667,27.7083C 41.1667,26.3967 40.1033,25.3333 38.7917,25.3333 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.layer.delete.svg b/navit/gui/qt5_qml/skins/icons/appbar.layer.delete.svg
new file mode 100644
index 000000000..ddbeb21ca
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.layer.delete.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76.0106" height="76.0106" viewBox="0 0 76.01 76.01" enable-background="new 0 0 76.01 76.01" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 18.5088,44.0374L 21.8676,40.6786L 27.4655,46.2765L 33.0634,40.6786L 36.4222,44.0374L 30.8243,49.6353L 36.4222,55.2332L 33.0634,58.592L 27.4655,52.994L 21.8676,58.592L 18.5088,55.2332L 24.1068,49.6353L 18.5088,44.0374 Z M 57.0079,38.0053L 38.0053,47.5066L 36.7482,46.8781L 39.5889,44.0374L 35.2559,39.7977L 38.0053,41.1724L 50.6737,34.8382L 57.0079,38.0053 Z M 19.0026,38.0053L 25.3369,34.8382L 32.3326,38.3361L 29.8968,40.7719L 28.1098,42.5589L 25.7193,41.3636L 21.8676,37.6052L 20.6459,38.8269L 19.0026,38.0053 Z M 38.0053,19.0027L 57.0079,28.504L 38.0053,38.0053L 19.0026,28.504L 38.0053,19.0027 Z M 57.0079,47.5066L 38.0053,57.008L 37.8778,56.9442L 39.5889,55.2332L 33.9909,49.6353L 34.6367,48.9895L 38.0053,50.6738L 50.6737,44.3395L 57.0079,47.5066 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.layer.svg b/navit/gui/qt5_qml/skins/icons/appbar.layer.svg
new file mode 100644
index 000000000..9eb28235c
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.layer.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76.0106" height="76.0106" viewBox="0 0 76.01 76.01" enable-background="new 0 0 76.01 76.01" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 57.0079,38.0053L 38.0053,47.5066L 19.0027,38.0053L 25.3369,34.8382L 38.0053,41.1724L 50.6737,34.8382L 57.0079,38.0053 Z M 38.0053,19.0027L 57.0079,28.504L 38.0053,38.0053L 19.0026,28.504L 38.0053,19.0027 Z M 57.0079,47.5066L 38.0053,57.008L 19.0026,47.5066L 25.3369,44.3395L 38.0053,50.6737L 50.6737,44.3395L 57.0079,47.5066 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.location.checkin.svg b/navit/gui/qt5_qml/skins/icons/appbar.location.checkin.svg
new file mode 100644
index 000000000..3b21754c6
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.location.checkin.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-linejoin="round" d="M 38,19C 42.9706,19 47,23.0294 47,28C 47,30.5642 45.9276,32.878 38,49C 30.0724,32.878 29,30.5642 29,28C 29,23.0294 33.0294,19 38,19 Z M 38,24C 35.7909,24 34,25.7909 34,28C 34,30.2092 35.7909,32 38,32C 40.2091,32 42,30.2092 42,28C 42,25.7909 40.2091,24 38,24 Z M 19,57L 24,42L 31.5,42L 33.5,46L 27.6641,46L 25.3324,53L 50.6676,53L 48.3359,46L 42.5,46L 44.5,42L 52,42L 57,57L 19,57 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.map.svg b/navit/gui/qt5_qml/skins/icons/appbar.map.svg
new file mode 100644
index 000000000..241f71e59
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.map.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 27.7083,23.75L 38.7917,26.9167L 48.2917,20.5833L 62,24L 62,51L 48.2917,47.5L 38.7917,53.8333L 27.7083,50.6667L 16,55.5L 16,28.5L 27.7083,23.75 Z M 27,46.25L 27,29L 20,31.75L 20,49L 27,46.25 Z M 49,25.5L 49,42.75L 58,45.25L 58,28L 49,25.5 Z M 39,31.5L 39,49L 48,43L 48,25.5L 39,31.5 Z M 28,28.75L 28,46L 38,48.5L 38,31.75L 28,28.75 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.power.svg b/navit/gui/qt5_qml/skins/icons/appbar.power.svg
new file mode 100644
index 000000000..d3f865c0d
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.power.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 36.4167,36.4167L 36.4167,17.4167L 41.1667,17.4167L 41.1667,36.4167L 36.4167,36.4167 Z M 57,39.5833C 57,50.0767 48.4934,58.5833 38,58.5833C 27.5066,58.5833 19,50.0767 19,39.5833C 19,30.7301 25.0552,23.2911 33.25,21.1819L 33.25,27.8374C 28.6079,29.7165 25.3333,34.2675 25.3333,39.5833C 25.3333,46.5789 31.0044,52.25 38,52.25C 44.9956,52.25 50.6667,46.5789 50.6667,39.5833C 50.6667,34.8949 48.1194,30.8014 44.3333,28.6113L 44.3333,21.6645C 51.7129,24.2728 57,31.3106 57,39.5833 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.rocket.svg b/navit/gui/qt5_qml/skins/icons/appbar.rocket.svg
new file mode 100644
index 000000000..a8c5c273a
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.rocket.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 38,19C 39.4823,20.6344 43,26.1259 43,41L 47,46L 47,55L 43,50L 33,50L 29,55L 29,46L 33,41C 33,26.1259 36.0177,20.6344 38,19 Z M 38,57.5L 35,51L 41,51L 38,57.5 Z M 38,27L 36.1552,27.4612L 35.6203,30.5949L 38,30L 40.2918,30.573L 39.6953,27.4238L 38,27 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/icons/appbar.transit.car.svg b/navit/gui/qt5_qml/skins/icons/appbar.transit.car.svg
new file mode 100644
index 000000000..8ea1a7c5d
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/icons/appbar.transit.car.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="76" height="76" viewBox="0 0 76.00 76.00" enable-background="new 0 0 76.00 76.00" xml:space="preserve">
+	<path fill="#ffffff" fill-opacity="1" stroke-width="0.2" stroke-linejoin="round" d="M 17.4167,50.6667C 16.5422,50.6667 15.8333,49.9578 15.8333,49.0833L 15.8333,39.5834C 15.8333,37.0877 17.2768,34.9292 19.3745,33.8972L 25.3333,19L 26.9167,19L 30.0833,19L 45.9167,19L 49.0833,19L 50.6667,19L 56.6255,33.8972C 58.7231,34.9292 60.1666,37.0877 60.1666,39.5834L 60.1667,49.0833C 60.1667,49.9578 59.4578,50.6667 58.5833,50.6667L 57,50.6667L 57,53.8333C 57,55.5822 55.5822,57 53.8333,57C 52.0844,57 50.6667,55.5822 50.6667,53.8333L 50.6667,50.6667L 25.3333,50.6667L 25.3333,53.8333C 25.3333,55.5822 23.9156,57 22.1667,57C 20.4178,57 19,55.5822 19,53.8333L 19,50.6667L 17.4167,50.6667 Z M 24.3833,33.25L 51.6166,33.25L 47.8166,23.75L 28.1833,23.75L 24.3833,33.25 Z M 24.1458,36.0209C 22.3969,36.0209 20.5833,37.8344 20.5833,39.5833C 20.5833,41.3322 22.3969,43.1458 24.1458,43.1458C 25.8947,43.1458 27.7083,41.3323 27.7083,39.5834C 27.7083,37.8345 25.8947,36.0209 24.1458,36.0209 Z M 51.8542,36.0208C 50.1053,36.0208 48.2917,37.8344 48.2917,39.5833C 48.2917,41.3322 50.1053,43.1458 51.8542,43.1458C 53.6031,43.1458 55.4167,41.3322 55.4167,39.5833C 55.4167,37.8344 53.6031,36.0208 51.8542,36.0208 Z "/>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/maps.qml b/navit/gui/qt5_qml/skins/maps.qml
new file mode 100644
index 000000000..6e41891d6
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/maps.qml
@@ -0,0 +1,36 @@
+import QtQuick 2.0
+
+ListView {
+    model: maps
+    delegate: Rectangle {
+        height: 64
+        color: "#ff0000"
+        radius: 2
+        border.width: 1
+
+        Image {
+            id: image1
+            height: parent.height - 4;
+            source : active ? "icons/appbar.layer.svg" : "icons/appbar.layer.delete.svg"
+            opacity: active ? 1 : 0.4
+        }
+
+        Text {
+            text: name
+            color: "#ffffff"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: image1.right
+            anchors.leftMargin: 8
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            hoverEnabled: true
+            onEntered: {
+                // backend.list_maps(1)
+            }
+        }
+    }
+
+    Component.onCompleted: backend.list_maps(0)
+}
diff --git a/navit/gui/qt5_qml/skins/menu.qml b/navit/gui/qt5_qml/skins/menu.qml
new file mode 100644
index 000000000..540a16032
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/menu.qml
@@ -0,0 +1,51 @@
+import QtQuick.Layouts 1.0
+import QtQuick 2.2
+
+Rectangle {
+    id: rectangle
+    visible: true
+    height: 300
+    color: "#000000"
+
+    Rectangle {
+        id: rectangle1
+        x: 0
+        y: 200
+        height: 300
+        color: "#1e1b18"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        
+        Loader {
+            id: menucontent
+            width: parent.width
+            height: parent.height
+            Component.onCompleted: menucontent.source = "MainMenu.qml"
+        }
+
+    }
+
+    MainButton {
+        id: mainButton3
+        width: 260
+        height: 80
+        radius: 1
+        text: "Map"
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        icon: "icons/appbar.map.svg"
+        onClicked: {
+            mainMenu.state = ''
+            mainMenu.source = ""
+        }
+
+    }
+
+}
diff --git a/navit/gui/qt5_qml/skins/navit.svg b/navit/gui/qt5_qml/skins/navit.svg
new file mode 100644
index 000000000..591d9ee57
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/navit.svg
@@ -0,0 +1,393 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="22"
+   height="22"
+   id="svg2"
+   sodipodi:version="0.32"
+   inkscape:version="0.48.4 r9939"
+   version="1.0"
+   sodipodi:docname="navit.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:export-filename="/home/jeff/projets/navit/navit.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3376">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop3378" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop3380" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3365">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.61904764;"
+         offset="0"
+         id="stop3367" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop3369" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient3328">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop3330" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop3332" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3320">
+      <stop
+         style="stop-color:#116cbf;stop-opacity:1;"
+         offset="0"
+         id="stop3322" />
+      <stop
+         id="stop3354"
+         offset="0.08"
+         style="stop-color:#116cbf;stop-opacity:1;" />
+      <stop
+         id="stop3352"
+         offset="0.4893617"
+         style="stop-color:#1a6cb6;stop-opacity:1;" />
+      <stop
+         style="stop-color:#329eff;stop-opacity:1;"
+         offset="1"
+         id="stop3324" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3308">
+      <stop
+         style="stop-color:#062643;stop-opacity:1;"
+         offset="0"
+         id="stop3310" />
+      <stop
+         style="stop-color:#0d5799;stop-opacity:1;"
+         offset="1"
+         id="stop3312" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3235">
+      <stop
+         style="stop-color:#c17d11;stop-opacity:1;"
+         offset="0"
+         id="stop3237" />
+      <stop
+         style="stop-color:#e9cb14;stop-opacity:1;"
+         offset="1"
+         id="stop3239" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3227">
+      <stop
+         style="stop-color:#76650c;stop-opacity:1;"
+         offset="0"
+         id="stop3229" />
+      <stop
+         style="stop-color:#76650c;stop-opacity:0;"
+         offset="1"
+         id="stop3231" />
+    </linearGradient>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="15.556349 : 133.02972 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective10" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3235"
+       id="linearGradient3241"
+       x1="64"
+       y1="115.11359"
+       x2="64"
+       y2="17.40102"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.15819674,0,0,0.15819674,1.9928719,0.69315656)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3308"
+       id="linearGradient3314"
+       x1="-7.7781754"
+       y1="4.2563133"
+       x2="43.133514"
+       y2="4.2563133"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3320"
+       id="linearGradient3326"
+       x1="7.6363606"
+       y1="87.731171"
+       x2="58.391151"
+       y2="38.450466"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.15669503,0.02174581,-0.02174581,0.15669503,4.357122,0.76802046)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3227"
+       id="linearGradient3340"
+       gradientUnits="userSpaceOnUse"
+       x1="63"
+       y1="106.75"
+       x2="92"
+       y2="29.25" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3328"
+       id="linearGradient3342"
+       gradientUnits="userSpaceOnUse"
+       x1="71"
+       y1="69.5"
+       x2="87.25"
+       y2="33.5" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3365"
+       id="linearGradient3371"
+       x1="-1.5"
+       y1="86.5"
+       x2="73.5"
+       y2="40"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.15819674,0,0,0.15819674,1.9928719,0.69315656)" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3376"
+       id="linearGradient3382"
+       x1="62.147858"
+       y1="67.453751"
+       x2="11.016594"
+       y2="24.242672"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       inkscape:collect="always"
+       id="filter3424">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.90523025"
+         id="feGaussianBlur3426" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.313708"
+     inkscape:cx="16.894586"
+     inkscape:cy="27.303943"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer2"
+     showgrid="false"
+     inkscape:window-width="1280"
+     inkscape:window-height="948"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     showborder="true"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline">
+    <rect
+       style="fill:url(#linearGradient3241);fill-opacity:1;stroke:#43350f;stroke-width:0.79098374;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="rect2403"
+       width="18.792814"
+       height="15.381022"
+       x="2.7210562"
+       y="3.1272359"
+       rx="1.5819675"
+       ry="1.5819675" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="lignes"
+     style="display:inline">
+    <g
+       id="g3336"
+       transform="matrix(0.15819674,0,0,0.15819674,5.1568068,0.69315656)">
+      <path
+         sodipodi:nodetypes="cczzczc"
+         id="path3223"
+         d="m 92,27 8,-4 c 0,0 -32.803776,29.787015 -21.5,41.25 11.303776,11.462985 5.61873,46.35859 -6,46.25 L 19,110 C 39.916667,101.41667 73.874441,83.136394 61,66.25 48.125559,49.363606 92,27 92,27 z"
+         style="fill:url(#linearGradient3340);fill-opacity:1;stroke:none"
+         inkscape:connector-curvature="0" />
+      <path
+         sodipodi:nodetypes="czc"
+         id="path3244"
+         d="M 49.5,110 C 60.666667,104.16667 83.256846,86.358298 72,70.5 60.743153,54.641702 77.5,38.5 92.5,29"
+         style="fill:none;stroke:url(#linearGradient3342);stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:9, 9;stroke-dashoffset:0"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer4"
+     inkscape:label="bulle"
+     style="display:none">
+    <path
+       sodipodi:type="arc"
+       style="fill:url(#linearGradient3314);fill-opacity:1;stroke:#1f3157;stroke-width:5.30526352;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="path3305"
+       sodipodi:cx="17.67767"
+       sodipodi:cy="4.2563133"
+       sodipodi:rx="25.455845"
+       sodipodi:ry="25.455845"
+       d="m 43.133514,4.2563133 a 25.455845,25.455845 0 1 1 -50.9116894,0 25.455845,25.455845 0 1 1 50.9116894,0 z"
+       transform="matrix(1.3194444,0,0,1.3194444,18.394598,29.399489)" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="rose des vents"
+     style="display:none">
+    <g
+       id="g3256"
+       transform="matrix(0.7071068,0.7071068,-0.7071068,0.7071068,36.903806,-19.093669)"
+       style="opacity:0.5">
+      <path
+         transform="translate(67.5,7)"
+         d="m -25.999999,61.185085 -5.673657,-27.511429 -27.511429,-5.673655 27.511429,-5.673657 5.673655,-27.5114293 5.673657,27.5114293 27.5114293,5.673655 -27.5114293,5.673657 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="2.3561945"
+         sodipodi:arg1="1.5707963"
+         sodipodi:r2="8.0237608"
+         sodipodi:r1="33.185085"
+         sodipodi:cy="28"
+         sodipodi:cx="-26"
+         sodipodi:sides="4"
+         id="path3258"
+         style="fill:#167bd9;fill-opacity:1;stroke:none"
+         sodipodi:type="star" />
+      <path
+         transform="translate(67.5,7)"
+         d="m -25.999999,61.185085 6.826343,-33.011429 -40.011429,-0.173655 33.011429,6.826343 0.173655,-40.0114293 -6.826343,33.0114293 40.0114293,0.173655 -33.0114293,-6.826343 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="0.025433549"
+         sodipodi:arg1="1.5707963"
+         sodipodi:r2="6.8285527"
+         sodipodi:r1="33.185085"
+         sodipodi:cy="28"
+         sodipodi:cx="-26"
+         sodipodi:sides="4"
+         id="path3260"
+         style="fill:#c3dff9;fill-opacity:1;stroke:none"
+         sodipodi:type="star" />
+    </g>
+    <g
+       id="g3252">
+      <path
+         transform="translate(67.5,7)"
+         d="m -25.999999,61.185085 -5.673657,-27.511429 -27.511429,-5.673655 27.511429,-5.673657 5.673655,-27.5114293 5.673657,27.5114293 27.5114293,5.673655 -27.5114293,5.673657 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="2.3561945"
+         sodipodi:arg1="1.5707963"
+         sodipodi:r2="8.0237608"
+         sodipodi:r1="33.185085"
+         sodipodi:cy="28"
+         sodipodi:cx="-26"
+         sodipodi:sides="4"
+         id="path3248"
+         style="fill:#167bd9;fill-opacity:1;stroke:none"
+         sodipodi:type="star" />
+      <path
+         transform="translate(67.5,7)"
+         d="m -25.999999,61.185085 6.826343,-33.011429 -40.011429,-0.173655 33.011429,6.826343 0.173655,-40.0114293 -6.826343,33.0114293 40.0114293,0.173655 -33.0114293,-6.826343 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="false"
+         sodipodi:arg2="0.025433549"
+         sodipodi:arg1="1.5707963"
+         sodipodi:r2="6.8285527"
+         sodipodi:r1="33.185085"
+         sodipodi:cy="28"
+         sodipodi:cx="-26"
+         sodipodi:sides="4"
+         id="path3250"
+         style="fill:#c3dff9;fill-opacity:1;stroke:none"
+         sodipodi:type="star" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer6"
+     inkscape:label="ondes"
+     style="display:inline">
+    <path
+       sodipodi:type="spiral"
+       style="fill:none;stroke:url(#linearGradient3382);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter3424)"
+       id="path3374"
+       sodipodi:cx="14.142136"
+       sodipodi:cy="19.812662"
+       sodipodi:expansion="1"
+       sodipodi:revolution="7"
+       sodipodi:radius="54.341515"
+       sodipodi:argument="-17.841497"
+       sodipodi:t0="0"
+       d="m 14.142136,19.812662 c 0.622964,0.987625 -1.02395,1.327003 -1.641498,1.035408 -1.673515,-0.790205 -1.44576,-3.111369 -0.429317,-4.318403 1.818177,-2.1591 5.16668,-1.702115 6.995307,0.176773 2.683583,2.757343 1.972982,7.252372 -0.782863,9.672211 C 14.610657,29.603916 8.9345884,28.6291 5.934649,24.989699 2.1595315,20.409885 3.4032379,13.538342 7.9296913,9.9636782 13.411833,5.6342815 21.486273,7.1492634 25.632617,12.56481 30.51894,18.946845 28.731319,28.228517 22.425395,32.944641 15.144955,38.389593 4.6532955,36.328487 -0.63134024,29.131329 -6.6360792,20.95346 -4.300928,9.2499464 3.7880618,3.3976889 12.862686,-3.1676594 25.779376,-0.55807441 32.198606,8.4231809 39.325168,18.394077 36.440869,32.524914 26.567024,39.51063 15.700216,47.198863 0.35449515,44.039641 -7.1973295,33.272958 -15.447588,21.510513 -12.013284,4.9493376 -0.35356778,-3.1683003 12.304301,-11.980865 30.081381,-8.2713528 38.764595,4.2815513 48.13969,17.834674 44.154872,36.828022 30.708654,46.076619 16.260416,56.014427 -3.9494981,51.754222 -13.763319,37.414588 -24.263992,22.071347 -19.728335,0.64462208 -4.4951973,-9.7342896 11.742953,-20.797954 34.386694,-15.98679 45.330585,0.1399218 56.957348,17.272902 51.870631,41.133834 34.850283,52.642608 16.822539,64.832562 -8.2557318,59.470254 -20.329308,41.556217 -33.082529,22.633765 -27.444596,-3.6619713 -8.6368269,-16.300279 11.180283,-29.616836 38.693597,-23.70325 51.896574,-4.0017077 65.776525,16.710018 59.587261,45.441005 38.991913,59.208598 17.385609,73.651995 -12.563136,67.187032 -26.895297,45.697847 -41.902187,23.196997 -35.161504,-7.9695799 -12.778456,-22.866268 10.616911,-38.436689 43.001386,-31.420272 58.462563,-8.1433373 74.596552,16.146521 67.304385,49.748954 43.133542,65.774587"
+       transform="matrix(-0.15819674,0,0,0.15819674,22.262049,1.7055356)" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer5"
+     inkscape:label="flèche"
+     style="display:inline">
+    <path
+       style="fill:url(#linearGradient3326);fill-opacity:1;stroke:#1f3157;stroke-width:0.47459021;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       d="M 5.6166617,6.6702162 C 8.5498903,6.3591404 11.366732,6.8627725 14.089084,8.0278339 L 12.323485,12.25995 11.465549,10.2747 C 9.1936105,11.38659 7.6712925,13.621104 6.8096897,16.845097 L 0.57820215,12.334567 C 2.318135,10.026025 5.9650066,8.1110997 8.889601,7.8565979 L 5.6166617,6.6702162 z"
+       id="rect3317"
+       sodipodi:nodetypes="cccccccc"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:url(#linearGradient3371);fill-opacity:1;stroke:none"
+       d="M 8.2416433,7.021026 C 9.8257327,6.8500961 11.315051,7.2477939 12.75025,7.9702064 8.920071,9.4835882 6.1923078,11.598289 4.6822166,14.377175 L 1.7555768,12.162421 C 3.6037773,9.8056523 6.570797,8.7541746 9.6654142,7.8515586 L 8.2416433,7.021026 z"
+       id="rect3362"
+       sodipodi:nodetypes="cccccc"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
diff --git a/navit/gui/qt5_qml/skins/pois.qml b/navit/gui/qt5_qml/skins/pois.qml
new file mode 100644
index 000000000..bc083e1ed
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/pois.qml
@@ -0,0 +1,119 @@
+import QtQuick 2.0
+
+Item {
+    ListView {
+        model: pois
+        anchors.fill: parent
+        id: listView
+        delegate: Rectangle {
+            height: 64
+            color: "#ff0000"
+            radius: 2
+            border.width: 1
+    
+            Image {
+                id: image1
+                height: parent.height - 4;
+                source : model.modelData.active ? "icons/appbar.layer.svg" : "icons/appbar.layer.delete.svg"
+                opacity: model.modelData.active ? 1 : 0.4
+            }
+    
+            Text {
+                width: 128
+                id: distanceText
+                text: distance
+                color: "#ffffff"
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: image1.right
+                anchors.leftMargin: 8
+            }
+    
+            Text {
+                text: name
+                color: "#ffffff"
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: distanceText.right
+                anchors.leftMargin: 8
+            }
+    
+            MouseArea{
+                anchors.fill: parent
+                hoverEnabled: true
+                onEntered: {
+                    // backend.list_maps(1)
+                }
+            }
+        }
+    
+        Component.onCompleted: backend.get_pois()
+    }
+
+    Rectangle {
+        height: 64
+        width: height
+
+        x: parent.width - width
+        y: parent.height - height * 2
+
+        color: "#35322f"
+
+        Image {
+            anchors.centerIn: parent
+            source: "icons/appbar.chevron.up.svg"
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            id: listUp
+
+            SmoothedAnimation {
+                target: listView
+                property: "contentY"
+                running: listUp.pressed
+                velocity: 1000
+                to: 0
+            }
+            onReleased: {
+                if (!listView.atYBeginning)
+                    listView.flick(0, 1000)
+            }
+        }
+    }
+
+
+
+    Rectangle {
+        height: 64
+        width: height
+
+        x: parent.width - width
+        y: parent.height - height
+
+        color: "#35322f"
+
+        Image {
+            anchors.centerIn: parent
+            source: "icons/appbar.chevron.down.svg"
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            id: listDown
+
+            SmoothedAnimation {
+                target: listView
+                property: "contentY"
+                running: listDown.pressed
+                to: listView.contentHeight - listView.height
+                velocity: 1000
+            }
+            onReleased: {
+                if (!listView.atYEnd)
+                    listView.flick(0, -1000)
+            }
+        }
+    }
+
+
+
+}
diff --git a/navit/gui/qt5_qml/skins/settings.qml b/navit/gui/qt5_qml/skins/settings.qml
new file mode 100644
index 000000000..d2a50d764
--- /dev/null
+++ b/navit/gui/qt5_qml/skins/settings.qml
@@ -0,0 +1,41 @@
+import QtQuick 2.0
+import QtQuick.Layouts 1.0
+
+
+GridLayout {
+    id: gridLayout
+    height: 200
+    columnSpacing: 4
+    rowSpacing: 4
+    rows: 3
+    columns: 2
+
+    MainButton {
+        text: "Maps"
+        icon: "icons/appbar.layer.svg"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        onClicked: {
+            menucontent.source = "maps.qml"
+        }
+    }
+    MainButton {
+        text: "Vehicles"
+        icon: "icons/appbar.transit.car.svg"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+    }
+    MainButton {
+        text: "Display"
+        icon: "icons/appbar.fullscreen.box.svg"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+    }
+
+    MainButton {
+        text: "Rules"
+        icon: "icons/appbar.cogs.svg"
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+    }
+}