We're Hiring!

OMERO.web Basket

General and open developer discussion about using OMERO APIs from C++, Java, Python, Matlab and more! Please new questions at https://forum.image.sc/tags/omero
Please note:
Historical discussions about OMERO. Please look for and ask new questions at https://forum.image.sc/tags/omero

If you are having trouble with custom code, please provide a link to a public repository, ideally GitHub.

OMERO.web Basket

Postby bhcho » Fri Mar 04, 2011 4:15 pm

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
bhcho
 
Posts: 236
Joined: Mon Apr 05, 2010 2:15 pm

Re: OMERO.web Basket

Postby atarkowska » Mon Mar 07, 2011 8:54 am

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
atarkowska
 
Posts: 327
Joined: Mon May 18, 2009 12:44 pm

Re: OMERO.web Basket

Postby wmoore » Mon Mar 07, 2011 9:03 am

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.
User avatar
wmoore
Team Member
 
Posts: 674
Joined: Mon May 18, 2009 12:46 pm

Re: OMERO.web Basket

Postby bhcho » Tue Mar 08, 2011 7:21 pm

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

Best,
BK
bhcho
 
Posts: 236
Joined: Mon Apr 05, 2010 2:15 pm

Re: OMERO.web Basket

Postby bhcho » Wed Mar 09, 2011 4:59 pm

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
bhcho
 
Posts: 236
Joined: Mon Apr 05, 2010 2:15 pm

Re: OMERO.web Basket

Postby atarkowska » Thu Mar 10, 2011 12:19 pm

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
atarkowska
 
Posts: 327
Joined: Mon May 18, 2009 12:44 pm

Re: OMERO.web Basket

Postby bhcho » Thu Mar 10, 2011 1:10 pm

Ola,

Thank you soooo much.
bhcho
 
Posts: 236
Joined: Mon Apr 05, 2010 2:15 pm


Return to Developer Discussion

Who is online

Users browsing this forum: Google [Bot] and 0 guests