Skip to content
Snippets Groups Projects
Commit 505211e3 authored by pkupczyk's avatar pkupczyk
Browse files

SSDM-274 : Javascript-based Microscopy Data Viewer: 

- listener for data set change event
- allow to customize data set chooser view
- removed unused classes
- updated example webapp

SVN: 31492
parent a358836c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 109 additions and 147 deletions
screening/source/core-plugins/microscopy/1/as/webapps/image-viewer/html/image-viewer.html
+ 18
− 3
View file @ 505211e3
...@@ -14,15 +14,30 @@ ...@@ -14,15 +14,30 @@
</head> </head>
<body> <body>
<script> <script>
require([ "jquery", "openbis-screening", "components/imageviewer/ImageViewerChooserWidget" ], function($, openbis, ImageViewerChooserWidget) { require([ "jquery", "openbis-screening", "components/imageviewer/ImageViewerWidget" ], function($, openbis, ImageViewerWidget) {
$(document).ready(function() { $(document).ready(function() {
var facade = new openbis();
var facade = new openbis();
facade.login("admin", "password", function(response) { facade.login("admin", "password", function(response) {
var widget = new ImageViewerChooserWidget(facade, [ "20140415140347875-53", "20140506132344798-146" ]);
var widget = new ImageViewerWidget(facade, [ "20140415140347875-53", "20140429125614418-59", "20140506132344798-146" ]);
widget.addLoadListener(function() {
var view = widget.getDataSetChooserWidget().getView();
view.getDataSetText = function(dataSetCode) {
return "My data set: " + dataSetCode;
};
widget.getDataSetChooserWidget().addChangeListener(function(event) {
console.log("data set changed from: " + event.getOldValue() + " to: " + event.getNewValue());
});
});
$("#container").append(widget.render()); $("#container").append(widget.render());
}); });
}); });
}); });
</script> </script>
......
screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/AbstractWidget.js
+ 34
− 3
View file @ 505211e3
...@@ -26,12 +26,24 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa ...@@ -26,12 +26,24 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa
var thisWidget = this; var thisWidget = this;
this.load(function() { var doRender = function() {
thisWidget.panel.empty();
if (thisWidget.getView()) { if (thisWidget.getView()) {
thisWidget.panel.append(thisWidget.getView().render()); thisWidget.panel.append(thisWidget.getView().render());
thisWidget.rendered = true; thisWidget.rendered = true;
thisWidget.notifyRenderListeners();
} }
}); };
if (this.loaded) {
doRender();
} else {
this.load(function() {
thisWidget.loaded = true;
thisWidget.notifyLoadListeners();
doRender();
});
}
return this.panel; return this.panel;
}, },
...@@ -76,7 +88,10 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa ...@@ -76,7 +88,10 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa
setView : function(view) { setView : function(view) {
this.view = view; this.view = view;
this.refresh(); if (this.rendered) {
this.rendered = false;
this.render();
}
}, },
addListener : function(eventType, listener) { addListener : function(eventType, listener) {
...@@ -93,6 +108,22 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa ...@@ -93,6 +108,22 @@ define([ "jquery", "components/common/ListenerManager" ], function($, ListenerMa
notifyChangeListeners : function(event) { notifyChangeListeners : function(event) {
this.notifyListeners("change", event); this.notifyListeners("change", event);
},
addLoadListener : function(listener) {
this.addListener("load", listener);
},
notifyLoadListeners : function() {
this.notifyListeners("load");
},
addRenderListener : function(listener) {
this.addListener("render", listener);
},
notifyRenderListeners : function() {
this.notifyListeners("render");
} }
}); });
......
screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserView.js 0 → 100644
+ 54
− 0
View file @ 505211e3
define([ "jquery", "components/imageviewer/AbstractView" ], function($, AbstractView) {
//
// DATA SET CHOOSER VIEW
//
function DataSetChooserView(controller) {
this.init(controller);
}
$.extend(DataSetChooserView.prototype, AbstractView.prototype, {
init : function(controller) {
AbstractView.prototype.init.call(this, controller);
this.panel = $("<div>").addClass("dataSetChooser");
},
render : function() {
var thisView = this;
var widget = $("<div>").addClass("form-group");
$("<label>").text("Data set").attr("for", "dataSetChooserSelect").appendTo(widget);
var select = $("<select>").attr("id", "dataSetChooserSelect").addClass("form-control").appendTo(widget);
this.controller.getDataSetCodes().forEach(function(dataSetCode) {
var text = thisView.getDataSetText(dataSetCode);
$("<option>").attr("value", dataSetCode).text(text).appendTo(select);
});
select.change(function() {
thisView.controller.setSelectedDataSetCode(select.val());
});
return widget;
},
getDataSetText : function(dataSetCode) {
return dataSetCode;
},
refresh : function() {
var select = this.panel.find("select");
if (this.controller.getSelectedDataSetCode() != null) {
select.val(this.controller.getSelectedDataSetCode());
}
}
});
return DataSetChooserView;
});
\ No newline at end of file
screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetChooserWidget.js
+ 3
− 47
View file @ 505211e3
define([ "jquery", "components/common/ChangeEvent", "components/imageviewer/AbstractView", "components/imageviewer/AbstractWidget" ], function($, define([ "jquery", "components/common/ChangeEvent", "components/imageviewer/AbstractWidget", "components/imageviewer/DataSetChooserView" ], function(
ChangeEvent, AbstractView, AbstractWidget) { $, ChangeEvent, AbstractWidget, DataSetChooserView) {
// //
// DATA SET CHOOSER VIEW // DATA SET CHOOSER WIDGET
//
function DataSetChooserView(controller) {
this.init(controller);
}
$.extend(DataSetChooserView.prototype, AbstractView.prototype, {
init : function(controller) {
AbstractView.prototype.init.call(this, controller);
this.panel = $("<div>").addClass("dataSetChooser");
},
render : function() {
var thisView = this;
var widget = $("<div>").addClass("form-group");
$("<label>").text("Data set").attr("for", "dataSetChooserSelect").appendTo(widget);
var select = $("<select>").attr("id", "dataSetChooserSelect").addClass("form-control").appendTo(widget);
this.controller.getDataSetCodes().forEach(function(dataSetCode) {
$("<option>").attr("value", dataSetCode).text(dataSetCode).appendTo(select);
});
select.change(function() {
thisView.controller.setSelectedDataSetCode(select.val());
});
return widget;
},
refresh : function() {
var select = this.panel.find("select");
if (this.controller.getSelectedDataSetCode() != null) {
select.val(this.controller.getSelectedDataSetCode());
}
}
});
//
// DATA SET CHOOSER
// //
function DataSetChooserWidget(dataSetCodes) { function DataSetChooserWidget(dataSetCodes) {
......
screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerView.js deleted 100644 → 0
+ 0
− 33
View file @ a358836c
define([ "jquery", "components/imageviewer/AbstractView", "components/imageviewer/ImageLoader", "components/imageviewer/ImageWidget" ], function($,
AbstractView, ImageLoader, ImageWidget) {
//
// DATA SET IMAGE VIEWER VIEW
//
function DataSetImageViewerView(controller) {
this.init(controller);
}
$.extend(DataSetImageViewerView.prototype, AbstractView.prototype, {
init : function(controller) {
AbstractView.prototype.init.call(this, controller);
this.imageLoader = new ImageLoader();
this.panel = $("<div>").addClass("imageViewer");
},
render : function() {
this.panel.append(this.controller.getChannelChooserWidget().render());
this.panel.append(this.controller.getResolutionChooserWidget().render());
this.panel.append(this.controller.getChannelStackChooserWidget().render());
this.refresh();
return this.panel;
}
});
return DataSetImageViewerView;
});
\ No newline at end of file
screening/source/java/ch/systemsx/cisd/openbis/plugin/screening/client/web/public/resources/components/imageviewer/DataSetImageViewerWidget.js deleted 100644 → 0
+ 0
− 61
View file @ a358836c
define([ "jquery", "components/imageviewer/AbstractWidget", "components/imageviewer/DataSetImageViewerView",
"components/imageviewer/ChannelChooserWidget", "components/imageviewer/ResolutionChooserWidget",
"components/imageviewer/ChannelStackChooserWidget" ], function($, AbstractWidget, DataSetImageViewerView, ChannelChooserWidget,
ResolutionChooserWidget, ChannelStackChooserWidget) {
//
// DATA SET IMAGE VIEWER WIDGET
//
function DataSetImageViewerWidget(imageInfo, imageResolutions) {
this.init(imageInfo, imageResolutions);
}
$.extend(DataSetImageViewerWidget.prototype, AbstractWidget.prototype, {
init : function(imageInfo, imageResolutions, imageLoader) {
AbstractWidget.prototype.init.call(this, new DataSetImageViewerView(this));
this.imageInfo = imageInfo;
this.imageResolutions = imageResolutions;
},
getChannelChooserWidget : function() {
if (this.channelChooserWidget == null) {
var thisWidget = this;
this.channelChooserWidget = new ChannelChooserWidget(this.imageInfo.imageDataset.imageDataset.imageParameters.channels);
this.channelChooserWidget.addChangeListener(function() {
thisWidget.refresh();
thisWidget.notifyChangeListeners();
});
}
return this.channelChooserWidget;
},
getResolutionChooserWidget : function() {
if (this.resolutionChooserWidget == null) {
var thisWidget = this;
this.resolutionChooserWidget = new ResolutionChooserWidget(this.imageResolutions);
this.resolutionChooserWidget.addChangeListener(function() {
thisWidget.refresh();
thisWidget.notifyChangeListeners();
});
}
return this.resolutionChooserWidget;
},
getChannelStackChooserWidget : function() {
if (this.channelStackChooserWidget == null) {
var thisWidget = this;
this.channelStackChooserWidget = new ChannelStackChooserWidget(this.imageInfo.channelStacks);
this.channelStackChooserWidget.addChangeListener(function() {
thisWidget.refresh();
thisWidget.notifyChangeListeners();
});
}
return this.channelStackChooserWidget;
}
});
return DataSetImageViewerWidget;
});
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment