Panoramica dell'interfaccia utente dell'estensione VEX VS Code

Questo articolo fornisce una panoramica dell'interfaccia utente (UI) dell'estensione Visual Studio Code VEX. L'estensione supporta lo sviluppo di progetti C++ e Python per le piattaforme VEX IQ (2a generazione), EXP e V5.

Layout dell'interfaccia utente dell'estensione VEX VS Code

L'interfaccia utente dell'estensione VEX Visual Studio Code è suddivisa in cinque aree principali: barra delle attività, barra laterale, editor, pannello terminale e barra degli strumenti.

Screenshot che mostra il layout completo dell'interfaccia utente di VEX VS Code. La barra delle attività e la barra laterale si trovano sul lato sinistro dello schermo, la barra degli strumenti e il terminale si trovano sul lato inferiore dello schermo e l'editor occupa il resto dello schermo.

Barra delle attività

La barra delle attività presenta una serie di icone che ci consentono di passare da una visualizzazione all'altra e ci forniscono ulteriori indicatori specifici del contesto per lo sviluppo del progetto VEX.

Barra delle attività di VS Code con l'estensione VEX Robotics installata. La barra delle attività contiene icone che consentono di eseguire azioni rapide utili, come la ricerca, la gestione delle estensioni, il controllo delle versioni e altro ancora.

Le icone comuni utilizzate per sviluppare un progetto VEX in VS Code sono:

  • Icona Vista Explorer. Icona Vista Explorer - Quando si fa clic, la Vista Explorer si apre nella barra laterale.
  • Icona Visualizza estensioni. Icona Visualizzazione Estensioni - Quando si fa clic, la Visualizzazione Estensioni si apre nella barra laterale.
  • Icona di visualizzazione VEX. Icona di visualizzazione VEX - Quando si fa clic, la Vista VEX si apre nella barra laterale.

Barra laterale

La barra laterale contiene diverse visualizzazioni che ci consentono di utilizzare gli strumenti integrati in VS Code. Le viste della barra laterale più comuni utilizzate per eseguire attività per lo sviluppo di progetti VEX sono Vista estensione, Vista VEXe Vista Explorer.

Visualizzazione estensione

La vista estensione viene utilizzata per installare e gestire le estensioni in VS Code. Per sviluppare software sulle piattaforme VEX IQ (2a generazione), EXP e V5, dobbiamo installare l'estensione VEX, l'estensione C/C++ e l'estensione Python.

Per istruzioni dettagliate su come installare l'estensione VEX, l'estensione C/C++e l'estensione Python in VS Code, consultare questo articolo.

Visualizzazione delle estensioni di VS Code che mostra un elenco delle estensioni installate. Ogni estensione ha un menu delle impostazioni che può essere aperto qui ed è presente una barra di ricerca per trovare e scaricare nuove estensioni.


Vista VEX

La versione VEX View ci consente di sviluppare progetti per VEX IQ (2a generazione), EXP e V5 in VS Code. Nella vista VEX sono incluse tre categorie: AZIONI PROGETTO, INFORMAZIONI DISPOSITIVO VEX, e FEEDBACK VEX.

Vista VEX di VS Code che mostra le opzioni per la creazione e l'importazione di progetti in alto, il menu Informazioni dispositivo VEX in basso e un menu di feedback in basso.

Sezione Azioni progetto della vista estensione VEX. Questa sezione contiene due pulsanti: Nuovo progetto e Importa progetto.

  • INFORMAZIONI SUL DISPOSITIVO VEX
    La categoria INFORMAZIONI SUL DISPOSITIVO VEX ci fornisce una panoramica del dispositivo VEX connesso - un VEX Brain o un VEX Controller.

    VEX Device Info section of the VEX Extension View is shown, with a list of all connected devices and specific info about each one. In this example, an EXP Brain and its downloaded programs are shown.


    Questa categoria indica il tipo di dispositivo VEX connesso e visualizza le informazioni sul sistema Brain, sulla porta seriale, sul programma scaricato e sui dispositivi connessi alle porte intelligenti del VEX Brain. Ci consente di fare uno screenshot dello schermo del cervello VEX, visualizzare il registro degli eventi del cervello VEX, impostare il nome del cervello e il numero del team e cancellare il programma utente dal cervello VEX.

    Quando un VEX Brain è collegato al computer, la categoria VEX DEVICE INFO mostra se un VEX Controller è collegato al VEX Brain e ci consente di aggiornare il VEXos per il VEX Brain se la versione VEXos del VEX Brain non è aggiornata.

    Quando un VEX Controller è collegato al computer, la categoria VEX DEVICE INFO mostra se un VEX Brain è collegato al VEX Controller e ci consente di aggiornare il VEXos per il VEX Controller se la versione VEXos del VEX Controller non è aggiornata.

    Per una descrizione completa delle informazioni sul dispositivo e su come utilizzare le funzionalità in INFORMAZIONI SUL DISPOSITIVO VEX, consultare questo articolo.
  • VEX FEEDBACK
    Possiamo inviare feedback a VEX digitando il messaggio nella casella di testo sotto VEX FEEDBACK e cliccando sul pulsante INVIA
    Per informazioni utili sull'utilizzo di VEX FEEDBACK in VS Code, consultare questo articolo.

Sezione Feedback VEX della Vista estensione VEX. Questa sezione contiene un modulo con opzioni per inviare feedback a VEX.

Vista Explorer

La vista Explorer viene utilizzata per esplorare, aprire e gestire i file e le cartelle del progetto VEX in VS Code.

Vista VS Code Explorer che consente all'utente di navigare tra le cartelle e i file nel proprio progetto VEX. Ai file vengono mostrate le icone corrispondenti e i tipi di file; in questo esempio è selezionato un file Python e il titolo è main.py.

Redattore

L'editor è l'area principale per modificare i file in VS Code. L'estensione VEX VS Code abilita Intellisense/Linting sia per C/C++ che per Python nell'area Editor per assisterci durante lo sviluppo del programma.

VS Code Editor con un file Python aperto come parte di un progetto VEX. Qui è possibile scrivere e modificare codice Python o C/C++ per creare programmi di robotica VEX quando si è connessi a un VEX Brain.

Nell'area Editor, possiamo accedere a informazioni utili su una funzione specifica passando il mouse sul testo della funzione o utilizzando VEX Command Help per accedere alla documentazione per questa funzione inclusa nell'API (Application Programming Interface) di C++ e Python.

Per istruzioni dettagliate sull'utilizzo del comando VEX Help in VS Code, consultare questo articolo.

Pannello terminale

L'estensione VEX VS Code fornisce due terminali all'avvio: il terminale di registro e il terminale interattivo. 

  • Terminale di registro - Il terminale di registro visualizza l'output di compilazione, gli errori di compilazione e i risultati del download.

Il terminale di registro VEX di VS Code è aperto e mostra uno stato vuoto predefinito con un solo messaggio stampato che riporta Log.

  • Terminale interattivo - Il terminale interattivo ha due funzioni: visualizzare i registri di stampa e inviare sequenze di tasti non elaborate a un programma utente.

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



    : Per utilizzare il terminale interattivo, un cervello o un controller deve essere collegato a un computer che esegue l'estensione VEX VS Code.
    Nota: L'output del terminale interattivo viene cancellato per impostazione predefinita dopo la creazione e il download di un programma utente.

Barra degli strumenti

La barra degli strumenti presenta una serie di icone che ci forniscono un modo rapido per interagire con i progetti di estensione VEX VS Code, VEX Brains e VEX Controller.

Barra degli strumenti VS Code con icone di estensione VEX che possono essere utilizzate per interagire rapidamente con i dispositivi e i progetti VEX connessi. Le funzionalità di VEX includono il selettore di dispositivi, il selettore di slot, l'icona di download della build & , l'icona di riproduzione, l'icona di arresto, il selettore di progetti e il selettore di file Python.

Nota: La barra degli strumenti è attiva solo quando un progetto VEX valido è aperto in VS Code. 

Nota: Un progetto VEX valido è un progetto creato o importato dall'estensione. I progetti VEXcode o VEXcode Pro aperti nell'editor non saranno considerati progetti VEX validi e dovranno essere importati.

Le icone presenti sulla barra degli strumenti includono:

  • L'icona Selettore dispositivo viene visualizzata sulla barra degli strumenti di VS Code. Selettore dispositivo - Il Selettore dispositivo visualizza l'icona del dispositivo VEX connesso (un'icona Brain Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Brain icon. o un'icona Controller Device Picker icon is highlighted on the VS Code toolbar. In this example it shows a Controller icon.)
    Nota: se un controller è connesso al computer, ma non ha un collegamento radio a un brain, non verrà visualizzato alcun nome di brain accanto all'icona Controller.
  • Icona di selezione slot. Icona selettore slot - L'icona selettore slot ci consente di scegliere su quale slot l'estensione VEX scaricherà o su cui riprodurrà un programma utente cliccandoci sopra e selezionando uno degli otto slot disponibili sul VEX Brain dall'elenco di selezione.
  • Icona Compila e scarica. Build & Icona di download - Se è connesso un dispositivo VEX, l'icona Download verrà visualizzata sulla barra degli strumenti. Facendo clic, il progetto verrà compilato e, se completato correttamente, verrà scaricato sul dispositivo VEX connesso.
  • Icona di riproduzione. Icona di riproduzione - Quando cliccata, l'icona di riproduzione esegue il programma utente scaricato nello slot selezionato sul VEX Brain.
  • Icona di arresto. Icona di arresto - Quando si fa clic, l'icona di arresto interrompe l'esecuzione del programma utente sul VEX Brain.
  • Il selettore progetto viene visualizzato sulla barra degli strumenti di VS Code. In questo esempio si legge v5NewProject. Selettore progetto - Il Selettore progetto visualizza il nome del progetto selezionato. L'icona Project Selector ci consente di passare da un progetto VEX all'altro quando ne esistono più di uno all'interno dell'area di lavoro, cliccandoci sopra e selezionando un progetto dall'elenco di selezione.
  • L'icona del selettore file Python è visualizzata sulla barra degli strumenti di VS Code. In questo esempio si legge main.py. Selettore file Python (solo Python) - Quando viene selezionato un progetto Python VEX, nella barra degli strumenti apparirà Selettore file Python. Il selettore di file Python visualizza il nome del file Python selezionato. Al momento Python per VEX supporta solo il download di singoli file.

Per informazioni utili su come utilizzare le funzionalità della barra degli strumenti in VS Code, questo articolo.

Impostazioni utente VEX

Le impostazioni utente VEX ci consentono di configurare l'estensione VEX in base alle nostre esigenze. Le impostazioni utente sono impostazioni globali applicate a ogni progetto di estensione VEX VS Code. Possiamo accedere alle Impostazioni utente VEX cliccando sull'icona Impostazioni in VS Code e selezionando le voci corrispondenti nei menu.

Le Impostazioni utente di VS Code si aprono nella categoria VEX, dove è possibile personalizzare il comportamento dell'estensione VEX Robotics.

Le impostazioni utente VEX per configurare l'estensione VEX VS Code sono:

  • Percorso della toolchain CPP : imposta il percorso per la toolchain CPP.
  • Abilita terminale utente: abilita o disabilita l'estensione per aprire e visualizzare i dati dalla porta utente.
  • Voci di registro - Imposta il numero di voci di registro da caricare da un VEX Brain.
  • Tipo di build del progetto : imposta il modo in cui l'estensione compilerà un progetto C++.
  • Home progetto - Imposta la posizione predefinita per i nuovi progetti.
  • Esegui dopo il download - Imposta se il programma utente deve essere eseguito dopo essere stato scaricato su un VEX Brain.
  • Ripristino automatico DFU di sistema - Imposta se il cervello deve ripristinarsi automaticamente quando viene rilevato un cervello IQ (2a generazione) o EXP in modalità DFU.
  • Abilita server Websocket : abilita o disabilita l'estensione per avviare il server Websocket.
  • Indirizzo host del server Websocket : imposta l'indirizzo host del server Websocket.
  • Porta server Websocket - Imposta il numero di porta del server Websocket

Per informazioni utili su come accedere e impostare le Impostazioni utente VEX, consulta questo articolo.

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

Last Updated: