VGA out for ESP32-S3 - New feature to test

All about the VGA for the ESP32-S3
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, I have tested my sprite viewer program with the bugs.bmp image from your examples.
First remove from the original image the white horizontal line on the right side, because if not, it was seen in the last sprites of each row.
But I was surprised that the legs of each bug remained on the screen when changing the sprite, superimposed on each new image.
I have solved it by painting a black rectangle the size of the sprite (line 23).

Code: [Local Link Removed for Guests]

vga.delete
vga.init 2
vga.fill black

' 619x264 px image with 21 sprites in 3 rows and 7 columns:
vga.spriteSheet "/img/bugs1.bmp"
row = 3 ' number of sprites in each colum
col = 7 ' number of sprites in each row

w = 88  ' sprite width in pixels
h = 87  ' sprite height in pixels
x0 = 0  ' top left x coordinate of the first sprite
y0 = 0  ' top left y coordinate of the first sprite
tH = 1  ' horizontal separation between sprites in  pixels 
tV = 1  ' vertical separation between sprites in pixels
pause 5000

' DEMO:
x=275 : y=150

while 1
  for icon = 0 to (row*col)-1
    vga.rect x, y, w, h, black, 1
    displayIcon icon, x, y
    pause 1000
  next icon
wend

END

' --------------------------------
SUB displayIcon(icon, x, y)
  xi = (w+tH) * (icon MOD col)
  yi = (h+tV) * int(icon/col)
'  wlog xi, yi
  vga.sprite x, y, w, h, xi, yi
  vga.show
END SUB

But what explanation do you have? It only occurs to me that bugs.bmp has a transparent background, but I understood that .bmp files cannot have a transparent background.
bugs1.zip
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: 276 times
Been thanked: 323 times

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

Post by Electroguard »

Real debugging will take out the legs from under all bugs and not leave them a leg to stand on !

Ditto about BMP's, I thought it was only PNG's which allowed transparency, which I don't think are usable - so I converted all my PNG images to black background JPGs for using on a black Fill.


Edit: I had a nice dangling black spider waiting todo some debugging... but Irfanview converted him from transparent PNG to black background JPG so all that was left was his eyes, and was no longer possible to discern him from the background.

spider.png
You do not have the required permissions to view the files attached to this post.
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 »

[Local Link Removed for Guests] wrote: [Local Link Removed for Guests]Thu Aug 03, 2023 12:11 pm Francesco, I have tested my sprite viewer program with the bugs.bmp image from your examples.
First remove from the original image the white horizontal line on the right side, because if not, it was seen in the last sprites of each row.
But I was surprised that the legs of each bug remained on the screen when changing the sprite, superimposed on each new image.
I have solved it by painting a black rectangle the size of the sprite (line 23).

Code: [Local Link Removed for Guests]

vga.delete
vga.init 2
vga.fill black

' 619x264 px image with 21 sprites in 3 rows and 7 columns:
vga.spriteSheet "/img/bugs1.bmp"
row = 3 ' number of sprites in each colum
col = 7 ' number of sprites in each row

w = 88  ' sprite width in pixels
h = 87  ' sprite height in pixels
x0 = 0  ' top left x coordinate of the first sprite
y0 = 0  ' top left y coordinate of the first sprite
tH = 1  ' horizontal separation between sprites in  pixels 
tV = 1  ' vertical separation between sprites in pixels
pause 5000

' DEMO:
x=275 : y=150

while 1
  for icon = 0 to (row*col)-1
    vga.rect x, y, w, h, black, 1
    displayIcon icon, x, y
    pause 1000
  next icon
wend

END

' --------------------------------
SUB displayIcon(icon, x, y)
  xi = (w+tH) * (icon MOD col)
  yi = (h+tV) * int(icon/col)
'  wlog xi, yi
  vga.sprite x, y, w, h, xi, yi
  vga.show
END SUB

But what explanation do you have? It only occurs to me that bugs.bmp has a transparent background, but I understood that .bmp files cannot have a transparent background.

bugs1.zip
:D
In fact is not really true, the BMP can have a transparent background but, in this case, I cheated a little bit defining a transparent color. I
f you look at the images with an editor (gimp for example) you'll see that the background is always #030201; I defined this as a transparent color for my transparent testing. This means that, in every "spreadsheet" image loaded, the color #030201 will be transparent.
I'll implement a function to freely define this color and also the import of real "transparent" images.

So, in this case, the bugs image has the background defined as #030201 so the background is transparent. :D

For your curiosity :
https://en.wikipedia.org/wiki/BMP_file_format

What is interesting, I'm using the format (16 bits) bmp 1555 (1 bit alpha, 5bits Red, 5bits Green, 5bits Blue) internally but the BMP I'm using are actually in 24 bits.
I'll implement the import of transparent BMP directly in this format 1555 as it is directly supported by Gimp
image.png
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 »

Interesting. And very cunning. I use Windows Paint for quick things and for more elaborate things, for example, quickly selecting the parts of an image that I want to be transparent, the portable Paint.Net. But until now I had always saved the resulting images as PNG.
This opens up more possibilities.
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 for your wisdom and support Francesco - I snuck a peek out of curiosity at the BMP wiki... but didn't make it through the first paragraph.

And thanks for showing your useful displayIcon(icon, x, y) sub Fernando, it let me get your previous sprite example working, which was very helpful.
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'm still studying the VGA issue.
I don't want to use the paging system yet until I understand how the simpler elements, setSprite and drawSprite, work.
But I've run into a syntax error on line 29 of my program. Am I doing something wrong or vga.hideSprite doesn't work in this version?
Thank you.

Code: [Local Link Removed for Guests]

vga.delete
vga.init 2
vga.fill tft.rgb(3,2,1)

row = 3 ' number of sprites in each colum
col = 7 ' number of sprites in each row

w = 88  ' sprite width in pixels
h = 87  ' sprite height in pixels
x0 = 0  ' top left x coordinate of the first sprite
y0 = 0  ' top left y coordinate of the first sprite
tH = 1  ' horizontal separation between sprites in  pixels 
tV = 1  ' vertical separation between sprites in pixels

' 619x264 px image with 21 sprites in 3 rows and 7 columns:
loadSprites "/img/bugs1.bmp"

pause 5000

' DEMO:
while 1
  spriteId = rnd(row*col)
  x = rnd(640-w)
  y = rnd(480-h)
'  wlog sprite, x, y
  vga.drawSprite spriteId, x, y
  vga.show
  pause 1000
'  vga.hideSprite spriteId
wend

END

' -------------------------
SUB loadSprites(file$)
' -------------------------
LOCAL spriteId, xi, yi
  vga.spriteSheet file$ 
  for spriteId = 0 to (row*col)-1
    xi = (w+tH) * (spriteId MOD col)
    yi = (h+tV) * int(spriteId/col)
  ' wlog xi, yi
    vga.setSprite spriteId, w, h, xi, yi
  ' vga.setsprite id,width,height,xBMP,yBMP,[nextFrameX,nextFramey]
  next spriteId
END SUB

By not erasing the bugs and inconsiderately placing one on top of the other, it has helped me to discover that transparency 321 has not been applied to some of these little animals in their entire external space. Normally in the lower parts, as can be seen with a color grabber.
We won't let you pass a single one! :lol: :lol:
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 »

vga.Hidesprite requires 2 arguments :
then spride num and the visibility.

In fact it just define if the sprite must be drawn next time or not, it is just a visibility status.

To remove really the sprite from the image you must use the vga.remosprite but, for that, you must use several pages (ideally 3)
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 »

Talking about multiple pages...
Without really knowing what I've been doing I've hacked the clock example to make it resizable (using minute markings instead of image background).
The intention is to include a small analog clock wherever best on my weather info page (or anything else for that matter).

Both work great by themselves, but your clock example uses voodoo magic with multiple page buffers, whereas my not very sophisticated weather script writes all the static stuff then simply avoids it for updates by using a black rectangle over the old data before writing the new data.

When I try to include the clock with the weather, it all looks great for 1 sec until the update_clock routine splatters over all the weather screen.
I think it must be a matter of writing the static weather and clock graphics to a page, then updating the active weather and clock in their own pages, but I do not understand how to use the buffers and different pages, eg: this gave me indigestion...
buf = (i and 1)
vga.copy 2, buf ' copy the image from the buffer 2 to the buffer buf
vga.WritePage buf' active

It looks like the original saved static screen buffer is being merged (ANDed) with the updated clock buffer, but I don't even know if that is possible

I must get to grips with multiple pages, so is there a fairly easy way to explain how to use buffers for screen updates that won't cause my head to explode ?
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, I understand you. Cicciocb's examples are sometimes somewhat chaotic, but very instructive.
Review this code. Simplified, minimized, and documented everything I could.
It amazes me that the slight scale deviations in the last section are not due to a defect in Annex but to imperfection of the voltmeter drawing.

Code: [Local Link Removed for Guests]

vga.delete
vga.init 2, 3 ' VGA 640x480 and create buffers 0, 1 and 2
vga.fill black
vga.show

x = 50 : y = 50
currentBuffer = 1
backupBuffer = 2

vga.writePage currentBuffer            ' select the page where we are going to write next
vga.image "/img/voltimeter.jpg", x, y
vga.showPage currentBuffer             ' we show it on the screen
vga.copy currentBuffer, backupBuffer   ' copy the image from the buffer 1 to the buffer 2

pause 3000 ' without this pause my monitor skips display steps

for i = 0  to 15 step 0.5
  currentBuffer = 1 - currentBuffer    ' the buffer will be 0 or 1
  vga.copy backupBuffer, currentBuffer ' copy the image from the buffer 2 to the buffer 0 or the buffer 1
  vga.WritePage currentBuffer          ' writes the data to the currently active buffer (0 or 1) 
  vga.needle x+142, y+133, 105, (i*7.07)+127, red, 4
  vga.showPage currentBuffer           ' display active buffer now
  pause 500
next i
voltimeter.zip
https://youtu.be/MvbxSFKoBWM

Greetings.
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: 276 times
Been thanked: 323 times

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

Post by Electroguard »

Firstly, that voltmeter demo is very nice, Fernando,
Secondly, it is maybe easier for you and Francesco to be on the same page cos both your names end with O, whereas my O is lost in the middle somewhere.
Thirdly. I was following your currentBuffer = 1, backupBuffer = 2 page1 and page2 example ok... until page 0 came into it - so I assume it must be similar to referencing arrays, where the first available element is 0, the second is 1 ?

What could really help me is if you could quickly add a temporary label such as "Time: " followed by changing time$ data to your voltmeter, to show how the pages would cope with 2 sources of changing data at different rates.

BTW, I've notice that writing a string of spaces to erase old characters does not work, so it needs a graphical rectangle to be written over the old data, but vga.textalign prevents the x,y coordinates from being related... have you found a workaround for that ?
Post Reply