Lezione 7 Editing digitale della partitura Creazione di plug-in con interfaccia grafica Laboratorio di Informatica Musicale – Prof. Luca A. Ludovico

Come aprire una finestra di dialogo import QtQuick 2.0 import MuseScore 3.0 MuseScore { menuPath: "Plugins.pluginName" description: "Description goes here" pluginType: "dialog" version: "1.0" onRun: { // manca Qt.quit() } Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Come dimensionare la finestra import QtQuick 2.0 import MuseScore 3.0 MuseScore { menuPath: "Plugins.pluginName" description: "Description goes here" pluginType: "dialog" version: "1.0" width: 500 height: 500 onRun: { // manca Qt.quit() } Durante questa lezione si vedrà: come organizzare il codice in funzioni come gestire la selezione come creare una partitura ex novo come aggiungere metadati e simboli musicali a partiture già esistenti \ Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Come aggiungere dei controlli Innanzi tutto, è necessario importare anche la libreria QtQuick.Controls. La versione più recente supportata da MuseScore è 1.6. Esempio di prime righe di codice nel plug-in: import QtQuick 2.0 import QtQuick.Controls 1.6 import MuseScore 3.0 Quali controlli si possono usare? I controlli supportati includono etichette di testo, campi di testo, pulsanti, menu, viste di vario genere, checkbox, e molto altro… Documentazione online: https://doc.qt.io/qt-5/qtquickcontrols-overview.html Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Identificazione dei controlli Ogni componente può essere marcato attraverso un identificatore univoco attraverso la proprietà id id: nome_controllo Si noti che l’assegnamento del nome, a libera scelta dell’utente, viene effettuato senza doppi apici. Da questo punto in avanti, è possibile far riferimento al controllo attraverso il suo id e accedere alle sue proprietà e funzioni pubbliche. Ad esempio, si può creare un posizionamento relativo tra più controlli, allineando a sinistra due o più etichette di testo, e incrementando di n pixel la posizione verticale di ciascuna etichetta rispetto alla precedente. Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Tipo QML Label (etichetta di testo) Documentazione completa: https://doc.qt.io/qt-5/qml-qtquick-controls-label.html All’interno del corpo dell’istanza di MuseScore: id: miaFinestra // identifica la finestra di dialogo Label { id: textLabel text: "Hello world!" font.pointSize: 10 // avendo definito un id miaFinestra… anchors.left: miaFinestra.left anchors.top: miaFinestra.top anchors.leftMargin: 10 anchors.topMargin: 10 } label_example.qml Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Esercizio su Label Si crei un plug-in MuseScore che analizzi tutte le note contenute nella partitura e ne estrapoli il pitch class. Per definizione, il pitch class si ottiene dalla proprietà pitch delle note (che compongono, ovviamente, i soli accordi) attraverso l’operazione di resto della divisione intera: pc = pitch % 12 Si mostrino le numerosità delle 12 pitch class così ottenute attraverso un’interfaccia grafica basata sulle Label. Versione semplificata: si consideri solo la prima voce del primo pentagramma. Soluzione: pitch_class.qml Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Tipo QML TextField (campo di testo) Documentazione completa: https://doc.qt.io/qt-5/qml-qtquick-controls-textfield.html All’interno del corpo dell’istanza di MuseScore: TextField { id: textFieldTitle width: 300 text: "Testo del campo" placeholderText: "Testo segnaposto" readOnly: true } Esempio: textfield_example_1.qml Però in questo modo il campo di testo è passivo, come una label. Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Tipo QML TextField (campo di testo) Per rendere attivo il campo di testo, ossia poter scrivere il codice che risponde a un’azione di compilazione e conferma, è necessario sfruttare i cosiddetti segnali: accepted() Emesso alla pressione dei tasti Return o Enter. Viene gestito da un handler chiamato onAccepted. editingFinished() Emesso alla pressione dei tasti Return o Enter, o quando il campo perde il focus. Viene gestito da un handler chiamato onEditingFinished. Esempio: textfield_example_2.qml Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Come definire proprietà Se una classe, o tipo QML, deve essere arricchita con proprietà inizialmente non previste dalla classe stessa, è possibile aggiungerne altre con la sintassi: property nome_tipo nome_proprietà : valore ove la sintassi dal : in avanti è opzionale ed effettua un assegnamento di default. A questo punto, valgono per queste proprietà definite dall’utente le regole di visibilità (scope) delle proprietà predefinite. Il prossimo esercizio, incentrato sui pulsanti, ne darà un esempio. Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Tipo QML Button (pulsante) Documentazione completa: https://doc.qt.io/qt-5/qml-qtquick-controls-button.html Button { text: "Button" } Un pulsante emette il segnale clicked() quando viene attivato. Vengono inoltre gestiti i segnali canceled(), doubleClicked(), pressed(), released() e pressAndHold() per le pressioni prolungate. Gli handler relativi sono onClicked, onCanceled, ecc. Esempio: button_example.qml L’esempio mostra anche come definire nuove proprietà Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Parte 2 ESERCITAZIONE Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica

Esercizio Si consideri il controllo RadioButton, non ancora spiegato (attenzione: richiede anche la definizione di un ExclusiveGroup) Documentazione: https://doc.qt.io/archives/qt-5.10/qml-qtquick-controls-radiobutton.html Si crei un’interfaccia grafica che presenti dei radio button per selezionare il valore ritmico da considerare. Per comodità, ci si limiti ai valori più comuni: 1/16, 1/8, 1/4, 1/2 e 1/1. A seconda della scelta effettuata, si aggiorni una label che conta il numero di accordi della durata selezionata. Si utilizzi a tale scopo l’handler onClicked che richiama una funzione cui si passa il valore associato al radio button. Possibile soluzione: count_rhythms.qml Editing digitale della partitura - Prof. Luca A. Ludovico 7. Creazione di plug-in con interfaccia grafica