Il codice che sto commentare non è mio quindi non me ne rendo merito.
Pensate quello che volete che sto copiando codice a destra e a manca ma i più grandi pittori copiano i migliori. Dopo si passa alla fase successiva cioè la creazione di un opera.
Che sia un’opera d’informatica o di scultura o di pittura o di letteratura poco importa.
Sto facendo questo per trattare argomenti un po avanzati qui.
Detto questa promessa Doverosa posiamo inizare.
Ecco qui il main.
Lo so non è niente di speciale. ma è quello che ci servirà per avviare l’interfaccia grafica in kivy.
from kivy.app import App class CalcApp(App): def calc(self, label): try: label.text = str(eval(label.text)) except: label.text = 'syn error' CalcApp().run()p
Adesso si inizia il vero e proprio codice.
Ecco tutto il codice.
BoxLayout:
orientation: 'vertical'
Label:
size_hint_y: None
height: '50dp'
id: calc
text: ''
GridLayout:
cols: 4
Button:
text: '+'
on_press: calc.text += '+'
Button:
text: '-'
on_press: calc.text += '-'
Button:
text: '*'
on_press: calc.text += '*'
Button:
text: '/'
on_press: calc.text += '/'
Button:
text: '9'
on_press: calc.text += '9'
Button:
text: '8'
on_press: calc.text += '8'
Button:
text: '7'
on_press: calc.text += '7'
Button:
text: 'CE'
on_press: calc.text = ''
Button:
text: '6'
on_press: calc.text += '6'
Button:
text: '5'
on_press: calc.text += '5'
Button:
text: '4'
on_press: calc.text += '4'
# let's rowspan 2
Widget:
Button:
y: placeholder1.y
x: self.parent.x
width: self.parent.width
height: self.parent.height + placeholder1.height
text: '=' # testo non interpretato
on_press: app.calc(calc)
Button:
text: '3'
on_press: calc.text += '3'
Button:
text: '2'
on_press: calc.text += '2'
Button:
text: '1'
on_press: calc.text += '1'
Widget:
id: placeholder1
# placeholder for the '=' rowspan
# let's colspan 4
Widget:
Button:
pos: self.parent.pos
height: self.parent.height
width: self.parent.width * 4
text: '0'
on_press: calc.text += '0'
Analizziamolo insieme.
Ho fatto un riepologo nell’immagine qui sotto per capire cosa ingloba chi, quindi ci capiamo meglio entrambi. Iniziamo con la scatola più esterna e parliamo della BoxLayout di colore blu Chiaro.
Dentro questo boxLayout di tipo verticale abbiamo 2 spazi che contengono un’etichetta e un’altro blocco di nome GridLayout.
Come state vedendo il layout possiamo inglobarlo l’uno dentro l’altro.
Questo è molto importante perchè abbiamo già un’organizzazione visiva.
Infatti un consiglio che vi do se volete fare interfacce grafiche fatele prima su carta e cercate di pensarla come sarà completa.
Il passaggio successivo è capire dove e come dividere il problema in pezzi più piccoli.
La riga 4 : size_hint_y: none sta a significare che gli stiamo suggerendo a kivy la dimensione di Y nessuna. Questo lo si fa perchè vogliamo utilizzare il parametro “height”.
La riga 5 Height : ’50dp‘ sta a indicare a kivy che l’altezza deve essere 50 densità dipendente da pixel.
La riga 6 crea una variabile che la possiamo gestire con un id. La sigla id sta identification cioè un identificativo. In altre parole è una variabile assegnata all’etichetta Label.
La riga 7 text: ” definiamo che il testo deve essere nullo. Da notare i 2 apostrofi vicini.
Da ora in poi c’e tutto il programma vero e proprio in quanto c’e la parte logica dentro kivy.
Quindi come abbiamo accennato prima creiamo un griplayout sarebbe una disposizione a griglia con 4 colonne ( righe 9 – 10).
A Questo punto c’e l’assegnazione per tutti i tasti della calcolatrice.
I tasti sono : + – * / 1 2 3 4 5 6 7 8 9 0 CE .
Il procedimento vale sia per per i numeri che per le operazioni.
Quindi si crea un bottone per ciascuno con il tasto con il simbolo più e poi colleghiamo un’azione quando è pressato. Quando il pulsante è premuto aggiungi alla coda della nostra funzione.
Quindi si scrive calc.text perché?
Perchè calc iniziale riferisce alla Classe dentro “CalcApp“.
Detto in linguaggio colloquiale Pythonista si dice che si richiama il metodo della funziona calc.
La parola text è una parola chiave del Label che possiamo gestire e modificare a nostro piacimento. Infatti per sfruttare questa funzione scriviamo on_press: calc.text += ‘+’ .
Quindi ricapitolando on_press: calc.text += ‘+’ significa che alla pressione accoda alla variabile text che sta dentro l’ID della prima etichetta( riga 3 )
Prima ho scritto che tutto questo serviva per tutti tranne alcuni tasti della nostra calcolatrice perchè quest’ultimi hanno delle caratteristiche molto interessanti.
Sto parlando del tasto CE e del tasto uguale.
Il tasto di ogni tastiera con la dicitura CE sta per cancella quello che si è inserito sul momento.
Esisterebbe pure il tasti C che cancella tutto in memoria cioè noi inseriamo 3 + 4 e vogliamo calcolare altro dobbiamo premere il tasto C.
Invece se abbiamo solo premuto 4 al posto di 8 basta solo premere CE.
Nel nostro caso l’esempio sono mischiate queste funzioni.
Quindi in definitiva abbiamo on_press: calc.text = ” la sintassi dice che assegna una stringa nulla.
Assegnando una stringa nulla cancelliamo tutto il contenuto della variabile.
Siamo arrivati alla Riga 45 – 46 . Qui l’autore della calcolatrice ha creato un widget su misura per l’occasione. Nelle righe che seguono cerca di prendere i valori in basso a destra della gui e si prende 2 spazi verticali.
Riga 47 si crea un widget con dentro un button con y: placeholder1.y.
Assegniamo alla Y che cosa un “segnaposto” che si riferisce ad un id widget creato più avanti per risolvere il problema, quel punto si mette per specificare il parametro l’asse Y. Vi ricordo che gli assi partono in basso a sinistra.
La riga 48 troviamo x: self.parent.x , parent si riferisce al genitore che lo ha generato.
La riga 49 width: self.parent.width impostiamo la larghezza con il concetto precedente del genitore ma scegliamo di assegnargli il corrispettivo della lunghezza.
La riga 50 questo testo non è interpretato che vuol dire? Cioè che non esegue operazioni è come se fosse un etichetta mostra soltanto.
La riga 50 troviamo on_press: app.calc(calc) , alla pressione richiama il metodo app.calc e passaci l’ID dell’etichetta calc. Se vogliamo capire che stiamo parlando di ID e non della funzione possiamo fare questo trucchetto veloce. Assegnamo alla riga 7 questa dicitura text: ‘5+5’, e poi alla riga 52 immettiamo questo on_press: app.calc(calcolo).
Se non facessimo queste 2 modifiche comparirebbe l’errore dell’eccezione del programma la dicitura “syn error”. Ovviamente questo serviva per non far premere gli altri tasti in modo momentaneo perchè nei tasti non esiste una variabile di nome calcolo ma esiste una di nome calc. Ovviamente Python non la trova e ci dice tante brutte parole, della seria ho provato a cercarla qui ma non trovo dove è stata definita sino che non finisce del tutto il listato.
Nella riga 62 – 63 quindi troviamo questo widget spoglio ma con un bel id che gli serve da segnaposto come suggerisce il commento sotto serve per il simbolo uguale.
La riga 66 – 67 si crea la spaziatura della colonna di 4 unità.
La riga 69 definiamo la posizione con pos: self.parent.pos .
La riga 70 definiamo l’altezza con height: self.parent.height
La riga 71 definiamo la larghezza con width: self.parent.width * 4
La riga 72 impostiamo il testo con il testo zero.
La riga 73 accodiamo alla pressione che l’identificativo ID(calc) zero -> on_press: calc.text += ‘0’
Avviando il programma comparirà quando segue in figura.
Potete tranquillamente giocarci e modificare il codice come ho descritto sopra.
Per favore se ho fatto qualsiasi tipo di errore contattatemi tranquillamente nei commenti.
Ci vedremo nel prossimo tutorial di Kivy.
Mi piacerebbe sapere se questo tipo di tutorial descrittivo ti è piaciuto.
La tua idea è importante!