Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Xywh panel #169

Merged
merged 9 commits into from
Sep 5, 2016
Merged

Xywh panel #169

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2f4d77e
Initial work
Aug 17, 2016
b1031af
Fix template and callback
Aug 25, 2016
abde498
Fix page offset
Aug 26, 2016
94c07d1
Still needs fixing for negative values
Aug 26, 2016
aab1f96
Fix condition for width-height bug
Aug 30, 2016
5231e75
Remove console.log statements
Aug 31, 2016
cd004ee
Fix negative values and limits and documentation
Sep 5, 2016
e44622e
remove console.log issues with -
Sep 5, 2016
7d70d96
setting the newvalue properly if the value is too high
Sep 5, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 67 additions & 29 deletions static/figure/figure.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,6 +341,22 @@
return {'w': w, 'h': h, 'cols': cols, 'rows': rows}
},

getPageOffset: function(coords) {
var gap = this.get('paper_spacing'),
pw = this.get('paper_width'),
ph = this.get('paper_height');
var xspacing = gap + pw;
var yspacing = gap + ph;
var offset = {};
if (coords.x !== undefined){
offset.x = coords.x % xspacing;
}
if (coords.y !== undefined){
offset.y = coords.y % yspacing;
}
return offset;
},

getDefaultFigureName: function() {
var d = new Date(),
dt = d.getFullYear() + "-" + (d.getMonth()+1) + "-" +d.getDate(),
Expand Down Expand Up @@ -2401,14 +2417,6 @@ var CropModalView = Backbone.View.extend({
// If a panel is added...
this.model.panels.on("add", this.addOne, this);

// Select a different size paper
$("#page_size_chooser").change(function(){
var wh = $(this).val().split(","),
w = wh[0],
h = wh[1];
self.model.set({'paper_width':w, 'paper_height':h});
});

// Don't leave the page with unsaved changes!
window.onbeforeunload = function() {
var canEdit = self.model.get('canEdit');
Expand Down Expand Up @@ -4631,7 +4639,7 @@ var RectView = Backbone.View.extend({
this.ipv.remove();
}
if (selected.length > 0) {
this.ipv = new InfoPanelView({models: selected});
this.ipv = new InfoPanelView({models: selected, figureModel: this.model});
this.ipv.render();
$("#infoTab").append(this.ipv.el);
}
Expand Down Expand Up @@ -5274,7 +5282,7 @@ var RectView = Backbone.View.extend({
initialize: function(opts) {
// if (opts.models) {
this.render = _.debounce(this.render);

this.figureModel = opts.figureModel;
this.models = opts.models;
if (opts.models.length > 1) {
var self = this;
Expand All @@ -5292,6 +5300,33 @@ var RectView = Backbone.View.extend({
"click .setId": "setImageId",
"click .set_dpi": "set_dpi",
"click .clear_dpi": "clear_dpi",
"blur .xywh_form input": "handle_xywh",
"keyup .xywh_form input": "handle_xywh",
},

handle_xywh: function(event) {
if (event.type === "keyup" && event.which !== 13) {
return;
}
var attr = event.target.getAttribute("name");
var value = parseInt(event.target.value, 10);
if (isNaN(value)) {
return;
}
this.models.forEach(function(m) {
if (attr === 'x' || attr ==='y'){
var old = m.get(attr);
var coords = {};
coords[attr] = old;
var offset = this.figureModel.getPageOffset(coords);
m.set(attr, old - offset[attr] + value);
}
else {
console.log(attr);
console.log(value);
m.set(attr, value);
}
}.bind(this));
},

set_dpi: function(event) {
Expand All @@ -5317,10 +5352,13 @@ var RectView = Backbone.View.extend({
// just update x,y,w,h by rendering ONE template
drag_resize: function(xywh) {
$("#xywh_table").remove();
var json = {'x': xywh[0] >> 0,
'y': xywh[1] >> 0,
'width': xywh[2] >> 0,
'height': xywh[3] >> 0};
var json = {'x': xywh[0].toFixed(0),
'y': xywh[1].toFixed(0),
'width': xywh[2].toFixed(0),
'height': xywh[3].toFixed(0)};
var offset = this.figureModel.getPageOffset(json);
json.x = offset.x;
json.y = offset.y;
json.dpi = this.model.getPanelDpi(json.width, json.height);
json.export_dpi = this.model.get('export_dpi');
this.$el.append(this.xywh_template(json));
Expand All @@ -5338,17 +5376,24 @@ var RectView = Backbone.View.extend({
remoteUrl = m.get('baseUrl') + "/img_detail/" + m.get('imageId') + "/";
}
// start with json data from first Panel
var this_json = m.toJSON();
// Format floating point values
_.each(["x", "y", "width", "height"], function(a){
if (this_json[a] != "-") {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed you can remove this if check now, since m.toJSON() won't give you any - values.

this_json[a] = this_json[a].toFixed(0);
}
});
var offset = this.figureModel.getPageOffset(this_json);
this_json.x = offset.x;
this_json.y = offset.y;
this_json.dpi = m.getPanelDpi();
this_json.channel_labels = this_json.channels.map(function(c){return c.label})
if (!json) {
json = m.toJSON();
json.dpi = m.getPanelDpi();
json.channel_labels = [];
_.each(json.channels, function(c){ json.channel_labels.push(c.label);});
json = this_json;
} else {
json.name = title;
// compare json summary so far with this Panel
var this_json = m.toJSON(),
attrs = ["imageId", "orig_width", "orig_height", "sizeT", "sizeZ", "x", "y", "width", "height", "dpi", "export_dpi"];
this_json.dpi = m.getPanelDpi();
var attrs = ["imageId", "orig_width", "orig_height", "sizeT", "sizeZ", "x", "y", "width", "height", "dpi", "export_dpi"];
_.each(attrs, function(a){
if (json[a] != this_json[a]) {
json[a] = "-";
Expand All @@ -5366,17 +5411,10 @@ var RectView = Backbone.View.extend({
}

}
});
}.bind(this));

json.export_dpi = json.export_dpi || 0;

// Format floating point values
_.each(["x", "y", "width", "height"], function(a){
if (json[a] != "-") {
json[a] = json[a].toFixed(0);
}
});

// Link IF we have a single remote image, E.g. http://jcb-dataviewer.rupress.org/jcb/img_detail/625679/
json.imageLink = false;
if (remoteUrl) {
Expand Down
16 changes: 16 additions & 0 deletions static/figure/js/models/figure_model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,22 @@
return {'w': w, 'h': h, 'cols': cols, 'rows': rows}
},

getPageOffset: function(coords) {
var gap = this.get('paper_spacing'),
pw = this.get('paper_width'),
ph = this.get('paper_height');
var xspacing = gap + pw;
var yspacing = gap + ph;
var offset = {};
if (coords.x !== undefined){
offset.x = coords.x % xspacing;
}
if (coords.y !== undefined){
offset.y = coords.y % yspacing;
}
return offset;
},

getDefaultFigureName: function() {
var d = new Date(),
dt = d.getFullYear() + "-" + (d.getMonth()+1) + "-" +d.getDate(),
Expand Down
18 changes: 9 additions & 9 deletions static/figure/js/templates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,15 +356,15 @@ __p += '\n (Export at ' +
((__t = ( export_dpi )) == null ? '' : __t) +
' dpi\n <button type="button" title="Delete Label" class="close clear_dpi"\n title="Remove (don\'t change dpi on export)"\n aria-hidden="true" style="float: none; left: 0; margin: 0; top: -2px;">×</button>\n <label>)</label>\n ';
} ;
__p += '\n </div>\n <button class="btn btn-sm btn-success set_dpi"\n title="Resample to a higher dpi at export">Set dpi</button>\n </form>\n \n </td></tr>\n <tr><td>\n <div class="col-sm-3" style="text-align: right"><small><strong>X</strong>:</small></div>\n <div class="col-sm-3"><small>';
print(x) ;
__p += '</small></div>\n\n <div class="col-sm-3" style="text-align: right"><small><strong>Width</strong>:</small></div>\n <div class="col-sm-3"><small>';
print(width) ;
__p += '</small></div>\n\n <div class="col-sm-3" style="text-align: right"><small><strong>Y</strong>:</small></div>\n <div class="col-sm-3"><small>';
print(y) ;
__p += '</small></div>\n\n <div class="col-sm-3" style="text-align: right"><small><strong>Height</strong>:</small></div>\n <div class="col-sm-3"><small>';
print(height) ;
__p += '</small></div>\n </td></tr>\n </tbody>\n </table>\n';
__p += '\n </div>\n <button class="btn btn-sm btn-success set_dpi"\n title="Resample to a higher dpi at export">Set dpi</button>\n </form>\n \n </td></tr>\n <tr><td>\n <form class="form-horizontal xywh_form" role="form">\n <div class="form-group">\n <label class="col-lg-2 control-label">X</label>\n <div class="col-lg-4">\n <input type="number" name="x" class="form-control input-sm" value="' +
((__t = ( x )) == null ? '' : __t) +
'">\n </div>\n <label class="col-lg-2 control-label">Width</label>\n <div class="col-lg-4">\n <input name="width" class="form-control input-sm" value="' +
((__t = ( width )) == null ? '' : __t) +
'">\n </div>\n </div>\n <div class="form-group" style="margin-bottom: -15px;">\n <label class="col-lg-2 control-label">Y</label>\n <div class="col-lg-4">\n <input name="y" class="form-control input-sm" value="' +
((__t = ( y )) == null ? '' : __t) +
'">\n </div>\n <label class="col-lg-2 control-label">Height</label>\n <div class="col-lg-4">\n <input name="height" class="form-control input-sm" value="' +
((__t = ( height )) == null ? '' : __t) +
'">\n </div>\n </div>\n </form>\n </td></tr>\n </tbody>\n </table>\n';

}
return __p
Expand Down
8 changes: 0 additions & 8 deletions static/figure/js/views/figure_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,6 @@
// If a panel is added...
this.model.panels.on("add", this.addOne, this);

// Select a different size paper
$("#page_size_chooser").change(function(){
var wh = $(this).val().split(","),
w = wh[0],
h = wh[1];
self.model.set({'paper_width':w, 'paper_height':h});
});

// Don't leave the page with unsaved changes!
window.onbeforeunload = function() {
var canEdit = self.model.get('canEdit');
Expand Down
72 changes: 51 additions & 21 deletions static/figure/js/views/right_panel_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
this.ipv.remove();
}
if (selected.length > 0) {
this.ipv = new InfoPanelView({models: selected});
this.ipv = new InfoPanelView({models: selected, figureModel: this.model});
this.ipv.render();
$("#infoTab").append(this.ipv.el);
}
Expand Down Expand Up @@ -674,7 +674,7 @@
initialize: function(opts) {
// if (opts.models) {
this.render = _.debounce(this.render);

this.figureModel = opts.figureModel;
this.models = opts.models;
if (opts.models.length > 1) {
var self = this;
Expand All @@ -692,6 +692,33 @@
"click .setId": "setImageId",
"click .set_dpi": "set_dpi",
"click .clear_dpi": "clear_dpi",
"blur .xywh_form input": "handle_xywh",
"keyup .xywh_form input": "handle_xywh",
},

handle_xywh: function(event) {
if (event.type === "keyup" && event.which !== 13) {
return;
}
var attr = event.target.getAttribute("name");
var value = parseInt(event.target.value, 10);
if (isNaN(value)) {
return;
}
this.models.forEach(function(m) {
if (attr === 'x' || attr ==='y'){
var old = m.get(attr);
var coords = {};
coords[attr] = old;
var offset = this.figureModel.getPageOffset(coords);
m.set(attr, old - offset[attr] + value);
}
else {
console.log(attr);
console.log(value);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The console.logs are probably not necessary, are they?

m.set(attr, value);
}
}.bind(this));
},

set_dpi: function(event) {
Expand All @@ -717,10 +744,13 @@
// just update x,y,w,h by rendering ONE template
drag_resize: function(xywh) {
$("#xywh_table").remove();
var json = {'x': xywh[0] >> 0,
'y': xywh[1] >> 0,
'width': xywh[2] >> 0,
'height': xywh[3] >> 0};
var json = {'x': xywh[0].toFixed(0),
'y': xywh[1].toFixed(0),
'width': xywh[2].toFixed(0),
'height': xywh[3].toFixed(0)};
var offset = this.figureModel.getPageOffset(json);
json.x = offset.x;
json.y = offset.y;
json.dpi = this.model.getPanelDpi(json.width, json.height);
json.export_dpi = this.model.get('export_dpi');
this.$el.append(this.xywh_template(json));
Expand All @@ -738,17 +768,24 @@
remoteUrl = m.get('baseUrl') + "/img_detail/" + m.get('imageId') + "/";
}
// start with json data from first Panel
var this_json = m.toJSON();
// Format floating point values
_.each(["x", "y", "width", "height"], function(a){
if (this_json[a] != "-") {
this_json[a] = this_json[a].toFixed(0);
}
});
var offset = this.figureModel.getPageOffset(this_json);
this_json.x = offset.x;
this_json.y = offset.y;
this_json.dpi = m.getPanelDpi();
this_json.channel_labels = this_json.channels.map(function(c){return c.label})
if (!json) {
json = m.toJSON();
json.dpi = m.getPanelDpi();
json.channel_labels = [];
_.each(json.channels, function(c){ json.channel_labels.push(c.label);});
json = this_json;
} else {
json.name = title;
// compare json summary so far with this Panel
var this_json = m.toJSON(),
attrs = ["imageId", "orig_width", "orig_height", "sizeT", "sizeZ", "x", "y", "width", "height", "dpi", "export_dpi"];
this_json.dpi = m.getPanelDpi();
var attrs = ["imageId", "orig_width", "orig_height", "sizeT", "sizeZ", "x", "y", "width", "height", "dpi", "export_dpi"];
_.each(attrs, function(a){
if (json[a] != this_json[a]) {
json[a] = "-";
Expand All @@ -766,17 +803,10 @@
}

}
});
}.bind(this));

json.export_dpi = json.export_dpi || 0;

// Format floating point values
_.each(["x", "y", "width", "height"], function(a){
if (json[a] != "-") {
json[a] = json[a].toFixed(0);
}
});

// Link IF we have a single remote image, E.g. http://jcb-dataviewer.rupress.org/jcb/img_detail/625679/
json.imageLink = false;
if (remoteUrl) {
Expand Down
33 changes: 22 additions & 11 deletions static/figure/templates/xywh_panel_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,28 @@

</td></tr>
<tr><td>
<div class="col-sm-3" style="text-align: right"><small><strong>X</strong>:</small></div>
<div class="col-sm-3"><small><% print(x) %></small></div>

<div class="col-sm-3" style="text-align: right"><small><strong>Width</strong>:</small></div>
<div class="col-sm-3"><small><% print(width) %></small></div>

<div class="col-sm-3" style="text-align: right"><small><strong>Y</strong>:</small></div>
<div class="col-sm-3"><small><% print(y) %></small></div>

<div class="col-sm-3" style="text-align: right"><small><strong>Height</strong>:</small></div>
<div class="col-sm-3"><small><% print(height) %></small></div>
<form class="form-horizontal xywh_form" role="form">
<div class="form-group">
<label class="col-lg-2 control-label">X</label>
<div class="col-lg-4">
<input type="number" name="x" class="form-control input-sm" value="<%= x %>">
</div>
<label class="col-lg-2 control-label">Width</label>
<div class="col-lg-4">
<input name="width" class="form-control input-sm" value="<%= width %>">
</div>
</div>
<div class="form-group" style="margin-bottom: -15px;">
<label class="col-lg-2 control-label">Y</label>
<div class="col-lg-4">
<input name="y" class="form-control input-sm" value="<%= y %>">
</div>
<label class="col-lg-2 control-label">Height</label>
<div class="col-lg-4">
<input name="height" class="form-control input-sm" value="<%= height %>">
</div>
</div>
</form>
</td></tr>
</tbody>
</table>