VGA out for ESP32-S3 - New feature to test

All about the VGA for the ESP32-S3
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 276 times
Been thanked: 323 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Electroguard »

Here's a positional Zoom Clock Fernando - it's basically just a hack which can easily be bettered, and I've been put off public publishing due to an opinionated critic, but I'm posting it here in case it may be useful to you.
Here's a demo video: https://odysee.com/@Electroguard:d/ZoomClock:2

Code: [Local Link Removed for Guests]

'Resizable Repositional Zoom Clock - radius = 20 * zoom factor z
'zoom factor can be from around 0.5 with fine-tuning to 11 for 640x480
pad=10 ' padding from edge

z=1: r=(20*z)+0: x=(640/2)-1: y=(480/2)         'Middle Small
'z=3: r=(20*z)+0: x=(640/2)-1: y=(480/2)         'Middle Medium
'z=11: r=(20*z)+0: x=(640/2)-1: y=(480/2)        'Middle Big
'z=1.5: r=(20*z)+0: x=(640/2)-1: y=479-(r)-pad   'Bottom
'z=6: r=(20*z)+0: x=(640/2)-1: y=0+(r)+pad       'Top
'z=0.7: r=(20*z)+0: x=pad+r: y=0+(r)+pad         'Top Left
'z=2: r=(20*z)+0: x=640-r-pad: y=480-(r)-pad     'Bottom Right

vga.pinout 17,18,8, 12,13,14, 21,47, 1,2
vga.delete
vga.init 2, 3 '640x480 3 buffers
vga.writePage 0 ' active
act = 1
vga.writePage act ' active 
for c=1 to 360 step 30
 vga.needle x, y, 20*z, c-1, darkcyan,3 'hours marker colour can either be "luminous" darkcyan or perimeter circle colour
next c 
vga.circle x,y,r-4,black,1   'same as backround fill colour
vga.circle x,y,r+3,blue,0    'clock perimeter circle
vga.showPage act  ' display
vga.copy 1, 2 ' copy the image from the buffer 1 to the buffer 2
i = 0
timer0 1000, update_clock
wait
  
update_clock:
 buf = (i and 1)
 vga.copy 2, buf ' copy the image from the buffer 2 to the buffer buf
 vga.WritePage buf' active 
 t = timeunix(time$)
 h = (t / 3600 ) mod 12
 m = (t / 60) mod 60
 s = t mod 60
 vga.needle x, y, 13*z, h*30 +180 , green, 2 'hours hand
 vga.needle x, y, 17*z, m*6 +180 , yellow, 2 'mins hand
 vga.needle x, y, 20*z, s*6 +180 , red, 2 'secs - looks better if thickness=1, but becomes invisible just above horizontal 
 vga.circle x,y,2,red,1
 vga.showPage buf  ' display
 inc i
return

end
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 276 times
Been thanked: 323 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Electroguard »

You might also find this VGA Font Viewer useful because it lets you see how any installed fonts will actually look on the VGA monitor.
You can put your own text into sample$... but it's only a quick tool, and would be easy to add a textbox$ for entering new text on the fly if wished.
Edit: A sample$ textbox has been added to the code below

fontviewer.jpg

'

Code: [Local Link Removed for Guests]

'VGA font viewe
title$ = "Font Viewer"    
sample$=""
if sample$="" then sample$=title$
VGA = 1
verbose=1
font$=""
fonts=0
fonts$=""
fontpath$ = "/fonts/"                      
gosub getfonts
'font$="FreeMonoBoldOblique18pt7b.bin"
if VGA=1 then
 vga.pinout 17,18,8, 12,13,14, 21,47, 1,2
 vga.delete
 vga.init 2,1
 vga$="" 
 xRes=640: yRes=480: x=xRes/2: y=yRes/2: border=1
 colours$="black,white,red,green,blue,cyan,magenta,pink,yellow,orange,purple,violet,skyblue,navy"
 colours$=colours$+",darkgreen,darkcyan,maroon,olive,brown,greenyellow,gold,silver,lightgrey,darkgrey"
 colours=word.count(colours$,",")
 foreground$="white": background$="black": bordercol$="blue": wallpaper$=""
endif
if VGA=1 then gosub vgaout
gosub paint
onhtmlreload paint
HtmlEventVar$=""
onhtmlchange htmlchanged      
wait


vgaout:
vga.delete
vga.init 2,1
vga$="vga.fill "+ background$: command vga$
if border=1 then vga$="vga.rect 0,0,xRes,yRes,tft.color("+bordercol$+")": command vga$
if wallpaper$<>"" then vga.image wallpaper$
tft.loadfont fontpath$ + font$, 10
vga.text.font 10: vga.text.align 1
vga$="vga.text.color tft.color("+foreground$+")": command vga$
vga.text.draw sample$,x,y
vga.show
return
'
paint:
cls
autorefresh 1000
a$=""
a$ = a$ + |<div  style='display: table; margin-right:auto;margin-left:auto;font-size:1.2em;text-align:leftr;borderx:1px solid gray;'>|
a$ = a$ + "Sample text " + textbox$(sample$,"font") + "<br><br><br>"
a$ = a$ + "Current font= " + textbox$(font$,"font") + "<br><br><br>"
a$ = a$ + "Choose font " + listbox$(font$,fonts$,"font") + "<br><br><br>" 
a$ = a$ + "Text col = " + listbox$(foreground$,colours$,"colour") + "<br><br>"
a$ = a$ + "Background = " + listbox$(background$,colours$,"colour") + "<br><br>" 
a$ = a$ + "Border col = " + listbox$(bordercol$,colours$,"colour") + " Enable border " + checkbox$(border) + "<br><br><br>" 
a$ = a$ + "Update VGA " + button$("VGA Update", vgaout)
a$ = a$ + |</div>|
a$ = a$ + cssid$("font", "width:400; text-align:left; color:teal; font-size:1.2em;background:GhostWhite;")
a$ = a$ + cssid$("colour", "text-align:left; color:black; font-size:1.2em;background:GhostWhite;")
html a$
a$ = ""
return

htmlchanged:
gosub vgaout
return

getfonts:
fonts$=""
fonts=0
d$ = FILE.DIR$("/fonts")
While D$ <> ""
 fonts=fonts+1
'if verbose=1 then wlog d$
 d$ = FILE.DIR$
 fonts$=fonts$+","+d$
Wend
font$=word$(fonts$,2,",")
if verbose=1 then wlog "total fonts="+str$(fonts)
wlog "First font is " + font$
'if verbose=1 then wlog fonts$
return

END   '-------------------- End ---------------------

You do not have the required permissions to view the files attached to this post.
User avatar
Fernando Perez
Posts: 378
Joined: Mon Feb 15, 2021 10:09 pm
Location: Santander (Spain)
Has thanked: 195 times
Been thanked: 267 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Fernando Perez »

Robin, your two programs are really interesting. Especially the one related to the sources, it reaffirms my opinion that the current sources are quite ugly and that I am afraid that, as Cicciocb anticipated, we will have to edit them or get new, more aesthetic ones.

To your question about how to delete old characters, I guess the most appropriate solution would be for us to learn how to handle page swapping well (although it sounds like this is more designed to handle moving sprites).

To get results in isolated cases, without page management, I am using the trick of overwriting the character string with the color of the background of the screen. You can see two examples below, one using vga.print and the other using vga.text.draw.

In the latter, you'll notice that the right alignment doesn't respond as expected. I declare myself useless to explain why.
Maybe Francesco will clarify it for me.

Code: [Local Link Removed for Guests]

prevText$ = ""
text1$ = "This is text number one"
text2$ = "Now changed to text number two"

back = tft.color(blue)
fore = tft.color(yellow)

tft.loadfont "/fonts/FreeSerifBold9pt7b.bin", 10

vga.delete
vga.init 2
vga.fill back
vga.text.font 10
vga.show
pause 3000

x = 100 : y = 150

for i = 1 to 4
  printText text1$, x, y, fore, back
  pause 2000
  printText text2$, x, y, fore, back
  pause 2000
next i

vga.fill black
vga.show

END

SUB printText(text$, x, y, foreground, background)

  vga.text.pos x, y
  vga.text.color background
  vga.print prevText$
  vga.show 

  vga.text.pos x, y
  vga.text.color foreground
  vga.print text$
  vga.show
  
  prevText$ = text$
    
END SUB

Code: [Local Link Removed for Guests]

prevText$ = ""
text1$ = "This is text number one"
text2$ = "Now changed to text number two"

back = tft.color(blue)
fore = tft.color(yellow)

tft.loadfont "/fonts/FreeSans12pt7b.bin", 10

vga.delete
vga.init 2
vga.fill back
vga.text.font 10
vga.show
pause 3000

x = 100 : y = 100
vga.line x-1, 0, x-1, 479, black
vga.text.align 0 ' LEFT
gosub test
vga.line x-1, 0, x-1, 479, blue

x = 250 : y = 150
vga.line x, 0, x, 479, black
vga.text.align 1 ' MIDDLE
gosub test
vga.line x, 0, x, 479, blue

x = 380 : y = 200
vga.line x, 0, x, 479, black
vga.text.align 2 ' RIGHT
gosub test

vga.fill black
vga.show

END

test:
  for i = 1 to 3
    drawText text1$, x, y, fore, back, 0
    pause 2000
    drawText text1$, x, y, fore, back, 1

    drawText text2$, x, y, fore, back, 0
    pause 2000
    drawText text2$, x, y, fore, back, 1
  next i
return

SUB drawText(text$, x, y, foreground, background, clear)

  if clear
    vga.text.color background
    vga.text.draw prevText$, x, y
  else  
    vga.text.color foreground
    vga.text.draw text$, x, y    
    prevText$ = text$
  endif
  
  vga.show
   
END SUB
User avatar
Fernando Perez
Posts: 378
Joined: Mon Feb 15, 2021 10:09 pm
Location: Santander (Spain)
Has thanked: 195 times
Been thanked: 267 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Fernando Perez »

Francesco, do you think it is possible to add to the existing instructions of the VGA control system a new function that allows obtaining the color of a specific pixel on the screen?
Something similar to var = vga.getPxColor(x, y)
Thank you.
User avatar
cicciocb
Site Admin
Posts: 2058
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1358 times
Contact:

Re: VGA out for ESP32-S3 - New feature to test

Post by cicciocb »

HI all,
sorry for my weak support in these days but I'm working on another subject actually (a new online updater :D ).

I implemented the GUI like the one for the TFT but I'm not yet satisfied of the result, in particular on the font processing.
I plan to implement the same identical code for the TFT text processing and, YES, I'll implement the getpixel function.

I plan also to create some simple examples on how use the video pages and how handle background images and transparent fonts.

I propose to close this topic and open another one as this one is too long and will be hard to find info inside.
User avatar
Fernando Perez
Posts: 378
Joined: Mon Feb 15, 2021 10:09 pm
Location: Santander (Spain)
Has thanked: 195 times
Been thanked: 267 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Fernando Perez »

I would still say more:
In my country, the title of the film "Those Magnificent Men in their Flying Machines" was translated as "Those crazy men in their crazy gadgets".
These days, between Robin and me, we have managed to make this thread look like the latter. :lol: :lol:
So I totally agree with closing it. Right Robin?
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 276 times
Been thanked: 323 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Electroguard »

Yes Fernando, and I'm sure we will not be the only ones using VGA, cos we did not clock up well over 2000 views ourselves for the 17 pages of chapter1.
I am sure chapter 2 will be as interesting and as much fun, and yes there is always room for better fonts and other improvements, but I am already so pleased with what Annex VGA can achieve now that anything else will just be bonus for me...


a.jpg

weatherpage.jpg

b.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
Fernando Perez
Posts: 378
Joined: Mon Feb 15, 2021 10:09 pm
Location: Santander (Spain)
Has thanked: 195 times
Been thanked: 267 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Fernando Perez »

Robin, you can be satisfied because the final look is magnificent. Just one question before the final "over & out" of the thread:
What font are you using for the number fields?
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 276 times
Been thanked: 323 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Electroguard »

Thanks Fernando - clock numbers are "FreeSansBold14pt7b.bin", weather info font is "FreeMonoBold24pt7b.bin"
I used same font for Title and Headings cos built-in font 1 was too small, and no others yet, and only able to load fonts 10 to 13 without causing error.
But my glass is always half full, never half empty, so will make it work somehow... even if using static images like the weather info suffixes.

tft.loadfont fontpath$ + "FreeMonoBoldOblique18pt7b.bin", 10 'title, headings
tft.loadfont fontpath$ + "FreeMonoOblique12pt7b.bin", 11 'date
tft.loadfont fontpath$ + "FreeSansBold14pt7b.bin", 12 'clock
'tft.loadfont fontpath$ + "FreeMonoBold24pt7b.bin", 13 'info
tfont=10: dfont=11: cfont=12: hfont=10: ifont=13 '(t=title, d=date, c=clock, h=headers, i=info)

It works mostly, but every now and then it shows time in wrong place and wrong colour and wrong font. I think is a timing issue, but difficult to put pauses in clock and data updates.
Hopefully will be able to sort that eventually with different page buffers, but for now I just periodically rewrite the whole screen to clear it again.
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 276 times
Been thanked: 323 times

Re: VGA out for ESP32-S3 - New feature to test

Post by Electroguard »

When CiccioCB has VGA updates ready he will post them in a new thread Fernando, so in the meantime we can still use this 'gadget pile' when needed.

I've fixed my annoying clock problem which occasionally printed the time in the wrong font and wrong colour and in the wrong place.
It took a lot of experimenting, but eventually was as simple as adding a 20ms pause at the beginning of the clock timer and weather update branches to allow things to settle down before doing any updating.

Basically I have a VGAOUT: which writes the static stuff, a 1 sec timer which calls VGACLOCK: to update the time, and udpRX: which writes incoming weather updates.
Adding the minimal pause to those 2 periodic update branches VGACLOCK and udpRX seems to have fixed the problem.

Which is good, cos I have plans to evict the spider and have a small analog clock in its place.
Also it would be nice to include extreme weather warnings such as ice alert, and also record all extremes, so may do a second vga page for showing Weather Extremes.


vgaout:
write static stuff
blah blah
return

vgaclock:
pause 20
dy=ty+34: vga.text.align 0: vga.text.font cfont
vga$="vga.text.color tft.color("+ccol$+")": command vga$
vga.rect dx-70,dy+6,130,25,black,1
if clock=1 then vga.text.draw time$, dx-65,dy+27
vga.show
return

vgadata:
pause 20
vga$="vga.text.color tft.color("+icol$+")": command vga$
vga.rect ix-110,hy-30,120,40+(h*5),black,1
'blah blah

ticker: '1 sec timer)
gosub vgaclock
return

udpRX:
blah blah
gosub vgadata
return
Post Reply