VGA output - some examples

[Electroguard]

Thank you sir.
Fan-flippin-tastic.
Then saving as jpg reduced bmp from 600K to 103K.

a$ = a$ + "ScreenDump " + button$("PrintScreen", printscreen) + "<br>"

PrintScreen:
vga.stop
vga.save "/screen.bmp"
pause 1000
vga.start
return

screen.jpg

[Fernando Perez]

to whom it May concern:

Code: [Local Link Removed for Guests]

' Annex32-S3 CAN DMT VGA 1.51.1 qio opi LFS 
vga.delete
vga.init 2
vga.fill tft.rgb(160,82,45)
vga.show

tft.loadFont "/fonts/FreeSansBold9pt7b.bin", 10
tft.loadFont "/fonts/verdana6pt7b.bin", 11
vga.text.color black
vga.text.align 4
vga.text.draw "VGA: 24 color names", 320, 35, 10
vga.text.draw "Annex32-S3 CAN DMT VGA 1.51.1 qio opi LFS", 320, 65, 10

i = 1 : fill = 0
for y = 140 to 300 step 80
  for x = 8 to 565 step 78
    READ c$
    command "fill = tft.color(" + c$ + ")"
    vga.rect x, y, 76, 76, fill, 1
    if i < 7 then command "vga.text.color white" else command "vga.text.color black"
    vga.text.draw c$, x+38, y+40, 11
    incr i
  next x
next y  

vga.show
' vga.save "/screenDump.bmp"

END

DATA "black","navy","maroon","purple","blue","violet","magenta","red"
DATA "darkgreen","darkgrey","darkcyan","olive","brown","green","greenyellow","orange"
DATA "gold","yellow","cyan","skyblue","lightgrey","silver","pink","white"   

image.png

Code: [Local Link Removed for Guests]

' Annex32-S3 CAN DMT VGA 1.51.1 qio opi LFS

up=7 : dwn=6 : lft=5 : rht=4
pin.mode up,  input, pullup
pin.mode dwn, input, pullup
pin.mode lft, input, pullup
pin.mode rht, input, pullup

vga.delete
vga.init 2
'background = tft.rgb(160,82,45) 
background = tft.rgb(255,255,255) 
vga.fill background
vga.show

tft.loadFont "/fonts/verdana6pt7b.bin", 11
vga.text.color black
vga.text.align 4
vga.text.draw "256 color VGA", 200, 18, 11

vga.gui init 1
color$ = ""
idColor = vga.gui textLine(400, 8, 158, 25, color$, 11, black, background, olive, 3, 4) 

width = 37 : height = 25
fill = 0 : rgb$ = ""

for row = 1 to 16
  for col = 1 to 16
    READ c$
    gosub rgb
    command "fill = tft.rgb("+rgb$+")"    
    vga.rect (col*(width+1))-28, (row*(height+1))+14, width, height, fill, 1  
  next col
next row

row = 1 : lastRow = 0
col = 1 : lastCol = 0
vga.rect (col*38)-29, (row*26)+13, width+2, height+2, blue
vga.show

while 1

  if pin(up)  = 0 then decr row
  if pin(dwn) = 0 then incr row
  if pin(rht) = 0 then incr col
  if pin(lft) = 0 then decr col

  if row < 1 then row = 1
  if row > 16 then row = 16
  if col < 1 then col = 1
  if col > 16 then col = 16
      
  if (lastCol<>col) OR (lastRow<>row) then
    vga.rect (lastCol*38)-29, (lastRow*26)+13, width+2, height+2, background  
    vga.rect (col*38)-29, (row*26)+13, width+2, height+2, blue

    RESTORE
    for i = 1 to col*row
      read c$
    next i
    gosub rgb
    color$ = "tft.rgb("+rgb$+")"
    vga.gui setText idColor, color$
    vga.gui refresh   
    vga.show
    lastCol = col : lastRow = row
    pause 250
  endif
 
wend  
    
END

rgb:
  rgb$ = str$(val("&H" + left$(c$, 2)))
  rgb$ = rgb$ + "," + str$(val("&H" + mid$(c$, 3, 2)))
  rgb$ = rgb$ + "," + str$(val("&H" + right$(c$, 2)))
return

DATA "FF0000","FF3300","CC3300","FF9999","FFCCCC","990033","990000","FF3333"
DATA "CC3333","FFCC99","CC0066","993300","FF0033","CC0033","FF9966","FF6699"
DATA "060000","000000","CC0000","663333","990066","330000","66FF00","33FF33"
DATA "66FF66","66FF00","99FF99","CCFFCC","00FF00","00CC00","009900","006600"
DATA "003300","00CC00","009900","006600","003300","009900","006600","66FF00"
DATA "009900","00FFFF","00FFFF","3333FF","008080","6666FF","9999FF","0000FF"
DATA "33FFFF","66FFFF","99FFFF","CCFFFF","CCCCFF","0000CC","000099","000099"
DATA "CCCCFF","000066","000033","000099","00CCCC","009999","006666","003333"
DATA "FFFF33","FFFF66","FFFF99","FFFFCC","CCCC00","999900","666600","333300"
DATA "FF33FF","FF66FF","FF99FF","FFCCFF","CC00CC","990099","660066","330033"
DATA "7D337D","7D667D","7D997D","7DCC7D","E100E1","CC00CC","AF00AF","990099"
DATA "FF3300","FF3333","FF3366","FF3399","FF33CC","FF33FF","FF6600","FF6633"
DATA "FF6666","FF6699","FF66CC","FF66FF","FF9900","FF9933","FF9966","FF9999"
DATA "FF99CC","FF99FF","FFCC00","FFCC33","FFCC66","FFCC99","FFCCCC","FFCCFF"
DATA "FFFF00","FFFF33","FFFF66","FFFF99","FFFFCC","FFFFFF","CC0000","CC0033"
DATA "CC0066","CC0099","CC00CC","CC00FF","CC3300","CC3333","CC3366","CC3399"
DATA "CC33CC","CC33FF","CC6600","CC6633","CC6666","CC6699","CC66CC","CC66FF"
DATA "CC9900","CC9933","CC9966","CC9999","CC99CC","CC99FF","CCCC00","CCCC33"
DATA "CCCC66","CCCC99","CCCCCC","CCCCFF","CCFF00","CCFF33","CCFF66","CCFF99"
DATA "CCFFCC","CCFFFF","990000","990033","990066","990099","9900CC","9900FF"
DATA "993300","993333","993366","993399","9933CC","9933FF","996600","996633"
DATA "996666","996699","9966CC","9966FF","999900","999933","999966","999999"
DATA "9999CC","9999FF","99CC00","99CC33","99CC66","99CC99","99CCCC","99CCFF"
DATA "99FF00","99FF33","99FF66","99FF99","99FFCC","99FFFF","666600","666633"
DATA "666666","666699","6666CC","6666FF","669900","669933","669966","669999"
DATA "6699CC","6699FF","66CC00","66CC33","66CC66","66CC99","66CCCC","66CCFF"
DATA "66FF00","66FF33","66FF66","66FF99","66FFCC","66FFFF","336600","336633"
DATA "336666","336699","3366CC","3366FF","339900","339933","339966","339999"
DATA "3399CC","3399FF","006600","006633","006666","006699","0066CC","0066FF"
DATA "009900","009933","009966","009999","0099CC","0099FF","33CC00","33CC33"
DATA "33CC66","33CC99","33CCCC","33CCFF","00CC00","00CC33","00CC66","00CC99"
DATA "00CCCC","00CCFF","33FF00","33FF33","33FF66","33FF99","33FFCC","33FFFF"
DATA "00FF00","00FF33","00FF66","00FF99","00FFCC","00FFFF","663300","663333"
DATA "663366","663399","6633CC","6633FF","660000","660033","660066","660099"
DATA "6600CC","6600FF","333300","333333","333366","333399","3333CC","3333FF"
DATA "003300","003333","003366","003399","0033CC","0033FF","330000","330033"
DATA "330066","330099","3300CC","3300FF","000000","000033","000066","000099"
DATA "0000CC","0000FF"

https://youtu.be/DSVzA6ZQp2Y

[Fernando Perez]

I have tried to create a subroutine, as universal as possible, to render forms on VGA screen.
In the end, I've gotten so wrapped up that I don't even understand my code very well myself.
But if after 6 or 7 hours of work to adapt it to your needs, it works for any of you, I am satisfied.

Code: [Local Link Removed for Guests]

' =============================================================================================================
' DECLARE SUB createForm(x, y, wField, height, leading, cLabel, bLabel, cField, bField, alignL, alignF, alignS)
' =============================================================================================================
' wField = field width, height = height of all items
' cLabel, bLabel = color foreground and background of labels and suffixes
' cField, bField = color foreground and background of fields
' alignL, alignF, alignS = alignment of labels, fields and suffixes

' Alignement keyword
ALIGN_TOP_LEFT  = 0
ALIGN_TOP_MID   = 1
ALIGN_TOP_RIGHT = 2
ALIGN_MID_LEFT  = 3
ALIGN_MID_MID   = 4
ALIGN_MID_RIGHT = 5
ALIGN_BOT_LEFT  = 6
ALIGN_BOT_MID   = 7
ALIGN_BOT_RIGHT = 8

mDebug = 1  ' 1 = For debug with frames

' Define global variables
OPTION.BASE 1
fields = 7
dim gField(fields)
dim field$(fields)
dim label$(fields) = "Temperature","Pressure","Humidity","Clouds","Rain","Wind","Snow"
dim suffix$(fields) = "/grado1.bmp","mBar","/percent.bmp","/percent.bmp","mm/h","km/h","cm"

' Define colors to use
background = tft.rgb(3,2,1)
black = tft.color(black)
white = tft.color(white)
yellow= tft.color(yellow)
if mDebug then cFrame = tft.color(olive) else cFrame = background ' Frame for debug

' VGA values ------
vga.delete
vga.init 2
vga.fill background
vga.show

' Create GUI objects
vga.gui init fields * 3

' Display form
createForm 50, 50, 40, 20, 30, yellow, background, black, white, ALIGN_TOP_RIGHT, ALIGN_TOP_RIGHT, ALIGN_BOT_LEFT

' Test form
while 1
  updateFields fields
  displayFields gField()
  pause 10000
wend

END

' ---------------------------------------------------------------------------------------------------
SUB createForm(x, y, wField, height, leading, cLabel, bLabel, cField, bField, alignL, alignF, alignS)
' ---------------------------------------------------------------------------------------------------
LOCAL row, yPos, wLabel, wSuffix, i, pitch

  tft.loadfont "/fonts/verdana7pt7b.bin", 10 
  tft.loadfont "/fonts/verdana9pt7b.bin", 11 
  tft.loadfont "/fonts/E4_20178pt7b.bin", 12

  for i = 1 to fields
    if wLabel<len(label$(i)) then wLabel=len(label$(i))
    if (wSuffix<len(suffix$(i))) AND (right$(suffix$(i),4)<>".bmp") then wSuffix=len(suffix$(i))
  next i
  pitch = 11.28
  wLabel = wLabel * pitch
  wSuffix = wSuffix * pitch

  yPos=y 

  for row = 1 to fields
    vga.gui textLine x, yPos, wLabel, height, label$(row), 11, cLabel, bLabel, cFrame, alignL, 2
    gField(row) = vga.gui textLine x+wLabel+4, yPos, wField, height, field$(row), 12, cField, bField, cFrame, alignF, 2
    if right$(suffix$(row), 4) = ".bmp" then
      vga.image suffix$(row), x+wLabel+wField+8, yPos
    else     
      vga.gui textLine x+wLabel+wField+8, yPos, wSuffix, height, suffix$(row), 10, cLabel, bLabel, cFrame, alignS, 2
    endif
    incr yPos, leading 
  next row
  
  vga.gui refresh
  vga.show

END SUB

' -------------------------
SUB displayFields(gField())
' -------------------------
LOCAL row
  for row = 1 to fields
    vga.gui setText gField(row), field$(row)
  next row  
  vga.gui refresh
  vga.show
END SUB

' --------------------
SUB updateFields(void)
' --------------------
  field$(1) = str$((rnd(500)/10), "%2.1f") ' Temperature
  field$(2) = str$(rnd(75)+970)            ' Pressure
  field$(3) = str$(rnd(100))               ' Humidity
  field$(4) = str$(rnd(100))               ' Clouds
  field$(5) = str$(rnd(60))                ' Rain
  field$(6) = str$(rnd(120))               ' Win
  field$(7) = "0"                          ' Snow
END SUB  

Formulario.zip

formulario.png

[Fernando Perez]

Cicciocb wrote
Fernando, I still don't understand why you don't try to change the position/dimension of the image on the monitor; perhaps your monitor doesn't have the adjustment? Maybe you've forgotten, but that was the norm back when our CRT monitors operated on VGA (a long time ago now).

Because I really don't need it. On most of my monitors, the automatic image adjustment does its job perfectly and on one or two of them, the differences are at most one or two pixels. It's lazy to adjust anything.
I suggest to those who are already doing it or are going to experiment with VGA, upload this code:

Code: [Local Link Removed for Guests]

' Annex32-S3 CAN DMT VGA 1.51.1 qio opi LFS 
vga.delete
vga.init 2
vga.fill black
vga.pixel 0,0,yellow
vga.pixel 0,479,yellow
vga.pixel 639,0,yellow
vga.pixel 639,479,yellow
vga.show
end

On the monitor that I have on right now, 4 yellow dots are perfectly visible, one in each corner of the screen.
If I enter the OSD menu, I see that the system has automatically shifted to 29 the horizontal adjustment.

image.png

It seems perfect as it is.

[cicciocb]

Fernando,
in fact you don't need any particular image.
The image that is shown by default when you enable the VGA with VGA.INIT or VGA.SETUP has been done for that purpose.
The full red square must be visible and represents the limits of the screen

image.png

[Fernando Perez]

TRUE. She hadn't seen him. The thing is that automatically, I put vga.fill xxxx as soon as I start a program.

[RonS]

Thanks to everyone for sharing their experiences - meanwhile my setup is also running - I use an older project for that.
My pin assignment is a bit different - I only used one side of the ESP - it would be nice if you could set that in setup/config

DSCN0547.JPG

DSCN0548.JPG

[Electroguard]

I have used 'Inline' which uses consecutive gpio numbering on only one side, while still offering 0v and giving a spare gpio for operating a relay.
'Saddle' is firmer across both sides of only one end, again giving access to 0v and a spare gpio for operating a relay.
The relay is used to switch a modified cheapo 2 input KVM switch between Gate Cam cctv and a periodically displayed Annex VGA Time/Date/Weather 'smartclock', which can also be remotely switched by a web page button.

The original 3 Red and 3 Green resistors are fine, but I needed to be able to adjust the main Blue to get optimum White.

I include various pinouts in all the VGA scripts and just uncomment the one I need.
' VGA.PINOUT R0, R1, R2, G0, G1, G2, B0, B1, HSYNC, VSYNC
' vga.pinout 17,18,8, 12,13,14, 21,47, 1,2 'old
' vga.pinout 9,10,11, 12,13,14, 15,16, 17,18 'Inline
vga.pinout 9,10,11, 12,13,14, 21,47, 45,46 'Saddle

saddle.jpg

N16R8vgaSaddle.jpg

N16R8vgaInline.jpg

[RonS]

According to the manual, this command: vga.image file$, should bring an image to the screen, I have the data /pic files from the example.zip - but I only get a black screen, the only image that is displayed is the "aircraft" ́.jpg" but with poor quality.
what am I doing wrong ??

Code: [Local Link Removed for Guests]

Annex32-S3 CAN DMT VGA 1.51.1 qio opi LFS
'VGA.PINOUT R0, R1, R2, G0, G1, G2, B0, B1, HSYNC, VSYNC
vga.pinout 14,13,12,3,8,18,6,5, 4,9

vga.delete
vga.init 2 ' VGA 640x480
vga.fill black
vga.show

x = 0 : y = 0

pause 1000

vga.image "/img/car1.bmp", x, y
pause 100
vga.show
wait

[Fernando Perez]

RonS, before getting into the VGA topic, a clarification on how to include code in your messages.

You must press the </> icon. I see that he has done well. Two tags will appear, [code] y [/code], enclosed in brackets. In the first tag, you must include the annex parameter so that the highlighter is displayed in syntax colors. That is, the first label should look like this: [code=annex]. This is not just for aesthetics, but because it makes it much easier for your readers to copy your code simply by clicking the "Copy" link that will appear in your code.
If your code is very long, you can enclose it in a vertically scrolling window. It's very simple, before pressing the </> icon, press the "height" button. Two [height] [/height] tags will appear, enclosed in brackets. In the first one you can specify the height that your window will have. Go between them and press the code icon. In short, it should look like this:

[height=350][code=annex]
Your code here.....
[/code][/height])