Advertencia

Este documento está desactualizado. FIXME: utiliza recursos alojados de alta fidelidad(HiFi), potencialmente más.

Aplicaciones de Tablet

THIS GUIDE IS OUT OF DATE. THE CODE MAY NOT WORK EXACTLY AS OUTLINED, USE FOR REFERENCE ONLY UNTIL UPDATED. SEE API DOCS<https://apidocs.overte.org/> FOR MORE.

Tablet apps (or simply "apps") in Overte are customizable programs that expose functionality in an easy-to-use user interface. Apps let you take complex code from our JavaScript API and simplify it into a window with controls for others to use.

Nota

Para crear aplicaciones personalizadas, debes tener un conocimiento básico de desarrollo web (HTML, CSS y JavaScript) y poder navegar por nuestra API.

Los pasos necesarios para crear una aplicación para tablet son:

1. Crea iconos para que aparezcan en la tableta y HUD

2. Diseña la interfaz de usuario de tu aplicación en HTML y CSS

3. Agrega controladores de eventos a tu archivo HTML

4. Escribe un archivo JavaScript que:

   • Agrega un botón a la tablet y al HUD

   • Cargar tu aplicación

   • Cerrar tu aplicación

   • Escuchar eventos

   • Ejecutar su código (en este caso, crea algunas gemas)

Tutorial: Crea la aplicación de tablet de intercambio de Gemas

En este tutorial, recorreremos los pasos anteriores para crear una aplicación llamada "Fabricador Mágico de Gemas". Esta sencilla aplicación te permite generar pequeñas piedras preciosas de colores en realidad virtual que puedes compartir con tus amigos.

Crea iconos para que aparezcan en la tablet y el HUD

Necesitas que aparezcan dos íconos en la tablet y el HUD: una imagen SVG o PNG para mostrar en el botón de la aplicación cuando la aplicación está activa, generalmente llamado <appName>-a.svg y otro para mostrar cuando la aplicación está inactiva, usualmente llamado``<appName>-i.svg``.

Recomendamos las siguientes especificaciones para tus iconos:

• Tamaño: 50 px por 50 px

• Color: blanco sobre un fondo transparente (para iconos inactivos) y negro sobre un fondo transparente (para iconos activos)

• Formato de archivo: SVG o PNG

Puedes crear tu propio icono utilizando un software de diseño gráfico o cualquier otro recurso en línea.

Diseña la interfaz de usuario de tu aplicación en HTML y CSS

La interfaz de usuario de tu aplicación debe proporcionar texto sobre cómo funciona la aplicación y utilizar elementos de la interfaz de usuario familiares con los que el usuario sepa cómo interactuar (como botones, barras de desplazamiento y enlaces). Ten en cuenta que las dimensiones de la pantalla de la tablet son 480 x 720, por lo que toda la interfaz de usuario debe limitarse a este espacio.

Para ayudarte a comenzar, hemos creado una plantilla HTML de inicio rápido que puedes reutilizar. Contiene el mismo diseño, estilo y fuente que la pantalla del menú principal, y tiene una barra de encabezado para el título de tu aplicación. Con solo unas pocas modificaciones simples, puedes crear una interfaz de usuario de aplicación simple en minutos.

Agrega controladores de eventos a tu archivo HTML

El marco de la interfaz de usuario de la tablet proporciona un canal de comunicación llamado EventBridge. Te permite enviar y recibir eventos entre el script del cliente (gemstoneApp.js) y JavaScript en tu aplicación web (gemstoneMagicMaker.html). Usa el siguiente código de EventBridge dentro de las etiquetas <script></script> en el cuerpo de tu archivo HTML para manejar los clicks de los botones:

function main() {
    // Send an event to gemstoneApp.js when the page loads
    // and is ready to get things rolling
    console.log("document ready");
    var readyEvent = {
        "type": "ready",
    };

    // The event bridge handles events represented as a string the best.
    // So we first create a JavaScript object, then convert to string
    EventBridge.emitWebEvent(JSON.stringify(readyEvent));

    // Send an event when user click on each of the gemstone buttons
    $(".gemstone-button").click(function(){
        console.log(this.value + " button click");
        var clickEvent = {
            "type": "click",
            "data": this.value
        };
        EventBridge.emitWebEvent(JSON.stringify(clickEvent));
    });
}
$(document).ready(main);

Escribe un archivo JavaScript

Tu archivo JavaScript contendrá todas las funciones principales de tu aplicación. Como mínimo, requerimos que tenga un código que agregue un botón a la tablet y al HUD, carga tu aplicación, cierra tu aplicación con elegancia y escucha eventos. A continuación, encontrarás ejemplos de código para hacer cada una de estas cosas.

Agregar botones a la tablet y al HUD

Utiliza el módulo AppUI para agregar automáticamente el botón de tu aplicación a la tablet y al HUD, y para conectar manejadores de click de botón:

(function () { // BEGIN LOCAL_SCOPE
var AppUi = Script.require('appUi');

var ui;
function startup() {
    ui = new AppUi({
        buttonName: "APP-NAME", // The name of your app
        home: Script.resolvePath("app.html"), // The path to your app's UI
        graphicsDirectory: Script.resolvePath("./") // The path to your button icons
    });
}
startup();
}()); // END LOCAL_SCOPE

Determina el comportamiento de inicio de la aplicación

Si deseas que tu aplicación haga algo específico cuando se abra, usa la funcionalidad onOpened del módulo AppUI. Por ejemplo, podrías:

• Consultar a un servidor para obtener una respuesta y determinar qué mostrar en la interfaz de usuario

• Comienza a mostrar una interfaz 3D separada de la tablet

• Determina el modo de visualización (VR/Escritorio) y cambia las cosas para mostrarlas en la interfaz de usuario

(function () { // BEGIN LOCAL_SCOPE
var AppUi = Script.require('appUi');

function onOpened() {
    console.log("hello world!");
}

var ui;
function startup() {
    ui = new AppUi({
        buttonName: "APP-NAME", // The name of your app
        home: Script.resolvePath("app.html"), // The home screen of your app that appears when clicking the app button
        graphicsDirectory: Script.resolvePath("./"), // Where your button icons are located
        onOpened: onOpened // See the simple function above
    });
}
startup();
}()); // END LOCAL_SCOPE

Cierra la aplicación con gracia

El módulo AppUI asegura que tú aplicación se cierre correctamente. Sin embargo, si deseas hacer algo más cuando se cierre la aplicación, puedes hacerlo con la funcionalidad onClosed integrada en el módulo AppUI. Por ejemplo, podrías:

• Eliminar interfaces 3D

• Detener archivos secundarios

(function () { // BEGIN LOCAL_SCOPE
var AppUi = Script.require('appUi');

function onOpened() {
    console.log("hello world!");
}

function onClosed() {
    console.log("hello world!");
}

var ui;
function startup() {
    ui = new AppUi({
        buttonName: "APP-NAME", // The name of your app
        home: Script.resolvePath("app.html"), // The home screen of your app that appears when clicking the app button
        graphicsDirectory: Script.resolvePath("./"), // Where your button icons are located
        onOpened: onOpened // See the simple function above
        onClosed: onClosed // See the simple function above
    });
}
startup();
}()); // END LOCAL_SCOPE

Escucha los eventos

En el paso 3 anterior, agregamos manejadores de eventos a tu archivo HTML . Ahora, necesitas agregar código a tu archivo JavaScript para escuchar los eventos:

function onWebEventReceived(event) {
   print("gemstoneApp.js received a web event: " + event);
}
tablet.webEventReceived.connect(onWebEventReceived);

Crear gemas

The final step is to code the behavior of your JavaScript file. In this case, we'll create gemstones using Overte's JavaScript API. Each gemstone will be created as an entity, and we can change the gemstone's properties using the Entity namespace.

Calcular la posición de cada nueva gema

El siguiente código nos da una posición justo frente al usuario:

// Helper function that gives us a position right in front of the user
function getPositionToCreateEntity() {
  var direction = Quat.getFront(MyAvatar.orientation);
  var distance = 0.3;
  var position = Vec3.sum(MyAvatar.position, Vec3.multiply(direction, distance));
  position.y += 0.5;
  return position;
}

Establecer las propiedades de la gema y agregarla

La gema se creará cuando gemstoneApp.js reciba eventos de click de cada uno de los botones:

// Handle the events we're receiving from the web UI
function onWebEventReceived(event) {
    print("gemstoneApp.js received a web event:" + event);

    // Converts the event to a JavasScript Object
    if (typeof event === "string") {
        event = JSON.parse(event);
    }

    if (event.type === "click") {
        // Define the entity properties of for each of the gemstone, then add it to the scene
        var properties = {
            "type": "Shape",
            "position": getPositionToCreateEntity(),
            "userData": "{\"grabbableKey\":{\"grabbable\":true}}"
        };
        if (event.data  === "Emerald") {
            properties.name = "Emerald";
            properties.shape = "Dodecahedron";
            properties.color = {
                "blue": 122,
                "green": 179,
                "red": 16
            };
            properties.dimensions = {
                "x": 0.20000000298023224,
                "y": 0.26258927583694458,
                "z": 0.20000000298023224
            };
            Entities.addEntity(properties);
        } else if (event.data  === "Ruby") {
            properties.name = "Ruby";
            properties.shape = "Octagon";
            properties.color = {
                "blue": 160,
                "green": 52,
                "red": 237
            };
            properties.dimensions = {
                "x": 0.20000000298023224,
                "y": 0.24431547522544861,
                "z": 0.12547987699508667
            };
            Entities.addEntity(properties);
        } else if (event.data  === "Sapphire") {
            properties.name = "Sapphire";
            properties.shape = "Icosahedron";
            properties.color = {
                "blue": 255,
                "green": 115,
                "red": 102
            };
            properties.dimensions = {
                "x": 0.160745769739151,
                "y": 0.20000000298023224,
                "z": 0.23340839147567749
            };
            Entities.addEntity(properties);
        } else if (event.data  === "Quartz") {
            properties.name = "Quartz";
            properties.shape = "Octahedron";
            properties.color = {
                "blue": 245,
                "green": 142,
                "red": 216
            };
            properties.dimensions = {
                "x": 0.20000000298023224,
                "y": 0.339866042137146,
                "z": 0.20000000298023224
            };
            Entities.addEntity(properties);
        }
    }
}

Congratulations, you have successfully created an app in Overte! To use your app, upload it to a cloud platform, such as Amazon S3, Google Cloud Storage, Microsoft Azure, etc. Once hosted, you can install it and use it:

1. En la Interfaz, ve a Edit > Running Scripts.

2. En "Load Scripts", haz click en "From URL" e ingresa la URL de tu archivo JavaScript alojado.

3. Haz click en el icono de la aplicación en la tablet o HUD para abrir la aplicación.

Ver también

• Escribe Tus Propios Archivos

• API Reference: Entities

• API Reference: Script

• API Reference: Quat

• API Reference: Vec3