basic two-line navigation proof of concept

shell/qml/Main.qml

@@ -1,5 +1,6 @@
-   import QtQuick
+import QtQuick
 import QtQuick.Window
+import NomadInput 1.0
 
 QtObject {
     property Window topWindow: Window {
@@ -7,35 +8,16 @@ QtObject {
         height: 540
         visible: true
         title: "nomad-top"
-
-        Rectangle {
-            anchors.fill: parent
-            color: "#181818"
-
-            Text {
-                anchors.centerIn: parent
-                text: "nomad top screen"
-                color: "white"
-                font.pixelSize: 50
-            }
-        }
-    }
-
-    property Window bottomWindow: Window {
-        width: 620
-        height: 540
-        visible: true
-        title: "nomad-bottom"
         property string lastInputText: "none"
 
         Connections {
             target: inputManager
             
             function onActionPressed(action) {
-                bottomWindow.lastInputText = inputManager.actionName(action) + " pressed"
+                topWindow.lastInputText = inputManager.actionName(action) + " pressed"
             }
             function onActionReleased(action) {
-                bottomWindow.lastInputText = inputManager.actionName(action) + " released"
+                topWindow.lastInputText = inputManager.actionName(action) + " released"
             }
         }
 
@@ -48,17 +30,147 @@ QtObject {
                 spacing: 20
 
                 Text {
-                    text: "nomad bottom screen"
+                    text: "nomad top screen"
                     color: "white"
                     font.pixelSize: 50
                 }
 
                 Text {
-                    text: "last input: " + bottomWindow.lastInputText
+                    text: "last input: " + topWindow.lastInputText
                     color: "white"
                     font.pixelSize: 30
                 }
             }
         }
     }
+
+    property Window bottomWindow: Window {
+        width: 620
+        height: 540
+        visible: true
+        title: "nomad-bottom"
+
+        readonly property var mainMenuNavRegions: ({
+            DockMenu: 0,
+            GamesList: 1,
+            Count: 2
+        })
+
+        property int focusRegion: bottomWindow.mainMenuNavRegions.GamesList
+        property int dockMenuIndex: 0
+
+        Connections {
+            target: inputManager
+
+            function onActionPressed(action) {
+                if (action === InputManager.Up) {
+                    if (bottomWindow.focusRegion < bottomWindow.mainMenuNavRegions.Count - 1) {
+                        bottomWindow.focusRegion += 1
+                    }
+                }
+                if (action === InputManager.Down) {
+                    if (bottomWindow.focusRegion > 0) {
+                        bottomWindow.focusRegion -= 1
+                    }
+                }
+                if (action === InputManager.Left || action === InputManager.Right) {
+                    switch (bottomWindow.focusRegion) {
+                        case bottomWindow.mainMenuNavRegions.GamesList:
+                            if (action === InputManager.Left) {
+                                if (gamesList.currentIndex > 0) {
+                                    gamesList.currentIndex -= 1
+                                }
+                            } else {
+                                if (gamesList.currentIndex < gamesList.count - 1) {
+                                    gamesList.currentIndex += 1
+                                }
+                            }
+                            break
+                        
+                        case bottomWindow.mainMenuNavRegions.DockMenu:
+                            if (action === InputManager.Left) {
+                                if (bottomWindow.dockMenuIndex > 0) {
+                                    bottomWindow.dockMenuIndex -= 1
+                                }
+                            } else {
+                                if (bottomWindow.dockMenuIndex < dockRepeater.count - 1) {
+                                    bottomWindow.dockMenuIndex += 1
+                                }
+                            }
+                            break
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            id: bottomRoot
+            anchors.fill: parent
+            color: "#181818"
+
+            Text {
+                anchors.top: parent.top
+                anchors.topMargin: 30
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                text: "top placeholder"
+                color: "white"
+                font.pixelSize: 24
+            }
+
+            ListView {
+                id: gamesList
+
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+
+                height: 140
+
+                orientation: ListView.Horizontal 
+                preferredHighlightBegin: 200
+                preferredHighlightEnd: 420
+                highlightRangeMode: ListView.ApplyRange
+                spacing: 20
+
+                model: 20
+
+                delegate: Rectangle {
+                    width: 110
+                    height: 110
+
+                    color: bottomWindow.focusRegion === bottomWindow.mainMenuNavRegions.GamesList && index === gamesList.currentIndex ? "blue" : "white"
+
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            bottomWindow.focusRegion = bottomWindow.mainMenuNavRegions.GamesList
+                            gamesList.currentIndex = index
+                        }
+                    }
+                }
+            }
+
+            Row {
+                id: bottomMenu
+
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 30
+                anchors.horizontalCenter: parent.horizontalCenter
+
+                spacing: 16
+
+                Repeater {
+                    id: dockRepeater
+                    model: 5
+
+                    Rectangle {
+                        width: 60
+                        height: 60
+                        color: bottomWindow.focusRegion === bottomWindow.mainMenuNavRegions.DockMenu && index === bottomWindow.dockMenuIndex ? "blue" : "white"
+                    }
+                }
+            }
+        } 
+    }
 }

shell/src/input/InputManager.cpp

@@ -112,7 +112,7 @@ bool InputManager::eventFilter(QObject *watched, QEvent *event)
         emit actionReleased(action);
     }
 
-    return false;
+    return true;
 }
 
 QString InputManager::actionName(Action action) const

shell/src/input/InputManager.h

@@ -2,6 +2,7 @@
 
 #include <QObject>
 #include <QString>
+#include <QtQml>
 
 class QEvent;
 

shell/src/main.cpp

@@ -1,6 +1,7 @@
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
 #include <QQmlContext>
+#include <QtQml>
 #include "input/InputManager.h"
 
 int main(int argc, char *argv[])
@@ -10,6 +11,14 @@ int main(int argc, char *argv[])
     InputManager inputManager;
     app.installEventFilter(&inputManager);
 
+    qmlRegisterUncreatableMetaObject(
+        InputManager::staticMetaObject,
+        "NomadInput",
+        1, 0,
+        "InputManager",
+        "InputManager is created by nomad"
+    );
+
     QQmlApplicationEngine engine;
     engine.rootContext()->setContextProperty("inputManager", &inputManager);