diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelChooserWidget.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelChooserWidget.js
index bf6b212aa42aa924063a7dcf169533702953c093..4d2f3b6703f697c777af4bf68608c6985674e65e 100644
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelChooserWidget.js
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelChooserWidget.js
@@ -2,7 +2,7 @@ define([ "jquery", "components/imageviewer/AbstractWidget", "components/imagevie
ChannelChooserView) {
//
- // CHANNEL CHOOSER
+ // CHANNEL CHOOSER WIDGET
//
function ChannelChooserWidget(channels) {
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackMatrixChooserView.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackMatrixChooserView.js
index 560cc13f100e319465108a8e80384469f76870b1..6d20bbd3aa3ab0c2c7252efb25e9429c2c727250 100644
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackMatrixChooserView.js
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackMatrixChooserView.js
@@ -18,12 +18,10 @@ define([ "jquery", "bootstrap", "bootstrap-slider", "components/imageviewer/Abst
render : function() {
var thisView = this;
- var slidersRow = $("<div>").addClass("row").appendTo(this.panel);
- $("<div>").addClass("col-md-6").append(this.createTimePointWidget()).appendTo(slidersRow);
- $("<div>").addClass("col-md-6").append(this.createDepthWidget()).appendTo(slidersRow);
-
- var buttonsRow = $("<div>").appendTo(this.panel);
- buttonsRow.append(this.controller.getTimePointButtonsWidget().render());
+ this.panel.append(this.createTimePointWidget());
+ this.panel.append(this.controller.getTimePointButtonsWidget().render());
+ this.panel.append(this.createDepthWidget());
+ this.panel.append(this.controller.getDepthButtonsWidget().render());
this.refresh();
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackMatrixChooserWidget.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackMatrixChooserWidget.js
index f670e728efc89d0882eea19d4787d0522ed4b519..ec2547bdd48dc9b75afdf060591223b515220499 100644
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackMatrixChooserWidget.js
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackMatrixChooserWidget.js
@@ -3,7 +3,7 @@ define([ "jquery", "components/imageviewer/AbstractWidget", "components/imagevie
ChannelStackMatrixChooserView, MovieButtonsWidget, ChannelStackManager) {
//
- // CHANNEL STACK MATRIX CHOOSER
+ // CHANNEL STACK MATRIX CHOOSER WIDGET
//
function ChannelStackMatrixChooserWidget(channelStacks) {
@@ -23,12 +23,14 @@ define([ "jquery", "components/imageviewer/AbstractWidget", "components/imagevie
doGetState : function(state) {
state.timePointButtonsState = this.getTimePointButtonsWidget().getState();
+ state.depthButtonsState = this.getDepthButtonsWidget().getState();
state.selectedTimePoint = this.getSelectedTimePoint();
state.selectedDepth = this.getSelectedDepth();
},
doSetState : function(state) {
this.getTimePointButtonsWidget().setState(state.timePointButtonsState);
+ this.getDepthButtonsWidget().setState(state.depthButtonsState);
this.setSelectedTimePoint(state.selectedTimePoint);
this.setSelectedDepth(state.selectedDepth);
},
@@ -139,6 +141,30 @@ define([ "jquery", "components/imageviewer/AbstractWidget", "components/imagevie
}
return this.timeButtonsWidget;
+ },
+
+ getDepthButtonsWidget : function() {
+ if (this.depthButtonsWidget == null) {
+ var thisWidget = this;
+
+ var widget = new MovieButtonsWidget(this.getDepths().length);
+
+ widget.setFrameContentLoader(function(frameIndex, callback) {
+ var depth = thisWidget.getDepths()[frameIndex];
+ var timePoint = thisWidget.getSelectedTimePoint();
+ var channelStack = thisWidget.getChannelStackByTimePointAndDepth(timePoint, depth);
+ thisWidget.loadChannelStackContent(channelStack, callback);
+ });
+
+ widget.addChangeListener(function() {
+ var depth = thisWidget.getDepths()[widget.getSelectedFrame()];
+ thisWidget.setSelectedDepth(depth);
+ });
+
+ this.depthButtonsWidget = widget;
+ }
+
+ return this.depthButtonsWidget;
}
});
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackSeriesChooserWidget.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackSeriesChooserWidget.js
index 5557d781dd592bcdf009ab05fcd908796760bb66..0163e550159495eae2b4710863608678cf7746eb 100644
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackSeriesChooserWidget.js
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ChannelStackSeriesChooserWidget.js
@@ -3,7 +3,7 @@ define([ "jquery", "components/imageviewer/AbstractWidget", "components/imagevie
ChannelStackSeriesChooserView, MovieButtonsWidget, ChannelStackManager) {
//
- // CHANNEL STACK SERIES CHOOSER
+ // CHANNEL STACK SERIES CHOOSER WIDGET
//
function ChannelStackSeriesChooserWidget(channelStacks) {
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/MovieButtonsView.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/MovieButtonsView.js
new file mode 100644
index 0000000000000000000000000000000000000000..431883e4b0375376567c5807931723e3554ccb22
--- /dev/null
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/MovieButtonsView.js
@@ -0,0 +1,100 @@
+define([ "jquery", "components/imageviewer/AbstractView" ], function($, AbstractView) {
+
+ //
+ // MOVIE BUTTONS VIEW
+ //
+
+ function MovieButtonsView(controller) {
+ this.init(controller);
+ }
+
+ $.extend(MovieButtonsView.prototype, AbstractView.prototype, {
+
+ init : function(controller) {
+ AbstractView.prototype.init.call(this, controller);
+ this.panel = $("<div>").addClass("movieButtonsWidget").addClass("form-group");
+ },
+
+ render : function() {
+ var thisView = this;
+
+ var row = $("<div>").addClass("row").appendTo(this.panel);
+
+ var buttonsRow = $("<div>").addClass("buttons").addClass("row").appendTo(this.panel);
+ var delayRow = $("<div>").addClass("delay").addClass("form-inline").appendTo(this.panel);
+
+ $("<div>").addClass("col-md-6").append(buttonsRow).appendTo(row);
+ $("<div>").addClass("col-md-6").append(delayRow).appendTo(row);
+
+ var play = $("<button>").addClass("play").addClass("btn").addClass("btn-primary");
+ $("<span>").addClass("glyphicon").addClass("glyphicon-play").appendTo(play);
+ $("<div>").addClass("col-md-3").append(play).appendTo(buttonsRow);
+
+ play.click(function() {
+ thisView.controller.play();
+ });
+
+ var stop = $("<button>").addClass("stop").addClass("btn").addClass("btn-primary");
+ $("<span>").addClass("glyphicon").addClass("glyphicon-stop").appendTo(stop);
+ $("<div>").addClass("col-md-3").append(stop).appendTo(buttonsRow);
+
+ stop.click(function() {
+ thisView.controller.stop();
+ });
+
+ var prev = $("<button>").addClass("prev").addClass("btn").addClass("btn-default");
+ $("<span>").addClass("glyphicon").addClass("glyphicon-backward").appendTo(prev);
+ $("<div>").addClass("col-md-3").append(prev).appendTo(buttonsRow);
+
+ prev.click(function() {
+ thisView.controller.prev();
+ });
+
+ var next = $("<button>").addClass("next").addClass("btn").addClass("btn-default");
+ $("<span>").addClass("glyphicon").addClass("glyphicon-forward").appendTo(next);
+ $("<div>").addClass("col-md-3").append(next).appendTo(buttonsRow);
+
+ next.click(function() {
+ thisView.controller.next();
+ });
+
+ var delayTable = $("<table>").appendTo(delayRow);
+ var delayTr = $("<tr>").appendTo(delayTable);
+
+ $("<td>").append($("<span>").addClass("delayLabel").text("delay:").attr("for", "delayInput")).appendTo(delayTr);
+
+ var delay = $("<input>").attr("id", "delayInput").attr("type", "text").addClass("delay").addClass("form-control");
+ delay.change(function() {
+ thisView.controller.setSelectedDelay(delay.val());
+ });
+ $("<td>").attr("width", "100%").append(delay).appendTo(delayTr);
+
+ $("<td>").append($("<span>").addClass("delayUnit").text("ms")).appendTo(delayTr);
+
+ this.refresh();
+
+ return this.panel;
+ },
+
+ refresh : function() {
+ var play = this.panel.find("button.play");
+ play.prop("disabled", this.controller.isPlaying());
+
+ var stop = this.panel.find("button.stop");
+ stop.prop("disabled", this.controller.isStopped());
+
+ var prev = this.panel.find("button.prev");
+ prev.prop("disabled", this.controller.isFirstFrameSelected());
+
+ var next = this.panel.find("button.next");
+ next.prop("disabled", this.controller.isLastFrameSelected());
+
+ var delay = this.panel.find("input.delay");
+ delay.val(this.controller.getSelectedDelay());
+ }
+
+ });
+
+ return MovieButtonsView;
+
+});
\ No newline at end of file
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/MovieButtonsWidget.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/MovieButtonsWidget.js
index 633189813a9ce08fce837fdffd3169a2f9f18be4..467829422ccd13bad7e2ae3c227bcd61e81a3cc8 100644
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/MovieButtonsWidget.js
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/MovieButtonsWidget.js
@@ -1,234 +1,140 @@
-define([ "jquery", "components/imageviewer/AbstractView", "components/imageviewer/AbstractWidget" ], function($, AbstractView, AbstractWidget) {
+define([ "jquery", "components/imageviewer/MovieButtonsView", "components/imageviewer/AbstractWidget" ],
+ function($, MovieButtonsView, AbstractWidget) {
- //
- // MOVIE BUTTONS VIEW
- //
+ //
+ // MOVIE BUTTONS WIDGET
+ //
- function MovieButtonsView(controller) {
- this.init(controller);
- }
-
- $.extend(MovieButtonsView.prototype, AbstractView.prototype, {
-
- init : function(controller) {
- AbstractView.prototype.init.call(this, controller);
- this.panel = $("<div>").addClass("movieButtonsWidget").addClass("form-group");
- },
-
- render : function() {
- var thisView = this;
-
- var row = $("<div>").addClass("row").appendTo(this.panel);
-
- var buttonsRow = $("<div>").addClass("buttons").addClass("row").appendTo(this.panel);
- var delayRow = $("<div>").addClass("delay").addClass("form-inline").appendTo(this.panel);
-
- $("<div>").addClass("col-md-6").append(buttonsRow).appendTo(row);
- $("<div>").addClass("col-md-6").append(delayRow).appendTo(row);
-
- var play = $("<button>").addClass("play").addClass("btn").addClass("btn-primary");
- $("<span>").addClass("glyphicon").addClass("glyphicon-play").appendTo(play);
- $("<div>").addClass("col-md-3").append(play).appendTo(buttonsRow);
-
- play.click(function() {
- thisView.controller.play();
- });
-
- var stop = $("<button>").addClass("stop").addClass("btn").addClass("btn-primary");
- $("<span>").addClass("glyphicon").addClass("glyphicon-stop").appendTo(stop);
- $("<div>").addClass("col-md-3").append(stop).appendTo(buttonsRow);
-
- stop.click(function() {
- thisView.controller.stop();
- });
-
- var prev = $("<button>").addClass("prev").addClass("btn").addClass("btn-default");
- $("<span>").addClass("glyphicon").addClass("glyphicon-backward").appendTo(prev);
- $("<div>").addClass("col-md-3").append(prev).appendTo(buttonsRow);
-
- prev.click(function() {
- thisView.controller.prev();
- });
-
- var next = $("<button>").addClass("next").addClass("btn").addClass("btn-default");
- $("<span>").addClass("glyphicon").addClass("glyphicon-forward").appendTo(next);
- $("<div>").addClass("col-md-3").append(next).appendTo(buttonsRow);
-
- next.click(function() {
- thisView.controller.next();
- });
-
- var delayTable = $("<table>").appendTo(delayRow);
- var delayTr = $("<tr>").appendTo(delayTable);
-
- $("<td>").append($("<span>").addClass("delayLabel").text("delay:").attr("for", "delayInput")).appendTo(delayTr);
-
- var delay = $("<input>").attr("id", "delayInput").attr("type", "text").addClass("delay").addClass("form-control");
- delay.change(function() {
- thisView.controller.setSelectedDelay(delay.val());
- });
- $("<td>").attr("width", "100%").append(delay).appendTo(delayTr);
-
- $("<td>").append($("<span>").addClass("delayUnit").text("ms")).appendTo(delayTr);
-
- this.refresh();
-
- return this.panel;
- },
-
- refresh : function() {
- var play = this.panel.find("button.play");
- play.prop("disabled", this.controller.isPlaying());
-
- var stop = this.panel.find("button.stop");
- stop.prop("disabled", this.controller.isStopped());
-
- var prev = this.panel.find("button.prev");
- prev.prop("disabled", this.controller.isFirstFrameSelected());
-
- var next = this.panel.find("button.next");
- next.prop("disabled", this.controller.isLastFrameSelected());
-
- var delay = this.panel.find("input.delay");
- delay.val(this.controller.getSelectedDelay());
- }
-
- });
-
- //
- // MOVIE BUTTONS WIDGET
- //
-
- function MovieButtonsWidget(frameCount) {
- this.init(frameCount);
- }
-
- $.extend(MovieButtonsWidget.prototype, AbstractWidget.prototype, {
-
- init : function(frameCount) {
- AbstractWidget.prototype.init.call(this, new MovieButtonsView(this));
- this.frameCount = frameCount;
- this.frameContentLoader = function(frameIndex, callback) {
- callback();
- };
- this.frameAction = null;
- this.selectedDelay = 100;
- this.selectedFrame = 0;
- },
-
- doGetState : function(state) {
- state.selectedFrame = this.getSelectedFrame();
- state.selectedDelay = this.getSelectedDelay();
- },
-
- doSetState : function(state) {
- this.setSelectedFrame(state.selectedFrame);
- this.setSelectedDelay(state.selectedDelay);
- },
-
- play : function() {
- if (this.frameAction) {
- return;
+ function MovieButtonsWidget(frameCount) {
+ this.init(frameCount);
}
- if (this.getSelectedFrame() == this.frameCount - 1) {
- this.setSelectedFrame(0);
- }
-
- var thisButtons = this;
-
- this.frameAction = function() {
- if (thisButtons.getSelectedFrame() < thisButtons.frameCount - 1) {
- var frame = thisButtons.getSelectedFrame() + 1;
- var startTime = Date.now();
-
- thisButtons.setSelectedFrame(frame, function() {
- var prefferedDelay = thisButtons.selectedDelay;
- var actualDelay = Date.now() - startTime;
-
- setTimeout(function() {
- if (thisButtons.frameAction) {
- thisButtons.frameAction();
- }
- }, Math.max(1, prefferedDelay - actualDelay));
- });
- } else {
- thisButtons.stop();
- thisButtons.setSelectedFrame(0);
+ $.extend(MovieButtonsWidget.prototype, AbstractWidget.prototype, {
+
+ init : function(frameCount) {
+ AbstractWidget.prototype.init.call(this, new MovieButtonsView(this));
+ this.frameCount = frameCount;
+ this.frameContentLoader = function(frameIndex, callback) {
+ callback();
+ };
+ this.frameAction = null;
+ this.selectedDelay = 100;
+ this.selectedFrame = 0;
+ },
+
+ doGetState : function(state) {
+ state.selectedFrame = this.getSelectedFrame();
+ state.selectedDelay = this.getSelectedDelay();
+ },
+
+ doSetState : function(state) {
+ this.setSelectedFrame(state.selectedFrame);
+ this.setSelectedDelay(state.selectedDelay);
+ },
+
+ play : function() {
+ if (this.frameAction) {
+ return;
+ }
+
+ if (this.getSelectedFrame() == this.frameCount - 1) {
+ this.setSelectedFrame(0);
+ }
+
+ var thisButtons = this;
+
+ this.frameAction = function() {
+ if (thisButtons.getSelectedFrame() < thisButtons.frameCount - 1) {
+ var frame = thisButtons.getSelectedFrame() + 1;
+ var startTime = Date.now();
+
+ thisButtons.setSelectedFrame(frame, function() {
+ var prefferedDelay = thisButtons.selectedDelay;
+ var actualDelay = Date.now() - startTime;
+
+ setTimeout(function() {
+ if (thisButtons.frameAction) {
+ thisButtons.frameAction();
+ }
+ }, Math.max(1, prefferedDelay - actualDelay));
+ });
+ } else {
+ thisButtons.stop();
+ thisButtons.setSelectedFrame(0);
+ }
+ };
+
+ this.frameAction();
+ this.refresh();
+ },
+
+ stop : function() {
+ if (this.frameAction) {
+ this.frameAction = null;
+ this.refresh();
+ }
+ },
+
+ prev : function() {
+ this.setSelectedFrame(this.getSelectedFrame() - 1);
+ },
+
+ next : function() {
+ this.setSelectedFrame(this.getSelectedFrame() + 1);
+ },
+
+ isPlaying : function() {
+ return this.frameAction != null;
+ },
+
+ isStopped : function() {
+ return this.frameAction == null;
+ },
+
+ isFirstFrameSelected : function() {
+ return this.getSelectedFrame() == 0;
+ },
+
+ isLastFrameSelected : function() {
+ return this.getSelectedFrame() == (this.frameCount - 1)
+ },
+
+ getSelectedDelay : function() {
+ return this.selectedDelay;
+ },
+
+ setSelectedDelay : function(delay) {
+ if (this.selectedDelay != delay) {
+ this.selectedDelay = delay;
+ this.refresh();
+ }
+ },
+
+ getSelectedFrame : function() {
+ return this.selectedFrame;
+ },
+
+ setSelectedFrame : function(frame, callback) {
+ frame = Math.min(Math.max(0, frame), this.frameCount - 1);
+
+ if (this.selectedFrame != frame) {
+ this.selectedFrame = frame;
+ this.frameContentLoader(frame, callback);
+ this.refresh();
+ this.notifyChangeListeners();
+ }
+ },
+
+ setFrameContentLoader : function(frameContentLoader) {
+ this.frameContentLoader = frameContentLoader;
+ },
+
+ getFrameContentLoader : function(frameContentLoader) {
+ return this.frameContentLoader;
}
- };
-
- this.frameAction();
- this.refresh();
- },
-
- stop : function() {
- if (this.frameAction) {
- this.frameAction = null;
- this.refresh();
- }
- },
-
- prev : function() {
- this.setSelectedFrame(this.getSelectedFrame() - 1);
- },
-
- next : function() {
- this.setSelectedFrame(this.getSelectedFrame() + 1);
- },
- isPlaying : function() {
- return this.frameAction != null;
- },
-
- isStopped : function() {
- return this.frameAction == null;
- },
-
- isFirstFrameSelected : function() {
- return this.getSelectedFrame() == 0;
- },
-
- isLastFrameSelected : function() {
- return this.getSelectedFrame() == (this.frameCount - 1)
- },
-
- getSelectedDelay : function() {
- return this.selectedDelay;
- },
-
- setSelectedDelay : function(delay) {
- if (this.selectedDelay != delay) {
- this.selectedDelay = delay;
- this.refresh();
- }
- },
-
- getSelectedFrame : function() {
- return this.selectedFrame;
- },
-
- setSelectedFrame : function(frame, callback) {
- frame = Math.min(Math.max(0, frame), this.frameCount - 1);
-
- if (this.selectedFrame != frame) {
- this.selectedFrame = frame;
- this.frameContentLoader(frame, callback);
- this.refresh();
- this.notifyChangeListeners();
- }
- },
-
- setFrameContentLoader : function(frameContentLoader) {
- this.frameContentLoader = frameContentLoader;
- },
-
- getFrameContentLoader : function(frameContentLoader) {
- return this.frameContentLoader;
- }
-
- });
+ });
- return MovieButtonsWidget;
+ return MovieButtonsWidget;
-});
\ No newline at end of file
+ });
\ No newline at end of file
diff --git a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ResolutionChooserWidget.js b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ResolutionChooserWidget.js
index e91722700615edf565b4e6338fcfcebd27c14dfc..ea50fd622c985ba931f672d2a34aca4af502f75b 100644
--- a/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ResolutionChooserWidget.js
+++ b/screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/ResolutionChooserWidget.js
@@ -2,7 +2,7 @@ define([ "jquery", "components/imageviewer/AbstractWidget", "components/imagevie
ResolutionChooserView) {
//
- // RESOLUTION CHOOSER
+ // RESOLUTION CHOOSER WIDGET
//
function ResolutionChooserWidget(resolutions) {