ImageJ: .show() does not show an image - javascript

I very new to javascript and I would like to process some images in Fiji. I have been using the macro language for a while, but I am trying to get familiar with the formal ImageJ/Fiji API. I am trying to run the folowing simplistic piece of code, it runs with no errors but it does not show any image in the end. What's going wrong?
importClass(Packages.ij.plugin.filter.GaussianBlur);
var image = IJ.openImage("/home/.../KNIIC_BC_Cam2_AirBubble2_Image1038.bmp");
IJ.run(image, "8-bit", "");
var dpl = image.getProcessor().duplicate();
var gs = new GaussianBlur();
gs.blur(dpl,20);
new ImagePlus(gs).show();
Thanks in advance

The problem is the way how you deal with the ImagePlus: in the last line, you try to create a new ImagePlus, but there is no chance that this contains any information of your loaded image.
GaussianBlur processes an ImageProcessor that you'll get via the ImagePlus#getProcessor() method. If you look at the API documentation, you'll also see that blur(ImageProcessor,double) is deprecated in favor of one of the other methods: you might want to use blurGaussian(ImageProcessor, double, double, double)here.
This code would work:
importClass(Packages.ij.plugin.filter.GaussianBlur);
var imp = IJ.openImage("http://imagej.nih.gov/ij/images/clown.jpg");
IJ.run(imp, "8-bit", "");
var ip = imp.getProcessor();
var gs = new GaussianBlur();
gs.blurGaussian(ip,20,20,0.01);
imp.show();
however it uses the low level way of interfering with the GaussianBlur class. To make your life easy, you can also record the javascript command in the GUI via Plugins > Macros > Record... and then choosing Record: Javascript before performing the Gaussian blur via Process > Filters > Gaussian Blur.... This would make your code much shorter:
var imp = IJ.openImage("http://imagej.nih.gov/ij/images/clown.jpg");
IJ.run(imp, "8-bit", "");
IJ.run(imp, "Gaussian Blur...", "sigma=20");
imp.show();
For general help with Javascript scripting in ImageJ, see these two links to the Fiji wiki.
Edit: Starting from ImageJ 1.47n5, ImageProcessor has a new method blurGaussian(double sigma), shortening the above (low level) code to:
var imp = IJ.openImage("http://imagej.nih.gov/ij/images/clown.jpg");
IJ.run(imp, "8-bit", "");
imp.getProcessor().blurGaussian(20);
imp.show();

Related

Convert Hex coding to Bytes

I have this coding:
*(uint32_t*) 0xFFFFFFFF8269C07Cull=0;
*(uint32_t*) 0xFFFFFFFF8269B56Full=0;
And I want to convert this to something similar to:
function doWrite(write) {
setBase(write);
u32[0] = 0x0006b3e9;
u32[1] = 0x0f2e6600;
u32[2] = 0x0000841f;
u32[3] = 0x90000000;
u32[4] = 0xbf495741;
u32[5] = 0x263ffff8;
u32[6] = 0x00000009;
u32[7] = 0x413f8b4d;
u32[8] = 0x5f41d7ff;
u32[9] = 0xc0c748c3;
u32[10] = 0x0000001a;
u32[11] = 0xffffdfe8;
u32[12] = 0x0f66c3ff;
u32[13] = 0x0000441f;
u32[14] = 0x148b4865;
}
But the problem is, I don't know what the first coding example is called, which is a problem for looking it up on Google.
Questions:
What is the first coding example called?
What is the second coding example called?
What tool can I use to convert the first coding to something similar to the second example?
Any answer would help a lot. I am 100% new to this kind of stuff.
From what I can understand, you are trying to mimic the PS4 payload injection to enable the Developers Debug Menu/Settings. Since most customization and modding on PS4 is in C#, perhaps you should use the C# tag or, probably the more effective option, post your question on a more appropriate forum, which specifically deals with the modification of the PS4 software.
https://www.psxhax.com/
Here is an additional link I found for a script which is used to sending payloads
Hope this helps!

My JSLink script will not work

I am attempting to use JSLink ..finally.. and I am having some trouble that I cannot seem to straighten out. For my first venture down the rabbit hole I chose something super simple for use as proof of concept. So I looked up a tutorial and came up with a simple script to draw a box around the Title field of each entry and style the text. I cannot get this to work. Is there any chance you can take a look at this code for me? I used the following tokens in the JSLink box.
~sitecollection/site/folder/folder/file.js
And
~site/folder/folder/file.js
The .js file is stored on the same site as the List View WebPart I am attempting to modify. The list only has the default “Title” column.
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Item = overrideTemplate;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}
It looks as though you are attempting to override the context (ctx) item itself, where you actually just want to override the list field and the list view in which the field is displayed. Make sense?
Firstly, change overrideContext.Templates.Item to overrideContext.Templates.Fields :
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Fields = {
// Add field and point it to your rendering function
"Title": { "View": overrideTemplate },
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();
Then when the JSLink runs the renderer looks for the Title field in the List view, and applies your overrideTemplate function.
function overrideTemplate(ctx) {
return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}
In terms of running multiple JSLinks on a SharePoint page, it is quite possible to run multiple JSLink scripts, they just need to be separated by the pipe '|' symbol. I use SharePoint Online a lot and I see the following formatting working all the time (sorry Sascha!).
~site/yourassetfolder/yourfilename.js | ~site/yourassetfolder/anotherfilename.js
You can run as many scripts concurrently as you want, just keep separating them with the pipe. I've seen this on prem also, however you might want to swap out '~sites' for '~sitecollection' and make sure the js files you are accessing are at the top level site in the site collection if you do so!
I have noticed when running multiple JSLinks on a list or page because they are all doing Client Side Rendering, too many will slow your page down. If this happens, you might want to consider combining them into one JSLink script so that the server only has to call one file to return to the client to do all the rendering needed for your list.
Hope this helps.

Profiling Javascript performance using API

Hey I have been exploring the google-chrome debugging tools and profiling tools. Its truly amazing. One useful stuff I encountered is I get the call tree of the executions and their time taken (both self time and total children time count) in a full tree structure.
So I would like to know if we can get the call-tree with their timings in a tree structure using some JS API. I can use this tree timings to benchmark the different versions of my code and various other cool stuffs could be done, if I can automate.
I couldnot find much useful stuff over net. Can you give me some direction to this? Thanks in advance.
Let me know in comments if some parts are unclear in the question.I will rephrase myself.
If you want to benchmark different versions of your app, you can easily achieve this in Profiles in Chrome DevTools. You can record and save them to your computer, and then load them again anytime in the future. It's not just for the current session.
For example, you record your profile for Version 1. A few days later you load up your app in Chrome, record the new Profile and then import the old one and compare the charts or the tree view.
You could even open the saved files on your computer, which are stored in JSON format. You have all the data you need in there to play with. You can run a server to parse that data and extract the relevant information into a format you like. The amount of data can be huge and slow to handle though.
Update regarding comment:
Both console.timeline and console.timelineEnd were deprecated and replaced with console.time and console.timeEnd. However, there are no return values to store, so you can't do anything with the results in JavaScript. However, you can use window.performance:
var start = window.performance.now();
// your function
var end = window.performance.now();
var timeSpent = (end - start);
var stack = new Error().stack; // get call stack
You could then do what you like with the results.
If you want to time a function from a 3rd party, you could override it and apply the original function in between:
var oldFunc = myFunc;
myFunc = function() {
var start = window.performance.now();
var returnVal = oldFunc.apply(this, arguments);
var end = window.performance.now();
var timeSpent = (end - start);
var stack = new Error().stack; // get call stack
return returnVal;
}
You can use console.profile() and console.profileEnd() to start and stop recording a profile. After it runs, you can see the result in the Profiles tab of the developer tools.

onClick replace /segment/ of img src path with one of number of values

No idea what I'm doing or why it isn't working. Clearly not using the right method and probably won't use the right language to explain the problem..
Photogallery... Trying to have a single html page... it has links to images... buttons on the page 'aim to' modify the path to the images by finding the name currently in the path and replacing it with the name of the gallery corresponding to the button the user clicked on...
example:
GALLERY2go : function(e) {
if(GalleryID!="landscapes")
{
var find = ''+ findGalleryID()+'';
var repl = "landscapes";
var page = document.body.innerHTML;
while (page.indexOf(find) >= 0) {
var i = page.indexOf(find);
var j = find.length;
page = page.substr(0,i) + repl + page.substr(i+j);
document.body.innerHTML = page;
var GalleryID = "landscapes";
}
}
},
There's a function higher up the page to get var find to take the value of var GalleryID:
var GalleryID = "portfolio";
function findGalleryID() {
return GalleryID
}
Clearly the first varGalleryID is global (t'was there to set a default value should I have been able to find a way of referring to it onLoad) and the one inside the function is cleared at the end of the function (I've read that much). But I don't know what any of this means.
The code, given its frailties or otherwise ridiculousness, actually does change all of the image links (and absolutely everything else called "portfolio") in the html page - hence "portfolio" becomes "landscapes"... the path to the images changes and they all update... As a JavaScript beginner I was pretty chuffed to see it worked. But you can't click on another gallery button because it's stuck in a loop of some sort. In fact, after you click the button you can't click on anything else and all of the rest of the JavaScript functionality is buggered. Perhaps I've introduced some kind of loop it never exits. If you click on portfolio when you're in portfolio you crash the browser! Anyway I'm well aware that 'my cobbled together solution' is not how it would be done by someone with any experience in writing code. They'd probably use something else with a different name that takes another lifetime to learn. I don't think I can use getElement by and refer to the class/id name and parse the filename [using lots of words I don't at all understand] because of the implications on the other parts of the script. I've tried using a div wrapper and code to launch a child html doc and that come in without disposing of the existing content or talking to the stylesheet. I'm bloody lost and don't even know where to start looking next.
The point is... And here's a plea... If any of you do reply, I fear you will reply without the making the assumption that you're talking to someone who really hasn't got a clue what AJAX and JQuery and PHP are... I have searched forums; I don't understand them. Please bear that in mind.
I'll take a stab at updating your function a bit. I recognize that a critique of the code as it stands probably won't help you solve your problem.
var currentGallery = 'landscape';
function ChangeGallery(name) {
var imgs = document.getElementsByTagName("img") // get all the img tags on the page
for (var i = 0; i < imgs.length; i++) { // loop through them
if (imgs[i].src.indexOf(currentGallery) >= 0) { // if this img tag's src contains the current gallery
imgs[i].src = imgs[i].src.replace(currentGallery, name);
}
}
currentGallery = name;
}
As to why I've done what I've done - you're correct in that the scope of the variables - whether the whole page, or only the given function, knows about it, is mixed in your given code. However, another potential problem is that if you replace everything in the html that says 'landscape' with 'portfolio', it could potentially change non-images. This code only finds images, and then replaces the src only if it contains the given keyword.

Advice on a good method to dynamically load images in JavaScript

I' m writing a web app that needs to load dynamically a lot of images.
I wrote an utility function, loadMultipleImages, that takes care of loading them and calling (possibly optional) callbacks whenever:
a single image is loaded
an error is encountered (a single image can't load)
all the images are loaded without errors
I invoke it like this (you can find a complete example here):
var imageResources = [];
var mulArgs = {multipleImages: [],
onComplete: this.afterLoading.bind(MYAPP),
onError: this.logError.bind(MYAPP)
}
imageResources = ["imageA_1.png", "imageA_2.png"];
mulArgs.multipleImages.push ({ID: "imageA_loader", imageNames : imageResources});
imageResources = ["imageB_1.png", "imageB_2.png"];
mulArgs.multipleImages.push ({ID: "imageB_loader", imageNames : imageResources});
//Lots of more images
var mImageLoader = new loadMultipleImages (mulArgs);
As soon as I create my loadMultipleImages object, it loads the images and calls the afterLoading() function after they are all loaded (or logError() if there's some problem). Then I can access to the images with:
MYAPP.afterLoading = function (loaders) {
// Just an example
var imageA_array = loaders["imageA_loader"].images;
var imageB_first = loaders["imageB_loader"].images[0];
}
By the way, I'm thinking that I'm reinventing the (possibly square) wheel. Is there a lightweight, simple library that does that better than I'm doing? Or simply a better method that spares me the burden of maintaining the loadMultipleImages code?
http://jsfromhell.com/classes/preloader

Categories