Overview
Forum
Mango
iMango
Papaya
Multi-image Analysis GUI
Board Index
Register
Login
Logout
Settings

change icons in papaya viewer

Questions or comments about Mango, webMango, iMango or Papaya.

Moderator: Michael Martinez

change icons in papaya viewer

Postby gamaliz » Thu Jan 18, 2018 10:30 am

Hi, I am trying to change the icons (of loaded images) in the papaya interface. I can change them in firefox Inspectorby replacing the src of the img element, But I can't do it automatically on image load.

My viewer loads empty and has javascript buttons that load sets of images (they remain static from there on). I tried using this, but on load the image still does not exist.
Code: Select all
      params["loadingComplete"] = function() {
      im1= document.getElementById("ImageButton10"); //.src="sites/default/files/papaya_icons/lb.png";
      if (!im1 === null) im1.src="sites/default/files/papaya_icons/lb.png";
       };

I might be able to write some funtions which executes on "page change", but it will be probably be running like crazy and slowing down the page.

Is there a simpler way to get this done? The image icon could be a configurable option, such as the color table and so on. Of maybe there is a function I can use.
This is what it should look at the end, I have all the images in the right size.I upgrade everytime you release, so I don't really want to change core...
Capture.JPG
image icon changed
Capture.JPG (73.46 KiB) Viewed 34628 times



Thanks
gamaliz
 
Posts: 24
Joined: Fri Aug 07, 2015 10:44 am

Re: change icons in papaya viewer

Postby gamaliz » Thu Jan 18, 2018 2:22 pm

I am putting first an emty viewer, and using js buttons to load sets of images like this
papaya.Container.addImage(0, "'.$tmp_directory.nii.gz", params );

all this is working.

This function gets executed before all data is loaded in the viewer.

loadingComplete

I defined it and I am debugging it on firefox. When I load my viewer the function gets executed (and there is the screenvolumen 0 is not defined as there are none loaded. But once I user The function bellow (very dirty sorry) should not execute until all images are loaded, however it never finds that
Code: Select all
papayaContainers[0].viewer.screenVolumes[0]

is loaded. If I remove the restriction on the checkpoint to stop all the time the fucntion is executed, the debugger stops, but before images are loaded. That is why my variable is undefined. I can also see on the call stack that the viewer is there, but no image have loaded yet.
papayaContainers[0].viewer.screenVolumes[0].


Code: Select all
/*params["loadingComplete"] = function () {
      //window.alert(papayaContainers[0].viewer.screenVolumes[0].icon);return;
      if (!typeof papayaContainers[0].viewer.screenVolumes[0]  === "undefined"){
           var image00=document.getElementById("ImageButton00");
           console.log(image00);
          //window.alert(papayaContainers[0].viewer.screenVolumes[0].icon);
          //papayaContainers[0].viewer.screenVolumes[0].icon= "sites/default/files/papaya_icons/lb.png";
         }
       };*/


So this function is actually executing before my volume 0 is loaded, and that is why I am getting these errors.


You know what will be great, to have this icon change deal as part of the params, like this
Code: Select all
params["pet_brain.nii.gz"] = {alpha: ".6", "minPercent":"'.$minPercent.'", "maxPercent": "1", lut: "Spectrum", icon: "sites/default/files/papaya_icons/lb.png"};


after all this is an image option. And as long as the icons are well formed 18x18 pngs, it should work.

I wonder if there is a way to solve this. solving it with css is a pain because of the way my code is design :( the best solution for me would be to make the icon an option to load with the clinical image itself.


Thanks
gamaliz
 
Posts: 24
Joined: Fri Aug 07, 2015 10:44 am

Re: change icons in papaya viewer

Postby admin » Sun Feb 11, 2018 3:33 pm

Sorry for the late reply. I've added the icon option you requested. Use it just as you suggested in your example. Please let me know if it doesn't work for you. Thanks.

Code: Select all
params["pet_brain.nii.gz"] = {alpha: ".6", "minPercent":"'.$minPercent.'", "maxPercent": "1", lut: "Spectrum", icon: "sites/default/files/papaya_icons/lb.png"};
admin
Site Admin
 
Posts: 77
Joined: Fri Jul 06, 2007 8:18 am
Location: Research Imaging Center

Re: change icons in papaya viewer

Postby gamaliz » Mon Feb 12, 2018 2:42 pm

works great
If you are using the viewer to display many layers that are loaded dynamically this is much more clearer than the bottom one. I still have to work on the icons.

icons1.JPG
icons1.JPG (21.53 KiB) Viewed 34219 times


icons2.JPG
icons2.JPG (11.29 KiB) Viewed 34219 times


Thanks
gamaliz
 
Posts: 24
Joined: Fri Aug 07, 2015 10:44 am

Re: change icons in papaya viewer

Postby gamaliz » Mon Feb 12, 2018 3:01 pm

It does not seem to work on surfaces

Code: Select all
params["lh.pial.gii"] = {color: [0, 1, 0], alpha: 0.5, icon: "sites/default/files/papaya_icons/gl.png"};
params["rh.pial.gii"] = {color: [0, 1, 0], alpha: 0.5, icon: "sites/default/files/papaya_icons/gr.png"};
params["lh.white.gii"] = {color: [128, 0, 0], alpha: 1, icon: "sites/default/files/papaya_icons/wl.png"};
params["rh.white.gii"] = {color: [128, 0, 0], alpha: 1, icon: "sites/default/files/papaya_icons/wr.png"};

surf.JPG
surf.JPG (67.87 KiB) Viewed 34218 times



but it does work on dti
dti.JPG
dti.JPG (30.89 KiB) Viewed 34218 times
gamaliz
 
Posts: 24
Joined: Fri Aug 07, 2015 10:44 am

Re: change icons in papaya viewer

Postby gamaliz » Mon Feb 12, 2018 4:10 pm

I am trying to use this function but it executes when the papaya viewer loads, not after I change it. Is there a function which can be called after the images are changed?

params["loadingComplete"] = function() {
console.log(document.getElementById("SurfaceButton00") );
};


if you can't fix it for surfaces don't worry, I can get it to work with this:

Code: Select all
       let delay=1000;
       let timerId = setInterval(function change_surface_icons() {

       if( document.getElementById("SurfaceButton30")  == null)
         {
            console.log("Here" );
            console.log(document.getElementById("SurfaceButton30") );
       } else
          {
            //change icons here
            console.log(document.getElementById("SurfaceButton30") );
            clearInterval(timerId);

           }
        }
        , delay);


just keep an eye on the buttons and replace them once they are loaded.
gamaliz
 
Posts: 24
Joined: Fri Aug 07, 2015 10:44 am

Re: change icons in papaya viewer

Postby gamaliz » Wed Feb 14, 2018 1:37 pm

Got it.
just in case this helps someone:

Code: Select all
       let delay=1000;
       let timerId = setInterval(function change_surface_icons() {

       if( document.getElementById("SurfaceButton30")  != null)
         {
            //change icons here
            document.getElementById("SurfaceButton00").firstChild.src="sites/default/files/papaya_icons/gl.png";
            document.getElementById("SurfaceButton10").firstChild.src="sites/default/files/papaya_icons/gr.png";
            document.getElementById("SurfaceButton20").firstChild.src="sites/default/files/papaya_icons/wl.png";
            document.getElementById("SurfaceButton30").firstChild.src="sites/default/files/papaya_icons/wr.png";

            clearInterval(timerId);

         }
        }
        , delay);


If you do fix it for surfaces let me know and I will use the "icons= " , which I think is better and releases some stress from the browser.

papayasurfaceicons.png
papayasurfaceicons.png (210.96 KiB) Viewed 34169 times
gamaliz
 
Posts: 24
Joined: Fri Aug 07, 2015 10:44 am

Re: change icons in papaya viewer

Postby admin » Sun Mar 04, 2018 5:20 pm

Pretty late on this, but I just added this feature for surfaces to. Thanks.
admin
Site Admin
 
Posts: 77
Joined: Fri Jul 06, 2007 8:18 am
Location: Research Imaging Center


Return to Mango

Who is online

Users browsing this forum: No registered users and 1 guest

cron