Tutorial del Internet de las Cosas y Bluetooth con el ESP32
Juan Antonio Villalpando
Volver al índice del tutorial
____________________________
250.- ESP32. Ver información en un monitor VGA. App Inventor envía información por WiFi a un monitor.
- Vamos a enviar texto desde una aplicación creada con App Inventor, a un monitor VGA, utilizaremos un ESP32 con conexión WiFi.
- Así veríamos el texto recibido en un monitor VGA.
- Necesitamos:
- un monitor VGA.
- un conector macho VGA y cables de conexión.
- WiFi.
- Vamos a seguir este tutorial: https://www.youtube.com/watch?v=qJ68fRff5_k
- Se basa en la librería bitluni's ESP32Lib: https://github.com/bitluni/ESP32Lib
- En este tutorial utilizaré la tarjeta mostrada en la imagen, observa las conexiones al conector hembra VGA del monitor.
- Por comodidad puedes utilizar un conector macho VGA para conectarlo al conector hembra VGA del monitor, en mi caso no tenía ese conector, así que conecté directamente mediante cables el VGA del monitor con la tarjeta ESP32.
- Para más comodidad puedes utilizar un conector macho VGA.
________________________________________________
1.- Código y librería.
- Establecemos Herrmientas / Gestor de tarjetas... / ESP32 Dev Module.
- Instalamos la librería bitluni ESP32Lib
- Programa / Incluir librería / Gestor de Bibliotecas / bitluni
- Vamos a cargar un ejemplo sencillo, para ello vamos a...
- Para que me funcionara tuve que cambiar la resolución a vga.MODE400x300
|
#include <ESP32Lib.h>
#include <Ressources/Font6x8.h>
//pin configuration
const int redPin = 14;
const int greenPin = 19;
const int bluePin = 27;
const int hsyncPin = 0;
const int vsyncPin = 5;
//VGA Device
VGA3Bit vga;
void setup()
{
//initializing vga at the specified pins
//vga.init(vga.MODE320x240, redPin, greenPin, bluePin, hsyncPin, vsyncPin);
vga.init(vga.MODE400x300, redPin, greenPin, bluePin, hsyncPin, vsyncPin);
//selecting the font
vga.setFont(Font6x8);
//displaying the text
vga.println("Hello World!");
}
void loop()
{
}
|
- Al conectar el cable al Monitor se mostrará "Hello Word", en este caso no interviene el WiFi, es solo una prueba inicial.
- Ahora vamos a cargar un ejemplo con WiFi: VGAWiFiTextTerminal
- Observamos en el código que podemos establecer una red WiFi como punto de acceso, es decir no necesitamos Router, el mismo ESP32 crea la red WiFi con IP 192.168.4.1, por lo cual para conectar con esta red debemos cambiar la configuración WiFi en nuestro móvil, debemos entrar en la red VGA.
- El mismo código también admite establecer la conexión mediante un cliente, es decir tenemos un Router y queremos conectarnos a él, para cambiar de una opción a otra cambiamos esta línea del código a false o true.
const bool AccessPointMode = true;
- Una vez cargado el sketch vamos a la configuración WiFi de nuestro móvil, conectamos con la red VGA y entramos en un navegador web, escribimos la dirección 192.168.4.1 y nos saldrá una página para enviar mensajes al monitor VGA.
________________________________________________
2.- App Inventor envía texto por WiFi a un monitor VGA.
p250_ESP32_Monitor.aia
_________________________________
- Diseño.
_________________________________
- Bloques.
_________________________________
- Código ESP32.
|
#include <ESP32Lib.h>
#include <Ressources/Font6x8.h>
//pin configuration
const int redPin = 14;
const int greenPin = 19;
const int bluePin = 27;
const int hsyncPin = 0;
const int vsyncPin = 5;
//VGA Device
VGA3Bit vga;
#include <WiFi.h>
const char* ssid = "Nombre_de_tu_red_WiFi";
const char* password = "Contraseña_WiFi";
// Setting Static IP.
IPAddress local_IP(192, 168, 1, 115);
IPAddress gateway(192, 168, 1, 1);
IPAddress subnet(255, 255, 255, 0);
IPAddress primaryDNS(8, 8, 8, 8); //opcional
IPAddress secondaryDNS(8, 8, 4, 4); //opcional
WiFiServer server(80); // Port 80
String retorno = "";
int wait30 = 30000; // time to reconnect when connection is lost.
void setup() {
// vga.init(vga.MODE320x240, redPin, greenPin, bluePin, hsyncPin, vsyncPin);
vga.init(vga.MODE400x300, redPin, greenPin, bluePin, hsyncPin, vsyncPin);
//make the background blue
vga.clear(vga.RGBA(0, 0, 255));
vga.backColor = vga.RGB(0, 0, 255);
//selecting the font
vga.setFont(Font6x8);
vga.setCursor(0, 0);
//displaying the text
vga.println("--- Conectado a VGA ---");
Serial.begin(115200);
// Setting Static IP.
if (!WiFi.config(local_IP, gateway, subnet, primaryDNS, secondaryDNS)) {
Serial.println("Error in configuration.");
}
// Connect WiFi net.
Serial.println();
Serial.print("Connecting with ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("Connected with WiFi.");
// Start Web Server.
server.begin();
Serial.println("Web Server started.");
// This is IP
Serial.print("This is IP to connect to the WebServer: ");
Serial.print("http://");
Serial.println(WiFi.localIP());
}
void loop() {
// If disconnected, try to reconnect every 30 seconds.
if ((WiFi.status() != WL_CONNECTED) && (millis() > wait30)) {
Serial.println("Trying to reconnect WiFi...");
WiFi.disconnect();
WiFi.begin(ssid, password);
wait30 = millis() + 30000;
}
// Check if a client has connected..
WiFiClient client = server.available();
if (!client) {
return;
}
vga.print("New client: ");
vga.println(client.remoteIP());
Serial.print("New client: ");
Serial.println(client.remoteIP());
// Espera hasta que el cliente envíe datos.
// while(!client.available()){ delay(1); }
/////////////////////////////////////////////////////
// Read information sends by client.
String req = client.readStringUntil('\r');
Serial.println(req);
req.replace("+", " "); // Para que los espacios no salgan con +
req.replace(" HTTP/1.1", ""); // Para quitar HTTP/1.1
req.replace("GET /", ""); // Para quitar GET /
vga.println(req.c_str());
retorno = req.c_str();
//////////////////////////////////////////////
// Página WEB. ////////////////////////////
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // Comillas importantes.
client.println(retorno); // Return.
client.flush();
client.stop();
Serial.println("Client disconnected.");
}
|
_________________________________
- Otro ejemplo: VGA2DFeatures (gráficos)
|
//include libraries
#include <ESP32Lib.h>
#include <Ressources/Font6x8.h>
//include a sprite
#include "rock.h"
//pin configuration
const int redPins = 14;
const int greenPins = 19;
const int bluePins = 27;
const int hsyncPin = 0 ;
const int vsyncPin = 5;
//VGA Device
VGA3Bit vga;
//initial setup
void setup()
{
//we need double buffering for smooth animations
vga.setFrameBufferCount(2);
//initializing i2s vga (with only one framebuffer)
vga.init(vga.MODE400x300, redPins, greenPins, bluePins, hsyncPin, vsyncPin);
vga.clear(vga.RGBA(0, 0, 255));
vga.backColor = vga.RGB(0, 0, 255);
//setting the font
vga.setFont(Font6x8);
}
//just draw each frame
void loop()
{
//some value for color ping pong
static int c = 0;
static int d = 1;
c += d;
if (c == 0 || c == 255)
d = -d;
//radius ping pong
static int r = 0;
static int dr = 1;
r += dr;
if (r == 0 || r == 31)
dr = -dr;
//clear the back buffer with black and start drawing
//vga.clear(0);
int x, y;
x = 22;
y = 5;
//set the text cursor
vga.setCursor(x + 30, y);
//print the text, println also exists
vga.print("dot(x,y,c)");
//set a single pixel. dotAdd add the colors. dotMix uses the alpha to mix the colors
vga.dot(x + 60, y + 20, vga.RGB(c, 0, 255 - c));
x = 170;
y = 5;
vga.setCursor(x, y);
vga.print("line(x0,y0,x1,y1,c)");
//draw a line
vga.line(x + c / 8 + 50, y + 10, x + 32 + 40 - c / 8, y + 30, vga.RGB(0, c, 255 - c));
x = 15;
y = 40;
vga.setCursor(x + 10, y);
vga.print("rect(x, y, w, h, c)");
//draw a rectangle with the given width and height
vga.rect(x + 50, y + 15, 3 + c / 8, 19 - c / 16, vga.RGB(0, c, 255 - c));
x = 165;
y = 40;
vga.setCursor(x, y);
//draw a filled rectangle
vga.print("fillRect(x, y, w, h, c)");
vga.fillRect(x + 50, y + 15, 35 - c / 8, 3 + c / 16, vga.RGB(255 - c, c, 0));
x = 25;
y = 80;
vga.setCursor(x + 10, y);
//draw a circle with the given radius
vga.print("circle(x,y,r,c)");
vga.circle(x + 55, y + 20, 1 + r / 4, vga.RGB(255 - c, 0, c));
x = 172;
y = 80;
vga.setCursor(x, y);
//draw a filled circle
vga.print("fillCircle(x,y,r,c)");
vga.fillCircle(x + 60, y + 20, 8 - r / 4, vga.RGB(c / 2, c / 2, 255 - c));
x = 10;
y = 120;
vga.setCursor(x + 10, y);
//draw an ellipse
vga.print("ellipse(x,y,rx,ry,c)");
vga.ellipse(x + 70, y + 20, 1 + r / 2, 8 - r / 4, vga.RGB(255 - c, c, 0));
x = 160;
y = 120;
vga.setCursor(x, y);
//draw a filled ellipse
vga.print("fillEllipse(x,y,rx,ry,c)");
vga.fillEllipse(x + 70, y + 20, 16 - r / 2, 1 + r / 4, vga.RGB(255 - c, c / 2, c / 2));
x = 15;
y = 160;
vga.setCursor(x + 35, y);
vga.print("print(text)");
//generate a string
char text[] = {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0};
for (int i = 0; i < 10; i++)
text[i] = 33 + (i + (c >> 2));
vga.setCursor(x + 37, y + 17);
//set the text and background color with opaque alpha (use RGBA to get a semi transparent back)
vga.setTextColor(vga.RGB(c, 255 - c, 255), vga.RGB(0, c / 2, 127 - c / 2));
vga.print(text);
//reset the text color. no second parameter makes the background transparent
vga.setTextColor(vga.RGB(255, 255, 255));
x = 165;
y = 160;
vga.setCursor(x + 15, y);
vga.print("image(image,x,y)");
//draw the imported sprite. use millis() to calculate the sprite number
//Sprites uses "image(.." internally
// rock.drawMix(vga, (millis() / 50) & 15, x + 65, y + 25);
//show the rendering
// vga.show();
}
|
_________________________________
- Patillaje.
https://en.wikipedia.org/wiki/VGA_connector
VGAFonts
VGACustomResolution (video)
_______________________________
|