Web Image Viewer refactor

[wmoore]

Following discussion with Carlos on re-working image viewport to improve re-usability / configuration etc.

Some overall goals

• jQuery 'plugin-ify'. E.g. $("div").viewport("zoom", 1.0)
• Separate UI components from other code / logic:
  • client state (rendering settings, Z, T etc)
  • event handling / notifications
• Keep existing functionality as is (although a few improvements were also discussed)

We aim to have a core class that is simply initialised with a reference to the 'server' prefix (E.g. 'webgateway') and can then be initialised with an Image-Id, fetch Image json etc. This will have all the methods to edit this state, E.g. setChannelColor() etc. and notify listeners.

UI code will be moved into jQuery plugins that are initialised / bound to the core state class, update it and listen to changes as necessary.

These jQuery plugins could be viewportImage, rendering panel etc.

A good first step would be to create tests that use all methods from the existing viewport API, and then to switch the test to using the new jQuery plugin, testing all the same methods.

Let's start by jotting down the existing API.

viewportImage

showOverlay(url, cb, error_cb)
hideOverlay()
overlayVisible()
doMove(deltax, deltay, smooth, auto_move_cb)
getOrigWidth()
getOrigHeight()

getXOffset()
setXOffset(xoffset)
getYOffset()
setYOffset(yoffset)

getZoom()
setZoom (val, width, height)
setZoomToFit(only_shrink, width, height)
doZoom(increment, justDirection)

getBigImageContainer()
setUpTiles(imagewidth, imageheight, xtilesize, ytilesize, init_zoom, levels, href, thref, init_cx, init_cy)
destroyTiles()

refresh()

viewport.js

setZPos(pos)
setTPos(pos)
load(iid, dsid, query)
hasLinePlot()
getLinePlot()
prepareLinePlot()
startPickPos()
stopPickPos()
loadPlot(pos)
loadRowPlot(y)
hidePlot()
refreshPlot(cb)
refresh(allow_resize)
getAuthor()
getChannels()
toggleChannel(idx)
getCCount()
setChannelActive(idx, act, noreload)
setChannelColor(idx, color, noreload)
setChannelLabel(idx, color, noreload)
setChannelWindow(idx, start, end, noreload)
getMetadata()
getProjection()
setProjection(p, noreload)
setInvertedAxis(p, noreload)
setModel(m, noreload)
getModel()
isGreyModel()
getPixelSizes()
setQuality(q, noreload)
getQuality()
setServer()
getSizes()
getTCount()
getPos()
getTPos()
getZCount()
getZPos()
setZoom(z)
getZoom()
setZoomToFit(only_shrink)
save_channels()
undo_channels()
has_channels_undo()
redo_channels()
has_channels_redo()
reset_channels()
bookmark_channels()
back_to_bookmarked_channels()
forget_bookmark_channels()
getQuery()
setQuery(query)
getRelUrl(append)
getUrl(base)
getCurrentImgUrlPath()
hasSettingsChanges()
bind(event, callback)

[jburel]

Handled by trello card ​https://trello.com/c/9sFjxk7U/34-web-viewer-improvement