Skip to content

Commit

Permalink
HTML Formatting (#77)
Browse files Browse the repository at this point in the history
* Add imantics thumbnail
* Html formatting
* Show category with image thumbnail
* Fixed create annotation bug
* Removed unused buttons
  • Loading branch information
jsbroks authored Jan 27, 2019
1 parent 12675e7 commit 45efaad
Show file tree
Hide file tree
Showing 44 changed files with 1,328 additions and 433 deletions.
4 changes: 2 additions & 2 deletions app/api/annotations.py
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
from flask_restplus import Namespace, Resource, reqparse
from flask_login import login_required, current_user
from imantics import Color

from ..models import AnnotationModel
from ..util import query_util, color_util
from ..util import query_util

import datetime

Expand Down Expand Up @@ -35,7 +36,6 @@ def post(self):

try:
annotation = AnnotationModel(image_id=image_id, category_id=category_id, metadata=metadata)
annotation.color = color_util.random_color_hex() if color is None else color
annotation.save()
except (ValueError, TypeError) as e:
return {'message': str(e)}, 400
Expand Down
2 changes: 1 addition & 1 deletion app/api/categories.py
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
from flask_login import login_required, current_user

from ..util.pagination_util import Pagination
from ..util import query_util, color_util
from ..util import query_util
from ..models import CategoryModel, AnnotationModel

import datetime
Expand Down
6 changes: 5 additions & 1 deletion app/api/datasets.py
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,11 @@ def get(self, dataset_id):

for image in images:
image_id = image.get('id')
image['annotations'] = AnnotationModel.objects(image_id=image_id, deleted=False).count()
query = AnnotationModel.objects(image_id=image_id, deleted=False)
image['annotations'] = query.count()
category_ids = query.distinct('category_id')
image['categories'] = query_util.fix_ids(CategoryModel.objects(id__in=category_ids).only('name', 'color'))


subdirectories = [f for f in sorted(os.listdir(directory))
if os.path.isdir(directory + f)]
Expand Down
6 changes: 3 additions & 3 deletions app/api/images.py
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
from werkzeug.datastructures import FileStorage
from flask import send_file

from ..util import query_util, coco_util, thumbnail_util
from ..util import query_util, coco_util
from ..models import *

import datetime
Expand Down Expand Up @@ -184,7 +184,7 @@ def post(self, from_id, to_id):


@api.route('/<int:image_id>/thumbnail')
class ImageCoco(Resource):
class ImageThumbnail(Resource):

@api.expect(image_download)
@login_required
Expand All @@ -206,7 +206,7 @@ def get(self, image_id):
if height < 1:
height = image.height

pil_image = thumbnail_util.generate_thumbnail(image, save=False)
pil_image = image.thumbnail()
pil_image.thumbnail((width, height), Image.ANTIALIAS)

image_io = io.BytesIO()
Expand Down
47 changes: 44 additions & 3 deletions app/models.py
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
import json
import datetime
import numpy as np
import imantics as im

from PIL import Image
from flask_mongoengine import MongoEngine
from mongoengine.queryset.visitor import Q
from flask_login import UserMixin, current_user


from .util import color_util
from .config import Config
from PIL import Image

Expand Down Expand Up @@ -129,6 +130,10 @@ def thumbnail_path(self):
os.makedirs(directory)

return '/'.join(folders)

def thumbnail(self):
image = self().draw(color_by_category=True, bbox=False)
return Image.fromarray(image)

def copy_annotations(self, annotations):
"""
Expand All @@ -148,6 +153,15 @@ def copy_annotations(self, annotations):

return annotations.count()

def __call__(self):

image = im.Image.from_path(self.path)
for annotation in AnnotationModel.objects(image_id=self.id, deleted=False).all():
if not annotation.is_empty():
image.add(annotation())

return image


class AnnotationModel(db.DynamicDocument):

Expand Down Expand Up @@ -196,7 +210,7 @@ def save(self, copy=False, *args, **kwargs):
self.metadata = dataset.default_annotation_metadata.copy()

if self.color is None:
self.color = color_util.random_color_hex()
self.color = im.Color.random().hex

if current_user:
self.creator = current_user.username
Expand Down Expand Up @@ -225,6 +239,23 @@ def clone(self):

return AnnotationModel(**create)

def __call__(self):

category = CategoryModel.objects(id=self.category_id).first()
if category:
category = category()

data = {
'image': None,
'category': category,
'color': self.color,
'polygons': self.segmentation,
'width': self.width,
'height': self.height,
'metadata': self.metadata
}

return im.Annotation(**data)

class CategoryModel(db.DynamicDocument):

Expand Down Expand Up @@ -260,7 +291,7 @@ def bulk_create(cls, categories):
def save(self, *args, **kwargs):

if not self.color:
self.color = color_util.random_color_hex()
self.color = im.Color.random().hex

if current_user:
self.creator = current_user.username
Expand All @@ -269,6 +300,16 @@ def save(self, *args, **kwargs):

return super(CategoryModel, self).save(*args, **kwargs)

def __call__(self):
""" Generates imantics category object """
data = {
'name': self.name,
'color': self.color,
'parent': self.supercategory,
'metadata': self.metadata,
'id': self.id
}
return im.Category(**data)

class LicenseModel(db.DynamicDocument):
id = db.SequenceField(primary_key=True)
Expand Down
46 changes: 0 additions & 46 deletions app/util/thumbnail_util.py

This file was deleted.

2 changes: 1 addition & 1 deletion client/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div id="app">
<NavBar v-show="showNavBar"/>
<NavBar v-show="showNavBar" />
<RouterView :key="$route.fullPath" />
</div>
</template>
Expand Down
27 changes: 22 additions & 5 deletions client/src/components/Metadata.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<template>
<div>
<i class="fa fa-plus" style="float: right; margin: 0 4px; color: green" @click="createMetadata" />
<i
class="fa fa-plus"
style="float: right; margin: 0 4px; color: green"
@click="createMetadata"
/>

<p class="title" style="margin: 0">{{ title }}</p>

Expand All @@ -17,15 +21,28 @@
<li v-if="metadataList.length == 0" class="list-group-item meta-item">
<i class="subtitle">No items in metadata.</i>
</li>
<li v-for="(object, index) in metadataList" :key="index" class="list-group-item meta-item">
<li
v-for="(object, index) in metadataList"
:key="index"
class="list-group-item meta-item"
>
<div class="row" style="cell">

<div class="col-sm">
<input v-model="object.key" type="text" class="meta-input" :placeholder="keyTitle">
<input
v-model="object.key"
type="text"
class="meta-input"
:placeholder="keyTitle"
/>
</div>

<div class="col-sm">
<input v-model="object.value" type="text" class="meta-input" :placeholder="valueTitle">
<input
v-model="object.value"
type="text"
class="meta-input"
:placeholder="valueTitle"
/>
</div>
</div>
</li>
Expand Down
22 changes: 14 additions & 8 deletions client/src/components/NavBar.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<template>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">

<a class="navbar-brand" href="/">
<strong>{{ name }}</strong>
<span class="subscript">{{ version }}</span>
</a>

<button class="navbar-toggler"
type="button" data-toggle="collapse"
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
Expand All @@ -18,7 +19,6 @@

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">

<li class="nav-item" :class="{ active: $route.name === 'datasets' }">
<RouterLink class="nav-link" to="/datasets">Datasets</RouterLink>
</li>
Expand All @@ -28,20 +28,26 @@
<li class="nav-item" :class="{ active: $route.name === 'undo' }">
<RouterLink class="nav-link" to="/undo">Undo</RouterLink>
</li>
<li v-show="$store.getters['user/isAdmin']" class="nav-item" :class="{ active: $route.name === 'admin' }">
<li
v-show="$store.getters['user/isAdmin']"
class="nav-item"
:class="{ active: $route.name === 'admin' }"
>
<RouterLink class="nav-link" to="/admin/panel">Admin</RouterLink>
</li>
<li class="nav-item">
<a class="nav-link" href="/api">API</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/jsbroks/coco-annotator/wiki">Help</a>
<a
class="nav-link"
href="https://github.com/jsbroks/coco-annotator/wiki"
>Help</a
>
</li>

</ul>
<Status />
<User v-if="loginEnabled" />

</div>
</nav>
</template>
Expand Down
15 changes: 12 additions & 3 deletions client/src/components/Pagination.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,19 @@
<span class="sr-only">Previous</span>
</a>
</li>
<li v-for="pageIndex in range" :key="pageIndex" :class="{ 'page-item': true, active: pageIndex + startPage == page }">
<a class="page-link" @click="page = pageIndex + startPage">{{ pageIndex + startPage}}</a>
<li
v-for="pageIndex in range"
:key="pageIndex"
:class="{ 'page-item': true, active: pageIndex + startPage == page }"
>
<a class="page-link" @click="page = pageIndex + startPage">{{
pageIndex + startPage
}}</a>
</li>
<li :class="{ 'page-item': true, disabled: page == pages }" @click="nextPage">
<li
:class="{ 'page-item': true, disabled: page == pages }"
@click="nextPage"
>
<a class="page-link" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
Expand Down
13 changes: 11 additions & 2 deletions client/src/components/Status.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
<template>
<div class="form-inline my-2 my-lg-0" style="margin-right: 10px">
<div class="my-sm-0 btn-sm disabled" :class="buttonType" style="border: none">
<i v-if="allLoaded" class="fa fa-check fa-x status-icon" style="float:left"> </i>
<div
class="my-sm-0 btn-sm disabled"
:class="buttonType"
style="border: none"
>
<i
v-if="allLoaded"
class="fa fa-check fa-x status-icon"
style="float:left"
>
</i>
<i v-else class="fa fa-spinner fa-pulse fa-x fa-fw status-icon"></i>
{{ message }}
</div>
Expand Down
Loading

0 comments on commit 45efaad

Please sign in to comment.