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

How to optimize the code



  • Hi All,

    I have a fallowing code where i am using multiple rectangle and i need to optimize the code ,
    can anyone suggest me to do the same.

    Sample code:

    Each rectangle will take a different color based on backend input .

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Layouts 1.12

    Window {
    id: root

    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    color: 'lightgray'
    
    Column {
        anchors.rightMargin: 0
        anchors.bottomMargin: -2
        anchors.leftMargin: 0
        anchors.topMargin: 0
        anchors.fill: parent
        Rectangle {
            width: parent.width
            height: 35
            color: Colors.menuHeaderBackground
            Text {
                color: Colors.menuHeaderText
                text: "Safety Lidars"
                font.bold: true
                font.pointSize: 14
                font.capitalization: Font.AllUppercase
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    
        Rectangle {
            width: parent.width
            height: 300
            color: Colors.menuBodyBackground
    
            Rectangle {
                x: 300
                y: 0
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 248
                y: 19
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 402
                y: 50
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 351
                y: 19
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 196
                y: 51
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 270
                y: 100
                width: 100
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 224
                y: 130
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 376
                y: 130
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 300
                y: 252
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 351
                y: 226
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 402
                y: 196
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 248
                y: 226
                width: 40
                height: width
                color: "#008000"
            }
    
            Rectangle {
                x: 196
                y: 196
                width: 40
                height: width
                color: "#008000"
            }
            visible: isExpanded
        }
    }
    

    }

    Thanks in advance:)


  • Moderators

    Unless you have a very good reason to use constant x,y positioning - change it. Use Anchors, Layouts, Grid etc.

    But anyway, assuming you have to use raw x,y for some reason, you can still simplify this. To generate multiple rectangles, use Repeater element. Different coordinates can be calculated using index attached property.

    So something like:

    Repeater {
      property int margin: 12
      Rectangle {
          x: index * (width + margin)
          y: index * (width + margin)
          width: 40
          height: width
          color: "#008000"
       }
    }
    

    You;ll need to tweak the algorithm of course, to match the exact patter of rectangles you want.



  • @sierdzio

    yes i have tried using repeater but i am looking for the excat pattern not sure how can i do it.



  • @sush123 You can use an object list to store your settings, like this:

    Repeater {
        model: [ Qt.point(300, 0), Qt.point(248,19), Qt.point(402,50), Qt.point(351,19) ]
        Rectangle {
            x: modelData.x
            y: modelData.y
            width: 40
            height: width
            color: "#008000"
        }
    }
    

    Take a look at documentation for more details



  • @KroMignon

    Thank you i will try using the same :)



  • @sush123 Your welcome.
    Of course, you can define your own object type, to add more settings. It is very ease:

    • first define you QML item with all required properties
    • create an array with those items.

    for example, create a QML file MySettings:

    // MySettings.qml
    import QtQuick 2.12
    
    QtObject {
        property int x: 0
        property int y: 0
        property color backColor: "#008000"
    }
    

    And then simply use it in you other QML file:

    Repeater {
        model: [ 
           MySettings { x: 300;  y: 0; backColor: "yellow" }, 
           MySettings { x: 248; y: 19 },
           MySettings { x: 402; y: 50 }, 
           MySettings { x: 351; y: 19; backColor: "red" } ]
        Rectangle {
            x: modelData.x
            y: modelData.y
            width: 40
            height: width
            color: modelData.backColor
        }
    }
    

    It is quiet easy to extend, I think ;)



  • @KroMignon

    Thanks for the response,

    i did fallow the same and i am getting error as :

    "qrc:/main.qml:10 Type Safety unavailable
    qrc:/Safety.qml:42 Cannot assign multiple values to a singular property"

    SAMPLE:

    Main.qml
    Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Safety{

    }
    }

    MySettings.qml

    QtObject {
    property int x: 0
    property int y: 0
    property color backColor: "#008000"
    }

    Safety.qml //Here im using repeater

    Item {
    id: safetyLidarWindow
    property string colorProperty

    Mysettings{
    
    }
    

    Rectangle {
    width: parent.width
    height: 310
    color: "grey"
    Repeater {
    model: [
    Mysettings { x: 200; y: 30; backColor: "yellow" },
    Mysettings { x: 148; y: 49 ; backColor: "green" },
    Mysettings { x: 302; y: 80 ; backColor: "red" },
    Mysettings { x: 251; y: 49; backColor: "red" },
    Mysettings { x: 96; y: 80; backColor: "yellow" },
    Mysettings { x: 124; y: 160 ; backColor: "green"},
    Mysettings { x: 276; y: 160 ; backColor: "red" },
    Mysettings { x: 200; y: 282; backColor: "red" },
    Mysettings { x: 251; y: 256; backColor: "yellow" },
    Mysettings { x: 302; y: 226; backColor: "red" },
    Mysettings { x: 148; y: 256 ; backColor: "green"},
    Mysettings { x: 96; y: 226; backColor: "red" }]
    Rectangle {
    x: modelData.x
    y: modelData.y
    width: 40
    height: width
    color: modelData.backColor
    }
    }
    }

    Please tell me where i am doing mistake.

    Thank you



  • @sush123 JavaScript/QML is case sensitive, so take care about this ==> MySettings != Mystettings



  • @KroMignon

    Sorry its my bad ,
    Actually it is Mysettings.qml only i mean i have taken care of Cases its same everywhere but when i replied i posted MySettings.qml as file name.

    Error is "qrc:/main.qml:10 Type Safety unavailable
    qrc:/Safety.qml:42 Cannot assign multiple values to a singular property"

    also saw this link :
    https://forum.qt.io/topic/17210/solved-qml-component-cannot-assign-multiple-values-to-a-singular-property/2

    But i did not got how i can use it in my case, please guide me.

    Thank you.



  • @sush123 said in How to optimize the code:

    qrc:/Safety.qml:42 Cannot assign multiple values to a singular property"

    What is exactly in line 42 in Safety.qml?



  • @KroMignon
    Mysettings { x: 200; y: 30; backColor: "yellow" },



  • @sush123 My bad, it seems it is not working this way, you have to define a property to store the object list!

    Simply change you Safety.qml file as follow:

    Item {
        id: safetyLidarWindow
        property string colorProperty
    
        property list<Mysettings> myModel: [
            Mysettings { x: 200; y: 30; backColor: "yellow" },
            Mysettings { x: 148; y: 49 ; backColor: "green" },
            Mysettings { x: 302; y: 80 ; backColor: "red" },
            Mysettings { x: 251; y: 49; backColor: "red" },
            Mysettings { x: 96; y: 80; backColor: "yellow" },
            Mysettings { x: 124; y: 160 ; backColor: "green"},
            Mysettings { x: 276; y: 160 ; backColor: "red" },
            Mysettings { x: 200; y: 282; backColor: "red" },
            Mysettings { x: 251; y: 256; backColor: "yellow" },
            Mysettings { x: 302; y: 226; backColor: "red" },
            Mysettings { x: 148; y: 256 ; backColor: "green"},
            Mysettings { x: 96; y: 226; backColor: "red" }]
    
        Rectangle {
            width: parent.width
            height: 310
            color: "grey"
            Repeater {
                model: myModel
                Rectangle {
                    x: modelData.x
                    y: modelData.y
                    width: 40
                    height: width
                    color: modelData.backColor
                }
            }
        }
    }
    

    This should work



  • @KroMignon

    Yes it worked , thanks a lot :)


Log in to reply