LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

CHAPTER I
INTRODUCTION
This section discusses the background, objectives, significance and scope and
delimitation of the study. It provides information about the study.

Background of the Study

Frank Gilbreth, an American engineer is widely believed to be the first person to
document a process flow in 1921. He introduced the concept to the American Society of
Mechanical Engineers and people working in industrial engineering and manufacturing
quickly adopted the approach, and now organizations use flowcharts for a wide variety of
reasons.
Flow charts are diagrams that is easy-to-understand, it shows how the steps in a
process fit together and its simplicity makes the useful tools for communicating how
work, processes and for documenting how to do a particular job. Flow chart diagram
helps map out a process and will clarify your understanding of it, and helps you improve
it.
On this generation, students that studies programming languages such as C, C++,
Java, C# etc., are required to study on how to create a flowchart and a pseudo code.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

1

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

Learning this diagrams helps an aspiring programmer to purely understand on how a
certain system/project works. Creating a flow chart and a pseudo code is easy but coding
for a beginner is a different situation.
The main objectives of this research is to minimize the time and gives ease for the
students and for them to focus much more on creating and improving the system flow. It
will also help them to understand the coding process through our information guide on
the application.

Objectives of the Study

The project will develop EasyCode: Flowchart to Programming Code for
programming students and novice C# programmers with implementation of Image
Processing Algorithm for Shapes and Text.
Specifically, the project aims to:
1. Provide C# coding tutorials to students for them to have a better
understanding.
2. Help novice programmers to differentiate C# Programming Language to
3.
4.
5.
6.

other programming languages.

Provide users to input flowchart image for more time efficient coding.
Build solutions using intuitive flowcharts.
Learn programming fundamentals in a classic manner.
Experience the difference that comes from learning logic and design rather
than syntax in a programming class.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

2

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

Significance of the Study
The goal of the study is to develop EasyCode: Flowchart to Programming Code
for programming students and novice C# programmers with implementation of Image
Processing Algorithm for Shapes and Text. This study is significant since the system will
be implementing an image processing algorithm that will allow the system to process the
images shapes and text. In addition, the system will be having Tutorials and
Documentations with regards to C# programming that will help users to understand the
coding process.
This study is considered important since it will be given information to the
following groups:

Programming Students. They will be major beneficiary of the study considering

that they are still students, needed to be taught. This system will be able to help them in
their programming lessons. Coding will be easy because of the tutorials that will assist
them through.

Novice C# Programmers. This study will also beneficial to all aspiring

programmers that are still starting to learn C# programming language. The system will
help them develop C# programming language understanding and be able to compare it
with other programming languages. It will also be convenient for them because they can
view the codes and run the program easily.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

3

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

Teachers. Mentors also need educational tools like EasyCode. This system will
provide as one of their teaching paraphernalia for students whos having a hard time
understanding programming lessons and how to create flow charts.

Future Researchers. This information will provide as their guide and template in
doing a research related to image processing, computer vision, and image & text
recognition. It will also help those collecting ideas and understanding the topics of the
study.

Scope and Delimitations of the Project

EasyCode: Flowchart to Programming Code Implementing Image Processing
Algorithm for Shapes and Text is limited for C# Programming Language only. It cannot
convert flowcharts for any Object-Oriented Programming. The accuracy of the
conversion will be based on the clarity of the captured flowchart. Figures that the system
will be able to convert is based on the standard flow charting methods. The system
focuses primarily on helping anyone that wants to learn how to program. The system
helps them to learn fast and easy with tutorial on C# Programming Language.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

4

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

CHAPTER II

LITERATURE REVIEW

This chapter contains literatures and studies that are related to the topic of the
study. The following related literature and studies that will be discussed will be part of
the study in designing the system.

Related Literature

Flowchart.

Flowchart explained by (SimpSon, Terrell 2014) is made up of

graphical symbols which are connected together by straight lines. Arrow-heads are drawn
on the connecting lines to indicate the direction of flow in the program. The start and end
of the flowchart is indicated by the terminal symbol and obviously it is connected to the
flowchart by only one line. The rhomboid symbol is used to show a specific operation by
an input or output device. The rectangle symbol is used to indicate that a specific action
is to be taken. A statement inside the rectangle specifies the action, and this may be stated
in plain English, or alternatively it could be a logical or algebraic expression. The
diamond symbol is used to indicate the point in a program at which a decision has to be
made.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

5

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

(Patel, 2012) explains that flowchart is a diagrammatic or pictorial representation
of an algorithm. In other words, A flowchart is a diagrammatic representation that
explains the sequence of operations to be performed to solve a problem.
The focus of the system is to convert a photographed flowchart into C#
programming code, which makes flowchart a vital component for this study.

K-Nearest Neighbors Algorithm. Based on (Solem 2012) K-Nearest Neighbors

Algorithm is one of the simplest and most used methods for classification is the k-nearest
neighbor classifier (kNN). The algorithm simply compares an object (for example a
feature vector) to be classified with all objects in a training set with known class labels
and lets the k nearest vote for which class to assign. This method often performs well but
has a number of drawbacks. Same as with the k-means clustering algorithm, the number k
needs to be chosen and the value will affect performance. Furthermore, the method
requires the entire training set to be stored and if this set is large it will be slow to search.
For large training sets some form of binning is usually used to reduce the number of
comparisons needed. On the positive side, there are no restrictions on what distance
measure to use, practically anything you can think of will work (which is not the same as
saying that it will perform well). The algorithm is also trivially parallelizable.
(Bijalwan 2014) The basic idea is to determine the category of a given query
based not only on the document that is nearest to it in the document space, but on the
categories of the k documents that are nearest to it.
The proponents use kNN Algorithm in the proposed system.
COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE
6

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

C# Programming Language. C# is a simple, modern, object-oriented,

versionable, compatible, flexible, interoperable and type safe programming language
originated from C and C++ according to (Patel 2012). It combines the prominent features
of modern programming languages like C++, Java, Visual Basic, etc. It is used mainly to
create .NET applications. The .NET is the most modern development platform of
Microsoft that enables the development of component-based applications. The .NET
platform supports more than 20 different languages to be the most efficient compiler in
the .NET family and a major part of the .NET base classes libraries itself are written in
C#.
(Perkins 2015) mentioned that C# is one of the languages that can be used to
create applications that will run in the .NET CLR, it is an evolution of the C and C++
programming language and has been created by Microsoft specifically to work with
the .NET Platform.
Applying C# as our programming language will help the proponents accomplish
the proposed system will be easier and efficient.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

7

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

Related Studies
In this section, the developers only selected studies that are applicable in the
development of the proposed system. The gathered studies will be useful to the
developers to develop a curriculum and syllabus generator

Performance Evaluation of OCR on Poor Resolution Text Document Images Using

Different Preprocessing Steps

The performance of optical character recognition (OCR) algorithm is poor on low

resolution scanned text images. The conventional low pass filters in L2 space can slightly
improve the performance. The method of enhancement of poor resolution text images
using a low pass signal filtering algorithm in the weighted Sobolev space results in high
pass correction similar to un sharp masking.
This can further improve the performance of OCR on low resolution text images.
In this paper, the performance of a typical OCR system on low resolution scanned text
images, is studied without using any preprocessing step, with low pass filtering in L2
space, and compared with low pass filtering in weighted Sobolev space as preprocessing
steps.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

8

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

This study is different from the proponents study because it only enhances OCR
using the algorithms. Also, this study focuses on performance evaluation of the OCR.

Flowgen: Flowchart-Based Documentation framework for C++

Flowgen framework, which generates flowcharts from annotated C++ source

code. It generates a set of interconnected high-level UML activity diagrams, one for each
function or method in the C++ sources. It provides a simple and visual overview of
complex implementations of numerical algorithms.

Flowgen is complementary to the widely-used Doxygen documentation tool. The

ultimate aim is to render complex C++ codes accessible, and to enhance collaboration
between programmers and algorithm or science specialists. We describe the tool and a
proof-of-concept application to the VINCIA plug-in for simulating collisions at CERN's
Large Hadron Collider.

This study is helpful to the developers. This study or software has given an idea
on what features will be needed in our Easycode: Flowchart to Programming Code.

Pattern Recognition using the Fuzzy c-means Technique

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

9

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

In the field of pattern recognition due to the fundamental involvement of human

perception and inadequacy of standard Mathematics to deal with its complex and
ambiguously defined system, different fuzzy techniques have been applied as an
appropriate alternative. A pattern recognition system has to undergo basically the steps of
preprocessing, feature extraction and selection, classifier design and optimization.

In our work the data we have analyzed is in the form of numerical vectors, with a
number of clusters predefined. Therefore, the fuzzy c-means technique of Bezdek has
been considered for our work. Although in the fuzzy c-means technique Euclidean
distance has been used to obtain the membership values of the objects in different
clusters, in our present work along with Euclidean distance we have used other distances
like Canberra distance, Hamming distance to see the differences in outputs.

Pattern recognition is a field whose objective is to assign an object or event to

one of a number of categories, based on features derived to emphasize commonalities.

This algorithm help our proposed study to develop the image processing we need
to our software.

Flowgorithm

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

10

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

Flowgorithm is a free application that lets you create programs using flowcharts.
You can concentrate on the logic of the program rather than the details of a specific
language. If you plan to move on to a high-level language, Flowgorithm can interactively
create code from your flowchart. This software was created at Sacramento State
University
Typically, programs are written using a text editor. Depending on the
programming language, this can be either easy or quite difficult for a beginning
programmer. Many languages require you to write lines upon lines of confusing code just
to get it to display "Hello, world!
However, using Flowgorithm, you can use shapes to represent the different
actions that you want your program to perform. So, you can concentrate on the algorithm
rather than all the nuances and details of a typical programming language.
The study helps the proponents to have an idea how to convert flowchart to code.

Optical Pattern Recognition System and Method for Verifying the Authenticity of a
Person, Product or Thing

Credit card fraud is a serious problem facing many banks, businesses, and
consumers. This invention aims at securing credit cards, passports, high security IDs, and
other IDs so that they cannot be reproduced. In addition, counterfeit parts such as

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

11

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

computer chips, machine tools, etc. are arriving on our shores in great numbers. Recently
a news item revealed that a ATM machine had been rigged to read conventional bank
cards and decipher their PIN (personal identification number)
A method of verifying the authenticity of an object is disclosed preferably
employing a joint transform coherent optical processor. An unreadable and hence noncounterfeit able phase mask is coupled to the object and the optical processor compares
the phase mask with a reference phase mask having the same phase code thereon.
The processor produces a correlation spot having an intensity which exceeds a
given level if the phase mask is genuine. A highly secure ID or credit card also carries a
fingerprint bonded to the phase mask, and the fingerprint on the card is compared to a
reference fingerprint of the card holder for added security.
The study gives us the idea in combining character recognition and optical pattern
recognition in one process.

Synthesis
The proponents researched studies discussed above really contributed to the
process of development of the system proposed by the proponents. Some studies above
implemented different image processing methods that can be used for better recognition
of patterns, images, text, and shapes.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

12

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

Also the study of Flowgorithm cited above had given the proponents the ideas on
how to deal with interactive flowcharting with conversion to codes. Some studies related
to flowchart to code conversion and vice versa also contributed for the development of
the system in which the proponents had given attention of the studys main purpose
which makes it the same purpose with the proponents main purpose.
Conceptual Framework of the Project
The conceptual framework of the project will show the input, the Process and the
Output of the Application. It will also show the requirements needed in the project.

INPUT

PROCESS

OUTPUT

Waterfall Model

o
o

Knowledge Requirements

C# Programming
Image Processing

Flowcharting

Software Requirements

o
o

o
o
o

Windows 7 or latest

Hardware Requirements

Desktop or Laptop
Computer
Storage Drive

o
o

o
o

Requirement Analysis
Capturing all the
requirements.
Brainstorming and
walkthrough to
understand the
requirements.
System Design
Creating design
Design documentation
Implementation
Creating the program
Integrating codes
Unit Testing of the code
System Testing
Integration and testing
of the code
Track testing progress
Report testing activities
System Deployment
Making sure that the
test exit criteria are met
Deployment of the
System
System Maintenance
Making sure that the
system is running fine

EasyCode: Flowchart to
Programming Code
Implementing Image
Processing Algorithm for
Shapes and Text

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

13

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

Evaluation
Figure 1. Conceptual Framework of EasyCode
The proponent's inputs for the proposed system is requiring basic knowledge
regarding C# Programming, image processing and how to create flowchart. The systems
software requirements required the proponents on developing the system is a Windows 7
or later operating system. And the systems required hardware is a desktop computer or a
laptop and storage drive for moving processes.
The proponents chosen software methodology is waterfall model consists of
planning, analysis, designing, coding, testing and debugging.
In the last stage there is an output which you can call EasyCode an application
for who wants to convert flowchart images to a C++ programming code.

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

14

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

CHAPTER III
THEORETICAL BACKGROUND

For the development of the system, this portion will explain the theories,
algorithms and mathematical formulas, and the definition of conceptual and operational
terms that the developers gathered in the said study.

Theorems

K-Nearest Neighbor Algorithm

This algorithm is based on the observation that a sample that has features that are
similar to the ones of points of one particular class it belongs to that class. These points
are known as nearest neighbors. The parameter k specifies the number of neighbors
(neighboring points) used to classify one particular sample point. Finally, the assignment
of a sample to a particular class is done by having the k neighbors considered to "vote".
In this fashion, the class represented by the largest number of points among the neighbors

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

15

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

ought to be the class that the sample belongs to. The so called Nearest Neighbor
algorithm is the particular instance of the kNN when k=1.

Fundamental Algorithm Used

Figure 2. Pseudocode of K-Nearest Neighbor Algorithm

The provided pseudocode explains the step by step on how to compute K-nearest
neighbors KNN Algorithm:
1. Determine parameter number of nearest neighbors.
2. Calculate the distance between the query-instance and all the training samples.
3. Sort the distance and determine nearest neighbors based on the K-th minimum
distance.
4. Gather the category Y of the nearest neighbors.
5. Use the majority of the category of nearest neighbors as the prediction value of
the query instance.
COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE
16

LYCEUM OF THE PHILIPPINES UNIVERSITY CAVITE

Definition of Terms
Algorithm. Algorithm is a step by step process for problem-solving operations,
especially by a computer.
Browse. Browse is the process of finding and looking files.
Convert. Convert is the process of changing of form, character and functions.
Close. Close it exits the application.
Flowchart. Flowchart is the diagram of sequence of graphical movements and
actions.
Optical Character Recognition. OCR is the recognition of printed or written text
characters by a computer
Optical Pattern Recognition. OPR focuses on the recognition of patterns and
regularities in data

COLLEGE OF ENGINEERING, COMPUTER STUDIES AND ARCHITECTURE

17