Cerca con Google

Translate

10 giugno 2011

Tutorial 12 - Funzione Canvas Save e Canvas SaveAs


Un'altra delle nuove funzionalità offerte con i recenti update di App Inventor è la possibilità di salvare i canvas utilizzati nelle nostre app sulla memoria del telefono.

Ricorderete infatti il tutorial Paint Pot (che vi invito ad andare a rileggere se non lo avete ancora fatto), con questa semplice app potevamo disegnare tramite touchscreen sullo schermo del cellulare ed andare a modificare così la nostra foto (una sorta di photoshop molto molto basilare ;) )
Putroppo alla chiusura dell'applicazione tutte le modifiche andavano perse perchè il Canvas, ovvero l'elemento su cui si può disegnare in App Inventor, non permetteva il salvataggio delle modifiche effettuate al Canvas stesso.


Ora invece sono stati aggiunti due metodi all'elemento Canvas chiamati:
  • Canvas.Save
  • Canvas.SaveAs
che ci permettono proprio di salvare il Canvas attualmente utilizzato nella nostra app come file .jpg o .png sulla memoria (tipicamente la scheda sd) del nostro cellulare.

Parere personale è che Google non abbia fatto un lavoro perfetto nell'implementazione di questi metodi, infatti questi risultano abbastanza scorrelati rispetto alle altre funzioni per la gestione delle immagini (ad esempio il componente "ImagePicker")
Infatti se usiamo ImagePicker vediamo che cercherà i file immagine dalla galleria del telefono e ne ritorna il path sotto forma di
content://media/external/images/media/x (dove x è il numero dell'immagine scelta)
Mentre Canvas.SaveAs non può salvare in content://media/external/images/media ma di base salva in /mnt/sdcard/ (...misteri di Google oppure non ho capito io qualcosa...)

Tra l'altro una volta salvati i Canvas questi non vengono visualizzati dalla galleria del telefono se non dopo aver smontato e rimontato la scheda Sd del telefono...
mi pare che sia già stato segnalato come problema al team di Google, vediamo quando lo risolveranno

Ad ogni modo eccovi il video con l'esempio dell'utilizzo di questi due nuovi metodi, spero vi torni utile!


Come sempre resto a disposizione via email e commenti per tutte le vostre eventuali domande!

41 commenti:

  1. Grazie mille adesso è tutto più chiaro..:)

    RispondiElimina
  2. ne ho già pronti altri 4, settimana prossima verranno caricati... ;)

    RispondiElimina
  3. Bisogna risolvere questa maledettissima grana del SaveAs che non visualizza in galleria...
    Hai qualche tutorial che spiega l'arcano e che mi sono persa?

    RispondiElimina
  4. Risolto!
    Quando hai il call SaveAs non basta mettere ilnome e l'esensione ma è necessario scrivere anche un percorso.

    es: /Spenottina/immagine.jpg

    Così si andrà a creare un cartella con all'interno il salvataggio immagine... che poi si visualizza in Galleria (non subito e non so perchè, ma dopo un po' l'ho visto senza levare o togliere nulla)
    L'unico problema ancora da risolvere è che il file, avendo sempre lo stesso nome, si va a sovrascrivere ai precedenti e quindi o uno si smazza a creare tanti SaveAs oppure bisogna trovare il modo di rendere la cosa progressiva automaticamente.

    RispondiElimina
  5. Grazie Emanuela! Ottimi suggerimenti, per il nome del file puoi semplicemente crearlo usando maketext la prima parte fissa e la seconda con un contatore che incrementi dopo ogni salvataggio o quando serve...

    RispondiElimina
  6. Figurati!
    Vedo di elaborare il tuo di suggerimento e poi ti dico se funziona!

    RispondiElimina
    Risposte
    1. scusa se rispondo solo ora, cmq il maketext dev'essere formato da tre pezzi
      il primo : /Rosetta/doodle
      il secondo: è quello variabile con un contatore
      il terzo: .jpg

      il contatore lo fai con una variabile che incrementi con le funzioni matematiche quando ne hai bisogno

      Elimina
    2. ciao, come si crea quello variabile con un contatore?

      Elimina
  7. [url]http://micioville.altervista.org/SaveAS.jpg[/url]

    Bella ciò... e come lo creo il contatore?

    RispondiElimina
  8. Salve a tutti, ho creato un applicazione multiscreen, in cui in uno screen salvo dei dati, ed in un altro, modifico dei canvas e all'uscita, li salvo creando un'associazione (attraverso il nome del file appunto) con i dati immessi nello screen principale; così facendo avrò nella sd un canvas per ogni recordeset salvato, ora siccome dallo screen principale, posso eliminare da questo pseudo-database creato i dati non più necessari, vorrei che quando faccio questa operazione, in automatico mi elimini anche i canvas associati a questi dati, ma sul block editor, non ho trovato nessun comando per cancellare file presenti su sd qualcuno ha qualche idea per come fare??
    Grazie anticipatamente.

    RispondiElimina
    Risposte
    1. Ciao Federico, non credo sia possibile cancellare i files sulla sd card, forse quel che è possibile fare è magari con un activitystarter lanciare un file editor esterno con un comando di cancellazione,di sicuro non è la soluzione ottimale visto che non è detto che tutti abbiano quel file editor installato.
      Ad ogni modo è nella lista delle richieste al team App Inventor, quindi speriamo venga implementato presto :)

      Elimina
  9. ho creato 3 button ognuno ti manda alla fotocamera e una volta scattate le 3 foto ti compaiono in 3 canvas diverse, è possibile salvare le 3 canvas in una foto?

    RispondiElimina
    Risposte
    1. non sono sicuro di aver capito la domanda ma dovresti trovare le tue risposte proprio in questo tutorial o facendo altri esperimenti

      Elimina
  10. Salve,
    ho creato un app di prova, attraverso il costrutto Web di App Inventor, che si collega ad una cartella remota dove è presente un file, di nome file1.mp3
    Posso sapere perché dall'app questo dannato file1.mp3 non si riesce a scaricare??

    Te ne sarei davvero grato se mi dessi una mano a risolvere questo problema.


    RispondiElimina
    Risposte
    1. ciao,per favore vieni sul forum ed apri una discussione per questo problema, qui siamo OT, grazie :)

      Elimina
    2. Scusa l'ignoranza ma come faccio ad andare sul forum? Grazie

      Elimina
    3. lo trovi subito sotto il titolo, è una sezione del blog...
      h t t p://seblogapps.blogspot.it/p/app-inventor-forum-italia.html

      Elimina
  11. si puo caricare nel canvas un immagine che è dentro la microSD aprire una foto e modificarla?grazie in anticipo

    RispondiElimina
    Risposte
    1. Puoi usare il componente "imagepicker" (http://beta.appinventor.mit.edu/learn/reference/components/media.html#ImagePicker)
      che ti apre la galleria, dopo che hai scelto l'immagine hai il suo path nella variabile
      ImagePath
      A quel punto la puoi caricare nel Canvas, poi quando la modifichi con la tua app puoi usare la funzione Canvas Save, solo che te la salverà in un'altra posizione e non credo possa sovrascrivere l'immagine originale

      Elimina
  12. okok grazie sebastiano per questo e tutti i tuoi tutorial :D un altra domanda...hai prensente la meme camera? che si puo posizionare la foto dei meme su una foto si può fare lo stesso su appinventor? io sono riuscito a farla comaparire sul canvas ma devo riuscire anche solo a spostarla e posizionarla dove si vuole nel canvas :D? Grazie

    RispondiElimina
    Risposte
    1. non conosco questa "meme camera", ma se non è un componente che si può utilizzare in app inventor dubito sia possibile fare questa cosa, potresti spiegare eventualmente meglio il problema?

      Elimina
  13. Allora seb io in un canvas devo riuscire a spostare con il touch un image sprite sul canvas ma non ho la minima idea di come fare..riuscire a spostarlo in qualche modo con il touch è meglio D:

    RispondiElimina
  14. Ciao Seb, è possibile effettuare uno screenshot di una pagina della nostra App?
    Grazie

    RispondiElimina
    Risposte
    1. non capisco, intendi uno screenshot tramite app inventor della tua app? o uno screenshot in generale di quello che hai sul telefono in un dato momento?

      Elimina
  15. Vorrei mettere un button che permetta di effettuare lo screenshot di ciò che vedo al momento sullo schermo..forse ho trovato la soluzione mediante il save canvas....grazie

    RispondiElimina
    Risposte
    1. però così salvi solo appunto il canvas che hai creato fino a quel momento e non tutto lo schermo (come quando si usa la funzione per prendere gli screenshot del telefono), ad ogni modo questo tutorial fa appunto vedere come si usa la funziona canvas save... :)

      Elimina
  16. ecc infatti, con il canvas c'è questo limite...non esiste dunque la possibilità di effettuare uno screenshot con un button?grazie

    RispondiElimina
    Risposte
    1. di tutto lo schermo non saprei, forse con un activitystarter, prova ad aprire una discussione nel forum e magari anche qualcun'altro ti può dare una mano

      Elimina
  17. Ciao, volevo chiederti una domanda riguardo all'uso della macchina fotografica, la scrivo qui perchè non so dove altro metterla, scusa se non è il posto adatto. Ebbene: dopo aver scattato una foto o averla selezionata con image picker è possibile selezionarne una sola parte o tagliarla ecc..? Mi spiego: avrei bisogno in particolare di un comando che che suddivida la foto in n^2 foto rettangolari tutte delle stesse dimensioni e che vengano salvate come foto indipendenti

    RispondiElimina
    Risposte
    1. mi dispiace ma credo che non sia possibile fare quello che tu chiedi, se vuoi prova a chiedere anche nel forum ma temo che questa funzione non esista... :(

      Elimina
  18. Ciao, ho dei problemi con il caricamento delle immagini salvate dall'app.
    Il problema è che i diversi dispositivi interagiscono con appinventor in diverso modo.
    ad esempio il mio s4 con montato la cyanogenmod11 quando salva usa il percorso "/storage/emulated/0/Pictures/img_1.png"
    mentre il tablet note 10.1 usa "/storage/sdcard0/Pictures/img_1.png"
    speravo di poter salvare direttamente su storage per evitare i diversi percorsi ed adattare il caricamento di immagini ai diversi dispositivi, ma purtroppo il canvas.SaveAs produce la prima parte del percorso da sola. Non c'è un modo per caricare sulla stessa canvas due file immagine? oppure c'è un modo per riconoscere il dispositivo in uso per dare poi istruzioni a seconda dei casi?
    Ti ringrazio

    RispondiElimina
    Risposte
    1. Ciao, pure io o il tuo identico problema,tu hai risolto ? Speriamo che qualcuno ci dia una mano :-(

      Elimina
    2. Da quel che ne so io la cosa dovrebbe essere così:
      Da android 4.1 in su esiste la cartella /storage/emulated/0/
      mentre per Android 4.1 o inferiore abbiamo /storage/sdcard0
      Però la cosa interessante è che su un dispositivo >=4.1 anche il vecchio path è disponibile,
      quindi penso che non vi interessi dove salva il file perchè se andate a caricarlo e gli "forzate" il path a /storage/sdcard0 verrà cmq visto anche su dispositivi 4.1
      E poi se usate l'imagepicker per caricare l'immagine sarà quel componente a darvi il path, indipendentemente dalla versione android.
      Fate delle prove ed eventualmente fatemi sapere di preciso cosa volete fare e come lo state facendo, magari mi son perso qualcosa io... :)

      Elimina
  19. ciao, volevo sapere se si possono salvare canvas in alta qualità.

    RispondiElimina
  20. Salve, ho caricato il componente camera che come pach di default da /storage/emulated/0/picture/ posso cambiare pach?
    nella galleria non vedo le immagini devo andare su explorer manualmente ogni volta
    Grazie

    RispondiElimina
  21. ciao, come faccio a ruotare o zoomare un canvas?
    Grazie

    RispondiElimina
  22. Ciao,si può scrivere un testo sul canvas?

    RispondiElimina