diff --git a/README.md b/README.md index 31a98f4..4079d2e 100644 --- a/README.md +++ b/README.md @@ -1,26 +1,32 @@ # [Image Map Creator](https://n-peugnet.github.io/image-map-creator/) This is a simple map creator tool made with the p5.js library. I want it -to be easy to use for both the end user and the developper. +to be easy to use for both the end user and the developper. This work is +still in beta so a lot of things are about to change (including the save +file's structure). ![demo gif](images/image-map-creator.gif) ## Live demo -the live demo can be tried here: +the live demo can be tried here : ## Features Here is the list of all the features of this app : -_The checked ones are implemented, the others are the ones I plan to add in the future_ +_The checked ones are implemented,_ +_the others are the ones I plan to add in the future._ -- [x] drag&drop a picture on the canvas -- [x] zoom in & out -- [X] pan (dragging with MouseWheel click) +- [x] drag&drop on the canvas + - [x] a picture + - [x] a `.map.json` save file +- [x] zoom in & out by scrolling +- [X] pan with center click - [x] show a menu by right-clicking on an area with these options : - [x] set url + - [x] set title - [x] delete - [x] move forward - [x] move backwards @@ -28,18 +34,19 @@ _The checked ones are implemented, the others are the ones I plan to add in the - [x] rectangle mode - [x] circle mode - [x] polygon mode - - [X] move mode - - [ ] select mode - - [ ] resize mode ? + - [X] select mode : + - [x] move an area + - [x] move a point of an area + - [ ] multiselect with shift - [x] delete mode - [x] test mode - [ ] differents drawing modes for rectangles : - [x] dram from edges - - [ ] draw from center (with `alt`) - - [ ] draw square (with `shift`) + - [ ] draw from center (with alt) + - [ ] draw square (with shift) - [ ] differents drawing modes for circles : - [ ] draw from edges - - [x] draw from center (later with `shift`) + - [x] draw from center (later with shift) - [x] gui with these features : - [x] select tool mode - [x] undo @@ -51,59 +58,79 @@ _The checked ones are implemented, the others are the ones I plan to add in the ## Integration -You just need to import `p5.js`, `p5.dom.js` and the bundle from `/dist`. Then instantiate the p5 object -like this : +You just need to import `p5.js`, `p5.dom.js` and the javascript bundle +from `/dist` : + +```html + + + +``` + +Add a `
` with an id, then instantiate the p5 object like this : ```js let iMap = new imageMapCreator(); -let sketch = new p5(iMap.sketch.bind(iMap), "div-1"); +let sketch = new p5(iMap.sketch.bind(iMap), "div-id"); ``` -The contructor of imageMapCreator accepts parameters: +The contructor of imageMapCreator accepts parameters : ```js new imageMapCreator([ width = 600 [, height = 450 ]]); ``` -For more details on the instance mode of p5 see [the p5 documentation](https://p5js.org/examples/instance-mode-instance-container.html) +For more details on the instance mode of p5 see [the p5 documentation](https://p5js.org/examples/instance-mode-instance-container.html). You can also see the detailled example in the [`/demos`](demos) folder. ## Development -These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. +These instructions will get you a copy of the project up and running on +your local machine for development and testing purposes. ### Prerequisites 1. Git 2. Nodejs & NPM -### Installing +### Install & Run -1. clone with `--recurse-submodules` option or download this repository and install git submodules: +1. clone with `--recurse-submodules` option or download this repository + and install git submodules : ```shell git submodule init git submodule update ``` -2. install dependencies: +2. install dependencies : ```shell npm install ``` -3. launch webpack: +3. launch webpack in watch mode to build the dev bundle : ```shell npm run watch ``` +4. navigate to [`demos/index.html`](demos/index.html) with you browser ## Built with -- [p5.js](https://github.com/processing/p5.js) - easy canvas drawing library - [website](http://p5js.org/) -- [quicksettings](https://github.com/bit101/quicksettings) - quick and easy settings creation library - [website](http://bit101.github.io/quicksettings/) -- [Undo Manager](https://github.com/ArthurClemens/Javascript-Undo-Manager) - light undo manager library -- [contextmenu](https://github.com/theyak/contextmenu) - light right-click menu creation library -- [download.js](https://github.com/rndme/download) - one liner function to download files client side - [website](http://danml.com/download.html) +- [p5.js](https://github.com/processing/p5.js) - easy canvas drawing + library - [website](http://p5js.org/) +- [quicksettings](https://github.com/bit101/quicksettings) - quick and + easy settings creation library - + [website](http://bit101.github.io/quicksettings/) +- [Undo Manager](https://github.com/ArthurClemens/Javascript-Undo-Manager) - + light undo manager library +- [contextmenu](https://github.com/theyak/contextmenu) - + light right-click menu creation library +- [download.js](https://github.com/rndme/download) - one liner function + to download files client side - [website](http://danml.com/download.html) ## Authors -- **Nicolas Peugnet** - _Initial work_ - [Github](https://github.com/n-peugnet) - [Website](http://nicolas.club1.fr) +- **Nicolas Peugnet** - _Initial work_ - + [Github](https://github.com/n-peugnet) - + [Website](http://nicolas.club1.fr) -See also the list of [contributors](https://github.com/n-peugnet/image-map-creator/contributors) who participated in this project. \ No newline at end of file +See also the list of [contributors](https://github.com/n-peugnet/image-map-creator/contributors) +who participated in this project. \ No newline at end of file diff --git a/package.json b/package.json index 797e1a0..04161ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "image-map-creator", - "version": "1.0.0", + "version": "1.0.0-beta.0", "description": "This is a simple map creator tool made with the p5.js library. I want it\r to be easy to use for both the end user and the developper.", "main": "webpack.config.js", "scripts": {