Cerca con Google

Translate

24 maggio 2011

Tutorial 9 - Realizziamo l'applicazione PaintPot (parte 1)


Eccoci alla guida di oggi, la creazione dell'applicazione Paint Pot con App Inventor.
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:

  1. Tutti i tutorial alla pagina di App Inventor sono in lingua inglese
  2. 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

30 commenti:

  1. Ma per creare un tasto che salvi la foto modificata come si può fare?

    RispondiElimina
  2. Purtroppo non si può fare;il disegno fatto sul canvas dura soltanto finchè l'applicazione è in esecuzione.
    Che sappia non è possibile salvare il canvas modificato, mi spiace...

    RispondiElimina
  3. ok grazie mille per la tua disponibilità.... complimenti per i tutorial:)

    RispondiElimina
  4. ciao 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

    RispondiElimina
  5. Io ho visto che c'è la funzione save e save as. Non potresti delucidarci su come utilizzarli? :D Grazie mille per i tuoi tutorial.

    RispondiElimina
    Risposte
    1. C'è un tutorial apposta,
      http://seblogapps.blogspot.com/2011/06/tutorial-12-funzione-canvas-save-e.html
      buona visione :)

      Elimina
  6. Eccomi!
    Domanda: se invece di utilizzare le dita desiderassi che uno strite lasciasse una 'scia' di colore quando si muove tramite l'orientalsensor?

    Se po' fà?

    RispondiElimina
    Risposte
    1. 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!

      Elimina
  7. Allora sono a metà dell'opera perchè il 'gioco' del biliardo l'ho già 'smanettato' a dovere... adesso vediamo di mixare il tutto!
    Ti tengo aggiornato sulle mie sperimentazioni.

    =)

    RispondiElimina
  8. http://micioville.altervista.org/files/disegno_sprite.jpg

    Ci 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?

    RispondiElimina
    Risposte
    1. 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! :)

      Elimina
  9. Ho 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).
    Ora 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!

    RispondiElimina
  10. Buongiorno!
    Secondo 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... =(

    RispondiElimina
    Risposte
    1. 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:)

      Elimina
  11. Ok... aspettiamo che App.Inventor migliori. =)
    Ho 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...

    RispondiElimina
    Risposte
    1. non ho mai approfondito tanto l'uso degli imagesprite ma penso che con i metodi dragged e moveto lo puoi muovere dove vuoi
      Altro 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:)

      Elimina
    2. Emanuela,
      scusa 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

      Elimina
  12. Ho avuto un'illuminazione!
    Oggi 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.

    RispondiElimina
  13. 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!

    RispondiElimina
  14. CI SONO RIUSCITA!!!

    Ho azzerato tutti i parametri dello sprite e poi, sul block editor ho messo il Dragger con MoveTo > CurrentX e Current y

    =)

    RispondiElimina
    Risposte
    1. Ottimo!sapevo che prima o poi ci saresti riuscita! complimenti!

      Elimina
  15. Sto 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!!!
    Però, secondo me, la soluzione è qui... MUMBLE MUMBLE...

    RispondiElimina
    Risposte
    1. mmhhh, non so che dire, ti conviene ovviamente provare ad incrementare pian piano l'intervallo finchè trovi un buon compromesso tra stabilità e velocità... :)

      Elimina
  16. Non mi parte mail l' emulatore.
    Come mai su un' altro computer si ?

    RispondiElimina
  17. Ciao ragazzi, avete risolto il fatto di poter dare una maggiore sensibilità al tracciamento delle linee??

    RispondiElimina
    Risposte
    1. fintanto che non aggiorneranno questo componente penso ci sia poco da fare, poi dipende anche dalla potenza del telefono su cui gira la nostra app.
      Ad 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

      Elimina
  18. 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

    RispondiElimina
    Risposte
    1. Puoi 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

      Elimina
  19. Ciao Sebastiano....grazie per i tuoi video innanzitutto. Avrei da chiederti un chiarimento...
    Vorrei 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?

    RispondiElimina
    Risposte
    1. Ciao, non farò un video per fare quello che chiedi (credo non interessi a molte persone)
      ad 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

      Elimina