Arxiu de la categoria: General

COM FER UN SLIDE (sense la funció d’slide) per Clàudia Barberà

Primer de tot s’ha de crear un fons per la pantalla, un coslidep creat arrosseguem un canvas. Al canvas li posarem de fons la primera imatge que mostrarem a l’slide, mentre que les altres 3 només les carregarem (han de tenir noms successius: instruccio_1, instruccio_2…) al media.
Definirem la primera imatge com a imatge 1, per tal de posicionar-la a la llista d’imatges que es succeïran.
Arrastrarem l’opció de Canvas. Flung (per tal de poder crear successió d’imatges que estan dins d’aquest canvas).
Una vegada arrosegada aquesta opció, li aplicarem l’opció del condicionant “if else”. Ara posarem la condició inicial per desencadenar el canvi d’imatges: que la velocitat d’x (horitzontal) sigui menor a 0 (és a dir moviment cap a l’esquerra). Un cop amb la premisa marcada posarem què passara al fer aquest moviment:
- Si la imatge és major a 1 (és a dir, totes les imatges menys la primera), la llista serà inversa.
- Si la imatge és menor a 1 (totes les imatges menys l’última), la llista es succeïrà en ordre ascendent.
Finalment cal crear una llista on referenciar aquestes imatges (select lis titem>make a list)

MENÚ DESPLEGABLE – mediante la lógica visible/invisible. Autora: Laura Picallo

Este ejercicio se basa en la posibilidad de hacer visible o invisible tanto un botón como una image sprite para programar un menú desplegable.

Lo primero sería crear todos los apartados de los que constará el menú desplegable (esto es, poner sobre la pantalla el árbol entero).
Una vez hecho esto, y usando la opción a la derecha de la pantalla de decidir si el botón o la imagen es visible o invisible, hacemos los apartados desplegables invisibles.

En el block editor contamos con el bloque set ____.visible to, que nos permite, mediante la lógica true o false, llevar a invisibilidad o a visibilidad las distintas image sprites y botones.
En este menú se despliegan los apartados cuando tocas uno de los botones principales, y se pliegan cuando lo pulsas durante unos segundos. Es tan sencillo como:

Cuando tocas X botón, Y imágenes se hacen visibles, Z imágenes invisibles (jugando con que cuando aprietas, por ejemplo, cos, todo lo referente a cara y cap se hará invisible)
También puedes añadir condicionales para que solo se desplieguen ciertos apartados cuando su imagen raíz sea visible (algo útil cuando cuantas con muchas image sprite invisibles sobre el canvas que el usuario podría tocar sin querer)
PRIMERA

SEGUNDA

APP INVENTOR: Map Tour. Autor: Said El Hamoudi Bader

Para este tutorial se debe estar familiarizado con los conceptos básicos de App Inventor, ya que se utilizan los componentes ActivityStarter y ListPicker. Una respondería para el lanzamiento de aplicaciones Android, en este caso el arranque de Google Maps, y la otra para permitir al usuario elegir de una lista de ubicaciones.

Establecer la pantalla:

Creamos en la ventana de diseño una imagen estética del lugar de destino, el ListPiker que mostrará la lista de destino y por último el ActivityStarter que inicia la aplicación de mapas cuando se elige un destino.

designer

Habrá que configurar el ActivityStarter para iniciar la aplicación Maps con las siguientes propiedades:

Acción                                 android.intent.action.VIEW

ActivityPackage               com.google.android.apps.maps

ActivityClass                     com.google.android.maps.MapsActivity

 

Establecer la lista de destinos:

-         Debemos crear una variable con la lista de destinos para el Map Tour

-         Hacer make a list para agregar los elementos a la lista

-         Finalmente los textos con los destinos

destinationList

 

 

Establecer comportamientos a los componentes:

En Map Tour aplicamos dos comportamientos

-         Al iniciar la aplicación cargar destinos en ListPicker para que el usuario elija

-         Al seleccionar el destino la aplicación de mapas muestra el destino

 

Para que suceda definimos el comportamiento Screen1.Initialize

screenInit

 

 

Comportamiento al elegir destino:

ActivityStarter debe lanzar los mapas al seleccionar destino, por ello será necesario programar el componente Listpicker que activará el ListPicker.AfterPicking, necesario para configurar el DataURI del componente ActivityStarter.

afterPicking

 

Existe un segundo uso más sofisticado del ActivityStarter y del componente Listpicker que se encuentra en la segunda parte del tutorial de la web.

ParisMapTour.ZIP

Activity Starter

El componente Activity Starter permite combinar aplicaciones permitiendo a una aplicación arrancar otras aplicaciones.

Las aplicaciones iniciadas pueden otras aplicaciones de App Inventor creadas por nosotros o aplicaciones tales como la que gestiona la cámara o mapas pre-instalados en el mismo.

Para iniciar otra aplicación, debe proporcionar cierta información de control para el sistema operativo Android. Para ello, se deben establecer varias propiedades de Activity Starter antes de invocar la aplicación que deseamos iniciar.

Se puede probar con el siguiente proyecto: 1

Se trata de una aplicación que proporciona al usuario toda la información deseada sobre un programa de televisión por internet. Existen 5 botones los cuales enlazan con la página web del programa, con su facebook, con los vídeos colgados de youtube, posibilita enviar directamente un correo a los editores, establece su ubicación y a modo de explicación del activity starter podemos lanzar la cámara del dispositivo.

 Abrir el navegador a una página Web

 

2 3

Reproducir un vídeo de YouTube

Para ello se necesita saber la dirección URI del vídeo de YouTube. 8

Enviar un email a una dirección de destinatario ya especificada 6

Mostrar el mapa de un lugar

Si se conoce el código postal, se pueden establecer las propiedades de  Activity Starter  de la siguiente manera:7

Inicio de la cámara

 4

Multiusuari

Un exemple senzill d’APP multiusuari. Carregueu xatBasic.zip a APP Inventor i instal·leu-lo a dues tauletes o telèfons diferents per veure com establir comunicació entre dispositius.

Mitjançant el component TinyWebDB es pot enviar i rebre informació a una base de dades per tal de recuperar-la des d’una altra APP i, així, estrablir connexió entre diferents usuaris.

El codi és molt senzill. Per una banda, es guarda allò que ha escrit l’usuari (en la imatge, l’usuari 1). De l’altra, es llegeix el que ha escrit l’altre (usuari 2).

xat

En aquest cas, per evitar estar constantment tocant un botó per llegir el que ha escrit l’altre usuari, s’ha implementat un temporitzador que va demanant el resultat del que ha s’ha entrat a la base de dades.

Duplicar pantalles

Per tal de duplicar pantalles amb APP Inventor cal seguir els passos següents:

Nota: El mateix procés serveix per ajuntar diferents projectes. Només caldrà tenir en compte ajuntar també els arxius de les carpetes assets si aquestes formen part d’aquest.

1.- Baixar l’App on volem fer el duplicat, mitjançant la llista de “My Projects”. Cal seleccionar el projecte que volem baixar i fer servir la opció More actions –> Download Source

un

 

2.- Descomprimir l’arxiu a una carpeta local.

3.- Navegar a la carpeta src –> appintentor –> ai_[nom d'usuari] –> [nom del projecte]

4.- Duplicar, mitjançant l’acció copiar/enganxar, els arxius d’extensió .blk i .scm corresponents a la pantalla que volem tenir dues vegades. Ambdós arxius es diran igual que la pantalla, amb l’extensió corresponent.

5.- Canviar el nom dels arxius al que volem que tingui la pantalla nova.

6.- Tornar a comprimir els arxius en un .zip i anomenar-lo tal com volem que s’anomeni el nou projecte. ATENCIÓ: L’arxiu ZIP ha de tenir com a primer nivell les carpetes src, youngandriodproject i, si hem pujat arxius multimèdia, també la carpeta assets.

Untitled-2

 

És a dir, cal comprimir directament aquestes carpetes. No una carpeta amb el nom del projecte que les contingui. Si no es fa així, APP Inventor no reconeixerà l’arxiu com a projecte.

7.- Pujar l’arxiu a APP Inventor mitjançant el menú More actions –> Upload Source que trobarem a My Projects.

8.- Obrir el nou projecte. Si tot ha anat bé, hi trobarem dues pantalles idèntiques amb noms diferents.

Canvi d’imatges

Autora: Ariadna Santos

El fet que el programa no deixi modificar les imatges directament des de l’àrea de disseny ens obliga a preparar les imatges que volem canviar prèviament. En aquest cas, l’aplicació consisteix en fer explotar l’ocell quan l’usuari el toqui. Serà el moment en que les imatges de l’explosió que hem preparat prèviament apareguin en una seqüència.

Components de la interfície:

Component

Palette

Nom

Propietats

Canvas Basic MyCanvas Background.jpgWidth: Fill parentHeight: 380 pixels
ImageSprite Animation bird BirdBlue.pngInterval: 500
ImageSprite Animation boom BirdExplosion0.png*BirdExplosion1.pngBirdExplosion2.pngInterval: 100

Opció Visible desactivada

Label Basic score Text: Score
Clock Basic boomClock Interval: 100*TimerEnabled: desactivat
Sound Media boomSound BirdExplosionNoise0.wav

*És important que la imatge BirdExplosion0.png estigui seleccionada com a Picture en l’animació boom. Però també hem de pujar les imatges que la segueixen per tal que també apareguin just després de la primera. Situem l’explosió en el canvas a prop o a sobre de l’ocell i la desactivem.

*Si l’interval és més alt veurem més lentament el canvi d’imatges.

Block’s Editor:

Definicions: 

- Variable: BoomCounter

Captura de pantalla 2013-05-23 a la(s) 12.21.03

 

Utilitzem el Counter per crear els noms de les imatges. Inicialment el valor del boomCounter és 1, és perquè el nom de la segona explosió és BirdExplosion1.png, no BirdExplosion2.png

- Variable: puntuació

Captura de pantalla 2013-05-23 a la(s) 12.21.10

- Procedure: MoveBird

 

Captura de pantalla 2013-05-23 a la(s) 12.21.17

bird.Touched:

  • Una vegada toquem l’ocell, a partir d’una operació boleana (fals), desactivarem el seu valor i l’ocell no es veurà. (Bird.Enabled. Bird.Visible)
  • Ordenarem que la imatge boom es col·loqui a la posició actual de l’ocell.
  • Boom.Picture. Indiquem que mostri l’explosió 0 escrivint en un text el nom exacte de la imatge.
  • A partir d’una altre operació boleana (true) activem la imatge boom. (boom.Enable- Boo.visible).
  • Com que en l’àrea de disseny hem desactivat la opció Enabled del boom.Clock ara li hem de dir, amb una operació boleana, que ens l’activi (true).
  • Finalment que canviï la posició de l’ocell.
  • Sumar la puntuació.

Captura de pantalla 2013-05-23 a la(s) 12.21.43

BoomClock.Timer:

  • ifelse (control) comprova una condició donada. Si el resultat és verdader, duu a terme les accions de la seqüència then-do, si és fals duu a terme les accions de else-do.
  • BoomCounter > 2. Aquesta ordre compara els dos números, si el primer és més gran serà veritat (true), al contrari, l’operació serà falsa.
  • L’acció del else-do serà donar un valor a la imatge boom.picture. Ho farem amb la opció join que es troba al text blocks. Afegirà el text .png al resultat del text BirdExplosion i el global boomCounter.
  • Finalment en el valor global del boomCounter li sumem 1.

Captura de pantalla 2013-05-23 a la(s) 12.21.54

Com ampliar el tutorial:

  • Incloure el botó de reset.
  • Fer que l’ocell es mogui constantment, des del principi.

 

 

 

 

 

 

 

 

 

 

MAP TOUR – Elena Espiau

- ActivityStarter

ActivityStarter et permet obrir una altra aplicació sense sortir de la que estàs fent servir. Així pots consultar el GoogleMaps, clicar per tornar enrere, i trobar-te la app com estava abans de sortir. S’han d’especificar unes propietats, però no sé com es defineixen (si no és que te les donen).

Sin título

Sin título

- ListPicker

El ListPicker crea automàticament una llista d’opcions a escollir per a l’usuari. No es tracta de traslladar-te a una altra pantalla, sinó que aparegui una llista de possibilitats. Aquesta llista es defineix fàcilment a partir del Blocks Editor, podent afegir i treure elements amb molta facilitat. Si no m’equivoco, diria que el disseny d’aquesta llista no es pot modificar i manté el mateix disseny del tema del mòbil.

listpicker

Tal i com es mostra a la captura de pantalla anterior, així es defineix la llista de ListPicker. No entenc què és Screen1.Initialize.

- Obrir Maps amb una cerca

Tal i com esmentava, l’ActivityStarter ens permet iniciar una altra aplicació sense sortir de la que tenim oberta. Un cop definit que l’aplicació que s’activarà sigui el GoogleMaps, cal definir què volem obrir.
Així, quan l’usuari clica una de les opcions de la ListPicker1, s’obre el Maps cercant les paraules que haguem definit en les destinacions. Per a què això passi cal definir-ho mitjançant el ListPicker1.AfterPicking.

listpickerafter1

L’ActivityStarter1.DataUri defineix què ha d’obrir el Maps. En aquest cas, se li demana que obri el cercador i que insereixi la destinació seleccionada de la llista. Per això fa una combinació entre “http://maps.google.com/?q=” i l’opció seleccionada. Així si l’usuari escull “Tour Eiffel”, el DataUri es dirigeix a “http://maps.google.com/?q=Tour Eiffel.”

 

VideoWall

APP INVENTOR: Canviar el tamany del reproductor de vídeo
Autor/a: Patricia Ruiz

Introducció:

Aquest tutorial mostra com podem controlar el tamany d’un vídeo a una aplicació. El VideoWall utilitza els recursos multimèdia (vídeos emmagatzemats a la pròpia app), però també podem fer servir la app per mostrar vídeos d’Internet.

Comencem:

  1. Creem un nou projecte i li donem el nom de VideoWall.
  2. Canviem la orientació de la pantalla a Landscape i, de pas, el BackgroundColor a Black.
  3. Ens baixem els tres vídeos que farem servir a continuació:http://appinventor.mit.edu/explore/content/videowall.html

Un cop finalitzem l’aplicació VideoWall, se’ns mostrarà una pantalla amb els tres vídeos, que podrem ampliar fins assolir el seu tamany real, i després tornar a encongir. L’aplicació també ens permetrà visualitzar els vídeos en pantalla completa.

Establim els components:

A continuació, farem servir el dissenyador de components per crear la interfície de VideoWall. Havent acabat, hauria de tenir el següent aspecte:

1

Per aconseguir-ho, primer hem de carregar els arxius de vídeo que ens hem baixat. Farem click al botó Add i seleccionarem els vídeos un per un.

Ara, crearem la interfície arrossegant els següents components de la Palette al Viewer:

Tipus de component Grup de la Palette Com l’anomenarem Propòsit del component Comentaris
HorizontalArrangement ScreenArrangement HorizontalArrangement1 Alinea els components horitzontalment  Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement1 Alinea el vídeo de l’esquerra i els controls corresponents Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement2 Alinea el vídeo del mig i els controls corresponents Posarem el Width a Fill parent
VerticalArrangement ScreenArrangement VerticalArrangement3 Alinea el vídeo de la dreta i els controls corresponents Posarem el Width a Fill parent
VideoPlayer Media VideoPlayer1 Mostra el BigBuckBunny video Triem el vídeo Bigbuckbunny.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
VideoPlayer Media VideoPlayer2 Mostra el NASA video Triem el vídeo Nasa.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
VideoPlayer Media VideoPlayer3 Mostra el Sintelvideo Triem el vídeo Sintel.3gp a Source, el Width el posem a Fill parent i el Height a 36 pixels
Button Basic ResizeButton1 Canvia el tamany del VideoPlayer1 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic ResizeButton2 Canvia el tamany del VideoPlayer2 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic ResizeButton3 Canvia el tamany del VideoPlayer3 Al text escriurem “Grow” iposarem el Width a Fill parent
Button Basic FullScreenButton1 Mostra el VideoPlayer1 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent
Button Basic FullScreenButton2 Mostra el VideoPlayer2 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent
Button Basic FullScreenButton3 Mostra el VideoPlayer3 video en pantalla completa Al text escriurem “Show FullScreen” iposarem el Width a Fill parent

Assignar comportaments als components:

 Ara la interfície està completa, però els botons encara no canvien el tamany dels vídeos. Per això, obrirem el Blocks Editor, per assignar comportament als botons. Primer de tot, definirem tres blocs de variables per poder modificar el tamany dels VideoPlayers.

3Ara crearem el bloc de resizeVideoPlayer. Hi ha tres Videoplayers a l’aplicació, però utilitzarem només un sol bloc de procediment per canviar el tamany dels tres. Per fer-ho, anirem al component Advanced, i clicarem sobre el bloc Any VideoPlayer.

4

Creació dels blocs de Click:

Els blocs que crearem responen als clicks sobre els botons ResizeButton.

5

La majoria de blocs a l’App Inventor requereixen que coneguem exactament quin component manipularà la nostra aplicació en el moment en que l’estem dissenyant. Per algunes apps, tindrem bastants components del mateix tipus, i voldrem programar un mateix comportament per tots els components similars (com és el cas dels blocs de VideoPlayer en aquesta app).

Nota: La appVideoWallpodría haver-se dissenyat amb una redimensió específica per a cada VideoPlayer. Utilitzant el bloc Advanced en un sol procediment de redimensió, la app és molt més simple.

 Com funcionen els blocs:

Configurar les propietats d’amplada i alçada per a un VideoPlayer, funciona exactament de la mateixa manera que configurar l’amplada i alçada d’un botó. Per qualsevol número positiu que establim, el vídeo que es reprodueixi redimensionarà la seva aparença per a encaixar en aquell valor. Hi ha dos valors que són excepcions de la norma d’utilitzar valors positius: el -1 i el -2.  Configurar el VideoPlayer.Width o VideoPlayer.Height a -1 és com configurar l’alçada o l’amplada a Fill Parent en el designer. Configurar el VideoPlayer.Width o VideoPlayer.Height a  -2 és com configurar l’alçada o l’amplada a Automatic al designer.

Cal tenir en compte que, en alguns dispositius, el tamany no es canvia correctament i, per tant, el resultat és impredictible.

Full screen:

El  VideoPlayer.FullScreen bloc, agafa un valor positiu/negatiu (anomenat també Boolean), per dir si el vídeo s’ha de posar en full screen o no. Configurar un bloc VideoPlayer.FullScreen  a true, farà que el vídeo es reprodueixi en fullscreen. Si hi ha un altre video en fullscreen, el valor es posarà a fals i serà remplaçat per l’actual videoplayer. Si el VideoPlayer.FullScreen  es true, configurar el bloc com a falsa causa que es tanqui el fullscreen.

6

Location Sensor i Activity Starter

Autor/a: Elsa Reig Ambrojo

Ambdós elements,Location Sensor i ActivityStarter,formen part dels “no visibles” dins la interfície del Mit App Inventor. El primer,serveix per a que el dispositiu detecti les coordenades de latitud i longitud on es troba el dispositiu, així com l’adreça. En les seves propietats podem escollir l’interval de temps o distancia en què volem que es vagi refrescant la informació.

1

ActivityStarter, en canvi, és un component que serveix per a obrir una altre aplicació, com GoogleMaps, fent que l’usuari pugui visualitzar un mapa quan ho necessiti.Per als mapes, hem d’utilitzar la URL del que vulguem que l’usuari vegi en la propietat DataUri d’aquest element. Si volem mostrar direccions, la URL ha de tenir una forma com http://maps.google.com/maps/?saddr=0.1,0.1&daddr=0.2,0.2on els números són les coordenades de GPS. Per a aquest component necessitem omplir-ne tres propietats:

  • Action (android.intent.action.VIEW)
  • Activity Package (com.google.android.apps.maps)
  • Activity Class (com.google.android.maps.MapsActivity)

 2

En l’editor de blocs, utilitzem el LocationSensor1.LocationChanged per a fer que el dispositiu vagi refrescant les coordenades a mesura que canviem de posició. Cada cop que canviï, farà que CurrentAdressDataLabelpugui mostrar l’adreça actual (on en la imatge posa unknown), mentre que a sota, on posa GPS, se’ns mostrin en números les coordenades de localització.

34

Tot i això, necessitem el botó “Remembermycurrentlocation” per a indicar-li al dispositiu que volem que ens mostri aquella adreça concreta (fent ús de la TinyDB). I en l’editor de blocs necessitarem el següent:

5

Per a mostrar el mapa, utilitzarem el boto “Show Directions”. Per a això, en el blocs editor, farem servir DirectionsButton.Click, que iniciarà l’ActivitStarter1.DataUri. És a dir, quan l’usuari piqui en el botó de Show Directions, es generarà una URL per al mapa i l’ActivityStarter carregarà el mapa des del googlemaps.

6