Develop Reference

Create Adobe XD background blur effect in Java

I have prototyped part of my application in Adobe XD
And now it is time to recreate that frosted glass effect in Java. However, the closest I could get is the following
As the more keen-eyed of you might see...it looks bad, and nothing like my design.
I achieved the look below by taking a screenshot of the relevant part of the screen and applying a gaussian blur to the Image. I have no idea how to achieve the above look so any help would be greatly appreciated.
Below you can see my code thus far
Robot robot = new Robot();
Toolkit myToolkit = Toolkit.getDefaultToolkit();
Dimension screenSize = myToolkit.getScreenSize();
Rectangle screen = new Rectangle(screenSize);
BufferedImage screenBlurImage = robot.createScreenCapture(screen);
//get relevant section
screenBlurImage = screenBlurImage.getSubimage(457,415,1006,107);
//set image
image.setImage(screenBlurImage);
//Apply blur
BoxBlur bb = new BoxBlur();
bb.setWidth(5);
bb.setHeight(5);
bb.setIterations(3);
image.setImage(SwingFXUtils.toFXImage(screenBlurImage, null ));
image.setEffect(bb);

I ended up exporting the Adobe XD Design as an HTML Webpage and rendering it using a JavaFX Webview with transparent background, turns out the way Adobe XD blurs backgrounds is by using the following CSS options:
box-shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.5);
filter: blur(13px);

Using UrlImage causes bad quality scaled image

I am trying to create an app using codename one that uses a RESTful web service to download details to be displayed including an image url.
I think what I need is ScaleImageButton, the purpose of which is to have a list of items to be clicked to display more information (so several ScaleImageButtons).
The code I am currently using to create the button is as follows:
java.util.List<String> splitImage = tokenize(url, '/');
EncodedImage placeholder = FontImage.createMaterial(FontImage.MATERIAL_SAVE, btnStyle.getUnselectedStyle()).toEncodedImage();
URLImage image = URLImage.createToStorage(placeholder, splitImage.get(splitImage.size() - 1), url, URLImage.RESIZE_SCALE_TO_FILL);
ScaleImageButton btn = new ScaleImageButton(image);
btn.setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FILL);
The background image of this button is of very poor quality (a few millimetres per pixel) even though the image displays in the larger browser window.
How can I have the image fill the background but also keep its quality?
Thanks in advance.

What you are doing is downloading an image which is the size of your placeholder and scaling it up by applying it to a ScaleImageButton, instead of downloading an image of the right size.
Be sure that your placeholder image is of the right size before using it to download the actual image.
For instance:
//half the size of device width image
EncodedImage placeholder = FontImage.createMaterial(FontImage.MATERIAL_SAVE, btnStyle.getUnselectedStyle(), CN.getDisplayWidth() / 2).toEncodedImage();

How do I supply a Color Model to a .tiff image in Java when the image does not provide a Color Model to be used?

I am fairly new to Java, and so some of the classes like Color Model and JAI are not familiar to me. I have a tiff image I am reading into a program in Java. This is my read-in code:
BufferedImage img = null;
String input[] = {"LE70160412002112EDC00_sr_band5", "LE70160412002144EDC00_sr_band5"};
String filetype = "tif";
File file = new File(input[0] + "output.csv");
int numFiles = 0;
while (numFiles < 2){
if (filetype == "tif"){
FileSeekableStream stream = new FileSeekableStream(new File(input[numFiles] + ".tif"));
TIFFDecodeParam decodeParam = new TIFFDecodeParam();
decodeParam.setDecodePaletteAsShorts(true);
ParameterBlock params = new ParameterBlock();
params.add(stream);
RenderedOp image1 = JAI.create("tiff", params);
img = image1.getAsBufferedImage();
}
}
To be clear, other things are done further down in the while loop that I excluded such that the files are not overwriting each other. The problem I am having is not being able read in the file and get further into the loop. I had a tiff file that only had black and white pixels (0 or 255 red value for all pixels), and the code ran correctly because the file supplied the Color Model. The new tiff file I am trying to use is a greyscale picture (0 to 255 red value for all pixels), and every time I run the code it gives me the following error message:
Exception in thread "main" java.lang.IllegalArgumentException: No ColorModel is supplied and the image ColorModel is null.
at javax.media.jai.PlanarImage.getAsBufferedImage(PlanarImage.java:2500)
at javax.media.jai.PlanarImage.getAsBufferedImage(PlanarImage.java:2546)
at Soda.DoStuff.doStuff(DoStuff.java:60)
at Soda.Driver.main(Driver.java:6)
My first instinct given the error message is to create a new Color Model. There may also be a better way to use JAI to import the tiff file such that it supplies the Color Model for the greyscale image. My end goal is to get the red value for each pixel in the image, so I do not want the data coming in to be altered from it's original form.
Any help I can get would be much appreciated. I am open to any suggestions.
EDIT:
Someone commented to try and use the getDefaultColorModel class inside the PlanarImage library, so I changed the bottom line of the code to this:
cm = PlanarImage.getDefaultColorModel(0, 1); //
img = image1.getAsBufferedImage(null, cm);
This also did not completely work but provided a different error message:
Exception in thread "main" java.lang.IllegalArgumentException: SampleModel and ColorModel parameters must be non-null.
at com.sun.media.jai.util.JDKWorkarounds.areCompatibleDataModels(JDKWorkarounds.java:363)
at javax.media.jai.PlanarImage.getAsBufferedImage(PlanarImage.java:2505)
at Soda.DoStuff.doStuff(DoStuff.java:64)
at Soda.Driver.main(Driver.java:6)
I have extensively read through https://docs.oracle.com/cd/E17802_01/products/products/java-media/jai/forDevelopers/jai-apidocs/javax/media/jai/PlanarImage.html to learn about the PlanarImage class, but I still cannot figure out how to properly format a ColorModel. (0,1) creates a color model with 8 pixel bits and 1 component. I also tried with (1,1) which creates a color model with 16 pixel bits and 1 component. Both provided the same error message above.
EDIT2: Unfortunately, I cannot link the image itself. However, I can tell you how I got the image from USGS. Forewarning, getting this image requires you to make a free account, and then afterwards you have to 'order' the picture from USGS, which is simply they need to process the request and give a download link for a zip file. It WILL take some time before you can actually access the picture. I also suggest making the account first because it will not let you start the image checkout process until you have an account made.
Using this link, http://earthexplorer.usgs.gov/, you pick a point on the map, then set the date range so that it ends on 12/31/2002 (the start date does not matter). The go to the Data set tab where under the "Landsat Archive" bullet, you will hit the checkbox for "Landsat Surface Reflectance - L7 ETM+". Hit OK on the dialogue, then hit "Results" at the bottom of the screen.
Once you have signed into your account and done this search, you should see many images on the left side of your screen with similar names to the filenames in my code above. You want to hit the shopping cart next to one of the images (You only need one, my whole project required 2, but for the purposes of reading in the file, that's not necessary). The shopping cart should turn green. Then in the top right corner there is a link to an Item Basket. You hit "Proceed to Checkout" and "Submit Order" on successive screens, and then you wait for an email from USGS.
Finally unzip the file, and you should have about 10 images. As you can see in the code, I am using the image with the name "sr_band5", but I believe any of the bands are greyscale which I cannot read in. Hope this can help.

Update photo in flex without blinking

i am trying to simulate a live view using a canon Camera.
I am interacting with the cam using the CanonSDK, i get an image every a short period in order to simulate a video frame by frame. This works fine, i am using java to do the backend and send the images trough BlazeDS to flex.
The problem is not getting the image, the problem is that when i load a new image using something like:
image.source=my_new_image;
the new image is loaded but it produces a short white blink and it ruins the video...
So i would like to know if the is a way to update an image on flex avoiding the blinking problem, or if i could make a video streaming from java and pick it up with flex...
Thanks in advance!!!

The easy way is to use a technique called double buffering, using two Loaders - one for the image which is visible, and one for the image which is being loaded and is invisible. When the image has completed loading it becomes visible, and the other one becomes invisible and the process repeats.
In terms of efficiency, it would be better to at least use a socket connection to the server for transferring the image bytes, preferably in AMF format since it has little overhead. This is all fairly possible in BlazeDS with some scripting.
For better efficiency you may try using a real-time frame or video encoder on the server, however decoding the video on the client will be challenging. For best performance it will be better to use the built-in video decoder and a streaming server such as Flash Media Server.
UPDATE (example script):
This example loads images over HTTP. A more efficient approach would be to use an AMF socket (mentioned above) to transfer the image, then use Loader.loadBytes() to display it.
private var loaderA:Loader;
private var loaderB:Loader;
private var foregroundLoader:Loader;
private var backgroundLoader:Loader;
public function Main()
{
loaderA = new Loader();
loaderB = new Loader();
foregroundLoader = loaderA;
backgroundLoader = loaderB;
loadNext();
}
private function loadNext():void
{
trace("loading");
backgroundLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
backgroundLoader.load(new URLRequest("http://www.phpjunkyard.com/randim/randim.php?type=1"));
}
private function loaderCompleteHandler(event:Event):void
{
trace("loaded");
var loaderInfo:LoaderInfo = event.target as LoaderInfo;
var loader:Loader = loaderInfo.loader;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loaderCompleteHandler);
if (contains(foregroundLoader))
removeChild(foregroundLoader);
var temp:Loader = foregroundLoader;
foregroundLoader = backgroundLoader;
backgroundLoader = temp;
addChild(foregroundLoader);
loadNext();
}

converting webpage into jpeg image using java

I am building a web application, in Java, where i want the whole screenshot of the webpage, if i give the URL of the webpage as input.
The basic idea i have is to capture the display buffer of the rendering component..I have no idea of how to do it..
plz help..

There's a little trick I used for this app:
count down demo app http://img580.imageshack.us/img580/742/capturadepantalla201004wd.png
Java application featuring blog.stackoverflow.com page ( click on image to see the demo video )
The problem is you need to have a machine devoted to this.
So, the trick is quite easy.
Create an application that takes as
argument the URL you want to fetch.
Then open it with Desktop.open( url
) that will trigger the current
webbrowser.
And finally take the screenshot with
java.awt.Robot and save it to diks.
Something like:
class WebScreenShot {
public static void main( String [] args ) {
Desktop.getDesktop().open( args[0] );
Robot robot = new Robot();
Image image = robot.createScreenCapture( getScreenResolutionSize() );
saveToDisk( image );
}
}
This solution is far from perfect, because it needs the whole OS, but if you can have a VM devoted to this app, you can craw the web and take screenshots of it quite easy.
The problem of having this app as a non-intrusive app is that up to this date, there is not a good html engine renderer for Java.

For a pure-java solution that can scale to support concurrent rendering, you could use a java HTML4/CSS2 browser, such as Cobra, that provides a Swing component for the GUI. When you instantiate this component, you can call it's paint(Graphics g) method to draw itself into an off-screen image
E.g.
Component c = ...; // the browser component
BufferedImage bi = new BufferedImage(c.getWidth(), c.getHeight(), TYPE_INT_RGB)
Graphics2d g = bi.createGraphics();
c.paint(g);
You can then use the java image API to save this as a JPG.
JPEGImageEncoder encoder = JPEGCodec.createEncoder(new FileOutputStream("screen.jpg"));
enncoder.encode(bi); // encode the buffered image
Java-based browsers typically pale in comparison with the established native browsers. However, as your goal is static images, and not an interactive browser, a java-based browser may be more than adequate in this regard.