electronic visualization laboratory university of illinois at chicago panels, tools, and views: user...

Electronic Visualization Laboratory University of Illinois at Chicago

Panels, Tools, and Views:User Guide

Allan Spale


Visual Code AreaVisual Code Area

Work AreaWork Area

Can adjust the location of the dividerCan adjust the location of the divider

Environment


Right-click in this area to make Right-click in this area to make the main menu appearthe main menu appear

Main Menu


New Program / Rename Program

Select Select New ProgramNew Program from the menufrom the menu

•Enter a program Enter a program name with 8 or less name with 8 or less characters.characters.

•Start with a letter. Start with a letter.

•Can use letters or Can use letters or numbers.numbers.

•Program name will Program name will appear in the window appear in the window title.title.

Later, if you want to rename the program, Later, if you want to rename the program, select select Rename Program Rename Program from the menu, from the menu, and follow the same naming process.and follow the same naming process.


Open Program

Select Select Open Open from the menufrom the menu •Select a file Select a file from the list of from the list of available Panel-available Panel-Tools-Views Tools-Views files (.ptv)files (.ptv)

•Or, type the Or, type the name of the file name of the file in the in the File File Name Name field (no field (no extension is extension is required).required).


Panels

Select Select View PanelView Panel from the menufrom the menu

List of List of available available panelspanels

•A panel is an organization for groups of similar functions

•User and system defined objects are used as arguments in the functions of a panel

•Panels have a visual metaphor with respect to the functionality provided


Defining Data Objects:Object Editor Panel

Select Select Object Editor Object Editor from the from the View Panel View Panel menumenu

Define all data objects using this table Define all data objects using this table and formand form


Name:Name: Unique identifier used to Unique identifier used to reference data objects in a program.reference data objects in a program.

•Must start with a letterMust start with a letter

•Can contain Can contain characters and characters and numbers but no special numbers but no special symbols (?,!,_,etc.)symbols (?,!,_,etc.)

•All letters must be All letters must be uppercaseuppercase

•Cannot use the Cannot use the program name or a program name or a system-defined data system-defined data object nameobject name

Defining Data Objects:Name


Type:Type: A category for a fixed set of values A category for a fixed set of values such as integer and character. A label is such as integer and character. A label is also included though it does not have a also included though it does not have a value.value.

•IntegerInteger•Any number between -2 Any number between -2 billion to +2 billion approx.billion to +2 billion approx.

•CharacterCharacter•Any valid character typed Any valid character typed on the keyboard (for this on the keyboard (for this application)application)

•LabelLabel•Used to Used to uniquelyuniquely mark a mark a program lineprogram line

•Used to jump to a Used to jump to a program line during program line during executionexecution

Defining Data Objects:Type


StructureStructure: The number of storage areas : The number of storage areas allocated for a type arranged allocated for a type arranged contiguously.contiguously.

•NoneNone•Has no structureHas no structure

•Only occurs for Label Only occurs for Label typetype

•Single ValueSingle Value•Only one storage area Only one storage area allocated for a typeallocated for a type

•1-D Array1-D Array•Multiple storage areas Multiple storage areas allocated contiguously for allocated contiguously for the same typethe same type

•If used, an If used, an Array Length Array Length must be specifiedmust be specified

Defining Data Objects:Structure


Restriction:Restriction: Permission that determines Permission that determines whether or not a data object may be whether or not a data object may be modified.modified.

•ConstantConstant•Literal ValueLiteral Value required required

•Value cannot be changedValue cannot be changed

•VariableVariable•No No Literal ValueLiteral Value required required

•Value can be changedValue can be changed

•NoneNone•A default value when the A default value when the LabelLabel type is used type is used

Defining Data Objects:Restriction


Array Length:Array Length: The number of contiguously The number of contiguously allocated memory spaces to allow a data allocated memory spaces to allow a data object to hold multiple values.object to hold multiple values.

•Available only when Available only when Structure Structure is is 1-D Array1-D Array

•The size of each array The size of each array element is dependent element is dependent on the memory needed on the memory needed to hold the values of a to hold the values of a TypeType..

•The total size of the The total size of the data object is the data object is the Array LengthArray Length multiplied by the type multiplied by the type sizesize

Defining Data Objects:Array Length


Literal Value:Literal Value: The value permanently The value permanently assigned to a data object with the assigned to a data object with the Restriction Restriction of of constantconstant..

•Values assigned are Values assigned are dependent on dependent on TypeType and and StructureStructure

•Single Value Character:Single Value Character: One One character surrounded by ‘’. character surrounded by ‘’. Escape character is /. (ex: ‘a’)Escape character is /. (ex: ‘a’)

•Character Array:Character Array: Characters Characters surrounded by “”. Maximum of surrounded by “”. Maximum of 35 characters including escape 35 characters including escape character. (ex: “My Program”).character. (ex: “My Program”).

•Single Value Integer:Single Value Integer: Any Any value between approx. –2 value between approx. –2 billion and +2 billion.billion and +2 billion.

•Integer Array:Integer Array: Series of Series of integers each separated by a integers each separated by a comma (,) and surrounded by comma (,) and surrounded by {}. (ex: {1, 2, 3, -4}){}. (ex: {1, 2, 3, -4})

Defining Data Objects:Literal Value


Description:Description: A text description that A text description that describes the purpose of the data object.describes the purpose of the data object.

•Can contain any Can contain any printable textprintable text

•Can have any lengthCan have any length

•Can be used for any Can be used for any data objectdata object

Defining Data Objects:Description


Defining Data Objects:Icon

Icon:Icon: Pictorial representation of the Pictorial representation of the Type Type and and StructureStructure of the data object. of the data object.

System-defined

Single Register

Display (output)

Keyboard (input)

User-defined

Integer Array

Single Value Integer

Single Value Character

Character Array

Label


Defining Data Objects:Size

Size:Size: The amount of memory in bytes The amount of memory in bytes allocated to the data object. This value is allocated to the data object. This value is not modified by you directly.not modified by you directly.

•Each type has a Each type has a certain sizecertain size

•Integer = 4 bytesInteger = 4 bytes

•Character = 1 byteCharacter = 1 byte

•A A Single ValueSingle Value data data object will have the object will have the Size Size valuevalue of its type of its type sizesize

•A A 1-D Array1-D Array data data object will use this object will use this formula: formula:

Array Length x Type SizeArray Length x Type Size


Defining Data Objects:Object Editor Action Buttons

•AddAdd•Create a new data Create a new data object with a name not object with a name not used beforeused before

•ModifyModify•Change some or all Change some or all properties of an properties of an existingexisting data object data object

•DeleteDelete•Remove an Remove an existingexisting data object from the list data object from the list of data objectsof data objects

Function buttons:Function buttons: Submits the data in the Submits the data in the fields for validation and entry into the list fields for validation and entry into the list of data objects.of data objects.


Defining Data Objects:Object Editor Action Buttons

•ClearClear•Remove data from all Remove data from all of the fields and set of the fields and set drop-down boxes to drop-down boxes to default valuesdefault values

•HelpHelp•Display help that Display help that explains how to use explains how to use this panelthis panel

Function buttons:Function buttons: Submits the data in the Submits the data in the fields for validation and entry into the list fields for validation and entry into the list of data objects.of data objects.


Using Panels:View Panel Menu

Select Select View PanelView Panel from the from the menu and choose a panel. menu and choose a panel.

A panel will A panel will appear. Most appear. Most panels have a panels have a similar similar appearance and appearance and functionality.functionality.


Using Panels:Placing Data ObjectsRight click on an area like this.Right click on an area like this.

A menu will appear A menu will appear where where User Objects User Objects or or System Objects System Objects may may be selected. Your data be selected. Your data objects will appear in objects will appear in the appropriate the appropriate submenu. The data submenu. The data objects in objects in System System Objects Objects remains fixed.remains fixed.


Using Panels:Placing Data Objects

Select the desired Select the desired object from the object from the menu, and it will menu, and it will appear in the appear in the rectangular area.rectangular area.

The style of rectangle indicates the data object restriction:The style of rectangle indicates the data object restriction:

None/ None/ ConstantConstant VariableVariable


Using Panels:Clearing Values in Data Objects

•Because data objects are not initialized at the start of the Because data objects are not initialized at the start of the program with default values, program with default values, it is the responsibility of the it is the responsibility of the programmer to make sure the data objects have default programmer to make sure the data objects have default values if necessaryvalues if necessary..

•This means the following:This means the following:

•Assigning 0 to integer type and register data objects Assigning 0 to integer type and register data objects

•Assigning an array of spaces to a character arrayAssigning an array of spaces to a character array

•Assigning a space to a single characterAssigning a space to a single character

•If these precautions are not taken, unexpected behavior may If these precautions are not taken, unexpected behavior may result in your program such as in the printing of unexpected result in your program such as in the printing of unexpected characters or incorrect results from math calculations.characters or incorrect results from math calculations.


Using Panels:Selecting an Array Element

If you select an array If you select an array structured data object, you structured data object, you may be prompted as to may be prompted as to whether or not you want to whether or not you want to select an array element.select an array element.

Select either a data object Select either a data object whose value in that whose value in that instruction will represent instruction will represent the data object index, or the data object index, or select the index directly.select the index directly.


Using Panels:Selecting an Array Element

The result will appear in the rectangular area.The result will appear in the rectangular area.


Using Panels:Entering a Literal Value

Based on the Based on the Type and StructureType and Structure value selected from value selected from the drop-down list, enter a the drop-down list, enter a Literal Value Literal Value that that

corresponds a legal value. For information on legal corresponds a legal value. For information on legal values, please view the slide named “values, please view the slide named “Object Editor:

Data Object Literal Value”


Using Panels:Entering a Literal Value

The literal value will appear in the rectangular area as it The literal value will appear in the rectangular area as it was entered. If the value is too long to be displayed in was entered. If the value is too long to be displayed in the limited space provided, move the cursor over this the limited space provided, move the cursor over this

data object, pause, and text will appear that will display data object, pause, and text will appear that will display the complete literal value.the complete literal value.


Using Panels:Editing Data Objects

It may be necessary to perform It may be necessary to perform an an EditEdit menu function on the menu function on the data object. The data object. The Edit Edit menu menu function uses two different function uses two different buffers– one for data objects buffers– one for data objects and another for instructions.and another for instructions.

•CutCut•Remove the data object in the Remove the data object in the rectangular area and place it into the rectangular area and place it into the data object buffer.data object buffer.

•CopyCopy•Keep the data object in the rectangular Keep the data object in the rectangular area and place a duplicate of it into the area and place a duplicate of it into the data object buffer. data object buffer.

•PastePaste•Place a duplicate of the data object in Place a duplicate of the data object in the data object buffer into the the data object buffer into the rectangular area.rectangular area.


Using Panels:Function Button Panel

•Because a panel contains similar functions, it may be necessary Because a panel contains similar functions, it may be necessary to specify which function you would want to use. Simply press to specify which function you would want to use. Simply press one of the toggle buttons in a button panel to select the function to one of the toggle buttons in a button panel to select the function to perform on the operands.perform on the operands.

•If you are uncertain about the meaning of a function icon, move If you are uncertain about the meaning of a function icon, move your mouse over the button, pause, and text will appear your mouse over the button, pause, and text will appear describing the purpose of the function.describing the purpose of the function.


Using Panels:Label and Comments

•Label: Label: •This is the area for marking the instruction-to-be in the program. Using the This is the area for marking the instruction-to-be in the program. Using the Compare and Branch Compare and Branch panel, you can jump to a specific area in a program marked panel, you can jump to a specific area in a program marked by a label. A label may only be used by a label. A label may only be used once once to identify a line of program code.to identify a line of program code.

•Comments: Comments: •Write a description about the instruction-to-be here. Space is limited to about two Write a description about the instruction-to-be here. Space is limited to about two short lines of text. For more extensive comments, use the short lines of text. For more extensive comments, use the Section Comments Section Comments panel.panel.


Using Panels:Action Buttons

•Apply: Apply: •Commit the instruction into the program at the location marked by the code cursor.Commit the instruction into the program at the location marked by the code cursor.

•Clear: Clear: •Remove all data in all areas and, if necessary, any function button pressed will Remove all data in all areas and, if necessary, any function button pressed will become unpressed.become unpressed.

•Help: Help: •Display information about how to use this panel.Display information about how to use this panel.


Instruction Panel:Math

•Perform addition, subtraction, multiplication, division, Perform addition, subtraction, multiplication, division, and modulo operations on operands.and modulo operations on operands.

•The destination operand receives the result of the The destination operand receives the result of the operation (ex: LEFTINT = LEFTINT x RIGHTINT).operation (ex: LEFTINT = LEFTINT x RIGHTINT).

Source Source OperandOperand

Destination Destination OperandOperand


Instruction Panel:Compare & Branch

•Compare the values of two left and right operands of Compare the values of two left and right operands of the same the same type and structuretype and structure using the comparisons less than, less than or using the comparisons less than, less than or equal to, greater than, greater than or equal to, equal to, and not equal to, greater than, greater than or equal to, equal to, and not equal to.equal to.

• If the comparison is true, have program execution jump to the If the comparison is true, have program execution jump to the part of the program marked by the label given in this instruction; part of the program marked by the label given in this instruction; otherwise, continue execution with the next line of the program.otherwise, continue execution with the next line of the program.

Right Right OperandOperand

Left Left OperandOperand

Label Label OperandOperand


Instruction Panel:Compare & Branch

•If the function button with the arrow pointing to the flag is chosen, If the function button with the arrow pointing to the flag is chosen, this indicates a this indicates a unconditional branchunconditional branch. The program will begin . The program will begin execution at the part of the program marked with the label execution at the part of the program marked with the label specified in this panel.specified in this panel.

•No comparison operands are used for this function.No comparison operands are used for this function.

Unconditional Unconditional Branch IconBranch Icon

Right Right OperandOperand

Left Left OperandOperand

Label Label OperandOperand


Instruction Panel:Move

•Move the contents of the source operand to the contents of the Move the contents of the source operand to the contents of the destination operand. There are only a certain number of destination operand. There are only a certain number of combinations of types and structures permitted.combinations of types and structures permitted.

•For operations involving converting a number to its text For operations involving converting a number to its text representation and vice versa, representation and vice versa, it is your responsibility to it is your responsibility to ensure that valid text or a valid number is used for the ensure that valid text or a valid number is used for the conversionconversion..




Instruction Panel:Move

•If the source operand is the If the source operand is the KeyboardKeyboard, user input from the , user input from the keyboard is stored in the destination operand.keyboard is stored in the destination operand.

•If the destination operand is the If the destination operand is the DisplayDisplay, data from the source , data from the source operand is converted to its text equivalent representation and operand is converted to its text equivalent representation and displayed on the screen.displayed on the screen.

DisplayDisplay KeyboardKeyboard




Instruction Panel:Move Characters



•Copy a range of characters from the source operand to replace a Copy a range of characters from the source operand to replace a range of characters in the destination operand.range of characters in the destination operand.

•The operands must be The operands must be character arrayscharacter arrays..

•The range of characters used in the source operand and The range of characters used in the source operand and destination operand must be the destination operand must be the same lengthsame length..


Instruction Panel:Move Characters, Array Range



•To select a range To select a range of characters, click of characters, click one of the array one of the array range boxes with range boxes with the the left mouse left mouse buttonbutton..

•Move the sliders to Move the sliders to obtain the desired obtain the desired array range, and array range, and press press OKOK..

•The result will The result will appear in the array appear in the array range box.range box.


Instruction Panel:Section Comments

•Enter any text information about a part of the program in the text Enter any text information about a part of the program in the text area.area.

•Can be of any length. Scrollbars will appear on the right side of Can be of any length. Scrollbars will appear on the right side of the text box to accommodate viewing of all text typed.the text box to accommodate viewing of all text typed.

•Will “serve” as an instruction in the code but Will “serve” as an instruction in the code but has no effect on has no effect on the execution of the programthe execution of the program..


Writing a Program:Editing Modes

Code Insert ModeCode Insert Mode

Code Overwrite ModeCode Overwrite Mode

•Select an editing mode from the Select an editing mode from the Edit Edit menu.menu.

•Code Insert Mode Code Insert Mode will place the newest instruction in the line will place the newest instruction in the line with the cursor and shift all other instructions down.with the cursor and shift all other instructions down.

•Code Overwrite Mode Code Overwrite Mode will replace the old instruction in the will replace the old instruction in the line with the cursor with the newest instruction. Good for line with the cursor with the newest instruction. Good for editing a single line of the program. Cannot overwrite the last editing a single line of the program. Cannot overwrite the last empty line of code.empty line of code.


Writing a Program:Visual Code Layout

Press the Press the Apply Apply button in the instruction button in the instruction panel to add a line to the program.panel to add a line to the program.



1 Label uniquely identifying the line of code (optional)Label uniquely identifying the line of code (optional)

2 Panel iconPanel icon

3 Left operand (used only with Compare & Branch)Left operand (used only with Compare & Branch)

1 2 3 4

4 Middle operand (Compare & Branch) / Source OperandMiddle operand (Compare & Branch) / Source Operand

Operand restrictions-- Constant: solid line; Variable: dotted lineOperand restrictions-- Constant: solid line; Variable: dotted line



5 6 7 8 9

5

6

7

8

9

Function icon (optional)*Function icon (optional)*

Triangle illustrating data flow Triangle illustrating data flow

Label operand (Compare & Branch) / destination operand Label operand (Compare & Branch) / destination operand

Pseudocode describing instruction in English (* in empty area)Pseudocode describing instruction in English (* in empty area)

Instruction comments*Instruction comments*

* = information pops up when * = information pops up when mouse pauses over the areamouse pauses over the area


Editing a Program:General Procedure

•Highlight the rows of code to Highlight the rows of code to edit.edit.

•Right-click on any part of the Right-click on any part of the visual code area to bring up the visual code area to bring up the menu seen here.menu seen here.

•Select the menu function of Select the menu function of your choice.your choice.

•If performing a If performing a Copy Copy or or PastePaste, , move the cursor to the desired move the cursor to the desired location (this is important)location (this is important)

•Select Select Copy Copy or or Paste Paste from the from the menumenu


Editing a Program:Using the Edit Menu

•CutCut•Remove the line(s) of code from the Remove the line(s) of code from the program and place the line(s) into the program and place the line(s) into the code buffer. Remaining code shifts code buffer. Remaining code shifts upward.upward.

•CopyCopy•Keep the line(s) of code in the program Keep the line(s) of code in the program and place a duplicate of the line(s) of and place a duplicate of the line(s) of code into the code buffer. code into the code buffer.

•PastePaste•Place a duplicate of the line(s) of code Place a duplicate of the line(s) of code into the program at the cursor location. into the program at the cursor location. Remaining code shifts downward.Remaining code shifts downward.

If more than one line of code is If more than one line of code is highlighted and the paste highlighted and the paste operation is performed, the operation is performed, the copied lines of code will first copied lines of code will first overwrite the highlighted lines of overwrite the highlighted lines of code. Then, if there are still more code. Then, if there are still more lines of code, the remaining lines of code, the remaining copied lines of code will be copied lines of code will be inserted into the program.inserted into the program.


Editing a Program:Correcting a Line of Code

•Enter Enter Code Overwrite Code Overwrite ModeMode..

•Move the cursor to the Move the cursor to the program line that you want program line that you want to edit.to edit.

•Select Select Panel for This Panel for This Instruction Instruction from the from the View View Panel Panel menu.menu.

•The appropriate panel will The appropriate panel will appear with all of the appear with all of the operands, function button operands, function button selection, comments, and selection, comments, and label.label.


Editing a Program:Finding an Error

Most errors are detected before you are able to add a line Most errors are detected before you are able to add a line of code to a program. However, it is possible to receive of code to a program. However, it is possible to receive errors later. For instance, if a errors later. For instance, if a Single Value CharacterSingle Value Character named named CHAR CHAR has its type changed to has its type changed to IntegerInteger, it is likely , it is likely that any line of code using that any line of code using CHAR CHAR will have an error. If a will have an error. If a line has an error, the background of the line will become a line has an error, the background of the line will become a shade of red. When the error has been corrected through shade of red. When the error has been corrected through editing, it will no longer have a red color.editing, it will no longer have a red color.

•Move the mouse Move the mouse cursor over the cursor over the erroneous line erroneous line and pause.and pause.

•Text will appear Text will appear indicating the indicating the reason for the reason for the error.error.

•Correct the error Correct the error by editing the line by editing the line or by changing or by changing data object data object properties in the properties in the Object EditorObject Editor..


Save Program•Save As: Save As: Select a file from Select a file from the list of available Panel-Tools-the list of available Panel-Tools-Views files (.ptv), or type the name Views files (.ptv), or type the name of the file in the of the file in the File Name File Name field (no field (no extension is required). If the file extension is required). If the file name already exists, you will be name already exists, you will be asked if the new version should asked if the new version should replace the old version.replace the old version.

•Save:Save: The first time the The first time the program is saved, it will act as program is saved, it will act as Save Save AsAs. Otherwise, file will save without . Otherwise, file will save without any other intervention.any other intervention.

•The name of the file does not The name of the file does not have to resemble the program have to resemble the program name but must adhere to the file name but must adhere to the file naming conventions of the OS.naming conventions of the OS.


Save Program

If a file has not been saved, the word “unsaved” surrounded by [ ] If a file has not been saved, the word “unsaved” surrounded by [ ] will appear after the name of the program.will appear after the name of the program.

Once the file has been saved, the “unsaved” surrounded by [ ] will Once the file has been saved, the “unsaved” surrounded by [ ] will disappear.disappear.


Generate Assembly Code•This functions the same as saving This functions the same as saving the file except that the saved file the file except that the saved file has naming restrictions tied to MS-has naming restrictions tied to MS-DOS file naming conventions. No DOS file naming conventions. No filename extensions should be filename extensions should be used.used.

•Assembly code will be written to Assembly code will be written to the given file the given file only if only if there are no there are no errors in the code. A message will errors in the code. A message will appear indicating if the file was appear indicating if the file was created.created.

•To view the assembly language To view the assembly language file, open the file in your favorite file, open the file in your favorite text editor.text editor.


Running theAssembly Language Program

•Open a program Open a program named named CAS.EXECAS.EXE

•Select Select Run a Run a ProgramProgram from the from the menu by pressing the menu by pressing the “R” key.“R” key.

•Enter the name of the Enter the name of the assembly file (use full assembly file (use full pathname if pathname if necessary, or copy the necessary, or copy the file to the directory of file to the directory of CAS.EXECAS.EXE).).


Running theAssembly Language Program

•The important aspect is to The important aspect is to interact with the program. interact with the program. So, if you see a screen So, if you see a screen similar to the one here, similar to the one here, press the “G” key at the press the “G” key at the prompt to prompt to GoGo to continue to continue execution of the program.execution of the program.

•Repeat this each time this Repeat this each time this screen appears.screen appears.

•One execution is One execution is complete, you should complete, you should return to the main menu return to the main menu screen.screen.

Once execution is complete, you can Once execution is complete, you can view a “log file” of the execution in a text view a “log file” of the execution in a text file (.txt) having the same name as the file (.txt) having the same name as the assembly language program.assembly language program.


Finding Errors in theAssembly Language Program

•If there are errors in the program, execution may stop prematurely or If there are errors in the program, execution may stop prematurely or an error message will appear. To fix this error, open the text file (ex. an error message will appear. To fix this error, open the text file (ex. PROG1.TXT, where PROG is the name of the assembly language PROG1.TXT, where PROG is the name of the assembly language program), and search for the error.program), and search for the error.

•The error is highlighted here. A $ appears at the location of the error The error is highlighted here. A $ appears at the location of the error followed by the error message below.followed by the error message below.


Finding Errors in theAssembly Language Program

•The error is caused implicitly. The error is caused implicitly. Labels cannot be defined, so Labels cannot be defined, so when a label is used in when a label is used in Compare & BranchCompare & Branch, a line of , a line of code code must exist must exist that is that is identified by this label; identified by this label; otherwise, an error like this will otherwise, an error like this will occur.occur.

•From this, a lesson should be From this, a lesson should be learned that not every error will learned that not every error will be caught by PTV (although be caught by PTV (although this one could have), but most this one could have), but most will. The awareness of how the will. The awareness of how the assembler works is important assembler works is important in debugging errors.in debugging errors.

After you have determined an error, edit After you have determined an error, edit the program in PTV to correct the error. the program in PTV to correct the error. Then repeat the process of generating Then repeat the process of generating the assembly code and running the the assembly code and running the assembly language program. assembly language program.


Help is Available•While using the program, While using the program, simply select the simply select the Help Help menu to menu to obtain help on a number of obtain help on a number of different topics discussed in different topics discussed in this introduction.this introduction.

•A window will appear containing the A window will appear containing the information you requested.information you requested.


Enjoy coding.

electronic visualization laboratory university of illinois at chicago panels, tools, and views: user...

Documents