Présentation de l'interface utilisateur de l'extension VEX VS Code

Cet article fournit un aperçu de l’interface utilisateur (interface utilisateur) de l’extension VEX Visual Studio Code. L'extension prend en charge le développement de projets C++ et Python pour les plates-formes VEX IQ 2nd Generation, EXP et V5.

Disposition de l'interface utilisateur de l'extension VEX VS Code

L'interface utilisateur de l'extension VEX Visual Studio Code est divisée en cinq zones principales : barre d'activité, barre latérale, éditeur, panneau de terminal et barre d'outils.

Capture d'écran montrant l'interface utilisateur complète de VEX dans VS Code. La barre d'activité et la barre latérale se trouvent sur le côté gauche de l'écran, la barre d'outils et le terminal se trouvent en bas de l'écran, et l'éditeur occupe le reste de l'écran.

Barre d'activité

La barre d'activité comporte une série d'icônes qui nous permettent de basculer entre les vues et nous fournissent des indicateurs contextuels supplémentaires pour le développement du projet VEX.

Barre d'activité VS Code avec l'extension VEX Robotics installée. La barre d'activité comporte des icônes permettant d'accéder rapidement à des actions utiles, comme la recherche, la gestion des extensions, le contrôle de version, et bien plus encore.

Les icônes courantes utilisées pour développer un projet VEX dans VS Code sont :

  • Icône Vue Explorateur. Icône de la vue Explorer - Lorsqu'elle est cliquée, la vue Explorer s'ouvre dans la barre latérale.
  • Icône Afficher les extensions. Icône d'affichage des extensions - Lorsqu'on clique dessus, l' d'affichage des extensions s'ouvre dans la barre latérale.
  • Icône VEX View. Icône de vue VEX - Lorsqu'on clique dessus, la vue VEX s'ouvre dans la barre latérale.

Barre latérale

La barre latérale contient différentes vues qui nous permettent d'utiliser les outils intégrés dans VS Code. Les vues de la barre latérale courantes utilisées pour effectuer des tâches de développement de projets VEX sont Vue d'extension, Vue VEXet Vue Explorateur.

Vue d'extension

La vue d'extension est utilisée pour installer et gérer les extensions dans VS Code. Pour développer des logiciels sur les plates-formes VEX IQ 2nd Generation, EXP et V5, nous devons installer l'extension VEX, l'extension C/C++ et l'extension Python.

Pourdes instructions étape par étape sur la façon d'installer l'extension VEX, l'extension C/C++et l'extension Python dans VS Code, veuillez consulter cet article .

Vue des extensions VS Code affichant la liste des extensions installées. Chaque extension possède un menu de paramètres qui peut être ouvert ici, et une barre de recherche permet de trouver et de télécharger de nouvelles extensions.


Vue VEX

La vue VEX View nous permet de développer des projets pour VEX IQ 2nd Generation, EXP et V5 dans VS Code. Il existe trois catégories incluses dans la vue VEX : ACTIONS DU PROJET, INFOS SUR LE PÉRIPHÉRIQUE VEX, et COMMENTAIRES VEX.

Vue VEX de VS Code affichant en haut les options de création et d'importation de projets, en bas le menu Informations sur le périphérique VEX et en bas un menu de commentaires.

Section Actions du projet de la vue Extension VEX. Cette section comporte deux boutons intitulés « Nouveau projet » et « Importer un projet ».

  • VEX FEEDBACK
    Nous pouvons envoyer des commentaires à VEX en tapant le message dans la zone de texte sous VEX FEEDBACK et en cliquant sur le bouton ENVOYER
    Pour obtenir des informations utiles sur l'utilisation de VEX FEEDBACK dans VS Code, veuillez consulter cet article.

Section « Commentaires VEX » de la vue Extension VEX. Cette section contient un formulaire offrant différentes options pour soumettre des commentaires à VEX.

Vue de l'explorateur

La vue Explorer est utilisée pour parcourir, ouvrir et gérer les fichiers et dossiers du projet VEX dans VS Code.

Vue Explorateur de VS Code permettant à l'utilisateur de naviguer dans les dossiers et les fichiers de son projet VEX. Les fichiers sont accompagnés d'icônes et de types de fichiers correspondants ; dans cet exemple, un fichier Python est sélectionné et son titre est main.py.

Éditeur

L'éditeur est la zone principale pour éditer les fichiers dans VS Code. L'extension VEX VS Code active Intellisense/Linting pour C/C++ et Python dans la zone Éditeur pour nous aider lors du développement du programme.

Éditeur VS Code avec un fichier Python ouvert dans le cadre d'un projet VEX. Il est possible d'écrire et de modifier ici du code Python ou C/C++ pour créer des programmes de robotique VEX lorsqu'ils sont connectés à un VEX Brain.

Dans la zone Éditeur, nous pouvons accéder à des informations utiles sur une fonction spécifique en passant la souris sur le texte de la fonction ou en utilisant l'aide de la commande VEX pour accéder à la documentation de cette fonction incluse dans l'API C++ et Python (Application Programming Interface).

Pour des instructions détaillées sur l’utilisation de l’aide de la commande VEX dans VS Code, veuillez consulter cet article.

Panneau de terminaux

L'extension VEX VS Code fournit deux terminaux au démarrage, le terminal de journal et le terminal interactif. 

  • Terminal de journal - Le terminal de journal affiche la sortie de build, l'erreur de build et les résultats de téléchargement.

Le terminal de journalisation VEX de VS Code s'ouvre et affiche un état vide par défaut avec un seul message imprimé indiquant « Log ».

  • Terminal interactif - Le terminal interactif possède deux fonctions : l’affichage des journaux d’impression et l’envoi des frappes brutes à un programme utilisateur.

    VS Code VEX Interactive Terminal is opened and shows messages that detail the VEX Brain connection status.



    Remarque : Pour utiliser le terminal interactif, un Brain ou un contrôleur doit être connecté à un ordinateur exécutant l’extension VEX pour VS Code.
    Remarque : La sortie du terminal interactif est effacée par défaut après la compilation et le téléchargement d’un programme utilisateur.

Barre d'outils

La barre d'outils propose une gamme d'icônes qui nous offrent un moyen rapide d'interagir avec les projets d'extension VEX VS Code, VEX Brains et VEX Controllers.

Barre d'outils VS Code avec icônes d'extension VEX permettant d'interagir rapidement avec les périphériques et projets VEX connectés. Les fonctionnalités VEX incluent le sélecteur de périphérique, le sélecteur d'emplacement, l'icône de téléchargement de la version & , l'icône de lecture, l'icône d'arrêt, le sélecteur de projet et le sélecteur de fichiers Python.

Remarque : La barre d’outils n’est active que lorsqu’un projet VEX valide est ouvert dans VS Code. 

Remarque : Un projet VEX valide est un projet créé ou importé par l'extension. Les projets VEXcode ou VEXcode Pro ouverts dans l'éditeur ne seront pas considérés comme un projet VEX valide et devront être importés.

Les icônes présentées dans la barre d'outils incluent :

  • L'icône du sélecteur de périphérique est affichée dans la barre d'outils de VS Code. Sélecteur de périphérique - Le sélecteur de périphérique affiche l'icône du périphérique VEX connecté (une icône de cerveau Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Brain icon and it reads IQ Brain(IQ). ou une icône de contrôleur Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Controller icon and it reads IQ Controller.)
    Remarque : Si un contrôleur est connecté à l'ordinateur, mais n'a pas de liaison radio avec un cerveau, aucun nom de cerveau ne sera affiché à côté de l'icône de contrôleur.
  • Icône de sélecteur d'emplacement. Icône de sélection d'emplacement - L'icône de sélection d'emplacement nous permet de choisir l'emplacement sur lequel l'extension VEX téléchargera ou lira un programme utilisateur en cliquant dessus et en sélectionnant l'un des huit emplacements disponibles sur le VEX Brain dans la liste de sélection.
  • Icône de création et de téléchargement. Build & Télécharger l'icône - Si un périphérique VEX est connecté, l'icône Télécharger s'affichera dans la barre d'outils. Une fois cliqué, le projet sera construit et, en cas de succès, sera téléchargé sur l'appareil VEX connecté.
  • Icône de lecture. Icône de lecture - Lorsqu'elle est cliquée, l' de lecture exécute le programme utilisateur téléchargé dans l'emplacement sélectionné sur le VEX Brain.
  • Icône d'arrêt. Icône d'arrêt - Lorsqu'elle est cliquée, l'icône Arrêt arrête l'exécution du programme utilisateur sur le VEX Brain.
  • Le sélecteur de projet est affiché dans la barre d'outils de VS Code. Dans cet exemple, on peut lire IQ_Test. Sélecteur de projet - Le Sélecteur de projet affiche le nom du projet sélectionné. L'icône de sélection de projet nous permet de basculer entre les projets VEX lorsque plusieurs existent dans l'espace de travail en cliquant dessus et en sélectionnant un projet dans la liste de sélection.
  • L'icône du sélecteur de fichiers Python est affichée dans la barre d'outils de VS Code. Dans cet exemple, il lit main.py. Sélecteur de fichiers Python (Python uniquement) - Lorsqu'un projet VEX Python est sélectionné, le sélecteur de fichiers Python apparaît dans la barre d'outils. Le sélecteur de fichiers Python affiche le nom du fichier Python sélectionné. Python pour VEX ne prend actuellement en charge que les téléchargements de fichiers uniques.

Pour obtenir des informations utiles sur l’utilisation des fonctionnalités de la barre d’outils dans VS Code, veuillez cet article.

Paramètres utilisateur VEX

Les paramètres utilisateur VEX nous permettent de configurer l'extension VEX selon nos propres besoins. Les paramètres utilisateur sont des paramètres globaux appliqués à chaque projet d'extension VEX VS Code. Nous pouvons accéder aux paramètres utilisateur VEX en cliquant sur l'icône Paramètres dans VS Code et en sélectionnant les éléments correspondants dans les menus.

Les paramètres utilisateur de VS Code s'ouvrent sur la catégorie VEX où le comportement de l'extension VEX Robotics peut être personnalisé.

Les paramètres utilisateur VEX pour la configuration de l'extension VEX VS Code sont :

  • Canal du contrôleur (contrôleur V5 uniquement) - Définit le canal radio du contrôleur V5 sur Téléchargement ou Pit. Ce paramètre s'applique uniquement à la liaison radio VEXnet.
  • Cpp Toolchain Path - Définit le chemin de la chaîne d'outils CPP.
  • Activer le terminal utilisateur- Active ou désactive l'extension pour ouvrir et afficher les données du port utilisateur.
  • entrées de journal - Définit le nombre d'entrées de journal à télécharger à partir d'un VEX Brain.
  • Type de construction du projet - Définit la manière dont l'extension va construire un projet C++.
  • Project Home - Définit l'emplacement par défaut pour les nouveaux projets.
  • Exécuter après le téléchargement - Définit si le programme utilisateur doit s'exécuter après avoir été téléchargé sur un VEX Brain.
  • Système DFU Récupération automatique - Définit si le cerveau doit récupérer automatiquement lorsqu'un IQ2 ou EXP est détecté en mode DFU.
  • Websocket Server Enable - Active ou désactive l'extension pour démarrer le serveur Websocket.
  • Adresse de l'hôte du serveur Websocket - Définit l'adresse de l'hôte du serveur Websocket.
  • Port du serveur Websocket - Définit le numéro de port du serveur Websocket

Pour obtenir des informations utiles sur la manière d'accéder aux paramètres utilisateur VEX et de les définir, cet article.

For more information, help, and tips, check out the many resources at VEX Professional Development Plus

Last Updated: