Personnalisation de l’éditeur UCI
Transcription Vidéo
00:08
Maintenant que vous connaissez les étapes de base de
00:10
la création et de la gestion d’une UCI,
00:12
il est temps d'y ajouter du vrai contenu.
00:14
Vous avez vu que nous pouvons ajouter des contrôles du schéma dans l'UCI,
00:18
soit en faisant glisser ces éléments, soit en les copiant-collant.
00:22
Il est important de noter que vous ne pouvez pas faire glisser un composant lui-même dans l'UCI,
00:27
vous devez ajouter ses contrôles - et vous pouvez
00:30
en ajouter autant ou aussi peu que vous le souhaitez.
00:31
Tous les outils graphiques fonctionnent également dans l'UCI.
00:35
Ainsi, vous pouvez créer des zones de texte par exemple…
00:37
des en-têtes… des zones de groupe… et des polygones…
00:43
Si vous n'êtes pas familier avec ces outils,
00:45
consultez nos vidéos de présentation du logiciel.
00:49
L'éditeur UCI dispose d'une collection de polices propres et professionnelles,
00:53
chacune ayant une variété de styles parmi lesquels vous pouvez choisir.
00:56
Lors du choix des couleurs pour un objet,
00:58
notre sélecteur de couleurs vous permet de choisir une
01:01
teinte à l’aide d'une roue chromatique,
01:03
d'ajuster la luminosité et la saturation ici,
01:06
ou de saisir directement des valeurs RVB ou des codes de couleur hexadécimaux.
01:13
Les couleurs qui ont été utilisées récemment se
01:15
trouveront dans la zone "Design Colors" pour votre commodité.
01:18
En ce qui concerne la personnalisation des boutons eux-mêmes,
01:21
vous avez déjà vu la plupart des façons d'ajuster la taille,
01:24
la couleur, le label et l'icône d'un bouton.
01:27
Mais, je veux aussi vous montrer cette propriété : Button Style.
01:30
Par défaut, la plupart des boutons ont le style Brillant,
01:34
qui vous donne une légère surbrillance dans le tiers supérieur du bouton.
01:38
Vous pouvez choisir Flat pour obtenir une seule couleur unie,
01:42
ou… vous pouvez sélectionner « Image ».
01:46
Cela vous permet d'importer vos propres graphiques personnalisés
01:50
et de remplacer complètement le bouton par vos propres images à la place.
01:53
Un bouton a plusieurs états différents - un état activé et un état désactivé,
01:58
ainsi que le « pressed on » qui est visible lorsque
02:01
vous maintenez le bouton appuyé pour l'activer,
02:03
et le « pressed off » qui est visible lorsque vous relâchez le bouton pour l'éteindre.
02:09
Vous pouvez également ajouter des images externes dans votre UCI à des fins esthétiques.
02:13
Vous pouvez ajouter des fichiers PNG, JPEG, SVG, vous voyez le principe.
02:19
Ne vous embêtez pas à chercher un bouton "importer une image",
02:21
car c'est beaucoup plus simple que cela. Faites simplement glisser
02:24
un fichier image depuis un navigateur de fichiers vers l'éditeur UCI.
02:28
Les objets tels que les PNG qui ont des transparences conserveront ces sections
02:32
transparentesdans votre UCI.
02:34
Vous pouvez cliquer avec le bouton droit sur un objet et sélectionner
02:37
" Bring to Front " ou " Send to Back " pour
02:40
modifier l'emplacement de l'objet dans la profondeur.
02:42
En fait, si vous placez une image au-dessus d'un bouton,
02:45
le bouton conservera sa fonctionnalité, car l'image elle-même n'est pas interactive.
02:50
Cela vous permet de créer de très bons effets personnalisés en utilisant
02:54
des graphiques avec des transparences.
02:56
Par exemple, si vous avez accès au plan de masse ou à un modèle 3D de votre salle,
03:00
une simple manipulation de cette image avec un éditeur graphique
03:03
permet d’ajouter des sections transparentes.
03:05
Vous pouvez ensuite créer une carte interactive pour des éléments tels
03:10
que des contrôles rapides pour les zones géographiques du lieu…
03:14
la sélection de zone pour les annonces de sonorisation…
03:16
ou une interface personnalisée de Room Combiner…
03:20
Tout cela implique une seule image qui
03:22
est simplement placée au-dessus des boutons et polygones Q-SYS.
03:25
Au fait, lorsque vous ajoutez des images à la conception,
03:29
elles sont enregistrées dans votre fichier Q-SYS,
03:31
donc ne vous inquiétez pas de perdre ces liens lorsque vous
03:34
les déplacez - ils sont en fait intégrés dans la conception.
03:37
Comme nous parlons d'ajouter des images,
03:39
parlons également de la taille de l'image.
03:42
Différents modèles d'écran tactile ont des résolutions différentes,
03:45
dont certaines que vous pouvez voir ici.
03:48
Il n'y a pas vraiment de raison d'ajouter une image supérieure à la taille
03:51
en pixels de l'écran sur lequel vous l'affichez.
03:54
En fait, si vous ajoutez des graphiques très volumineux à votre UCI,
03:58
vous pouvez même constater une diminution des performances de l'écran,
04:01
car le système doit rafraîchir cette image plusieurs fois par seconde.
04:05
Même si le graphique est dans un format compressé,
04:08
le Core Q-SYS doit décompresser ce fichier pour l'afficher,
04:12
alors ne surchargez pas votre conception avec des images super haute résolution,
04:16
surtout si vous en utilisez beaucoup.
04:20
Si vous ajoutez beaucoup de choses à votre UCI,
04:22
comme nous l'avons fait, vous pouvez voir que nous aurons besoin
04:25
d'un moyen de tout organiser.
04:26
Outre l'utilisation de plusieurs pages,
04:29
comme nous l'avons vu dans la vidéo précédente,
04:31
de nombreux autres outils sont à votre disposition.
04:33
Vous avez peut-être remarqué qu'il n'y a pas de grille pour aligner les objets,
04:37
mais vous pouvez ajouter des lignes de guide personnalisées en
04:41
double-cliquant dans la marge à gauche ou en haut.
04:44
Vous pouvez ensuite utiliser ces lignes directrices pour
04:47
vous assurer que les objets sont alignés.
04:49
Pour supprimer un guide,
04:50
vous pouvez le faire glisser dans le coin supérieur gauche ou cliquer
04:53
avec le bouton droit de la souris et sélectionner Clear Guides.
04:56
Vous disposez également d'un certain nombre d'outils d'organisation
04:59
rapides dans le menu contextuel.
05:01
Si vous sélectionnez quelques objets et faites un clic droit,
05:03
vous pouvez rapidement tous les aligner
05:05
sur la même ligne horizontale ou verticale avec
05:07
"Align" ou leur donner un espacement égal avec "Distribute"
05:11
ou enfin les empiler juste à côté l'un à l'autre avec "Pack".
05:15
Vous pouvez également économiser de l'espace à l'écran en utilisant les boutons Pop Up.
05:19
Les boutons Pop Up se trouvent dans la catégorie Layout de la bibliothèque de schémas.
05:23
Lorsque vous en ajoutez un à votre UCI et que vous interagissez avec lui,
05:28
une fenêtre masquée apparaît.
05:30
Vous pouvez ajuster la taille de cette fenêtre…
05:33
ou de quel côté la fenêtre contextuelle s'ancre…
05:39
ainsi que sa couleur… Ensuite,
05:42
vous pouvez ajouter autant de contrôles que vous le souhaitez à la zone contextuelle,
05:46
et lorsque vous appuyez dessus à nouveau, ils seront automatiquement masqués.
05:50
Cela vous permet de donner à l'utilisateur un accès rapide à de nombreux contrôles qui,
05:55
autrement, encombreraient la page, sans l'obliger à naviguer vers une page différente.
05:58
Au fur et à mesure que vous apprendrez plus d'outils,
06:02
vous verrez probablement l'intérêt de les combiner.
06:04
Par exemple, si nous utilisons un bouton Pop Up en conjonction
06:07
avec notre image de plan de masse transparente,
06:10
vous pouvez créer une page interactive qui donne à l'utilisateur
06:13
l'accès à un groupe de commandes pour plusieurs zones,
06:16
tels que le contrôle de gain et l'état de l'amplificateur, le tout sur un seul écran.
06:21
Parlons ensuite des Layers.
06:23
Si vous développez la branche de votre page ici dans l'éditeur UCI,
06:27
vous verrez que nous avons travaillé sur le Layer 1.
06:29
Vous pouvez ajouter de nouvelles couches à votre page en appuyant
06:33
sur l'icône Plus et en sélectionnant « Add Layer ».
06:37
Chaque calque est un peu comme une vitre - vous pouvez empiler
06:40
tous ces calques les uns sur les autres sur la même
06:42
page et voir au travers les calques en dessous.
06:45
Vous pouvez également développer la branche
06:47
Layer et afficher une liste de tous les objets de ce calque.
06:51
Ici, nous pouvons voir les images,
06:53
les boutons et les éléments graphiques que j'ai ajoutés.
06:56
Je vais sélectionner mon nouveau calque et ajouter du contenu depuis
07:00
le schéma au calque 2.
07:03
Pour le moment, cela peut faire la même impression
07:06
que si je les avais ajoutés au même calque,
07:08
mais creusons un peu plus pour voir ce que les calques peuvent faire.
07:11
Pour chaque calque et objet,
07:13
nous pourrions les verrouiller à l'aide de ce cadenas
07:15
afin qu'il ne puisse pas être déplacés, ou basculer le bouton Show / Hide
07:21
pour les rendre temporairement invisibles.
07:23
Vous trouverez peut-être utile de regrouper des contrôles similaires sur un seul calque,
07:27
puis de masquer ce calque afin de pouvoir vous concentrer sur d'autres zones.
07:31
Ou, vous pouvez ajouter un calque inférieur qui n'a que votre image d'arrière-plan,
07:37
puis le verrouiller afin de ne pas le sélectionner accidentellement lors
07:41
du déplacement d'autres objets.
07:42
Vous pouvez également ajuster l'ordre de ces objets avec plus
07:46
de finesse en les glissant de haut en bas dans la profondeur avec ces boutons,
07:50
ou en les faisant glisser vers une nouvelle position dans l'éditeur UCI.
07:54
Sachez que chaque objet d'un calque supérieur apparaîtra
07:57
au-dessus de chaque objet d'un calque inférieur.
08:01
Lorsque vous utilisez les commandes “Send to Back” ou “Bring to Front”,
08:04
cela ne fait que déplacer cet objet vers l'avant ou vers l'arrière
08:08
du calque sur lequel il se trouve. Cela vous permet
08:10
d'être vraiment précis avec l'apparence visuelle de votre conception,
08:13
sans envoyer accidentellement des objets derrière l'image d'arrière-plan.
08:17
L'un des plus grands avantages de l'utilisation des calques est le fait
08:21
qu'ils peuvent être programmés pour passer sur et hors de l'écran.
08:24
Vous devrez programmer ces transitions à l'aide des
08:27
composants Text Controller ou Block controller,
08:30
que vous découvrirez dans notre programme d'apprentissage plus approfondi du contrôle.
08:34
Une fois que vous avez appris ces commandes,
08:37
vous pouvez utiliser des calques comme sous-panneaux qui glissent
08:39
sur l'écran et hors de l'écran…
08:40
ou des contrôles supplémentaires qui peuvent être révélés…
08:44
puis masqués à nouveau… ou un certain nombre d'autres implémentations créatives.
08:49
Ainsi, vous avez vu les nombreux outils à votre disposition pour personnaliser
08:53
l'apparence visuelle et la fonctionnalité de votre UCI.
08:57
Dans la vidéo suivante, nous verrons comment vous pouvez déployer votre UCI sur un écran tactile.
09:01
Nous vous reverrons bientôt.