Skip to content

Commit

Permalink
feat: added ability to show metadata text
Browse files Browse the repository at this point in the history 
Closes: #6
  • Loading branch information
@AntoninoBonanno
AntoninoBonanno committed Mar 10, 2024
1 parent f721433 commit 2a7f792
Show file tree
Hide file tree
Showing 4 changed files with 244 additions and 59 deletions.
105 changes: 78 additions & 27 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Are you looking for an image annotation toolkit (not drag and drop) written in J

To set up **DragDropAnnotate** on a Web page, add this code to your page head:

```
```html
<!-- jQuery -->
<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>
Expand All @@ -46,40 +46,46 @@ To set up **DragDropAnnotate** on a Web page, add this code to your page head:
<link rel="stylesheet" href="./vendor/fontawesome-free-5.12.1-web/css/all.min.css" type="text/css" />

<!-- DragDropAnnotate -->
<link rel="stylesheet" href="./src/dragDropAnnotate.css" type="text/css" />
<script src="./src/dragDropAnnotate.js"></script>
<link rel="stylesheet" href="./src/dragDropAnnotate.min.css" type="text/css" />
<script src="./src/dragDropAnnotate.min.js"></script>

```

## Initialize annotable item (droppable)

```
```html
<img id="imageExample" src="example.jpg">
```

In its simplest case, **DragDropAnnotate** can be initialised with a single line of Javascript:

```
```javascript
var annotable = $("#imageExample").annotable();
```

Or use optional configuration parameters:

```
```javascript
var annotable = $("#imageExample").annotable({
draggable: ".annotation",
... // other optional settings
});
```

If use class selector, the annotable variable is an array.
If you use class selector, the annotable variable is an array.

#### Optional configuration parameters

All properties are **OPTIONAL** and they merge with the default.
All properties are **OPTIONAL**, and they merge with the default.

```
/* COMPLETE and DEFAULT VALUES */
```javascript
/* COMPLETE and DEFAULT VALUES */
const MetadataValue = {
ID: 'id', //Print id of annotation if exists,
TEXT: "text", //Print the annotation text
TIMESTAMP: "timestamp", //Print the annotation creation date
PROGRESSIVE: "progressive" //Print the progressive counter insertion of annotations
}

var options = {
draggable: ".draggable-annotation", //draggable annotations
Expand Down Expand Up @@ -111,31 +117,76 @@ var options = {
hiBorderSize: 2.2, //border width for highlighted annotation [1-12]
imageBorder: true, //if false, not show the border on annotation with image
foreground: true //if false, not brings the annotation to the foreground when the mouseover
},

metadata: { //metadata settings
enabled: false, //if true, show the metadata
value: MetadataValue.PROGRESSIVE, //the metadata to show [MetadataValue | (annotation) => string]
fontSize: "40px", //the font size of text
fontFamily: "sans-serif", //the font family of text
color: "#ff0000", //the color of text
position: "bottom-right", //the position of text ["y-x"] -> y: ["top"|"middle"|"bottom"], x: ["left"|"center"|"right"]
offsetX: -20, //the offset from x
offsetY: -10 //the offset from y
}
};
```

#### Show metadata value

For each annotation you can show a text that can have the following values:
- `id`: Print id of annotation if exists
- `text`: Print the annotation text
- `timestamp`: Print the annotation creation date
- `progressive`: Print the progressive counter insertion of annotations
- **function**: You can pass a function that takes 'annotation' as a variable and returns the string you want to print (`(annotation) => string`)

**Examples**

```javascript
var annotable = $("#imageExample").annotable({
draggable: ".annotation",
metadata: {
enabled: true,
value: "id"
}
});

// or

var annotable = $("#imageExample").annotable({
draggable: ".annotation",
metadata: {
enabled: true,
value: (annotation) => {
return `My custom string ${annotation.id}`;
},
position: "middle-center"
}
});
```

## Initialize annotation item (draggable)

- Annotation with image
```
```html
<img class="draggable-annotation" src="example.jpg" annotation-text="example" />
```
- Simple Annotation
```
```html
<div class="draggable-annotation" annotation-text="example" annotation-width="200" annotation-height="400"> Example </div>
```

#### Configuration attributes

| Attribute | Default | Description |
| --------- | :---------: | --------- |
| annotation-id | `undefined` | Id of annotation. |
| annotation-text | `undefined` | Text of annotation, is shown on mouseover. |
| annotation-width | `50` | Width of annotation expressed in pixels (px).<br />If use Annotation with image, the default value is `naturalWidth` of image. |
| annotation-height | `50` | Height of annotation expressed in pixels (px).<br />If use Annotation with image, the default value is `naturalHeight` of image. |
| annotation-rotation | `0` | Rotation of the annotation with respect to the x-axis, expressed in degrees. |
| annotation-editable | `"noText"` | `"disabled"`: the annotation is not editable.<br />`"noText"`: the annotation can be rotated, moved and deleted.<br />`"full"`: the annotation can be edited (text), rotated, moved and deleted. |
| Attribute | Default | Description |
|---------------------|:-----------:|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| annotation-id | `undefined` | Id of annotation. |
| annotation-text | `undefined` | Text of annotation, is shown on mouseover. |
| annotation-width | `50` | Width of annotation expressed in pixels (px).<br />If use Annotation with image, the default value is `naturalWidth` of image. |
| annotation-height | `50` | Height of annotation expressed in pixels (px).<br />If use Annotation with image, the default value is `naturalHeight` of image. |
| annotation-rotation | `0` | Rotation of the annotation with respect to the x-axis, expressed in degrees. |
| annotation-editable | `"noText"` | `"disabled"`: the annotation is not editable.<br />`"noText"`: the annotation can be rotated, moved and deleted.<br />`"full"`: the annotation can be edited (text), rotated, moved and deleted. |

Pixels of annotation are relative to natural size of annotable element.

Expand All @@ -144,22 +195,22 @@ Pixels of annotation are relative to natural size of annotable element.
You can use API methods using:

- Annotable variable
```
```javascript
var annotable = $("#imageExample").annotable(); //Initialize
annotable.method();

or
// or

var annotables = $(".imagesExample").annotable(); //Initialize
annotables[0].method(); // Use method at first element
```
- jQuery selector

```
```javascript
$("#imageExample").annotable(); //Initialize
$("#imageExample").method();

or
// or

$(".imagesExample").annotable(); //Initialize
$(".imagesExample").method(); // Use method at all elements
Expand All @@ -172,7 +223,7 @@ Adds a new custom annotation, or replaces an existing one. In the latter case, t

Custom annotations are object, according to the following example:

```
```javascript
var myAnnotation = {
/** Id of annotation. [OPTIONAL] **/
id: "1",
Expand Down Expand Up @@ -250,12 +301,12 @@ Adds an event handler function. You can register for the following events:

Example:

```
```javascript
annotable.on('onAnnotationCreated', function (event, annotation) {
console.log(annotation);
});

or
// or

$("#imageExample").on('onAnnotationCreated', function (event, annotation) {
console.log(annotation);
Expand Down
17 changes: 10 additions & 7 deletions index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Supports rectangle, and image annotations. The drag and drop functionality based
## Instructions

### Imports
```
```html
<!-- jQuery -->
<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>
Expand All @@ -35,27 +35,30 @@ Supports rectangle, and image annotations. The drag and drop functionality based
<link rel="stylesheet" href="./vendor/fontawesome-free-5.12.1-web/css/all.min.css" type="text/css" />

<!-- DragDropAnnotate -->
<link rel="stylesheet" href="./src/dragDropAnnotate.css" type="text/css" />
<script src="./src/dragDropAnnotate.js"></script>
<link rel="stylesheet" href="./src/dragDropAnnotate.min.css" type="text/css" />
<script src="./src/dragDropAnnotate.min.js"></script>
```

### Initialize annotable item (droppable)

```
```html
<img id="imageExample" src="example.jpg">
var annotable = $("#imageExample").annotable();

<script>
var annotable = $("#imageExample").annotable();
</script>
```
### Initialize annotation item (draggable)

Annotation with image

```
```html
<img class="draggable-annotation" src="example.jpg" annotation-text="example" />
```

Simple Annotation

```
```html
<div class="draggable-annotation" annotation-text="example" annotation-width="200" annotation-height="400"> Example </div>
```

Expand Down
Loading

0 comments on commit 2a7f792

Please sign in to comment.