VGA output - some examples

All about the VGA for the ESP32-S3
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 274 times
Been thanked: 322 times

Re: VGA output - some examples

Post by Electroguard »

when I uncheck the "Full Path" and "Recursive" boxes of the "Save to Zip", it actually downloads a zip with all the files in the current directory, but removing the first letter of the name of each file.
Thanks for that important heads-up Fernando... and there was me feeling smug about salvaging a failed vga upgrade to a zip backup, then planning to delete everything - phew, what a near miss.
User avatar
cicciocb
Site Admin
Posts: 2055
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1354 times
Contact:

Re: VGA output - some examples

Post by cicciocb »

[Local Link Removed for Guests] wrote: [Local Link Removed for Guests]Sun Aug 20, 2023 1:47 pm Been through everything several times, tried Falkon and Firefox browsers, even renamed to vgaout to exactly match example, but no mDNS.
Page is obviously there, but no name resolution, so perhaps is only a windows thing.
weatherConf.jpg
weatherno.jpg
weatherEd.jpg
Yes, probably is linked to your configuration as it should work with Linux but probably your distribution do not enable avahi.

I can confirm that it works with ubuntu
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 274 times
Been thanked: 322 times

Re: VGA output - some examples

Post by Electroguard »

Yes, I suspect you are right Francesco, I found mention of 'sudo apt install avahi-sysvinit-compat' when upgrading to MX23, but avahi not recognised by my current MX21. I will be upgrading when my current situation gets sorted.
BTW, does the website updater work with chromIUM on your ubuntu ?
User avatar
cicciocb
Site Admin
Posts: 2055
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1354 times
Contact:

Re: VGA output - some examples

Post by cicciocb »

[Local Link Removed for Guests] wrote: [Local Link Removed for Guests]Mon Aug 21, 2023 2:13 pm Yes, I suspect you are right Francesco, I found mention of 'sudo apt install avahi-sysvinit-compat' when upgrading to MX23, but avahi not recognised by my current MX21. I will be upgrading when my current situation gets sorted.
BTW, does the website updater work with chromIUM on your ubuntu ?
Yes, even better than on windows :D
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 output - some examples

Post by Fernando Perez »

This program is by no means finished, but I can't resist the temptation to upload it so you can see the progress I'm making with the GUIs, the text.draw and the align. Activating the mDebug variable to see the frames has helped me a lot to understand it.
It remains to debug the code a lot and insert the functions to connect with the openweathermap.org API. I don't think it's very difficult because I already have the API queries and the JSON decoding working fine even in ESP8266. I use API 2.5, not 3.0.
The worst thing will be setting up the entire system to save the climatic values of the last twelve hours and see the evolution. I guess I'll use arrays.

Code: [Local Link Removed for Guests]

mDebug = 0  ' 1 = debug with frames

' Declare global variables ------------
colon = 0 : today = 0
seconds = 0
tenMinutes = 0 : lastTenMinutes = 0

curDate$ = "" : curTime$ = ""
iconWeather = 0 : iconWind = 0
temp$="" : description$ = "" : trend$ = ""

OPTION.BASE 1
dim month$(12) = "enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"
dim weekDay$(7) = "Lunes","Martes","Miercoles","Jueves","Viernes","Sabado","Domingo"
dim remap(7) = 6, 7, 1, 2, 3, 4, 5
dim label$(6) = "Pressure","Humidity","Clouds","Rain","Wind","Snow"
dim unit$(6) = "mBar", "","","mm/h","km/h","cm"

dim gBar(12)
dim bar(12)
dim gField(6)
dim field$(6)

' VGA values --------------------------
vga.delete
vga.init 2
vga.text.color yellow
background = tft.rgb(3,2,1)
vga.fill background
 
tft.loadfont "/fonts/FreeMonoBold12pt7b.bin", 10
tft.loadfont "/fonts/FreeMonoBold18pt7b.bin", 11
tft.loadfont "/fonts/FreeMonoBold24pt7b.bin", 12 
tft.loadfont "/fonts/E4_201714pt7b.bin", 13
' Also, these fonts are used:
tft.loadfont "/fonts/FreeMono9pt7b.bin", 12

' Frames for debug --------------------
if mDebug then cFrame = tft.color(olive) else cFrame = background

' Create GUI objects ------------------
vga.gui init 25

' guiId = gui.textline(x,y,width,height,"text"[,font][,color_text][,color_back][,color_frame][,alignment][,margin])
gDate = vga.gui textLine(10, 12, 480, 23, curDate$, 10, yellow, background, cFrame, ALIGN_TOP_MID)
gTime = vga.gui textLine(500, 1, 118, 41, curTime$, 11, yellow, background, cFrame, ALIGN_MID_MID)
gTemp = vga.gui textLine(120, 60, 120, 60, temp$, 12, yellow, background, cFrame, ALIGN_MID_MID) ' Temperature
gTrend = vga.gui textLine(250, 235, 130, 30, trend$, 12, white, background, cFrame, ALIGN_MID_MID)

' Stamp labels, fields and units ------
tft.loadfont "/fonts/FreeMono9pt7b.bin", 12
vga.text.font 12
x = 510 : y = 60 : offset = 77
vga.image "/img/percent.bmp", x+offset, y+47
vga.image "/img/percent.bmp", x+offset, y+87
for i = 1 to 6
  vga.text.align ALIGN_MID_RIGHT
  vga.text.draw label$(i), x, y+13
  gField(i) = vga.gui textLine(x+10, y, 62, 31, field$(i), 13, black, white,cFrame, ALIGN_TOP_RIGHT, 2)
  vga.text.align ALIGN_MID_LEFT
  vga.text.draw unit$(i), x+offset, y+13
  incr y, 40
next i

' gui.progressBar(x,y,width,height,value [,orientation] [,color_set] [,color_back] [,color_frame] )
xH = 40 : yH = 170
vga.rect xh-20, yH-10, 380, 135, blue
for i = 1 to 12
  gBar(i) = vga.gui progressBar(xH, yH, 10, 120, bar(i), 1, red, background, cFrame) 
  incr xH, 15
next i

vga.text.align ALIGN_MID_MID
vga.text.draw "Evolution in the last", 315, 190, 1
vga.text.draw "twelve hours of the", 315, 220, 1

gDetails = vga.gui textLine(20, 333, 600, 36, description$, 12, black, darkgrey, orange, ALIGN_BOT_RIGHT) 

vga.line 5, 48, 625, 48, cyan
vga.line 5, 305, 625, 305, cyan

vga.text.font 12
vga.text.align 4
vga.text.color white
vga.text.draw "How is the weather now?", 317, 318 
vga.line 5, 380, 625, 380, cyan

timer0 1000, displayColon

gosub displayDate
gosub displayTime
gosub test

while 1

  seconds = val(right$(time$, 2)) 
  ' Every minute updates the clock just once
  if seconds = 0 then gosub displayTime

  ' Every fifteen seconds updates the test
  if seconds MOD 15 = 0 then gosub test
    
  ' Every 10 minutes update weather data just once
  tenMinutes = val(mid$(time$, 4, 2))
  if ((tenMinutes MOD 10) = 0) AND (tenMinutes <> lastTenMinutes) then gosub updateMeteo

  ' Every 24 hours update the calendar just once
  hour = val(left$(time$, 2)) + val(mid$(time$, 3, 2)) + val(right$(time$, 2))
  if hour = 0 then gosub displayDate 
  
wend

END 

' -------------------------------------
test:
  iconWeather = rnd(15)
  iconWind = rnd(8)
  temp$ = str$((rnd(500)/10), "%2.1f") ' Temperature
  field$(1) = str$(rnd(75)+970)        ' Pressure
  field$(2) = str$(rnd(100))           ' Humidity
  field$(3) = str$(rnd(100))           ' Clouds
  field$(4) = str$(rnd(60))            ' Rain
  field$(5) = str$(rnd(120))           ' Win
  field$(6) = "0"                      ' Snow
  
  for i = 1 to 12
    bar(i) = rnd(100)
    vga.gui setValue gBar(i), bar(i)
  next i  

  tft.loadfont "/fonts/FreeMono9pt7b.bin", 12
  vga.gui setText gTrend, "Temperature"
  vga.gui refresh
  
  description$ = "Noche despejada y calurosa"      
  
  gosub updateMeteo
  gosub updateFields
  gosub updateForecast

  pause 1001
return


' -----------------------------
displayDate:
  dateLetter date$, curDate$
  vga.gui setText gDate, curDate$
  vga.gui refresh
  vga.show
  pause 1001
return

' -----------------------------
displayTime:
  vga.gui setText gTime, left$(time$, 5)
  vga.gui refresh
  vga.show
return

' -------------------------------------
displayColon:
  colon = 1 - colon
  if colon then
    vga.circle 559, 20, 2, yellow, 1
    vga.circle 559, 31, 2, yellow, 1
  else
    vga.circle 559, 20, 2, background, 1
    vga.circle 559, 31, 2, background, 1
  endif      
  vga.show
return

displayTemperature:
  tft.loadfont "/fonts/FreeMonoBold24pt7b.bin", 12
  vga.gui setText gTemp, temp$
  vga.image "/img/grado.bmp", 245, 75
return

' -------------------------------------
SUB displayIcon(iconId, x, y, width, column)
LOCAL xi, yi, height
  height = width  ' square icons
  xi = (iconId MOD column) * width
  yi = (int((iconId/column))*width)
  vga.sprite x, y, width, height, xi, yi
  vga.show
END SUB

' -------------------------------------
updateFields:
  for i = 1 to 6
    vga.gui setText gField(i), field$(i)
  next i  
  vga.gui refresh
  vga.show
return

' -----------------------------
updateMeteo:
  vga.spriteSheet "/img/icons100.bmp"
  displayIcon iconWeather, 10, 50, 100, 5
  gosub displayTemperature
  vga.spriteSheet "/img/viento.bmp"
  displayIcon iconWind, 305, 60, 81, 4
  
  vga.text.font 10
  vga.text.align 4
  vga.text.color black
  vga.text.draw description$, 317, 348 

  lastTenMinutes = tenMinutes
return

' -----------------------------
updateForecast:
  vga.text.color yellow
  tft.loadfont "/fonts/FreeMonoBold9pt7b.bin", 12
  vga.text.font 12
  vga.text.align 4
  vga.spriteSheet "/img/icons50.bmp"
  for x = 20 to 572 step 92
    incr today
    if today = 8 then today = 1
    vga.text.draw weekDay$(today), x+25, 400
    displayIcon rnd(14)+1, x, 410, 50, 5
  next x  
return
 
' -----------------------------
SUB dateLetter(myDate$, result$)
LOCAL day$, nameMonth$, year$, nameDay$
  day$ = str$(val(left$(myDate$, 2))) ' pipsqueak
  nameMonth$ = month$(val(mid$(myDate$,4,2)))
  year$ = "20" + right$(myDate$, 2) ' 
  weekDay myDate$, nameDay$
  result$ = day$ + " " + nameMonth$ + " " + year$ + " (" + nameDay$ + ")"
END SUB

' -------------------
SUB weekDay(myDate$, nameDay$)
LOCAL numDay
  numDay = ((((dateunix(myDate$)-dateunix("01/01/00")))/(24*3600)) mod 7) + 1
  numDay = remap(numDay)
  nameDay$ = weekDay$(numDay)
  today = numDay
END SUB  
VGA_Wheater.zip
https://youtu.be/4a5OGcxxFhg
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: 274 times
Been thanked: 322 times

Re: VGA output - some examples

Post by Electroguard »

Very impressive Fernando... Annex32-S3 VGA allows us to create things of beauty.


Edit - I suspect OCD, cos everything is so neat and tidy - not just the script is neat... even the monitor stand is protected from dust !
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 output - some examples

Post by Fernando Perez »

Robin, I warn you that I started with a mild Obsessive-compulsive disorder and now I am in full Compulsive Hoarding of electronic gadgets. I'm on my way to a complete Diogenes Syndrome.
"When you see your neighbor's beard being shaved, start soaking yours."

I continue to experiment with Francesco's GUIs. It is worth replacing the field labels, which he had drawn with vga.text.draw, by vga.gui textLine, plain, without id. Allows for near-perfect visual adjustment of text positions on the screen.

And now, a question for Cicciocb: I tried to use the vga.gui image and the program crashes completely. What happen?
And a request: Please, don't forget to study the getPixel.color topic, it would save me from using arrays of 640 and 480 elements in a project I'm doing.
User avatar
cicciocb
Site Admin
Posts: 2055
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1354 times
Contact:

Re: VGA output - some examples

Post by cicciocb »

[Local Link Removed for Guests] wrote: [Local Link Removed for Guests]Tue Aug 22, 2023 5:10 pm Robin, I warn you that I started with a mild Obsessive-compulsive disorder and now I am in full Compulsive Hoarding of electronic gadgets. I'm on my way to a complete Diogenes Syndrome.
"When you see your neighbor's beard being shaved, start soaking yours."

I continue to experiment with Francesco's GUIs. It is worth replacing the field labels, which he had drawn with vga.text.draw, by vga.gui textLine, plain, without id. Allows for near-perfect visual adjustment of text positions on the screen.

And now, a question for Cicciocb: I tried to use the vga.gui image and the program crashes completely. What happen?
And a request: Please, don't forget to study the getPixel.color topic, it would save me from using arrays of 640 and 480 elements in a project I'm doing.
I need to check, I haven't yet tested this function
User avatar
Electroguard
Posts: 860
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 274 times
Been thanked: 322 times

Re: VGA output - some examples

Post by Electroguard »

And can you give the syntax of the bmp screensave when it becomes available to use, please.
User avatar
cicciocb
Site Admin
Posts: 2055
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 439 times
Been thanked: 1354 times
Contact:

Re: VGA output - some examples

Post by cicciocb »

VGA save "/file.bmp"
Post Reply