first README version + added comments on the example html file

n-peugnet · Mar 6, 2018 · b8841f3 · b8841f3
1 parent 3a11578
commit b8841f3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -0,0 +1,20 @@
+# 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.
+
+## What you can do
+
+- [x] drag&drop a picture on the canvas
+- [x] draw rectangle areas
+- [x] set the desired url of an area
+
+## What you will be able to do (maybe)
+
+- [ ] draw circular areas
+- [ ] draw polygon areas
+- [ ] show a area-menu by right clicking on an area
+
+## How to use it
+
+See the example html file in the examples folder. (It's really easy IMO)
diff --git a/examples/index.html b/examples/index.html
@@ -7,26 +7,38 @@
 	<title>Mapped-images-generator Demo</title>
 	<meta name="description" content="">
 	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
+
+	<!-- All you need is these JS libraries -->
 	<script src="../src/functions.js"></script>
 	<script src="../src/class.xy.js"></script>
 	<script src="../src/class.area.js"></script>
 	<script src="../src/class.image-map.js"></script>
 	<script src="../src/p5.image-map-creator.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.js"></script>
+	<!--  End of JS libraries requierments  -->
 
 </head>
 
 <body>
 	<h1>Image-map Creator Demo</h1>
+
+	<!-- A <div> with an id -->
 	<div id="div-1"></div>
+
+	<!-- Optionnal control buttons -->
 	<button onclick="iMap.addBgArea()">Add Background Area</button>
 	<button onclick="iMap.clearAreas()">Clear</button>
 	<button onclick="logMap()">Log Map</button>
 	<button onclick="logP5()">Log P5</button>
+
+	<!-- A <script> to enable the tool on the disired div -->
 	<script type="text/javascript">
-		var iMap = new p5(imageMapCreator, "div-1");
+		var iMap = new p5(imageMapCreator, "div-1");    // for more details on the instantiation on a p5 sketch see https://p5js.org/examples/instance-mode-instance-container.html
+	</script>
 
+	<!-- Another <script> (optionnal) for the optionnal buttons -->
+	<script type="text/javascript">
 		function logMap() {
 			console.log(iMap.map);
 		}