TFT and GUI examples
Posted: Fri Aug 13, 2021 10:47 pm
CiccioCB previously created lots of example scripts to demonstrate use of TFT GUI objects, but collectively the graphics for the backgrounds and icons etc are too big for them to all fit in the firmware data zips, so there are actually not many examples currently publicly available at the moment.
That's what this topic is for... a place where the TFT and GUI examples can be published and made available - therefore most of the gui examples will soon be published here as a zip which will include the img and icons folders, after finishing testing for old syntax etc,
This will allow them all to be uploaded to SD in their entirety, or selectively uploaded along with their required graphics.
And of course this could also be a handy place for anybody else to post up any other TFT and GUI examples.
So to get the ball rolling (literally) here is a TFT guiXYball example to demonstrate dual-axis sliders for controlling X and Y axis of Pan & Tilt etc.
Quick slider demo vid... https://youtu.be/PCn1dCwmRWE
The script comments explain how to change from 320 * 240 (default) to 4" 480 * 320 (or other sizes for that matter).
Anything important uses variables for easy 'top-of-the-script' changes, rather than having hard-coded values embedded throughout.
So feel free to experiment with the effects of changing object sizes etc to better suit different screen sizes and orientations.
Some of the variables such as "speed" and xdir and ydir (direction flags) are only needed for an irrelevant ''bouncing ball' triviality and can be removed along with the "paint" branch.
Quick bouncing ball demo... https://youtu.be/mtkn9d4eLOc
That's what this topic is for... a place where the TFT and GUI examples can be published and made available - therefore most of the gui examples will soon be published here as a zip which will include the img and icons folders, after finishing testing for old syntax etc,
This will allow them all to be uploaded to SD in their entirety, or selectively uploaded along with their required graphics.
And of course this could also be a handy place for anybody else to post up any other TFT and GUI examples.
So to get the ball rolling (literally) here is a TFT guiXYball example to demonstrate dual-axis sliders for controlling X and Y axis of Pan & Tilt etc.
Quick slider demo vid... https://youtu.be/PCn1dCwmRWE
The script comments explain how to change from 320 * 240 (default) to 4" 480 * 320 (or other sizes for that matter).
Anything important uses variables for easy 'top-of-the-script' changes, rather than having hard-coded values embedded throughout.
So feel free to experiment with the effects of changing object sizes etc to better suit different screen sizes and orientations.
Some of the variables such as "speed" and xdir and ydir (direction flags) are only needed for an irrelevant ''bouncing ball' triviality and can be removed along with the "paint" branch.
Quick bouncing ball demo... https://youtu.be/mtkn9d4eLOc
Code: [Local Link Removed for Guests]
'GUI Pan & Tilt demo - Electroguard - developed on Annex32 1.43.5
'Originally intended as X and Y axis slider and progress bar demo for 320 * 240 TFT touchscreen
'Uses variables so that most aspects can be easily changed, eg: for 4" TFT set xres=480 and yres=320
'Sliders can be Dragged & Dropped, or touched anywhere on their line to jump there
'Added a moving dot just to illustrate an example of dual axis control
'Got bored with the dot, so made it a pointless bouncing ball just for the hell of it (un-comment 'timer0 100, paint)
'touch.calib 'only needs doing once if TFT screen or orientation is changed '
gui.init 10, 0
xres=320: yres=240 'TFT screen size
speed=15 'bouncing ball speed if timer is enabled
xdir=1: ydir=1 'direction of bouncing ball 0=reducing, 1=increasing
xmag=2.2: ymag=1.4 'x & y scaling factors
xcentre = xres/2 : ycentre = yres/2: '
x=xcentre: y=ycentre 'centre of screen
dia=10: colour=tft.rgb(0,255,0) 'set dot size and colour
tft.circle x, y, dia, colour, 1
sh=36 'slider button height (gui.setstyle uses different scaling so has been hardcoded)
st=sh 'slider tick size
sm=sh/2 'slider margin
s1w=220 'width (length) of x axis slider, can be increased or decreased as wished
s1x=(xres/2)-(s1w/2)
s1y=yres-sh
sld1=gui.slider s1x, s1y, s1w, sh, 50, 0
gui.setEvent sld1, 3, slider1
Gui.SetStyle sld1, 14, 1, 10
s2w=160 'width (length) of y axis slider, can be increased or decreased as wished
s2x=xres-sh
s2y=(yres/2)-(s2w/2)
sld2=gui.slider s2x, s2y, sh, s2w, 50, 1
gui.setEvent sld2, 3, slider2
Gui.SetStyle sld2, 14, 1, 10
ph=24 'slider button height
pm=4 'progress bar margin
p1w=150
p1x=(xres/2)-(p1w/2)
p1y=pm
prg1=gui.progressbar p1x, p1y, p1w, ph, 50, 0
p2w=110
p2x=pm
p2y=(yres/2)-(p2w/2)
gui.setcolor prg1, tft.rgb(255,255,0),0
prg2=gui.progressbar p2x, p2y, ph, p2w, 50, 1
gui.setcolor prg2, tft.rgb(0,255,250),0
gui.autorefresh 10,1
'timer0 100, paint 'un-comment this line for a pointless bouncing ball
wait
paint:
frame=30+dia 'frame border
tft.circle x, y, dia, 0, 1
if xdir=1 then
if x+speed < (xres-frame) then x=x+speed else xdir=0
endif
if xdir=0 then
if x-speed > frame then x=x-speed else xdir=1
endif
if ydir=1 then
if y+speed < (yres-frame) then y=y+speed else ydir=0
endif
if ydir=0 then
if y-speed > frame then y=y-speed else ydir=1
endif
tft.circle x, y, dia, colour, 1
return
slider1:
tft.circle x, y, dia, 0, 1
x = (gui.getvalue(sld1) * xmag) + xcentre - (50 * xmag)
tft.circle x, y, dia, colour, 1
gui.setvalue prg1, gui.getvalue sld1
'wlog x
return
slider2:
tft.circle x, y, dia, 0, 1
y = yres - ((gui.getvalue(sld2) * ymag) + ycentre - (50 * ymag))
tft.circle x, y, dia, colour, 1
gui.setvalue prg2, gui.getvalue sld2
'wlog y
return
end