Home    Forum    All Programs   Upcoming    Tutorials    About SPS
Making Graphical User Interfaces Tutorial
First, lets define what we mean by a GUI(Graphical User Interface).

Here is an example of what a GUI looks like.
That is the original GUI for Black Eagle Shell v2.0(BES2.0).

Now, here is one of the GUIs I have made for BES:
Here are two more examples of GUIs I have made for BES:
Basically, when using a GUI in Black Eagle Shell, the program still works the same, only the screen looks different.  This way, you can customize it for whatever GUI you like the best or you can make your own.  (Similar to skins on Windows Computer Programs).

Notice that each GUI has a "bar" where the Program Name is displayed, a "bar" where the Archived Status is displayed, a "bar" where the Locked Status is displayed, and a "bar" where messages are displayed (the Status Bar is the empty bar on all of the GUIs).  (The Status Bar displays things like Loading..., (Un)Archived, (Un)Locked, etc.)

In order for Black Eagle Shell to know where you want these things to be displayed, you must include specifications in your ZGUI program.  The coordinates where the text will be displayed are stored into a list.  This list is LBES1.

Now, you are ready to begin making a GUI.

Steps:

1.  Draw the GUI remembering you must have 4 empty bars. 

2.  Save this GUI as a Pic file or as an ASM Program using Screen Shot Maker -
(Screen Shot Maker (click here to download off of ticalc.org)

3.  Find the points where you want the text to be diplayed.
     You must have one X and one Y Coordinate for each bar (4 bars).

4.  Store these points into a list using the following template:
     {ycoordinate(status bar), xcoordinate(status bar), ycoordinate(program name), xcoordinate(program name), ycoordinate(archive status), xcoordinate(archive status), ycoordinate(lock status), xcoordinate(lock status)}->LBES1
     5->FV  (This lets the Shell know that the GUI is installed)(Found in the Finance APP)

5.  If you used a pic file, you must Clear Draw before recalling the Pic in your ZGUI program.
     :ClrDraw       (Clears the graph screen)
     :RecallPic X   (X is the Pic #)

6.  If you made your GUI into an ASM program, you should do the following in ZGUI.
     :Pt-On(0,0            (makes sure the GUI doesn't "flicker")
     :Asm(prgmNAME (where NAME is what you called the program)

7.  Your final ZGUI Program should look like one of the following:

For a Pic based GUI:
:{Y1,X1,Y2,X2,Y3,X3,Y4,X4}->LBES1
:5->FV                     (Found in the Finance APP)
:ClrDraw                  (Clears the graph screen)
:RecallPic X              (X is the Pic #)

For an ASM Program based GUI:
:{Y1,X1,Y2,X2,Y3,X3,Y4,X4}->LBES1
:5->FV                   (Found in the Finance APP)
:Pt-On(0,0              (This makes sure the GUI doesn't "flicker")
:Asm(prgmNAME   (where NAME is what you called the program)

NOTE:  Keep in mind that program ZGUI can be archived, but the Pic or program it calls cannot be unless you unarchive it somehow.

8.  Test your GUI in Black Eagle Shell.  Make corrections to your GUI or program ZGUI as needed.

9.  If you want to submit your GUI so that it will be included in the next update of Black Eagle Shell on ticalc.org, send both your ZGUI Program and your Pic or ASM program to

SuiPsySof@yahoo.com

Be sure to include your name for authorship.