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.

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

figureModel_global_var #216

Merged
merged 1 commit into from Jun 16, 2017

Conversation

Projects
None yet
5 participants
@will-moore
Member

will-moore commented Jun 1, 2017

As discussed with @bramalingam, this small change makes the figureModel into a global variable so that it is accessible to the browser devtools console.
See https://trello.com/c/5f4RniW4/159-omerofigure-plugins

This allows users to script various changes to the figure.
E.g. pasting this code into the console will make a 'split-view' figure from all selected panels in the figure:

figureModel.panels.getSelected().forEach(p => {
    var j = p.toJSON();
    for (var c=0; c<j.channels.length; c++){
        // offset to the right each time we create a new panel
        j.x = j.x + (j.width * 1.05);
        // turn all channels off except for the current index
        j.channels.forEach((ch, i) => {
            ch.active = i === c;
        });
        // create new panel from json
        figureModel.panels.create(j);
    };
});

Movie figure

figureModel.panels.getSelected().forEach(p => {
    var j = p.toJSON();
	var left = j.x;
	var top = j.y;
	var columnCount = 10;
    var tIncrement = 2;
	var panelCount = 1;
    for (var t=tIncrement; t<j.sizeT; t+=tIncrement){
        // offset to the right each time we create a new panel
        j.x = left + ((panelCount % columnCount) * j.width * 1.05);
		j.y = top + (parseInt(panelCount / columnCount) * j.height * 1.05);
		panelCount++;
        // Increment T
        j.theT = t;
        // create new panel from json
        figureModel.panels.create(j);
    };
});

To test:

  • Open figure with some images
  • Open devtools (right-click on page and 'Inspect') and open devtools console.
  • Select one or more panels in the figure - e.g. a panel with multiple channels
  • Copy and paste the first example above into console. Enter.
  • Should see that the selected panels are propagated to the right with 1 channel on in each panel
  • Same should work for timelapse image panels with second example.
  • Try editing code examples above to get different behaviour.
window.figureModel global variable
Makes this available to the console for scripting manipulation of figure

@will-moore will-moore changed the title from window.figureModel global variable to figureModel_global_var Jun 7, 2017

@will-moore

This comment has been minimized.

Show comment
Hide comment
@will-moore

will-moore Jun 7, 2017

Member

@bramalingam Want to try playing with this? I can look over your shoulder or point you at docs etc?

Member

will-moore commented Jun 7, 2017

@bramalingam Want to try playing with this? I can look over your shoulder or point you at docs etc?

@bramalingam

This comment has been minimized.

Show comment
Hide comment
@bramalingam

bramalingam Jun 7, 2017

Member

@will-moore : I should be fully setup with my laptop by tomorrow. Can start playing around with it tomorrow, if that sounds fine.

Member

bramalingam commented Jun 7, 2017

@will-moore : I should be fully setup with my laptop by tomorrow. Can start playing around with it tomorrow, if that sounds fine.

@waxenegger

This comment has been minimized.

Show comment
Hide comment
@waxenegger

waxenegger Jun 14, 2017

Member

Very nice feature. Especially for people who want to play around and do things that are programmatically possible but aren't readily usable functions.

figure movie script

Member

waxenegger commented Jun 14, 2017

Very nice feature. Especially for people who want to play around and do things that are programmatically possible but aren't readily usable functions.

figure movie script

@joshmoore

This comment has been minimized.

Show comment
Hide comment
@joshmoore

joshmoore Jun 14, 2017

Member

Biggest bang for your buck? :) Could your example usage go somewhere, @waxenegger ? (I assume as javascript)

Member

joshmoore commented Jun 14, 2017

Biggest bang for your buck? :) Could your example usage go somewhere, @waxenegger ? (I assume as javascript)

@jburel

This comment has been minimized.

Show comment
Hide comment
@jburel

jburel Jun 14, 2017

Member

Do we start to move some of the examples to https://github.com/ome/community-docs or another repo?
we could rename to community-resources

Member

jburel commented Jun 14, 2017

Do we start to move some of the examples to https://github.com/ome/community-docs or another repo?
we could rename to community-resources

@will-moore

This comment has been minimized.

Show comment
Hide comment
@will-moore

will-moore Jun 14, 2017

Member

It looks like @waxenegger used the Movie figure example above.
I'm not sure if we need to create a space on any repo for users to share examples yet. We can put a couple of examples in the figure help docs and if we hear about any examples from the community we can think of where to put them at the time.

Member

will-moore commented Jun 14, 2017

It looks like @waxenegger used the Movie figure example above.
I'm not sure if we need to create a space on any repo for users to share examples yet. We can put a couple of examples in the figure help docs and if we hear about any examples from the community we can think of where to put them at the time.

@will-moore

This comment has been minimized.

Show comment
Hide comment
@will-moore

will-moore Jun 14, 2017

Member

Another example: This code will load ratings for all selected images and position the images into a histogram of ratings:

var url = window.location.href.split("figure")[0] + "webclient/api/annotations/?type=rating";
var imageIds = figureModel.getSelected().map(p => p.get('imageId'));
url += "&image=" + imageIds.join("&image=");
var paper_width = figureModel.get('paper_width')

$.getJSON(url, function(data) {
    // make a object of imageId:rating
    var ratingMap = {};
    data.annotations.forEach(function(rating){
        var imageId = rating.link.parent.id;
        ratingMap[imageId] = rating.longValue;
    });
    // Need to stack panels in 5 columns - keep track of counts
    var stackCounts = [0,0,0,0,0];
    figureModel.getSelected().forEach(function(p){
        var rating = ratingMap[p.get('imageId')];
        if (rating === undefined) return;
        rating = rating - 1;
        p.set({'x': paper_width * rating/5, 'y':stackCounts[rating] * p.get('height')});
        stackCounts[rating] += 1;
    });
});

screen shot 2017-06-14 at 14 59 54

Member

will-moore commented Jun 14, 2017

Another example: This code will load ratings for all selected images and position the images into a histogram of ratings:

var url = window.location.href.split("figure")[0] + "webclient/api/annotations/?type=rating";
var imageIds = figureModel.getSelected().map(p => p.get('imageId'));
url += "&image=" + imageIds.join("&image=");
var paper_width = figureModel.get('paper_width')

$.getJSON(url, function(data) {
    // make a object of imageId:rating
    var ratingMap = {};
    data.annotations.forEach(function(rating){
        var imageId = rating.link.parent.id;
        ratingMap[imageId] = rating.longValue;
    });
    // Need to stack panels in 5 columns - keep track of counts
    var stackCounts = [0,0,0,0,0];
    figureModel.getSelected().forEach(function(p){
        var rating = ratingMap[p.get('imageId')];
        if (rating === undefined) return;
        rating = rating - 1;
        p.set({'x': paper_width * rating/5, 'y':stackCounts[rating] * p.get('height')});
        stackCounts[rating] += 1;
    });
});

screen shot 2017-06-14 at 14 59 54

@joshmoore

This comment has been minimized.

Show comment
Hide comment
@joshmoore

joshmoore Jun 14, 2017

Member

Nifty!

Member

joshmoore commented Jun 14, 2017

Nifty!

@joshmoore

This comment has been minimized.

Show comment
Hide comment
@joshmoore

joshmoore Jun 14, 2017

Member

Are these "figure scripts"? :)

Member

joshmoore commented Jun 14, 2017

Are these "figure scripts"? :)

@will-moore

This comment has been minimized.

Show comment
Hide comment
@will-moore

will-moore Jun 15, 2017

Member

@joshmoore I don't think these are "Figure scripts" since we've used that term previously to refer to Python OMERO.scripts that create figures.
As discussing with @jburel, we will probably put these examples as gists on the figure repo (can gists belong to a repo instead of a user)?

Member

will-moore commented Jun 15, 2017

@joshmoore I don't think these are "Figure scripts" since we've used that term previously to refer to Python OMERO.scripts that create figures.
As discussing with @jburel, we will probably put these examples as gists on the figure repo (can gists belong to a repo instead of a user)?

@joshmoore

This comment has been minimized.

Show comment
Hide comment
@joshmoore

joshmoore Jun 15, 2017

Member

re naming: yeah, I definitely see how "scripts" is now taboo.

re gists: no, unfortunately they cannot (easily) belong to the repo. Unfortunately this is going to become another type of download that we will have to manage. (I've been searching for a solution for this myself)

Member

joshmoore commented Jun 15, 2017

re naming: yeah, I definitely see how "scripts" is now taboo.

re gists: no, unfortunately they cannot (easily) belong to the repo. Unfortunately this is going to become another type of download that we will have to manage. (I've been searching for a solution for this myself)

@jburel

This comment has been minimized.

Show comment
Hide comment
@jburel

jburel Jun 15, 2017

Member

I was looking for option for gist under repo too but that will not be an option

Member

jburel commented Jun 15, 2017

I was looking for option for gist under repo too but that will not be an option

@jburel

This comment has been minimized.

Show comment
Hide comment
@jburel
Member

jburel commented Jun 16, 2017

@jburel jburel merged commit 5a43c3a into ome:master Jun 16, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jburel jburel added this to the 3.1.0 milestone Jun 28, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment