computer science
aicha1990
FinalPresentation_Flowchart_Generator1.pptxFLOWCHART GENERATOR
Graphical Representation of Decision Tree
Adetoun Akisanya
Kennedy Donkor
Zelzah Guzman
Courtney Sumby
Jameson Travers
AGENDA
Introductions
Description of Project
Responsibilities
Demo of Program
Program Breakdown
Future Improvements
Description of Project
A program that could create an automated customizable flowchart
Depicting multiple qualitative and quantitative data
Similar to Minard’s “Napoleon's Russian March”
Minard’s “Napoleon's Russian March”
Praised by statisticians as “the best statistical drawing ever created”
Displayed multiple types of data like temperature, topography, size of French and Russians forces all in one graphic
Easily tells the tale of why Napoleon's March was a failure
Project Goal: Create a flowchart maker that could help visualize how a particular decision was arrived at
Project Goals
Develop and create a desktop application that allows the user to generate a flowchart to aid in visual representation of biological data
Gives the user the ability to outline major decision points while allowing further edits and revisions by the user
Includes abilities for customization by the user such as:
Color
Font
Utilization of different flowchart shapes
Automation
Responsibilities
Courtney
User input data
Kennedy
Output of flowchart to a file
Adetoun
Flowchart graphics & shapes
Zelzah
Flowchart layout automation, pathway weight input, integration
Jameson
Look & feel of the GUI
GitHub
Version control and source code
management tool
Created by Zelzah
Project Collaboration
Central place to store and collaborate on each portion of the code
Program Demo
Demo Here
Screen Recorded Software Demo. Closed captions for accessibility. Control+click to follow link if using downloaded .ppt
Program Breakdown: UI/UX Considerations
User Experience: the UX consists of the users perception of use or anticipated use of the potential product while also encompassing their responses or reactions to their actual use of the product. UX itself can additionally be broken down into four components
Value → represents the inherent usefulness of the product
Usability → accounts for the ease of use of the product
Adoptability → similar to ease of use, but more specifically refers to the initial user engagement with the product
Desirability → refers to how engaging or “fun” the app is during consumer engagement
Program Breakdown: UI/UX Considerations
Usability
It is defined as “ The extent to which a product can be used by the specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use” by the International Organization for Standardization (ISO) 9241-11 Standards Guide.
This dictates that the ability to achieve objects or task completion can be used an objective metric for the measurement of task achievement; which is not primarily related to the overall UX but is more secondary in the fact that easy, high quality, repeatable task completion is desirable and therefore contributes indirectly to the UX.
Agility
Agile software development is “a group of methods based on iterative and incremental development, where requirements and solutions evolve through collaboration between self-organizing, cross-functional teams. It promotes adaptive planning, evolutionary development, and delivery, a time-boxed iterative approach, and encourages rapid and flexible response to change.
Program Breakdown: Tkinter
Standard Python GUI framework
Built in and easily accessible to all team members
Cross platform - accessible on operating systems
Basic Framework
Import Tkinter module
Establish the GUI application main window
Insert widget(s) i.e Canvas
Enter the main event loop to perform each event when triggered by the user
Program Breakdown: Canvas
Class in Tkinter
Offers built in constructors like “create_rectangle” & “create_line” can we used to generate flowchart shapes
Involved understanding of window geometry
Program Breakdown: Window Geometry
Used to achieve placement of different objects in a window
Without understanding, objects could end up on top of one another
Used Grid Pane as well
Program Breakdown: Step One
Step One Explained
In the first stage of the diagram generation process, the default values for font, decision node outline color, and decision node shape are collected from the user. In addition, the user can input the chart title. The chart title is displayed on every screen in the top bar, and becomes the default file name when the chart is saved.
Program Breakdown: Step Two
Step Two Explained
In the second stage of flowchart generation, the user is prompted to enter the names of each of the steps, as well as the shape of the decision node for each individual step. The shape is set by default to the global default configuration value from the first step.
Program Breakdown: Step Two
Continuation of Step Two
Continuing with the second stage of flowchart generation, the user can enter the number of outgoing pathways from each decision node. When the number of outgoing pathways is changed, the number of rows requesting the pathway destination, description, and line color is changed.
Program Breakdown: Step Three
Step Three Explained
In the third stage of flowchart generation, the user is asked how many times each pathway through the flowchart was observed. Determining a reasonable user interface for this section was difficult, as there is a lot of information, but it was eventually decided to use a tree-like layout where each pathway is indented to a level corresponding to its level in the graph. Each step also states the starting node name, path name, and destination node name to assist the user with determining where the appropriate location for an input is.
Note: for convenience, any step named “Not Observed” is assumed to have no pathways leading to it. In addition, because the layout is still extremely dense, fields which have not been changed yet are colored orange so that the user can see what fields still need values entered, and each
Program Breakdown: Step Three
Further Explanation of Step Three
The figure below shows the user interface after entering the pathway counts for the example diagram given to us by Dr. Ray.
Program Breakdown: Step Four
Step Four Explained
This figure shows the UI at the start of the fourth and final stage of flowchart generation. To generate this layout, the program automatically uses a three-stage process to lay out the nodes. In the first stage, the rows of nodes are set so that all pathways proceed from the top of the screen to the bottom of the screen. In the second stage, the columns of nodes are set so that any time multiple nodes are in the same row, they are placed in columns as far apart from each other as possible. In the third stage, the pathways are placed so that they align at any points where they split, and diverge afterwards, in accordance with Dr. Ray’s example diagram.
Program Breakdown: File Output
File Output Explained
This figure shows that the user can save the file. Currently, saving the file as an image is not an available option due to the requirement to include additional software libraries to implement that change, which would make distribution of the software much more difficult. However, diagrams can be saved and loaded, and the natively included screenshot tools on all platforms should suffice for the generation of images.
Future Improvements
Creating a BACK button
To return to previous steps to correct errors or change fields
Improving the visual graphics of the layout
Layout of pathways
Add more customization of flowchart shapes
Triangle
Rounded Rectangle
Questions?
