Instalación Visual Studio con Arduino

Instalación Visual Studio con Arduino

El siguiente tutorial se pretende mostrar la instalación Visual Studio con Arduino y explicación de su interfaz con un pequeño código de muestra para mostrar la funcionalidad de algunas herramientas de esta misma plataforma anexando la comunicación con Arduino.

Visual Studio es un software que ayuda a realizar programas mediante la combinación de comandos y de herramientas como botones, caja de texto, etiquetas y muchas más las cuales al final pueden otorgan una aplicación. Entre los lenguajes con los que se puede trabajar aquí son los siguientes: Visual C#, Visual Basic, Visual C++ y Visual F#. Siendo una gran ayuda para las personas que gustan aprender a programar en distintos lenguajes y realizar distintas prácticas y darles distintos usos.

Te la oportunidad de poder realizar comunicaciones con distintos dispositivos como lo es Arduino crear proyectos utilizando esta plataforma será más fácil para la interacción con el usuario, en nuestra pagina encontraras mas tutoriales donde se explicara la función entre este software y Arduino.

Comenzamos proporcionando los enlaces para realizar las descargas:

En este enlace podrán descargar las distintas versiones de la plataforma (link de versiones) o pueden optar por realizar la descarga directa en este enlace que es la que utilizamos en este tutorial (descarga directa).

01_pagina

Descarga Visual Studio




El material que necesitamos es el siguiente:

Descarga e instalación

Una vez realizada la descarga, desde su ubicación procedemos con la descarga dando clic derecho sobre la aplicación y damos en “ejecutar como administrador” e instalar y se mostrará lo siguiente:

03_instalar

Instalación

04_inicio

Primer ventana Visual Studio

La siguiente imagen a mostrar nos preguntará donde queremos instalarlo y que tipo de instalación deseamos, recomendamos la instalación “Default” ya que nos instala lo que necesitamos:




05_instalacion

Seleccionando instalación

Una vez que demos instalar en la ventana anterior comenzará a con proceso, tardara en realizar esta tarea, mostramos imágenes del proceso al inicio y final, una vez finalizada la instalación nos mostrará una última ventana donde nos dice que ya finalizó con la instalación.

06_inicioinstalacion1

Inicio de instalación

07_inicioinstalacion2

Proceso de instalación

08_instalarfinal

Instalación finalizada

Una vez dentro de la plataforma los primeros pasos que nos pedirá realizar son: acceder a una cuenta que tengamos o solo ingresar a la misma en este caso presionamos la opción marcada en la imagen, la siguiente ventana nos pedirá que seleccionar cómo queremos que nos muestra la interfaz y esto es elección propia, nos mostrará después una ventana con el mensaje de que ya está preparando la plataforma.

09_cuenta

Antes de ingresar

10_interfaz

Seleccionando interfaz grafica

Una vez que la plataforma esta lista nos mostrará su ventana de inicio de Visual Studio, si deseas comenzar un nuevo proyecto es necesario que selecciones “New Project”

12_primeravez

Ventana principal de Visual Studio

La nueva ventana nos mostrará las múltiples opciones para realizar proyectos, las opciones que utilizaremos estarán marcadas en las siguientes imágenes, el recuadro de la parte de abajo se refiere a que debemos asignar un nombre y una ruta para guardar nuestro proyecto.

13_proyecto nuevo

Creación de proyectos




Entorno de Visual Studio

Estando en la nueva ventana podemos ver la interfaz donde estan todas las herramientas que utilizaremos.

14_ventana proyecto

Area de trabajo

Formulario

En Visual Studio tenemos la ventaja de poder contar con dos ventanas, Una donde podemos colocar todo lo gráfico para mostrar al usuario y otra donde colocaremos cada línea de código que ejecuta junto con las herramientas. podemos cambiar entre ellas solo dando clic sobre la pestaña que deseamos trabajar para identificar cada una podemos notar que entre paréntesis dirá “(design)”.

15_codigo

Ventana de código

16_ventana proyecto

Form

Explorador de soluciones y Ventana de propiedades

En la parte de la derecha contamos con una ventana la cual nos muestra en forma de cascada lo que estamos trabajando es decir, nos dice sobre que archivo estamos actualmente y en qué sección del mismo estamos y esto nos ayuda a navegar de manera más fácil, en la parte de abajo podemos manipular las propiedades de las herramientas con las que estemos trabajando, las configuraciones disponibles varía según la herramienta que queremos configurar.

18_barra2

Explorador de soluciones y ventana de propiedades

Barra de menú

En ella podemos encontrar las herramientas básicas como la de archivo, editar, ver y entre otras que se utilizan especialmente para este tipo de tareas como lo son: depurar, datos, ventana, proyecto entre otras.

19_barra

Barra de menú

Cuadro de herramientas

En la parte izquierda podemos encontrar el cuadro de herramientas el cual nos muestra distintas herramientas y están separadas según su categoría, de igual manera se encuentra una pestaña donde se podemos acceder a todas, cada una de ellas tienen distintas funciones.

20_1

Cuadro de herramientas por categoria

20_

Cuadro de herramientas completo

Ejemplo practico de Visual Studio y Arduino

Visual Studio

Una vez que comprendemos este ambiente nuevo de trabajo podemos continuar con nuestro nuevo proyecto el cual tendrá como función mostrar el encendido/apagado de un LED con Arduino y  Visual Studio utilizando la herramienta “Serial”, de igual manera mostraremos algunas herramientas que utilizamos como ejemplo.

Utilizando Visual Studio colocaremos en Form las siguientes herramientas:

  • PictureBox
  • Label
  • Button
  • TextBox
  • SerialPort

Cada herramienta la encontrarán en la parte izquierda del programa solo damos clic y podemos arrastrar y acomodar a nuestro gusto, de la misma manera pueden cambiar el nombre de las mismas.

22_form

Poyecto con las herramientas utilizadas

A continuación les daremos una breve explicación de las herramientas que utilizamos.

PictureBox: Esta herramienta podemos utilizarla cuando necesitemos mostrar una imagen en un proyecto y cualquier parte del mismo, para cargar una imagen debemos seleccionarla desde sus propiedades.

Label: Es una simple etiqueta que solo nos muestra un texto o un valor, podemos manipular lo que mostrará según lo que agreguemos al código.

Button: Con esta herramienta podemos realizar distintas acciones dan un simple clic o dos seguidos para ejecutar algunas líneas de código.

TextBox: La caja de texto podemos manipularla al igual que Label para que muestre información o con función de ingresar datos para que los valide en una secuencia por ejemplo una contraseña.

SerialPort: Es la herramienta que nos ayudará a establecer la comunicación con Arduino, esta herramienta no es visible al final, es importante que en sus propiedades ingresemos el puerto y la velocidad que está utilizando Arduino

Una vez colocadas todas las herramientas en el área de trabajo explicaremos la función de cada herramienta, inicialmente lo único visible serán los botones, para hacer esto damos clic en el Form y colocaremos el siguiente código dejando establecido que no mostrara lo siguiente: label, textbox y picturebox.

Public Class Form1
    Private Sub Boton_2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Boton_2.Click
        'Abrir el puerto serial
        SPort.Open()
        ' Enviar el "0" por el puerto serial para apagar el led
        SPort.Write("0")
        ' Cerrar el puerto serial
        SPort.Close()
        ' Establecer estado actual para cada herramienta con este boton
        PictureBox1.Visible = False
        Label2.Visible = False
        TextBox1.BackColor = Color.Red
        TextBox1.Text = "Apagado"
    End Sub

 

23_ejecu

Forma inicial

Ahora colocaremos el código para el primer botón, éste realizará las siguientes acciones para cada herramienta: mostrará picturebox, label y textbox, realiza también la comunicación y enciende el LED. En el textbox mostrará el mensaje de encendido y cambiará su fondo a color verde.

 
    Private Sub Boton_1_Click(sender As Object, e As EventArgs) Handles Boton_1.Click
        ' Abrir el puerto serial
        SPort.Open()
        ' Enviar el "1" por el puerto serial para encender el led
        SPort.Write("1")
        ' Cerrar el puerto serial
        SPort.Close()
        ' Establecer estado actual para cada herramienta con este boton
        PictureBox1.Visible = True
        Label2.Visible = True
        TextBox1.Visible = True
        TextBox1.BackColor = Color.GreenYellow
        TextBox1.Text = "Encendido"
    End Sub
24_encen

Estado de herramientas al presionar mostrar/encender – Visual Studio con Arduino

20161018_124543

Visual Studio con Arduino – LED encendido

El botón de apagado cerrará la comunicación y apagará el LED, la otra función que tendrá será ocultar: label, picturebox y cambiará a rojo el fondo del textbox mostrando el mensaje de apagado.

 
    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        ' Establecer estado inicial para cada herramienta al iniciar el programa 
        PictureBox1.Visible = False
        Label2.Visible = False
        TextBox1.Visible = False
    End Sub
End Class
25_apagado

Estado de herramientas al presionar el boton de ocultar/apagar

Arduino

Una vez redactado el código en Visual Studio el siguiente paso es programar la parte del Arduino, el cual realizará la función de establecer la comunicación con Visual Studio y recibiendo indicaciones.

Definimos la velocidad de transferencia y pin que utilizaremos con el LED usaremos el pin 13 ya que cuenta con una resistencia interna que nos ayuda a iluminar de manera adecuada nuestro LED.

Dentro del void loop usamos un ciclo para que esté realizando la comunicación si es que está disponible el puerto, y dentro de este ciclo colocamos una secuencia donde se establece que si presionamos enciende y/o apagamos el LED.

void setup() {
 //Definimos la velocidad de transferencia a 9600 baudios
 //y el pin 13 como salida
 Serial.begin(9600);
 pinMode(13,OUTPUT);
}

void loop() {
 //Mientras el puerto serie este accesible
 while (Serial.available())
 {
 //Guardamos en dato el valor leido del puerto serie
 byte dato = Serial.read();
 switch (dato){
 //Si es '1' encendemos el led
 case '1':
 digitalWrite(13,HIGH);
  break;
 //Si es '0' apagamos el led
 case '0':
 digitalWrite(13,LOW);
 break;
 }
 }
}

A continuación les mostramos la conexión con Arduino y el LED.

28_simu

Conexión Arduino y LED

27_codigo_vs

Código Visual Studio

26_vs codigo

Código Arduino

Con esto concluimos este tutorial esperamos que sea de su agrado, cualquier comentario o duda es recibido. Les dejamos un enlace con los archivos que que contienen en el código que utilizamos Arduino y Visual Studio

4 Comments

  1. Fernando Antonio Valdez Zazueta abril 2, 2017
    • Hector Torres abril 18, 2017
    • Anonimo octubre 3, 2017
  2. DAVID SANTIAGO ALVAREZ AYALA enero 13, 2018

Escríbenos tus dudas o comentarios

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos Cookies en nuestro sitio WEB

Por favor confirma, si aceptas nuestras cookies de rastreo. También puedes negar el uso de cookies de rastreo y seguir navegando sin que ninguna información sea enviada a servicios de terceros.