PROJECT REPORT

Colouring Number in Seven SegmentStructure Using HTML5 Canvas

Hans Christian

11.02.0034

2014/2015

FACULTY OF COMPUTER SCIENCE

SOEGIJAPRANATA CATHOLIC UNIVERSITY Jl. Pawiyatan Luhur IV/1, Bendan Duwur, SEMARANG 50234

Telp. 024-8441555 (hunting) Web: http://www.unika.ac.id

http://ikomunika.web.id/

i

ii

iii

FOREWORD

The project work that is Colouring number in seven segment. Spending

time within 4 months. And the existence of some errors and improvements in the

completion of this program. Program be perfect, because the help Mrs.Shinta as

supervisor and also it means on the advice given. Don't forget the friends who

helped solve the problem of this project.

Thanks also for the prayers that have been granted and to:

- The Lord Jesus who gave the blessing and ease for this project he was.

- My Mom and my Father who gave the prayer and support.

- Supervisor Mrs.Shinta.

iv

PREFACE

In this project, making about Colouring number in seven segment display.

That is about the creation of the input number in the form of a seven segment

display. And the usefulness of this program is to display a number in an interesting

shape information. Because the display by using the HTML5 canvas that is

visually appealing his views publicly.

In the discussion in chapter 1 contains about introduction containing

background program, scope and objective. Chapter 2 discusses the literature study,

which describes the data structure that is used, the function and the HTML5

canvas.

Chapter 3 planning which describes research methodologies and project

management. And in chapter 4 analysis and design, analysis contains a use case

diagram. Design describes the flowchart.

In chapter 5 that is implementation and testing describes the contents of

the coding of the program and the results of testing that have run the user. And

final chapter 6 conlucion describes the conclusions and further research

v

ABSTRACT

Colouring number in seven segment is a program that makes the number

on the form of seven-segment display of his number that can be colored. To run

can be done with data input, in the form of numbers you want. Here's how to

declare the inputed number runs as follows.

Seven segment display, to facilitate the display of numbers in the form of

seven-segment. This is the view that as the place of his number inputed or letter

will be displayed. For the processing of the data will be shown in the seven

segment using a javascript function and inputed. Through this process, the

functions of the javascript is done automatically and displayed in the form of

pictures.

Information technology enables the processing of javascript is visualized

by using the HTML5 canvas. Run the number seven segments were made with a

view to facilitating the segment seven almost number color.

Key Word: Seven segment, Java script and HTML5 canvas.

vi

TABLE OF CONTENTSAPPROVAL AND RATIFICATION PAGE.............................................................iiSTATEMENT OF ORIGINALITY.........................................................................iiiFOREWORD..........................................................................................................ivPREFACE.................................................................................................................vABSTRACT............................................................................................................viCHAPTER I.............................................................................................................1INTRODUCTION....................................................................................................1

1.1 Background....................................................................................................11.2 Scope.............................................................................................................21.3 Objective........................................................................................................2

CHAPTER II............................................................................................................3LITERATURE STUDY...........................................................................................3

2.1 Data Structure:Array......................................................................................32.2 Function.........................................................................................................32.3 Html5 Canvas................................................................................................3

CHAPTER III ..........................................................................................................4PLANNING..............................................................................................................4

3.1 Research Methodologies................................................................................43.2 Project Management......................................................................................5

CHAPTER IV ..........................................................................................................6ANALYSIS DAN DESIGN.....................................................................................6

4.1 Analysis:Use Case Diagram..........................................................................64.2 Design:Flowchart...........................................................................................6

CHAPTER V............................................................................................................8IMPLEMENTATION AND TESTING....................................................................8

5.1 Implementation..............................................................................................85.2 Testing..........................................................................................................14

CHAPTER VI.........................................................................................................18CONCLUSION......................................................................................................18

6.1 Conclusion...................................................................................................186.2 Further Research..........................................................................................18

vii

TABLE OF FIGURESFigure 1: Use Case Diagram....................................................................................6Figure 2: Flowchart..................................................................................................7Figure 3: Table input data.......................................................................................14Figure 4: Input 1 digit.............................................................................................15Figure 5: Input 2 digit.............................................................................................15Figure 6: Input 3 digit.............................................................................................16Figure 7: Input 4 digit.............................................................................................16Figure 8: Input 5 digit.............................................................................................17

viii

Table of TABLETable 1.Project Management....................................................................................5

ix

FOREWORDPREFACEABSTRACTCHAPTER IINTRODUCTION1.1 Background1.2 Scope1.3 Objective

CHAPTER IILITERATURE STUDY2.1 Data Structure:Array2.2 Function2.3 Html5 Canvas

CHAPTER IIIPLANNING3.1 Research Methodologies3.2 Project Management

CHAPTER IVANALYSIS DAN DESIGN4.1 Analysis:Use Case Diagram4.2 Design:Flowchart

CHAPTER VIMPLEMENTATION AND TESTING5.1 Implementation5.2 Testing

CHAPTER VICONCLUSION6.1 Conclusion6.2 Further Research