Introducción a hauzd - Parte 4
Para ver el video con subtítulos en español, actívalos en youtube
Introducción a Hauzd - Parte 4
En este video, aprenderemos cómo modificar y usar nuestra plantilla de interfaz para crear un look and feel único para su cliente.
Sus clientes siempre apreciarán si crea una UI especial, que coincida con su marca y la mejor manera de hacerlo es usar Adobe Illustrator para modificar, personalizar e importar sus propios archivos de interfaz de usuario al motor
Necesitará el script hauzd para Adobe Illustrator, puede descargarlo desde nuestro sitio de help desk e instalarlo en la carpeta de presets / scripts. Ver cómo instalar. Este script exportará todos sus elementos a la carpeta correcta y al formato correcto, después de que la exportación haya terminado, solo necesita importarlo al engine.
También necesitará la interfaz de usuario estándar, también puede encontrarla en nuestro sitio de help desk.
Este paquete contendrá la Standard UI que usa el proyecto Sample. 3 archivos de Illustrator que la aplicación usará en sus diferentes tamaños, pequeño (small.ai), mediano(medium.ai) y grande(large.ai). Esos 3 archivos deben tener los mismos elementos y configuración a menos que necesite diferentes interfaces de usuario para cada tamaño.
Ahora, abriremos el archivo ilustrador medio para inspeccionar lo que hay dentro:
La plantilla ya tiene todo organizado en capas con nombres y colores específicos, no tendrá que modificar el código por ahora, pero será realmente útil si se familiariza con algunos de ellos para saber exactamente qué está modificando.
Todo es personalizable, para cambiar el color de un icono o fondo, debe cambiar el Color de relleno (Fill Color) y cambiar el color de una tipografía, debe cambiar el color del trazo (Stroke Color)
Tenemos un par de subcapas para cada capa principal
Las subcapas EXPORT_RECT y EXPORT_IMAGE se utilizan para definir elementos de IU rectangulares y asignarles su propósito específico. Por ejemplo, puede crear botones de textos. botones de elementos gráficos decorativos, como btnReturn y marcar otros elementos.
La diferencia entre EXPORT_RECT y EXPORT_IMAGE es que los elementos en:
EXPORT_RECT solo exportará su posición, dimención, colores de relleno y trazo y Tags, pero NO GRÁFICOS;
EXPORT_IMAGE exportará gráficos, estos elementos son los ubicados en la misma posición, dentro de el layer principal o dentro de la subcapa "content".
Tenga en cuenta que aunque EXPORT_RECT no exporta gráficos, los elementos de EXPORT_RECT pueden hacer referencia a otros elementos gráficos con una etiqueta "ref". También tenga en cuenta que algunos elementos no necesitan gráficos en absoluto (como textos y bordes), y siempre deben colocarse dentro de EXPORT_RECT.
En las capas Magenta encontraremos todos los elementos de entrada en el orden en que aparecerán, el fondo general será el último en la lista de capas, de esta manera también puede usarlo como guía de color como fondo en Illustrator.
La primera y segunda capa Magenta contendrán el logotipo de proyecto y la posición del facilitador(Constructoras, aliados, inversionistas...).
La tercera capa contiene los botones de idioma.
Las dos capas siguientes definen la posición de los mismos elementos (Logos) en la galería de intro
Tenga en cuenta que las imágenes rotativas de está galería de entrada se definirán en la configuración en el engine marcando "IS PRIME" al agregar una imagen
La última capa Magenta se encargará de la pantalla de disclaimer, el espacio para el texto y los botones, este texto se definirá utilizando el panel de administración en la sección "App" en los desplegables de el admin.
Las capas de color azul claro contienen iconos y botones para su aplicación, iconos de filtros y controles de slider.
Estos botones se mostrarán dependiendo de la configuración de la aplicación, por ejemplo, si no tiene una lista válida guardada en hauzdEd, el ícono no se mostrará
Las capas cian definirán información y textos cuando se seleccione o no una unidad, esto puede mostrar propiedades que ya definimos en la aplicación, como labels, beds, baths, priceUSD, status y más.
Las capas anaranjadas contienen información compartida, como iconos comunes, bordes de thumbs, colores superiores de la interfaz y muy importante, los grupos, hablaremos más sobre los grupos en un par de minutos.
Las capas verdes contienen interfaz de pantallas secundarias, puede encontrar la pantalla de lista, galería, imagen, especificación y contacto
Puede personalizar la mayoría de los aspectos de su interfaz de usuario, tenga en cuenta que debe preservar la estructura de la capa, si no tiene su contenido modificado en la capa correcta, es posible que cause errores.
Recuerde que los vectores, las imágenes y los datos de píxeles deben estar AFUERA DE LA CAPA EXPORT_RECT, Y AFUERA DE EXPORT_IMAGE, pero dentro de su capa principal, hay una subcapa llamada "content" que puede usar para esto.
Puede detectar fácilmente qué tipo de capa está editando, los tipos más importantes son widget, texto(Text..) y botón (btn...)
Hay varias opciones para modificar la apariencia en la aplicación, esas opciones se definirán dentro del nombre de la capa {.....}
Puede modificar el anclaje de la posición utilizando estos valores
a="None" → No Anclaje
a="L" o a="Left" → Anclaje a la Izquierda
a="R" o a="Right" → Anclaje a la Derecha
a="B" o a="Bottom" → Anclaje al extremo Inferior
a="T" o a="Top" → Anclaje al extremo superior
a="LB" o a="LeftBottom" → Anclaje al extremo inferior izquierdo
a="RB" o a="RightBottom" → Anclaje al extremo Inferior Derecho
a="LT" o a="LeftTop" → Anclaje al extremo Superior Izquierdo
a="RT" o a="RightTop" → Anclaje al extremo Superior Derecho
Font size
f="Small" o f="S" → Tipografía Pequeña
f="Medium" o f="M" → Tipografía Madiana
f="Lage" o f="L" → Tipografía grande
vertical align
alv="B" → Alineación Vertical Inferior
alv="T" → Alineación Vertical Superior
Entrada(Fade in) y salidas(Fade Out) de animaciones
Color de botones
Texto a mostrar
Puedes usar tu propio texto
o usar una propiedad o label de el admin
Grupos
Los grupos se usarán para organizar nuestros íconos dentro de un espacio específico, puede ajustar esos espacios en la capa de grupo y asignar dicho grupo en el nombre de nuestra capa, todos los elementos se organizarán automáticamente en el mismo orden que los tienes, usar grupos en íconos puede ayudar crear diseños agradables que se puedan adaptar muy bien en todos los dispositivos
g="gX"
gX= ID de grupo
Después de que hayamos terminado de editar, puede ejecutar el script en los 3 tamaños e importar su interfaz de usuario, recuerde configurar en el editor su orientación e idiomas preferidos, en el panel de administración establecerá todos los textos y etiquetas para los idiomas que haya seleccionado.
Recuerde, todos los cambios en el administrador se aplicarán en el momento en que guarde, no necesita importar nuevamente su IU a menos que aplique un cambio de diseño
La personalización siempre será algo que su cliente apreciará, y hay muchas opciones para ello, si necesita ayuda o ayuda con su diseño único, puede solicitar ayuda en nuestra sección de foro (Community)
Related Articles
Introducción a hauzd Engine - Parte 1
¡Hauzd es la forma más fácil de crear presentaciones 3D interactivas de bienes raíces y me alegra poder mostrales el proceso de producción para que pueda comenzar a crear sus proyectos más rápido y más fácil que nunca!. Si aún no tiene Hauzd Engine, ...Introducción a hauzd - Parte 3
Para ver el video con subtítulos en español , actívalos en youtube. Introducción a Hauzd - Parte 3 ¡Bienvenido a la tercera parte de nuestra curva de aprendizaje! ¿Te perdiste el segundo? INGRESA ACÁ. ¡En este tutorial aprenderemos cómo ensamblar ...Introducción a hauzd - Parte 2
INFORMACIÓN MUY IMPORTANTE Si estás usando la versión del editor 1.06.130 o más reciente, puedes importar tu escenas mucho más rápido: • NO necesitas usar los prefixes geom_ o obj_ • NO necesitias hacer UV unwrap del canal 2 en cada elemento ...Creando una aplicación interactiva 2D con hauzd
En este tutorial vamos a aprender paso a paso cómo crear una aplicación interactiva 2D con hauzd. Recomendamos ver todos los videos en orden uno a uno y activar los subtítulos en español. Antes de Empezar ...Wall Generation Script (Español)
Hola! El Walls Generation Script es altamente util para modelar o levantar las escenas interiores de nuestra aplicación! which would be greatly useful once you start modelling your FloorPlan Scenes. El Script crea automáticamente sus paredes a partir ...