How to connect a remote control with QML application



  • 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")
            }
        }
    }
    

  • Moderators

    @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.



  • @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.



  • @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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.