Added Installation Guide and reorganised images folder

README.md

@@ -6,6 +6,7 @@ Collate is a tool to find out the contributions of the project's authors.
 It will export collated files formatted in Markdown. Example collated file: [Sebastian Quek.md](collated/Sebastian Quek.md)
 
 The following section gives a brief overview of how to use Collate. If you'd like to learn more, check out the documentation:
+* [Installation Guide](docs/Installation-Guide.md)
 * [User Guide](docs/User-Guide.md)
 * [Developer Guide](docs/Developer-Guide.md)
 

docs/Developer-Guide.md

@@ -29,7 +29,7 @@ This guide describes the design and implementation of Collate. It will help you
 <!-- /TOC -->
 
 # Architecture
-![Architecture](images/architecture.png)
+![Architecture](images/developer-guide/architecture.png)
 
 Collate is made up for five main components. Users can either use Collate through the GUI or Text UI (TUI) components.
 
@@ -40,7 +40,7 @@ Collate is made up for five main components. Users can either use Collate throug
 5. The Test Driver component tests the TUI, Backend and Data components. It utilises JUnit for unit testing.
 
 # GUI Component
-![Class diagram for GUI](images/gui-class-diagram.png)
+![Class diagram for GUI](images/developer-guide/gui-class-diagram.png)
 
 The GUI component is made up of two packages, `gui` and `view`. The `gui` package contains the Java files that control what users see while the `view` package contains JavaFX's `fxml` files that describe how to layout JavaFX components. A `stylesheet.css` is also found in the `view` package. This stylesheet customises the appearance and style of JavaFX components.
 
@@ -117,7 +117,7 @@ A `ListView` contains objects of a certain type and these objects are laid out v
 > By creating custom objects and using `ListView` to show them, you can create complex list-based layouts.
 
 ### FileStatsItem Class
-![FileStatsItem](images/filestatsitem.png)
+![FileStatsItem](images/developer-guide/filestatsitem.png)
 Each `FileStatsItem` object consists of nine JavaFX components.
 
 1. `BorderPane` - The `FileStatsItem.fxml` is a `BorderPane` with a `StackPane` at its center.
@@ -145,12 +145,12 @@ The `TUI` components consists of one class, `Collate`. You can export the `.jar`
 The `Collate` class receives commands from the command line and passes them to the `Backend` component to handle. `Collate` then prints the respective statistics in the command line. This class relies on the `Data` component to show the appropriate statistics.
 
 # Backend Component
-![Class diagram for Backend](images/backend-class-diagram.png)
+![Class diagram for Backend](images/developer-guide/backend-class-diagram.png)
 
 The `Backend` component is made up of four classes. At the centre of this component is the `Logic` class which is in charge of handling the execution of user inputs from the `GUI` component. This component only relies on the `Data` component and works independently from the `GUI` and `TUI` components.
 
 ## Logic Class
-![Sequence diagram for collate command](images/sequence-diagram-collate-command.png)
+![Sequence diagram for collate command](images/developer-guide/sequence-diagram-collate-command.png)
 
 The `Logic` class contains the methods that handle the core functionality of Collate. It can be thought of as the "brain" of Collate. User inputs are passed to the `executeCommand(String)` method which parses the input to find out what type of command the input is. Finding the type of command is done in the `CommandParser` class which will be elaborated in the next section.
 
@@ -201,7 +201,7 @@ Return type | Method and Description
 void | `addCollatedFile(String fileName, ArrayList<String> collatedLines)`: Saves the `collatedLines` in the default save directory with `fileName` as its name and `.md` as its extension.
 
 # Data Component
-![Class diagram for Data](images/data-class-diagram.png)
+![Class diagram for Data](images/developer-guide/data-class-diagram.png)
 
 The `Data` component contains the classes that represent the various elements that are required in calculating contribution statistics.
 

docs/Installation-Guide.md

@@ -0,0 +1,188 @@
+# Installation Guide
+This guide aims to help you set up Collate, edit its source code and export it as `.jar` files.
+
+<!-- MarkdownTOC -->
+
+- [Setup development environment](#setup-development-environment)
+    - [JDK 8u40 or later](#jdk-8u40-or-later)
+    - [Eclipse Luna or later](#eclipse-luna-or-later)
+    - [e(fx)clipse 1.2.0 or later](#efxclipse-120-or-later)
+    - [Scene Builder 8.0.0 or later](#scene-builder-800-or-later)
+- [Configure development environment](#configure-development-environment)
+    - [Set SceneBuilder executable](#set-scenebuilder-executable)
+    - [Set Java JDK](#set-java-jdk)
+- [Import, edit and run Collate](#import-edit-and-run-collate)
+    - [Download the latest release](#download-the-latest-release)
+    - [Import project into Eclipse](#import-project-into-eclipse)
+    - [Edit `.fxml` files](#edit-fxml-files)
+    - [Run Collate](#run-collate)
+- [Export Collate](#export-collate)
+    - [Export GUI version](#export-gui-version)
+    - [Export TUI version](#export-tui-version)
+    - [Run exported jar](#run-exported-jar)
+
+<!-- /MarkdownTOC -->
+
+# Setup development environment
+## JDK 8u40 or later
+
+http://www.oracle.com/technetwork/java/javase/downloads/index.html
+
+1. Click JDK download
+2. Accept the license agreement and download the appropriate installation file
+
+## Eclipse Luna or later
+
+> Eclipse is the IDE that was used to develop Collate.
+
+https://www.eclipse.org/downloads/
+
+1. Download "Eclipse IDE for Java Developers"
+2. Extract the contents to whichever directory you want. E.g. C:/eclipse
+
+## e(fx)clipse 1.2.0 or later
+
+> e(fx)clipse enables you to create new JavaFX FXML projects using Eclipse and start Scene Builder from within the IDE.
+
+http://www.eclipse.org/efxclipse/install.html
+
+Follow the installation instructions in the link above.
+
+## Scene Builder 8.0.0 or later
+
+> Scene Builder enables you to arrange components in JavaFX layouts through a GUI.
+
+http://gluonhq.com/open-source/scene-builder/
+
+Download and *install* Scene Builder using the link above. Do not download the executable jar as it will not work when attempting to open Scene Builder from Eclipse.
+
+# Configure development environment
+
+## Set SceneBuilder executable
+
+1. Go to Window > Preferences
+2. Click on JavaFX tab
+3. Find the SceneBuilder executable. For Windows, it can be found here: `C:\Users\<USER>\AppData\Local\SceneBuilder\SceneBuilder.exe`
+4. Click Apply
+
+![set scene builder](images/installation-guide/set-scene-builder.png)
+
+## Set Java JDK
+
+1. In Preferences window, go to Java > Installed JREs
+2. Remove the existing entries
+
+![remove-jre](images/installation-guide/remove-jre.png)
+
+3. Click Add...
+4. Select Standard VM and click Next
+
+![add-jdk-1](images/installation-guide/add-jdk-1.png)
+
+5. Navigate to the directory of your installed JDK
+
+![add-jdk-2](images/installation-guide/add-jdk-2.png)
+
+6. Click Finish
+7. Tick the checkbox beside this entry and click Apply
+
+![add-jdk-3](images/installation-guide/add-jdk-3.png)
+
+8. Go to Java > Compiler and ensure the Compiler compliance level is at least 1.8
+
+![compiler-compliance-level](images/installation-guide/compiler-compliance-level.png)
+
+# Import, edit and run Collate
+
+## Download the latest release
+
+1. Navigate to https://github.com/collate/collate/releases
+2. Download and extract the source code of the latest release
+
+![download-collate](images/installation-guide/download-collate.png)
+
+## Import project into Eclipse
+
+1. In Eclipse, go to File > Import...
+2. Select General > Existing Projects into Workspace and click Next
+3. Select root directory of the extracted source code and click Finish.
+
+![import-collate](images/installation-guide/import-collate.png)
+
+> The default view of the Package Explorer shows the packages in a flat manner. If you want to see packages in a hierarchical manner, click on the downward pointing triangle and change the Package Presentation.
+
+![package-view-1](images/installation-guide/package-view-1.png)
+![package-view-2](images/installation-guide/package-view-2.png)
+
+## Edit `.fxml` files
+
+> e(fx)clipse enables you to edit `.fxml` files using Scene Builder through Eclipse.
+
+1. Right click on the `.fxml` file and click Open with SceneBuilder.
+
+![open-with-scenebuilder](images/installation-guide/open-with-scenebuilder.png)
+![scenebuilder](images/installation-guide/scenebuilder.png)
+
+2. After you have saved your edits, refresh the project to ensure the latest `.fxml` files are used.
+
+![refresh-project](images/installation-guide/refresh-project.png)
+
+## Run Collate
+
+### Run Graphical UI version
+
+1. Open `MainApp.java` from the `gui` package
+2. Click Run `MainApp.java`
+
+![run-gui](images/installation-guide/run-gui.png)
+
+### Run Text UI version
+
+1. Open `Collate.java` from the `tui` package
+2. Click Run `Collate.java`
+
+![run-tui](images/installation-guide/run-tui.png)
+
+# Export Collate
+
+## Export GUI version
+
+1. File > Export...
+2. Select Java > Runnable JAR file
+
+![export-gui-1](images/installation-guide/export-gui-1.png)
+
+3. Select MainApp as the Launch configuration
+4. Set Export destination
+5. Ensure "Package required libraries into generated JAR" is selected
+6. Click Finish
+
+![export-gui-2](images/installation-guide/export-gui-2.png)
+
+## Export TUI version
+
+1. File > Export...
+2. Select Java > JAR file
+3. Select the src file to be exported and set the export destination
+
+![export-tui-1](images/installation-guide/export-tui-1.png)
+
+4. Click Next 2 times
+5. Set the Main class
+6. Click Finish
+
+![export-tui-2](images/installation-guide/export-tui-2.png)
+
+## Run exported jar
+For the GUI version, simply double click on the jar file.
+For the TUI version, follow the following steps:
+
+1. Open a command window/terminal in the directory of the jar file
+
+> For Windows, Shift+Right click in the directory of the jar file and click open command window here.
+
+![command-window-shortcut](images/installation-guide/command-window-shortcut.png)
+
+2. Enter `java -jar collate-tui.jar` (replace the filename accordingly)
+
+![command-line-collate](images/installation-guide/command-line-collate.png)

docs/User-Guide.md

@@ -16,7 +16,7 @@ You can also enter an author tag without a name to explicitly tell Collate that
 
 You can include any type of file, as long as the `@@author` tag is present.
 
-![author tags](images/add-author-tags.png)
+![author tags](images/user-guide/add-author-tags.png)
 
 # Using Collate
 ## Launch
@@ -31,11 +31,11 @@ So you have marked the areas of code that you wrote. To collate them, simply ent
 
 > The `from` option tells Collate where to look for your source files.
 
-![collate all subfolders](images/collate-all-subfolders.gif)
+![collate all subfolders](images/user-guide/collate-all-subfolders.gif)
 
 If your directory includes whitespaces, you will need to surround the directory with double inverted commas.
 
-![collate folder with whitespace](images/collate-folder-with-whitespace.gif)
+![collate folder with whitespace](images/user-guide/collate-folder-with-whitespace.gif)
 
 #### Only the specified folder
 If you would like to collate files only from the specified folder, and not files from subfolders, you can add the `only` option.
@@ -44,7 +44,7 @@ If you would like to collate files only from the specified folder, and not files
 
 > Collate allows for flexible input options. You need not worry about the position of these options, just remember to start each command with the `collate` keyword.
 
-![collate only specified folder](images/collate-only-folder.gif)
+![collate only specified folder](images/user-guide/collate-only-folder.gif)
 
 #### Only certain types of files
 Collate scans the folder you specified for all types of file. What if you want to collate only `java` files? Well, you can use the `include` option.
@@ -55,7 +55,7 @@ You can include multiple filetypes by separating them with commas.
 
 `collate from <FOLDER> include java, css, fxml`
 
-![collate only certain filetypes](images/collate-only-certain-filetypes.gif)
+![collate only certain filetypes](images/user-guide/collate-only-certain-filetypes.gif)
 
 ## View an author's statistics
 Viewing an author's contribution statistics can be done by entering the following command.
@@ -66,14 +66,14 @@ Viewing an author's contribution statistics can be done by entering the followin
 
 This view allows you to see the proportion and number of lines of code the author wrote for files he/she contributed to.
 
-![view author statistics](images/view-author-statistics.gif)
+![view author statistics](images/user-guide/view-author-statistics.gif)
 
 ## Summary
 The summary view is the default screen that shows you the contributions of all authors. To access it, simply enter the following.
 
 `summary`
 
-![summary view](images/summary.gif)
+![summary view](images/user-guide/summary.gif)
 
 ## Exit
 The following command allows you to exit Collate through the command bar.