Layout Aids for Fields and Buttons

Post Reply
User avatar
rbytes
Posts: 1794
Joined: Sun May 31, 2015 12:11 am
My devices: iPhone X
iPad 4
Dell Inspiron laptop
CHUWI Plus 10 convertible Windows/Android tablet
Location: Calgary, Canada
Flag: Canada
Contact:

Layout Aids for Fields and Buttons

Post by rbytes » Mon Nov 12, 2018 7:47 pm

Usually when I build a program, I center interface objects by eye. There is a more precise way to do it, and I finally got around to writing some code for it. The screen shot shows two rows each of fields and buttons - one horizontal and one vertical row. Spacing and centering on screen are calculated, and therefore precise. As you change object dimensions or inter-object spacing, the screen centering is recalculated.

NOTE: The only functional button is the QUIT button. ;)

Code: Select all

/*
Layout Aids by rbytes, November 2018
Functions to aid in centering and
spacing of interface objects. The outline 
around each field  is created by locating
a slightly larger black-filled field behind it.
*/
SET BUTTONS CUSTOM
SET BUTTONS FONT NAME "Arial-BoldMT"
SET TOOLBAR OFF
SET ORIENTATION LANDSCAPE
laun$=LAUNCHER$ ()
dev$=DEVICE_TYPE$()
lf$=CHR$(10)
GET SCREEN SIZE sw,sh
iostest=0
IF iostest THEN   ' iPhone 6 screen test. Adjust sw and sh for your screen size.
  sw=568
  sh=320
  dev$=""
ENDIF
rw=sw/1024!rh=sh/768
bshift=-50*rh
GRAPHICS
GRAPHICS CLEAR .4,.4,.4
if iostest then draw rect 0,0 to sw,sh
DRAW FONT SIZE 20*rw


'************ FIELDS ************

' create fields, equally-spaced and centered horizontally
r=1!g=.7!b=.7
fieldtot=6                    ' number of fields
fhsize=120*rw!fvsize=50*rh    ' width and height of fields
fspace=40*rw                  ' space between fields
a$="Horizontally centered and equally-spaced fields"

hfld(a$,fs,fieldtot,fhsize,fvsize,fspace,bshift,r,g,b)
pause 3

' create fields, equally-spaced and centered vertically
r=.7!g=1!b=.7
fieldtot=4                     ' number of fields
fhsize=120*rw!fvsize=50*rh     ' width and height of fields
fvspace=40*rh                  ' space between fields
a$="Vertically centered and"
a2$="equally-spaced fields"
flmargin=50

vfld(a$,a2$,fs,fieldtot,flmargin,fhsize,fvsize,fspace,r,g,b)
pause 3


'************ BUTTONS ************

' create buttons, equally-spaced and centered horizontally
buttontot=6                    ' number of buttons
bhsize=100*rw!bvsize=50*rw     ' width and height of buttons
bspace=40*rw                   ' space between buttons
a$="Horizontally centered and equally-spaced buttons"
r=.7!g=1!b=1
fs=22

hbutt(a$,fs,buttontot,bhsize,bvsize,bspace,bshift,r,g,b)
pause 3

' create buttons, equally-spaced and centered vertically
r=1!g=.7!b=1                    ' color of buttons and text
a$="Vertically centered and"
a2$="equally-spaced buttons"
buttontot=4                     ' number of buttons
bhsize=100*rw!bvsize=50*rw      ' width and height of buttons
bvspace=30*rh                   ' space between buttons

vbutt(a$,a2$,fs,buttontot,bhsize,bvsize,bvspace,bshift,r,g,b)


main: slowdown

' QUIT button quits the program
  
IF BUTTON_PRESSED("QUIT") THEN
  IF laun$="desktop" THEN
    IF FILE_EXISTS("/launch") THEN
      RUN "/-Launch.sb"
    ELSE
      EXIT
    ENDIF
  ENDIF
  END
ENDIF

goto main


' create fields, equally-spaced and centered horizontally

DEF hfld(a$,fs,fieldtot,fhsize,fvsize,fspace,bshift,r,g,b)
ftotwidth=fieldtot*fhsize+(fieldtot-1)*fspace   ' total width of fields
flmargin=(.sw-ftotwidth)/2     ' left margin of fields (matches right margin)
DRAW COLOR r,g,b
DRAW TEXT a$ AT 205*.rw,180*.rh
for t=1 to fieldtot
  read fieldname$
  read fieldtext$
  ' field to create black outline
  FIELD fieldname$&"b" TEXT "" AT flmargin+(t-1)*(fhsize+fspace)-1,bshift+160*.rh-1 SIZE fhsize+2,fvsize+2
  FIELD fieldname$&"b" BACK COLOR 0,0,0
  ' field to display text
  FIELD fieldname$ TEXT fieldtext$ AT flmargin+(t-1)*(fhsize+fspace),bshift+160*.rh SIZE fhsize,fvsize
  FIELD fieldname$ BACK COLOR r,g,b
  FIELD fieldname$ FONT SIZE 20*.rw
NEXT t
DATA "yr1", "One", "mn1", "Two", "dy1", "Three", "yr2", "Four", "mn2", "Five", "dy2", "Six"
END DEF


DEF vfld(a$,a2$,fs,fieldtot,flmargin,fhsize,fvsize,fvspace,r,g,b)

ftotheight=fieldtot*fvsize+(fieldtot-1)*fvspace   ' total height of fields
ftmargin=(.sh-ftotheight)/2     ' top margin of fields (matches bottom margin)
DRAW COLOR r,g,b
DRAW TEXT a$ AT 190*.rw,360*.rh
DRAW TEXT a2$ AT 190*.rw,400*.rh
for t=1 to 4
  read fieldname$
  read fieldtext$
  FIELD fieldname$&"b" TEXT "" AT flmargin-1,ftmargin-1+(fvsize+fvspace)*(t-1) SIZE fhsize+2,fvsize+2
  FIELD fieldname$&"b" BACK COLOR 0,0,0
  FIELD fieldname$ TEXT fieldtext$ AT flmargin,ftmargin+(fvsize+fvspace)*(t-1) SIZE fhsize,fvsize
  FIELD fieldname$ BACK COLOR r,g,b
  FIELD fieldname$ FONT SIZE 20*.rw
NEXT t
DATA "yr3", "Seven", "mn3", "Eight", "dy3", "Nine", "yr4", "Ten"
END DEF


' create buttons, equally-spaced and centered horizontally

DEF hbutt(a$,fs,buttontot,bhsize,bvsize,bspace,bshift,r,g,b)
DRAW COLOR r,g,b
FILL COLOR r,g,b
DRAW TEXT a$ AT 225*.rw,580*.rh
SET BUTTONS FONT SIZE fs
DRAW COLOR 0,0,0
btotwidth=buttontot*bhsize+(buttontot-1)*bspace   ' total width of buttons
blmargin=(.sw-btotwidth)/2      ' left margin of buttons (matches) right margin)
FOR t=1 to buttontot
  READ bname$
  BUTTON bname$ TEXT bname$ AT blmargin+(t-1)*(bhsize+bspace),bshift+680*.rh SIZE bhsize,bvsize
NEXT t
DATA "NEW", "LOAD", "SAVE", "CALC", "COPY", "QUIT"
END DEF


' create buttons, equally-spaced and centered vertically

DEF vbutt(a$,a2$,fs,buttontot,bhsize,bvsize,bvspace,bshift,r,g,b)
FILL COLOR r,g,b
DRAW COLOR r,g,b
DRAW FONT SIZE fs
DRAW TEXT a$ AT 554*.rw,360*.rh
DRAW TEXT a2$ AT 566*.rw,400*.rh
DRAW COLOR 0,0,0
btotheight=buttontot*bvsize+(buttontot-1)*bvspace   ' total height of buttons
btmargin=(.sh-btotheight)/2      ' top margin of buttons (matches bottom margin)
FOR t=buttontot+1 to buttontot+4
  READ bname$
  BUTTON bname$ TEXT bname$ AT 874*.rw,btmargin+(t-buttontot-1)*(bvsize+bvspace) SIZE bhsize,bvsize
NEXT t
DATA "PASTE", "PLAY", "FIND", "PRNT"
END DEF
Attachments
1691C959-0A3F-4AE5-A4BF-1A2E71D686EE.png
1691C959-0A3F-4AE5-A4BF-1A2E71D686EE.png (141.7 KiB) Viewed 21 times
####### Living the colorful life #######

Post Reply