martedì 31 dicembre 2013

FreeDrawing: disegnare e scrivere a mano libera (Android e iOS)

Una richiesta che spesso mi è stata fatta nelle ultime settimane è quella di poter far firmare un utente su un dispositivo mobile in una applicazione fatta con Delphi.
Al di là delle questioni legali relative, ho pensato che potesse essere interessante realizzare un'applicazione mobile che permettesse di disegnare a mano libera (o con un pennino).

Devo dire che è stato relativamente semplice, grazie agli strumenti messi a disposizione da FireMonkey.
L'idea di fondo è quella di sfruttare l'evento OnMouseMove di una TImage e disegnare sul canvas della Bitmap della TImage stessa.

Alcuni punti fondamentali che voglio brevemente evidenziare:
  1. grazie all'evento OnMouseMove abbiamo a disposizione le coordinate X e Y dei punti attraversati durante l'azione di disegno effettuata dall'utente con il dito o con il pennino;
  2. molte opzioni di disegno sono disponibili fra le proprietà dell'oggetto TStroke del canvas stesso;
  3. sfruttiamo i metodi DrawLine e DrawEllipse di TCanvas per realizzare la linea spezzata che congiunge i punti rilevati nell'handler di OnMouseMove e per disegnare dei punti nel caso di tocchi singoli sulla superficie di disegno (ottimo per realizzare i puntini sulle i e la punteggiatura);
  4. grazie ai componenti TColorPicker e ai TColorQuad, è facile permettere all'utente di personalizzare i colori dello sfondo e del tratto;
  5. un semplice algoritmo per ridurre "glitches" nel disegno (soprattutto nella scrittura a mano libera) è stato implementato tenendo in considerazione la distanza fra due punti da unire nelle spezzate e il gap temporale fra due tocchi distinti (anche qui, usando i componenti TTrackBar, è facile dare un minimo di personalizzazione dei parametri dell'algoritmo all'utente);
  6. l'uso di un Drawer (cfr. articolo e video tutorial di Josè Leon) ci permette di avere la massima superficie di disegno a disposizione e al contempo realizzare una GUI intuitiva per l'utente;
  7. la TToolbar superiore permette facilmente di mettere a disposizione dei comandi rapidi all'utente fra cui troviamo anche i pulsanti per utilizzare una immagine scattata dalla fotocamera (o presa dalla galleria immagini del dispositivo) come sfondo; da notare come l'implementazione di questa funzionalità (utilizzare un'immagine già scattata o scattare un'immagine dalla fotocamera) non abbia richiesto che le tre righe di codice necessarie a disegnare (in stretch mode) l'immagine selezionata sulla nostra superficie di disegno, grazie all'uso delle TTakePhotoFromCameraAction TTakePhotoFromLibraryAction a disposizione fra le standard action;
  8. Ultima ma non meno importante, una volta completato il nostro disegno, l'utente può condividere il risultato attraverso lo ShareSheet standard di sistema, che permetterà di inviare il contenuto (la Bitmap) a qualunque applicazione installata sul nostro dispositivo (ottimo per inviarla via social networks o per email / instant messaging).

Conclusioni e materiale

Realizzare una semplice applicazione per il disegno a mano libera (e scrittura) è possibile con Delphi XE5 ed è possibile, con poco sforzo, realizzare le funzionalità fondamentali per offrire all'utente una buona esperienza d'uso. Grazie a FireMonkey molte di queste funzionalità sono realizzabili con pochissime righe di codice (scattare una foto dalla camera, usare un'immagine dalla libreria, condividere il risultato del disegno con altre applicazioni).

Trovate i sorgenti completi dell'applicazione qui: Link to sources DXE5
Demo: Link to Android APK

Di seguito qualche screenshot preso con il mio Nexus 7, e con l'occasione possiamo anche farvi i migliori auguri per un felice anno nuovo!

FreeDrawing semplice (auguri!)

FreeDrawing con una foto come sfondo

FreeDrawing, opzioni di disegno nel drawer

Ed ecco uno screenshot da un iPad 4:
FreeDrawing su iPad4 (iOS 7)

lunedì 16 dicembre 2013

Gli strumenti per potenziare l'IDE di Delphi (Parte 2 - GExperts)

La seconda puntata di questa serie dedicata agli strumenti per potenziare l'IDE di Delphi prende in esame un tool storico, i GExperts.
Nome:GExperts
Sito:http://www.gexperts.org/
Download per XE5:Experimental for Delphi XE5
Licenza:Open Source
Prezzo:0€



GExperts è il tool che installo ed uso fin dalle prime versioni di Delphi, è un progetto Open Source iniziato da Erik Berry nel 1996 e poi portato avanti dal "GExperts Development Team"


Una volta installato i GExperts vedrete un nuovo menu in Delphi GExperts che contiene tutti i (numerosi) comandi e le impostazioni di questo strumento.
Come nel caso di ModelMaker Code Explorer vi mostrerò una selezione dei comandi e funzionalità che ritengo più utili e che uso più spesso mentre vi invito ad esplorare estesamente questi tool e scegliere poi quali sono le caratteristiche che a voi sembrano più interessanti.

Backup dei progetti

La prima funzionalità che vi descrivo è il backup dei progetti che, soprattutto in passato, ho usato parecchio. Il funzionamento è semplice, l'expert prende l'elenco dei file dalle impostazioni di progetto e crea un archivio compresso (zip) con un nome scelto dall'utente. Ovviamente è possibile aggiungere file che non sono del progetto (configurazione, risorse, ecc...)
Come ho accennato sopra ultimamente uso sempre di meno questa funzionalità visto che da numerosi anni uso altri strumenti per gestire il codice sorgente, ovvero i version control. Se siete interessati all'argomento i version control saranno oggetto di un prossimo articolo.

Class Browser



La finestra Class Browser è una vista utile sulla classi del progetto (anche qui viene effettuato il parsing dei file del progetto per popolare l'elenco delle classi). E' possibile navigare tra le varie classi e tra i membri delle stesse. In Delphi questa funzionalità è presente in due viste: la vista Structure e la vista Delphi Class Explorer.

Clean Directories

La funzionalità della pulitura delle directory è allo stesso tempo molto senplice e molto utile. Ormai i file di Delphi "di contorno" si sono moltiplicati, dai vecchi .dsk o .ddp ai recenti .local e .identcache, più vari file di backup ed altri ancora. La presenza di questi file (che sono solo di supporto all'IDE per vari task) rende noiosa la pulizia manuale del progetto ad esempio prima di un backup o di un'importazione in un version control. La "pulizia" diventa invece quasi obbligatoria se dobbiamo spedire il progetto ad un collega oppure renderlo aperto al pubblico.
Il comando Clean presente in questa finestra consente quindi di cancellare in un colpo solo tutti i file non richiesti con una personalizzazione molto potente.

Code Librarian


Una vera e propria gemma nascosta (che oggigiorno andrebbe ripensata in versione "remotizzata") è il tool Code Librarian, in pratica un browser di "code snippets" più utili o ricorrenti da richiamare in ogni momento con funzionalità di copia dall'IDE e incolla sull'IDE per velocizzare le operazioni. Questo tool si basa su un file in formato ClientDataSet (salvato in formato binario) che contiene i nostri pezzetti di codice con la possibilità di salvarli in folder e sotto folder. E' anche possibile mettere il file degli snippets in una directory su una share di rete in modo da condividerli tra diversi sviluppatori (ovviamente sulla stessa rete).

Components to Code

Altra funzionalità essenziale, soprattutto per chi è alle prime armi o vuole farsi aiutare nella costruzione a runtime dei componenti Delphi, è la conversione che effettua GExperts di un componente piazzato sul form o su un DataModule a Design Time nelle righe di codice necessarie a definire, creare e configurare il suddetto componente.

Nella foto sopra potete vedere un classico componente data aware (in questo caso una query UniDAC) convertito con il comando di GExperts Components to Code, a destra il risultato del comando incolla in un metodo del DataModule. Da quyesto momento potremo eliminare il componente a Design Time e tenere il codice corrispondente a Run Time.

Editor Experts

Il sotto-menu Editor Experts visualizza una serie di comando molto utili per la scrittura e la modifica del codice sorgente nell'editor di Delphi. 


Come vedete si tratta di una serie di comandi da menu con relativo shortcut per applicare alcune trasformazioni al testo del nostro codice. Alcuni sono per me irrinunciabili, vdiamoli:
  • Ctrl-Alt-Z Allinea linee diverse di codice sorgente in base ad alcuni identificatori (se avete decine di righe di lettura da field di un dataset dovete assolutamente provarlo)
  • Shift-Alt-R inverte la parte di statement a destra del := con quella a sinistra. Anche qui per intuire la comodità del comando pensate che le vostre 100 righe di lettura dai campi del dataset possono essere trasformate istantaneamente nella scrittura dei campi stessi.
  • Ctrl-Alt-Up e Ctrl-Alt-Down - Questi comandi consentono di "saltare" dalla parola su cui è posizionato il cursore alla stessa parola più avanti o più indietro nel codice. Per me indispensabili. La percentuale di utilizzo  di questi due comandi rispetto alle funzioni classiche di ricerca (F3, ecc...)  per quanto mi riguarda è di 100 a 1.

Expert Manager


La finestra Expert Manager consente di gestire gli expert installati nell'IDE in modo semplice ed intuitivo invece di giocare con le stringe nel registry in Windows. Il tool è utile soprattutto per testare Delphi senza caricare expert che possano falsare il risultato oppure per verificare che alcune instabilità dell'ambiente Delphi non siano in realtà imputabili a qualche expert in particolare.

Grep Search

Qualora le funzioni di ricerca di Delphi o di altri experts non riescono avenirvi in aiuto la funzione Grep Search dei GExperts fa al caso vostro.


Diciamo che è una funzione di ricerca del testo all'interno di file (non solo quelli Delphi) molto veloce, precisa e configurabile. Potete ricercare del testo (anche con le Regular Expression) nel file corrente, in tutti i file del progetto oppure a partire da una (o più di una) directory, è possibile escluderne alcune e provvedere alla mask per il tipo di file in cui ricercare. 
La funzionalità di search all'interno dei file è talmente utile che è possibile usare il "Grep Search" direttamente dalla shell (explorer) sostituendo così l'orribile funzionalità di ricerca di Windows.

Hide/Show non Visual

Se avete molti componenti non visuali piazzati sulle form timer, actionlist, imagelist, menu, popup, datasource ma soprattutto dataset (questi ultimi andrebbero però tolti e piazzati su datamodule) e dovete continuamente spostarli per vedere i controlli UI messi sotto questo comando è perfetto per voi, nasconde (e poi visualizza) tutti i componenti non visuali sul form corrente.

IDE Menu Shortcut



Questo tool è interessante qualora i vostri comandi preferiti (parlo di tutto l'IDE di Delphi, non solo dei GExperts) non abbiano uno shortcut associato. Con questo tool, appunto, è possibile assegnarne uno (o cambiarlo se è in conflitto oppure vi è scomodo)

Replace Components

Questo è un tool che mi ha fatto risparmiare (e ha fatto risparmiare a migliaia di programmatori Delphi) diverse ore di lavoro e possibili errori. Vi descrivo un possibile scenario: voi (il vostro capo, il vostro cliente) avete deciso che i pulsanti standard non vi vanno più bene e volete sostituirli con pulsanti molto più belli. A questo punto di solito comincia un lavoro di sostituzione immane (se il progetto è grande) che può anche portare all'introduzione di bug se no fatto in modo preciso. Se invece avete installato i GExperts potete selezionare il componente tipo che volete sostituire (un TButton) invocare il comando Replace Components impostare la configurazione appropriata... et voilà la conversione su tutto il progetto è già terminata.

Come vedete dall'immagine le opzioni sono piuttosto chiare. 


Per raffinare il processo di conversione poi, è possibile dalla voce Settings accedere ad un'altra finestra di opzioni da cui potete mappare una proprietà del componente sorgente ad una proprietà (anche con nome diverso) del componente di destinazione.

Set Tab Order



Nei programmi non c'è nulla di più fastidioso (per chi è abituato a lavorare con la tastiera) di premere Tab per spostarsi sul campo successivo ed invece saltare in modo quasi casuale a qualsiasi controllo sul form. Come ovviamente sapete è frutto di una non corretta impostazione del Tab Order su form. Con questo strumento dei GExperts potete invece tenere sotto controllo (e cambiare) l'ordine dello scorrimento dei campi nella vostra maschera.

Conclusioni

Ricordo ancora che i GExperts contengono più funzionalità rispetto a quelle presentate in questo articolo e quindi vi esorto a testare i vari tool contenuti per trovare quelli più utili a voi.

Nel prossimo articolo prenderemo in esame uno strumento che si è affacciato da alcuni anni nel panorama Delphi, CnPack.

Se avete quesiti o proposte di recensione di altri tool scrivetemi o lasciate un commento su questo blog.

giovedì 12 dicembre 2013

Delphi XE5 Update 2 disponibile!

Da ieri è disponibile il secondo aggiornamento per RAD Studio XE5 (Delphi e C++) se per gli sviluppatori C++ la novità più interessante è il supporto per iOS, per gli sviluppatori Delphi ci sono (oltre a numerosi bug-fix) alcune nuove funzionalità decisamente interessanti.

Fra queste, vi segnalo il Mobile Preview, che permette sostanzialmente di sviluppare la vostra applicazione mobile  in un ambiente Win32 quindi con tempi di compilazione ridotti ma senza rinunciare all'applicazione dello stile FireMonkey mobile, semplificando di molto anche molte operazioni di debug.

Buon download!