Update Demo and README

AntoninoBonanno · Mar 30, 2020 · 08e73cd · 08e73cd
1 parent 6e9761b
commit 08e73cd
Show file tree

Hide file tree

Showing 20 changed files with 21 additions and 9,117 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,17 @@
 # DragDropAnnotate
 jQuery plugin to annotate images easily with drag and drop.
-**DragDropAnnotate** is an image annotation toolkit written in jQuery/JavaScript.
+
+**DragDropAnnotate** is a lightweight image annotation tool that make it easy to add custom markers, comments, hotspots to images via drag and drop.
+
+Supports rectangle, and image annotations. The drag and drop functionality based on jQuery UI draggable widget.
+
+### More Features
+* Hint messages on mouse hover.
+* Popup window showing descriptions and tools of the annotation.
+* Custom annotation styles.
+* Allows to move and rotate the annotaion with mouse.
+
+[Official Download with demo](https://github.com/AntoninoBonanno/DragDropAnnotate/releases)
 
 Are you looking for an image annotation toolkit (not drag and drop) written in JavaScript? Check out [this project](https://github.com/AntoninoBonanno/annotorious).
 
@@ -44,7 +55,7 @@ Or use optional configuration parameters:
 ```
 var annotable = $("#imageExample").annotable({
     draggable: ".annotation",
-    ...
+    ... // other optional settings 
 });    
 ```
 

diff --git a/example/index.css b/example/index.css
@@ -28,6 +28,7 @@ img {
     text-decoration: none;
     color: #818181;
     display: block;
+    margin-top: 20px;
 }
 
 .sidenav a:hover {

diff --git a/example/index.html b/example/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="./index.css" type="text/css" />
-  <link rel="stylesheet" href="./vendor/fontawesome-free-5.12.1-web/css/all.min.css" type="text/css" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" type="text/css" />
 
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" crossorigin="anonymous"></script>
@@ -74,7 +74,7 @@
   <div class="sidenav">
     <h3>Annotations</h3>
     <h5><i class="fas fa-feather-alt"></i> Drag and Drop an annotation to Annotate</h5>
-    <div class="annotation" annotation-text="Dog" annotation-width="200" annotation-height="400" annotation-id="1">1 -
+    <div class="annotation" annotation-text="A Dog" annotation-width="150" annotation-height="150" annotation-id="1">1 -
       Dog
     </div>
     <div class="annotation" annotation-text="Cat" annotation-width="600" annotation-height="500" annotation-id="2">2 -
@@ -85,11 +85,15 @@ <h3>Image Annotations</h3>
     <img class="annotation" src="./imageAnnotations/Dalmatiner.jpg" annotation-text="Dog" style="height:100px" />
     <img class="annotation" src="./imageAnnotations/BluEye.jpg" annotation-text="Blue eye" style="height:100px" />
     <img class="annotation" src="./imageAnnotations/YellowEye.jpg" annotation-text="Yellow eye" style="height:100px" />
+
+    <a href="https://github.com/AntoninoBonanno/DragDropAnnotate/releases">Official Download Plugin</a>
   </div>
 
 
   <div class="main">
-    <h1>Annotation Test Page</h1>
+    <h1>DragDropAnnotate Plugin Examples</h1>
+    <small><a href="https://github.com/AntoninoBonanno/DragDropAnnotate/releases">Official Download DragDropAnnotate
+        Plugin</a></small>
 
     <h2>Test Images</h2>
     <div>

diff --git a/example/vendor/fontawesome-free-5.12.1-web/LICENSE.txt b/example/vendor/fontawesome-free-5.12.1-web/LICENSE.txt
diff --git a/example/vendor/fontawesome-free-5.12.1-web/css/all.min.css b/example/vendor/fontawesome-free-5.12.1-web/css/all.min.css
diff --git a/example/vendor/fontawesome-free-5.12.1-web/webfonts/fa-brands-400.eot b/example/vendor/fontawesome-free-5.12.1-web/webfonts/fa-brands-400.eot