Flow-following chart generator:
Flow charts represent possibilities, but there is an adjunct chart idea that represents the population of actualized paths chosen through the chart by some group of actors. This project involves developing an application to automatically generate actualized-flow charts. Canonical flow-charts can’t be used for something like reaction pathways, but there are some reasonably simple modifications to them that would let them be applied to this kind of data.-
TeamBees-ProjectStatusPresentationFinal12.pptx -
FinalPresentation_Flowchart_Generator1.pptx
-
LearningContractExample.pdf
-
LearningContractActivityWorksheetWord5.docx
-
LearningContractActivityWorksheetWord5.docx
-
LearningContractActivityWorksheetWord5.docx
-
LearningContractActivityWorksheetWord5.docx
-
LearningContractActivityWorksheetWord5.docx
-
LearningContractActivityWorksheetWord5.docx
-
LearningContractActivityWorksheetWord5.docx
-
LearningContractActivityWorksheetWord5.docx
Capstone Project: Flow-following Chart Generator
Adetoun Akisanya, Kennedy Donkor, Zelzah Guzman, Courtney Carrington Sumby, Jameson Travers
Project Goals
Add summary of project goals
Develop & Create a desktop application that allows its user to generate a flowchart to aid in visual representation of biological data
Gives its user the ability to first outline major decision points but then proceeds to allowing further edits and revision to made by user
Include abilities for customization as the user sees fit such as:
Color
Font
Utilization of different flowchart shapes
Courtney – Task Outline
Responsible for prompting User input in python code
Flowchart Title
Number of Entry Fields
FlowChart Symbols
FlowChart Color
FlowChart Font
Courtney – Progress
Create Basic interface for user input
Sample Code
Courtney – Progress
Create Basic interface for user input
Sample Code
Courtney – Progress
Create Basic interface for user input
Sample Interface
Courtney – Action Items
Continue learning Tkinter to improve interface
Familiarize with Flowchart terminology to ensure correct verbiage is used
Store each user input into a variable to be used further in the program
Combine input code with other teammates code for final program
Zelzah – Progress
Set up github repository for the group to collaborate on the project
The github repository contains our code and documentation
Additionally, github is a version control system, which means that it saves every version of the software we have ever written, when it was written, and what the changes from the last version were
This is useful because if something breaks we can go back to a working version from before it was broken
Also apparently git has something called “branches” which might be useful for people to work on their stuff independently, but I need to look into this more
Zelzah – Progress
Set up basic conventions for how the program will be structured
The basic pattern we will be using is called Functional Reactive Programming
This means that you just delete everything and rebuild it any time any of the data changes for your program, so you only have to worry about “what data changes” and “how do I go from this data to my UI” instead of “when this data changes, I need to figure out all the places in the UI that are affected”.
Zelzah – Progress
Set up basic conventions for how the program will be structured (cont)
The “state” variable contains all of the data you need in order to display things to the user. This includes the shape of the graph, the shapes, colors, positions, and text of all the nodes, and everything like that, but it also includes things like which node is currently selected and whether or not we’re dragging a node to a new position (and, if so, where we’re dragging it from).
If you export the state variable, then import it into a new copy of your program, the new copy will look exactly the same as the old copy.
The state variable is the only global variable that will change.
Zelzah – Progress
Set up basic conventions for how the program will be structured (cont)
The “render” method is a method that takes the state and outputs the entire UI, including both the flowchart and also the buttons that define what the user can do.
Basically every time anything changes, we delete the entire UI and then redraw it
This means we can never get bugs where something works and then suddenly fails after you export and import.
Zelzah – Progress
Set up basic conventions for how the program will be structured (cont)
Whenever a user performs an action, we should call a method that does two things, in order.
Make whatever changes are necessary to the “state” variable (i.e. if a user clicks “deselect all” it will set all nodes and edges to not be selected)
Call render()
Zelzah – Progress
Created a basic proof of concept program
Used the conventions to build a very rough GUI which allows you to move two nodes connected by an arrow
This skeleton can be extended into the full program
It is not a complete working program, but as they say, a complicated thing that works starts from a simple thing that works
My Beautiful Demo
Zelzah – Action Items
Make the shape of the diagram look like the one provided by Dr. Ray
Write automation for turning the lists of nodes and edges into the basic appearance on the right — basically the parts of the render() method that involve making sure everything is in roughly the right place, though
(Jameson will be responsible for making it look professional)
Zelzah – Deviations
Programming is hard and it took longer than I expected to get even something very basic working
Still on schedule for now though
Adetoun – Task Outline
Insert each team member’s task
Tasked with researching, developing and integrating any statistical codes that will be utilized by team to develop project such as HMM.
Develop code for decision trees to be implemented in flowchart generator
Develop code for flowchart various flowchart buttons & windows
Adetoun – Progress
Insert each team members progress so far here
Upon further research, HMM and decision tree will not be needed
This prompted a shift to the GUI aspect of the web application
Particularly the graphics
Research available libraries of flowchart graphics and shapes compatible with Python
Currently completing a course on using TKinter
Adetoun – Action Items
Insert what we need to further complete
Develop current pseudocode into programmable language for flowchart button, fonts, and graphics
Integrate code to with teammates work using Jupyter Notebook & github
Adetoun – Deviations
Problems or changes to the original outline
Completion of Tkinter course is taking longer than anticipated
Spent a significant amount of time researching decision trees and statistical models but not necessary
Division of labor and implementation
Jameson – Task Outline
Tasked with the overall aesthetic design of the flowchart GUI
Research and find pertinent object libraries to implement within the GUI to allow for user choice with regards to the boxes, arrows, etc. within the generated flowchart
Make sure the layout of the GUI is easy to navigate while providing an adequate user experience during use of the app.
Jameson – Progress
Thus far, we found a good python library of shapes to use with flow chart generator: pyglet. We will be using it to implement choice for the user in regards to how their flowchart will look once generated.
Have been doing some training classes/exercises for Tkinter to familiarize myself with framework in order to create a draft of the final layout.
Jameson – Action Items
Need to finish Tkinter training and become familiar with the GUI framework it provides.
Need to finish a first draft of the Generator GUI layout.
Work with Adetoun on implementing the pyglet library
Plug underlying code from other group members into the input/button layout.
Jameson – Deviations
No problems or changes from the previous outline.
Just need to finish my Tkinter introduction exercises and generate a rough draft of the layout.
Once we have a general layout we can begin to implement the shapes library underneath.
Kennedy – Progress
Responsible for ensuring the final output of the file
Ask the user if they are satisfied with their input
Print the flowchart to screen
Output the file into a folder of choice for the user
Kennedy – Sample Code 1
import os.path
def main():
file="abcdefg"
userselect=input("Yes or No: ") #asking the user if they are happy with their work
if userselect=="Yes": #what happens if the user is happy
spath=input("Enter where you want file saved: ") #the directory where they want their file saved
filename=input("Name of the file: ") #naming given to the file
Kennedy – Sample Code 2
fullname=os.path.join(spath, filename + ".txt")#making it a text file
outputfile=open(fullname, "w")#saving the file
finalfile=file
outputfile.write(finalfile)#writing what to save in that file
outputfile.close()
Kennedy – Sample Code 3
print()
print(file)#printing the file to the screen
else:
print("Double check your work")
#code adapted from codegrepper.com
main()
Updated Project Timeline
Week 5: September 21st – Present pseudocode & code infrastructure
Week 6-8 September 28 to October 12 – complete program requirements
Week 9 October 19 – Finish & refine program components and code
Week 10 October 26th – Finish & refine final report
Week 11 November 2 – Finish & refine final presentation
image2.jpg
image3.png
image4.png
image5.png
image6.png
image7.png
image8.png
image9.png
image10.png
image11.jpg
image12.png
image13.png
image1.png
,
FLOWCHART 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?
image1.png
image2.png
image3.png
image4.png
image5.jpg
image6.png
image7.png
image8.png
image9.png
image10.png
image11.png
image12.png
image13.png
,
Workplace Learning – Learning Contract Cover Page
Name: Date:
Work Phone: Home Phone:
E-mail address:
Employer (Name of firm):
Employer Address:
Supervisor's name:
Supervisor's title:
Supervisor's phone:
Workplace Learning Term: □ Fall □ Spring Summer Year:
Course and section: Number of credits:
Start date: End date:
Date Learning Contract due:
Your educational goal from this course experience:
After completing one copy of the Learning Contract cover sheet, prepare one Learning Contract worksheet
for each work activity listed in your Learning Proposal describing your new work activities that will provide
new learning to be demonstrated through your Workplace Learning experience.
Jane Example 6/8/2019
555-555-5555 555-555-5555
Example Employer
555 Example Lane, Example, MD 20783
Mary Example
Postdoctoral Researcher
555-555-5551
■ 2019
BIOL 486B 6
May 22, 2019 July 31, 2019
June 9, 2019
To become familiar and adjusted to the laboratory work environment and culture,
and to learn new laboratory techniques and skills while performing research.
,
LEARNING CONTRACT WORKSHEET
Work/Learning Activity #
1. Provide a description of this activity:
2. Expected completion date of this activity:
3. Resources required to complete this activity:
4. How will the outcome of this activity be demonstrated (what demonstration of learning or deliverable will be created)?
5. Method by which your faculty mentor and work supervisor will evaluate the outcome of this activity:
7. Approval of this activity. Secure the following signatures:
3501 University Boulevard East, Adelphi, MD 20783 USA | 800-888-8682 | UMGC.edu
Work Supervisor: Faculty Mentor:
Student:
Date: Date:
Date:
image1.png
,
LEARNING CONTRACT WORKSHEET
Work/Learning Activity #
1. Provide a description of this activity:
2. Expected completion date of this activity:
3. Resources required to complete this activity:
4. How will the outcome of this activity be demonstrated (what demonstration of learning or deliverable will be created)?
5. Method by which your faculty mentor and work supervisor will evaluate the outcome of this activity:
7. Approval of this activity. Secure the following signatures:
3501 University Boulevard East, Adelphi, MD 20783 USA | 800-888-8682 | UMGC.edu
Work Supervisor: Faculty Mentor:
Student:
Date: Date:
Date:
image1.png
,
LEARNING CONTRACT WORKSHEET
Work/Learning Activity #
1. Provide a description of this activity:
2. Expected completion date of this activity:
3. Resources required to complete this activity:
4. How will the outcome of this activity be demonstrated (what demonstration of learning or deliverable will be created)?
5. Method by which your faculty mentor and work supervisor will evaluate the outcome of this activity:
7. Approval of this activity. Secure the following signatures:
3501 University Boulevard East, Adelphi, MD 20783 USA | 800-888-8682 | UMGC.edu
Work Supervisor: Faculty Mentor:
Student:
Date: Date:
Date:
image1.png
,
LEARNING CONTRACT WORKSHEET
Work/Learning Activity #
1. Provide a description of this activity:
2. Expected completion date of this activity:
3. Resources required to complete this activity:
4. How will the outcome of this activity be demonstrated (what demonstration of learning or deliverable will be created)?
5. Method by which your faculty mentor and work supervisor will evaluate the outcome of this activity:
7. Approval of this activity. Secure the following signatures:
3501 University Boulevard East, Adelphi, MD 20783 USA | 800-888-8682 | UMGC.edu
Work Supervisor: Faculty Mentor:
Student:
Date: Date:
Date:
image1.png
,
LEARNING CONTRACT WORKSHEET
Work/Learning Activity #
1. Provide a description of this activity:
2. Expected completion date of this activity:
3. Resources required to complete this activity:
4. How will the outcome of this activity be demonstrated (what demonstration of learning or deliverable will be created)?
5. Method by which your faculty mentor and work supervisor will evaluate the outcome of this activity:
7. Approval of this activity. Secure the following signatures:
3501 University Boulevard East, Adelphi, MD 20783 USA | 800-888-8682 | UMGC.edu
Work Supervisor: Faculty Mentor:
Student:
Date: Date:
Date:
image1.png
,
LEARNING CONTRACT WORKSHEET
Work/Learning Activity #
1. Provide a description of this activity:
2. Expected completion date of this activity:
3. Resources required to complete this activity:
4. How will the outcome of this activity be demonstrated (what demonstration of learning or deliverable will be created)?
5. Method by which your faculty mentor and work supervisor will evaluate the outcome of this activity:
7. Approval of this activity. Secure the following signatures:
3501 University Boulevard East, Adelphi, MD 20783 USA | 800-888-8682 | UMGC.edu
Work Supervisor: Faculty Mentor:
Student:
Date: Date:
Date:
image1.png
,
LEARNING CONTRACT WORKSHEET
Work/Learning Activity #
1. Provide a description of this activity:
2. Expected completion date of this activity:
3. Resources required to complete this activity:
4. How will the outcome of this activity be demonstrated (what demonstration of learning or deliverable will be created)?
5. Method by which your faculty mentor and work supervisor will evaluate the outcome of this activity:
7. Approval of this activity. Secure the following signatures:
3501 University Boulevard East, Adelphi, MD 20783 USA | 800-888-8682 | UMGC.edu
Work Supervisor: Faculty Mentor:
Student:
Date: Date:
Date:
image1.png
,
LEARNING CONTRACT WORKSHEET
Work/Learning Activity #
1. Provide a description of this activity:
2. Expected completion date of this activity:
3. Resources required to complete this activity:
4. How will the outcome of this activity be demonstrated (what demonstration of learning or deliverable will be created)?
5. Method by which your faculty mentor and work supervisor will evaluate the outcome of this activity:
7. Approval of this activity. Secure the following signatures:
3501 University Boulevard East, Adelphi, MD 20783 USA | 800-888-8682 | UMGC.edu
Work Supervisor: Faculty Mentor:
Student:
Date: Date:
Date:
image1.png
