VGA out for ESP32-S3 - New feature to test

[cicciocb]

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

Fernando, you can use the font editor to easily modify the "%" in the font, instead of use an external image.
It is very easy to do

[Electroguard]

Francesco, what would be the easiest of the VGA examples for me to learn how to start using sprites ?
Not animation complexity - just simple minimal use to integrate into a current program, to pull suitable appropriate sprites from a spritesheet when needed, rather than upload multiple images.
I wish to add Up or Down arrows to show trends of any changed values, ie: red Up arrows when a temperature goes up, etc.

MySymbols.jpg

[cicciocb]

Francesco, what would be the easiest of the VGA examples for me to learn how to start using sprites ?
Not animation complexity - just simple minimal use to integrate into a current program, to pull suitable appropriate sprites from a spritesheet when needed, rather than upload multiple images.
I wish to add Up or Down arrows to show trends of any changed values, ie: red Up arrows when a temperature goes up, etc.


MySymbols.jpg

In fact there are a lot of possibilities, that is a good thing but hard to explain.
I should write a tutorial for that but, in the while, I'll try to do some examples.

edit:
the easiest example is probably cards.bas

[Electroguard]

Thanks, I'll take a look at that later.
In the meantime I pulled an all-nighter (for other reasons) and got 'trends' temporarily working on my vga proof of concept using separate images.

[Fernando Perez]

Robin, if you don't want to complicate your life, use images where the icons are all the same size. I put an example in
[Local Link Removed for Guests]
which I see no one has downloaded.
For a case as specific as your arrows, why don't you study this file?

Code: [Local Link Removed for Guests]

' DECLARE SUB arrow(x, y, w, h, color, up)
' up = 1, UP arrow; up = 0, DOWN arrow
' ===========================================

prevX = 1 : prevY = 1 : prevW = 1 : prevH = 1

red = tft.color(red)
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)
azulReal = tft.rgb(65,105,225)

vga.delete
vga.init 2
vga.fill black
vga.show

pause 5000  ' Waiting for my monitor to turn on

' DEMO:
while 1
  x=220 : y=30 : w = 140 : h = 280
  arrow x, y, w, h, azulReal, 1
  pause 6000
  arrow x, y, w, h, azulReal, 0
  pause 6000

  x=400 : y=150 : w = 36: h = 70 
  arrow x, y, w, h, orange, 1
  pause 3000

  x=50 : y=220 : w = 136: h = 225 
  arrow x, y, w, h, red, 0
  pause 3000

  x=150 : y=22 : w = 18: h = 40 
  arrow x, y, w, h, green, 1
  pause 3000
 
  x=325 : y=10 : w = 180: h = 320 
  arrow x, y, w, h, blue, 0
  pause 3000
 
  vga.fill black
  vga.show
  pause 3000
wend

END

' -----------------------------
SUB arrow(x, y, w, h, color, up)
' -----------------------------
LOCAL x1, x2, x3, xR, y1, y2, y3, yR, wR, hR
' x1, y1 = top for up = 1; bottom for up =0
' x2 , y2 = left and x3 , y3 = right for both

  ' Delete previous arrow:
  vga.rect prevX, prevY, prevW+2, prevH+2, black, 1
  
  ' Calculate new arrowhead:
  x1 = x + w/2   
  x2 = x
  x3 = x + w
  
  if up then y1 = y else y1 = y + h
  y2 = cint(((w*1.732)/2)+0.5)
  if up then y2 = y2 + y else y2 = y1 - y2
  y3 = y2

  ' Draw arrowhead:
  vga.triangle x1, y1, x2, y2, x3, y3, color, 1
  
  ' Calculate new arrow shaft:
  xR = cint((x3-x2)/4 + x + 0.5)
  wR = w/2
  if up then yR = y3 + 1 else yR = y
  if up then hR = h - (y2-y1) else hR = h - (y1-y2)

  ' Draw arrow shaft
  vga.rect xR, yR, wR, hR, color, 1 
  vga.show
  
  ' Preserve frame data
  prevX=x : prevY=y : prevW=w : prevH=h      

'  gosub Test ' Uncomment for test   
         
END SUB


' -------------------------------------------------------
Test:
  if color = blue then fColor = orange else fColor = blue 
  for i = prevX to prevX + prevW + 1 step 3
    vga.line i, y, i, y+h, fColor
  next i
  vga.show
return

[Electroguard]

Thanks Fernando, and I don't know how I missed your post you mentioned, cos it looks to be just what I wanted.
I will load and run your examples later and see what you've been doing, but I have a puzzle to resolve first.

Yeah, I created the sheet with arrow size ratios and different suffix fonts just as a quick source of comparison to crop and resize from, so they were much too big to be used as my spritesheet.

The trend arrows are already working nicely as separate images, but I will eventually rewrite using sprites and worksheets, cos this has just been proof of concept to explore the capabilities of Francesco's VGA... which I am hugely impressed with.

The arrows have extended black tail ends so that they appear slightly offset in the direction that the arrow is pointing to make it easier at a quick glance. The temperature shows red for hotter or blue for getting cooler, whereas the humidity shows wetter with cyan, drier with pink.
Pressure is yellow for higher, green for lower, but is not showing cos it hasn't changed.
The long date is just a recent addition which I squeezed in at the top to test, but that will be changed.
Eventually I plan another page with big analog clock, and perhaps the date and other info will go there.

BTW, the picture taken with the phone shows the white as white and the cyan as cyan etc, so has very cleverly (or perhaps accidentally) corrected the colours to how they should be, whereas what I actually see on the monitor shows the white as creamy yellow and the cyan as green. Strange.

trends.jpg

Actually doing the arrows proved to be simple, any incoming weather data just selects the relevant image to be displayed, eg...

Humidity:
if (humidity$="") or (trends=0) then hum$="blank34.jpg":h1$="" else if data$>humidity$ then hum$="UpCyanS12.jpg":h1$="&uarr;" else if data$<humidity$ then hum$="DownPinkS12.jpg":h1$="&darr;" else hum$="blank34.jpg":h1$="x"
humidity$=data$
if verbose=1 then wlog "Humidity",humidity$
gosub vgaout
return

[Fernando Perez]

You can try this if you want to use the sprite method.
I have adapted your image so that each sprite measures the same and has the same spacing.

image.png

As a curiosity I will tell you that in the image I have filled one of the arrows with orange, but on my monitor I see both this and the truly yellow one as yellow.

Code: [Local Link Removed for Guests]

' Test icons VGA in 640x480
vga.delete
vga.init 2
vga.fill black

' 500x348 px image with 12 sprites in 2 rows and 6 columns:
vga.spriteSheet "/img/Arrow.bmp"
row = 2 ' number of sprites in each colum

' 502x523 px image with 18 sprites in 3 rows and 6 columns:
'vga.spriteSheet "/img/Arrow1.bmp"
'row = 3 ' number of sprites in each colum

w = 80  ' sprite width in pixels
h = 171 ' sprite height in pixels
x0 = 0  ' x top left coordinate of the first sprite
y0 = 0  ' y top left coordinate of the first sprite
tH = 4  ' horizontal separation between sprites: 4 pixels 
tV = 5  ' vertical separation between sprites: 5 pixels
col = 6 ' number of sprites in each row

' DEMO:
pause 5000  'Pause for my monitor to give signs of life
x=275 : y=150

while 1
  for icon = 0 to (row*col)-1
    displayIcon icon, x, y
    pause 1500
  next icon
wend

END

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

Note: I have modified small details of the previous program.

Arrow.zip

Arrow1.zip

[Electroguard]

What version of firmware are you using Fernando, cos I get a syntax error for col = 6 on line 17.

err.jpg

[Fernando Perez]

image.png

Try changing the name of the col variable to something else. Can it be a reserved word?
For mass search and replace, the binoculars icon works quite well.

The row variable is not needed for this program. You can remove it, since this SUB works with any number of rows.
Verify it with this BMP, changing the name to Arrow1.bmp

Arrow1.zip

[Electroguard]

Is the same version number but different name, so I have upgraded so we are on the same page.
col variable not the problem anyway, it is not recognised by syntax highlighter as a reserved word (nor obviously for you) and is not even referenced anywhere else in that snippet - but the user sub displayicon which is referenced, is not actually present (I suspect it was below the END statement).
But no matter, I appreciate you shedding light on the use of spritesheets even if the colour hues are slightly different, so gracias amigo,

Speaking of colours, I am going to try passing different colour variables for eg: title, headers, info, border etc to a listbox$ colour selection subroutine for selecting different colours to pass back for those different variables... that should allow the same colour change user sub to change any items colour in real time on the fly - Annex is beautiful.