Mostrando las entradas con la etiqueta Esp8266. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Esp8266. Mostrar todas las entradas

Resumen de Información Técnica del módulo Wi Fi ESP8266

Características Técnicas del módulo:

  • Voltaje de operación entre 3V y 3,6V (corriente continua).
  • Corriente de operación 80 mA (Con menos corriente tiene problemas para arrancar)
  • Corriente máxima de transmisión, picos de hasta 200mA. (por eso será importante la fuente con la cual se alimente el módulo)
  • Temperatura de operación -40ºC y 125ºC 
Fuente ideal para su alimentación:
Se puede regular con fuente para protoboard de 3,3 V ejemplo fuente marca YWRobot que proporciona voltajes de 3,3v y 5v. En este caso usaremos el de 3,3v.
Esta fuente Aporta 600mA.
Se alimenta con una fuente transformadora entre 6,5v y 9v.





Modos de operación del módulo:

* Access Point (AP): El módulo crea una red Wi Fi de área local (Wireless Local Area Network - WLAN), se lo configura con un nombre de usuario y una contraseña.
* Station (STA): se conectará a un access point.

* Access Point + Station (AP+STA): una combinación de las anteriores.

Con el IDE de Arduino, incluyendo la librería #include "ESP8266WiFi.h"


WiFi.mode(WIFI_AP);


WIFI_AP

WIFI_STA
WIFI_AP_STA
WIFI_OFF

Modo Cliente = Modo Estación



Gestión de energía del módulo:
* Modo activo (Active mode): a pleno rendimiento.
* Modo dormido (Sleep mode): reduce su consumo eléctrico, se queda en modo alerta porque hay eventos que lo despiertan. Consume entre 0,6 mA y 1 mA.
* Modo Sueño profundo (Deep Sleep): estado similar al apagado. Consume alrededor de 20 μA.

Kit fácil:
Si se quiere comprar un kit donde ya venga todo incorporado al módulo puede ser este:
NodeMCU modelo P2 (Amigable para la protoboard)
Se le conecta un cargador de celular y ya funciona, no se necesita fuente para protoboard, ni conversor USB a TTL.

Sobre sus Pines:
ADC es un pin analógico de entrada de 0 a 1V




Poner el módulo en modo AP:
_____________________________________________________________________

#include <ESP8266WiFi.h>

IPAddress local_IP(192,168,4,22);
IPAddress gateway(192,168,4,9);
IPAddress subnet(255,255,255,0);

void setup () {

WiFi.softAPConfig(local_IP, gateway, subnet); 
WiFi.softAP("NombreDeLaRed", "ContraseñaAquí") ? "Ready" : "Failed!";

}

void loop() {

}
_____________________________________________________________________


Poner en modo AP y configurar un servidor web, ejemplo:
_____________________________________________________________________

#include <ESP8266WiFi.h>                  //Incluye la librería ESP8266WiFi

const char ssid[] = "NOMBRE_DE_RED_AQUI";    //Definimos la SSDI de nuestro servidor WiFi -nombre de red- 
const char password[] = "PASSWORD_AQUI";       //Definimos la contraseña de nuestro servidor 
WiFiServer server(80);                    //Definimos el puerto de comunicaciones

int PinLED = 2;                           //Definimos el pin de salida - GPIO2 / D4
int estado = LOW;                         //Definimos la variable que va a recoger el estado del LED

void setup() {
  Serial.begin(115200);

  pinMode(PinLED, OUTPUT);                //Inicializamos el GPIO2 como salida
  digitalWrite(PinLED, LOW);              //Dejamos inicialmente el GPIO2 apagado

  server.begin();                         //inicializamos el servidor
  WiFi.mode(WIFI_AP);
  WiFi.softAP(ssid, password);            //Red con clave, en el canal 1 y visible
}

void loop() {
  // Comprueba si el cliente ha conectado
  WiFiClient client = server.available();  
  if (!client) {
    return;
  }

  // Espera hasta que el cliente envía alguna petición
  while(!client.available()){
    delay(1);
  }

  // Lee la petición
  String peticion = client.readStringUntil('r');
  client.flush();

  // Comprueba la petición
  if (peticion.indexOf('/LED=ON') != -1) {
    estado = HIGH;
  } 
  if (peticion.indexOf('/LED=OFF') != -1){
    estado = LOW;
  }

  //Enciende o apaga el LED en función de la petición
  digitalWrite(PinLED, estado);

  // Envía la página HTML de respuesta al cliente
  client.println("HTTP/1.1 200 OK");
  client.println("");                                     //No olvidar esta línea de separación
  client.println("<!DOCTYPE HTML>");
  client.println("<meta charset='UTF-8'>");
  client.println("<html>");

      //Imprime el estado del led
  client.print("<h1>El LED está ahora: ");                 
  if(estado == HIGH) {
    client.print("ENCENDIDO</h1>");  
  } else {
    client.print("APAGADO</h1>");
  }

      //Se crean enlaces para modificar el estado del LED      
  client.println("Presiona <a href='/LED=ON'>AQUÍ</a> para encender el LED<br>");
  client.println("Presiona <a href='/LED=OFF'>AQUÍ</a> para apagar el LED<br><br>");

      //Se crean cajas de comprobación (checkbox) para modificar el estado del LED
  client.println("<input type='checkbox' onClick=location.href='/LED=ON'> ENCENDER </input><br>");
  client.println("<input type='checkbox' onClick=location.href='/LED=OFF'> APAGAR </input><br><br>");

      //Se crean botones para modificar el estado del LED
  client.println("<button type='button' onClick=location.href='/LED=ON'> ENCENDER </button>");
  client.println("<button type='button' onClick=location.href='/LED=OFF'> APAGAR </button><br><br>");

      //Se crean botones con estilos para modificar el estado del LED
  client.println("<button type='button' onClick=location.href='/LED=ON' style='margin:auto; background-color:green; color:#A9F5A9; padding:5px; border:2px solid black; width:200;'><h2> ENCENDER</h2> </button>");
  client.println("<button type='button' onClick=location.href='/LED=OFF' style='margin:auto; background-color:red; color:#F6D8CE; padding:5px; border:2px solid black; width:200;'><h2> APAGAR</h2> </button><br><br>");

      //Se crea un único botón para modificar el estado del LED
  if(estado == HIGH) {
    client.print("<button type='button' onClick=location.href='/LED=OFF'> APAGAR </button><br><br>");  
  } else {
    client.print("<button type='button' onClick=location.href='/LED=ON'> ENCENDER </button><br><br>");
  }
  client.println("</html>"); 
  delay(1);
  Serial.println("Petición finalizada");          // Se finaliza la petición al cliente. Se inicaliza la espera de una nueva petición.

  //Desconexión de los clientes
  //WiFi.softAPdisconnect();

}
_____________________________________________________________________


Se puede conectar por el navegador mediante 192.168.4.1



Fuente:
https://programarfacil.com/podcast/esp8266-wifi-coste-arduino/
http://www.esploradores.com/access-point-servidor-web-nodemcu/

Cómo es el tema de los relés optoacoplados

El tema de los reles optoacoplados (optoaislados) bien explicado es así:
Si el jumper está puesto, el electroiman se alimenta directamente desde la placa arduino, y si sucediera una falla en el relé, se correría riesgo de dañar el microcontrolador; entonces como primer paso será retirar el jumper y buscar una fuente externa de 5v para alimentar JD-VCC (Ejemplo, fuente Yrobot para protoboard); y por otro lado alimentar VCC con los 5v de Arduino.
GND irá a GND de Arduino.


Muy importante saber esto:
Mientras no se alimenten las entradas IN, los relés permanecerán encendidos.


A la inversa de lo que normalmente se usaría, hay que mandar un HIGH para mantener apagado el relé, al dejar de alimentarlo, se encenderá.


* IN1,2,3,4 van a pines digitales de arduino. Pin en LOW para encender el relé, y pin en HIGH para apagarlo.

Por otro lado un detalle a tener en cuenta es que muchos reles tienen un N/A(normal abierto) y N/C(normal cerrado), eso significa que:
* N/C está dando paso de energía siempre que el relé esté apagado, y corta el paso de energía siempre que esté encendido.
* N/A, funciona de modo inverso que N/C, es el que usamos normalmente, al energizar el relé se habilita el paso de energía.
Entonces conectando diferente obtenemos un resultado inverso, pero el detalle a tener en cuenta es que habrá un período en el que los reles no estarán energizados, y esto daría paso a la energía.

Para invertir el tema del pin, se podría optar por una compuerta inversora (NOT) por ejemplo un 7404.

El circuito del relé optoacoplado es el siguiente:

Función Si en lenguaje C (Función if... else.. else if..)

// Si (comparación), ejecutar código
if (comparación)
  {
    Código;
  }

//-----------------------------

// Si (comparación), ejecutar código1, sino ejecutar código2.
if (comparación)
  {
    Código1;
  }
else
  {
    Código2;
  }

//-----------------------------

// Si (comparación1), ejecutar código1, sino si (comparación2) ejecutar código2, sino ejecutar código3.
if (comparación1)
  {
    código1;
  }
else if(comparación2)
  {
    código2;
  }
else
  {
    código3;
  }

Css para el Esp8266 ejemplos

Va en el head del html

<style type="text/css">
/* reglas css aquí */
</style>


ejemplo de regla
Quitar todos los márgenes de la página
* {
margin:0;
padding:0;
}



Estructura básica y etiquetas

Estructura básica:

<html>

<head></head>

<body>

</body>

</html>

donde <html> y </html> son el comienzo y final de la página web.
<head></head> es el encabezado, donde irá por ejemplo el título u otra cosa invisible al contenido de la página.
<body></body> es el cuerpo de la página, ahí va el código del contenido propiamente dicho.

dentro de esta etiqueta se pueden configurar varios parámetros:

Color de fondo
<body bgcolor=”#FF0000″></body>

Imagen de fondo:
<body background=”URL”> </body>

Color general del texto:
<body text= “#000000”></body>

Márgenes:
<body leftmargin=”10px” topmargin=”10px” rightmargin=”10px” bottommargin=”10px”></body>

Color del link:
<body link= “#FF0000” alink= “#FF0000” vlink= “# 0000FF”></body>

Siendo
* link como sale el enlace.
* alink cuando se la pasa el cursor por encima.
* vlink cuando ya se la ha echo clic anteriormente.


--------------------------------------------------------------------------
Por otro lado dentro de body se puede incluir alguna de las siguientes etiquetas:

<br> es un Salto de línea. (no hace falta cerrarla)
</br>es también un Salto de línea al igual que la anterior.

<p></p> es párrafo y el texto va en su interior. Ejemplo: <p>esto es un parrafo</p>
El texto queda separado con un espacio superior y uno inferior.

Se puede alinear el párrafo completo con las siguientes etiquetas:
<p align="center">Este texto se alineará al centro</p>
<p align="right">Este texto se alineará a la derecha</p>
<p align="left">Este texto se alineará a la izquierda</p>

<b></b> es negrita. Ejemplo: <b>Hola</b>
<strong></strong> también es negrita. Ejemplo: <strong>otro texto en negrita</strong>
<i></i> es cursiva. Ejemplo: <i>Hola</i>
<em></em> es también cursiva. Ejemplo: <em>Otras palabras en cursiva</em>

Se pueden sumar 2 etiquetas, ejemplo negrita y cursiva: <b><i>texto</i></b>

<u></u> es subrayado. Ejemplo: <u>Texto</u>

<strike><strike> es para texto tachado.
<s><s> es para texto tachado.
<del><del> es para texto tachado.

<tt></tt> es el espaciado simple entre las letras de un texto.

&iaacute; es í (i con tilde) ejemplo: t&iacute;tulo = título

otros caracteres:
&amp; &
&quot; “
&lt;        <
&gt;    >
&iquest;  ¿

<small></small> es para achicar un poco la letra. Ejemplo: <small>letra chica</small>
<big></big> es para agrandar y destacar la letra. Ejemplo:  <big>letra grande</big>
<sup></sup> es superindice
<sub></sub> es subindice

<pre></pre> es para que el navegador interprete el texto tal cual está escrito.



------------------------------------------------------

Comentarios:
<!--esto es un comentario-->

<hr /> es una línea de separación



<hr width="50%"> con ancho del 50%.


<hr width="550"> con ancho de 550 píxeles.


<hr size="10"> con grosor 10.



<hr align="left" width="70%"> con alineación izquierda al 70%


<hr align="center" width="70%"> con alineación centro al 70%


<hr align="right" width="70%"> con alineación derecha al 70%



<hr  width="70%" noshade> con ancho al 70% con noshade que es aspecto sin tridimensionalidad.


<hr  width="70%" size="5" noshade> con ancho  al 70% con noshade como el anterior y de tamaño 5.


En blogger no funciona el cierto parámetros, pero si en otras webs.


------------------------------------------------------------

Encabezados (títulos) dan distintos tamaños de texto.
<h1> hasta <h6>

Ejemplo:
<h1>Texto1</h1>

Texto1



<h3>Texto3</h3>

Texto3



<h6>Texto6</h6>
Texto6
genera automáticamente un salto de línea.
--------------------------------------

<ul> abre lista.
acá dento, cada item de la lista irá con <li>texto</li>

</ul> cierra lista.

Ejemplo:

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
Listas numeradas:

<ol>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ol>

  1. uno
  2. dos
  3. tres


<ol>
<li value="20">empieza en 20</li>
<li>sigue en 21</li>
<li>luego 22</li>
</ol>

  1. empieza en 20
  2. sigue en 21
  3. luego 22

----------------------------------------------------------------------------
Imagen:

<imag> no necesit cierre

atributos:
src indica donde se encuentra la imagen
<img src=”dirección”>

align
left = izquierda
right = derecha
top = arriba
bottom = abajo
middle = al centro


alt= “texto descriptivo al dejar el mouse encima”

height = altura
width = ancho

Border = borde

Ejemplo:

<img src="direccion/imagen.jpg" border="1" alt="Este es el ejemplo de un texto alternativo" width="400" height="300">

----------------------------------------------------------------------------------
Enlaces (links)
<a>texto enlazado</a>

href=“dir_del_enlace” indica la dirección del enlace

Ejmplo:
<a href=“https://www.google.com”>Ir a Google ahora</a>


Dirección absoluta
https://www.....


Dirección relativa
/imagen/index.html
la parte que falta, el navegador lo genera de la propia página en la que está el enlace

Forma en las que se accede a la url:
_self: está por defecto y se abrirá en el mismo marco en el que está alojado.
_blank: en una venta a parte.
_top: elimina los marcos y abre en la ventan original (sin marcos)
_parent: Muestra la nueva página en el <frameset> que contiene al marco donde se encuentra alojado el enlace.


<a href="https://www.google.com" target="_blank">clic para ir a google</a>


Anclas html:

En el lugar a donde quiero llegar se escribe el código:
<a name="ancla">

Crear el enlace que conduce así:
<a href= “#ancla”>Enlace para acceder al ancla</a>

-------------------------------------------

Formulario:
<form> todo aquí dentro es del formulario </form>


"action" indica el tipo de acción que va a realizar el formulario (enviar)
<form action=”dirección completa del archivo que recibe la información”> </form>
<form action=mailto:direcciondelcorreo@correo.com></form>

"method" indica de que modo será enviado.
"get" indica que los datos enviados serán adjuntados en la barra de dirección del cliente al final de la url, después de un signo de interrogación de cierre ?. Si se envía más de una dato, estos irán separados por &.
"post" indica que el envío forma parte del cuerpo de la petición.

"enctype" indica la forma en que viajará la información enviada.
el más común es modo texto: enctype=”text/plain”

Ejemplo:
<form action="mailto:direcciondelcorreo@correo.com" method="post" enctype="text/plain"> </form>

cada campo cuadro de texto, se define con <input>

<input type="text" name="nombredelacaja">

las características están en este post:
http://cursos15.blogspot.com.ar/2017/11/caja-de-texto-en-html.html

---------------------------------

Listas de selección:

<select name="nombredelista">
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>

ejemplo:


Para cambiar su aspecto se podrá poner un tamaño:

<select name="nombredelista" size="2">
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>



Se puedeindicar que esté disponible la selección de varios ítems mediante las teclas ctrl y shif, con el atributo multiple.

<select name="nombredelista" size="2" multiple>
<option>casa</option>
<option>Auto</option>
<option>Dinero</option>
</select>




Podemos hacer que se seleccione por defecto un ítem de la lista ejemplo dinero, con selected.

<select name="nombredelista">
<option>casa</option>
<option>Auto</option>
<option selected>Dinero</option>
</select>


Se le puede asignar un numero o una letra a cada item para gestionar sus datos.

<select name="nombredelista">
<option value="1">casa</option>
<option value="2">Auto</option>
<option selected value="3">Dinero</option>
</select>

El dato seleccionado será nombredelista=3 por ejemplo

--------------------------------
Lista de botones Radio Button  (solo permite elegir una sola opción siempre y cuando los nombres de cada opción sean los mismo)

<input type="radio" name="nombre" value="1">Uno
<br>
<input type="radio" name="nombre" value="2">Dos
<br>
<input type="radio" name="nombre" value="3">Tres

Uno
Dos
Tres

para dejar uno marcado por defecto agregar chequed
<input type="radio" name="nombre" value="2" checked>Dos

------------------------------
Listas de cajas: checkbox (permite elegir múltiples opciones)

<input type="checkbox" name="nombreu" value="1">UNO
<br>
<input type="checkbox" name="nombreu" value="2" checked>DOS
<br>
<input type="checkbox" name="nombreu" value="3">TRES

UNO
DOS
TRES

-------------------------------------------------
Botón para enviar en un formulario
<input type="submit" value="texto del boton">


Para resetear la información del formulario: (borrar la info)
<input type="reset" value="Restablecer">


----------------------------
Marquecina ejemplo:

<marquee bgcolor="#FFFFFF" direction="left" loop="infinite" scrollamount="5" scrolldelay="100" width="50%">Esto es un ejemplo</marquee>

Esto es un ejemplo

----------------------------------------------------
Fin del post!

Caja de texto en HTML

Crear una caja de texto para ingresar datos:



Ejemplos:

<input type="text" size="10" maxlength="3" value="123" name="ingtexto1">



<input type="text" size="3" maxlength="1" value="A" name="ingtexto2">



<input type="text" size="5" maxlength="5" value="ABCDE" name="ingtexto3">




----------------------------------------------------------------------------------------

Crear caja de texto multilínea:
(Textarea)


Ejemplos:

<textarea name="ingtexto4" rows="3" cols="10">Texto que aparece escrito</textarea>



<textarea name="ingtexto5" rows="10" cols="15">Texto que aparece escrito al ser cargado</textarea>



<textarea name="ingtexto6" rows="20" cols="5">Texto que se muestra</textarea>




----------------------------------------------------------------------------------------

Crear caja de password


Ejemplo






Encender el Led Onboard del Módulo Wi Fi Esp8266 V12 programar con Arduino IDE

El código es muy sencillo, es como el que trae arduino ide para arduino, pero el pin debe ser el Nº 2 del módulo Esp8266 V12


void setup() {
  pinMode(2, OUTPUT);
}

void loop() {
  digitalWrite(2, HIGH);
  delay(1000);     
  digitalWrite(2, LOW);
  delay(1000);       
}

Acá muestro el código y que ya lo he compilado al 100%, más abajo explico paso a paso.


Antes de compilar el programa para cargarlo se debe verificar esto:

* La placa debe ser la siguiente:
Menú Herramientas - Placa Generic Esp8266 Module - Generci Esp8266 Module


* El puerto se debe seleccionar aquí:
Herramientas - Puerto: _____ probar alguno de la lista o bien para estar más seguro, si se tiene windows 7 por ejemplo se puede buscar en administrador de dispositivos, lo detallo más abajo.

Saber con seguridad el puerto al cual está conectado:
Ejemplo para Windows 7
1) Clic derecho en Equipo, clic en propiedades.

2) Clic en Administrador de dispositivos, clic en Puertos (COM y LPT), y ahí ver por ejemplo el COM6 en mi caso). Esto mismo sirve también para conocer el COM cuando se conecta Arduino.


Ahora si ya se puede enviar el programa, previamente habiendo mantenido presionado el botón reset que se ve cerca del módulo en la proto, y luego seguido y antes de soltar el reset, habiendo conectado el cable que dice Flash que sale del GPIO0. (toda esta configuración la voy a explicar en otro post)

Para que quede más claro:
* Presionar Reset por dos o tres segundos
* Antes de soltar reset conectar el GPIO0 cable FLASH de la imagen.
 * Clic en el botón de la flecha para enviar.

Ahora que ya se ha presionado el botón para enviar, hay que esperar hasta que cargue al 100%, he leído por ahí que si se interrumpe la carga dejará de funcionar el módulo, por las dudas prefiero NO hacer la prueba ;) Así que ATENCIÓN en esta parte del proceso.


Resultado final en gif animada del Esp8266 v12 funcionando en protoboard con el programa del Blink que enciende el pin nº 2.


Proximamente: Pasos previos de configuración y conexión para que el Esp8266 funcione con el IDE de Arduino.