Logic Gates

Project Description

Project Requirements

1. Provide visual NOT, AND, OR, XOR, and IMP gates
2. Allow users to provide inputs and follow outputs
3. Show the logic flow through each gate of the circuit
4. Provide functions to move, copy, paste, insert, new, delete, save and open

• Source Code
• Gate Images
• Presentation

UML

• Class Diagram

Flow Charts

The function "Run()"
The function Run() should starts by searching for evey input gate. In every loop the value of the gate (ture/false) should be passed to the next gate through the line that connects them.

• Save/Open file
Since Javascript connot open or save a file, PHP is needed to do that. In order to save a file, the javascript function "File.save()" sends the data to the PHP page (download.php). In the server side, an XML file will be created and sent back to the user in order to download it. On the other hand, in order to open a file, the javascript function "File.open()" sends the file to the PHP page (open.php). In the server side, a PHP function reads the content of the file then it sends the data back to the client side.

• Requirement
before you start, make sure you have all these requirement:
• A web server that suppurts PHP
(Recommended: Apache HTTP Server)
• A modern browser
(Recommended: Chrome 20 or higher, Firefox 15 or higher)
• Screen Resolution 1280 x 800 or higher
• Dowinload the source code by clicking on this link then unzip it
• Uploading Files to the web server by using an FTP client
(Recommended: WinSCP for windows , FileZilla for Mac OS)

Note: All the files have to be uploaded to a web server. If you try to run this project on the local machine, some of the features of the project won't run because of using PHP files.

• More Features
This project can be improved by adding more features such as:
• Print
• Export (as Image or PDF file)
• Share by email
• Convert boolean expression to gates
• Zoom in/Zoom out
• Combine gates into one gate
• Show truth table
• Undo/Redo
• Adding Gates
Since this project is open sourced. Anyone with HTML and Javascript skills can add more gates to the project.

• Icon Set
• Toolbar icon from Gentleface
• Javascript Library
• jQuery
• Some useful Examples:
• Moving SVG picture by using javascript
• Dowanloading a file by using PHP

Week 1 - planning

• what's the best programing language for this project?
 In order to make this project easy to share, PHP is the perfect language for that. Also, because PHP language is for developing webpages, the project could run in many diffrent oprating systems.
• The user interface
 I'm thinking of using SVG images. (srufaculty.sru.edu/david.dailey/svg/) In this website, there are so many good example of how to use SVG images.

Week 2

• UML
It has been a long time since I used UML. I have to relearn it in order to build a class diagram.
• UI
I'm trying to come up with the best possible user interface that is simple, easy to use and has all the required functionality. I don't think I need I menubar baceuse the toolbar would be enough. Also, there should be a section on the left that contains all the logic gates. The user should be able to drag them and drop.

Week 3

• desgining the user interface
in order to desgin images for logic gates I have been use Adobe Illustrator. So far, I have 5 images.

AND	OR	NOT	Input	Output

Also, I am done with the first desgin of the user interface to see the desgin click here
• thinking about the Gantt Chart
I spent a day trying to find the best way to design gantt chart for my project. I desided to use www.smartsheet.com because if I updated the gantt chart I don't have to update the website.

Week 4

• Connecting Gates
connecting gates was more complicated than I thought. I have to think about a way to make lines moves if the gate that is connecting to is moving. Therefore, every gate have to know which line is connecting to.

Week 5

• Connecting Gates
After connceting two gates, the line should move whenever one of those gates move. In order to do that, every gate have to know if there is a line connceted to it. This way, whenever a gate moves, it would be able to call the function the moves the line.

Week 6

• Deleting Gates/Lines
Before deleing a gate, all the lines that is connected to have to be deleted too.

Week 7

• Documentation
I have to update my project documentation since I have done a lot of change on the code.
• Class digram
I have change the class digram so that every line has the id of the gate that is connnceted to it.

Week 8

• Class digram
I have decided to change the class diagram again. To avoid the duplication, I deleted array of lines in the Gate class because there is no need for it since every line knows which gates is connecting to.

Week 9

• Running

I started working on the "run" function. this function shows the result of every gate based on the input value. The run function should start looking for all the input gates first than it should move from one gate to the next one until it reach the output gate. In my code, I'm using the Javescript function "settimeout()" to delay the process so the user can easily flow the result of every gate.

Week 10

• Implementing and testing the run function
I have uploaded all the files to the server in order to test my code. Click here to test my code!

Week 11

• Improving the run function
• Change the speed
I need to add to the toolbar a menu to make the user able to choose the speed. the user should have tree chooses, Fast, Slow and Very slow.
• Step and Pause
The user should be able to stop the run prosses or move step by step.

Week 12

• Preparing for the presentation

Week 13

• Implementing and testing the save/open file functions

Week 14

• Problem: Javascript doesn't create files. Therefore, I have to use PHP to create file and send it back to the user.
• Problem: Javascript can't read file. Therefore, the file should be sent to a PHP file to read it then the content of the file can be sent back to the javascript funcation.
• Problem, the user cannot control what is the first value or the second value of an IMP gate. For the IMP gate, the first value is the value that gets to the gate first. There should be a way to make the user choose which one is the first value and which one is the second. (I didn't solve this problem!)