Name: openseadragon-annotations
Owner: DigitalSlideArchive
Description: null
Created: 2014-11-13 17:42:14.0
Updated: 2017-08-07 04:27:52.0
Pushed: 2016-03-28 19:54:20.0
Homepage: null
Size: 421
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Openseadragon annotation is a web application that gives users the ability to specify deep zoom image source and then be able to markup and annotate the images. As of the now the application provides the following features:
This branch only contains the client side application. Server side and web services are to be included in a different branch.
|Library| Version | Used for| |——-|———|———| |jQuery |2.1.4 | | |jQuery UI|1.11.4|Draggable modals| |Bootstrap|3.3.5|Layout and modals| |Knockout|3.0.0|| |Openseadragon|2.1|Key binding for the switch button| |Openseadragon scalebar||Add scalebar to the viewer| |Openseadragon imaginghelper|1.2|Fetch various viewer properties| |Openseadragon viewerinputhook|1.1.0|| |Bootstrap switch|3.3.2|Bootstrap on/off switch| |Bootstrap colorpicker||Markup color picker| |Angular JS|1.4.9||
This repo inludes only the client side application for the annotation. Parts of the code were written in Angular JS and Bootstrap and the directory structire is changed to AngularJS based structure. The Python web service was removed from this repo and will be push to a new standalone repo to keep things separated.
This currently only works with a previous version of OpenSeaDragon 2.0.
The UI needs some work. Currently, the UI contains three modals:
Within the OSD code, I generate an instance of my anntoator called
annotationState()
Once I drew some annotations I can do; currentdataset = annotationState.storeAnnotations()
To clear annotations you can call: annotationState.clearAnnotations()
There's probably a cleaner way, but to save the data to the server, I did a
myjson_as_a_string = JSON.stringy(currentdataset)
This will which generate a string that I can push to the server; I can also reverse this oepration by doing
JSON.parse(myjson_as_a_string)
Once I clear the data, if I run
annotationState.loadAnnotations(currentdataset)
it will reload the ROI's I just drew. ROI's can also be drawn directly if I specify the JSON properly
Attatched to this object is annotationState.annotations that actually stores the annotation data I just created.
So after I draw a couple of objects, I issue the following from the javascript console:
currentDataSet = annotationState.storeAnnotation() //This converts the individual annotations into a simpler JSON object for storing on the server. I also need to store additional metadata that actually tells me WHAT image the ROIs were drawn on
This currently only works with a previous version of OpenSeaDragon 1.0.0; I will be upgrading this to work with the 2.0 version ASAP
In your index.html you need to add the following two includes:
jQuery is also a dependency and so is jQueryUI; In order to do annotation(s) you need to have some sort of widget/modal that pops up to allow the user to select the shape primitive
This same functionality can also be used to load previously saved annotations back onto the OSD Canvas.
So within the OSD code, I generate an instance of my anntoator called
annotationState()
Once I drew some annotations I can do; currentdataset = annotationState.storeAnnotations()
To clear annotations you can call: annotationState.clearAnnotations()
There's probably a cleaner way, but to save the data to the server, I did a
myjson_as_a_string = JSON.stringy(currentdataset)
JSON.parse(myjson_as_a_string)
annotationState.loadAnnotations(currentdataset)
it will reload the ROI's I just drew. ROI's can also be drawn directly if I specify the JSON properly
Attatched to this object is annotationState.annotations that actually stores the annotation data I just created.
So after I draw a couple of objects, I issue the following from the javascript console:
currentDataSet = annotationState.storeAnnotation() //This converts the individual annotations into a simpler JSON object for storing on the server. I also need to store additional metadata that actually tells me WHAT image the ROIs were drawn on
As a simple example, the following code will load four shapes onto the Canvas: