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 di seconda 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 in 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 la parte restante 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 offrono utili azioni rapide, 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 della vista Esplora risorse. Icona Vista Explorer - Quando si fa clic, la Vista Explorer si apre nella barra laterale.
  • Icona della vista Estensioni. Icona Visualizzazione Estensioni - Quando si fa clic, la Visualizzazione Estensioni si apre nella barra laterale.
  • Icona di VEX View. 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 di seconda 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

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

 

Nella parte superiore della schermata è visualizzata la vista VEX di VS Code, che mostra le opzioni per la creazione e l'importazione di progetti, mentre in basso si trova il menu Informazioni dispositivo VEX e in basso un menu per il feedback.

Sezione Azioni del progetto della vista Estensione VEX. Questa sezione contiene due pulsanti con le scritte "Nuovo progetto" e "Importa progetto".

  • FEEDBACK VEX
    Possiamo inviare feedback a VEX digitando il messaggio nella casella di testo sotto FEEDBACK VEX 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 diverse 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.

 

Visualizzazione Esplora risorse di VS Code che consente all'utente di navigare tra cartelle e file nel proprio progetto VEX. I file hanno icone e tipi di file corrispondenti, in questo esempio è selezionato un file Python e il titolo è VEXcode Project.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.

 

Editor VS Code 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 il robot è collegato 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 log di VS Code VEX si apre e mostra uno stato predefinito vuoto con un solo messaggio visualizzato: Log.

  • Terminale interattivo - Il terminale interattivo ha due funzioni: visualizzare i registri di stampa e inviare i tasti premuti in formato grezzo a un programma utente.

    Il terminale interattivo VEX di VS Code si apre e mostra messaggi che descrivono in dettaglio lo stato della connessione a VEX Brain.



    Nota: Per utilizzare il terminale interattivo, è necessario collegare un Brain o un Controller a un computer su cui è in esecuzione 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 di VS Code con icone di estensione VEX che possono essere utilizzate per interagire rapidamente con dispositivi e progetti VEX connessi. Le funzionalità di VEX includono il selettore del dispositivo, il selettore dello slot, l'icona di download della build & , l'icona di riproduzione, l'icona di arresto, il selettore del progetto e il selettore del 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 di selezione del dispositivo viene visualizzata sulla barra degli strumenti di VS Code. Selettore dispositivi - Il selettore dispositivi 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 con un Brain, non verrà visualizzato alcun nome Brain accanto all'icona Controller.
  • Icona del selettore slot. Icona Selettore Slot - L'icona Selettore ci consente di scegliere su quale Slot l'estensione VEX scaricherà o eseguirà un programma utente facendo clic su di essa e selezionando uno degli otto Slot disponibili su VEX Brain dall'elenco a discesa.
  • Icona di compilazione e download.  Build & Icona di download - Se è collegato un dispositivo VEX, l'icona di 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 si fa clic sull'icona di riproduzione viene eseguito il programma utente scaricato nello slot selezionato sul VEX Brain.
  • Icona di arresto. Icona di arresto - Quando si fa clic sull'icona di arresto , l'icona di arresto interrompe l'esecuzione del programma utente sul VEX Brain.
  • Il selettore di progetto viene visualizzato nella 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 di file Python è visualizzata sulla barra degli strumenti di VS Code. In questo esempio viene letto main.py.  Selettore file Python (solo Python) - Quando viene selezionato un progetto VEX Python, il Selettore file Python apparirà nella barra degli strumenti. 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:

  • Canale controller (solo controller V5) - Imposta il canale radio del controller V5 su Download o Pit. Questa impostazione si applica solo al collegamento radio VEXnet.
  • 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.
  • Sistema DFU Auto Recover - Imposta se il cervello deve effettuare il ripristino automatico quando viene rilevato un IQ2 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: