Wireframe rectangle with a description that I use for quickly sketching out complex layouts in QML.

DebugWireframe.qml

// A clearly visible "wireframe" rectangle used for quickly sketching out layouts.
// Color of the rectangle is computed from its description. If you don't give it
// any, it will default to light gray color.
// Shows borders, diagonal, description text and its size, all colored.

import QtQuick
import QtQuick.Shapes 1.3

Rectangle {
    id: root
    property string description
    property color generatedColor: getColor()
    
    color: "transparent"
    border.width: 2
    border.color: root.generatedColor

    function getColor() {
        if (description.length == 0) {
            return "lightgray"
        }

        let result = 1
        for (let i = 0; i < description.length; i++) {
            result += description.charCodeAt(i) * result
        }
        return Qt.hsla( (result % 360) / 360.0, 1.0, 0.5, 0.8)
    }

    Text {
        id: descLabel
        anchors.centerIn: parent
        text: root.description
        color: root.generatedColor
        font.bold: true
    }
    Text {
        anchors.top: descLabel.bottom
        anchors.horizontalCenter: descLabel.horizontalCenter
        text: root.width + " x " + root.height
        color: root.generatedColor
    }


    Shape {
        ShapePath {
            strokeColor: root.generatedColor
            strokeWidth: 1

            startX: 0
            startY: root.height
            PathLine {
                x: root.width
                y: 0
            }
        }
    }

}