Transcripción de video
UCI Editor: Personalización
9m 59s
00:08
Ahora que ya conoces los pasos básicos para crear y administrar una UCI, es tiempo de añadir contenido más real a ella.
00:15
Hemos visto que se pueden añadir controles desde el esquemático a la UCI, ya sea, arrastrando esos elementos o copiándolos y pegándolos.
00:24
Es importante tener en cuenta que no se puede arrastrar el componente tal cual a la UCI,
00:30
sino que se tienen que agregar sus controles; y puedes agregar tantos como quieras.
00:35
Todas las herramientas gráficas también trabajan en la UCI.
00:38
Así que, puede crear Cajas de texto, por ejemplo… Encabezados… Cajas de agrupamiento y Polígonos… Si no le son familiar estas herramientas, vea nuestros videos de Descripción de Software.
00:51
El Editor de UCI tiene una colección de letras claras y profesionales, las cuales tienen una gran variedad de estilos para escoger.
01:00
Cuando estés eligiendo colores para un objeto, nuestro selector de color le permitirá seleccionar el tono en una rueda de color,
01:09
ajustar el brillo y la saturación aquí, o puedes ingresar directamente valores RGB o códigos de color en hexadecimal.
01:18
Los colores que has usado recientemente los encontrarás en la sección “Design Colors” o colores del diseño para una mayor conveniencia.
01:26
Con respecto a la personalización de botones, ya hemos visto la mayoría de las formas para ajustar el tamaño del botón, color, etiqueta e ícono.
01:36
Pero, quisiera mostrar también esta propiedad: “Button Style” o tipo del botón.
01:41
Por defecto, muchos botones tienen un estilo brillante, lo que resalta sutilmente la parte alta del botón.
01:50
Puedes elegir “Flat” o plano para mantener un color sólido, o… puedes seleccionar “Image” o imagen.
01:57
Esto te permite importar tu propio gráfico personalizado y reemplazar completamente el botón con sus propias imágenes.
02:05
Un botón tiene algunos estados distintos – un encendido, un apagado, así como,
02:12
”presionado encendido” el cual es visible cuando presionas el botón para encenderlo y “presionado apagado”, el cual es visible cuando presionas el botón para apagarlo.
02:22
También puedes agregar imágenes externas a su UCI solo con propósitos estéticos.
02:27
Puedes añadir archivos en PNG, JPEG o SVG, creo que entiende perfectamente.
02:34
No te preocupe en buscar un botón para “importar la imagen”, ya que es mucho más sencillo que eso. Solo arrastra una imagen desde el explorador de archivos hacia el Editor de UCI.
02:46
Los objetos transparentes como los PNG, mantendrán esas secciones transparentes en su UCI.
02:52
Puedes dar click derecho en un objeto y seleccionar “Bring to Front” o Colocar al Frente o “Send to Back” o Mandar al Fondo para cambiar la ubicación del objeto en un plano z.
03:03
De hecho, si pone una imagen al frente de un botón, el botón mantendrá su funcionalidad, ya que la imagen en sí, no es interactiva.
03:12
Esto le permite crear algunos efectos geniales usando gráficas con transparencias.
03:17
Por ejemplo, si tiene acceso al plano o a un modelo en 3D de su recinto,
03:22
una manipulación sencilla de la imagen con un editor gráfico, puede añadir secciones transparentes.
03:30
Puede crear un mapa interactivo para cosas como, controles rápidos para áreas geográficas de un recinto… selección de zonas para voceos… o una interfaz personalizada para combinar cuarto.
03:43
Todo esto involucra una sola imagen que se coloca al frente de botones y polígonos estándar de Q-SYS.
03:50
Por cierto, cuando añades imágenes al diseño, estas son guardadas como parte de su archivo de Q-SYS, así que no se preocupe por perder esos links cuando las mueva – realmente están embebidas en el diseño.
04:03
Estamos hablamos sobre agregar imágenes, pero hablemos también de los tamaños de imagen.
04:09
Los modelos de touchscreen tienen diferentes dimensiones en pixeles, algunas se pueden ver aquí.
04:15
No hay razón alguna para añadir una imagen más grande en pixeles que la pantalla que la muestra.
04:22
De hecho, si añade gráficos muy pesados a su UCI podría ver una disminución en el desempeño de la pantalla, debido a que el sistema tiene que actualizar esa imagen muchas veces por segundo.
04:35
Aún si el gráfico es un formato comprimido, el Core de Q-SYS tiene que descomprimir ese archivo para entregarlo al touchscreen,
04:42
así que no infle su diseño con imágenes de súper alta resolución, especialmente si las usa todas.
04:50
Una vez que comienza a añadir muchas cosas a su UCI, como hemos hecho, verá que necesitamos una manera para organizar todo.
04:58
Además de usar múltiples páginas, que fue lo que vimos en el video pasado, hay muchas otras herramientas a su disposición.
05:06
Debes haber visto que no hay una rejilla para fijar los objetos en su lugar, pero puedes añadir tus propias líneas de guía haciendo doble click en el margen izquierdo o superior.
05:17
Ahora puedes fijar los objetos a estas guías para asegurarte que están alineados.
05:22
Para quitar una guía, puede arrastrarla hacia la esquina superior izquierda, o haciendo click derecho y seleccionando “Clear Guides” o limpiar guías.
05:31
Tiene también herramientas rápidas para organizar elementos en el menú desplegable con click izquierdo.
05:37
Si selecciona un par de objetos y hace click derecho, puedes rápidamente “Alinearlos” en la misma línea vertical u horizontal;
05:45
puedes “Distribuirlos” para darles el mismo espacio, o “Apilarlos” para juntarlos uno al lado del otro.
05:52
También puede ahorrar espacio usando “Pop Up Buttons”. Los Pop Up Buttons pueden encontrarse en la división Layout de la librería del esquemático.
06:01
Cuando colocas uno en su UCI e interactúas con él, una ventana escondida se despliega.
06:07
Puedes ajustar el tamaño de esta ventana… o decidir en qué costado será desplegada… así como el color de la ventana.
06:15
Usted puede agregar tantos controles como quiera al área del pop up y cuando presiones el botón nuevamente, se esconderán automáticamente.
06:24
Esto le da al usuario acceso rápido a muchos controles que de otra manera estarían muy apretados en la página,
06:31
sin tener que forzar al usuario a navegar en otra página completamente distinta.
06:36
En la medida que conozcas más herramientas, es probable que le sea valioso combinarlas.
06:41
Por ejemplo, si usamos un popup button en conjunto con nuestra imagen del plano transparente,
06:47
puede hacer una página interactiva que le dé al usuario acceso a varios controles para múltiples áreas, como la ganancia y estado de los amplificadores, todo en una pantalla.
06:59
A continuación, hablemos de Capas. Si abres la división de su página aquí en editor de UCI, verá que ha estado trabajando en la capa 1.
07:12
Puede añadir capas nuevas a su página presionando el ícono de “más” y seleccionando “Add Layer” o añadir capa.
07:20
Cada capa es como un panel de cristal – puedes juntar todas estas capas una encima de otra y ver a través de ellas las capas inferiores, todo en una misma página.
07:31
Podrías abrir la división de la capa para ver una lista de todos los objetos en esa capa. Aquí puede ver las imágenes, botones y elementos gráficos que ha añadido.
07:44
Yo voy a seleccionar mi nueva capa y voy a añadir contenido nuevo desde el esquemático hacia la Capa 2.
07:51
Ahora se ve muy similar a como si los hubiera colocado en la misma capa, pero vayamos más a fondo para ver qué podemos hacer con las capas.
07:59
Cada capa y cada objeto puede bloquearse en su lugar usando esta opción, para que no pueda mover,
08:06
o presionar el botón “Show/Hide” o mostrar/ocultar para hacerlos temporalmente invisibles.
08:12
Puede ser útil agrupar controles similares en una sola capa, y entonces esconder esa capa para que pueda enfocarse en otras áreas.
08:21
O, puede añadir una capa inferior donde solo esté su imagen de fondo, para entonces bloquearla y no la seleccione accidentalmente al querer mover otros objetos.
08:30
También puedes ajustar el orden de estos objetos con mucha más elegancia ya sea, moviéndolos arriba o abajo en el plano z con estos botones o arrastrándolos a una nueva posición en el editor de UCI.
08:44
Tenga en cuenta que los objetos en una capa superior aparecerán arriba de cualquier objeto de una capa inferior.
08:51
Cuando uses los comandos “Send to Back” o “Bring to Front”, solo moverán los objetos hacia el frente o atrás de la capa donde se encuentran.
09:00
Esto te permite ser muy específico con la apariencia del diseño, evitando enviar objetos atrás del fondo de manera accidental.
09:08
Una de las ventajas más grandes de usar capas es el hecho de que se pueden programar transiciones de entrada o de salida de la pantalla.
09:16
Necesitará programar estas transiciones ya sea usando el controlador de texto de Lua o el componente de “Block Controller” o control por bloques.
09:25
Una vez que aprendas estos comandos, podrás usar las capas como paneles que se deslizan en la pantalla y fuera de ella... o controles extra que se revelan… y se esconden de nuevo… o, un gran número de implementaciones creativas.
09:41
Así que, hemos visto muchas herramientas a su disposición para personalizar la apariencia y funcionalidad de su UCI.
09:48
En el siguiente video, veremos cómo puede desplegar su UCI en un touchscreen. ¡Hasta la próxima!
Descripción de la lección
UCI Editor: Personalización
9m 59s
Importar gráficos y fondos de pantalla. Implementar UCIs en pantallas externas.