No annotation bars on the top

[djshu]

Thanks for your great work! I tried docker and npm installation, but when I open localhost:8003, I can't see the annotation bar , the screen I got is presented below.Can you help me?

[mpizenberg]

Hello, yes this is kind of normal. This is because in the initial state, no image nor configuration has been loaded. There is a small hint on the top right corner to first load some image. Then it will ask you to load an annotation config. Try following the beginning of the guide there, you should find solutions there: https://reva-n7.gitbook.io/annotation-app/getting-started.

I am aware that is a bit annoying for first approach, and was wondering if having a "demo" pre-configured app would make sense for people who might just want to test it. Relevant issue here #22 (Ready to play demo).

[djshu]

@mpizenberg Wow, thank you, I got it. But I still have some suggestions for you ^_^ When I use it on my ipad, I find that the page will roll while I draw some line on the image, so this situation will bring some inconvenience.Could you fix the page by some means? The second issue is that save annotation file is not convenient on ipad, so would you consider develop the feature for opening the images and saving the corresponding annotation files all on the server? The last suggestion is that I think set the default filename of annotation file to the same name as the image is a good choice. 2018-07-28 17:08:11

[mpizenberg]

Thank you for your feedback @djshu. It really matters for us to know how people are using it to improve user experience.

Regarding the page rolling, it is because touch events are usually optimized by mobile browsers to have fluid scrolling, and thus if we do not add special instructions to tell the browser not to do so, this will happen. Usability of the app on touch devices was a target I didn't have time to reach when I was fulltime on this. So the current status is: we added support for both mouse and touch, but didn't optimize yet the experience for mobile. In the things to do to improve mobile experience, there is also a better responsive design. I've logged our intention in issue #10.

Previously, I had done another demo app for the core library under this project. That demo was optimized for mobile experience also and currently lives at http://elm-image-annotation.pizenberg.fr/. It would be awesome if you could confirm that this demo is "working" correctly with your Ipad since it would mean I could apply the same techniques for the full annotation app.

The second issue is that save annotation file is not convenient on ipad

Could you please elaborate on this, I don't have an iPad to test. Is this related to browser behavior on saving like in #26? Or is this because managing files locally on an iPad is more complicated than with a desktop?

would you consider develop the feature for opening the images and saving the corresponding annotation files all on the server?

This application is entirely running in your browser, the only thing that the server does is serving the HTML code containing the client application. After that, the server is not used at all, it's a static server. This choice was on purpose, because some people need the fact that images and annotation data do not travel over network. So we made it guaranted by serving a full client app. Adding server capabilities is not on a near future roadmap.

There are alternatives though, some might better fit your use case than others, depending on your needs.

1. If you need to do a crowdsourcing campaign, the application can be integrated into Amazon Mechanical Turk (mturk) as explained in the guide. This way, annotation data is not saved on your device, but on mturk servers and can be retrieved with their API.
2. If you just want something similar than mturk, but embedded in your own solution, you can definitely read the explanation on how to use this app with mturk, since it also explains how to personalize the app integration.

The normal code specifying what to do when the user clicks on the save button is in the file client/static/ports.js. In this version, it induces a download. In the mturk version (ports-mturk.js), it submits the annotation data through mturk form. But basically, you could do whatever your wish as a replacement of the content of app.ports.export.subscribe, that's the joy of open-source ;)

The last suggestion is that I think set the default filename of annotation file to the same name as the image is a good choice.

Others have the same feeling, I have already filed an issue with some of my thoughts here #25.

I don't have time right now to act on all this, but I've filled issues for most feedback I got from people (https://github.com/mpizenberg/annotation-app/issues). Don't hesitate to add some :+1: and add your use cases to those that matter to you. It will help me choose what I'll focus on when I get some time. Contribution welcomed also! You can also "subscribe" to github issues to get notified when there is activity there.

[djshu]

Thank you so much for reply! On ipad, there is no file system for users in my opinion. For example, when I download a pdf file, safari will ask me to open it by which app. But I can hardly find where the pdf file is on my ipad. So download the annotation file to the ipad is not a good idea I think. In addition, import the config json file is not convenient. For instance, after I touch the gear icon, I can only find the path to open images, not the path to open config file. On my friend's ipad whose icloud is opened, it's ok to import the config file from the icloud. In a word, I think it's better to open images and config file and save annotations all on server considering ipad's poor file operating. But it's worth to make the tool useful on ipad due to the convenience of touch. In the end, since the Amazon Mturk is not free, can you give me some guidence to build my own Mturk? Thank you!

[mpizenberg]

On ipad, there is no file system for users in my opinion

I see, that is a bit annoying then I guess.

But it's worth to make the tool useful on ipad due to the convenience of touch.

Indeed, especially for the outline tool, but not so much with the polygons. For the bounding boxes, we found that the results were mixed, depending on the touch agility of users. We did a study on an android tablet last year and it was giving good results.

In the end, since the Amazon Mturk is not free, can you give me some guidence to build my own Mturk? Thank you!

Well I can give you pointers but I don't have time to explain everything. The html page served by the server and embedding the application is the index.html file. As you can see, the application is started with flags given as parameters:

const flags = {
	deviceSize: containerSize(),
	mturkMode: false,
	images: [],
	config: null
}

As explained in the section "Startup and interactions with JavaScript" of the guide, you could change the config directly in the index.html served by the server. This way, if you know you are allways going to use the same config, you don't have to ask the user to provide it anymore, it will be pre-loaded. Your server could also do the same with the images field. Instead of letting it empty, it could be preloaded with image urls that you want the user to receive.

Then, still as explained in the last part of "Startup and interactions with JavaScript" about ports, you can override the behavior on save by modifying the code in the export port. In this port you could send the annotation directly to your server as a form data or http post request.

I cannot explain here how to send data as forms to servers or how to code servers since this is completely out of scope. But I can give you pointers to very simple stacks. In my opinion, the easiest options are either the Node.js Express framework if you are familiar to JavaScript. Just like we have in the server/ directory. Or Flask if you are familiar with python.