{"id":602,"date":"2025-02-17T17:53:00","date_gmt":"2025-02-17T23:53:00","guid":{"rendered":"https:\/\/proveedoracano.com\/blog\/?p=602"},"modified":"2025-02-20T10:07:21","modified_gmt":"2025-02-20T16:07:21","slug":"controlar-arduino-pc-html-javascript","status":"publish","type":"post","link":"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/","title":{"rendered":"\u00a1Controla Arduino desde tu PC con HTML y JavaScript! \ud83d\ude80"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Desde tu ordenador, controla motores con arduino<\/h1>\n\n\n\n<p>\u00bfQuieres aprender a controlar un Arduino desde tu computadora usando solo una p\u00e1gina web y JavaScript? En este art\u00edculo, te mostraremos c\u00f3mo hacerlo, activando un servomotor y un motor DC con tres botones para las acciones principales. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_75 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenido<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Alternar tabla de contenidos\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#%C2%BFQue_es_la_Web_Serial_API_%F0%9F%8C%90\" >\u00bfQu\u00e9 es la Web Serial API? \ud83c\udf10<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#%C2%BFComo_funciona_con_Arduino\" >\u00bfC\u00f3mo funciona con Arduino?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#%C2%BFPor_que_es_util\" >\u00bfPor qu\u00e9 es \u00fatil?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#%C2%BFQue_necesitas_para_este_proyecto\" >\u00bfQu\u00e9 necesitas para este proyecto?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Hardware\" >Hardware:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Software\" >Software:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Conexiones\" >Conexiones<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#1_Conexion_del_Servo\" >1. Conexi\u00f3n del Servo:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#2_Conexion_del_Motor_DC_con_L298N\" >2. Conexi\u00f3n del Motor DC con L298N:<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Conexiones_del_L298N\" >Conexiones del L298N:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#3_Conexion_del_LCD_16%C3%972_con_I2C\" >3. Conexi\u00f3n del LCD 16&#215;2 con I2C:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Resumen_de_Pines_de_Conexion\" >Resumen de Pines de Conexi\u00f3n:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#La_logica_del_proyecto\" >La l\u00f3gica del proyecto<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#%C2%BFComo_va_a_funcionar\" >\u00bfC\u00f3mo va a funcionar?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#El_codigo_JavaScript_para_la_pagina_web\" >El c\u00f3digo JavaScript para la p\u00e1gina web<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Explicacion_del_JavaScript\" >Explicaci\u00f3n del JavaScript:<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#1_Funcion_connect\" >1. Funci\u00f3n connect():<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#2_Funcion_sendCommandcommand\" >2. Funci\u00f3n sendCommand(command):<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#3_Flujo_de_la_aplicacion\" >3. Flujo de la aplicaci\u00f3n:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Resumen_del_Proceso\" >Resumen del Proceso:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#El_Sketch_para_Arduino\" >El Sketch para Arduino<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Explicacion_del_Codigo_Arduino_para_Recibir_Comandos\" >Explicaci\u00f3n del C\u00f3digo Arduino para Recibir Comandos<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#1_Inicializacion_del_Puerto_Serial\" >1. Inicializaci\u00f3n del Puerto Serial:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#2_Lectura_de_los_Comandos_desde_la_PC\" >2. Lectura de los Comandos desde la PC:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#3_Condicion_para_Ejecutar_Comandos\" >3. Condici\u00f3n para Ejecutar Comandos:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Resumen_del_Proceso-2\" >Resumen del Proceso:<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Observaciones\" >Observaciones<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#%C2%A1Y_eso_es_todo\" >\u00a1Y eso es todo!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/proveedoracano.com\/blog\/controlar-arduino-pc-html-javascript\/#Documentacion_y_ligas_externas\" >Documentaci\u00f3n y ligas externas<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_es_la_Web_Serial_API_%F0%9F%8C%90\"><\/span>\u00bfQu\u00e9 es la Web Serial API? \ud83c\udf10<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>La <strong>Web Serial API<\/strong> es una tecnolog\u00eda que permite a las aplicaciones web conectar dispositivos como Arduino directamente a trav\u00e9s del puerto USB. Esto significa que puedes controlar tu Arduino desde un navegador sin necesidad de instalar software adicional. Simplemente, el navegador se comunica con el Arduino mediante el puerto <strong>UART<\/strong> (Universal Asynchronous Receiver-Transmitter), que es el protocolo de comunicaci\u00f3n que Arduino utiliza para enviar y recibir datos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/portada002-1024x576.jpg\" alt=\"Qu\u00e9 es la Web Serial API\" class=\"wp-image-632\" srcset=\"https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/portada002-1024x576.jpg 1024w, https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/portada002-300x169.jpg 300w, https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/portada002-768x432.jpg 768w, https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/portada002.jpg 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFComo_funciona_con_Arduino\"><\/span>\u00bfC\u00f3mo funciona con Arduino?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Cuando conectas tu Arduino a la computadora, el puerto USB se convierte en un puerto serial mediante UART. La <strong>Web Serial API<\/strong> permite que el navegador se conecte a este puerto y env\u00ede comandos a Arduino, como mover un servomotor o activar un motor DC, todo en tiempo real.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFPor_que_es_util\"><\/span>\u00bfPor qu\u00e9 es \u00fatil?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>F\u00e1cil de usar<\/strong>: No requiere instalaci\u00f3n de controladores.<\/li>\n\n\n\n<li><strong>Compatibilidad<\/strong>: Funciona en navegadores modernos como Chrome y Edge.<\/li>\n\n\n\n<li><strong>Interacci\u00f3n directa<\/strong>: Controla tu Arduino desde cualquier p\u00e1gina web.<\/li>\n<\/ul>\n\n\n\n<p>La Web Serial API hace que controlar tu Arduino desde el navegador sea m\u00e1s f\u00e1cil y accesible que nunca. \u00a1Es la manera perfecta de combinar hardware y software!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFQue_necesitas_para_este_proyecto\"><\/span>\u00bfQu\u00e9 necesitas para este proyecto?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Antes de comenzar, aseg\u00farate de tener todo lo necesario:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Hardware\"><\/span>Hardware:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1 <a href=\"https:\/\/proveedoracano.com\/eshop\/UNO-CH340\" target=\"_blank\" rel=\"noreferrer noopener\">Arduino Uno<\/a> (o compatible).<\/li>\n\n\n\n<li>1 <a href=\"https:\/\/proveedoracano.com\/eshop\/sg90\" target=\"_blank\" rel=\"noreferrer noopener\">Servomotor SG90.<\/a><\/li>\n\n\n\n<li>1 <a href=\"https:\/\/proveedoracano.com\/eshop\/motorreductor-amarillo\" target=\"_blank\" rel=\"noreferrer noopener\">Motor DC<\/a>.<\/li>\n\n\n\n<li>1 <a href=\"https:\/\/proveedoracano.com\/eshop\/l298n-modulo\" target=\"_blank\" rel=\"noreferrer noopener\">Driver L298N<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/proveedoracano.com\/eshop\/index.php?category_id=0&amp;search=cable+dupont&amp;submit_search=&amp;route=product%2Fsearch\" target=\"_blank\" rel=\"noreferrer noopener\">Cables de conexi\u00f3n<\/a>.<\/li>\n\n\n\n<li>1 <a href=\"https:\/\/proveedoracano.com\/eshop\/protoboard830\" target=\"_blank\" rel=\"noreferrer noopener\">protoboard<\/a>.<\/li>\n\n\n\n<li>Tu computadora con navegador compatible con la Web Serial API (como <a href=\"https:\/\/www.google.com\/intl\/es_us\/chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome<\/a> o <a href=\"https:\/\/www.microsoft.com\/es-es\/edge\/download?form=MA13FJ\" target=\"_blank\" rel=\"noreferrer noopener\">Edge<\/a>).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Software\"><\/span>Software:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Arduino IDE.<\/li>\n\n\n\n<li>Un navegador web compatible.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conexiones\"><\/span>Conexiones<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/pinout_Web-Serial-API-arduino.jpg\" alt=\"Pinout Uart con Arduino Web Serial API\" class=\"wp-image-627\" srcset=\"https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/pinout_Web-Serial-API-arduino.jpg 500w, https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/pinout_Web-Serial-API-arduino-300x300.jpg 300w, https:\/\/proveedoracano.com\/blog\/wp-content\/uploads\/pinout_Web-Serial-API-arduino-150x150.jpg 150w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Conexion_del_Servo\"><\/span>1. <strong>Conexi\u00f3n del Servo:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>El servo tiene tres cables: <strong>VCC<\/strong>, <strong>GND<\/strong> y <strong>Signal<\/strong> (se\u00f1al).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>VCC<\/strong>: Con\u00e9ctalo a <strong>5V<\/strong> del Arduino.<\/li>\n\n\n\n<li><strong>GND<\/strong>: Con\u00e9ctalo a <strong>GND<\/strong> del Arduino.<\/li>\n\n\n\n<li><strong>Signal<\/strong>: Con\u00e9ctalo al <strong>pin 9<\/strong> del Arduino (esto lo configuramos en el c\u00f3digo de Arduino).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/proveedoracano.com\/eshop\/image\/catalog\/Productos\/MotoresyDrivers\/Servo\/PINOUT%20sg90.jpg\" alt=\"PINOUT sg90\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Conexion_del_Motor_DC_con_L298N\"><\/span>2. <strong>Conexi\u00f3n del Motor DC con L298N:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>El motor se conecta al controlador L298N, que a su vez se conecta al Arduino para controlar su direcci\u00f3n.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conexiones_del_L298N\"><\/span>Conexiones del <strong>L298N<\/strong>:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Motor DC:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Salida A (OUT1 y OUT2)<\/strong>: Con\u00e9ctalos a los terminales del motor (por ejemplo, OUT1 al terminal positivo y OUT2 al terminal negativo).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Pines de Control del L298N:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>IN1<\/strong>: Con\u00e9ctalo al <strong>pin 10<\/strong> del Arduino.<\/li>\n\n\n\n<li><strong>IN2<\/strong>: Con\u00e9ctalo al <strong>pin 11<\/strong> del Arduino.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Alimentaci\u00f3n:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>VCC del L298N<\/strong>: Con\u00e9ctalo a una fuente externa de <strong>5V<\/strong> o <strong>12V<\/strong>, dependiendo de la especificaci\u00f3n de tu motor.<\/li>\n\n\n\n<li><strong>GND del L298N<\/strong>: Con\u00e9ctalo a <strong>GND<\/strong> del Arduino y de la fuente de alimentaci\u00f3n.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Nota<\/strong>: Recuerda unir el GND del arduino con el GND de la fuente de alimentaci\u00f3n para el m\u00f3dulo L298N<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/proveedoracano.com\/eshop\/image\/catalog\/Productos\/ModulosySensores\/l298n\/PINOUT%20L298N.jpg\" alt=\"Pinout L298N\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Conexion_del_LCD_16%C3%972_con_I2C\"><\/span>3. <strong>Conexi\u00f3n del LCD 16&#215;2 con I2C:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>El LCD 16&#215;2 con m\u00f3dulo I2C tiene cuatro pines: <strong>VCC<\/strong>, <strong>GND<\/strong>, <strong>SDA<\/strong> (datos) y <strong>SCL<\/strong> (reloj).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>VCC<\/strong>: Con\u00e9ctalo a <strong>5V<\/strong> del Arduino.<\/li>\n\n\n\n<li><strong>GND<\/strong>: Con\u00e9ctalo a <strong>GND<\/strong> del Arduino.<\/li>\n\n\n\n<li><strong>SDA<\/strong>: Con\u00e9ctalo al <strong>pin A4<\/strong> del Arduino (en modelos como Arduino Uno).<\/li>\n\n\n\n<li><strong>SCL<\/strong>: Con\u00e9ctalo al <strong>pin A5<\/strong> del Arduino (en modelos como Arduino Uno).<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resumen_de_Pines_de_Conexion\"><\/span>Resumen de Pines de Conexi\u00f3n:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Componente<\/th><th>Conexi\u00f3n<\/th><th>Pin Arduino<\/th><\/tr><\/thead><tbody><tr><td><strong>Servo<\/strong><\/td><td>Signal<\/td><td>Pin 9<\/td><\/tr><tr><td><strong>L298N Motor<\/strong><\/td><td>IN1<\/td><td>Pin 10<\/td><\/tr><tr><td><\/td><td>IN2<\/td><td>Pin 11<\/td><\/tr><tr><td><strong>LCD I2C<\/strong><\/td><td>SDA<\/td><td>Pin A4<\/td><\/tr><tr><td><\/td><td>SCL<\/td><td>Pin A5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Aseg\u00farate de tener las conexiones bien realizadas y de que el motor tenga suficiente alimentaci\u00f3n seg\u00fan su especificaci\u00f3n, ya que el L298N necesita una fuente externa para manejar motores que requieren m\u00e1s corriente que el Arduino puede suministrar.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_logica_del_proyecto\"><\/span>La l\u00f3gica del proyecto<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%BFComo_va_a_funcionar\"><\/span><strong>\u00bfC\u00f3mo va a funcionar?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Bot\u00f3n 1<\/strong>: Mueve el servomotor a una posici\u00f3n espec\u00edfica y luego regresa a su punto inicial (0 grados). Esto sucede de forma r\u00e1pida para simular un \u00abmovimiento de prueba\u00bb del servo.<\/li>\n\n\n\n<li><strong>Bot\u00f3n 2<\/strong>: Gira el motor DC en un sentido durante un segundo y luego se detiene.<\/li>\n\n\n\n<li><strong>Bot\u00f3n 3<\/strong>: Gira el motor DC en el sentido contrario durante un segundo y luego se detiene.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"El_codigo_JavaScript_para_la_pagina_web\"><\/span>El c\u00f3digo JavaScript para la p\u00e1gina web<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>El siguiente c\u00f3digo HTML y JavaScript crea una interfaz web simple con tres botones. Cada bot\u00f3n env\u00eda un comando al Arduino a trav\u00e9s de la Web Serial API para controlar los motores.<\/p>\n\n\n\n<p>Abre el <strong>Bloc de notas<\/strong> en tu PC. Copia el c\u00f3digo HTML y JavaScript de abajo. Guarda el archivo con el nombre <code>motores.html<\/code> en una carpeta que puedas encontrar f\u00e1cilmente. Aseg\u00farate de seleccionar \u00abTodos los archivos\u00bb en el campo \u00abTipo\u00bb cuando guardes el archivo, para que se guarde con la extensi\u00f3n <code>.html<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>  &lt;title&gt;Control de Arduino&lt;\/title&gt;<br>&lt;\/head&gt;<br>&lt;body&gt;<br>  &lt;h1&gt;Control de Servo y Motor&lt;\/h1&gt;<br><br>  &lt;button onclick=\"sendCommand('S1')\"&gt;Accionar Servo&lt;\/button&gt;<br>  &lt;button onclick=\"sendCommand('M+1')\"&gt;Motor Adelante&lt;\/button&gt;<br>  &lt;button onclick=\"sendCommand('M-1')\"&gt;Motor Atras&lt;\/button&gt;<br><br>  &lt;script&gt;<br>    let port;<br>    let writer;<br><br>    \/\/ Conectar al puerto serial<br>    async function connect() {<br>      try {<br>        console.log(\"Solicitando acceso al puerto...\");<br>        port = await navigator.serial.requestPort();<br>        await port.open({ baudRate: 9600 });<br>        writer = port.writable.getWriter();<br>        console.log(\"Conexi\u00f3n establecida.\");<br>      } catch (error) {<br>        console.error(\"Error al conectar al puerto serial:\", error);<br>      }<br>    }<br><br>    \/\/ Enviar comando al Arduino<br>    async function sendCommand(command) {<br>      if (!port) {<br>        await connect(); \/\/ Si no hay conexi\u00f3n, intentamos conectarnos<br>      }<br><br>      if (port &amp;&amp; writer) {<br>        try {<br>          const encoder = new TextEncoder();<br>          await writer.write(encoder.encode(command + '\\n'));<br>          console.log(\"Comando enviado:\", command);<br>        } catch (writeError) {<br>          console.error(\"Error al enviar el comando:\", writeError);<br>        }<br>      } else {<br>        console.log(\"Fallo en la conexi\u00f3n al puerto serial.\");<br>      }<br>    }<br>  &lt;\/script&gt;<br>&lt;\/body&gt;<br>&lt;\/html&gt;<br><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Explicacion_del_JavaScript\"><\/span><strong>Explicaci\u00f3n del JavaScript:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Funcion_connect\"><\/span>1. <strong>Funci\u00f3n <code>connect()<\/code><\/strong>:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>La funci\u00f3n <code>connect()<\/code> es responsable de solicitar acceso al puerto serial de tu computadora y establecer la conexi\u00f3n con el Arduino.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>async function connect() {<br>  try {<br>    console.log(\"Solicitando acceso al puerto...\");<br>    port = await navigator.serial.requestPort();  \/\/ Solicita al usuario seleccionar un puerto serial disponible<br>    await port.open({ baudRate: 9600 });  \/\/ Abre la conexi\u00f3n al puerto serial con una velocidad de 9600 baudios<br>    writer = port.writable.getWriter();  \/\/ Obtiene un escritor para enviar datos al Arduino<br>    console.log(\"Conexi\u00f3n establecida.\");<br>  } catch (error) {<br>    console.error(\"Error al conectar al puerto serial:\", error);  \/\/ Si hay alg\u00fan error, lo muestra en la consola<br>  }<br>}<br><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>navigator.serial.requestPort()<\/code><\/strong>: Esta l\u00ednea solicita al navegador que pida al usuario que seleccione un puerto serial disponible en su computadora (por ejemplo, el puerto al que est\u00e1 conectado el Arduino). Esta acci\u00f3n es parte de la Web Serial API.<\/li>\n\n\n\n<li><strong><code>await port.open({ baudRate: 9600 })<\/code><\/strong>: Despu\u00e9s de que el usuario seleccione el puerto, esta l\u00ednea abre la conexi\u00f3n serial a una velocidad de transmisi\u00f3n de 9600 baudios, que es la misma que se ha configurado en el c\u00f3digo de Arduino. Este paso es necesario para comenzar a enviar y recibir datos.<\/li>\n\n\n\n<li><strong><code>port.writable.getWriter()<\/code><\/strong>: Obtiene un objeto de tipo <code>writer<\/code>, que es un escritor utilizado para enviar datos a trav\u00e9s del puerto serial.<\/li>\n\n\n\n<li><strong><code>console.log(\"Conexi\u00f3n establecida.\")<\/code><\/strong>: Si todo sale bien, muestra un mensaje en la consola que indica que la conexi\u00f3n con el Arduino se ha establecido exitosamente.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Funcion_sendCommandcommand\"><\/span>2. <strong>Funci\u00f3n <code>sendCommand(command)<\/code><\/strong>:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>La funci\u00f3n <code>sendCommand()<\/code> env\u00eda un comando al Arduino a trav\u00e9s del puerto serial.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>async function sendCommand(command) {<br>  if (!port) {<br>    await connect();  \/\/ Si no hay conexi\u00f3n, intenta conectarse<br>  }<br><br>  if (port &amp;&amp; writer) {<br>    try {<br>      const encoder = new TextEncoder();  \/\/ Crea un codificador de texto para convertir el comando en formato binario<br>      await writer.write(encoder.encode(command + '\\n'));  \/\/ Escribe el comando codificado y lo env\u00eda al Arduino<br>      console.log(\"Comando enviado:\", command);  \/\/ Muestra en la consola el comando enviado<br>    } catch (writeError) {<br>      console.error(\"Error al enviar el comando:\", writeError);  \/\/ Si hay un error al enviar el comando, lo muestra<br>    }<br>  } else {<br>    console.log(\"Fallo en la conexi\u00f3n al puerto serial.\");<br>  }<br>}<br><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>TextEncoder()<\/code><\/strong>: Este objeto convierte el texto (el comando que se env\u00eda) en una secuencia de bytes que puede ser entendida por el puerto serial. El comando debe estar en formato binario para ser enviado correctamente.<\/li>\n\n\n\n<li><strong><code>await writer.write(encoder.encode(command + '\\n'))<\/code><\/strong>: Aqu\u00ed se env\u00eda el comando codificado al Arduino. La <code>'\\n'<\/code> al final es un salto de l\u00ednea, que ayuda al Arduino a detectar el final del comando y procesarlo correctamente.<\/li>\n\n\n\n<li><strong><code>console.log(\"Comando enviado:\", command)<\/code><\/strong>: Despu\u00e9s de enviar el comando, se muestra en la consola del navegador para depurar y confirmar que el comando fue enviado correctamente.<\/li>\n\n\n\n<li><strong>Manejo de errores<\/strong>: Si ocurre alg\u00fan error en el proceso de env\u00edo (por ejemplo, si no se puede escribir al puerto), el bloque <code>catch<\/code> captura el error y muestra un mensaje en la consola con los detalles.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Flujo_de_la_aplicacion\"><\/span>3. <strong>Flujo de la aplicaci\u00f3n<\/strong>:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cuando un usuario presiona uno de los botones en la p\u00e1gina, se ejecuta la funci\u00f3n <code>sendCommand()<\/code> con el comando espec\u00edfico (como <code>'S1'<\/code>, <code>'M+1'<\/code> o <code>'M-1'<\/code>).<\/li>\n\n\n\n<li>Si la conexi\u00f3n no est\u00e1 establecida, <code>sendCommand()<\/code> llama a <code>connect()<\/code> para asegurarse de que se haya realizado la conexi\u00f3n serial antes de enviar el comando.<\/li>\n\n\n\n<li>Una vez que la conexi\u00f3n est\u00e1 activa, el comando se env\u00eda al Arduino a trav\u00e9s del puerto serial.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resumen_del_Proceso\"><\/span>Resumen del Proceso:<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><code>connect()<\/code><\/strong>: Solicita acceso al puerto serial, establece la conexi\u00f3n y obtiene un escritor para enviar datos.<\/li>\n\n\n\n<li><strong><code>sendCommand(command)<\/code><\/strong>: Envia un comando al Arduino a trav\u00e9s del puerto serial, asegur\u00e1ndose de que la conexi\u00f3n est\u00e9 activa.<\/li>\n<\/ol>\n\n\n\n<p>Este flujo permite controlar el Arduino desde la web utilizando la Web Serial API, enviando comandos espec\u00edficos que el Arduino interpreta y ejecuta (como mover el servo o accionar el motor).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"El_Sketch_para_Arduino\"><\/span>El Sketch para Arduino<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ahora vamos a configurar el Arduino con el c\u00f3digo que permitir\u00e1 recibir los comandos del navegador y controlar el servomotor y el motor DC.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Abre el <strong>Arduino IDE<\/strong> en tu computadora.<\/li>\n\n\n\n<li>Copia el c\u00f3digo para el Arduino de abajo.<\/li>\n\n\n\n<li>Conecta tu <strong>Arduino<\/strong> al PC mediante un cable USB.<\/li>\n\n\n\n<li>En el IDE de Arduino, selecciona tu placa y puerto en <strong>Herramientas &gt; Placa<\/strong> y <strong>Herramientas &gt; Puerto<\/strong>.<\/li>\n\n\n\n<li>Carga el c\u00f3digo al Arduino haciendo clic en el bot\u00f3n <strong>Subir<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Nota importante<\/strong>: Mientras trabajas con la Web Serial API en el navegador, aseg\u00farate de <strong>cerrar el IDE de Arduino<\/strong>. Si el IDE est\u00e1 abierto, puede interferir con la conexi\u00f3n serial y generar errores. Solo abre el IDE cuando necesites cargar el c\u00f3digo en el Arduino.<\/p>\n\n\n\n<p>Este c\u00f3digo para el Arduino interpreta los comandos recibidos desde el navegador y ejecuta las acciones correspondientes.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>#include &lt;Servo.h&gt;<br>#include &lt;LiquidCrystal_I2C.h&gt;  \/\/ Librer\u00eda para el control de la LCD con I2C<br><br>Servo servoMotor;<br>const int motorPin1 = 10;<br>const int motorPin2 = 11;<br><br>\/\/ Crear un objeto de la clase LiquidCrystal con la direcci\u00f3n del I2C y el tama\u00f1o de la pantalla (16x2)<br>LiquidCrystal_I2C lcd(0x27, 16, 2);  \/\/ Direcci\u00f3n 0x27 es com\u00fan para pantallas LCD I2C 16x2<br><br>void setup() {<br>  \/\/ Inicializaci\u00f3n del puerto serial para la comunicaci\u00f3n<br>  Serial.begin(9600);  \/\/ Inicia la comunicaci\u00f3n serial a 9600 baudios<br><br>  \/\/ Inicializaci\u00f3n de la pantalla LCD<br>  lcd.init();  \/\/ Inicializa la pantalla LCD<br>  lcd.backlight();  \/\/ Enciende la luz de fondo de la pantalla<br><br>  \/\/ Configura los pines del motor<br>  pinMode(motorPin1, OUTPUT);<br>  pinMode(motorPin2, OUTPUT);<br><br>  \/\/ Configura el servomotor<br>  servoMotor.attach(9);<br><br>  \/\/ Mensaje inicial en la pantalla LCD<br>  lcd.clear();  \/\/ Limpia la pantalla<br>  lcd.print(\"Esperando comando...\");<br>}<br><br>void loop() {<br>  if (Serial.available() &gt; 0) {<br>    String command = Serial.readStringUntil('\\n');  \/\/ Lee el comando desde el puerto serial<br>    command.trim();  \/\/ Elimina los espacios en blanco extra<br><br>    \/\/ Dependiendo del comando recibido, realiza la acci\u00f3n correspondiente<br>    if (command == \"S1\") {<br>      lcd.clear();<br>      lcd.print(\"Servo: Gira 180\u00b0\");<br>      servoMotor.write(180);  \/\/ Mueve el servo a 180 grados<br>      delay(1000);  \/\/ Espera 1 segundo<br>      servoMotor.write(0);  \/\/ Vuelve a la posici\u00f3n 0 grados<br>      delay(1000);  \/\/ Espera 1 segundo antes de aceptar otro comando<br>      lcd.clear();<br>      lcd.print(\"Esperando comando...\");<br>    } <br>    else if (command == \"M+1\") {<br>      lcd.clear();<br>      lcd.print(\"Motor: Adelante\");<br>      digitalWrite(motorPin1, HIGH);<br>      digitalWrite(motorPin2, LOW);  \/\/ Motor gira en una direcci\u00f3n<br>      delay(1000);  \/\/ Motor gira durante 1 segundo<br>      digitalWrite(motorPin1, LOW);<br>      digitalWrite(motorPin2, LOW);  \/\/ Detenemos el motor<br>      lcd.clear();<br>      lcd.print(\"Esperando comando...\");<br>    } <br>    else if (command == \"M-1\") {<br>      lcd.clear();<br>      lcd.print(\"Motor: Atras\");<br>      digitalWrite(motorPin1, LOW);<br>      digitalWrite(motorPin2, HIGH);  \/\/ Motor gira en direcci\u00f3n contraria<br>      delay(1000);  \/\/ Motor gira durante 1 segundo<br>      digitalWrite(motorPin1, LOW);<br>      digitalWrite(motorPin2, LOW);  \/\/ Detenemos el motor<br>      lcd.clear();<br>      lcd.print(\"Esperando comando...\");<br>    } <br>    else {<br>      lcd.clear();<br>      lcd.print(\"Comando no\");<br>      lcd.setCursor(0, 1);  \/\/ Mueve el cursor a la segunda l\u00ednea<br>      lcd.print(\"reconocido\");<br>      delay(2000);  \/\/ Muestra el mensaje por 2 segundos<br>      lcd.clear();<br>      lcd.print(\"Esperando comando...\");<br>    }<br>  }<br>}<br><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Explicacion_del_Codigo_Arduino_para_Recibir_Comandos\"><\/span>Explicaci\u00f3n del C\u00f3digo Arduino para Recibir Comandos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Inicializacion_del_Puerto_Serial\"><\/span>1. <strong>Inicializaci\u00f3n del Puerto Serial<\/strong>:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Al inicio del programa, se configura la comunicaci\u00f3n serial con la PC.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>void setup() {<br>  Serial.begin(9600);  \/\/ Inicia la comunicaci\u00f3n serial a 9600 baudios, la misma velocidad que se usa en el navegador<br>}<br><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>Serial.begin(9600)<\/code><\/strong>: Esta l\u00ednea establece la velocidad de comunicaci\u00f3n del puerto serial, en este caso, a 9600 baudios. Es importante que esta velocidad coincida con la que se configura en el navegador, como vimos en el c\u00f3digo JavaScript.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Lectura_de_los_Comandos_desde_la_PC\"><\/span>2. <strong>Lectura de los Comandos desde la PC<\/strong>:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>En el ciclo <code>loop()<\/code>, el Arduino constantemente revisa si hay datos disponibles en el puerto serial.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>void loop() {<br>  if (Serial.available() &gt; 0) {  \/\/ Verifica si hay datos disponibles para leer en el puerto serial<br>    String command = Serial.readStringUntil('\\n');  \/\/ Lee el comando enviado hasta encontrar un salto de l\u00ednea<br>    command.trim();  \/\/ Elimina espacios en blanco al inicio y al final del comando<br>    Serial.println(\"Comando recibido: \" + command);  \/\/ Muestra el comando recibido en el monitor serial (\u00fatil para depuraci\u00f3n)<br>  }<br>}<br><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>Serial.available()<\/code><\/strong>: Esta funci\u00f3n verifica si hay datos disponibles en el puerto serial que se puedan leer. Si no hay datos, el programa sigue ejecut\u00e1ndose sin hacer nada.<\/li>\n\n\n\n<li><strong><code>Serial.readStringUntil('\\n')<\/code><\/strong>: Cuando hay datos disponibles, esta funci\u00f3n lee los caracteres que llegan al Arduino hasta que encuentra un salto de l\u00ednea (<code>\\n<\/code>). Esto es \u00fatil para asegurarse de que el comando completo se haya recibido antes de procesarlo.<\/li>\n\n\n\n<li><strong><code>command.trim()<\/code><\/strong>: Elimina cualquier espacio adicional al principio o al final del comando para asegurar que el comando recibido sea limpio y correcto.<\/li>\n\n\n\n<li><strong><code>Serial.println()<\/code><\/strong>: Esta l\u00ednea env\u00eda el comando recibido al monitor serial para que podamos ver qu\u00e9 ha llegado desde la PC. Esto es \u00fatil para depuraci\u00f3n y para verificar que los comandos que estamos enviando desde la web son los correctos.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Condicion_para_Ejecutar_Comandos\"><\/span>3. <strong>Condici\u00f3n para Ejecutar Comandos<\/strong>:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Aunque no lo hemos especificado en esta parte, despu\u00e9s de recibir el comando, normalmente se procesar\u00eda para realizar alguna acci\u00f3n. Esto se har\u00eda mediante una estructura <code>if<\/code> o <code>switch<\/code>, dependiendo del comando recibido.<\/p>\n\n\n\n<p>Por ejemplo, si recibimos el comando <code>\"S1\"<\/code>, podr\u00edamos mover el servo a la posici\u00f3n 0, y si recibimos <code>\"M+1\"<\/code>, podr\u00edamos accionar el motor hacia adelante.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Resumen_del_Proceso-2\"><\/span>Resumen del Proceso:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><code>Serial.begin(9600)<\/code><\/strong>: Inicializa la comunicaci\u00f3n serial con la misma velocidad que se usa en el navegador.<\/li>\n\n\n\n<li><strong><code>Serial.available()<\/code><\/strong>: Comprueba si hay datos disponibles para leer desde el puerto serial.<\/li>\n\n\n\n<li><strong><code>Serial.readStringUntil('\\n')<\/code><\/strong>: Lee el comando enviado desde la web hasta encontrar un salto de l\u00ednea.<\/li>\n\n\n\n<li><strong><code>command.trim()<\/code><\/strong>: Elimina los espacios innecesarios para asegurar que el comando sea correcto.<\/li>\n\n\n\n<li><strong><code>Serial.println()<\/code><\/strong>: Muestra el comando recibido para depuraci\u00f3n en el monitor serial.<\/li>\n<\/ol>\n\n\n\n<p>Este c\u00f3digo permite que el Arduino reciba comandos desde el navegador a trav\u00e9s de la Web Serial API, y puede procesarlos para realizar acciones espec\u00edficas, como mover el servo o accionar el motor.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Observaciones\"><\/span>Observaciones<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ahora que ya tienes todo listo, es hora de conectar todo:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Conecta el Arduino<\/strong> a tu computadora mediante el cable USB.<\/li>\n\n\n\n<li>Abre el archivo <code>motores.html<\/code> en tu navegador. Si usas <strong>Chrome<\/strong> o <strong>Edge<\/strong>, deber\u00eda funcionar sin problemas, ya que ambos son compatibles con la Web Serial API.<\/li>\n\n\n\n<li>Cuando abras la p\u00e1gina, el navegador te pedir\u00e1 que selecciones el puerto serial al que est\u00e1 conectado el Arduino. Acepta la solicitud y selecciona el puerto correcto.<\/li>\n\n\n\n<li>\u00a1Y listo! Ahora puedes presionar los botones de la p\u00e1gina web y ver c\u00f3mo el servomotor y el motor DC responden a los comandos.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%C2%A1Y_eso_es_todo\"><\/span>\u00a1Y eso es todo!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Este proyecto combina programaci\u00f3n web y electr\u00f3nica b\u00e1sica para crear algo \u00fatil y entretenido. Con estos pasos, ahora puedes controlar un servomotor y un motor DC desde tu navegador usando Arduino y la Web Serial API. \u00a1Experimenta con diferentes configuraciones y comandos para personalizar tu proyecto!<\/p>\n\n\n\n<p>\u00bfListo para intentarlo? \ud83d\ude09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Documentacion_y_ligas_externas\"><\/span>Documentaci\u00f3n y ligas externas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Ficha t\u00e9cnica: <a href=\"https:\/\/www.alldatasheet.es\/view.jsp?Searchword=L298N\" target=\"_blank\" rel=\"noreferrer noopener\">L298N Datasheet<\/a><\/p>\n\n\n\n<p>Ficha t\u00e9cnica:&nbsp;<a href=\"https:\/\/www.alldatasheet.es\/datasheet-pdf\/pdf\/1572383\/ETC\/SG90.html\" target=\"_blank\" rel=\"noreferrer noopener\">SG90 Datasheet<\/a><\/p>\n\n\n\n<p>Repositorio Github: <a href=\"https:\/\/github.com\/ProveedoraCano\/uart-motor001\" target=\"_blank\" rel=\"noreferrer noopener\">Archivos de l proyecto<\/a>. Aqu\u00ed podr\u00e1s encontrar dos archivos HTML, uno sin formato y tro con formato. Sketch para arduino, compatible con ambos archivos HTML<\/p>\n\n\n\n<p>Blog de Chrome developers: <a href=\"https:\/\/developer.chrome.com\/docs\/capabilities\/serial?hl=es-419\" target=\"_blank\" rel=\"noreferrer noopener\">Leer y escribir en un puerto en serie.<\/a><\/p>\n\n\n\n<p>Video: \u00bfQu\u00e9 es Uart?<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\u2728 \u00bfSab\u00edas que tu Navegador Puede Controlar Motores? Descubre el Poder del UART Proveedora Cano\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/51YSAtGmeGI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Controla tu Arduino desde la web usando HTML y JavaScript. \u00a1Mueve servomotores y motores DC con comandos f\u00e1ciles! Aprende m\u00e1s aqu\u00ed.<\/p>\n","protected":false},"author":2,"featured_media":791,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[22,138,29,137,139,26,83,106,140,141,50,51,134,135,136],"class_list":["post-602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-arduino","tag-html","tag-i2c","tag-javascript","tag-l298n","tag-lcd","tag-modulos","tag-motor-dc","tag-puerto-serial","tag-serial-port","tag-servomotor","tag-sg90","tag-uart","tag-usb","tag-web-serial-api"],"_links":{"self":[{"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/posts\/602"}],"collection":[{"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":22,"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"predecessor-version":[{"id":793,"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/posts\/602\/revisions\/793"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/media\/791"}],"wp:attachment":[{"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proveedoracano.com\/blog\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}