How to connect a remote control with QML application

md612

I am going to use a remote control (IR) to control the QML application on an android board. However, I don't know how to connect the buttons of remote control with my application. I just mark down the keycode of the remote control. I hope it would be useful for my application. I have tried several ways, but the listview cannot react with the remote control. I hope I can control the listview and the buttons below the listview. My app acts like a image viewer. If one of files is clicked on the listview, it will show on the next tab view. The 'Play' button is to play all the files.

The remote control
alt text

My QML application
alt text

alt text

The source code:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtMultimedia 5.8

import com.contentplayermod.filemodel 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Tabs")
    property int idx: 0
    property bool isActive: true

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page {

            ListView {
                id: lv
                width: 200; height: 400
                highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
                focus: true
                currentIndex: 0

                Component {
                    id: fileDelegate
                    Text {

                        text: fileName
                        font.pointSize: 20

                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                playTimer.stop()
                                //playMusic(index)
                                playMusic(index)
                                swipeView.setCurrentIndex(1)
                            }
                        }
                    }
                }

                model: FileModel{
                    id: myModel
                    folder: "/mnt/sdcard/app_pictureFrameImage"
                    nameFilters: ["*.mp4","*.jpg"]
                }

                delegate: fileDelegate


                Keys.onDownPressed: {
                            if (lv.currentIndex + 1 < lv.count - 1)
                                lv.currentIndex += 1;
                }
                Keys.onUpPressed: {
                            if (lv.currentIndex - 1 >= 0)
                                lv.currentIndex -= 1;
                }
            }

            Row {
                    id: controlButtons

                     height: 40
                     anchors {
                         left: parent.left
                         leftMargin: 10
                         right: parent.right
                         rightMargin: 10
                         bottom: parent.bottom
                         bottomMargin: 0
                     }

                    Button {
                        id: button1
                        width: parent.width/2
                        text: "Play"
                        background: Rectangle {
                            implicitHeight: 40
                            border.color: "#26282a"
                            border.width: 2
                            radius: 4
                        }
                        onClicked:{
                            playTimer.start()
                            swipeView.setCurrentIndex(1)
                            playMusic(0)
                        }
                    }

                    Button {
                        id: button2
                        width: parent.width/2
                        text: "Stop"
                        background: Rectangle {
                            implicitHeight: 40
                            border.color: "#26282a"
                            border.width: 2
                            radius: 4
                        }
                        onClicked:{
                            playTimer.stop()
                        }
                    }
            }
        }

        Page {
            MediaPlayer {
                id: player
                onStopped: {
                    if(status===MediaPlayer.EndOfMedia){                       
                        // playMusic((lv.currentIndex+1) % lv.count)
                    }
                }
            }

            VideoOutput {
                id: video
                anchors.fill: parent
                source: player
            }

            Row {
                    id: controlButtons2

                     height: playpauseButton.height
                     anchors {
                         left: parent.left
                         leftMargin: 10
                         right: parent.right
                         rightMargin: 10
                         bottom: parent.bottom
                         bottomMargin: 0
                     }

                     Button {
                         id: rewindButton
                         width: parent.width / 3
                         text: "previous"
                         background: Rectangle {
                             implicitHeight: 40
                             border.color: "#26282a"
                             border.width: 2
                             radius: 4
                         }
                         onClicked: {
                             idx = idx - 1;
                             if(idx < 0 ){
                                 idx = lv.count-1;
                             }
                             playMusic(idx)
                             playTimer.stop()
                         }
                     }

                     Button {
                         id: playpauseButton

                         width: parent.width / 3
                         text: isActive ? "stop" : "play"
                         background: Rectangle {
                             implicitHeight: 40
                             border.color: "#26282a"
                             border.width: 2
                             radius: 4
                         }
                         onClicked:{
                             if(isActive){
                                isActive = false;
                                playTimer.stop()
                                player.pause()
                             }else{
                                 isActive = true
                                 playMusic(idx)
                                 playTimer.start()
                                 player.play()
                             }
                         }
                     }

                     Button {
                         id: nextButton
                         width: parent.width / 3
                         text:"next"
                         background: Rectangle {
                             implicitHeight: 40
                             border.color: "#26282a"
                             border.width: 2
                             radius: 4
                         }
                         onClicked: {
                             idx = idx + 1;
                             if(idx > lv.count-1){
                                 idx = 0;
                             }
                             playMusic(idx)
                             playTimer.stop()
                         }
                     }
                  }
        }
    }

    function playMusic(index){
        idx = index
        player.stop()
        player.source = myModel.get(index).url
        player.play()
        //swipeView.setCurrentIndex(1)
    }

    Timer {
        id: playTimer
        interval: 2000
        repeat: true
        running: true
        onTriggered: {
            var source_name = player.source;

            if(source_name.toString().indexOf(".jpg")>0 || source_name.toString().indexOf(".bmp")>0 || source_name.toString().indexOf(".png")>0){ //processing .jpg
               // idx = (idx+1) % (lv.count-1)
               //playMusic((idx) % lv.count)
                if (idx + 1 < lv.count){
                    playMusic(idx + 1);
                }else{
                    idx = 0;
                    playMusic(idx);
                }
            }

            else if(source_name.toString().indexOf(".mp4")>0){ //processing .mp4
                if (player.status == MediaPlayer.EndOfMedia){
                    if (idx + 1 < lv.count){
                        playMusic(idx + 1);
                    }else{
                        idx = 0;
                        playMusic(idx);
                    }
                }
            }
        }
     }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex

        TabButton {
            id:tab1
            text: qsTr("Main")
        }
        TabButton {
            id:tab2
            text: qsTr("View")
        }
    }
}

raven-worx

@md612
the question is what is your IR receiver and how is it integrated into the system?
Basically you should be able to use QSerialPort to connect to your IR receiver and read the received data.
But i am not sure if the QSerialPort module is well ported to android. Or android even lets you access serial ports easily.
Just some hints. Maybe someone else can give more insights.

md612

@raven-worx

The android OS has installed the IR driver. I should use the keycode to control the remote control, but I don't know how to do that.

Pablo J. Rogina

@md612 so if you have the driver installed in Android OS, how is that driver exposing the device to the applications? Do you have any test Android application provided with the driver that can allow you to check the remote control is actually working properly?

As @raven-worx asked you, is it by means of providing a serial port? or any other way to expose what the receiver driver actually received?

Any brand/model that you can share with us about the IR remote control may help as well