VGA

All about the VGA for the ESP32-S3
User avatar
cicciocb
Site Admin
Posts: 2056
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1354 times
Contact:

Re: VGA

Post by cicciocb »

Maybe you should have a look at the roadmap I published :D
EasyRider
Posts: 28
Joined: Sat Jun 05, 2021 1:27 am
Has thanked: 7 times
Been thanked: 2 times

Re: VGA

Post by EasyRider »

Maybe you should have a look at the roadmap I published :D
Noted, Thank You.
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 274 times
Been thanked: 322 times

Re: VGA

Post by Electroguard »

I was hunting for some cable to use for a VGA connection to another ESP32-S3, and the most suitable I could find was a spare flexible network patch cable which used stranded instead of solid core conductors. That still left the problem of a VGA connector, but I had a pair of VGA to UTP network extenders somewhere, so perhaps I could make the job easier by cutting the patch cable and just plugging it directly into one of the VGA extenders.

vgaextenders.jpg

Murphy's Law had other plans of course, so hid the VGA extender which I needed, but hah... I found the other one, and a gender changer.
Then with an annoyed Murphy peering over my shoulder I buzzed out the extender connections, more from curiosity than expectation (cos 15xVGA to 8xRJ45 doesn't equate), but I was pleased to find that the 6 essential VGA pins were all available on the RJ45.

RJ45 1=GND, 2=Green, 4=Red, 6=Blue, 7=Hsync, 8=Vsync.


vga2rj45.jpg
Although not essential, I connected the unused RJ45 pins 3 and 5 to GND with pin 1 on the ESP32-S3 resistor board to act like a signal screen.
It worked out so well that I will order another pair of extenders cos they are so cheap, and besides... I still have half a flexible patch cable left over.
Plus of course they are handy just for extending a VGA connection if ever needed.

vgacable.jpg

Which highlighted another less obvious advantage of using VGA to RJ45 adapters, cos if the RJ45 tails are accidentally or deliberately made too short they can be easily made the ideal length by using a couple of RJ45 network couplers and an appropriate network cable.

RJ45coupler.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 274 times
Been thanked: 322 times

Re: VGA

Post by Electroguard »

There is a slight typo in the vga.triangle Help syntax Francesco, the second reference to y1 should be y2
VGA.TRIANGLE x1, y1, x2, y1, x3, y3, color [,fill=1]
It all works great though, and I was even able to make a nice anemometer arrow-head wind direction pointer using two triangles side by side.
Was probably just an exercise in futility, cos I doubt I can get the arrowhead to rotate around the inside perimeter of the compass circle
(have included the code at bottom anyway, just in case some bright spark knows how to do it)
Is probably irrelevant anyway, cos I begrudge spending 34 euros on relatively expensive old-fashioned moving wind speed and direction sensors when complete comprehensive weather stations are available for same money.
Also, solid-state ultrasonic anemometers are available in USA for $74.
Is actually from china, so I contacted and asked how much to send to France instead of USA, but no reply yet.
At least I now know I can include a decent wind speed and direction indicator if needed (probably using vga.needle).

screen6.jpg

wind2.jpg
begrudge2.jpg

Code: [Local Link Removed for Guests]

windy:
speed=1+rnd(98): direction=1+rnd(358)   'normally would be wind data from anemometer
compassX=565: compassY=406: compassRadius=35 'compass x,y center origin and radius
zx=compassX: zy=compassY: zr=compassRadius  
if lastspeed$="" then   'if no previous existing data then must be first run so create compass
 tft.loadfont fontpath$ + "FreeSansBoldOblique12pt7b.bin",11   'compass points
 vga.text.align 4: vga.text.font 1 
 vga.text.color gold
 vga.text.draw "N", zx,zy-zr-6
 vga.text.draw "S", zx,zy+zr+7
 vga.text.draw "E", zx+zr+5,zy
 vga.text.draw "W", zx-zr-4,zy
 vga.circle zx,zy,zr,red,0       'outer circle
 lastspeed$="0"
endif
vga.circle zx,zy,zr-1,black,1    'inner disc
vga.text.color cyan: vga.text.font 11 
vga.text.draw str$(speed), zx-3,zy-3

'testing feasibility of an arrow direction pointer, but may just end op being a needle pointer
tipX=zx: tipY=zy-zr+2: barb=19: inner=15: width=7
vga.triangle tipx,tipy,tipx-width,tipy+barb,tipx,tipy+inner,yellow,1
vga.triangle tipx,tipy,tipx+width,tipy+barb,tipx,tipy+inner,gold,1
vga.show
return
You do not have the required permissions to view the files attached to this post.
User avatar
cicciocb
Site Admin
Posts: 2056
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1354 times
Contact:

Re: VGA

Post by cicciocb »

Maybe you could try this example :D

Code: [Local Link Removed for Guests]

vga.pinout 4,5,6, 7,15,16, 17, 18, 8,3

vga.delete

vga.init 2, 3 '640x480 3 buffers
vga.WritePage 0 ' active
vga.fill tft.rgb(0,0,32)
vga.show
tft.loadfont "/fonts/FreeSansBold20pt7b.bin", 10
tft.loadfont "/fonts/FreeMonoBold24pt7b.bin", 11

for z = 1 to 100
  vga.fill black
  vga.text.font 10  
  vga.text.color gold, black
  vga.text.draw "Annex32-S3 - Demo",  0, 80
  vga.text.draw "Transparences / layers", 0, 140 
  vga.text.draw "Resolution: 640 x 480" , 0, 200
  vga.show
  'pause 2000
  

  act = 1
  vga.WritePage act ' active 
  vga.image "/img/girl.jpg"
  vga.ShowPage act  ' display
  vga.copy 1, 0 ' copy the image from the buffer 0 to the buffer 1
  'pause 2000
  
  act = 0
  vga.WritePage act ' active 
  vga.SPRITESHEET "/img/gauge3.bmp"
  vga.sprite 20,228,252, 252,0,0
  vga.SPRITESHEET "/img/kmh.bmp"
  vga.sprite 300,150,300, 300,0,0  
  vga.ShowPage act  ' display
 ' pause 2000
  vga.copy 0, 2 ' copy the image from the buffer 0 to the buffer 2
  
  for i = 0 to 10000
    buf = (i and 1)
    vga.copy 2, buf ' copy the image from the buffer 2 to the buffer buf
    vga.WritePage buf' active 
    vga.text.font 11
    vga.text.color green
    vga.text.draw date$ + " " + time$, 100, 80
    vga.text.draw str$(i), 260, 180
    vga.text.font 10
    vga.text.color red
    vga.text.align 4
    vga.text.draw str$(i mod 360, "%3.0f"), 140, 410
    vga.needle 146,354,90,i, blue, 6
    double_triangle_arrow (i+90), 146, 354, 90, 10, 5, vga.color(blue)
    
    vga.circle 146,354,10,black, 1    
    
    vga.needle 450,300,130,-i, black, 8
    triangle_arrow -i+90, 450, 300, 130, 10, 5, vga.color(blue)
    vga.ShowPage buf ' display
  next i
next z
  
  
 
sub triangle_arrow(angle, center_x, center_y, radius_ext, height, width, color)
  local angleInRadians, px, py, px2, py2
  local triangleAngle, t1x, t1y
  angleInRadians = angle * PI/180 + PI/2
  px = cos(angleInRadians) * radius_ext+ center_x
  py = sin(angleInRadians) * radius_ext+ center_y
  
  triangleAngle = width * PI/180
  t1x = cos(angleInRadians + triangleAngle) * (radius_ext - height)+ center_x
  t1y = sin(angleInRadians + triangleAngle) * (radius_ext - height)+ center_y
  t2x = cos(angleInRadians - triangleAngle) * (radius_ext - height)+ center_x
  t2y = sin(angleInRadians - triangleAngle) * (radius_ext - height)+ center_y
  
  vga.triangle px,py, t1x, t1y, t2x, t2y, color, 1
end sub

sub double_triangle_arrow(angle, center_x, center_y, radius_ext, height, width, color)
  local angleInRadians, px, py, px2, py2
  local triangleAngle, t1x, t1y, t2x, t2y
  angleInRadians = angle * PI/180 + PI/2
  px = cos(angleInRadians) * radius_ext+ center_x
  py = sin(angleInRadians) * radius_ext+ center_y
  px2 = cos(angleInRadians) * (radius_ext - height*0.8)+ center_x
  py2 = sin(angleInRadians) * (radius_ext - height*0.8)+ center_y
  
  triangleAngle = width * PI/180
  t1x = cos(angleInRadians + triangleAngle) * (radius_ext - height)+ center_x
  t1y = sin(angleInRadians + triangleAngle) * (radius_ext - height)+ center_y
  t2x = cos(angleInRadians - triangleAngle) * (radius_ext - height)+ center_x
  t2y = sin(angleInRadians - triangleAngle) * (radius_ext - height)+ center_y
  
  vga.triangle px,py, t1x, t1y, px2, py2, color, 1
  vga.triangle px,py, t2x, t2y, px2, py2, color, 1
  
end sub

image.png
You do not have the required permissions to view the files attached to this post.
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 274 times
Been thanked: 322 times

Re: VGA

Post by Electroguard »

Thanks Francesco, you are amazing.
That will make an even better wind direction pointer than the stubby needle I was using... and I was already quite pleased with that.

The anemometer is smoothly refreshing every second using random slightly-changing speed and direction info.
And that's with the butterfly flapping its wings and the clock updating etc.
So it's too good to NOT add a local anemometer.
I have an old wifi weather station mounted on the roof which has a useless little lcd display, so when the weather improves I'll be up the ladder to try to hack the outside wind speed and direction mechanical gizmo to feed their outputs direct into Annex... is worth a try.
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 274 times
Been thanked: 322 times

Re: VGA

Post by Electroguard »

AnnexVGA is really something special... this is the double-arrow pointer implemented and in use - it is perfect, thanks again.

screen9.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
cicciocb
Site Admin
Posts: 2056
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1354 times
Contact:

Re: VGA

Post by cicciocb »

What about the addition of a mouse and a keyboard ?
All rigorously USB and wireless :D
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 274 times
Been thanked: 322 times

Re: VGA

Post by Electroguard »

Umm, are you saying that you have actually achieved it ?
User avatar
cicciocb
Site Admin
Posts: 2056
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1354 times
Contact:

Re: VGA

Post by cicciocb »

What do you think? :D
image.png
1698083150684.jpg
You do not have the required permissions to view the files attached to this post.
Post Reply