GUI Design
From SoftwarePractice.org
The creation of a GUI for this Project required the utilisation of GUIDE (Graphical User Interface Development Environment) in Matlab.
GUIDE provides a Layout Editor which simplifies the process of designing the GUI, by simply dragging elements such as buttons and menus onto a blank grid "canvas".
Once the layout of the GUI had been created (as a .fig file), the next step was to program the GUI. This involved editing the M-file (created by the Editor) to alter or implement additional callbacks using handles. Callbacks determine what happens when a user clicks a button or any other component of the GUI.
An overall design specification needed to be completed to determine the required GUI layout and functions for our Project.
Initial Design
At an early stage, the following requirements were evident:
- Controls to allow user to input image
- A display of the input image
- A display of the image following application of processing techniques
- Buttons for the user to control the program (eg. "Decode")
- A textfield to display messages to the user (such as error messages, or results of image analysis)
- A textfield to display the decoded barcode output
The following is a sketch diagram of our initial GUI layout plan:
Final Design
The GUI underwent several alterations to enhance its operation. Some of these included:
- Displaying “Please wait, processing image…” in the Results and Error Messages boxes while the program was processing the image
- The addition of a Reset button to clear all messages and the output image from the display
- The Resize Listbox was removed as automatic resizing operations were integrated into the Matlab code
- A Noise Elimination Checkbox was added when this advanced operation was developed as a function in our code
- An Extended Ascii Checkbox was added when the program was enhanced to utilise this mode
The following is an image of the .fig file of our GUI to illustrate the final layout using GUIDE. The default setting of the Full Ascii Checkbox was set to 1 (ticked) as all of our sample barcodes were in fact Full Ascii barcodes
The following is the Object Browser as utilised in GUIDE to show the hierarchy of the GUI figure
The following is a screenshot to illustrate the final GUI. We were very satisfied that our program was able to successfully read this very blurred image of a barcode
Program Control and Error Messages
In order to stop the program at any point when an error occurred or a test failed, we utilised error codes throughout the Matlab functions. For example, if an error was to occur close to the start of the reading process, we wanted the program to abort further processing and display an error message on the GUI. The following table lists our error codes and their corresponding error messages:
| Error Code | Error Message |
|---|---|
| 0 | Read OK |
| 1 | No barcode found in image |
| 2 | No barcode found in output |
| 4 | Thin/Wide ratio incorrect |
| 6 | No star character found in training |
| 8 | Missing elements from the training process |
| 12 | Incorrect # of elements from preprocessor |
| 22 | White space test failed |
| 24 | Character/s not 3 Wide, 6 narrow |
| 26 | No trailing star found |
| 28 | Checksum Error |
| 29 | Character/s not found in lookup table |
The following is a screenshot of the GUI to illustrate the display of an error message
The barf image (for those of you who have seen Spaceballs) was used in the hope of at least mildly humouring some of you :)
To return to main page of Team B click here Bar code reading from image
