Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML radio button enable disable panel component



  • Hi

    I have a radio button group one radio button for serial panel and other for tcpip panel in the UI_connect_top.qml
    serial and tcpip panel are defined in separate qml.files and are used as components in UI_connect_top.qml

    I have made property alias for tcip_panel and serial_panel for enable.

    when I click on the radio buttons the enable and disable of panels does not work. here is my code

    UI_connect_top.qml

    import QtQuick 2.9
    import QtQuick.Window 2.3
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3
    import QtQuick.Controls.Styles 1.4

    Item {
    id: ui_connect_top_item
    width: 1200
    height: 800

    UI_serial{
    //title: qsTr ("Serial ports(%1)").arg(index)
    id:panel_serial
    y: 0
    width: 470
    height: 70
    anchors.leftMargin: 10
    anchors.left: serial_radio.right
    serial_en: true
    Component.onCompleted: console.log("----Serial Panel populated!")
    }
    

    UI_tcp_ip{
    //title: qsTr ("Serial ports(%1)").arg(index)
    y:86
    id:panel_tcpip
    anchors.right: parent.right
    anchors.rightMargin: 700
    anchors.left: tcpip_radio.right
    anchors.leftMargin: 10
    tcpip_en: false
    Component.onCompleted: console.log("----Tcp/ip Panel populated!")
    //anchors.left: panel_connect.Right
    }

    UI_log{
    //title: qsTr ("Serial ports(%1)").arg(index)
    id:panel_log
    y: 0
    anchors.right: parent.right
    anchors.rightMargin: 5
    anchors.left: panel_serial.right
    anchors.leftMargin: 10
    anchors.top: panel_serial.Bottom;
    Component.onCompleted: console.log("----Log Panel populated!")
    }

    UI_info{
    //title: qsTr ("Serial ports(%1)").arg(index)
    id:panel_info
    x: 515
    y: 86
    width: 670
    height: 270
    Component.onCompleted: console.log("----Info Panel populated!")
    //anchors.top: panel_log.Bottom;
    }

    RadioButton {
    id: serial_radio
    checked: true
    y: 30
    width: 20
    height: 20
    text: qsTr("")
    anchors.verticalCenterOffset: 5
    anchors.verticalCenter: panel_serial.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    onCheckableChanged: checked? panel_serial.serial_en=true:panel_tcpip.tcpip_en=false
    }

    RadioButton {
    id: tcpip_radio
    checked: false
    y: 150
    width: 20
    height: 20
    text: qsTr("")
    anchors.verticalCenterOffset: 10
    anchors.verticalCenter: panel_tcpip.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    onCheckableChanged: checked? panel_serial.serial_en=false:panel_tcpip.tcpip_en=true
    }
    }

    UI_serial.qml

    import QtQuick 2.9
    import QtQuick.Window 2.3
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3
    import QtQuick.Controls.Styles 1.4

    Item {
    id: serial_panel_item
    width: 470
    height: 70

    property alias serial_en: serial_port_group.enabled
    
    
    GroupBox {
            id: serial_port_group
            x: 0
            y: 0
            width: 470
            height: 70
            clip: true
            enabled: serial_en
            transformOrigin: Item.BottomLeft
            contentHeight: 30
            title: qsTr("Serial ports")
    
            Switch {
                id: serial_connect_id
                x: 306
                y: -1
                width: 140
                height: 30
    
                text: checked? qsTr("Connected"):qsTr("Disconnected")
                checked: false
                indicator: Rectangle {
                        implicitWidth: 48
                        implicitHeight: 26
                        x: serial_connect_id.leftPadding
                        y: parent.height / 2 - height / 2
                        radius: 13
                        color: serial_connect_id.checked ? "#00ff00" : "#ff0000"
                        border.color: serial_connect_id.checked ? "#17a81a" : "#cccccc"
    
                        Rectangle {
                            x: serial_connect_id.checked ? parent.width - width : 0
                            width: 26
                            height: 26
                            radius: 13
                            color: serial_connect_id.down ? "#cccccc" : "#ffffff"
                            border.color: serial_connect_id.checked ? (serial_connect_id.down ? "#17a81a" : "#21be2b") : "#999999"
                        }
                    }
    
                onCheckedChanged:connect_serial_port.callback_connect(serial_port_list_id.currentText,serial_connect_id.text,serial_connect_id.checked)
            }
    
            Button {
                id: serial_scan_id
                x: 242
                y: -2
                width: 50
                height: 30
                text: qsTr("Scan")
                onClicked: connect_serial_port.scan_for_ports()
            }
    
            ComboBox {
                id: serial_port_list_id
                x: -5
                y: -2
                model: connect_serial_port.port_list
                width: 235
                height: 30
                currentIndex: -1
                onAccepted: {
                     if (editableCombo.find(currentText) === -1) {
                         model.append({text: editText})
                         currentIndex = editableCombo.find(editText)
                     }
                 }
    
            }
        }
    

    }

    UI_tcp_ip.qml

    import QtQuick 2.9
    import QtQuick.Window 2.3
    import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3
    import QtQuick.Controls.Styles 1.4

        Item {
    id: tcpip_panel_item
    width: 470
    height: 120
    property alias tcpip_en: tcpip_port_group.enabled
    GroupBox {
            id: tcpip_port_group
            x: 0
            y: 0
            width: 470
            height: 120
            clip: true
            enabled: tcpip_en
            transformOrigin: Item.BottomLeft
            contentHeight: 30
            title: qsTr("TCP/IP client")
    
            Text {
                id: server_name_txt_id
                x: 0
                y: 10
                width: 100
                height: 30
                text: qsTr("Server name")
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignLeft
                font.pixelSize: 12
            }
    
            TextField {
                id: server_name_id
                x: 106
                y: 10
                text: qsTr("rk2_2018002.eu.socionext.com")
                width: 340
                height: 30
            }
    
            Text {
                id: server_port_txt_id
                x: 0
                y: 51
                width: 100
                height: 30
                text: qsTr("Server port")
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 12
            }
    
            TextField {
                id: server_port_id
                x: 106
                y: 50
                width: 192
                height: 30
                text: qsTr("12345")
                horizontalAlignment: Text.AlignHCenter
            }
    
            Switch {
                id: tcpip_connect_id
                x: 306
                y: 50
                width: 140
                height: 30
    
                text: checked? qsTr("Connected"):qsTr("Disconnected")
                anchors.right: parent.right
                anchors.rightMargin: -3
                anchors.bottom: parent.bottom
                anchors.bottomMargin: -4
                checked: false
                indicator: Rectangle {
                    color: tcpip_connect_id.checked ? "#00ff00" : "#ff0000"
                        implicitWidth: 48
                        implicitHeight: 26
                        radius: 13
                        border.color: tcpip_connect_id.checked ? "#17a81a" : "#cccccc"
    
                        Rectangle {
                            x: tcpip_connect_id.checked ? parent.width - width : 0
                            width: 26
                            height: 26
                            radius: 13
                            color: tcpip_connect_id.down ? "#cccccc" : "#ffffff"
                            border.color: tcpip_connect_id.checked ? (tcpip_connect_id.down ? "#17a81a" : "#21be2b") : "#999999"
                        }
                    }
    
                onCheckedChanged:tcpip_client.tcpConnect(server_name_id.text,server_port_id.text,tcpip_connect_id.checked);
            }
    

    }
    }



  • @Prasad_Socionext hi,

    you are doing your conditionnal operations if ''checkableChanged()" signal is emitted, do it on clicked() or onCheckedChanged()

    RadioButton {
    id: tcpip_radio
    checked: false
    y: 150
    width: 20
    height: 20
    text: qsTr("")
    anchors.verticalCenterOffset: 10
    anchors.verticalCenter: panel_tcpip.verticalCenter
    anchors.left: parent.left
    anchors.leftMargin: 5
    //onCheckableChanged: checked? panel_serial.serial_en=false:panel_tcpip.tcpip_en=true 
    onClicked : checked ? panel_serial.serial_en=false : panel_tcpip.tcpip_en=true 
    //or onCheckedChanged
    }
    }
    

    Note : also your conditional function leaves me skeptical, what it must do ?
    For now if you check panel_serial.serial_en will be unvisible
    if you uncheck panel_tcpip.tcpip_en will be visible
    So i don't realy understand this



  • thanks worked !


Log in to reply