September 25, 2020, 02:10:27 pm

News:

IonicWind Snippit Manager 2.xx Released!  Install it on a memory stick and take it with you!  With or without IWBasic!


Ghost Edit Controls

Started by GWS, November 06, 2008, 04:29:26 am

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

GWS

Hi folks,

There's always been a problem getting a program to respond to an 'Enter' keypress in an Edit Box.
Microsoft never provided for this apparently ..  :o

Then came an idea from Larry Adcock in 2002 for using just one edit box to do all the work for a window full of 'ghost' edit boxes.  :o

I'll post Larry's original ground-breaking idea separately.

Anyway, based on Larry's idea, I came up with the idea of not using an Edit box at all - but using an apparently 'editable' Text Box instead - and using decorative edit placeholders, which could be any image you fancied ..  :)

Here's the code:

Code Select

' Creative Basic Code
' GWS 2008
'
' Example of using interesting-looking Placeholder images and a single Text Box instead of boring edit boxes.
' Any number of editable locations can be laid out on the window - but only one text box is needed.
' This method also allows checks to limit input to a given number of characters of a chosen type,
' numeric, text, or any particular group of permissible characters.

' You get colourful editable boxes which respond to the 'Enter' key
' Use any web button image you fancy to act as pretty placeholders ..

' This idea came from a post by Larry Adcock in 2002 which used edit boxes (but of course this didn't respond
' to 'Enter' keypresses ..

def w:WINDOW
def key,tb,tb2,sl,mx,my,highbox,im:int
def left,top,width,height,textW,textH:int
def i,j,tboxW,tboxH,bc,test1,test2:int
def run,chartest:int

def a$,b$,ok1$,ok2$:string

autodefine "off"

type ghosttype
def l:int
def t:int
def w:int
def h:int
def text:string
def nxt:int
def max:int
def ok:string
endtype

def tbox[3]:ghosttype

WINDOW w,0,0,600,400,@SIZE|@MINBOX|@MAXBOX,0,"Text Box Edit Example",main
centerwindow w
setwindowcolor w,rgb(0,0,30)
setfocus w

GETCLIENTSIZE w,left,top,width,height

' set the size of the editable text box and create it ...
tboxW = 81: tboxH = 21
CONTROL w,"T,,120,70,tboxW,tboxH,@CTEDITCENTER,1"
setcontrolcolor w,1,rgb(230,230,230),rgb(0,100,200)
setfont w,"Times New Roman",10,600,0,1
' hide the text box ...
SHOWWINDOW w, @swhide,1

CONTROL w,"B,Exit,(width-70)/2,300,70,35,0x50000000,2"
CONTROL w,"T,,(width-80)/2,180,80,22,@CTEDITCENTER,3"
setcontrolcolor w,3,rgb(240,240,100),rgb(0,100,200)
setfont w,"Times New Roman",10,600,0,3

' you could load your own suitably sized jpg image here for a nice placeholder background.
' load image for the ghost text box placeholders ...
' im = LOADIMAGE (GETSTARTPATH + "box.jpg", 4)
' a line drawing section below is used below to give
' a reasonable effect ...

' locate the editable text boxes and initialise ...
tbox[0].l = 100: tbox[1].l = 255: tbox[2].l = 410
tbox[0].t = 70: tbox[1].t = 70: tbox[2].t = 70
tbox[0].w = 90: tbox[1].w = 90: tbox[2].w = 90
tbox[0].h = 25: tbox[1].h = 25: tbox[2].h = 25
' set next box when Enter is pressed ...
tbox[0].nxt = 1: tbox[1].nxt = 2: tbox[2].nxt = 99
' set maximum number of characters for each box ...
tbox[0].max = 5: tbox[1].max = 5: tbox[2].max = 5
ok1$ = "1234567890+-":' set up valid characters for each box ...
ok2$ = "aAbBcCdDeEfFgGhHiIjJkKlLmMnNoOpPqQrRsStTuUvVwWxXyYzZ,."
tbox[0].ok = ok1$:'set up left hand box for numbers only
tbox[1].ok = ok2$:'set up right hand box for letters only ...
tbox[2].ok = "":' set up third box for any character ...
highbox=2:' set highest index ...

' show the ghost placeholders ...
for i = 0 to highbox
' ____________________________________________________________________________
' this line drawing section would normally be replaced by an image background
' loaded from a suitable web button image, sized to fit.
for j = 0 to tbox[i].w
if j < tbox[i].w /2
bc = 100+(200*j/tbox[i].w)
else
bc = 300-(200*j/tbox[i].w)
endif
line w,tbox[i].l+j,tbox[i].t,tbox[i].l+j,tbox[i].t+tbox[i].h,rgb(0,0,bc)
next j
'____________________________________________________________________________
' the image would normally replace the above line drawing section ...
' ShowImage w,im,4,tbox[i].l,tbox[i].t,tbox[i].w,tbox[i].h

next i

' invalidate textbox indexes, so as to start with no box selected ...
tb = -1: tb2 = -1

' ****** documentation only *******************
SETFONT w, "Arial",10,500,0
frontpen w, RGB(20,230,150)   
a$ = "Select box - enter some values and press Enter - clears if clicked" 
GETTEXTSIZE w, a$, textW, textH 
move w,(width- textW)/2,20 
print w,a$

SETFONT w, "Arial",8,500,0 
a$= "(Box 1 set for 5 digits max - Box 2 for 5 letters max - Box 3 for any 5 characters)"
GETTEXTSIZE w, a$, textW, textH
move w,(width- textW)/2,120
print w,a$
' ****** documentation only *******************
   
frontpen w, RGB(50,100,250) 

run = 1

WAITUNTIL run = 0
' image delete only needed if a jpeg background image is loaded ...
' DeleteImage im,4
CLOSEWINDOW w
END

SUB main
SELECT @CLASS
CASE @IDCHAR
key = @CODE
select 1
case (key = 9)
' ignore TAB ...
return
case (key <> 13) & (key <> 8)
' normal character entered ..
if (tb >= 0) & (tb <= highbox)
a$ = getcontroltext(w,1)
b$ = chr$(key)
if (tbox[tb].ok <> "")
chartest = (instr(tbox[tb].ok,b$) > 0)
else
chartest = 1
endif
if (len(a$) < tbox[tb].max) & chartest
a$ = a$ + chr$(key)
      setcontroltext w,1,a$
endif
endif
case (key = 8)
' backspace pressed ...
a$ = getcontroltext(w,1)
sl = len(a$)
if sl>0
a$ = left$(a$,len(a$)-1)
      setcontroltext w,1,a$
endif
case (key = 13)
' Enter key pressed ..
if (tb >= 0) & (tb <= highbox)
writetext
if len(a$) > 0
setcontroltext w,3,a$
tb = tbox[tb].nxt
textmove
endif
endif
endselect
case @IDCLOSEWINDOW
run = 0
case @IDCONTROL
select @CONTROLID
case 2
run = 0
endselect
case @IDLBUTTONDN
' if mouse clicked, find where ...
tbox_click
case @IDMOUSEMOVE
    mx = @mousex : my = @mousey
ENDSELECT
RETURN

SUB tbox_click
' check for mouse click in a box ...
def tbv:int
for tbv = 0 to highbox
test1 = (mx>tbox[tbv].l) & (mx<(tbox[tbv].l+tbox[tbv].w))
test2 = (my>tbox[tbv].t) & (my<(tbox[tbv].t+tbox[tbv].h))
   if test1 & test2
' transfer the contents of the text box ...
if tb <= highbox
writetext
endif
setcontroltext w,3,""
tb = tbv
textmove
   endif
next tbv
RETURN

SUB textmove
' move the text box to the ghost placeholder clicked ...
' remove focus from current box ..
if tb >= 0
if tb <= highbox
setcontroltext w,1,""
' repaint the ghost background ...
' this line drawing section is only here to replace the image that
' would normally be used ...
' ____________________________________________________________
for j = 0 to tbox[tb].w
if j < tbox[tb].w /2
bc = 100+(200*j/tbox[tb].w)
else
bc = 300-(200*j/tbox[tb].w)
endif
line w,tbox[tb].l+j,tbox[tb].t,tbox[tb].l+j,tbox[tb].t+tbox[tb].h,rgb(0,0,bc)
next j
'_____________________________________________________________
' ShowImage w,im,4,tbox[tb].l,tbox[tb].t,tbox[tb].w,tbox[tb].h
' display the text box at the clicked location ...
SHOWWINDOW w, @swrestore,1
setsize w,tbox[tb].l+5,tbox[tb].t+2,tboxW,tboxH,1
tb2 = tb
else
' if last box in the sequence just go to the window ...
' and hide the text box ...
SHOWWINDOW w, @swhide,1
setfocus w
tb2 = -1
endif
endif
RETURN

SUB writetext
' transfer text from the text box to the selected ghost text area ...
a$ = getcontroltext(w,1)
if len(a$) > 0
setfont w,"Times New Roman",10,600
frontpen w, RGB(0,200,255)
GETTEXTSIZE w, a$, textW, textH
' note the divide by 3 to center the text vertically ...
move w,tbox[tb].l+(tbox[tb].w-textW)/2,tbox[tb].t+(tbox[tb].h-textH)/3
DRAWMODE w, @transparent
' write the information to the screen...
print w,a$
' and save it in the ghost text ...
tbox[tb].text = a$
' clear the text box ...
setcontroltext w,1,""
endif
RETURN



Hope you find it interesting ..

best wishes, :)

Graham



Tomorrow may be too late ..