[Python] Giochicchiando con matplotlib e tkinter, Un test per vedere

Salve agli improbabili lettori, ogni tanto mi prende l'impulso di venire qui e lasciare un appunto ... a dire il vero, nel tempo si è accumulata un sacco di roba che vorrei scrivere qui ma è talmente tanta e così abbondante che non saprei neanche da dove iniziare ... peccato.


Comunque, in questo caso, l'impulso mi è venuto da questo post nel Forum di python.it ove l'utente @Domedron chiedeva:
"Quesito: Se creo uno spazio di lavoro con tknter, grazie all'uso dei frame so come collocare gli oggetti: pulsanti, Entry, .... Ma se in un frame volessi mettere un grafico di matplotlib in uno di quei frame come dovrei fare?"

Tanto per cambiare, non conoscevo la liberia "matplotlib" ma una veloce guardata sulla docs e su stackoverflow mi ha fatto capire "come" poter utilizzare alcuni oggetti forniti da matplotlib nell'ambito di una applicazione grafica tkinter, cosa di cui ho comunicato l'essenziale nel post sopra citato.

Per altro l'argomento intriga anche me, dato che ho visto degli esempi di utilizzo delle trasformate di Fourier e matplotlib per definire degli spettri per campionare segnali audio, cosa che si sposerebbe meravigliosamente (ammesso mi riesca di capire Fourier) con una applicazione di archiviazione e classificazione di file multimediali audio/video che ho realizzato per gioco.

In attesa di decifrare l'astrusa matematica Foureriana (o almeno capire come utilizzarla) ho sperimentato come far definire e salvare ad un generico utente un minimale grafico a barre, permettendogli di scegliere il colore delle varie barre oltre che eventuali titolo ed etichetta verticale.
Devo dire che è stato sorprendentemente facile ottenere il risultato sotto in figura

matplotlib è uno strumento straordinario, molto potente, maturo ed amichevole, rimpiango di non averlo conosciuto quando ancora lavoravo, purtroppo doversi "sbrigare" non permette molto di cazzeggiare (e quindi imparare).
Comunque è pure una libreria molto estesa, che rende necessario un approfondito studio, oltre che una certa familiarità con metodi matematico-statistici, per poterla padroneggiare.
Come accennato, matplotlib fornisce dei particolari "strumenti" per permettere l'utilizzo della libreria in alcuni framework grafici, tra cui tlinter, tali strumenti sono contenuti nel modulo "matplotlib.backends", in particolare "backend_tkagg" fornisce la classe "FigureCanvasTkAgg" che istanziata restituisce un oggetto gestibile nell'ambito di una GUI tkinter.

Di per se FigureCanvasTkAgg non fornisce direttamente molti metodi, il più interessante è "drav()" che ridisegna il widget ... però eredita una possente API dalla sua classe-madre "FigureCanvasAgg", tutta da studiarsela ma che per gli scopi posti è stato sufficiente solo sfiorare superficialmente.

Utilizzo di matplotlib nella applicazione

Premesso che il metodo adottato è certo un po' rozzo, dato che si tratta del mio primissimo esperimento con matplotlib, osservando il costruttore riportato nella documantazione per la classe FigureCanvasTkAgg

si nota la presenza di due parametri, "figure" e "master", oltre ad un deprecato riferimento ad una funzione di callback.
Il parametro "master", banalmente, è la finestra che istanzia ed espone il grafico da realizzarsi, discorso diverso è invece il parametro "figure", la lettura della docs e di alcuni esempi forniti dalla stessa documentazione mi hanno fatto ritenere sia un oggetto di classe "matplotlib.figure.Figure", oggetto terribilmente complesso già a partire dal suo costruttore riportato nella documentazione che, tra le altre cose, permette di definire le dimensioni e la risoluzione del grafico e di definire degli "assi", in realtà "axes", un oggetto che, se già Figure è complesso, questo è da mettersi a piangere!
Pasticciato un pochino con Figure ed Axes, ottenendo risultati sconfortanti (gli assi NON si vedevano) mi è casulamente caduto l'occhio sul metodo "add_subplot()" di Figure, che tra l'altro, restituisce un oggetto "axes.SubplotBase", una prova di utilizzo con i valori di default è stato il punto di svolta che mi ha rivelato quanto in realtà sia amichevole matplotlib!
Nel corso delle ricerche varie effettuate mi ero reso conto di quanto lavoro si facesse con gli oggetti Axes, pertanto ho definito una funzione da utilizzare solo in fase di inizializzazione che costruisse e restituisse un oggetto "Figure" con valori di default, eseguendo sullo stesso un "add_subplot()" minimale memorizzando quale variabile di istanza l'oggetto axes.SubplotBase restituito

L'oggetto Figure restituito da self._make_fig, viene dato in pasto alla istanza di FigureCanvasTkAgg in fase della GUI che lo espone

ovviamente, _populate() è il processo di definizione dei vari widget costituenti l'interfaccia grafica utente.

Da notare che l'oggetto di classe Figure instanziato, malgrado le sue numerose proprietà e metodi, non è stato neanche memorizzato come variabile di istanza nella gui, in effetti per i semplici scopi posti per questa prova sperimentale, ossia generare un grafico a barre a discrezione dell'user, è sufficiente agire tramite gli oggetti:

• self.ax, oggetto di classe axes.SubplotBase restituito dall'oggetto "Figure" nel metodo "_make_fig(self)" della GUI (sarebbe a dire MyApp), che provvede alla definizione di titolo ed etichetta verticale, oltre che alla definizione delle barre-dati;
• self.canvas, oggetto di classe FigureCanvasTkAgg instanziato nel metodo di inizializzazione "_populate(self)" della GUI, che provvede al ridisegno del grafico ed al suo salvataggio.

Anche la parte di codice specifica per la realizzazione (dinamica) del grafico è estremamente ridotta, una quindicina di righe, la maggior parte di recupero dati, sull'insieme di 325 costituenti l'applicazione.
Il grafico viene realizzato dal metodo "_plot(self)" della GUI

ove l'oggetto self.ax provvede ad azzerare il grafico esistente, tramite il suo metodo clear(), e quindi a definire, se stabiliti dall'user, il titolo tramite il suo metodo .set_title(stringa), etichetta verticale con il suo metodo set_ylabel(stringa), e le varie barre dati con il suo metodo bar(iterable, iterable, color=iterable); quindi l'oggetto self.canvas ri-disegna il tutto con il suo metodo draw().
Dal codice soprastante è evidente che la definizione delle barre dati viene memorizzata nella variabile di istanza self.bars della GUI che è una lista di tuple i cui vari elementi costituenti le singole tuple vengono estratti separatamente per costruire delle liste da dare in pasto a self.ax.bar(...), mentre titolo ed etichetta verticale hanno specifiche variabili di istanza nella GUI.

Anche il salvataggio del grafico in immagine, sbrigativamente impostata esclusivamente di tipo PNG, è estremamente ridotto

in sostanza a parte presentare la sottostante finestra per ottenere il nome-file di destinazione

viene utilizzato da self.canvas il metodo print_png(nome_del_file) ereditato dalla classe-madre della sua istanza.
Come impostato (cioè SENZA alcuna gestione degli errori) il "salvataggio" potrebbe dare alcuni problemi, essendo oltre tutto richiamabile a discrezione dell'utente più volte in una sessione, ma una definizione puntigliosa della GUI esula dal suo essere "prova".

I colori delle "barre"

Per non perdersi nei meandri della definizione dei colori da parte dell'user, ho deciso di ricorrere ai color-names supportati da tkinter ... e qui ho avuto una piccola sorpresa perché matplotlib NON supporta l'intero insieme dei color-names supportati da tkinter.
Faccenda, questa, che mi ha costretto a ricorrere alla, veramente ottima, documentazione di matplotlib trovando soluzione nel modulo matplotlib.colors che definisce ben tre liste di colori supportati : BASE_COLORS, TABLEAU_COLORS e CSS4_COLORS

Ho approfittato di dette definizioni per stabilire un insieme di colori da esporre all'user definendo un canvas tkinter "ordinario" popolato (con un procedimento un pochino articolato a dire il vero) da un insieme di rettangoli colorati con il colore al momento in lista e scrivendoci dentro il color-name corrispondente con il colore in negativo ed effettuando il binding del tasto sinistro del mouse in modo tale che il colore del rettangolo selezionato vada a costituire il colore di sfondo di una etichetta di esempio ed il color-name valorizza la variabile di istanza self.color.

La definizione dei colori utilizzabili completa l'insieme delle iterazioni GUI-matplotlib, tutto il resto del codice riguarda la funzionalità della GUI e l'interazione con l'user.

... riguardo al metodo di "esposizione", come detto è un po' complesso, sarebbe lungo e fuori argomento esaminarlo, si rimanda al codice dei metodi della GUI _populate_colors(self, pan) e __negative_color(self, color, cnv) oltre che all callback __rec_or_txt_select(self, evt)

Esamineremo sommariamente, invece, il funzionamento della GUI

L'interfaccia utente

Come già anticipato all'inizio, l'applicazione è mirata alla realizzazione, da parte di un generico user, di un semplice grafico a barre realizzato con definizione a piacere dell'utente di vari elementi costituenti il grafico, limitatamente ai soli titolo, etichetta verticale e barre dati.
In sostanza è un semplice "studio di fattibilità" ridotto all'osso dell'utilizzo di matplotlib in una applicazione tkinter. Come tale, è carente di numerose caratteristiche che potrebbero occorrere in una applicazione "da produzione", tipo verifica permessi di scrittura, maggiori elementi costituenti il grafico, etc.
La "costruzione" del grafico avviene con una certa dinamicità, ogni volta che l'utente definisce un elemento che lo costituisce viene involato il metodo "_plot() della GUI ed il grafico ridisegnato.

La soprastante immagine mostra una sessione in fase iniziale, in cui l'user ha solo impostato il titolo e l'etichetta verticale premendo il tasto "Imposta" dopo aver compilato i campi relativi, il callback del tasto Imposta ("_on_title(self)") effettuerà l'aggiornamento dati ed il ridisegno, si rimanda al codice per dettagli.
La definizione di titolo ed etichetta verticale può essere effettuata più volte a discrezione dell'user nel corso della sessione, fatto salvo non si sia in condizione di inserimento dei valori per una barra di dati.
La definizione di una barra avviene in due fasi, entrambe finalizzate dal pulsante "Aggiungi barra" il cui callback ("_add_bar(self)") imposta una variabile di istanza della GUI ("self.state") in modalità di aggiunta dati alla prima pressione mentre alla seconda pressione verifica se siano stati valorizzati i campi "Etichetta", "Valore" e "Colore" e la loro congruenza con le tipologie previste, se tutto è in ordine aggiunge un record al dizionario dati, ridisegna il grafico ed aggiorna l'elenco delle barre definite.

Da tener presente che mentre i primi due campi dati sono valorizzati tramite digitazione nelle entry preposte, la valorizzazione del campo "Colore" avviene cliccando su di un rettangolo colorato nel canvas dei color-names di cui si è parlato in precedenza, cosa che può essere fatta in qualsiasi momento, nulla vieta che si utilizzi la stessa colorazione per turre le barre.

C'è un bug particolare che afflige il canvas dei colori, che mi ha fatto sorridere e pensare chisenefrega : il binding del canvas dei colori è stabilito sull'intero canvas che intercetta il controllo su cui è stato fatto click, ne estrae il colore associato e fornisce il color-name alla GUI ... ma in un "rettangolo colore" vi sono DUE item, il rettangolo stesso ed il name-color associato scrittoci nel centro colorato in negativo. Qualora venga cliccato il testo interno al rettangolo verrà fornito il codice esadecimale del colore del testo, che per matplotlib andrà bene ugualmente ... ed anche per l'applicazione se l'utente decide di lasciarlo li

Per altro, comparando l'immagine sopra con quella precedente, si può osservare come i valori di riferimento di ascisse ed ordinate siano cambiati : ci ha provveduto matplotlib da se!

Un particolare che potrebbe interessare

Come accennato prima, una volta definita una barra-dati essa viene visualizzata nell'elenco delle barre definite, presente nella parte bassa della finestra, che riporta, per ogni singola barra, l'etichetta, il valore ed il colore assegnati in una visualizzazione di tipo tabellare.
Detta visualizzazione è realizzata utilizzando una classe ("DataPanel") da me "realizzata" specificatamente per la visualizzazione statica, intesa quale non modificabile, di dati tabellari e riposta nel mio "cassetto degli attrezzi" per tkinter ed il cui "costruttore"

definisce delle particolari caratteristiche di instanza e funzionamento dipendenti da alcuni parametri definiti :

il parametro "headings", obbligatorio, è dedicato alla costruzione della riga di intestazione delle colonne di dati e richiede una lista di dizionari nella quale ogni dizionario definisce l'intazione di una singola colonna e contiene cle chiavi

• "name" : è il nome interno della colonna;
• "label : l'etichetta da scrivere per la colonna;
• "measure" : una stringa che sarà valutata per definire la dimensione della colonna, se assente (valore None) la colonna avrà dimensione variabile ed adattativa allo spazio disponibile altrimenti sarà della giusta dimensione fissa.

In sostanza, una fase occorrente in fase di instanziamento di un data panel è la creazione di un tale dizionario, nel nostro caso avviene in fase di inizializzazione, verso la fine del metodo "_populate()"

In questo test è fissa, definita una singola volta ma in contesti di utilizzo uso pre-definire una serie di righe di intestazione da utilizzare dinamicamente nella stessa finestra distruggendo e ricreando dei DataPanel per diverse rappresentazioni di dati eterogenei.

Il parametro "func" permette di collegare una funzione della classe chiamante (il "parent") cui trasmettere un elemento dati eventualmente selezionato da trattare.

DataPanel prevede colorazione diversificata delle singole righe dati in base al valore (booleano) dell'ultimo elemento della singola riga dati, tale colorazione può essere invertita ponendo a True il parametro "invert", non utilizzato nello instanziamento di questa applicazione, oppure soppressa, lasciando la colorazione di default per tutte le righe di dati, ponendo a Ture il parametr "no_evidence", come fatto nel caso in specie.

L'aggiornamento dati avviene invocando il metodo "_update_data(self, message)" di DataPanel, il parametro "message", così denominato perché il contesto d'uso per cui ho pensato DataPanel è di tipo "Publisher/Subscriber", si aspetta di ricevere una lista di liste o di tuple che, in ogni caso, sarà indicizzata internamente.

Per la rappresentazione dei dati viene utilizzato un ttk.Treeview.

Nel nostro caso, abbiamo assegnato al DataPanel il metodo "selected_bar" di MyApp quale funzione per il trattamento di un elemento (barra dati) selezionato in DataPanel, tale funzione provvederà, se NON si è in fase di definizione di una nuova barra, a rendere corrente l'elemento selezionato, che potrà, nel caso essere cancellato

l'immagine soprastante riporta una esemplificazione, ho assegnto alla lattuga lo stesso colore che intendo utilizzare per le carote, non va, quindi seleziono la lattuga nell'elenco, essa diventerà l'elemento corrente, e premo il pulsante "Rimuovi barra" che, obbediente, la eliminirà senza chiedere nulla.

Per ragioni di brevità (essendo solo un test di massima) non ho voluto implementare la logica per la modifica dei dati, in ogni caso ci vuole poco ad inserli nuovamente ed una volta raggiunta una situazione soddisfacente, tipo questa

premere il pulsante "Salva" permetterà di produrre una immagine PNG da utilizzare poi per i propri scopi.

È tutto, anche se l'utente @Domedron non si è dimostrato interessato ad approfondire il discorso mi ha intrigato vedere un po' di contesto e toccare con mano quanto sia semplice un utilizzo minimale delle enormi potenzialità di matplotlib in una applicazione tkinter, le librerie richieste sono PIL e matplotlib, oltre, naturalmente, tkinter, ttk e qualcosa della libreria standard, questo post è a mia promemoria nel caso mi serva in futuro.
Se capitasse un qualche improbabile interessato lettore che volesse vedere 'sta cosa, sotto il codice sorgente completo del test