VGA out for ESP32-S3 - New feature to test

[Electroguard]

The font and text positioning is working great,.
But I don't have a clue how a any of the .bin fonts will display until loaded, cos I cannot find anything to preview the font.bin files ... anyone any ideas ?

Or has anyone already done an Annex font file selector for loading and viewing the available uploaded fonts ?



EDIT: Is ok, I have added a listbox$ to my Annex VGA utility to pick from the list of 59 uploaded fonts to quickly view any of them on vga monitor.

[cicciocb]

You can use the online font converter
[Local Link Removed for Guests]

I did an update recently (now is V3); now you can drag and drop any font bin file and see any character.

You can also modify it and download again directly in .bin format

[Fernando Perez]

I am now testing the text alignment function:

Code: [Local Link Removed for Guests]

' TEST VGA 640x480
' DECLARE SUB printLabel(text$, xFrame, yFrame, wFrame, hFrame, cText, cFrame, font)
' DECLARE SUB printField(text$, xFrame, yFrame, wFrame, hFrame, cText, cFrame, font, align)

dim sample(5) = 0, 79, 116, 1024, 4.097, 33.66

blue = tft.color(blue)
cyan  = tft.color(cyan)
green = tft.color(green)
white = tft.color(white)
black = tft.color(black)
yellow = tft.color(yellow)
orange = tft.color(orange)

tft.loadfont "/fonts/FreeMonoBold9pt7b.bin", 10
tft.loadfont "/fonts/FreeMono12pt7b.bin", 11

vga.delete
vga.init 2
vga.fill black
vga.rect 0, 0, 632, 480, yellow ' check if the whole screen is being used
vga.line 317, 1, 317, 478, yellow ' centered vertical line 

printLabel "Test align text", 70, 10, 180, 30, yellow, black, 10
vga.show

while 1

  printLabel "MODE LEFT", 400, 10, 140, 30, yellow, orange, 10
  for i = 0 to 5
    number$ = str$(sample(i))
    printField number$, 240, 50, 150, 30, white, cyan, 11, 0  
    pause 2000
  next i
    
  printLabel "MODE MIDDLE", 400, 10, 140, 30, yellow, orange, 10
  for i = 0 to 5
    number$ = str$(sample(i))
    printField number$, 240, 50, 150, 30, white, cyan, 11, 1
    pause 2000
  next i

  printLabel "MODE RIGHT", 400, 10, 140, 30, yellow, orange, 10  
  for i = 0 to 5
    number$ = str$(sample(i))
    printField number$, 240, 50, 150, 30, white, cyan, 11, 2
    pause 2000
  next i

wend

END

' -------------------------------------------------------------
SUB printLabel(text$, x, y, width, height, cText, cFrame, font)
' -------------------------------------------------------------
  vga.rect x, y, width, height, cFrame           ' draw frame
  vga.rect x+1, y+1, width-2, height-2, black, 1 ' delete previous content
  vga.text.font font
  vga.text.color cText
  vga.text.pos x+9, y+20
  vga.print text$
  vga.show

END SUB

' -------------------------------------------------------------------------------
SUB printField(text$, xFrame, yFrame, wFrame, hFrame, cText, cFrame, font, align)
' -------------------------------------------------------------------------------
LOCAL xPos
  select case align
    case 0
      xPos = xFrame + 8
    case 1
      xPos = xFrame + (wFrame / 2) + 2
    case 2
      xPos = xFrame + wFrame - 8
  end select 

  vga.rect xFrame, yFrame, wFrame, hFrame, cFrame           ' draw frame
  vga.rect xFrame+1, yFrame+1, wFrame-2, hFrame-2, black, 1 ' delete previous content
  vga.text.color cText  
  vga.text.align align
  vga.text.draw text$, xPos, yFrame+21, font 
  vga.show

END SUB

For what I need, it works fine, but we'll see when we change fonts.
The problem will be that it is not possible to calculate exactly the size in pixels that a string will occupy, according to Cicciocb's answer:
[Local Link Removed for Guests]

[Electroguard]

Thanks for that Francesco, I will give it a try later.

If your situation is anything like mine Fernando, it helps to actually view the relevant text on the vga monitor to see if it is suitable.
It is not so difficult if you have the vgaout folder to jump back to for refreshing the monitor after selecting a new font.
It only needs an initial scan to populate a fonts$ string in a listbox to select a new font$ from, then onhtmlchange can branch to vgaout after font changes. So selecting a font from the list will update the vga monitor to quickly show what it looks like.
You need to populate font$ with a valid font to start with else the program will scare you with an out of memory error.
The Output page is not really for viewing the local weather info, it is just a handy extra benefit of being able to use the browser to control vga output.
I am even thinking about including a 640 x 480 div in the web page for easier positioning of required vga layouts.

fonts.jpg

vgaout.jpg

getfonts.jpg

[Electroguard]

Is it actually possible to create a tabulated vga list with different colour variables on the same line as the headings ?
Basically it needs 3 tabulated columns to allow for the heading, the variable, the suffix... as in the pic, but I have not managed it with vga yet.
I've tried writing all the headings first, then rewriting the data variables further along the lines, but they don't appear.
Also tried writing one heading, followed immediately by its re-justified data variable in a different colour, but never see any data.
It seems like writing any text for that line shuts the buffer door to prevent anything following.
I've tried vga.text.draw a$,x,y as well as vga.text.pos followed by vga.print, and can see everything else appearing on the vga except the variables
And yep, I've also tried putting the variables in a command string to send via command, but they disn't show. No error msgs by the way, just no-shows.
It seems that the left-justified headings prevent any subsequent right-justified variables from being written to those lines.
I was wondering if perhaps a string reserves much more font size of line in the buffer than is actually used by text characters.
Not sure if it's me being thick, or a vga bug, or a limitation of the vga implementation... so I'm hoping someone else may have more success.

tabbed list.jpg

[Fernando Perez]

Robin, have you tried the program I posted above?
Doesn't work for you?
It seems to me that we are working on the same and at the same time.
With the two SUBs that I post, I think you can get it.
However, I warn you that with the available fonts, both the % and the ºC symbols are terrible. I have chosen to draw them with Paint and use them on VGA as images.

image.png

image.png

[PANNO2]

Where do you buying your s3? After some stress with some orders i fear to get the wrong ones.

Thx

[Fernando Perez]

The blue frames are only to control the size and position on the screen.
Change them to black when everything is set.

Code: [Local Link Removed for Guests]

' DECLARE SUB printLabel(text$, xFrame, yFrame, wFrame, hFrame, cText, cFrame, font)
' DECLARE SUB printField(text$, xFrame, yFrame, wFrame, hFrame, cText, cFrame, font, align)

dim sample(5) = 27.2, 27.9, 19.5, 19.2, 68, 1015

blue = tft.color(blue)
white = tft.color(white)
black = tft.color(black)
yellow = tft.color(yellow)

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

vga.delete
vga.init 2
vga.fill black
vga.rect 0, 0, 632, 480, yellow ' check if the whole screen is being used

xFrame = 70 : wFrame = 105 : hFrame = 30
for i = 10 to 160 step hFrame
  READ label$
  printLabel label$, xFrame, i, wFrame, hFrame, yellow, blue, 10  
next i

xFrame = 180 : wFrame = 60: item = 0
for i = 10 to 160 step hFrame
  number$ = str$(sample(item))
  printField number$, xFrame, i, wFrame, hFrame, white, blue, 10, 2
  inc item
next i

vga.spriteSheet "/img/grado1.bmp"
for i = 17 to 107 step hFrame
  vga.sprite 250, i, 19, 16, 0, 0
next i

vga.spriteSheet "/img/percent.bmp"
vga.sprite 250, i, 19, 15, 0, 0

printLabel "HPa", 240, 160, 45, hFrame, yellow, black, 10  
vga.show

END

DATA "Hall","Lounge","Outside1","Outside2","Humidity","Pressure"

' -------------------------------------------------------------
SUB printLabel(text$, x, y, width, height, cText, cFrame, font)
' -------------------------------------------------------------
  vga.rect x, y, width, height, cFrame           ' draw frame
  vga.rect x+1, y+1, width-2, height-2, black, 1 ' delete previous content
  vga.text.font font
  vga.text.color cText
  vga.text.pos x+9, y+20
  vga.print text$
  vga.show

END SUB

' -------------------------------------------------------------------------------
SUB printField(text$, xFrame, yFrame, wFrame, hFrame, cText, cFrame, font, align)
' -------------------------------------------------------------------------------
LOCAL xPos
  select case align
    case 0
      xPos = xFrame + 8
    case 1
      xPos = xFrame + (wFrame / 2) + 2
    case 2
      xPos = xFrame + wFrame - 8
  end select 

  vga.rect xFrame, yFrame, wFrame, hFrame, cFrame           ' draw frame
  vga.rect xFrame+1, yFrame+1, wFrame-2, hFrame-2, black, 1 ' delete previous content
  vga.text.color cText  
  vga.text.align align
  vga.text.draw text$, xPos, yFrame+21, font 
  vga.show

END SUB

img.zip

image.png

[Electroguard]

Panno2, you can find a link in the first post here... [Local Link Removed for Guests]
Or search for ESP32-S3 elsewhere, and make sure to select N16R8 if you want to use 640 x 480, cos the smaller device only gives 320 x 240.


Fernando, you thieving hound, so it was you nicking my data all the time !
Yeah thanks for looking after it for me, I'm using much bigger fonts than you, so it wasn't easy to integrate your subs into my program without a major rewrite, Did not matter though, cos you gave me the clever idea of simply making pics of the heading texts like you did with your suffix pics
BUT if it worked for you then it suggested I must have been doing something wrong ... and eventually I sussed what is was
Each time an EasyNet device starts if it requests Timesyc from the Annex Timserver (part of the Sentry Server Facility).
The VGA DEV device was similarly requesting a weathersync update from the weather Annex server, which wasn't being received back before it had fired its blanks. Sorted out that bit om timing and no its luvvery



much rewrite

[Electroguard]

The middle monitor still shows a couple of vga bugs... which I've nicknamed Francesco and Fernando

vga.jpg