User Interface

L’utilisation de l’éditeur d’interface utilisateur

Dans l’exercice précédent, nous avons utilisé l’application Modulo Wing.
Cette application est très pratique pour visualiser toutes les playlists ou pour avoir une interface de rappel de task. Cependant, l’agencement des playlists et tasks y est figé.
Nous allons apprendre à utiliser l’éditeur d’interface utilisateur pour créer une interface parfaitement adaptée à notre utilisation.

Nous allons dans l’onglet UI Designer. On clique sur le bouton + pour ajouter une interface utilisateur.

Nous allons tout d’abord ajouter une image en fond pour habiller le panel. On doit au préalable copier l’image xxxx dans le sous dossier UI dans l’onglet Transfer. On retourne ensuite dans l’onglet UI Designer, section “images” et on clique sur bouton Refresh. On voit alors apparaître l’image et on a drag & drop en fond.

On va maintenant dans la liste des composants. On choisit l’icône de Playlist et on la drag & drop dans l’interface utilisateur.
Dans l’éditeur, on va sélectionner la playlist 1.

Nous allons ensuite faire un drag & drop de l’icône des Tasks. On règle la taille des boutons.
Toutes les tasks apparaissent, mais nous souhaitons afficher uniquement les tasks de rappel de preset de Monitoring. Nous retournons dans l’onglet Task, et nous allons donc ajouter le Keyword MONITORING aux Tasks de rappel de rappel de preset de Monitoring.

Nous retournons ensuite sur l’interface utilisateur, on sélectionne la boite Task et on l’ajoute dans l’éditeur Keyword MONITORING.
Cette boite à Task affiche alors uniquement les tasks avec ce keyword.
On ajoute un texte au-dessus des boutons avec le texte “Monitoring preset”.

Nous allons maintenant ajouter une seconde page de contrôle des vidéo-projecteurs :

On ajoute une seconde page puis on la sélectionne.

On retourne dans l’onglet Device et on déclare 2 vidéo-projecteurs Barco UDX. Ce device nous permet de contrôler un projecteur de la marque Barco référence UDX. La liste de Device propose de prendre le contrôle de la plupart des marques de vidéo-projecteurs utilisés sur le marché Pro AV.

On retourne dans l’onglet UI Designer et on va dans la section Device. On drag & drop les 2 vidéo-projecteurs sur la page 2.

On ajoute ensuite un bouton sur cette page. On choisit en texte “PAGE 1”, on clique sur Action, section UI et on drag & drop l’action go to page. On indique 1 pour le numéro de la page dans l’éditeur. Ce bouton va permettre à l’utilisateur de retourner à la page 1.

On sélectionne la page 1 dans la Hierarchie et on crée de la même manière un bouton qui va lui pointer sur la page 2. On choisit en texte “PAGE 2”.