Ús d'arxius vectorials SVG al QML (Qt6)

Exemple d'ús d'arxius SVG

Codis s'aquesta pàgina al GitHub

ampMeter00_04 Execució via web mitjançant WebAssembly

ampMeter00_09 Execució via web mitjançant WebAssembly

Explicació de main.qml d'ampMeter00_00

El fitxer main.qml de ampMeter00_00 estableix la base d'una aplicació Qt Quick que simula un amperímetre simple [1].

Estructura bàsica de la finestra

• import QtQuick: Importa el mòdul Qt Quick necessari per als elements de la interfície d'usuari [1].
• Window: Defineix la finestra principal de l'aplicació [1].
  • width: 640, height: 480: Estableix les dimensions de la finestra [1].
  • visible: true: Fa que la finestra sigui visible quan s'inicia l'aplicació [1].
  • title: qsTr("ampMeter00"): Defineix el títol de la finestra com "ampMeter00" [1].

Element arrel (Rectangle)

• Rectangle { id: root ... }: Dins la finestra, hi ha un Rectangle anomenat root que serveix com a contenidor principal [1].
• anchors.fill: parent: Fa que aquest rectangle ompli completament la finestra pare [1].
• color: "white": Estableix el color de fons del rectangle com a blanc [1].

Imatge de fons de l'amperímetre

• Image { id: fonsSvg ... }: S'afegeix un element Image per al fons de l'amperímetre [1].
• source: "qrc:/material/AmpMeterFons_c.svg": Carrega la imatge de fons des dels recursos de l'aplicació [1].
• fillMode: Image.PreserveAspectFit: Aquesta propietat assegura que la imatge mantingui les seves proporcions originals mentre s'ajusta dins de l'espai disponible [1].
• anchors.centerIn: parent: Centra la imatge de fons dins del seu element pare (root rectangle) [1].

Imatge de l'agulla de l'amperímetre

• Image { id: agullaSvg ... }: S'afegeix un altre element Image per representar l'agulla de l'amperímetre [2].
• source: "qrc:/material/AmpMeterAgulla_c.svg": Carrega la imatge de l'agulla [2].
• fillMode: Image.PreserveAspectFit: Igual que amb el fons, manté les proporcions de l'agulla [2].
• anchors.centerIn: parent: Centra l'agulla dins del seu pare (root rectangle) [2].
• rotation: 45: Estableix una rotació inicial de 45 graus per a l'agulla [2]. Aquest és el punt clau de control en aquesta primera versió, ja que la rotació es defineix de manera estàtica [2].

En resum, ampMeter00_00 presenta una interfície d'usuari bàsica amb un fons i una agulla d'amperímetre, on l'agulla es mostra en una posició fixa de 45 graus [1, 2].

main.qml:

// main.qml
import QtQuick // [1]
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ampMeter00_00")

    Rectangle {
        id: root
        anchors.fill: parent
        color: "white"

        Image {
            id: fonsSvg
            source: "qrc:/material/AmpMeterFons_c.svg"
            fillMode: Image.PreserveAspectFit
            anchors.centerIn: parent
        }
        Image { // [2]
            id: agullaSvg
            source: "qrc:/material/AmpMeterAgulla_c.svg"
            fillMode: Image.PreserveAspectFit
            anchors.centerIn: parent
            rotation: 45
        }
    }
}

Canvis Progressius en el Codi

A continuació, s'expliquen els canvis introduïts en cada iteració del projecte:

Interactivitat i animació (d'ampMeter00_00 a ampMeter00_01)

La versió ampMeter00_01 introdueix la interactivitat i l'animació per a l'agulla de l'amperímetre.

• Rotació Inicial i Opacitat de l'Agulla:
  • La rotation inicial de l'agulla (agullaSvg) es canvia a 0.
  • S'afegeix una propietat opacity: 0.8 a l'agulla.

• Animació de Rotació (Behavior):
  • S'afegeix un Behavior on rotation a l'agulla. Això significa que cada vegada que la propietat rotation de l'agulla canvia, s'executarà una animació.
  • NumberAnimation { duration: 300; easing.type: Easing.InOutBack }: L'animació durarà 300 mil·lisegons i utilitzarà una funció d'acceleració Easing.InOutBack per a un efecte més dinàmic.

• Botons de Control:
  • S'afegeix una fila de botons (Row) a la part inferior de la pantalla, anomenada controlButtons.
  • Aquests botons es centren horitzontalment (anchors.horizontalCenter: parent.horizontalCenter) i es col·loquen a 20 píxels de la part inferior (anchors.bottomMargin: 20).
  • Hi ha un spacing: 20 entre els botons.
  • Cada botó és un Rectangle gris amb un width i height de 60 píxels i un radius de 30 (creant cercles).
  • Cada Rectangle conté un Text blanc amb la seva etiqueta (per exemple, "-60", "0", "60").
  • Cada botó té una MouseArea que detecta clics. Quan es clica, la rotation de l'agulla (agullaSvg.rotation) es defineix a un valor específic (-45, -20, 0, 20, 45).
  • El cursorShape de la MouseArea es defineix com Qt.PointingHandCursor per indicar que és un element clicable.

Aquesta versió permet a l'usuari controlar la rotació de l'agulla mitjançant botons, amb una animació suau cada vegada que l'agulla canvia de posició.

main.qml:

// main.qml
import QtQuick
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ampMeter00_01")

    Rectangle {
        id: root
        anchors.fill: parent
        color: "white"

        Image {
            id: fonsSvg
            source: "qrc:/material/AmpMeterFons_c.svg"
            fillMode: Image.PreserveAspectFit
            anchors.centerIn: parent
        }
        Image {
            id: agullaSvg
            source: "qrc:/material/AmpMeterAgulla_c.svg"
            fillMode: Image.PreserveAspectFit
            opacity: 0.8
            anchors.centerIn: parent
            rotation: 0

            Behavior on rotation {
                NumberAnimation {
                    duration: 300
                    easing.type: Easing.InOutBack
                }
            }
        }

        Row {
            id: controlButtons
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: 20
            spacing: 20

            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "-60"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = -45
                    cursorShape: Qt.PointingHandCursor
                }
            }
            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "-30"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = -20
                    cursorShape: Qt.PointingHandCursor
                }
            }
            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "0"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = 0
                    cursorShape: Qt.PointingHandCursor
                }
            }
            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "30"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = 20
                    cursorShape: Qt.PointingHandCursor
                }
            }
            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "60"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = 45
                    cursorShape: Qt.PointingHandCursor
                }
            }
        }
    }
}

Animació automàtica i contínua (d'ampMeter00_01 a ampMeter00_02)

La versió ampMeter00_02 afegeix una animació automàtica i contínua per a l'agulla.

• Canvi de Funció d'Acceleració:
  • La funció d'acceleració (easing.type) del NumberAnimation de l'agulla es canvia de Easing.InOutBack a Easing.InOutQuad.
• Animació Seqüencial:
  • S'afegeix una SequentialAnimation on rotation a l'agulla (agullaSvg).
  • loops: Animation.Infinite: Aquesta animació es repetirà indefinidament.
  • Consisteix en dues RotationAnimations:
    • Una que fa girar l'agulla fins a 45 graus durant 1000 mil·lisegons.
    • Una segona que la fa girar fins a -45 graus durant 500 mil·lisegons.
  • Aquesta animació fa que l'agulla es mogui contínuament entre 45 i -45 graus quan no es controla manualment.
• Els botons de control manual romanen igual, permetent a l'usuari sobrescriure l'animació automàtica.

main.qml:

// main.qml
import QtQuick
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ampMeter00_02")

    Rectangle {
        id: root
        anchors.fill: parent
        color: "white"

        Image {
            id: fonsSvg
            source: "qrc:/material/AmpMeterFons_c.svg"
            fillMode: Image.PreserveAspectFit
            anchors.centerIn: parent
        }
        Image {
            id: agullaSvg
            source: "qrc:/material/AmpMeterAgulla_c.svg"
            fillMode: Image.PreserveAspectFit
            opacity: 0.8
            anchors.centerIn: parent
            rotation: 0

            Behavior on rotation {
                NumberAnimation {
                    duration: 300
                    easing.type: Easing.InOutQuad
                }
            }

            SequentialAnimation on rotation {
                loops: Animation.Infinite

                RotationAnimation {
                    to: 45
                    duration: 1000
                }

                RotationAnimation {
                    to: -45
                    duration: 500
                }
            }
        }

        Row {
            id: controlButtons
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: 20
            spacing: 20

            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "-60"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = -45
                    cursorShape: Qt.PointingHandCursor
                }
            }
            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "-30"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = -20
                    cursorShape: Qt.PointingHandCursor
                }
            }
            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "0"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = 0
                    cursorShape: Qt.PointingHandCursor
                }
            }
            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "30"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = 20
                    cursorShape: Qt.PointingHandCursor
                }
            }
            Rectangle {
                width: 60
                height: 60
                radius: 30
                color: "gray"

                Text {
                    anchors.centerIn: parent
                    text: "60"
                    color: "white"
                    font.pixelSize: 14
                    font.bold: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: agullaSvg.rotation = 45
                    cursorShape: Qt.PointingHandCursor
                }
            }
        }
    }
}

Model de dades ListModel i repetició Repeater (d'ampMeter00_02 a ampMeter00_03)

La versió ampMeter00_03 refactoritza el codi dels botons utilitzant un model de dades (ListModel) i un Repeater, millorant la modularitat i la facilitat de manteniment.

• Eliminació de l'Animació Seqüencial:
  • La SequentialAnimation on rotation s'elimina.
• Model de Dades per a Botons (ListModel):
  • Es defineix un ListModel amb id: buttonModel.
  • Conté ListElements, cadascun amb una label (el text del botó) i un value (el valor de rotació corresponent). Per exemple, { label: "-60"; value: -45 }.
• Generació de Botons amb Repeater:
  • En lloc de declarar cada botó individualment, s'utilitza un Repeater amb model: buttonModel dins del Row de controlButtons.
  • El Repeater crea un Rectangle per a cada element del model.
  • El Text de cada botó utilitza model.label i l'esdeveniment onClicked de la MouseArea utilitza agullaSvg.rotation = model.value.

Aquest canvi redueix la duplicitat de codi i facilita l'addició o modificació de botons en el futur.

main.qml:

// main.qml
import QtQuick
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ampMeter00_03")

    Rectangle {
        id: root
        anchors.fill: parent
        color: "white"

        Image {
            id: fonsSvg
            source: "qrc:/material/AmpMeterFons_c.svg"
            fillMode: Image.PreserveAspectFit
            anchors.centerIn: parent
        }
        Image {
            id: agullaSvg
            source: "qrc:/material/AmpMeterAgulla_c.svg"
            fillMode: Image.PreserveAspectFit
            opacity: 0.8
            anchors.centerIn: parent
            rotation: 0

            Behavior on rotation {
                NumberAnimation {
                    duration: 300
                    easing.type: Easing.InOutBack
                }
            }
        }

        ListModel {
            id: buttonModel
            ListElement { label: "-60"; value: -45 }
            ListElement { label: "-30"; value: -20 }
            ListElement { label: "0"; value: 0 }
            ListElement { label: "30"; value: 20 }
            ListElement { label: "60"; value: 45 }
        }

        Row {
            id: controlButtons
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: 20
            spacing: 20

            Repeater {
                model: buttonModel

                Rectangle {
                    width: 60
                    height: 60
                    radius: 30
                    color: "gray"

                    Text {
                        anchors.centerIn: parent
                        text: model.label
                        color: "white"
                        font.pixelSize: 14
                        font.bold: true
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: agullaSvg.rotation = model.value
                        cursorShape: Qt.PointingHandCursor
                    }
                }
            }
        }
    }
}

Component Botonera. QML reutilitzable (d'ampMeter00_03 a ampMeter00_04)

La versió ampMeter00_04 millora la modularitat extraient la lògica dels botons en un component QML reutilitzable anomenat Botonera.qml.

• Creació del Component Botonera.qml:
  • Es crea un nou fitxer Botonera.qml que conté la implementació del Row i el Repeater per als botons.
  • Aquest component té una propietat property alias model: repeater.model que permet al component pare passar-li el ListModel.
  • Defineix un signal buttonClicked(real value) que s'emet quan es prem un botó, enviant el value de rotació.
  • Dins del MouseArea de cada botó, onClicked ara crida botonera.buttonClicked(model.value).
• Ús del Component Botonera a main.qml:
  • A main.qml, el Row original de botons es reemplaça per una instància del nou component Botonera.
  • controlButtons (la instància de Botonera) rep el buttonModel mitjançant model: buttonModel.
  • Captura el senyal onButtonClicked del component Botonera i actualitza la rotació de l'agulla amb agullaSvg.rotation = value.

Aquesta refactorització permet reutilitzar el bloc de botons en altres parts de l'aplicació o en altres projectes, fent el codi de main.qml més net i centrat en la composició.

main.qml:

// main.qml
import QtQuick
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ampMeter00_04")

    Rectangle {
        id: root
        anchors.fill: parent
        color: "white"

        Image {
            id: fonsSvg
            source: "qrc:/material/AmpMeterFons_c.svg"
            fillMode: Image.PreserveAspectFit
            anchors.centerIn: parent
        }
        Image {
            id: agullaSvg
            source: "qrc:/material/AmpMeterAgulla_c.svg"
            fillMode: Image.PreserveAspectFit
            opacity: 0.8
            anchors.centerIn: parent
            rotation: 0

            Behavior on rotation {
                NumberAnimation {
                    duration: 300
                    easing.type: Easing.InOutBack
                }
            }
        }

        ListModel {
            id: buttonModel
            ListElement { label: "-60"; value: -45 }
            ListElement { label: "-30"; value: -20 }
            ListElement { label: "0"; value: 0 }
            ListElement { label: "30"; value: 20 }
            ListElement { label: "60"; value: 45 }
        }

        Botonera {
            id: controlButtons
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: 20
            model: buttonModel
            onButtonClicked: function(value) {
                agullaSvg.rotation = value
            }
        }
    }
}

Botonera.qml:

// Botonera.qml
import QtQuick

Row {
    id: botonera
    spacing: 20

    property alias model: repeater.model
    signal buttonClicked(real value)

    Repeater {
        id: repeater

        Rectangle {
            width: 60
            height: 60
            radius: 30
            color: "gray"

            Text {
                anchors.centerIn: parent
                text: model.label
                color: "white"
                font.pixelSize: 14
                font.bold: true
            }

            MouseArea {
                anchors.fill: parent
                onClicked: botonera.buttonClicked(model.value)
                cursorShape: Qt.PointingHandCursor
            }
        }
    }
}

Component AmpMeter (d' ampMeter00_04 a ampMeter00_05)

La versió ampMeter00_05 continua amb la refactorització, encapsulant la lògica de l'amperímetre (fons i agulla) en un component QML propi anomenat AmpMeter.qml.

• Creació del Component AmpMeter.qml:
  • Es crea un nou fitxer AmpMeter.qml que conté el fons (fonsSvg) i l'agulla (agullaSvg) de l'amperímetre.
  • Exposa una propietat property alias rotation: agullaSvg.rotation per permetre al component pare controlar directament la rotació de l'agulla interna.
  • També defineix propietats per personalitzar les imatges de fons i agulla (fonsSource, agullaSource) i l'opacitat de l'agulla (agullaOpacity).
  • El Behavior on rotation per a l'agulla es troba ara dins d'aquest component.
• Ús del Component AmpMeter a main.qml:
  • A main.qml, les dues imatges originals (fonsSvg i agullaSvg) es reemplacen per una instància del nou component AmpMeter.
  • L'esdeveniment onButtonClicked del Botonera ara actualitza la rotació de l'amperímetre amb ampMeter.rotation = value, utilitzant la propietat exposada pel component AmpMeter.

Aquesta última refactorització crea un component autònom (AmpMeter) que conté tota la lògica i la presentació de l'amperímetre, fent que main.qml sigui extremadament simple i es basi en la composició de components.

main.qml:

// main.qml
import QtQuick
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("ampMeter00_05")

    Rectangle {
        id: root
        anchors.fill: parent
        color: "white"

        AmpMeter {
            id: ampMeter
            anchors.centerIn: parent
            width: parent.width
            height: parent.height
        }

        ListModel {
            id: buttonModel
            ListElement { label: "-60"; value: -45 }
            ListElement { label: "-30"; value: -20 }
            ListElement { label: "0"; value: 0 }
            ListElement { label: "30"; value: 20 }
            ListElement { label: "60"; value: 45 }
        }

        Botonera {
            id: controlButtons
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: 20
            model: buttonModel
            onButtonClicked: function(value) {
                ampMeter.rotation = value
            }
        }
    }
}

Botonera.qml:

// Botonera.qml
import QtQuick

Row {
    id: botonera
    spacing: 20

    property alias model: repeater.model
    signal buttonClicked(real value)

    Repeater {
        id: repeater

        Rectangle {
            width: 60
            height: 60
            radius: 30
            color: "gray"

            Text {
                anchors.centerIn: parent
                text: model.label
                color: "white"
                font.pixelSize: 14
                font.bold: true
            }

            MouseArea {
                anchors.fill: parent
                onClicked: botonera.buttonClicked(model.value)
                cursorShape: Qt.PointingHandCursor
            }
        }
    }
}

AmpMeter.qml:

// AmpMeter.qml
import QtQuick

Item {
    id: ampMeter

    property alias rotation: agullaSvg.rotation
    property string fonsSource: "qrc:/material/AmpMeterFons_c.svg"
    property string agullaSource: "qrc:/material/AmpMeterAgulla_c.svg"
    property real agullaOpacity: 0.8

    Image {
        id: fonsSvg
        source: ampMeter.fonsSource
        fillMode: Image.PreserveAspectFit
        anchors.centerIn: parent
    }

    Image {
        id: agullaSvg
        source: ampMeter.agullaSource
        fillMode: Image.PreserveAspectFit
        opacity: ampMeter.agullaOpacity
        anchors.centerIn: parent

        rotation: 0

        Behavior on rotation {
            NumberAnimation {
                duration: 300
                easing.type: Easing.InOutBack
            }
        }
    }
}

Modularitat i separació de responsabilitats

L'evolució dels codis, prenent com a referència inicial ampMeter00 _05, mostra una progressió cap a una major modularitat i control de la interfície d'usuari a través de la introducció de nous components QML i la separació de responsabilitats.

Punt de referència inicial per a la modularitat i separació de responsabilitats - ampMeter00 _05

En aquesta versió, el fitxer main.qml configura una finestra amb un Rectangle blanc. Inclou dos components QML personalitzats: AmpMeter i Botonera .

• El component AmpMeter es centra a la pantalla i gestiona la visualització del fons i l'agulla d'un amperímetre. La rotació de l'agulla es controla mitjançant una propietat rotation exposada i animada amb una NumberAnimation que utilitza Easing.InOutBack .
• El component Botonera es col·loca a la part inferior i es centra horitzontalment. S'alimenta d'un ListModel anomenat buttonModel que conté les etiquetes i els valors de rotació per als botons. Quan un botó és clicat, emet un senyal buttonClicked amb el seu valor, i aquest valor s'assigna a la propietat rotation del component ampMeter .

Introducció de Múltiples AmpMeters - ampMeter00 _06

Aquesta versió es titula "ampMeter00 _06 - Triple" i incrementa l'amplada de la finestra a 960 píxels. La millora principal és la capacitat de mostrar i controlar tres components AmpMeter simultàniament.

Exemple d'ús d'arxius SVG

• Els tres AmpMeter ( ampMeter1 , ampMeter2 , ampMeter3 ) estan organitzats en una Row (fila) centrada, amb un desplaçament vertical per deixar espai als controls. Cadascun té dimensions i escala definides de manera individual (per exemple, ampMeter1 i ampMeter3 amb scale: 0.5 , i ampMeter2 amb scale: 0.8 ).
• El ListModel dels botons es manté, però el gestor onButtonClicked a main.qml ara actualitza la propietat rotation dels tres components AmpMeter de forma idèntica ( ampMeter1.rotation = value , ampMeter2.rotation = value , ampMeter3.rotation = value ).
• Els components Botonera.qml i AmpMeter.qml conserven la seva estructura anterior.

Incorporació d'un lliscador o slider - ampMeter00 _07

Continuant amb la configuració "Triple", aquesta versió afegeix un nou element de control: un slider (lliscador).

Exemple d'ús d'arxius SVG

• Es mantenen els tres components AmpMeter en fila.
• S'introdueix un Column ( sliderContainer ) que conté la lògica del slider, situat just a sobre dels botons de control.
• Aquest slider consisteix en un Rectangle que serveix de pista i un altre Rectangle ( sliderHandle ) que fa de mànec lliscant.
• Un MouseArea permet arrossegar el sliderHandle només en l'eix X ( drag.axis: Drag.XAxis ).
• El gestor onPositionChanged calcula un valor ( value ) entre -60 i +60, el converteix en un angle de rotació entre -45 i +45, i l'aplica exclusivament a ampMeter2 ( ampMeter2.rotation = rotation ).
• Es mostren etiquetes per als valors extrems (-60 i +60) i el valor actual del slider.
• La Botonera ara només controla ampMeter1 i ampMeter3 , ja que ampMeter2 és controlat pel nou slider.

Modularització del lliscador amb BarraLliscant.qml - ampMeter00 _08

En aquesta etapa, la lògica del lliscador es refactoritza en un component QML independent anomenat BarraLliscant.qml .

Exemple d'ús d'arxius SVG

• A main.qml , el sliderContainer es reemplaça per una instància del component BarraLliscant .
• BarraLliscant.qml encapsula tota la interfície i la lògica del lliscador, incloent les etiquetes, la pista, el mànec, el càlcul del valor i la visualització del valor actual.
• Defineix propietats configurables com minValue , maxValue , sliderWidth i sliderHeight .
• Emet un senyal valueChanged(real value) quan el valor del lliscador canvia.
• A main.qml , el senyal onValueChanged de la BarraLliscant s'utilitza per convertir el valor del lliscador en rotació i aplicar-lo a ampMeter2 .
• El component AmpMeter.qml introdueix propietats fondoSource i agullaSource per personalitzar les imatges, tot i que inicialment mantenen els mateixos valors per defecte.
• La Botonera continua controlant ampMeter1 i ampMeter3 .

Modularització completa amb Vista.qml i Controlador.qml - ampMeter00 _09

Aquesta és la versió més modularitzada, amb el títol "ampMeter00 _09 - Modular". main.qml se simplifica enormement delegant les responsabilitats a dos nous components de nivell superior: Vista i Controlador .

Exemple d'ús d'arxius SVG

• Vista.qml : Aquest component agrupa els tres components AmpMeter en una Row .
  • Exposa les propietats ampMeter1Rotation , ampMeter2Rotation , ampMeter3Rotation com àlies per controlar la rotació de cada AmpMeter des del seu pare.
  • Permet personalitzar l'escala de cada AmpMeter ( ampMeter1Scale , ampMeter2Scale , ampMeter3Scale ).
  • Una novetat important és que cada AmpMeter dins de la Vista pot tenir un tipus d'animació deasing diferent ( Easing.InOutQuad , Easing.InOutBack , Easing.InOutCubic ), cosa que requereix una nova propietat easingType a AmpMeter.qml .
• Controlador.qml : Aquest component agrupa la BarraLliscant i la Botonera en una Column .
  • Rep el buttonModel per a la Botonera .
  • Emet senyals sliderValueChanged(real value) i buttonClicked(real value) per comunicar els esdeveniments dels seus components interns al seu pare.
  • Connecta el senyal onValueChanged de la seva BarraLliscant interna al seu propi sliderValueChanged .
  • Connecta el senyal onButtonClicked de la seva Botonera interna al seu propi buttonClicked .
• A main.qml , el gestor onSliderValueChanged del Controlador ara actualitza vista.ampMeter2Rotation .
• El gestor onButtonClicked del Controlador actualitza vista.ampMeter1Rotation i vista.ampMeter3Rotation .

En resum, l'evolució del codi il·lustra una transició des d'una aplicació monolítica amb la lògica de control i vista al fitxer main.qml , cap a una estructura modular on components reutilitzables ( AmpMeter , Botonera , BarraLliscant ) s'organitzen en components de més alt nivell ( Vista , Controlador ), millorant la mantenibilitat i la claredat del codi.

Implementació en Python

Exemple d'ús d'arxius SVG

Instal·lació de pyside6

• Projecte PySide6
• A Linux (Debian 13):

sudo apt install python3-pip python3-pipdeptree
sudo apt install python3-qtpy-pyside6

• A un entorn virtual a Linux o a Windows:

pip install PySide6

Compilació de l'arxiu de recursos .qrc emprant pyside6-rcc

Modificació de l'arxiu de recursos

Per a fer compatibles els arxius .qml previs, s'han afegit dues línies a l'arxiu .qrc (en negreta):

<RCC>
   <qresource prefix="/">
       <file alias="agulla.svg">material/AmpMeterAgulla_c.svg</file>
       <file alias="fons.svg">material/AmpMeterFons_c.svg</file>
       <file>material/AmpMeterAgulla_c.svg</file>
       <file>material/AmpMeterFons_c.svg</file>
   </qresource>
</RCC>

Compilació

• Cal compilar l'arxiu de recursos qrc. En aquest exemple recursos.qrc es compilat amb pyside6-rcc (nom del compilat: rc_recursos.py):

pyside6-rcc recursos.qrc -o rc_recursos.py

Execució

python main.py

main.py

#!/usr/bin/env python3
import sys
import os
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine
from PySide6.QtCore import QUrl

# Importar els recursos compilats
# pyside6-rcc recursos.qrc -o rc_recursos.py
import rc_recursos

def main():
    app = QGuiApplication(sys.argv)
    
    engine = QQmlApplicationEngine()
    
    # Afegir el directori actual al path de cerca de QML
    current_dir = os.path.dirname(os.path.abspath(__file__))
    engine.addImportPath(current_dir)
    
    # Carregar el fitxer QML principal des del sistema de fitxers
    qml_file = os.path.join(current_dir, "main.qml")
    engine.load(QUrl.fromLocalFile(qml_file))
    
    # Verificar que el QML s'ha carregat correctament
    if not engine.rootObjects():
        print("Error: No s'ha pogut carregar main.qml")
        return -1
    
    return app.exec()

if __name__ == "__main__":
    sys.exit(main())

main.qml

L'únic canvi a main.qml és el títol:

// main.qml
import QtQuick

Window {
    width: 960
    height: 480
    visible: true
    title: qsTr("ampMeter00_10 - Python")

    Rectangle {
        id: root
        anchors.fill: parent
        color: "white"

        // Model de dades per als botons
        ListModel {
            id: buttonModel
            ListElement { label: "-60"; value: -45 }
            ListElement { label: "-30"; value: -20 }
            ListElement { label: "0"; value: 0 }
            ListElement { label: "30"; value: 20 }
            ListElement { label: "60"; value: 45 }
        }

        // Component Vista amb els tres AmpMeters
        Vista {
            id: vista
            anchors.centerIn: parent
            anchors.verticalCenterOffset: -40
        }

        // Component Controlador amb BarraLliscant i Botonera
        Controlador {
            id: controlador
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottomMargin: 20

            model: buttonModel

            onSliderValueChanged: function(value) {
                // Converteix el valor (-60 a +60) a rotació (-45 a +45)
                var rotation = (value / 60) * 45
                vista.ampMeter2Rotation = rotation
            }

            onButtonClicked: function(value) {
                // Controla ampMeter1 i ampMeter3
                vista.ampMeter1Rotation = value
                vista.ampMeter3Rotation = value
            }
        }
    }
}