Creación dunha aplicación para Android e gafas VR con GeoGebra e Cordova

Aplicacións da perspectiva cónica estereoscópica

Jueves 11 de julio de 2019, por Horacio González Diéguez

Esta proposta de traballo por proxectos para a materia de Debuxo Técnico I de 1º de Bacharelato enmarcase nunha serie de tres pequenos proxectos realizados durante o curso 2018/2019, no IES Eduardo Pondal de Santiago de Compostela. O reto deste proxecto para a clase consistiu en ser capaces de facer unha aplicación para gafas VR de cartón e teléfono móbil, utilizado o programa de xeometría dinámica GeoGebra. Foi levado a cabo durante a 3ª avaliación do curso, en relación aos contidos de perspectiva cónica da programación, que no libro de texto corresponden ao penúltimo tema.

A inspiración teórica deste proxecto baséase na miña tese respecto ao descubrimento da perspectiva no renacemento, ao redor da que levo certo tempo traballando e desenvolvendo distintas propostas artísticas:

“Prestando atención á detallada descrición realizada por Martin Kempt en The science of art sobre o descubrimento da perspectiva por parte de Brunelleschi, especialmente á súa demostración do Batipsterio de Florencia, quizais nos deamos conta de algo revelador. O seu auténtico descubrimento pasou desapercibido durante séculos, e só agora, grazas ás ferramentas informáticas, é posible darlle nome á súa proposta. Usando ferramentas tan rudimentarias como espellos e diafragmas, Brunelleschi non inventou a perspectiva, que xa fora anticipada nos tratados de óptica medievais; Brunelleschi inventou a realidade aumentada!

O que caracteriza á demostración de Brunelleschi non é a súa habilidade para xerar e sistematizar unha representación da realidade, senón a intención de superpoñer coherentemente a realidade representada á realidade mesma. Usando un espello, co fin de reflectir as nubes, e forzándonos a mirar a través dunha mirilla que facía encaixar a perspectiva debuxada coa perspectiva real, non só debeu causar unha expectación similar á que producen hoxe os proxectos de mapping nos espazos públicos, senón que superpuxo unha información virtual plana, a pintura, á realidade; integrándoas e complementándoas, por primeira vez, co fin de producir unha nova experiencia.”

Por outra banda, este proxecto foi unha consecuencia directa do curso de GeoGebra sobre Modelos dinámicos para o ensino de Xeomatría Descriptiva, organizado entre febreiro e marzo de 2019, a través da Asociación Galega de Ensinantes de Debuxo e Artes, xunto con Paulo Porta e Xabier Lorenzo. O noso propósito para este curso era sistematizar e publicar unha serie de ferramentas ou macros que adoitamos utilizar e compartir entre nos, para a realización de construcións nos distintos sistemas de representación. Este tipo de ferramentas foron as que se utilizaron para a realización da aplicación para gafas VR.

Un dos retos que nos propuxeramos, como proposta para amosar o último día do curso de GeoGebra, en relación ao meu relatorio sobre publicación avanzada de applets con GeoGebra e Javascript, foi a conexión dun applet con distintos dispositivos como iPad, teléfono móbil ou Arduino. Dita presentación foi un éxito, Xabier Lorenzo amosou unha perspectiva en anaglifo para iPad que se movía ao inclinar o dispositivo e eu amosei como controlar a rotación dun cubo en perspectiva co acelerómetro do móbil e cun acelerómetro conectado a Arduino. Vistas as dúas propostas a conclusión lóxica era que, utilizando unhas gafas VR, poderían facerse aplicacións similares á de Xabier Lorenzo, prescindindo dos filtros de cores que require o sistema anaglifo; así naceu este proxecto.

Contidos / obxectivos do proxecto

  • 1. Vincular a perspectiva cónica cos sistemas de realidade virtual e realidade aumentada.
  • 2. Analizar a forma en que percibimos o noso contorno e a súa relación cos distintos sistemas de representación.
  • 3. Aprender a debuxar unha perspectiva cónica estereoscópica utilizando macros en GeoGebra.
  • 4. Desenvolver un proxecto con GeoGebra que acabe materializándose fisicamente mais alá da pantalla do ordenador.
  • 5. Traballar de xeito positivo coas novas tecnoloxías e o teléfono móbil como recursos educativos e non como fontes de conflitos.
  • 6. Fortalecer a auto-estima de grupo desenvolvendo un proxecto ambicioso que teña visibilidade mais alá do centro educativo.

Desenvolvemento do proxecto

Traballo previo

1. Mostra dun xogo educativo para Playstation VR (1 sesión de clase)

Ao final da 2ª avaliación, cando xa estaba barallando propoñer este proxecto ao alumnado de 1º de Bacharelato, tivemos a afortunada casualidade de de unha compañeira de Matemáticas, Guadalupe Parente, organizou unha mostra no centro, dun videoxogo educativo para Playstation VR, creado pola Fundación 3M España e que está en fase de desenvolvemento. Esta ocasión foi aproveitada para adicar adicar a última sesión de clase do trimestre a probar a aplicación co alumnado; experiencia que serviu como punto de partida ao alumnado para desenvolver o proxecto. Na seguinte ligazón podedes atopar un forlulario para solicitar o kit e probalo en calquera centro educativo.

2. Desenvolvemento do temario en relación ao Sistema Cónico (5 sesións de clase)

Unha vez rematado o último tema de Diédrico, ao redor da segunda semana da 3ª avaliación, en lugar de comezar a traballar coas distintas axonometrías, saltamos dous temas do libro que quedaron pospostos, e pasamos directamente ao Sistema Cónico. O obxectivo deste cambio, na programación de Debuxo Técnico I, foi que o alumnado adquirise os coñecementos necesarios para levar a cabo o proxecto ao principio da avaliación, para poder desenvolvelo paulatinamente ao longo da mesma.

A exposición do temario sobre Perspectiva Cónica fíxose de xeito esquemático, rápido e cun enfoque práctico, tratando de comezar a debuxar canto antes. Adicamos a primeira sesión de clase a facer unha introdución e presentar os elementos do sistema, a segunda sesión de clase a debuxar un cubo frontal tomando as medidas con rectas a 45º, a terceira sesión a debuxar, paso a paso, unha pequena peza en forma de tramo de escaleira, en perspectiva cónica central partindo dunha planta e un alzado e dúas sesións a debuxar, paso a paso, a mesma peza en perspectiva cónica oblicua.

Como lecturas de referencia, antes de comezar o tema de cónico se lle enviou ao alumnado, por correo electrónico, o fragmento de La ciencia del arte de Martin Kempt que describe o descubrimento da perspectiva por parte de Brunelleschi.

3. Presentacións de traballos sobre cinema 3D, realidade virtual, e 3D anaglifo (2 sesións de clase)

Paralelamente á exposición do temario de cónico, propúxoselle ao alumnado que preparase tres presentacións en parellas, sobre cuestións relacionadas co proxecto; cinema 3D, realidade virtual, e 3D anaglifo. O propósito destas presentacións era que servisen de introdución aos conceptos que manexaríamos ao longo do proxecto e, aínda que non todas estiveron igual de traballadas, permitiron contar co referentes claros á hora de analizar e comprender as necesidades do proxecto, particularmente, durante a realización da macro de xiro, cabeceo e perspectiva en GeoGebra.

Descargar 3D en el cine de María Vieites Fernández e Sara S O Ashour en formato PDF (567.4 KB)

CC by-nc-sa

Descargar Anaglifos de Ángel Landeira Rodríguez e Pedro Pérez Crego en formato PDF (729.1 KB)

CC by-nc-sa

Descargar La realidad virtural de Jorge Pazó Zurrón e Lois Nieto Loureiro en formato PDF (2.4 MB)

CC by-nc-sa

4. Análise das necesidades do proxecto e introdución ao traballo en cónico con GeoGebra (1 sesión de clase)

Antes de rematar o tema de perspectiva cónica, adicamos unha sesión de clase a avaliar as necesidades do proxecto e facer unha primeira construción en cónico con GeoGebra, na que, partindo da experiencia coa Playstation VR, establecemos os elementos dos que se compón unha experiencia de realidade virtual.

  • 1. Grazas as presentacións do alumnado sobre 3D anaglifo e cinema 3D, sabiamos que facían falta dúas perspectivas, para producir o efecto de tridimensionalidade ao ver unha imaxe lixeiramente diferente con cada ollo. Polo tanto, era necesario contar con dúas pantallas ou cunha soa pantalla, dividida de xeito que cada ollo vise unha das metades.
  • 2. Tamén sabiamos que as gafas VR utilizaban algunha clase de lentes para poder enfocar a pantalla, cos ollos, a moi pouca distancia.
  • 3. Por último, lembrabamos que ao xirar e mover a cabeza coas gafas de Playstation podíase mirar ao redor, no entorno virtual, pero que non servía de nada moverse, nin saltar ou agacharse. Polo tanto, só eran necesarios sensores para calcular o xiro e a inclinación das gafas e así poder cambiar a perspectiva ao mover a cabeza. Ditos sensores debían ser un xiroscopio ou un acelerómetro.

Todas as necesidades dunha experiencia de realidade virtual resolvíanse cun teléfono móbil e unhas gafas de cartón con lentes; sen necesidade dun equipamento que custa entre 200 e 600 euros. Unha vez analizado o funcionamento da Playstation VR no que respecta ao hardware, o reto do proxecto quedaba restrinxido a conseguir poñer, no teléfono móbil, unha construción de GeoGebra con dúas perspectivas, a pantalla completa , e vinculala ao acelerómetro do dispositivo. O primeiro paso para levar a cabo o proxecto era, polo tanto, poder debuxar en perspectiva cónica con GeoGebra.

Chegados a este punto, na segunda metade da sesión de traballo, explicouse un peculiar xeito de debuxar en cónico, con GeoGebra, que retoma a definición renacentista da perspectiva como intersección da pirámide visual; utilizar como perspectiva a traza vertical dunha recta en diédrico , que pasa polo obxecto e polo punto de vista. Deste xeito, basta facer unha ferramenta personalizada que calcule a traza vertical dunha recta, utilizando como liña de terra o eixo de abscisas e, como elementos de entrada, a planta e o alzado de dous puntos, para crear unha ferramenta de GeoGebra que debuxe automaticamente a perspectiva cónica dun punto. Media sesión de clase foi suficiente para explicar, crear e poñer en uso dita ferramenta, debuxando un cubo en perspectiva.

Pulsa para cargar a construcción en Geogebra
Pulsa para cargar a construcción en Geogebra

Descargar Macro de perspectiva para as primeiras probas de Horacio González Diéguez en formato Zip (1.3 KB)

CC by-nc-sa
Pulsa para cargar a construcción en Geogebra

Desenvolvemento

5. Integración dunha construción de GeoGebra nunha páxina web (2 sesións de clase)

Unha vez definido o reto do proxecto, expúxose sinteticamente o proceso que desenvolveríamos para levalo a cabo, explicando que primeiro o resolveríamos facendo unha páxina web e despois utilizariamos un programa para transformar a páxina web nunha aplicacións de Android. O primeiro paso era, polo tanto, embeber unha construción de GeoGebra nunha páxina HTML e vela no navegador. Para facelo, utilizamos unha versión simplificada do sistema explicado na guía de publicación de applets, mencionada ao principio deste artigo, na que non utilizamos a librería jQuery.

Aínda que parte do alumnado contaba con algunhas nocións de programación adquiridas na optativa de TICS, a maioría descoñecían HTML, Javascript e CSS, polo que, seguir a estrutura da guía, facendo pequenas explicacións introdutorias sobre cada un dos linguaxes utilizados, foi moi proveitoso. Dúas sesións de clase foron suficientes para que o alumnado subise a súa primeira construción en perspectiva a Internet e crease unha páxina HTML que a amosara.

Exemplo dun applet de GeoGebra embebido
Documento HTML básico
1. Etiquetas HTML

Os documentos HTML están compostos por unha serie de elementos chamados marcas ou etiquetas. Para abrir unha etiqueta escribimos o seu nome entre as cuñas de menor que e maior que. Para pechar a etiqueta volvemos a escribir a mesma etiqueta co nome precedido dunha barra inclinada. Os elementos que quedan entre a etiqueta de apertura e a etiqueta de peche constitúen o contido da etiqueta. Finalmente, as etiquetas poden ter un ou varios atributos continuación do nome. Primeiro indícase o nome do atributo, despois o signo de igualdade e, finalmente, o valor do atributo entre comiñas.

A estrutura básica dun documento HTML componse dunha etiqueta HTML que contén todos os elementos do documento, unha cabeceira, HEAD, que conten metadatos sobre o documento e un corpo, BODY, que alberga os contidos. Para crear unha caixa ou bloque de contidos podemos utilizar unha etiqueta DIV e para identificala no documento podemos engadir o atributo id.

<html>
        <head>

        </head>
        <body>
                <div id="debuxo"></div>
        </body>
</html>
2. CSS

O xeito correcto de dar formato gráfico a un documento HTML (tamaños, cores, bordes, etc.) é utilizar os estilos CSS. Os estilos poden definirse creando unha etiqueta STYLE dentro da cabeceira do documento, facendo referencia a nomes de etiquetas ou a valores dos atributos class e id. Unha extraordinaria fonte para documentarse acerca do distintos estilos e o seu uso é a páxina W3schools.

<style>
        #debuxo{ width: 1200px; height: 800px; border: 3px solid red; }
</style>
3. Librerías

Para embeber unha construción de GeoGebra nunha páxina web é necesario utilizar unha librería do sitio web de GeoGebra que contén todo o código Javascript necesario para cargar e xestionar a construción. Debemos incluír a seguinte chamada á librería, dentro do corpo da páxina, inmediatamente antes do código Javascript que escribamos.

<script type="text/javascript" src="https://www.geogebratube.org/scripts/deployggb.js"></script>
4. Javascript

O código mínimo necesario para embeber un applet de GeoGebra é moi sinxelo. Unha vez estea completamente cargada a páxina, simplemente hai que almacenar un obxecto GGBApplet nunha variable global de Javascript, indicando o valor do atributo id da etiqueta HTML na que se vai cargar, o identificador do recurso na páxina web de GeoGebra, material_id e o tamaño que queremos que teña, width e height. Despois, basta chamar ao método inject para cargar a construción.

<script type="text/javascript">
        var debuxo;
        window.onLoad = iniciar();
        function iniciar(){
                debuxo = new GGBApplet ({
                        id: "debuxo",
                        material_id: "nzgsmyzc",
                        width: 1200,
                        height: 800
                }, true);
                debuxo.inject("debuxo","preferHTML5");
        }
</script>

6. Establecemento e articulación dos elementos do sistema na xanela gráfica de GeoGebra (1 sesión de clase)

A continuación era necesario crear unha nova construción de GeoGebra axustada aos requisitos do proxecto. Necesitabamos unha perspectiva estereoscópica na que fora posible xirar e inclinar a mirada e, ademais, necesitabamos establecer unha relación entre as unidades de GeoGebra e as medidas da realidade. Para facelo adicamos unha sesión de clase a crear un documento base cos elementos do sistema, Liña de Terra, Puntos de Vista e Orixe, ligados as catro esquinas da construción e con todas as medidas en proporción á relación existente entre o ancho da construción, en unidades de GeoGebra, e o ancho da pantalla do móbil, en centímetros.

Deste xeito, conseguimos facer unha construción adaptativa que se axusta automaticamente a calquera tamaño e proporción de pantalla con só modificar un valor en GeoGebra, o ancho da pantalla do móbil.

Pulsa para cargar a construcción en Geogebra

Descargar Documento base para facer a estereoscopía de Horacio González Diéguez en formato Zip (7.8 KB)

CC by-nc-sa

7. Construción da ferramenta necesaria para os requisitos das gafas VR; xiro - cabeceo - perspectiva estereoscópica (4 sesións de clase)

Cun documento listo para comezar a traballar, o seguinte paso consistía en crear unha ferramenta que debuxase en perspectiva estereoscópica e permitise xirar e inclinar a mirada. Esta ferramenta é o núcleo do proxecto e a súa elaboración resultou bastante ardua, xa que foron necesarias varias sesións de clase trazando, sen poder observar ningún resultado ata o final do proceso. A construción dunha ferramenta como esta é relativamente complexa e require operativa diédrica propia de 2º de Bacharelato, polo que foron necesarias moitas paradas e explicacións, para que o alumnado comprendese e seguise o procedemento, aínda que fora de xeito intuitivo.

Pulsa para cargar a construcción en Geogebra

Descargar Macro de estereoscopía para gafas VR de Horacio González Diéguez en formato Zip (2.7 KB)

CC by-nc-sa
  • 1. En primeiro lugar, foi necesario acordar que produce un mesmo resultado xirar os obxectos, ao redor dos Puntos de Vista, en sentido contrario, que xirar todos os elementos do sistema. Deste xeito a construción da ferramenta simplificase enormemente, xa que en lugar de mover todos os elementos do sistema basta rotar o obxecto a representar.
  • 2. A continuación explicouse que, para crear unha ferramenta estable e sólida, resulta imprescindible utilizar puntos de entrada libres. Polo tanto, o trazado dunha ferramenta debe elaborarse, sempre, nun documento aparte, partindo de puntos colocados a chou.
  • 3. Comezouse a ferramenta xirando un punto ao redor dun eixo vertical de rotación, que se representou utilizando un punto libre en planta. É importante salientar que o eixo de rotación debe corresponder ao xiro da cabeza polo que na construción final estará situado na mediatriz dos Puntos de Vista, a unha distancia similar ao raio do perímetro da cabeza.
  • 4. A segunda parte da construción corresponde á inclinación ou cabeceo da mirada. Para producilo fíxose un segundo xiro do punto, utilizando como eixo de rotación unha recta perpendicular á dirección da mirada que cortase perpendicularmente ao eixo vertical de rotación por baixo dos Puntos de Vista. Do mesmo xeito que na primeira parte da construción, para establecer dita altura, utilizouse outro punto libre, aínda que na construción final deba corresponderse coa altura da caluga. Esta segunda parte da construción require, polo tanto, xirar unha recta paralela a Liña de Terra un ángulo igual ao do primeiro xiro e facer un cambio de plano, para poder calcular o segundo xiro do punto.
  • 5. Por último, a terceira parte da construción, consistiu en calcular as perspectivas do punto resultante respecto de cada un dos dous Puntos de Vista. Para facelo utilizamos a mesma estratexia que no primeiro debuxo feito en perspectiva cónica, con GeoGebra; calcular a traza vertical da recta que une o obxecto co Punto de Vista. A única consideración particular para facer a ferramenta, deste proxecto, foi que debíamos utilizar semirrectas en lugar de rectas, co obxectivo de evitar representar o punto cando estivese situado detrás dos Puntos de Vista e para que GeoGebra calcule a perspectiva correspondente a cada Punto de Vista, unicamente nunha das metades da xanela gráfica.
Pulsa para cargar a construcción en Geogebra

A ferramenta de perspectiva estereoscópica utilizada neste proxecto require, como elementos de entrada, 8 puntos libres e dous ángulos; P1, P2, Vi1, Vi2, Vd1, Vd2, C1, Ch, aa e bb. A Liña de Terra pode trazarse unindo Vi2 e Vd2 e O calcularse como punto medio dos mesmos.

Pulsa para cargar a construcción en Geogebra

A primeira parte do trazado, o xiro do punto P respecto dun eixo vertical de rotación que pasa por C1, é unha operación típica do temario de 2º de Bacharelato. Resólvese con moita facilidade facendo unha rotación do punto en planta e conservando a cota no alzado. Na cuarta páxina dos apuntes de Paulo Porta atoparedes unha explicación clara e sintética sobre xiros no Sistema Diédrico.

Pulsa para cargar a construcción en Geogebra

Aínda que a segunda parte do trazado tamén é un xiro, resulta bastante mais complexa que a primeira. O cabeceo require calcular o eixo de rotación, facer un cambio de Plano Vertical para poder ver o xiro de perfil e desfacer o cambio de plano para levar o punto resultante ao alzado orixinal.
Como o eixo de rotación para o cabeceo é unha recta perpendicular á dirección da mirada que pasa por C1, en planta, podemos calcular a súa proxección, e2, rotando o punto O un ángulo igual a aa menos 90º. Unha vez calculada a proxección en planta do eixo, será necesario debuxar unha Liña de Terra auxiliar que sexa perpendicular a dita proxección e que pase pola planta do punto. Deste xeito, podemos facer un alzado novo no que todas as cotas seguen sendo as mesmas, pero no que o xiro está completamente de perfil e pode calcularse da mesma maneira que na primeira parte do trazado. Na quinta páxina dos apuntes de Paulo Porta tamén atoparedes unha explicación sobre os cambios de plano no Sistema Diédrico.

Pulsa para cargar a construcción en Geogebra

Unha vez calculado o xiro no alzado auxiliar, para desfacer o cambio de plano, simplemente conservaremos a planta do punto resultante e levaremos a cota do punto resultante no alzado auxiliar ao alzado orixinal.

Pulsa para cargar a construcción en Geogebra

A última parte do trazado, o calculo das perspectivas do punto como trazas verticais das rectas que unen os puntos de vista e obxecto, en diédrico, faise utilizando semirrectas que teñen a súa orixe en Vi e Vd. Así só existe traza vertical cando o punto resultante do do xiro e o cabeceo está diante do observador e a perspectiva desaparece cando o punto está detrás. Do mesmo xeito, en lugar de utilizar a Liña de Terra orixinal para o cálculo das trazas, utilizaremos dúas semirrectas que eviten que a traza dereita se vexa no lado esquerdo da pantalla e a traza esquerda se vexa no lado dereito da pantalla.

8. Construción dun cubo en perspectiva estereoscópica usando a ferramenta personalizada (1 sesión de clase)

Unha vez creada a ferramenta personalizada, utilizouse unha sesión de traballo para cargala no documento base e debuxar un cubo en perspectiva estereoscópica. Dita construción gardouse cun nome diferente para conservar o documento base e subiuse a Internet, editando as primeiras construcións, que subimos no sitio web de GeoGebra, e substituíndo os arquivos orixinais polas novas construcións estereoscópicas. Esta é, precisamente, unha das vantaxes do xeito en que resolvemos o proxecto, que permite actualizar a construción xeométrica sen necesidade de cambiar o código Javascript da páxina HTML.

Pulsa para cargar a construcción en Geogebra

9. Montaxe das gafas VR de cartón e primeiras probas (1 sesión de clase)

O 10 de xuño chegou o paquete de gafas VR de cartón que, por sorte e grazas á advertencia dunha alumna do grupo, mercamos con case un mes de antelación; xa que demoraron moito mais do esperado. A seguinte sesión de clase foi adicada a montar as gafas co alumnado e probalas con distintos recursos VR da rede, como vídeos en 360º de Youtube. Lamentablemente, a esas alturas do desenvolvemento do proxecto, aínda non estabamos en disposición de probar as nosas construcións, xa que era necesario axustar as medidas do debuxo a tamaño real e faltaba a conexión cos acelerómetros do dispositivo.

10. Conexión da información procedente do acelerómetro cos ángulos de xiro e cabeceo da construción e primeiras probas (3 sesións de clase)

Foron necesarias dúas sesións de traballo mais, para conectar a información procedente do acelerómetro do móbil cos ángulos de xiro e cabeceo da construción. Nesta fase do traballo, o alumnado reeditou as súas páxinas HTML co applet embebido, utilizando, de novo, unha versión simplificada do sistema exposto na guía de publicación de applets, que non require jQuery. Primeiro limpamos a páxina, eliminando todos os elementos accesorios e modificando os estilos CSS, para asegurarnos de que o applet ocupaba toda a xanela do navegador. A continuación recollemos os datos de orientación do dispositivo xerados polo acelerómetro, a través do evento ”deviceorientation”, pasámolos con algúns axustes a radiáns e os enviamos ao applet de GeoGebra, mediante o método “setValue”.

Exemplo dun applet de GeoGebra conectado co acelerómetro
Documento HTML básico
1. Etiquetas HTML

Para recoller a información procedente do acelerómetro do teléfono non é necesario facer ningún cambio nas etiquetas HTML do documento anterior.

2. CSS

Respecto aos estilos CSS, pode aproveitarse para modificar o comportamento do documento e da caixa que contén o applet para asegurarse que ningún elemento deixa marxes en branco, que a páxina ocupa toda a xanela do navegador e que a caixa chega aos bordes superior, inferior, esquerdo e dereito, en lugar de ter un alto e un ancho fixo.

<style>
        * { padding: 0px; margin: 0px; }
        body { width: 100%; height: 100vh; }
        #debuxo{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; }
</style>
3. Javascript

O primeiro cambio en Javascript consiste en indicar o alto e o ancho do applet mediante dúas variables que recollen o alto e ancho da xanela do navegador, en lugar de poñer valores fixos, xa que descoñecemos o tamaño da pantalla.

var ancho = window.innerWidth;
var alto = window.innerHeight;
debuxo = new GGBApplet({
        id: "debuxo",
        material_id: "czm3ypma",
        width: ancho,
        height: alto,
}, true);

O segundo cambio consiste en utilizar un parámetro novo, na creación do applet, “appletOnLoad”. Este parámetro vincula a execución dunha función á finalización da carga do applet, de xeito que cando o applet estea completamente cargado Javascript executará o código que desexemos.

Dentro da función definida en “appletOnLoad” é onde debemos chamar ao evento “deviceorientation” utilizando o método da xanela do navegador “addEventListener”. Este método, a súa vez, vinculará outra función á recepción de datos de orientación. Neste caso unha función definida ao final do código Javascript e chamada “recolleDatos”.

appletOnLoad: function(){
        window.addEventListener("deviceorientation",recolleDatos, true);
}

A función “recolleDatos” recibe os valores dos ángulos alpha, beta e gamma do acelerómetro a través do parámetro “_evento”, os almacena en variables temporais e, despois, procesa os datos para axustalos ás necesidades da construción de GeoGebra, pasa os valores a radiáns e llos envía ao applet utilizando o método “setValue”.

function recolleDatos(_evento){
        var alpha = _evento.alpha;
        var beta = _evento.beta;
        var gamma = _evento.gamma;
        var rotacion = alpha;
        var inclinacion = 90 – Math.abs(gamma);
        if(gamma<=0) {
                inclinacion = inclinacion * (-1);
                rotacion = rotacion + 180;
        }
        debuxo.setValue("aa", -rotacion*Math.PI/180);
        debuxo.setValue("bb", -inclinacion*Math.PI/180);
}

Nesta fase do traballo, é necesario subir os arquivos HTML á rede para poder probalos cun teléfono móbil e comprobar o correcto funcionamento do acelerómetro. Por esta razón, para desenvolver as sesións de traballo, foi necesario preparar un pequeno formulario de subida que permitise subir as páxinas á rede e probalas. Este formulario creouse modificando un exemplo da librería jQuery File Upload.

jQuery File Upload 9.32
Versión modificada do plugin para subir documentos HTML ao servidor

Unha vez rematada a conexión do applet co acelerómetro, puidemos facer as primeiras probas de reactividade da construción. Lamentablemente, o primeiro que comprobamos foi que os lugares xeométricos resultaban enormemente pesados para os teléfonos móbiles e os applets funcionaban cunha excesiva lentitude. Por esta razón foi necesario adicar outra sesión de traballo a refacer a construción, trazando o cubo con polígonos de vértice a vértice, en lugar de utilizar lugares xeométricos.

Pulsa para cargar a construcción en Geogebra

11. Creación da aplicación para Android (3 sesións de clase)

Co proxecto resolto a través dun documento HTML, o único paso que quedaba pendente era transformar a páxina web nunha aplicación para Android. Grazas á plataforma Cordova, este proceso levouse a cabo en dúas sesións de traballo. Cordova é unha interface de liña de comandos orientada ao prototipado rápido de aplicacións con HTML, Javascript e CSS. En moi pouco tempo permite crear e compilar aplicacións para IOS, Android, Windows Mobile e case calquera outro sistema operativo de teléfono móbil.

PNG - 189.3 KB

Para estas sesións de clase, en lugar de instalar a plataforma en todos os ordenadores da aula e continuar traballando de xeito individual, traballamos en equipo no meu portátil, proxectando a xanela de comandos na pantalla e facendo quendas co alumnado, ao longo do proceso paso a paso. A Aula Informática do centro conta con ordenadores bastante antigos que teñen unha versión 12 de Ubuntu, como sistema operativo Linux, polo que resultaba imposible instalar Cordova e Android Studio, requisitos imprescindibles para poder compilar a aplicación. Xa, durante a fase de traballo con HTML, Javascript e CSS, fora necesario utilizar o programa Geany como editor de código, en lugar de Atom que sería a opción mais adecuada para este proxecto.

O proceso para crear unha aplicación utilizando Cordova resultou enormemente directo e sinxelo, simplemente foi necesario crear unha aplicación en branco, incluír as plataformas e plugins necesarios, copiar o código da páxina web nos documentos HTML, JS e CSS do proxecto e compilar. Lamentablemente, ata que compilamos a aplicación, non axustamos as medidas da construción en GeoGebra a tamaños reais, nin comprobamos, detalladamente, como se vía a través das gafas VR, xa que atopamos un novo problema na construción. A ferramenta personalizada funcionaba de xeito incorrecto e cruzaba as dúas perspectivas, erro habitual no traballo con perspectiva estereoscópica. Dada a limitación de tempo, decidiuse crear unha nova ferramenta fora do horario lectivo e proporcionarlla ao alumnado para adicar unha única sesión de traballo extra a refacer por terceira vez o cubo.

1. Creación dun proxecto de Cordova

Escribiremos o seguinte comando no terminal para crear o noso proxecto de cordova sustituindo "GeoGebraVR" polo nome da nosa aplicación e net.vhplab polo dominio da nosa páxina web.

cordova create GeoGebraVR net.vhplab.GeoGebraVR GeoGebraVR

Unha vez creado o proxecto de cordova, para traballar na aplicación debemos entrar no seu cartafol a través do terminal. Utilizaremos o comando cd seguido do nome da nosa aplicación para facelo.

cd GeoGebraVR

O seguinte paso consistirá en engadir as plataformas ou sistemas operativos para nos que vaiamos distribuír a aplicación.

cordova platform add android --save

Finalmente engadiremos os plugins de cordova que necesitemos utilizar na aplicación.

cordova plugin add cordova-plugin-whitelist
cordova plugin add cordova-plugin-vibration
cordova plugin add cordova-plugin-screen-orientation
cordova plugin add cordova-plugin-fullscreen
cordova plugin add cordova-plugin-statusbar
cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="Esta aplicación require permiso para compartir a túa localización. Dita información é confidencial e en ningún caso utilízase fora do contexto da aplicación."
2. Edición da aplicación no cartafol www

Os estilos CSS deben copiarse no documento /www/css/index.css, podemos editar todo o documento, eliminando os estilos por defecto, pero basta copiar os nosos ao final do mesmo.

Estilos da aplicación feita con Cordova
Documento CSS básico
Engadir ao final do documento index.css:
* { padding: 0px; margin: 0px; }
body { width: 100%; height: 100vh; }
#debuxo{ position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; }

As etiquetas HTML deben copiarse no documento /www/index.html. Para facelo eliminaremos a caixa ou bloque de contidos que ven por defecto na aplicación e a substituiremos pola nosa. Ademais será necesario corrixir a etiqueta meta que define a política de seguridade, co obxectivo de posibilitar a carga das librerías de GeoGebra.

Index da aplicación feita con Cordova
Documento HTML básico
Sustituír no documento index.html:
<div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
        </div>
</div>

Poñer:

<div id="debuxo"></div>
<script type="text/javascript" src="https://www.geogebratube.org/scripts/deployggb.js"></script>
Sustituír en index.html:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

Poñer:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap: https://ssl.gstatic.com https://*.geogebratube.org/ 'unsafe-eval' 'unsafe-inline'; script-src 'self' gap: data: 'unsafe-inline' 'unsafe-eval' *; connect-src 'self' gap: data: 'unsafe-inline' 'unsafe-eval' *; object-src 'self' gap: data: 'unsafe-inline' 'unsafe-eval' *; media-src 'self' gap: data: 'unsafe-inline' 'unsafe-eval' *; img-src 'self' gap: data: 'unsafe-inline' 'unsafe-eval' *;">

O código Javascript debe copiarse no documento /www/js/index.js. Engadiremos a variable "debuxo" ao principio do documento para que sexa global, definiremos as funcións "iniciar" e "recolledatos" ao final do documento e, finalmente, chamaremos á función "iniciar" dentro do método "receivedEvent" definido no obxecto "app".

Javascript da aplicación feita con Cordova
Documento JS básico
Engadir ao principio do documento index.js:
var debuxo;
Sustituír en index.js:
// Update DOM on a Received Event
receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
}

Poñer:

// Update DOM on a Received Event
receivedEvent: function(id) {
        iniciar();
}
Engadir ao final do documento index.js:
function iniciar(){
        var ancho = window.innerWidth;
        var alto = window.innerHeight;
        debuxo = new GGBApplet({
                id: "debuxo",
                material_id: "czm3ypma",
                width: ancho,
                height: alto,
                appletOnLoad: function(){
                        window.addEventListener("deviceorientation",recolleDatos, true);
                }
        }, true);
        debuxo.inject("debuxo","preferHTML5");
}
function recolleDatos(_evento){
        var alpha = _evento.alpha;
        var beta = _evento.beta;
        var gamma = _evento.gamma;
        var rotacion = alpha;
        var inclinacion = 90 - Math.abs(gamma);
        if(gamma<=0) {
                inclinacion = inclinacion * (-1);
                rotacion = rotacion + 180;
        }
        debuxo.setValue("aa", -rotacion*Math.PI/180);
        debuxo.setValue("bb", -inclinacion*Math.PI/180);
}
3. Configuración da aplicación no documento config.xml

No documento config.xml debemos facer unha serie de cambios para incluír información acerca da aplicación, definir o seu comportamento e configurar os parámetros dos plugins engadidos.

Configuración da aplicación feita con Cordova
Documento config.xml básico
Editar a descrición e os autores e autoras da aplicación no documento config.xml:
<description>
        Aplicación VR feita con GeoGebra.
</description>
<author email="horacio.gonzalez@ieseduardopondal.org" href="http://vhplab.net">
        Debuxo Técnico 1ºA IES Eduardo Pondal 2018-2019
</author>
Substituír este fragmento da configuración do plugin whitelist no documento config.xml:
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />

Poñer esta outra configuración mais completa:

<!-- cordova-plugin-whitelist -->
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<!-- Allow links to vimeo and youtube -->
<allow-navigation href="*://*youtube.com" />
<allow-navigation href="*://*vimeo.com" />
<!-- Whitelist the entire network, over HTTP and HTTPS. *NOT RECOMMENDED* -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<!-- which URLs the app is allowed to ask the system to open -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
Engadir a configuración dos restantes plugins ao final do documento config.xml, antes do peche da etiqueta widget:
<!-- cordova-plugin-screen-orientation -->
<preference name="Orientation" value="landscape" />
<!--  cordova-plugin-fullscreen -->
<preference name="Fullscreen" value="true" />
<!-- cordova-plugin-statusbar -->
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="BackgroundColor" value="0xff3a475b" />
<preference name="HideKeyboardFormAccessoryBar" value="true" />  
<preference name="KeepRunning" value="true" />  
<preference name="FadeSplashScreen" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="0"/>
<preference name="FadeSplashScreenDuration" value="0" />
<preference name="ShowSplashScreenSpinner" value="false" />
4. Compilación e proba da aplicación

Unha vez editada a aplicación podes volver á xanela do terminal e escribir os seguintes comandos
para compilala e probala no teu teléfono ou compilala e obter unha apk lista para distribuír.

cordova run android
cordova build android -release

Presentación dos resultados

12. Publicar a aplicación en Google Play (2 sesión de clase)

O desenvolvemento deste proxecto ocupou moitas mais sesións de clase do inicialmente previsto. Foi necesario apurar bastante para rematar a aplicación a última semana de clase do curso e só quedou unha sesión libre, para subila a Google Play antes da presentación. De feito, acabamos tendo que solicitar unha clase extra, a outra materia, para poder terminar a tempo.

O proceso de publicación a través de Google Play Developer Console é moi directo, só require asinar e subir a aplicación, cubrir algúns formularios e achegar algunhas imaxes (varias capturas de pantalla, banners promocionais e unha icona). Os únicos aspectos salientables que requiren algo de atención son o proceso de firma e a idade obxectivo da aplicación.

PNG - 24.6 KB

Antes de subir o arquivo .apk da aplicación a Google Play Developer Console é necesario asinalo e aliñalo; proceso que se debe facer a través da liña de comandos, despois de compilar a aplicación, cunha firma única para cada aplicación que subamos. Por outra banda, no caso de contar con pouco tempo para publicar a aplicación, é preferible establecer a idade obxectivo para maiores de 18 anos, xa que nese caso a publicación da aplicación é automático e pode estar visible en Internet, en menos dunha hora Pola contra, cando escollemos entre os grupos de idade obxectivo da aplicación menores de idade (16-17, 13-15, 9-12, 6-8 ou 0-5), a aplicación é revisada por unha persoa antes de ser visible en Google Play, polo que o proceso demora aproximadamente 5 días.

1. Sinatura do arquivo .apk

En primeiro lugar debemos mover o arquivo da aplicación ao cartafol do proxecto e renomealo. Substitúe "GeoGebraVR" polo nome da túa aplicación.

Este é o arquivo .apk orixinal:
/platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk

Debe quedar así:

/GeoGebraVR.apk

A continuación debemos crear unha sinatura no cartafol do proxecto para asinar a aplicación. No comando, substitúe "GeoGebraVR" polo nome da túa aplicación.

Este é comando para crear unha sinatura:
keytool -genkey -v -keystore GeoGebraVR.keystore -alias GeoGebraVRAndroidKey -keyalg RSA -keysize 2048 -validity 10000

Unha vez creada a sinatura debemos asinar a aplicación introducindo as claves axeitadas despois do comando. No comando, substitúe "GeoGebraVR" polo nome da túa aplicación.

Este é comando para asinar:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore GeoGebraVR.keystore GeoGebraVR.apk GeoGebraVRAndroidKey

Tamén podemos usar oterminal pata verificar a correcta sinatura do arquivo .apk. No comando, substitúe "GeoGebraVR" polo nome da túa aplicación no comando.

Este é comando para comprobar unha sinatura:
jarsigner -verify -verbose -certs GeoGebraVR.apk
2. Aliñado do arquivo .apk

Finalmente debemos aliñar o arquivo .apk utilizando unha utilidade do SDK de Android chamada Zipalign. No comando, substitúe "GeoGebraVR" polo nome da túa aplicación e corrixe a ruta do SDK en función do lugar no que estea instalado no teu ordenador.

Este é comando para comprobar aliñar o arquivo .apk:
/Android/sdk/build-tools/24.0.0/zipalign -v 4 GeoGebraVR.apk GeoGebraVR-aligned.apk
2. Subida do arquivo .apk a Google Play Developer Console

Despois de asinar e aliñar o arquivo .apk, a aplicación queda lista para subila a Google Play Developer Console. Como podemos ver a través das seguintes capturas, o proceso é moi sinxelo. En primeiro lugar introducimos o nome e o idioma da aplicación. Despois creamos unha versión de produción da nosa aplicación no apartado de xestión de versións e subimos o arquivo .apk. A continuación cubrimos a información necesaria para ficha de Play Store. Por último, cubrimos por orde os apartados de clasificación de contido, prezo e distribución, e contido da aplicación. Finalmente, para rematar, volvemos á versión de produción da aplicación no apartado de xestión de versións, pulsamos no botón de revisar e pulsamos no botón de iniciar lanzamento.

13. Presentación dos resultados (2 sesión de clase)

A presentación do proxecto como parte da programación do último día de clase do curso, xuntando dúas sesión de clase e un recreo. Reservamos unha aula do centro, moi accesible e próxima ao salón de actos e organizamos un evento de portas abertas, no que o alumnado podía achegarse instalar a aplicación nos seus teléfonos móbiles e probar gafas VR de cartón. Ao longo da mañá os alumnos e alumnas de Debuxo Técnico de 1º de Bacharelato foron convidando a distintos grupos a pasar pola aula a probar a súa aplicación e ver outros recursos VR dispoñibles na rede.

Materiais e recursos que foron necesarios

  • Aula informática con ordenadores co programa GeoGebra instalado
  • Teléfonos móbiles do alumnado
  • 1 ordenador con Android Studio e Cordova instalado
  • Gafas VR de cartón

Resultados

Pulsa para cargar a construcción en Geogebra
PNG - 49.8 KB
2015 VHPLab. I 2014 I 2013 I
English I Galego