VGA output - some examples
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
Re: VGA output - some examples
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
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
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 output - some examples
to whom it May concern:
https://youtu.be/DSVzA6ZQp2Y
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"
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
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 output - some examples
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.
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
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 output - some examples
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.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).
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
If I enter the OSD menu, I see that the system has automatically shifted to 29 the horizontal adjustment.
It seems perfect as it is.
You do not have the required permissions to view the files attached to this post.
- 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 output - some examples
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
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
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 output - some examples
TRUE. She hadn't seen him. The thing is that automatically, I put vga.fill xxxx as soon as I start a program.
-
- Posts: 115
- Joined: Thu Mar 02, 2023 10:15 pm
- Location: germany
- Has thanked: 64 times
- Been thanked: 23 times
Re: VGA output - some examples
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
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
You do not have the required permissions to view the files attached to this post.
Modules : 3xESP32-Cam MB (Chip"DM ESP32 S" ),AI-Thinker Audio Kit (ES8388), ESP32 Dev Kit with Display
- Electroguard
- Posts: 860
- Joined: Mon Feb 08, 2021 6:22 pm
- Has thanked: 276 times
- Been thanked: 323 times
Re: VGA output - some examples
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' 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
You do not have the required permissions to view the files attached to this post.
-
- Posts: 115
- Joined: Thu Mar 02, 2023 10:15 pm
- Location: germany
- Has thanked: 64 times
- Been thanked: 23 times
Re: VGA output - some examples
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 ??
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
Modules : 3xESP32-Cam MB (Chip"DM ESP32 S" ),AI-Thinker Audio Kit (ES8388), ESP32 Dev Kit with Display
- 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 output - some examples
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])
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])
Last edited by Fernando Perez on Fri Sep 15, 2023 11:07 pm, edited 2 times in total.