|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
  Raspberry Pi Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  AutoIt (Programación) Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


.

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

VGAHelloWorld.ino


#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.

Android_VGA.ino


#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)

 

VGA2DFeatures.ino


//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)

_______________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información