La realizzazione di questa applicazione è spiegata passo passo nei tutorial "base" che trovate nella home page ufficiale di App Inventor.
Due sono le motivazioni che mi hanno spinto a creare una video guida a riguardo:
- Tutti i tutorial alla pagina di App Inventor sono in lingua inglese
- i tutorial alla pagina di App Inventor introducono passo passo alle varie caratteristiche e potenzialità di questo linguaggio di programmazione.
Ho ritenuto dunque utile farla in screencast cercando di spiegarla al mio meglio ed ovviamente in italiano, spero di fare cosa gradita...
Se invece pensate che queste guide siano troppo semplici e non vi servano a nulla, scrivetemelo pure nei commenti e vedrò di trovare argomenti più interessanti per le prossime.
Un rapido riassunto dell'applicazione che andremo a creare oggi:
PaintPot è un applicazione che permette di "disegnare" sullo schermo del telefono con le dita.
In questo modo impareremo a usare gli elementi chiamati "Canvas" di App Inventor, Canvas (letteralmente "tela da disegno") è un elemento che offre parecchi metodi e funzioni per il disegno su schermo.
Inoltre introduciamo l'elemento Screen Arrangement (nello specifico un Horizontal Arrangement) per ordinare in maniera pulita i pulsanti sullo schermo.
Come suggerisce Google, completate tutti i suoi tutorial per fortificare le vostre conoscenze di App Inventor.
...vi auguro quindi ... Buona Visione!
Parte 1 - Piazziamo gli elementi nel Design Editor:
Parte 2 - Creiamo il codice di controllo tramite Blocks Editor:
Ed ora il file che ho utilizzato per il tutorial (comunque qualsiasi immagine a 320x300 pixel va bene)
Immagine Gatto
Ma per creare un tasto che salvi la foto modificata come si può fare?
RispondiEliminaPurtroppo non si può fare;il disegno fatto sul canvas dura soltanto finchè l'applicazione è in esecuzione.
RispondiEliminaChe sappia non è possibile salvare il canvas modificato, mi spiace...
ok grazie mille per la tua disponibilità.... complimenti per i tutorial:)
RispondiEliminaciao io ero riuscito anche sensa seguire il tuo tutorials solo che a me invece di creare una rserie di punti uniti crea una serie di rette e non capisco il motivo dove e l errore
RispondiEliminaIo ho visto che c'è la funzione save e save as. Non potresti delucidarci su come utilizzarli? :D Grazie mille per i tuoi tutorial.
RispondiEliminaC'è un tutorial apposta,
Eliminahttp://seblogapps.blogspot.com/2011/06/tutorial-12-funzione-canvas-save-e.html
buona visione :)
Eccomi!
RispondiEliminaDomanda: se invece di utilizzare le dita desiderassi che uno strite lasciasse una 'scia' di colore quando si muove tramite l'orientalsensor?
Se po' fà?
Guarda il tutorial sul "gioco" del bilardo per capire come usare orientationsensor, invece di muovere la pallina puoi far disegnare sul canvas il tracciato, quindi devi "mixare" paintpot con l'altro tutorial! fammi sapere se ci riesci! ciao!
EliminaAllora sono a metà dell'opera perchè il 'gioco' del biliardo l'ho già 'smanettato' a dovere... adesso vediamo di mixare il tutto!
RispondiEliminaTi tengo aggiornato sulle mie sperimentazioni.
=)
http://micioville.altervista.org/files/disegno_sprite.jpg
RispondiEliminaCi sono riuscita!
Manca un piccolo dettaglio... se possibile.
Non riesco a far disegnare una linea continua dallo sprite (ho fatto varie combinazioni con il Dragger, il DrawLine e il call all'argomento Stella1 ma nulla di fatto). Riesco a far disegnare solo dei circoletti che, se lo sprite si muove piano, vanno a formare quasi una linea continua ma se lo sprite va troppo veloce, mi disegna i corcoletti troppo distanziati tra di loro e l'effetto linea va a farsi benedire.
Ho provato a inserire un Internal e dargli un numero basso ma non è servito a nulla.
Tu hai un suggerimento?
mi vengono in mente due cose, o provi a ridurre il timer del clock per leggere più frequentemente la posizione del cursore oppure invece di disegnare un punto usi la funzione che disegna delle linee, però così facendo devi memorizzare la posizione x-y prima del movimento e quella x1-y1 dopo che c'è stato l'evento clock. Spero di essermi spiegato e di averti dato qualche ulteriore spunto! :)
EliminaHo messo il clock a 1 e rallentato la velocità dello sprite a 300 e direi che ci siamo quasi alla perfezione perchè se lo sprite prende l'abbrivio i puntini si distanziano(dato che nell'editor non mi fa mettere decimali, ho provato a diminuire l'intervallo inserendo un block 'interval' con valenza 1/4 ma non è cambiato nulla... mi accontenterò del minimo consentito).
RispondiEliminaOra devo capire come creare un muro perfetto con uno sprite. Ci sono quasi riuscita ma ogni tanto la pallina che ci sbatte contro 'sclera' invece di rimbalzare e non vorrei fosse un limite dell'emulazione quindi, prima di arrabbiarmi, tenterò l'installazione dell'app. =)
Grazie della dritta!
Buongiorno!
RispondiEliminaSecondo te, esiste la possibilità di rendere la canvas più 'reattiva'?
C'è un po' di ritardo tra quando il pennino tocca lo schermo a quando parte il segno... =(
penso proprio di no, purtroppo dipende da come è realizzato App Inventor, magari su telefoni più potenti è più reattivo ma non vedo alcun modo per velocizzarlo tramite blocks editor, sorry:)
EliminaOk... aspettiamo che App.Inventor migliori. =)
RispondiEliminaHo il Galaxy Note e mi da circa 1 secondo di ritardo... SOB!
Altro quesito: vorrei che uno sprite fungesse da 'pennello' ossia che compaia quando e dove tocco la canvas e si muova seguendo il tocco del pennino.
Secondo te è fattibile?
Sarei già felice di poter muovere lo sprite toccandolo... ho gia fatto alcune prove ma ci sto uscendo matta perchè non riesco a dare il comando che voglio!!!
Eppure mi pare così assurdo che non si possa fare...
non ho mai approfondito tanto l'uso degli imagesprite ma penso che con i metodi dragged e moveto lo puoi muovere dove vuoi
EliminaAltro conto è se vuoi che "scriva" sul tuo canvas lasciando come una scia come se lo usassi a mò di "stampino",in questo caso non credo sia possibile.
Fammi sapere se non riesci che vedo di darti qualche ulteriore dritta:)
Emanuela,
Eliminascusa il fuori-tema, ma anche io ho il Galaxy Note (Android 4.0.4) ma in questo tutorial, quando scatto la foto per metterla come nuovo sfondo, non succede niente.
Si apre la modalità fotocamera, scatto la foto, clicco su "salva" e poi non aggiorna il canvas.
A te funziona correttamente?
Ciao e grazie,
Fulvio
Ho avuto un'illuminazione!
RispondiEliminaOggi non ho tempo ma domani provo e ti faccio sapere (se mi riesce metto screenshot).
Comunque non voglio che faccia da stampino ma che sia solo una mera immagine del pennello.
Niente da fare... ho dato vari comandi come velocità (800) e intervallo (10) e li ho aggiunti a questi blocchi: ImageSpriteTouched; ImageSpriteDragged; CanvasDragged in varie combinazioni. Picche! Non riesco a trascinare lo sprite per lo schermo... SANTI NUMI!
RispondiEliminaCI SONO RIUSCITA!!!
RispondiEliminaHo azzerato tutti i parametri dello sprite e poi, sul block editor ho messo il Dragger con MoveTo > CurrentX e Current y
=)
Ottimo!sapevo che prima o poi ci saresti riuscita! complimenti!
EliminaSto cercando di aumentare la sensibilità del Dragged sulla canvas utilizando il clock (con interval 10)... sin'ora sono stata bravissima amandare l'app in crash!!!
RispondiEliminaPerò, secondo me, la soluzione è qui... MUMBLE MUMBLE...
mmhhh, non so che dire, ti conviene ovviamente provare ad incrementare pian piano l'intervallo finchè trovi un buon compromesso tra stabilità e velocità... :)
EliminaNon mi parte mail l' emulatore.
RispondiEliminaCome mai su un' altro computer si ?
Ciao ragazzi, avete risolto il fatto di poter dare una maggiore sensibilità al tracciamento delle linee??
RispondiEliminafintanto che non aggiorneranno questo componente penso ci sia poco da fare, poi dipende anche dalla potenza del telefono su cui gira la nostra app.
EliminaAd ogni modo secondo me le cose non cambieranno a breve, il componente c'è e funziona in modo "discreto" per i fini per cui è stato concepito, ad ogni modo se ci saranno novità ti farò sapere, ciao
Salve sebastiano io vorrei creare proprio un'applicazione simile alla tua ma con la possibilità di seleziona tramite un tasto una foto dalla galleria che dici si può fare
RispondiEliminaPuoi usare il componente "ImagePicker" per caricare una foto dalla galleria, poi la usi come canvas e ci disegni sopra come mostro in questa semplice app
EliminaCiao Sebastiano....grazie per i tuoi video innanzitutto. Avrei da chiederti un chiarimento...
RispondiEliminaVorrei creare un app in cui c'è un solo screen in cui appaiono delle miniature piccole di 10 immagini...cliccando su una di esse vorrei che si possa vedere a schermo intero l'immagine selezionata....potresti fare un video in cui mostri come fare?
Ciao, non farò un video per fare quello che chiedi (credo non interessi a molte persone)
Eliminaad ogni modo puoi realizzare una cosa simile mettendo un table arrangement con dentro 10 button,
ogni button ha come immagine di sfondo la tua immagine (magari specifichi la dimensione in pixel, tipo 20x20 o 15x15 pixel)
all'evento button click di ogni button rendi non visibile il TableArrangment ed imposti a visibile magari un altro elemento "image" che prima era non visible (ed era fuori dal TableArrangement) in modo che l'immagine scelta si veda a tutto schermo
Spero di essermi spiegato, ciao