• Taptap UI

  • Vista Principal

  • Lista de features

  • Vista Principal 2

  • Formularios

  • Creacion de Capas

  • Creacion de Capas 2

  • Tabla de features

  • En esta pantalla se puede apreciar la vista principal donde se muestra un mapa a pantalla completa sobre el cual se despliegan los distintos features de las capas de información que se están visualizando.

    En el panel derecho se muestra una lista de capas de información disponible. Cada una de ellas tiene dos herramientas representadas por iconos en lado derecho de cada item. La primera herramienta con icono en forma de ojo permite habilitar o deshabilitar la visualizacion de los features de esa capa en el mapa. Por otra parte la segunda herramienta dirige a la visualización de features de la capa y que se puede apreciar en la vista Lista de features.

    Al final de la lista de capas se encuentra un enlace que dirije a la vista Creacion de Capas y que permite definir una nueva capa de información.

  • En la lista de features se despliegan todos los features de la capa seleccionada y se proporcionan herramientas para editar el feature o eliminarlo.

  • Esta vista es igual a la vista principal, pero aquí se pueden apreciar otros componentes de la interfaz. Cuando un usuario pincha sobre un feature, se despliega un popup con un resumen del feature, además de unos botones (no estan incluidos en la imagen) que permiten editar o eliminar el feature.

  • En la esquina superior izquierda se encuentra un icono que permite agregar un feature del mismo tipo de la capa seleccionada en el panel derecho. En el ejemplo se puede agregar un nuevo paradero porque esa es la capa seleccionada. Esto significa además, que cada vez que el usuario seleccione una capa en el panel derecho, se debe actualizar el boton de la esquina.

  • Cuando se presiona el boton agregar feature de la esquina superior izquierda, el boton debe cambiar su estilo para indicar que está activo, además el puntero del mouse igual debe cambiar para indicar al usuario que se espera que presione en algun lugar del mapa. Una vez que el usuario haya presionado sobre un lugar en el mapa debe aparecer el formulario asociado a la capa. Este formulario es creado dinamicamente a partir de un esquema de atributos que se definió al momento de crear la capa de información. Una vez que el usuario complete el formulario y lo guarde, los datos en formato json se enviaran al servidor para que así distribuir el nuevo feature a los demas usuarios conectados.

  • En la vista principal cuando el usuario presiona Create new layer es enviado a esta pantalla. Aquí el usuario puede definir una capa de información.

  • En la pantalla anterior se definieron los datos generales de la nueva de capa de información. Para completar la creación de la capa de información es necesario definir el esquema de atributos que tendrán los features asociados a la nueva capa. La definición de ese esquema se realiza en esta pantalla. En el panel izquierdo se encuentra una lista de tipos de atributos que el usuario puede arrastrar al area de trabajo (centro de la pantalla) donde se va construyendo el esquema. Cada elemento arrastrado al area de trabajo pasará a ser un campo del formulario que el usuario deberá rellenar cuando cree un nuevo feature. El tipo section es especial, es un organizador de campos, que permitirá dividir los formularios con gran cantidad de campos.

  • Cuando un usuario pincha sobre un campo en el area de trabajo, este despliega un panel de configuración. En el panel de configuración hay opciones que son generales para todos los campos y otras especificas dependiendo del tipo.

  • Esta vista esta asociada al filtro de datos. Esta vista esta incompleta, falta agregar un panel donde se pueda filtrar por campos.

  • La tabla despliega la lista de features de una capa. Arriba un campo de texto permite filtrar los elemento de la tabla. Cuando se filtran datos en la tabla, los resultados tambien se deben representar en el mapa.

  • Una vez que el usuario esta conforme con los datos filtrados puede descargarlos en formato csv y excel.

{"cards":[{"_id":"393eab0100251e8e0d00000a","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":null,"content":"# Taptap UI"},{"_id":"3bec2138348593fe2900000b","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":"393eab0100251e8e0d00000a","content":"### Vista Principal"},{"_id":"3cce582180656a7843000023","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":"3bec2138348593fe2900000b","content":"![](https://taptap.mybalsamiq.com/mockups/1448206.png?key=35affd91daac0dc0b285f8d493a6fc0da90697f7) \n"},{"_id":"3ccf3248c04b6ae9c600001a","treeId":"393eaae400251e8e0d000008","seq":1,"position":2,"parentId":"3bec2138348593fe2900000b","content":"En esta pantalla se puede apreciar la vista principal donde se muestra un mapa a pantalla completa sobre el cual se despliegan los distintos features de las capas de información que se están visualizando.\n\nEn el panel derecho se muestra una lista de capas de información disponible. Cada una de ellas tiene dos herramientas representadas por iconos en lado derecho de cada item. La primera herramienta con icono en forma de ojo permite habilitar o deshabilitar la visualizacion de los features de esa capa en el mapa. Por otra parte la segunda herramienta dirige a la visualización de features de la capa y que se puede apreciar en la vista **Lista de features**.\n\nAl final de la lista de capas se encuentra un enlace que dirije a la vista **Creacion de Capas** y que permite definir una nueva capa de información.\n"},{"_id":"3ccea702d3240bc8ab00000b","treeId":"393eaae400251e8e0d000008","seq":1,"position":1.5,"parentId":"393eab0100251e8e0d00000a","content":"### Lista de features"},{"_id":"3ccea7c9d3240bc8ab00000c","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":"3ccea702d3240bc8ab00000b","content":"![](https://taptap.mybalsamiq.com/mockups/1448594.png?key=35affd91daac0dc0b285f8d493a6fc0da90697f7)"},{"_id":"3ccf1d96c04b6ae9c6000018","treeId":"393eaae400251e8e0d000008","seq":1,"position":2,"parentId":"3ccea702d3240bc8ab00000b","content":"En la lista de features se despliegan todos los features de la capa seleccionada y se proporcionan herramientas para editar el feature o eliminarlo."},{"_id":"3cce820480656a7843000025","treeId":"393eaae400251e8e0d000008","seq":1,"position":2,"parentId":"393eab0100251e8e0d00000a","content":"### Vista Principal 2"},{"_id":"3cce82a180656a7843000026","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":"3cce820480656a7843000025","content":"![](https://taptap.mybalsamiq.com/mockups/1448346.png?key=35affd91daac0dc0b285f8d493a6fc0da90697f7)\n\n"},{"_id":"3ccf13b0c04b6ae9c6000016","treeId":"393eaae400251e8e0d000008","seq":1,"position":2,"parentId":"3cce820480656a7843000025","content":"Esta vista es igual a la vista principal, pero aquí se pueden apreciar otros componentes de la interfaz. Cuando un usuario pincha sobre un feature, se despliega un popup con un resumen del feature, además de unos botones (no estan incluidos en la imagen) que permiten editar o eliminar el feature."},{"_id":"3ccf1833c04b6ae9c6000017","treeId":"393eaae400251e8e0d000008","seq":1,"position":3,"parentId":"3cce820480656a7843000025","content":"En la esquina superior izquierda se encuentra un icono que permite agregar un feature del mismo tipo de la capa seleccionada en el panel derecho. En el ejemplo se puede agregar un nuevo paradero porque esa es la capa seleccionada. Esto significa además, que cada vez que el usuario seleccione una capa en el panel derecho, se debe actualizar el boton de la esquina."},{"_id":"3ccea9d5d3240bc8ab00000d","treeId":"393eaae400251e8e0d000008","seq":1,"position":4,"parentId":"393eab0100251e8e0d00000a","content":"### Formularios"},{"_id":"3cceaa50d3240bc8ab00000e","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":"3ccea9d5d3240bc8ab00000d","content":"![](https://taptap.mybalsamiq.com/mockups/1448207.png?key=35affd91daac0dc0b285f8d493a6fc0da90697f7)"},{"_id":"3ccf2116c04b6ae9c6000019","treeId":"393eaae400251e8e0d000008","seq":1,"position":2,"parentId":"3ccea9d5d3240bc8ab00000d","content":"Cuando se presiona el boton agregar feature de la esquina superior izquierda, el boton debe cambiar su estilo para indicar que está activo, además el puntero del mouse igual debe cambiar para indicar al usuario que se espera que presione en algun lugar del mapa. Una vez que el usuario haya presionado sobre un lugar en el mapa debe aparecer el formulario asociado a la capa. Este formulario es creado dinamicamente a partir de un esquema de atributos que se definió al momento de crear la capa de información. Una vez que el usuario complete el formulario y lo guarde, los datos en formato json se enviaran al servidor para que así distribuir el nuevo feature a los demas usuarios conectados."},{"_id":"3ccebabcd3240bc8ab00000f","treeId":"393eaae400251e8e0d000008","seq":1,"position":5,"parentId":"393eab0100251e8e0d00000a","content":"### Creacion de Capas"},{"_id":"3ccebb5fd3240bc8ab000010","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":"3ccebabcd3240bc8ab00000f","content":"![](https://taptap.mybalsamiq.com/mockups/1457188.png?key=35affd91daac0dc0b285f8d493a6fc0da90697f7)"},{"_id":"3ccf32c7c04b6ae9c600001b","treeId":"393eaae400251e8e0d000008","seq":1,"position":2,"parentId":"3ccebabcd3240bc8ab00000f","content":"En la vista principal cuando el usuario presiona *Create new layer* es enviado a esta pantalla. Aquí el usuario puede definir una capa de información. "},{"_id":"3ccebc4bd3240bc8ab000011","treeId":"393eaae400251e8e0d000008","seq":1,"position":6,"parentId":"393eab0100251e8e0d00000a","content":"### Creacion de Capas 2"},{"_id":"3ccec1a6d3240bc8ab000013","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":"3ccebc4bd3240bc8ab000011","content":"![](https://taptap.mybalsamiq.com/mockups/1448330.png?key=35affd91daac0dc0b285f8d493a6fc0da90697f7)"},{"_id":"3ccf39b2c04b6ae9c600001c","treeId":"393eaae400251e8e0d000008","seq":1,"position":2,"parentId":"3ccebc4bd3240bc8ab000011","content":"En la pantalla anterior se definieron los datos generales de la nueva de capa de información. Para completar la creación de la capa de información es necesario definir el esquema de atributos que tendrán los features asociados a la nueva capa. La definición de ese esquema se realiza en esta pantalla. En el panel izquierdo se encuentra una lista de tipos de atributos que el usuario puede arrastrar al area de trabajo (centro de la pantalla) donde se va construyendo el esquema. Cada elemento arrastrado al area de trabajo pasará a ser un campo del formulario que el usuario deberá rellenar cuando cree un nuevo feature. El tipo *section* es especial, es un organizador de campos, que permitirá dividir los formularios con gran cantidad de campos."},{"_id":"3ccf48eec04b6ae9c600001d","treeId":"393eaae400251e8e0d000008","seq":1,"position":3,"parentId":"3ccebc4bd3240bc8ab000011","content":"Cuando un usuario pincha sobre un campo en el area de trabajo, este despliega un panel de configuración. En el panel de configuración hay opciones que son generales para todos los campos y otras especificas dependiendo del tipo."},{"_id":"3ccec0fbd3240bc8ab000012","treeId":"393eaae400251e8e0d000008","seq":1,"position":7,"parentId":"393eab0100251e8e0d00000a","content":"### Tabla de features"},{"_id":"3ccec435d3240bc8ab000014","treeId":"393eaae400251e8e0d000008","seq":1,"position":1,"parentId":"3ccec0fbd3240bc8ab000012","content":"![](https://taptap.mybalsamiq.com/mockups/1449056.png?key=35affd91daac0dc0b285f8d493a6fc0da90697f7)"},{"_id":"3cd948b3c04b6ae9c600001e","treeId":"393eaae400251e8e0d000008","seq":1,"position":2,"parentId":"3ccec0fbd3240bc8ab000012","content":"Esta vista esta asociada al filtro de datos. Esta vista esta incompleta, falta agregar un panel donde se pueda filtrar por campos."},{"_id":"3cd95665c04b6ae9c600001f","treeId":"393eaae400251e8e0d000008","seq":1,"position":3,"parentId":"3ccec0fbd3240bc8ab000012","content":"La tabla despliega la lista de features de una capa. Arriba un campo de texto permite filtrar los elemento de la tabla. Cuando se filtran datos en la tabla, los resultados tambien se deben representar en el mapa."},{"_id":"3cd9641ec04b6ae9c6000020","treeId":"393eaae400251e8e0d000008","seq":1,"position":4,"parentId":"3ccec0fbd3240bc8ab000012","content":"Una vez que el usuario esta conforme con los datos filtrados puede descargarlos en formato csv y excel."}],"tree":{"_id":"393eaae400251e8e0d000008","name":"TaptapUI","publicUrl":"taptap-ui"}}