Creating an input form

[Bish99&@]

I'm trying to create a form that I can use to collect input data for report creation. I really don't understand w
How to use the Page command to create an interactive input for. Are there any examples available from which I can learn?

I appreciate any help.

Thanks,
Steve

[Henko]

Hi Steve,

Here two pieces of code which may be of some help.

The first one is how to define a input screen using the page mechanism.
Advantage of page: background of original screen is preserved.
Disadvantage: only objects are permitted. Drawing graphics or using the print statement does alter the background. In this example, lines are simulated by using very narrow buttons.

Code: Select all

init_prog()
fps=100
for i=50 to 700 step 15
  draw line i,150 to i,750
  next i
page "Staff" show
for i=0 to 900 step .01
  pause .3/fps
  page "Staff" at 150+100*sin(i),300-100*sin(.7*i)
  if button_pressed("Staff_ok") then
    page "Staff" hide
    break
    end if
  next i
end

def init_prog()
graphics ! graphics clear ! draw color 0,0,0
define_form("Staff","New staff member",100,100,420,320,.7,.7,.7,1)
'
'
end def

' define a page window
' open and close with command page show and page hide
' other page commands in manual
' 
def define_form(name$,titel$,xs,ys,ww,hh,R,G,B,alpha)
page name$ set 
page name$ frame xs,ys,ww,hh
page name$ color R,G,B,alpha
button name$ & "_bottom" title "" at -6,hh-3 size ww+12,3
button name$ & "_left" title "" at 0,-6 size 3,hh+12
button name$ & "_right" title "" at ww-3,-6 size 3,hh+12
button name$ & "_upper1" title "" at -6,0 size ww+12,3
button name$ & "_upper2" title "" at -6,30 size ww+12,3
button name$ & "_title" title titel$ at 120,3 size 180,27

n$="name of person : "
field name$ & "name" text n$ at 10,40 size 150,40 RO
field name$ & "_name" text "" at 170,40 size 240,40
n$="department      : "
field name$ & "dept" text n$ at 10,90 size 150,40 RO
field name$ & "_dept" text "" at 170,90 size 240,40
n$="date of birth   : "
field name$ & "birth" text n$ at 10,140 size 150,40 RO
field name$ & "_birth" text "" at 170,140 size 240,40
n$="monthly salary  : "
field name$ & "salary" text n$ at 10,200 size 150,40 RO
field name$ & "_salary" text "" at 170,200 size 240,40
button name$ & "_ok" text "ok" at 170,260 size 80,40

page name$ hide
end def

The second piece of code is from "Dutchman" and is a nice mechanism for input fields. However, on first sight it contains one or more PRINT statements, which should not be used in a "paged" window. It/they should be converted to a FIELD object.

Code: Select all

'Inline Input Field
'with safe prompt
'by Dutchman, april 2016
n=1
DO
 Prompt$="Request "&STR$(n,"#")&": "
 Field$="In_"&STR$(n,"#")
 Answer$=Input$(10,75+n*25,400,22,Field$,Prompt$)
 PRINT "Input";n;"=";Answer$
n+=1
until n>3 OR Answer$=""
END

DEF Input$(x,y,w,h,Field$,Prompt$)
FIELD Field$ AT x,y SIZE w,h
FIELD Field$ FONT SIZE h-6
CALL InputPreset(Field$)
FIELD Field$ SELECT
prompt=LEN(Prompt$)
DO
 IF FIELD_CURSOR_POS(Field$)<prompt THEN FIELD Field$ TEXT Prompt$
 SLOWDOWN
UNTIL FIELD_CHANGED(Field$)
Txt$=FIELD_TEXT$(Field$)
T$=RIGHT$(Txt$,LEN(Txt$)-prompt)
RETURN T$
END DEF

DEF InputPreset(name$)
FIELD name$ BACK COLOR 0,1,0
FIELD name$ FONT NAME "Verdana"
FIELD name$ FONT COLOR 0,0,1
END DEF

[Bish99&@]

Thanks Henko, I will see if I can use these to help me figure out how to proceed. I really appreciate your help.

Steve

[Henko]

One line of code has to be inserted yet in the define_form() function : SET BUTTONS CUSTOM at the following location:

.
.
page name$ color R,G,B,alpha
set buttons custom
button name$ & "_bottom" title "" at -6,hh-3 size ww+12,3
.
.
.

[Henko]

Lots of parameters to play with ......

IMG_1566.PNG (1.66 MiB) Viewed 4535 times

Code: Select all

init_prog()
speed=20
page "Staff" show
for i=0 to 900 step .01
  pause .3/speed
  page "Staff" at 150+100*sin(i),300-100*sin(.7*i)
  if button_pressed("Staff_ok") then
    page "Staff" hide
    break
    end if
  next i
end

def init_prog()
graphics ! graphics clear ! draw color 0,0,0
for i=50 to 700 step 15 ! draw line i,150 to i,750 ! next i
define_staff_form("Staff","New staff member",150,300,420,320,.5,.7,.7,.8)
'
'
end def

' define a paged (input)window 
' open and close with command page show and page hide
' other page commands in manual
' 
def define_staff_form(name$,titel$,xs,ys,ww,hh,R,G,B,alpha)

        ' stuff for all input forms
page name$ set 
page name$ frame xs,ys,ww,hh
page name$ color R,G,B,alpha
set buttons custom
button name$ & "_bottom" title "" at -6,hh-3 size ww+12,3
button name$ & "_left" title "" at 0,-6 size 3,hh+12
button name$ & "_right" title "" at ww-3,-6 size 3,hh+12
button name$ & "_upper1" title "" at -6,0 size ww+12,3
button name$ & "_upper2" title "" at -6,30 size ww+12,3
button name$ & "_title" title titel$ at 120,3 size 180,27
button name$ & "_ok" text "ok" at 170,260 size 80,40

        ' staff specific content
n$=" name of person : "
field name$ & "name" text n$ at 10,40 size 150,40 RO
field name$ & "_name" text "" at 170,40 size 240,40
field_refine(name$ & "name")
n$=" department      : "
field name$ & "dept" text n$ at 10,90 size 150,40 RO
field name$ & "_dept" text "" at 170,90 size 240,40
field_refine(name$ & "dept")
n$=" date of birth   : "
field name$ & "birth" text n$ at 10,140 size 150,40 RO
field name$ & "_birth" text "" at 170,140 size 240,40
field_refine(name$ & "birth")
n$=" monthly salary  : "
field name$ & "salary" text n$ at 10,190 size 150,40 RO
field name$ & "_salary" text "" at 170,190 size 240,40
field_refine(name$ & "salary")

page name$ hide
end def

def field_refine(f$)
field f$ font size 24 ! field f$ font color 1,1,0
field f$ back color .5,.7,.7 ! field f$ back alpha .2
field f$ font name "Baskerville-Italic"
end def

[rbytes]

I really like your moving input box. You could sell it to Amazon for millions. If they used it for their customer complaints, they wouldn't have as many to deal with. They could keep increasing the speed until they didn't get any complaints at all!

[GeorgeMcGinn]

Henko is an excellent programmer and designer. And his code not only shows you how to create a good looking input box, but some of the neat and powerful freatures SB offers you. But let me take you back to basics going back years when Henko, Rbytes, Dutchman and I worked on creating different methods to create input boxes.

Dutchman's Inline Input program is great for text games, or programs where the next input box is based on your answer to the previous question. An Example would be if you asked a person if they have a criminal record. If they say no, you display the next question. If they answer yes, then you may want to display a box or series of them to get more information on their crimes before going to the next question. This method leaves the screen looking much cleaner than putting all those extra input boxes out there when they may not be needed.

But if you have a standard set of inputs that do not require extra input, the following is what I came up with using what Rbytes originally came up with after Dutchman's Inline Prompt program. I took it to the next step where you see all the questions and incorporated the highlighted fields from Dutchman's Program.

This program was created many years ago, and there are other incarnations of it, but this is the simplest way to demonstrate how to line up input questions to output boxes, and even displays your responses after you hit enter on the last field. This also shows how you can highlight the current question you are on, which is handy if your screen is divided into sections and you have many inputs.

This was a combined effort where I took code from the Dutchman Inline and a program Rbytes wrote that also displayed each question one at a time to create a simple sample of displaying a screen, with all the inputs, and placing the cursor at the first field.

I'll have to look, but if you understand buttons and how this works, you can set up a submit button and instead of it executing the screen on hitting ENTER on the last field, you can redirect it back to the top, just in case you need to correct something. I have that program somewhere, I just need to find it.

You can also move between fields using the TAB buttons, but it does not move the highlighting. So if you tab ahead, the box above will stay highlighted. It does not effect the program, as a TAB will work and the answer you provide will be accepted.

You can accomplish highlighting with TABs, but you'll need to add code to know where you are. I have this in a program I'm still working on that converts files from JSON, XML and text, but it's not finished. It highlights the question you are on whether you use ENTER or the TAB keys.

I can see if I can just isolate how to move the highlight with the TAB or ENTER keys if you want. Or you can try it with this program yourself.

Also, I created a Function that executes a new command PRINTLINE that is handy if you have a lot of blank PRINT statements. PRINTLINE(5) will print five blank lines and makes your code look a little cleaner than having lines like: PRINT!PRINT!PRINT!PRINT!PRINT


This program is well commented, so I hope it helps as well.

Code: Select all

/*
PROGRAM: Screen Input v3.1

Original program by rbytes
The Dutchman changes from Inline used differently
Modifications by George McGinn

This program nows aligns the labels and FIELD TEXT so that the input boxes appear next to the question or label, thus reducing the number of lines needed on the screen (by 10).

I also introduced the TAB(N) option to the PRINT statement. This performs N number of tabs then prints the text that follows, starting on N tabs + 1 position. This is better than putting all those spaces in front of the text just to get them to align up.

Also, I created a new command - PRINTLINE(N). This is a simple function that, instead of typing 4 or 5 PRINT statements, I now only have to write one print and tell it how many blank lines I want. Your code can get very messy looking if you have tons of "PRINT!PRINT!PRINT!PRINT!PRINT" statements all over in conditional logic (IF/THEN/ESEIF statements).

This is a very basic screen input box, where it uses a non-graphical user interface, and from here you can take this data, build a record and write it to a file.


*/


SBMain:

prompt$=""
Answer$=""

SetupInputLabels:


PRINT!PRINT TAB(14);"What is your name:"
FIELD "z" TEXT prompt$ AT 380,30 SIZE 300, 25

PRINT!PRINT TAB(14);"Where do you live:"
FIELD "y" TEXT prompt$ AT 380,75 SIZE 300, 25

PRINT!PRINT "How long a member of the Forum:"
FIELD "x" TEXT prompt$ AT 380,120 SIZE 300, 25

PRINT!PRINT " Favorite feature of the Forum:"
FIELD "w" TEXT prompt$ AT 380,165 SIZE 300, 25
   
PRINT!PRINT "  Have you posted any programs:"
FIELD "v" TEXT prompt$ AT 380,210 SIZE 300, 25

PRINTLINE(4)!PRINT "Results of input boxes:"!PRINT "-----------------------"


GetInput:
   GET_INPUT("z")
   GET_INPUT("y")
   GET_INPUT("x")
   GET_INPUT("w")
   GET_INPUT("v")
   GOSUB GetAnswers

STOP
  

GetAnswers:
'Get and print out all the results
'
'
   Answer$=FIELD_TEXT$("z")
   PRINT "What is your name: "&Answer$
   Answer$=FIELD_TEXT$("y")
   PRINT "Where do you live: "&Answer$
   Answer$=FIELD_TEXT$("x")
   PRINT "How long have you been a forum member: "&Answer$
   Answer$=FIELD_TEXT$("w")
   PRINT "Yes, "&Answer$&" is a nice feature."
   Answer$=FIELD_TEXT$("v")
   PRINT "Interesting: "&Answer$
RETURN


DEF GET_INPUT(FIELD$)
    FIELD FIELD$ BACK COLOR 0,1,0
    FIELD FIELD$ FONT NAME "Courier"
    FIELD FIELD$ SELECT
    DO
      SLOWDOWN
    UNTIL FIELD_CHANGED(FIELD$)
    FIELD FIELD$ BACK COLOR 1,1,1   
ENDDEF
   
   
DEF PRINTLINE (A)
    N=1
    DO 
       PRINT
       N+=1
    UNTIL N > A   
ENDDEF   
 

[rbytes]

I tested the program on my iPad. It works fine in portrait mode, but in landscape mode, as soon as I run it the text scrolls up almost two lines, while the fields don't move. Therefore the fields are offset from the questions by almost two inputs.

You might want to include the line SET ORIENTATION PORTRAIT to remind users to use that orientation.

I have attached a screen shot.

[GeorgeMcGinn]

The offset is caused by the in iPad keyboard. It works and looks fine with an external keyboard.

Unfortunately, I code with external keyboard use as most people use an external keyboard.

I also write my programs, unless there is a need to use one orientation over another, to be used either way.

It is an issue either Apple must fix, SB, or an adjustment can be coded if using the internal keyboard in landscape mode.

It's a personal programming preference on my part, and those who use my programs I instruct them to use an external keyboard. TAB buttons, the LEFT, RIGHT, UP DOWN buttons, and special function keys are available and are programmable. You can check for them.

You may think my way is a limitation, but as a consultant my customer base will use the equipment I require. The day I stop writing custom programs for specific clients and code for the masses, I agree with you that all options must be looked at, including foreign language keyboards.

Especially if you are writing games, Chinese and Russian keyboards are different from English. And you then need to consider third party keyboards others use.

So if it doesn't quite line up, I'm not going to lose any sleep over that. People are smart enough to know the effects their equipment has on some Apps.

I tested the program on my iPad. It works fine in portrait mode, but in landscape mode, as soon as I run it the text scrolls up almost two lines, while the fields don't move. Therefore the fields are offset from the questions by almost two inputs.

You might want to include the line SET ORIENTATION PORTRAIT to remind users to use that orientation.

I have attached a screen shot.