Transcrições de Vídeo
Personalização da UCI
9m 7s
0:08
Agora que você conhece as etapas básicas de criação e gerenciamento de uma UCI, está na hora para
0:13
adicionar algum conteúdo real a ele. Você viu que podemos adicionar controles do esquema à UCI
0:18
arrastando esses elementos ou copiando-os e colando-os.
0:23
É importante notar que você não pode arrastar um componente para a UCI, você tem que adicionar
0:28
seus controles - e você pode adicionar quantos ou quantos quiser.
0:33
Todas as suas ferramentas gráficas também funcionam na UCI. Assim, você pode criar caixas de texto,
0:38
por exemplo ... Cabeçalhos ... Caixas de grupo ... e Polígonos ... Se você não estiver familiarizado com
0:45
essas ferramentas, confira nossos vídeos Visão geral do software. O Editor da UCI tem uma coleção de
0:51
fontes limpas e profissionais, cada uma com uma variedade de estilos para você escolher.
0:57
Ao escolher cores para um objeto, nosso seletor de cores exclusivo permite que você selecione um
1:01
matiz de uma roda de cores, ajuste o brilho e a saturação aqui ou pode inserir valores RGB diretos ou
1:11
códigos de cores hexadecimais. As cores que foram usadas recentemente serão encontradas na bandeja
1:16
“Design Colors” para sua conveniência.
1:19
Quando se trata de personalizar os próprios botões, você já viu a maioria das maneiras de ajustar o
1:24
tamanho, a cor, o rótulo e o ícone de um botão. Mas também quero mostrar essa propriedade: Button Style.
1:32
Por padrão, a maioria dos botões tem o estilo Gloss, que lhe dá um leve destaque no terço superior do
1:39
botão. Você pode escolher Flat para manter uma única cor sólida ou ... você pode selecionar "Imagem".
1:47
Isso permite que você importe seus próprios gráficos personalizados e substitua completamente o botão
1:52
por suas próprias imagens.
1:54
Um botão tem alguns estados diferentes - um estado ligado e desligado, assim como o “pressionado”
2:01
que é visível enquanto você ainda está pressionando o botão para ligá-lo, e “pressionado” é visível
2:06
enquanto você pressiona o botão para desligá-lo.
2:09
Você também pode adicionar imagens externas à sua UCI apenas para fins estéticos. Você pode
2:14
adicionar PNGs, JPEGs, arquivos SVG, você meio que consegue a foto. Não se preocupe em procurar um
2:20
botão "Importar imagem", porque é ainda mais fácil do que isso. Basta arrastar um arquivo de imagem
2:25
de um navegador de arquivos para o editor da UCI.
2:28
Objetos que possuem transparências, como PNGs, manterão essas seções transparentes na sua UCI.
2:35
Você pode clicar com o botão direito do mouse em um objeto e selecionar "Trazer para frente" ou
2:39
"Enviar para trás" para alterar a localização do objeto no espaço z.
2:43
De fato, se você colocar uma imagem em cima de um botão, o botão manterá sua funcionalidade, já que
2:49
a imagem em si não é interativa. Isso permite criar ótimos efeitos personalizados usando gráficos com transparências.
2:56
Por exemplo, se você tem acesso ao ground plan ou um modelo 3D do seu local, algumas simples
3:03
manipulação dessa imagem com um editor gráfico pode adicionar seções transparentes.
3:08
Você pode então criar um mapa interativo para coisas como controles rápidos para áreas geográficas do
3:13
local ... selecção de zona para anúncios PA ... ou uma interface Combiner quarto personalizado ... Todas
3:20
estas envolvem uma única imagem que é simplesmente colocado sobre os botões e polígonos padrão Q-SYS.
3:26
A propósito, à medida que você adiciona imagens ao design, elas são salvas como parte do seu arquivo
3:31
Q-SYS, portanto não se preocupe em perder esses links quando você os move - eles são realmente
3:36
incorporado no design. Quando falamos sobre adicionar imagens, vamos falar também sobre o tamanho
3:42
da imagem. Diferentes modelos de tela de toque têm diferentes dimensões de pixels, algumas das quais
3:47
você pode ver aqui. Nunca haveria um motivo para adicionar uma imagem maior que o tamanho do
3:53
pixel da tela em que você está exibindo.
3:55
Na verdade, se você adicionar realmente grandes gráficos para o seu UCI você pode até ver uma
4:00
diminuição no desempenho da tela, porque o sistema tem para refrescar a imagem muitas vezes por
4:05
segundo. Mesmo que o gráfico esteja em um formato comprimido, o Q-SYS Core precisa descompactar
4:12
esse arquivo para entregá-lo à tela touch screen, por isso não encha seu design com imagens super de
4:17
alta resolução, especialmente se você estiver usando muito deles.
4:20
Depois de começar a adicionar muitas coisas à sua UCI, como nós, podemos ver que precisaremos de
4:25
uma maneira de organizar tudo. Além de usar várias páginas, que vimos no vídeo anterior, há muitas
4:32
outras ferramentas à sua disposição.
4:35
Você deve ter notado que não há nenhuma grade para encaixar objetos no lugar, mas você pode
4:39
adicionar suas próprias diretrizes personalizados clicando duas vezes na margem à esquerda ou
4:43
superior. Você pode, então, encaixar objetos nessas diretrizes para garantir que estejam alinhados. Para
4:49
remover uma guia, você pode arrastá-la para o canto superior esquerdo ou clicar com o botão direito e
4:54
selecionar Limpar guias.
4:56
Você também tem várias ferramentas organizacionais rápidas no menu do botão direito do mouse. Se
5:01
você selecionar alguns objetos e clicar com o botão direito do mouse, poderá rapidamente "Alinhá-los"
5:05
na mesma linha horizontal ou vertical, você poderá "Distribuí-los" para obter um espaçamento uniforme
5:12
ou "Empacotá-los" para empilhá-los na próxima uns aos outros.
5:16
Você também pode economizar espaço na tela usando os botões pop-up. Os botões pop-up podem ser
5:21
encontrados na ramificação Layout da Biblioteca esquemática. Quando você adiciona um ao seu UCI e
5:27
interage com ele, uma janela oculta é exibida. Você pode ajustar o tamanho desta janela… ou de que
5:36
lado o pop-up está acoplado a… assim como a cor da janela… Então você pode adicionar quantos
5:44
controles quiser na área pop-up, e quando tocar no botão novamente, eles serão ocultados automaticamente.
5:50
Isso permite que você conceda ao usuário acesso rápido a muitos controles que, de outra forma,
5:55
sobrecarregariam a página, sem forçá-los a navegar para uma página totalmente diferente.
6:00
Como você aprende mais ferramentas, você provavelmente vai ver o valor em combiná-los juntos. Por
6:05
exemplo, se usarmos um botão pop-up em conjunto com nossa imagem de plano de fundo
6:11
transparente, você poderá criar uma página interativa que dará ao usuário acesso a vários controles
6:16
para várias áreas, como controle de ganho e status do amplificador, tudo em uma tela.
6:22
Em seguida, vamos falar sobre Layers. Se você expandir sua ramificação de página aqui no editor da UCI,
6:27
verá que estamos trabalhando na camada 1. Você pode adicionar novas camadas à sua página
6:32
pressionando o ícone Mais e selecionando "Adicionar camada". Cada camada é ordenada como um
6:39
painel de vidro - você pode empilhar todas essas camadas umas sobre as outras e ver através delas as
6:44
camadas abaixo, todas na mesma página.
6:47
Você também pode expandir o ramo Layer e ver uma lista de todos os objetos nessa camada. Aqui
6:53
podemos ver as imagens, botões e elementos gráficos que adicionei. Selecionarei minha nova camada e
7:01
adicionarei algum conteúdo do esquemático para a camada 2. Agora mesmo pode parecer o mesmo que
7:07
se eu os adicionasse à mesma camada, mas vamos aprofundar um pouco mais para ver o que as
7:12
camadas podem fazer por nós .
7:13
Para cada camada e objeto, poderíamos travá-lo usando esta caixa para que não possa ser movido, ou
7:20
alternar o botão Show / Hide para torná-lo temporariamente invisível.
7:24
Você pode achar que é útil para agrupar controles semelhantes juntas em uma única camada, em
7:29
seguida, ocultar essa camada para que você possa se concentrar em outras áreas. Ou, você pode querer
7:34
adicionar uma camada inferior que tenha apenas sua imagem de plano de fundo e, em seguida,
7:38
bloqueá-la para que você não a selecione acidentalmente ao mover outros objetos.
7:43
Você também pode ajustar a ordem desses objetos com mais finesse por qualquer empurrando-os para
7:48
cima e para baixo no z-espaço com estes botões, ou arrastando-os para uma nova posição no Editor UCI.
7:54
Esteja ciente de que todos os objetos de uma camada superior aparecerão acima de todos os objetos
8:00
em uma camada inferior.
8:01
Quando você usa os comandos “Enviar para trás” ou “Trazer para frente”, isso só move esse objeto para
8:08
a frente ou para trás da camada em que está. Isso permite que você seja realmente específico com a
8:13
aparência visual do seu design, sem enviar objetos acidentalmente por trás da imagem de plano de fundo.
8:18
Uma das maiores vantagens de se utilizar Layers é o fato de que eles podem ser programados para a
8:23
transição dentro e fora da tela. Você precisará programar essas transições usando o controlador de
8:29
texto Lua ou o componente Controlador de bloco, que você aprenderá em nosso currículo de
8:34
aprendizado de controle mais profundo.
8:35
Depois que você aprender esses comandos, você poderia usar camadas como subpainéis que deslizam
8:39
na tela e fora da tela ... ou controles extras que podem ser revelados ... e depois escondido novamente
8:46
... ou qualquer número de outras implementações criativas.
8:50
Então, você viu muitas ferramentas à sua disposição para personalizar a aparência visual e a
8:55
funcionalidade de sua UCI. No próximo vídeo, veremos como você pode implantar sua UCI em uma tela
9:01
sensível ao toque. Nos vemos na próxima vez.
Descrição da Lição
Personalização da UCI
9m 7s
Importe gráficos e fundos personalizados. Implante seu UCI em um dispositivo externo.
Dicas e Definições
Personalização da UCI
9m 7s
Somente Controles de Componentes podem ser arrastados para UCIs. Você não pode arrastar todo o Componente para o UCI.
Para criar guias, clique no lado superior ou esquerdo da UCI e arraste para dentro.