1.1.0-alpha relese merge (#20)

* Adding support for rect export to Pascal VOC XML format
* Adding snapping points and rectangles when the mouse is outside the outline of the photo during active labeling

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/custom.md

@@ -0,0 +1,10 @@
+---
+name: Custom issue template
+about: Describe this issue template's purpose here.
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

README.md

@@ -12,14 +12,19 @@
 
 Our application is being actively developed. If you have an idea for a new functionality, please hit us on [Twitter][3] or create an issue where you can describe your concept. In the meantime, see what improvements we are planning for you in the future.
 
-* Optimization of the process of loading photos from disk - queuing 
-* Labelling objects using polygons and Bézier curves
-* Export labels in COCO JSON format
-* Separate tab with settings
-* Support basic image operations like crop and resize
-* Converting video to image frames
-* Keyboard shortcuts to improve productivity 
-* Automatic detection of objects in a photo - all you have to do is to label them
+- [X] Export labels in Pascal VOC XML format
+- [ ] Optimization of the process of loading photos from disk - queuing 
+- [ ] Labelling objects using polygons and Bézier curves
+- [ ] Labelling objects using lines
+- [ ] Export labels in COCO JSON format
+- [ ] Separate tab with settings
+- [ ] Support basic image operations like crop and resize
+- [ ] Converting video to image frames
+- [ ] Keyboard shortcuts to improve productivity 
+- [ ] Automatic detection of objects in a photo - all you have to do is to label them
+- [ ] OCR labelling
+- [ ] Integration with external storage - Amazon S3, Google Drive, Dropbox
+- [ ] Copy annotations from previous image into the next one
 
 ## Sneak Peek
 
@@ -43,30 +48,143 @@ npm install
 npm start
 ```
 
+Some Windows 10 users may also have problems with running applications locally. The problems can be solved by adding additional dependencies to the project, through a command: `npm install normalize.css --save`. More information about this problem is available in the [#16][4].
+
 ## Supported Output Formats
 
 * A .zip package containing files in YOLO format
 
 <details><summary><i>example of file in YOLO format</i></summary><p>
 
+**Schema:**
+
 `label_index rel_rect_center_x rel_rect_center_y rel_rect_width rel_rect_height`  
+
+**Where:**  
+
 `label_index` - index of the selected label  
-`rel_rect_center_x` - horizontal position of the centre of the rect in relation to overall image width  
-`rel_rect_center_y` - vertical position of the centre of the rect in relation to overall image height  
-`rel_rect_width` - rect width in relation to overall image width  
-`rel_rect_height` - rect height in relation to overall image height  
+`rel_rect_center_x` - horizontal position of the centre of the rect in relation to overall image width, value between [0, 1]  
+`rel_rect_center_y` - vertical position of the centre of the rect in relation to overall image height, value between [0, 1]  
+`rel_rect_width` - rect width in relation to overall image width, value between [0, 1]  
+`rel_rect_height` - rect height in relation to overall image height, value between [0, 1]  
+
+**Example:**  
+
 ```
 1 0.404528 0.543963 0.244094 0.727034
 2 0.610236 0.494751 0.188976 0.437008
 1 0.754921 0.791339 0.354331 0.413386
 ```
 </p></details>
 
+* A .zip package containing files in Pascal VOC XML format
+
+<details><summary><i>example of file in Pascal VOC XML format</i></summary><p>
+
+**Schema:**
+
+```xml
+<annotation>
+    <folder>{ project_name }</folder>
+    <filename>{ image_name }</filename>
+    <path>{ /project_name/file_name }</path>
+    <source>
+        <database>Unspecified</database>
+    </source>
+    <size>
+        <width>{ image_width }</width>
+        <height>{ image_height }</height>
+        <depth>3</depth>
+    </size>
+    <object>
+        <name>{ label_name }</name>
+        <pose>Unspecified</pose>
+        <truncated>Unspecified</truncated>
+        <difficult>Unspecified</difficult>
+        <bndbox>
+            <xmin>{ rect_left }</xmin>
+            <ymin>{ rect_top }</ymin>
+            <xmax>{ rect_right }</xmax>
+            <ymax>{ rect_bottom }</ymax>
+        </bndbox>
+    </object>
+</annotation>
+```
+
+**Where:**  
+
+`project_name` - user-defined project name  
+`image_name` - name of the photo file  
+`label_name` - selected label name  
+`rect_left` - absolute horizontal distance between the left edge of the image and the left edge of the rect in pixels  
+`rect_top` - absolute vertical distance between the top edge of the image and the top edge of the rect in pixels  
+`rect_right` - absolute horizontal distance between the left edge of the image and the right edge of the rect in pixels  
+`rect_bottom` - absolute vertical distance between the top edge of the image and the bottom edge of the rect in pixels
+`image_width` - absolute image width in pixels  
+`image_height` - absolute image height in pixels  
+
+**Example:** 
+
+```xml
+<annotation>
+	<folder>my-project-name</folder>
+	<filename>000007.jpg</filename>
+	<path>/my-project-name/000007.jpg</path>
+	<source>
+		<database>Unspecified</database>
+	</source>
+	<size>
+		<width>1280</width>
+		<height>960</height>
+		<depth>3</depth>
+	</size>
+	<object>
+		<name>kiwi</name>
+		<pose>Unspecified</pose>
+		<truncated>Unspecified</truncated>
+		<difficult>Unspecified</difficult>
+		<bndbox>
+			<xmin>208</xmin>
+			<ymin>486</ymin>
+			<xmax>497</xmax>
+			<ymax>718</ymax>
+		</bndbox>
+	</object>
+	<object>
+		<name>banaba</name>
+		<pose>Unspecified</pose>
+		<truncated>Unspecified</truncated>
+		<difficult>Unspecified</difficult>
+		<bndbox>
+			<xmin>643</xmin>
+			<ymin>118</ymin>
+			<xmax>1178</xmax>
+			<ymax>799</ymax>
+		</bndbox>
+	</object>
+</annotation>
+```
+</p></details>
+
 * Single CSV file
 
 <details><summary><i>example of CSV file</i></summary><p>
-
-`label_name,rect_left,rect_top,rect_width,rect_height,image_name,image_width,image_height`  
+
+**Schema:**
+
+`label_name,rect_left,rect_top,rect_width,rect_height,image_name,image_width,image_height`
+
+**Where:**  
+
+`label_name` - selected label name   
+`rect_left` - absolute horizontal distance between the left edge of the image and the left edge of the rect in pixels  
+`rect_top` - absolute vertical distance between the top edge of the image and the top edge of the rect in pixels  
+`rect_width` - absolute rect width in pixels  
+`rect_height` - absolute rect height in pixels  
+`image_width` - absolute image width in pixels  
+`image_height` - absolute image height in pixels  
+
+**Example:** 
 
 ```
 banana,491,164,530,614,000000.jpg,1280,960
@@ -92,3 +210,4 @@ Copyright (c) 2019-present, Piotr Skalski
 [1]: http://makesense.ai
 [2]: ./LICENSE
 [3]: https://twitter.com/PiotrSkalski92
+[4]: https://github.com/SkalskiP/make-sense/issues/16

src/data/EditorFeatureData.ts

@@ -26,7 +26,7 @@ export const EditorFeatureData: IEditorFeature[] = [
         imageAlt: "labels",
     },
     {
-        displayText: "Support output file formats like YOLO, CSV",
+        displayText: "Support output file formats like YOLO, VOC XML, CSV",
         imageSrc: "img/file.png",
         imageAlt: "file",
     },

src/data/ExportFormatType.ts

@@ -1,5 +1,6 @@
 export enum ExportFormatType {
     YOLO = "YOLO",
     COCO = "COCO",
-    CSV = "CSV"
+    CSV = "CSV",
+    VOC = "VOC"
 }

src/data/RectExportFormatData.ts

@@ -6,6 +6,10 @@ export const RectExportFormatData: IExportFormat[] = [
         type: ExportFormatType.YOLO,
         label: "A .zip package containing files in YOLO format."
     },
+    {
+        type: ExportFormatType.VOC,
+        label: "A .zip package containing files in VOC XML format."
+    },
     {
         type: ExportFormatType.CSV,
         label: "Single CSV file."

src/logic/export/PointLabelsExport.ts

@@ -1,9 +1,9 @@
 import {ExportFormatType} from "../../data/ExportFormatType";
-import {store} from "../../index";
 import {ImageData, LabelPoint} from "../../store/editor/types";
 import {saveAs} from "file-saver";
 import {ImageRepository} from "../imageRepository/ImageRepository";
 import moment from 'moment';
+import {EditorSelector} from "../../store/selectors/EditorSelector";
 
 export class PointLabelsExporter {
     public static export(exportFormatType: ExportFormatType): void {
@@ -17,24 +17,30 @@ export class PointLabelsExporter {
     }
 
     private static exportAsCSV(): void {
-        const content: string = store.getState().editor.imagesData
+        const content: string = EditorSelector.getImagesData()
             .map((imageData: ImageData) => {
                 return PointLabelsExporter.wrapRectLabelsIntoCSV(imageData)})
             .filter((imageLabelData: string) => {
                 return !!imageLabelData})
             .join("\n");
 
+        const projectName: string = EditorSelector.getProjectName();
         const date: string = moment().format('YYYYMMDDhhmmss');
         const blob = new Blob([content], {type: "text/plain;charset=utf-8"});
-        saveAs(blob, "labels_" + date + ".csv");
+        try {
+            saveAs(blob, `labels_${projectName}_${date}.csv`);
+        } catch (error) {
+            // TODO
+            throw new Error(error);
+        }
     }
 
     private static wrapRectLabelsIntoCSV(imageData: ImageData): string {
         if (imageData.labelRects.length === 0 || !imageData.loadStatus)
             return null;
 
         const image: HTMLImageElement = ImageRepository.getById(imageData.id);
-        const labelNamesList: string[] = store.getState().editor.labelNames;
+        const labelNamesList: string[] = EditorSelector.getLabelNames();
         const labelRectsString: string[] = imageData.labelPoints.map((labelPoint: LabelPoint) => {
             const labelFields = [
                 labelNamesList[labelPoint.labelIndex],