How to optimize the code

sush123

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:)

sierdzio

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.

sush123

@sierdzio

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

KroMignon

@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

sush123

@KroMignon

Thank you i will try using the same :)

KroMignon

@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 ;)

sush123

@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

KroMignon

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

sush123

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

KroMignon

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

sush123

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

KroMignon

@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

sush123

@KroMignon

Yes it worked , thanks a lot :)