Merge pull request #17 from bbsaclay/master

v0.7.0

README.md

@@ -12,26 +12,47 @@ Pixano Elements - Library of web components dedicated to data annotation tasks.
 
 [Playcode demo](https://playcode.io/709884/) ([smart-segmentation](https://playcode.io/723293/), [cuboid](https://playcode.io/709984/), [rectangle](https://playcode.io/709884/), [smart-rectangle](https://playcode.io/738813/))
 
-[Website demos](https://pixano.cea.fr/3d-bounding-box/)
+[Website demos](https://pixano.github.io/demo/demo)
 
 [Features video](https://www.youtube.com/watch?v=z5T2HhnugJo)
 
 Automatic build tests on Ubuntu (latest) and node version 10, 12, 14.
 
 ## Table of content
+  * [Components overview](#components-overview)
   * [Requirements](#requirements)
       - [Node installation on Windows](#node-installation-on-windows)
       - [Node installation on Ubuntu](#node-installation-on-ubuntu)
       - [Other Operating Systems](#other-operating-systems)
-  * [Run demo](#run-demo)
-    + [Components overview](#components-overview)
+  * [Build and run the overall demo](#build-and-run-the-overall-demo)
   * [Documentation](#documentation)
   * [Contributing](#contributing)
     + [Getting started](#getting-started)
     + [Pull request](#pull-request)
   * [Change log](#change-log)
   * [License](#license)
 
+## Components overview
+
+The Pixano Elements are divided into `packages`. Each package can be installed independantly from [NPM](https://www.npmjs.com/) using the following command:
+
+```
+npm install @pixano/graphics-2d
+```
+
+Each package can contain multiple web components which are regrouped by affinity.
+
+
+| Component | Status | Demo |
+| ----------| -------| -----|
+| [`<pxn-rectangle>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/bounding-box/) |
+| [`<pxn-polygon>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) |  [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/polygon/) |
+| [`<pxn-segmentation>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/pixelwise/) |
+| [`<pxn-keypoints>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/keypoint/) |
+| [`<pxn-smart-rectangle>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/smart-annotation/) |
+| [`<pxn-cuboid-editor>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-3d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-3d.svg)](https://www.npmjs.com/package/@pixano/graphics-3d) | [demo](http://pixano.cea.fr/3d-bounding-box/) |
+
+
 ## Requirements
 
 Pixano requires WebGL to be activated in your browser. If you see the following error in you console `WebGL unsupported in this browser`, please [activate](https://superuser.com/questions/836832/how-can-i-enable-webgl-in-my-browser) it.
@@ -62,42 +83,32 @@ node --version
 # v8.11.3
 
 npm --version
-# 6.1.0
+# 6.10.0
 ```
-
-## Run demo
-
-```
-git clone https://github.com/pixano/pixano-elements.git
-cd pixano-elements/demos/rectangle
-npm i
-npx serve
+#### note about npm version
+If you need to install a specific version of npm, you can use the following command line:
+```bash
+npm install -g [email protected]
 ```
+> If you encounter "EACCES: permission denied" error message, please follow [this guide](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally).
 
 
-### Components overview
-
-The Pixano Elements are divided into `packages`. Each package can be installed independantly from [NPM](https://www.npmjs.com/) using the following command:
+## Build and run the overall demo
+An online serverless demo is available on our dedicated [website](https://pixano.github.io/demo/demo).
 
+If you want to build the latests version, it's easy:
 ```
-npm install @pixano/graphics-2d
+git clone https://github.com/pixano/pixano-elements.git
+cd pixano-elements
+npm run deps
+npm run build
+npx serve demo
 ```
 
-Each package can contain multiple web components which are regrouped by affinity.
-
-
-| Component | Status | Demo |
-| ----------| -------| -----|
-| [`<pxn-rectangle>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/bounding-box/) |
-| [`<pxn-polygon>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) |  [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/polygon/) |
-| [`<pxn-segmentation>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/pixelwise/) |
-| [`<pxn-graph>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/keypoint/) |
-| [`<pxn-smart-rectangle>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-2d.svg)](https://www.npmjs.com/package/@pixano/graphics-2d) | [demo](http://pixano.cea.fr/smart-annotation/) |
-| [`<pxn-cuboid-editor>`](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-3d) | [![Published on npm](https://img.shields.io/npm/v/@pixano/graphics-3d.svg)](https://www.npmjs.com/package/@pixano/graphics-3d) | [demo](http://pixano.cea.fr/3d-bounding-box/) |
-
 ## Documentation
 
 📚 Check out the [TypeDoc](https://pixano.github.io/docs/docs) documentation. Each package's usage and API is also documented:
+
 - [graphics-2d](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d)
 - [graphics-3d](https://github.com/pixano/pixano-elements/blob/master/packages/graphics-2d)
 
@@ -111,20 +122,31 @@ Clone and setup the repo:
 ```bash
 git clone https://github.com/pixano/pixano-elements.git
 cd pixano-elements
-npm i
-npm run bootstrap
+npm run deps
 npm run build
 ```
 
-To run the demos locally, serve one of the demo folders:
+Run the demo locally:
+
+```bash
+npx serve demo
+```
+
+This demo takes your local modifications into account, thanks to a bootstrap step.
 
+After some modifications, test them by rebuilding:
 ```bash
-npx serve demos/rectangle
+npm run build
+npx serve demo
 ```
 
-If you are modifiing multiple elements, you should use a fully local install:
+If you modified the dependencies, you better clean the project before rebuilding:
+
 ```bash
-npm run installLocalElements
+npm run clearall
+npm run deps
+npm run build
+npx serve demo
 ```
 
 ### Getting started

changeversion.js

@@ -17,8 +17,8 @@ function updatePackage(filename) {
 		fs.writeFileSync(filename, output);
 }
 
-// update version in demos
-glob( 'demos/*/package.json', ( err, files ) => {
+// update version in demo
+glob( 'demo/package.json', ( err, files ) => {
 		if (files) {
 				files.forEach(updatePackage);
 		}

demo/README.md

@@ -0,0 +1,178 @@
+# `Serverless Demo`
+
+This demo serves all plugins available in Pixano in a serverless application. Choose the plugin you want to use, click on _START ANNOTATING_.
+
+... image url
+
+Run the following commands to build and run this demo as a standalone application:
+
+```
+npm install
+npm run build
+npx serve
+```
+
+In case of errors when loading elements, rebuild the dependencies :// TODO : see if something easier is possible...
+```
+rm -rf node_modules/ package-lock.json
+npm i
+npm i
+npm run build
+cd ..
+npm run bootstrap ; npm i ; npm run bootstrap
+npm run build
+cd -
+npm run build
+npx serve
+```
+
+# technical documentation
+## documentation on annotation/export formats
+/* les éléments créent et gèrent les objets, attributePicker gère leurs propriétés/attributs */
+/* chaque objet = annotation a un id, une catégorie, une définition/géométrie/etc, des attributs/options/labels */
+
+### TODO : harmonization of export formats => annotation V1.0
+	Annotations are represented as a table of objects, each object containing an id and some data corresponding to the annotation:
+	"annotations" = [ annotation1, annotation2, etc ];
+	"annotation" = {
+		"id": "unique id inside this input",
+		"timestamp": value,
+		"tracknum": value,
+		"category": "classname",
+		"geometry": { geometry definition is tool dependent },
+		"labels": {
+			"optionalParameter1": value,
+			"optionalParameter2": value,
+			"etc": "..."
+		}
+	};
+
+	"geometry" definition for: (interfaces are defined in Geometry in graphics-2d/src/types.ts and in Cuboid in graphics-3d/src/types.ts)
+	- classification: {}
+	- keypoints: { type: "graph", vertices: [ pts ], edges: [], visibles: [ booleans ] }
+	- rectangle/smart-rectangle: { type: "rectangle", vertices: [ pts ] }
+	- polygon: { type: "polygon", vertices: [ pts ], isOpened: true/false }
+	- segmentation/smart-segmentation: {}
+		Exception for segmentation/smart-segmentation: the first annotation is: { "id": 0, "mask": "..." }
+	- cuboid-editor: { "position": [ values ], size": [ values ], "heading": value }
+	- tracking/smart-tracking: TO BE DETERMINED -> linked to sequences, does class tracking disapear ? or become a subclass of sequence ?
+		=> 3 représentations possibles : basée sur les pistes ou basée sur les images ou basée annotation
+			=> pistes (track based) : fait pour le tracking => actuel; avantage : labels communs et labels distincts faciles
+			=> images (frame based) : fait pour pouvoir servir à n'importe quoi; avantage : générique avec les pxns => demandera une conversion, pas de labels au niveau de la piste, ou alors il faut créer un champs spécifique, mais est-ce utile ?
+				avantage : plus simple dans le code et plus lisible dans le fichier
+				désavantage : pas tout à fait générique puisque çà fait une différence entre vidéo et image
+				+> "sequence_annotations" : {
+					"timestamp" : value,
+					"annotations" : [ annotation1, annotation2, etc ]
+			=> annotation (annotation based) : fait pour pouvoir servir à n'importe quoi; avantage : complètement générique => demandera une conversion, pas de labels au niveau de la piste, ou alors il faut créer un champs spécifique, mais est-ce utile ?
+			===> frame based by default, can be converted easily through our scripts
+
+	"timestamp" is only present for sequences, it indicates the frame number for a sequence of images and the real timestamp (format/unit TO BE DETERMINED) for videos.
+		=> pas si représentation images
+	"tracknum" is optionnal and only present for sequences, it indicates the track number when the annotation is part of a track. Each tracknum is unique inside a sequence.
+
+### Current annotation/export formats in pixano-app:
+	For all plugins except tracking : "annotations" = [ annotation1, annotation2, etc ];
+	For each plugin, the format of annotation is different:
+
+	- For classification (exception: never more then one annotation for this plugin):
+	"annotation": {
+		"category": "classification",
+		"options": { options }
+	}
+
+	- For keypoints:
+	"annotation": {
+		"id": "unique id inside this input",
+		"geometry": {
+			"vertices": [ pts ],
+			"edges": [ [couples] ],
+			"visibles": [ booleans ],
+			"type": "graph"
+		},
+		"category": "name of the class",
+		"options": { options }
+	}
+
+	- For rectangle/smart-rectangle:
+	"annotation": {
+		"id": "unique id inside this input",
+		"geometry": {
+			"vertices": [ pts ],
+			"type": "rectangle"
+		},
+		"category": "name of the class",
+		"options": { options }
+	},
+		
+	- For polygon:
+	"annotation": {
+		"id": "unique id inside this input",
+		"geometry": {
+			"vertices": [ pts ],
+			"type": "polygon",
+			"isOpened": true/false
+		},
+		"category": "name of the class",
+		"options": { options }
+	},
+
+	- For cuboids:
+	"annotation": {
+		"position": [ values ],
+		"size": [ values ],
+		"heading": value,
+		"id": "unique id inside this input",
+		"category": "name of the class",
+		"options": { options }
+	}
+
+	- For segmentation:
+		Exception for segmentation/smart-segmentation: the first annotation is: { "id": 0, "mask": "..." }
+	"annotation": {
+		"category": "class1",
+		"options": { options },
+		"id": "[1,0,1]"
+	}
+
+	In all cases, { options } are in the form of:
+	"options": {
+		"optionalParameter1": value,
+		"optionalParameter2": value,
+		"etc": "..."
+	}
+
+	- For sequences: same annotation them base class + for each "annotation":
+		"timestamp": value
+	Where timestamp is the frame number (and could be the real timestamp for videos).
+
+	For tracking:
+ 	"annotations": { "0": { annotation1 }, "1": { annotation2 }, "2": { annotation3 }, etc };
+	"annotation": {
+		"id": "track id = unique id inside this input = video",
+		"keyShapes": {
+			"image num": {
+				"geometry": {
+					"vertices": [ pts ],
+					"type": "rectangle"
+				},
+				"timestamp": timestamp(=image num if no timestamp),
+				"labels": { optionnal labels }
+			},
+			"image num": {
+				"geometry": {
+					"vertices": [ pts ],
+					"type": "rectangle"
+				},
+				"timestamp": timestamp(=image num if no timestamp),
+				"labels": { optionnal labels }
+				"id": "track id",
+				"color": "a color"
+			},
+			etc
+		},
+		"category": "name of the class",
+		"labels": { optionnal labels }
+	},
+
+	{ optionnal labels } are of the form as { options }.

demos/smart-tracking/index.html → demo/index.html

@@ -1,7 +1,7 @@
 <html>
 
 <head>
-  <title>demos</title>
+  <title>Serverless Demo</title>
   <link rel="shortcut icon" href="#" />
   <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,7 +15,8 @@
 </head>
 
 <body>
-  <script src="./my-demo-bundle.js" type="module"></script>
-  <my-demo></my-demo>
+  <script src="./serverless-demo-bundle.js" type="module"></script>
+  <serverless-demo></serverless-demo>
 </body>
+
 </html>