Framework de Desarrollo IoT ESP (ESP-IDF) en Visual Studio Code

En publicaciones anteriores, hemos hablado sobre los dos frameworks de desarrollo más populares para las placas ESP32 y ESP8266 y sus similitudes y diferencias.

Si decidiste usar el Framework ESP-IDF debido a la extensión oficial de Visual Studio Code, lanzada por Espressif, el stack de desarrollo preferido y gratuito hoy en día es el ESP-IDF, junto con Visual Studio Code.

Si vienes del entorno de desarrollo de Arduino, puedes ver la comparación entre Visual Studio Code y el IDE de Arduino primero, pero en resumen, preferimos Visual Studio Code por su interfaz, gran compatibilidad y mucho más.

Preparando el stack de desarrollo #

Para empezar, necesitaremos instalar Visual Studio Code, algunos prerequisitos para el ESP-IDF y la extensión de ESP-IDF para Visual Studio Code. Con algo de configuración, estaremos listos para desarrollar con ESP-IDF en VSCode en poco tiempo. Así que vamos al grano.

1. Descargar e instalar Visual Studio Code

Ve a el sitio oficial de Visual Studio y descarga Visual Studio Code para tu sistema operativo. VSCode funciona en macOS, Linux y Windows. Para instalar Visual Studio Code, puedes encontrar las instrucciones específicas para cada plataforma aquí.

2. Instalar los prerequisitos para ESP-IDF

A continuación, necesitarás instalar los prerequisitos para ESP-IDF, que son principalmente CMake y Ninja build.

Puedes encontrar instrucciones detalladas específicas para cada sistema operativo aquí.

3. Abrir Visual Studio Code e instalar la extensión Espressif IDF

Para empezar a trabajar con el ESP-IDF usando Visual Studio Code, necesitarás instalar la extensión oficial de vscode de Espressif.

Simplemente abre Visual Studio Code y selecciona el ícono de "Extensiones" en el menú de la izquierda (si estás en Mac, puedes usar el atajo shift+cmd+x) y busca "Espressif IDF".

Encuentra la extensión como se muestra en la captura de pantalla y haz clic en "Instalar".

4. Configurar la extensión ESP-IDF

Después de instalar con éxito la extensión de Espressif IDF, necesitamos configurarla.

En Visual Studio Code, en la parte superior, haz clic en "Ver" -> "Paleta de Comandos" (o en Mac, puedes usar el atajo shift+cmd+p) y busca "ESP-IDF: Configurar la extensión ESP-IDF". Esto abrirá una ventana con configuraciones. Asegúrate de seleccionar la versión de ESP-IDF para descargar y selecciona Python3 como la versión de Python y haz clic en "Instalar".

Esto instalará el Framework ESP-IDF, la herramienta necesaria (ESP-IDF Tools) y configurará el entorno virtual de Python.

Si todo ha ido bien, verás un mensaje que dice: "Extensión ESP-IDF para Visual Studio Code. Todas las configuraciones han sido realizadas. Puedes cerrar esta ventana".

Puedes encontrar más información sobre cómo configurar la extensión ESP-IDF de Visual Studio Code en el repositorio oficial de la extensión ESP-IDF en GitHub.

Pasos adicionales recomendados #

Para tener una correcta resaltado de sintaxis C/C++, navegación de código y sugerencias de código, se recomienda encarecidamente instalar la "C/C++ Extension" para VSCode, de Microsoft.

Puedes hacerlo seleccionando el ícono de "Extensiones" en el menú de la izquierda en Visual Studio Code (Si estás en Mac, puedes usar el atajo shift+cmd+x) y buscar "C/C++". Después de instalar la extensión, se recomienda reiniciar Visual Studio Code.

La configuración predeterminada de la extensión C/C++ para ESP-IDF debería haber sido creada ya y se puede encontrar en {PROJECT_DIR}/.vscode/c_cpp_properties.json.

Construcción y carga del primer ejemplo #

1. Abrir el código de ejemplo "Blink"

Haz clic en "Ver" -> "Paleta de Comandos" y busca ESP-IDF: Show Examples Projects. Después de presionar Enter, se te pedirá que selecciones el framework a usar. Selecciona el "ESP-IDF" recién instalado.

Esto abrirá una ventana con ejemplos de código ESP-IDF, en la sección "get-started", deberías ver el ejemplo "blink". Después de seleccionarlo, verás detalles sobre el ejemplo, como los requisitos de hardware, la salida del ejemplo y más.

Haz clic en "Crear un proyecto usando el ejemplo blink" en la parte superior. Esto abrirá una ventana donde deberás proporcionar una ubicación en tu computadora para guardar el proyecto. Después de seleccionar la carpeta, la extensión creará un proyecto de ejemplo y lo abrirá en Visual Studio Code.

2. Seleccionar el microcontrolador ESP32

Antes de que podamos compilar y construir el proyecto, necesitamos establecer el objetivo de Espressif, para especificar qué microcontrolador estamos utilizando, como ESP32, ESP32S2, ESP32C3, etc. Si omites este paso, el objetivo predeterminado se configurará como esp32.

Para cambiar el objetivo predeterminado, haz clic en "Ver" -> "Paleta de Comandos" y busca ESP-IDF: Set Espressif device target. Al seleccionar esta opción, primero se te pedirá elegir el proyecto al que aplicar la configuración y luego seleccionar la versión de ESP32.

Después de seleccionar la versión de ESP32, aparecerá otro mensaje que pedirá seleccionar el modo de flash entre UART y JTAG. Si no estás utilizando JTAG, lo más probable es que la primera opción siempre funcione. En caso de problemas, prueba el USB Bridge.

En caso de que necesites cambiar estas configuraciones más adelante, siempre puedes reiniciar la herramienta de configuración del objetivo del dispositivo.

3. Construir el proyecto en tu computadora

Para construir el proyecto, haz clic en "Ver" -> "Paleta de Comandos" y busca ESP-IDF: Build your project. Al hacer clic en esto, se abrirá una terminal dentro de Visual Studio Code y comenzará a mostrar la salida de la compilación. Si la compilación es exitosa, deberías ver la salida sobre el tamaño del programa, como "Tamaño total de la imagen".

4. Preparar el entorno para el Flasheo

Antes de empezar a flashear el proyecto al ESP32, necesitamos seleccionar el Puerto USB. Haz clic en "Ver" -> "Paleta de Comandos" y busca ESP-IDF: Select port to use (COM, tty, usbserial). Esto te pedirá que selecciones el Puerto USB al que está conectado el ESP32. Si no estás seguro de qué puerto seleccionar, intenta desconectar el ESP32 de tu computadora, repite los pasos anteriores y observa qué puerto USB desaparece.

Finalmente, después de seleccionar el Puerto USB, selecciona el proyecto que vamos a flashear al ESP32.

5. Flashear el proyecto al microcontrolador ESP32

Finalmente, estamos listos para transferir nuestro programa a la placa ESP32. Haz clic en "Ver" -> "Paleta de Comandos" y busca ESP-IDF: Flash your project. Deberías ver en la terminal la salida que te indica sobre el progreso del flasheo. Si todo fue bien, deberías ver una salida similar a esta:

6. Monitorear el microcontrolador ESP32

Ahora tenemos el ejemplo de parpadeo (blink) en nuestro microcontrolador ESP32. Deberías ver el LED integrado parpadeando en la placa. Además, el programa debería imprimir algunas salidas en el Monitor Serial, cuando enciende o apaga el LED. Para ver la salida, haz clic en "Ver" -> "Paleta de Comandos" y busca ESP-IDF: Monitor your device.

Deberías ver la siguiente salida en tu terminal:

Nota: Después de haber preparado el entorno para la programación por primera vez, puedes ejecutar los pasos 3, 5 y 6 en un solo comando: ESP-IDF: Build, Flash and start monitor on your device

Si no ves el LED integrado parpadeando en tu placa ESP32, asegúrate de que el ejemplo "Blink" esté configurado correctamente. Haz clic en "Ver" -> "Paleta de comandos" y busca ESP-IDF: SDK Configuration editor (menuconfig). Esto abrirá una ventana con la configuración de ESP-IDF. Aquí puedes encontrar muchas configuraciones.

Pero en nuestro caso, busca "blink" en la barra de búsqueda en la parte superior (O puedes seleccionar la opción "Configuración del ejemplo" en el menú de la izquierda).

Asegúrate de que bajo "Tipo de LED de parpadeo", esté seleccionada la opción correcta: si tu placa tiene un LED integrado direccionable, selecciona "RMT - Addressable LED", de lo contrario, selecciona "GPIO". También asegúrate de que el número de "GPIO de parpadeo" esté configurado con el pin correcto del LED integrado.

En caso de que tu placa no tenga el LED integrado, puedes conectar tu propio LED a cualquiera de los pines GPIO y configurarlo de acuerdo a la configuración.

Puedes encontrar más información sobre cómo ejecutar el uso básico de la extensión ESP-IDF para Visual Studio Code en el repositorio oficial de la extensión ESP-IDF VSCode en GitHub.

Herramientas adicionales proporcionadas por ESP-IDF #

1. Herramienta de análisis de tamaño de ESP-IDF

Después de compilar tu proyecto, haz clic en "Ver" -> "Paleta de comandos" y busca ESP-IDF: Size analysis of the binaries. Esto abrirá la herramienta de análisis de tamaño de ESP-IDF, donde podrás ver la información sobre el tamaño de tu aplicación. Al programar para dispositivos embebidos, debes tener en cuenta que el hardware suele ser muy limitado. Esto te ayudará a entender si la aplicación cabe en el microcontrolador y cómo saber cuánto espacio libre te queda, etc.

2. ESP-IDF Explorer

Después de instalar la extensión ESP-IDF para Visual Studio Code, probablemente notaste el nuevo icono en la barra lateral izquierda. Este icono es el logo de Espressif Solutions, que abre el menú de ESP-IDF Explorer.

Esta herramienta proporciona información útil sobre la placa ESP32, como información sobre particiones del dispositivo, Rainmaker, etc. Cubriremos esta herramienta y sus opciones en futuras publicaciones.

La búsqueda de documentación de ESP-IDF es una excelente herramienta que te ayuda a encontrar documentación relacionada con el código. Para usarla, selecciona cualquier parte del código que desees y haz clic en "Ver" -> "Paleta de comandos" y busca ESP-IDF: Search in documentation.... Los resultados deberían aparecer en la sección "Resultado de búsqueda de la documentación de ESP-IDF" en el ESP-IDF Explorer.

Haciendo clic en cualquiera de los resultados, serás redirigido directamente a la parte relacionada de la documentación oficial de tu placa ESP32.

3. Plantillas de proyectos ESP-IDF

La aplicación ESP-IDF tiene su propia estructura de archivos única. Especialmente cuando se empieza, puede ser difícil entender cómo organizar los archivos en tu aplicación. Pero ESP-IDF viene a ayudar con otra herramienta, que genera una estructura de proyecto de ejemplo.

Para usarla, haz clic en "Ver" -> "Paleta de comandos" y busca ESP-IDF: Create project from extension template. Después de seleccionar la ubicación en tu computadora donde deseas guardar la plantilla del proyecto, se te pedirá que selecciones la plantilla.

Actualmente, solo hay unas pocas plantillas disponibles, pero son extremadamente útiles. Por ejemplo, el ejemplo "Arduino-as-component" te proporciona una plantilla donde puedes escribir directamente código de Arduino Core dentro de la aplicación ESP-IDF.

Hoja de trucos de ESP-IDF para Visual Studio Code #

Hemos cubierto varios comandos en esta publicación, y para ayudarte a recordarlos más fácilmente, hemos preparado una hoja de trucos.

Para ejecutar el comando, haz clic en "Ver" -> "Paleta de comandos" en el menú superior y busca el comando específico. También puedes abrir la búsqueda de comandos utilizando el atajo shift+cmd+p en MacOS. Puedes comprobar el atajo en tu sistema operativo cerca de la opción "Paleta de comandos" en el menú "Ver".

Además, la mayoría de los comandos más utilizados tienen su propio atajo de teclado. Al buscar el comando en la "Paleta de comandos", verifica el atajo cerca del nombre del comando.

• ESP-IDF: Build, Flash and start monitor on your device - Ejecuta los 3 pasos necesarios para compilar, flashear y monitorear tu aplicación.

En caso de que quieras ejecutar los pasos por separado, están los siguientes comandos para compilar, flashear y monitorear respectivamente:

• ESP-IDF: Build your project
• ESP-IDF: Flash your project
• ESP-IDF: Monitor your device.

Ejemplos:

• ESP-IDF: Show Examples Projects
• ESP-IDF: Create project from extension template

Configuración:

• ESP-IDF: Set Espressif device target
• ESP-IDF: Select port to use (COM, tty, usbserial)
• ESP-IDF: SDK Configuration editor (menuconfig)
• ESP-IDF: Configure ESP-IDF extension - solo necesario para la configuración inicial de la extensión ESP-IDF para Visual Studio Code.

Otros comandos útiles:

• ESP-IDF: Size analysis of the binaries
• ESP-IDF: Search in documentation...

Hay varios más comandos proporcionados por la extensión de ESP-IDF para VSCode, pero los mencionados arriba deberían cubrir el uso básico de la extensión para programar los microcontroladores ESP32.

Conclusión #

En esta publicación, hemos configurado nuestro entorno de desarrollo para usar Visual Studio Code como editor de código, junto con la extensión ESP-IDF, que nos ayuda a trabajar con los microcontroladores ESP32 y sus placas de desarrollo.

Para configurar la extensión ESP-IDF, primero tuvimos que instalar algunos requisitos previos, incluyendo CMake y Ninja build. Después de que los requisitos previos estuvieron listos, configuramos la extensión ESP-IDF, que a su vez descargó la cadena de herramientas necesaria para el desarrollo con ESP32 utilizando el marco ESP-IDF.

A continuación, ejecutamos, compilamos, flasheamos y probamos la aplicación de ejemplo, utilizando la pila ESP-IDF con Visual Studio Code.

Finalmente, hemos proporcionado la hoja de trucos con los comandos de la extensión ESP-IDF para Visual Studio Code.