Forums

OverviewFelgo 2 Support (Qt 5) › AndroidTV remote control

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #20999

    Mathieu-Andre

    I built and launched Felgo’s TodoList example on my nvidia shield TV. Works great, except I cannot control the app with my remote control. I tried to add the necessary focus:true in the AppListView but it still doesn’t want to intercept any key events. Any idea?

    Here’s my modified code (look for ‘FOCUS CODE HERE’)

      // show sorted/filterd todos of data model
      AppListView {
        id: listView
        anchors.fill: parent
    
        // the model specifies the data for the list view
        model: filteredModel
    
        // the delegate is the template item for each entry of the list
        delegate: SimpleRow {
          text: viewHelper.formatTodoId(model)
          detailText: "Title: "+title
          style.textColor: dataModel.isDraft(model) ? "grey" : Theme.listItem.textColor
    
          // push detail page when selected, pass chosen todo id
          onSelected: page.navigationStack.popAllExceptFirstAndPush(detailPageComponent, { todoId: model.id })
    
          // show marker for completed todos
          Rectangle {
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.margins: dp(4)
            width: dp(4)
            color: completed ? "lightgreen" : Theme.secondaryBackgroundColor
          }
    
        }
    
        ////////////////////////////// FOCUS CODE HERE /////////////////////////////
        focus: true
        Keys.onPressed: console.log("Keys.onPressed:" + event.key)
        Keys.onDownPressed: incrementCurrentIndex()
        Keys.onUpPressed: decrementCurrentIndex()
        Keys.onReturnPressed: currentItem.selected();
        ////////////////////////////////////////////////////////////////////////////
    
        // item animations, supported by list view for view model types like JsonListModel, ListModel or SortFilterProxyModel
        add: Transition {
          NumberAnimation {
            property: "opacity";
            from: 0;
            to: 1;
            duration: 200
            easing.type: Easing.OutQuad;
          }
        }
    
        addDisplaced: Transition {
          NumberAnimation {
            properties: "x,y";
            duration: 200
            easing.type: Easing.OutQuad;
          }
        }
    
        remove: Transition {
          NumberAnimation {
            property: "opacity";
            from: 1;
            to: 0;
            duration: 200
            easing.type: Easing.OutQuad;
          }
        }
    
        removeDisplaced: Transition {
          NumberAnimation {
            properties: "x,y";
            duration: 200
            easing.type: Easing.OutQuad;
          }
        }
    
        // hide scroll indicator, we automatically load more when bottom is reached
        scrollIndicatorVisible: false
    
        // load more todos
        footer: VisibilityRefreshHandler {
          canRefresh: !dataModel.isFetchingTodos
          onRefresh: logic.fetchNextPage()
        }
    
        // fetch todos when pulling list view for refresh
        PullToRefreshHandler {
          refreshing: dataModel.isFetchingTodos
          onRefresh: logic.fetchTodos()
        }
      }
    

     

    #21000

    Mathieu-Andre

    It looks like it might be the NavigationStack that is blocking the key focus. After making this change in the Main.qml, i can finally navigate the todo list with the remote control:

    //  // view
    //  NavigationStack {
    //    id: stack
    //    splitView: tablet // use side-by-side view on tablets
    //    initialPage: TodoListPage { }
    //  }
    
      TodoListPage {
          anchors.fill: parent
      }

    I was actually thinking of not using the NavigationStack for my TV app anyway, so I guess I solved my own problem. But in the event that I need this in the future, is there a way to allow key events to propagate through the NativationStack?

    #21001

    Mathieu-Andre

    ok, i figured it out completely. You need to solve it the same way you’d solve this with QtQuick’s StackView, so the solution looks like this:

    // view
    NavigationStack {
      id: stack
      splitView: tablet // use side-by-side view on tablets
      initialPage: TodoListPage { }
      onCurrentPageChanged: currentPage.forceActiveFocus()
    }

    and then your page code should have FocusScope element used like so:

    Page {
    
       ...
    
        onFocusChanged: {
            scope.focus = true
        }
    
        ...
        ...
        ...
    
        FocusScope {
            id: scope
            anchors.fill: parent
    
            AppListView {
                ...
    
                focus: true
    
                ...
                ...
                ...
            }
        }
    
        ...
        ...
        ...
    
    }

     

    I don’t know if there is a simpler solution, but it works and I hope it helps.

    #21106

    Günther
    Felgo Team

    Hi Mathieu,

    Yes, as you pointed out, the initial focus setting gets changed by the StackView’s focus handling.

    Thanks for sharing your solution!

    Cheers,
    Günther

Viewing 4 posts - 1 through 4 (of 4 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support