VGA out for ESP32-S3 - New feature to test
- 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
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.
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
- Site Admin
- Posts: 2060
- 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
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
[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
- 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
I am now testing the text alignment function:
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]
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
- 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
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.
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.
You do not have the required permissions to view the files attached to this post.
- 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
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.
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.
You do not have the required permissions to view the files attached to this post.
- 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
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.
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.
You do not have the required permissions to view the files attached to this post.
Re: VGA out for ESP32-S3 - New feature to test
Where do you buying your s3? After some stress with some orders i fear to get the wrong ones.
Thx
Thx
- 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
The blue frames are only to control the size and position on the screen.
Change them to black when everything is set.
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
You do not have the required permissions to view the files attached to this post.
- 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
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
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
- 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
The middle monitor still shows a couple of vga bugs... which I've nicknamed Francesco and Fernando
You do not have the required permissions to view the files attached to this post.