Merge pull request #55 from SkalskiP/develop

1.3.0-alpha relese merge

README.md

@@ -20,22 +20,8 @@ Andrew Ng
 
 ## Sneak Peek
 
-### Bounding boxes
-
-<p align="center"> 
-    <img width="1000" src=".//examples/bbox-demo.gif" alt="bbox">
-</p>
-
-### Points
-
 <p align="center"> 
-    <img width="1000" src=".//examples/points-demo.gif" alt="points">
-</p>
-
-### Polygons
-
-<p align="center"> 
-    <img width="1000" src=".//examples/polygon-demo.gif" alt="polygon">
+    <img width="1000" src=".//examples/alfa-demo.gif" alt="bbox">
 </p>
 
 ## Set Up the Project Locally
@@ -53,8 +39,23 @@ npm install
 # serve with hot reload at localhost:3000
 npm start
 ```
+To ensure proper functionality of the application locally, an npm `6.x.x` and node.js `v11.x.x` versions are required. More information about this problem is available in the [#16][4].
+
+## Supported Keyboard Shortcuts
+
+| Functionality                      | Context  | Mac | Windows / Linux  |
+|:-----------------------------------|:--------:|:---:|:----------------:|
+| Polygon autocomplete               | Editor   | <kbd>Enter</kbd> | <kbd>Enter</kbd> |
+| Cancel polygon drawing             | Editor   | <kbd>Escape</kbd> | <kbd>Escape</kbd> |
+| Delete currently selected label    | Editor   | <kbd>Backspace</kbd> | <kbd>Delete</kbd> |
+| Load previous image                | Editor   | <kbd>⌥</kbd> + <kbd>Left</kbd> | <kbd>Ctrl</kbd> + <kbd>Left</kbd> |
+| Load next image                    | Editor   | <kbd>⌥</kbd> + <kbd>Right</kbd> | <kbd>Ctrl</kbd> + <kbd>Right</kbd> |
+| Zoom in                            | Editor   | <kbd>⌥</kbd> + <kbd>+</kbd> | <kbd>Ctrl</kbd> + <kbd>+</kbd> |
+| Zoom out                           | Editor   | <kbd>⌥</kbd> + <kbd>-</kbd> | <kbd>Ctrl</kbd> + <kbd>-</kbd> |
+| Move image                         | Editor   | <kbd>Up</kbd> / <kbd>Down</kbd> / <kbd>Left</kbd> / <kbd>Right</kbd> | <kbd>Up</kbd> / <kbd>Down</kbd> / <kbd>Left</kbd> / <kbd>Right</kbd> |
+| Exit popup                         | Popup    | <kbd>Escape</kbd> | <kbd>Escape</kbd> |
 
-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].
+**Table 1.** Supported keyboard shortcuts
 
 ## Supported Output Formats
 
@@ -64,182 +65,35 @@ Some Windows 10 users may also have problems with running applications locally.
 | **Rect**      | ☑   | ☑    | ☑       | ☐        | ☐    | ☒          |
 | **Polygon**   | ☐   | ☒    | ☐       | ☑        | ☐    | ☐          |
 
-**Table 1.** The matrix of supported labels export format, where:
+**Table 2.** The matrix of supported labels export format, where:
 * ☑ - supported format
 * ☐ - not yet supported format
 * ☒ - format does not make sense for a given label type  
 
+You can find examples of export files along with a description and schema on our [Wiki][7].
 
+## Privacy
 
-**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, 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>
+We don't store your images, because we don't send them anywhere in the first place.
 
-**Schema:**
+## Road Map
 
-`label_name,rect_left,rect_top,rect_width,rect_height,image_name,image_width,image_height`
+Our application is being actively developed. Check out our plans for the near future on our [Wiki][6]. If you have an idea for a new functionality, please hit us on [Twitter][3] and [Gitter][5] or create an issue where you can describe your concept. In the meantime, see what improvements we are planning for you in the future.
 
-**Where:**  
+## Contribution
 
-`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  
+Feel free to file [issues](https://github.com/SkalskiP/make-sense/issues) or [pull requests](https://github.com/SkalskiP/make-sense/pulls).  
 
-**Example:** 
+## Citation
 
 ```
-banana,491,164,530,614,000000.jpg,1280,960
-banana,462,245,466,353,000001.jpg,1280,960
-banana,542,477,587,375,000001.jpg,1280,960
-banana,636,109,561,695,000007.jpg,1280,960
-kiwi,198,477,317,251,000007.jpg,1280,960
-kiwi,558,423,219,222,000008.jpg,1280,960
-kiwi,758,360,252,236,000008.jpg,1280,960
+@MISC{make-sense,
+   author = {Piotr Skalski},
+   title = {{Make Sense}},
+   howpublished = "\url{https://github.com/SkalskiP/make-sense/}",
+   year = {2019},
+}
 ```
-</p></details>
-
-## Privacy
-
-We don't store your images, because we don't send them anywhere in the first place.
-
-## Road Map
-
-Our application is being actively developed. If you have an idea for a new functionality, please hit us on [Twitter][3] and [Gitter][5] or create an issue where you can describe your concept. In the meantime, see what improvements we are planning for you in the future.
-
-- [X] Export rect labels in Pascal VOC XML format
-- [X] Labelling objects using polygons 
-- [X] Export polygon labels in VGG JSON format
-- [ ] Optimization of the process of loading photos from disk - queuing 
-- [ ] Labelling objects using lines
-- [ ] Autofill in label selection dropdown
-- [ ] Export labels in COCO JSON format
-- [ ] Export segmentation labels as image mask
-- [ ] 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
 
 ## Citation
 
@@ -263,3 +117,5 @@ Copyright (c) 2019-present, Piotr Skalski
 [3]: https://twitter.com/PiotrSkalski92
 [4]: https://github.com/SkalskiP/make-sense/issues/16
 [5]: https://gitter.im/make-sense-ai/community?utm_source=share-link&utm_medium=link&utm_campaign=share-link
+[6]: https://github.com/SkalskiP/make-sense/wiki/Road-Map
+[7]: https://github.com/SkalskiP/make-sense/wiki/Supported-Output-Formats

src/App.tsx

@@ -6,21 +6,20 @@ import {ProjectType} from "./data/enums/ProjectType";
 import {AppState} from "./store";
 import {connect} from "react-redux";
 import PopupView from "./views/PopupView/PopupView";
-import {MobileDeviceData} from "./data/MobileDeviceData";
 import MobileMainView from "./views/MobileMainView/MobileMainView";
 import {ISize} from "./interfaces/ISize";
 import {Settings} from "./settings/Settings";
 import {SizeItUpView} from "./views/SizeItUpView/SizeItUpView";
+import {PlatformModel} from "./staticModels/PlatformModel";
 
 interface IProps {
     projectType: ProjectType;
-    mobileDeviceData: MobileDeviceData;
     windowSize: ISize;
 }
 
-const App: React.FC<IProps> = ({projectType, mobileDeviceData, windowSize}) => {
+const App: React.FC<IProps> = ({projectType, windowSize}) => {
     const selectRoute = () => {
-        if (!!mobileDeviceData.manufacturer && !!mobileDeviceData.os)
+        if (!!PlatformModel.mobileDeviceData.manufacturer && !!PlatformModel.mobileDeviceData.os)
             return <MobileMainView/>;
         if (!projectType)
             return <MainView/>;
@@ -34,7 +33,9 @@ const App: React.FC<IProps> = ({projectType, mobileDeviceData, windowSize}) => {
     };
 
       return (
-        <div className="App">
+        <div className="App"
+            draggable={false}
+        >
             {selectRoute()}
             <PopupView/>
         </div>
@@ -43,7 +44,6 @@ const App: React.FC<IProps> = ({projectType, mobileDeviceData, windowSize}) => {
 
 const mapStateToProps = (state: AppState) => ({
     projectType: state.editor.projectType,
-    mobileDeviceData: state.general.mobileDeviceData,
     windowSize: state.general.windowSize
 });
 

src/data/EditorData.ts

@@ -3,10 +3,14 @@ import {IRect} from "../interfaces/IRect";
 import {ISize} from "../interfaces/ISize";
 
 export interface EditorData {
-    mousePositionOnCanvas: IPoint,
-    canvasSize: ISize,
-    activeImageScale: number,
-    activeImageRectOnCanvas: IRect,
+    viewPortContentSize: ISize,
+    mousePositionOnViewPortContent: IPoint,
     activeKeyCombo: string[],
     event?: Event
+    zoom: number,
+    viewPortSize: ISize,
+    defaultRenderImageRect: IRect,
+    realImageSize: ISize,
+    viewPortContentImageRect: IRect,
+    absoluteViewPortContentScrollPosition: IPoint
 }

src/data/ImageButtonDropDownData.ts

@@ -0,0 +1,5 @@
+export interface ImageButtonDropDownData {
+    image: string;
+    imageAlt: string;
+    onClick?: () => any;
+}

src/data/enums/CustomCursorStyle.ts

@@ -4,5 +4,7 @@ export enum CustomCursorStyle {
     RESIZE = "RESIZE",
     ADD = "ADD",
     CANCEL = "CANCEL",
-    CLOSE = "CLOSE"
+    CLOSE = "CLOSE",
+    GRAB = "GRAB",
+    GRABBING = "GRABBING"
 }

src/data/enums/EventType.ts

@@ -1,7 +1,11 @@
 export enum EventType {
+    RESIZE = "resize",
     MOUSE_UP = "mouseup",
     MOUSE_DOWN = "mousedown",
     MOUSE_MOVE = "mousemove",
+    MOUSE_WHEEL = "wheel",
     KEY_DOWN = "keydown",
-    KEY_UP = "keyup"
+    KEY_PRESS = "keypress",
+    KEY_UP = "keyup",
+    FOCUS = "focus"
 }