Lab09-Uso de Camara en AppInventor

Nro.
DD-106
Programación Móvil para Redes
Página 1 de 14
LABORATORIO N° 09
Uso de cámara con App Inventor
CODIGO DEL CURSO: II3401
Alumno(s): Gomez Villanueva Darío Gabriel Nota
Grupo: B Ciclo: III

Excelente Requiere No acept.
Criterio de Evaluación Bueno (3pts) Regular (2pts)
(4pts) mejora (1pts) (0pts)
Cumple con la Cumple con Cumple con muy No cumple

Cumple con todo
mayoria de lo algo de lo poco de lo con nada de
lo requerido por
requerido por el requerido por el requerido por el lo requerido
el criterio
criterio criterio criterio por el criterio
Reconoce el uso de cámara y
acceso a dispositivo
Reconoce el uso canvas y
selección de imagen
Realiza los ejercicios
propuestos
Realiza observaciones y
conclusiones que aporten un
opinión crítica y técnica
Muestra orden y respeto en el
laboratorio y redacta el informe
ordenamente, sin copias de
otros autores
Nro. DD-106
Página 2 de 14
I.- OBJETIVOS:
• Uso de eventos y propiedades de los componentes Canvas, Cámara
• Guardar fotos en dispositivo
II.- SEGURIDAD:
Advertencia:
En este laboratorio está prohibida la manipulación del
hardware, conexiones eléctricas o de red; así como la
ingestión de alimentos o bebidas.
III.- FUNDAMENTO TEÓRICO:
• Revisar el texto guía que está en el campus Virtual.

• Revisar informacion proporcionada en canvas
IV.- NORMAS EMPLEADAS:
• No aplica
V.- RECURSOS:
• En este laboratorio cada alumno trabajará con un equipo con sistema operativo
Windows.
• Para el uso de la plataforma de desarrollo App Inventor debe poseer conexión a
internet
VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:

• El desarrollo del laboratorio es individual.
VII.- PROCEDIMIENTO:
Nota:
Las secciones en cursivas son demostrativas, pero sirven para que usted pueda instalar las
herramientas de desarrollo en un equipo externo.
CONSIDERACIONES
1. Se usara el software de desarrollo App Inventor 2

Nro. DD-106
Página 3 de 14
1. DISPOSICIÓN DE ELEMENTOS
1.1 En este proyecto desarrollaremos 3 Screen. En el primer Screen mostraremos una lista de
opciones a seleccionar, en el segundo Screen se mostrará lienzo en el que podremos realizar
una edición básica de una foto tomada previamente, y en el tercer Screen se mostrará una foto
que se seleccione previamente.
2. DISEÑO DE INTERFACES Y LOGICA DE PROGRAMACION
2.1 Cree un proyecto en AppInventor denominado: usoCamara

2.2 Se utilizara los componentes del grupo “Animación, Medios”,
2.3 Diseñe la siguiente interfaz mostrada siguiendo la vista de componentes mostrada
2.4 Solo se muestra la configuración de los elementos a utlizar, los demas compenentes
configure a su criterio para que quede como muestra la imagen de arriba
Objeto Propiedad
Screen1 Dejar todo por defecto
Etiqueta 1 Configure según su criterio
Boton 1 Nombre Variable: btnTomarFoto
Texto: Guardar mi Ubicación
SelectorDeImagen1 Texto: Ver fotos
Boton 2 Nombre Variable: btnSalir
Texto: Salir
Nro. DD-106
Página 4 de 14
Cámara1 Dejar todo por defecto
2.5 Diseñe la programación para el boton Tomar Foto. Se invoca a cámara y la foto
tomada se manda como variable para inicializar el Screen2
2.6 Agrege una nueva ventana llamada : Screen2

Nro. DD-106
Página 5 de 14
2.8 Solo se muestra la configuración de los elementos a utlizar, los demas compenentes
configure a su criterio para que quede como muestra la imagen de arriba
Objeto Propiedad
Boton 1 Nombre Variable: btnVolver
Texto: Volver
Boton 2 Nombre Variable: btnGuardar
Texto: Guardar Cambios
Lienzo1 Dejar todo por defecto
SpriteImagen1 Alto: 200 pixeles
Ancho: 200 pixeles
Etiqueta1 Texto: Tamaño del filtro
Deslizador1 ValorMaximo: 500
ValorMinimo: 50
PosiciónDelPulgar: 200
Boton 3 Nombre de variable: btnFiltro1
Ancho: 100 pixeles
Alto: Ajustar al contenedor
Imagen: filtro1.png
Ancho: 100 pixeles
Imagen: filtro2.png
Ancho: 100 pixeles
Imagen: filtro3.png
Ancho: 100 pixeles
Imagen: filtro4.png
Notificador1 Dejar todo por defecto
2.9 Vamos a programar la logica para recibir la imagen tomada en Screen1 y mostrarla
en el LIenzo
Nro. DD-106
Página 6 de 14
2.10 Ahora procederemos a configurar la funcionalidad de cada boton, para que al

hacer clic sobre cada uno de ellos se aplique el filtro seleccionado
2.11 Vamos a agregar la funcionalidad de poder mover un filtro aplicado sobre el area
del Lienzo
2.12 Vamos a agregarle funcionalidad de poder agrandar o reducir el tamaño del filtro
agregado utilizando el Deslizador insertado
Nro. DD-106
Página 7 de 14
2.13 Ejecute su aplicativo y verifique la funcionalidad implementada. Comente los

detalles mas importantes
Solo se puede seleccionar un filtro a la vez.

La imagen del filtro no puede salir del ancho del lienzo.
El tamaño del lienzo se actualiza según la imagen
No se puede rotar la imagen del filtro.
2.14 Vamos a darle funcionalidad al boton de Guardar, para que el filtro aplicado sobre
la imagen sea guardado en una nueva imagen, con el nombre que nosotros
coloquemos
2.15 Implemente la funcionalidad del boton de Volver para que regrese a la ventana
principal Screen1
2.16 Ejecute su proyecto y verifique la funcionalidad de poder tomar una foto, agregar
un filtro y guardar dicha foto editada.
Nro. DD-106
Página 8 de 14
2.17 Vamos a crear una nueva ventana llamada: Screen3

2.19 Solo se muestra la configuración de los elementos a utlizar, los demas

compenentes configure a su criterio para que quede como muestra la imagen de
arriba
Objeto Propiedad
Etiqueta 1 Texto: Imagen seleccionada
Boton 1 Nombre Variable: btnVolver
Imagen 1 Dejar todo por defecto
Nro. DD-106
Página 9 de 14
2.20 Vamos a programar la funcionalidad para mostrar la foto que elijamos de la galeria
de nuestro celular
2.21 Implemente la funcionalidad del boton Volver

2.22 En Screen1 programaremos la funcionalidad del selector de imagen Ver Fotos.
Debe mostrar nuestra galeria, debemos elegir una foto y esta debe enviarse a
Screen3 para visualizarse
2.23 Ejecute su aplicativo y verifique el funcionamiento total
Al guardar la imagen se guarda en nuestra galería luego la podemos

visualizar en ver fotos.
Al guardar la imagen se puede poner otro filtro adicional sobre la imagen
Nro. DD-106
Página 10 de 14
3. EJERCICICOS PROPUESTOS
a. Intente agregar algunas funcionalidades adicionales al aplicativo creado. Por ejemplo:
i. Poder agregar texto sobre la foto
ii. Poder escribir a mano alzada sobre la foto
iii. Borrar los cambios realizados
iv. Etc.
b. Intente mejorar el aplicativo lo mejor que pueda
c. Agrege funcionalidad al boton “SALIR”.
d. Adjunte capturas del proyecto realizado
e. El aplicativo sera revisado en clases y cuanto mas detalles posea, tendra una mejor
nota
Nro. DD-106
Página 11 de 14
Nro. DD-106
Página 12 de 14
Nro. DD-106
Página 13 de 14
Nro. DD-106
Página 14 de 14
OBSERVACIONES (5 mínimo):
(Las observaciones son las notas aclaratorias, objeciones y problemas que se pudo presentar en el
desarrollo del laboratorio)
• Cuando probamos la aplicación y queremos tomar foto y que la foto salga en vertical
primero debemos tomar la foto en horizontal.
• Se pudo pasar una imagen de un screen a otro sin utilizar el TinyBD.
• El abrir otra pantalla con un valor inicial nos ayudo a transferir la imagen que tomo la
cámara.
• Si se tiene más de una aplicación de cámara te pide que escojas una para completar la
acción.
• El ancho y altura del lienzo depende de la foto.
CONCLUSIONES (5 mínimo):
(Las conclusiones son una opinión personal sobre tu trabajo, explicar como resolviste las dudas o
problemas presentados en el laboratorio. Ademas de aportar una opinión critica de lo realizado)
• Para solucionar la orientación de la foto se usó otra aplicación como B612
• Al no usar TinyBD solo podemos pasar un archivo hacia otra screen
• El ancho y altura se pueden escalar mediante un while el cual aumenta 1.5 a la altura y 1
al ancho mientras estos sean menores a la disposición que la contiene
• El uso de una variable inicial puede ser útil en una aplicación que no necesite el manejo
de muchos archivos o variables a la vez
• Los valores de X Y del arrastrado del lienzo se pueden usar para el dibujo de líneas.
• La continuidad de las líneas dibujadas dan la sensación de que es un dibujo a mano
alzada

Lab09-Uso de Camara en AppInventor

Cargado por

Copyright:

Formatos disponibles

Lab09-Uso de Camara en AppInventor

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lab09-Uso de Camara en AppInventor

Cargado por

Copyright:

Formatos disponibles

Nro.

Programación Móvil para Redes

Uso de cámara con App Inventor

CODIGO DEL CURSO: II3401

Alumno(s): Gomez Villanueva Darío Gabriel Nota

Grupo: B Ciclo: III

Cumple con la Cumple con Cumple con muy No cumple

III.- FUNDAMENTO TEÓRICO:

• Revisar el texto guía que está en el campus Virtual.

IV.- NORMAS EMPLEADAS:

VI.- METODOLOGÍA PARA EL DESARROLLO DE LA TAREA:

1. Se usara el software de desarrollo App Inventor 2

2. DISEÑO DE INTERFACES Y LOGICA DE PROGRAMACION

2.1 Cree un proyecto en AppInventor denominado: usoCamara

Cámara1 Dejar todo por defecto

2.6 Agrege una nueva ventana llamada : Screen2

2.10 Ahora procederemos a configurar la funcionalidad de cada boton, para que al

2.13 Ejecute su aplicativo y verifique la funcionalidad implementada. Comente los

Solo se puede seleccionar un filtro a la vez.

2.17 Vamos a crear una nueva ventana llamada: Screen3

2.19 Solo se muestra la configuración de los elementos a utlizar, los demas

2.21 Implemente la funcionalidad del boton Volver

2.23 Ejecute su aplicativo y verifique el funcionamiento total

Al guardar la imagen se guarda en nuestra galería luego la podemos

También podría gustarte