TFT and GUI examples

Place code snippets and demo code here
Post Reply
User avatar
Posts: 276
Joined: Mon Feb 08, 2021 6:22 pm
Has thanked: 55 times
Been thanked: 129 times

TFT and GUI examples

Post by Electroguard »

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... [External Link Removed for Guests]

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... [External Link Removed for Guests]

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 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          
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      
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
prg1=gui.progressbar p1x, p1y, p1w, ph, 50, 0
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

frame=30+dia        'frame border x, y, dia, 0, 1
if xdir=1 then
 if x+speed < (xres-frame) then x=x+speed else xdir=0
if xdir=0 then
 if x-speed > frame then x=x-speed else xdir=1
if ydir=1 then
 if y+speed < (yres-frame) then y=y+speed else ydir=0 
if ydir=0 then 
 if y-speed > frame then y=y-speed else ydir=1 
endif x, y, dia, colour, 1

slider1: x, y, dia, 0, 1
x = (gui.getvalue(sld1) * xmag) + xcentre - (50 * xmag) x, y, dia, colour, 1
gui.setvalue prg1, gui.getvalue sld1
'wlog x

slider2: x, y, dia, 0, 1
y = yres - ((gui.getvalue(sld2) * ymag) + ycentre - (50 * ymag)) x, y, dia, colour, 1
gui.setvalue prg2, gui.getvalue sld2
'wlog y

You do not have the required permissions to view the files attached to this post.
Post Reply