Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

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.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded