OMERO.web Basket

[bhcho]

Hi,

I'd like to pass the selected images' IDs from Basket in OMERO.web to my app as input arguments.
Could you tell me which file I should look at as an example?

Best,
BK

[atarkowska]

Hi,

Selected images in the basket are handled by the UI jQuery plugin in omeroweb/webclient/templates/webclient/basket/basket.html. It allows for elements to be selected by dragging a box with the mouse over the elements.

There is an event 'stop' assign to the table $("table#dataTable tbody").selectable({...});. This event is triggered at the end of the select operation. Basically what you need to do is add new button like:

Code: Select all

<input class="button" type="image" src="{% url webstatic "images/folder_html16.png" %}" alt="New share" title="New share" onclick="makeShare();">

in the function assign to stop.

Then in omeroweb/media/omeroweb/javascript/actions.js you can see how selected items are handled.

Code: Select all

function makeShare() {
    if (!isCheckedById("image")) {
        alert ("Please select at least one image. Currently you cannot add other objects to basket.");
    } else {
        var productArray = $("input[type='checkbox']:checked");
        var productListQuery = "";
        if (productArray.length > 0 ) {
            productArray.each(function() {
                if(this.checked) {
                    productListQuery += "&"+this.name+"="+this.id;
                }
            });
        } else {
            productListQuery += "&"+productArray.name+"="+productArray.id;
        }
    }
   
    src = '/webclient/basket/toshare/?'+productListQuery+'';
    loadMetadata(src); //loads right hand panel
    return false;
}

Basically you just need to specify your own src.

In addition, if you wish to wipe the basket after successful submit please know that image ID's are stored in Http session request.session.get('imageInBasket')

Ola

[wmoore]

Hi BK,

I see Ola has answered already. Her answer is probably what you want but here's what I was going to say....

I'm not familiar with the basket, so I can't answer directly, but I can give you some tips on how to work this sort of thing in the web client.

- Go to the url you're interested in. In this case its

webclient/basket/

- Look for the urls.py file that defines this url. In

Code: Select all

omeroweb/webclient/urls.py

you'll find a few 'basket' urls. This is the only one that matches the url above:

Code: Select all

    url( r'^basket/(?:(?P<action>[a-zA-Z]+)/)?$', views.basket_action, name="basket_action"),

where 'action' = None.

The code that handles this is in views.basket_action, so look in webclient/views.py for the basket_action function.

You can find the code for when action = None. If you want to look at webclient/controller/basket.py you can see how BaseBasket gets the basket image Ids, but you're probably more interested in the template used to display the images.

Code: Select all

webclient/basket/basket.html


This looks like the code that displays the images in basket

Code: Select all

{% for c in basket.imageInBasket %}
                    <tr id="{{ c.id }}">
                        <td class="action">
                            <img src="{% url render_thumbnail_resize 32 c.id  %}" alt="image" title="{{ c.name }}"/>
                            <input type="checkbox" name="image" id="{{ c.id }}" class="hide">     
                        </td>
                        <td class="desc">{{ c.name|truncatebefor:"65" }} {% if c.annotation_counter %}<img src="{% url webstatic "images/knotes16.png" %}" alt="a" title="annotation"/>{% endif %}{% if not c.isOwned %} <img src="{% url webstatic "images/kgpg12.png" %}" alt="l" title="locked"/>{% endif %}</td>
                        <td class="roles">{{ c.getDate }}</td>                   
                    </tr>
                {% endfor %}


You can do something similar to pass the image IDs to your app by creating a link with the image IDs in the request string. Like this

Code: Select all

<a href="/myApp/selected_images/?iIds={% for c in basket.imageInBasket %}{{ c.id }}{% if not forloop.last %},{% endif %}{% endfor %}">My App Link</a>


Will link to a url like this

Code: Select all

/myApp/selected_images/?iIds=2305,2306,2307


You can then get the image IDs by doing

Code: Select all

iIds = request.REQUEST.get('iIds', None)
if iIds:
    imageIds = iIds.split(",")
    ... etc.


Hopefully you'll be able to use these tips for working out how to do most stuff in OmeroWeb.

[bhcho]

Ola and Will,
Thank you so much. It was soooo helpful!!

Best,
BK

[bhcho]

Hi,

is there any way to select dataset and pass the dataset ID to my own app?
I don't believe I can add a dataset to Basket.

Best,
BK

[atarkowska]

Hi,

Dataset selection on the tree component is handled by jQuery simple tree plugin. If you look in omeroweb/webcliet/templates/webclient/data/conatiners.html on afterClick function

Code: Select all

$("div#tree_details").load("{% url load_data %}?view=tree", function () {
    simpleTreeCollection = $('.simpleTree').simpleTree({
    autoclose: false,
    afterRootClick:function(node){
        ...
    },
    afterClick:function(node){
        if($(node).attr('id') == "orphaned") {                     
            ...
        } else {
            var obj = $(node).attr('id').split("-");
            var par = $(node).parents('li:first').attr('id')
            if (obj[0] == 'pr') {
                ...
            } else if (obj[0] == 'ds') {
                //obj[1] - dataset id, pass it here to your app
            }
        }
    },...


you can pass dataset id in the //obj[1]

Ola

[bhcho]

Ola,

Thank you soooo much.