Wednesday, August 06, 2008

JavaFX Reflection Game !

On the way to exploring little more API of JavaFX, I reached to a fair animation. That is reflection. Here is the output of "crying baby".
Here is the code:

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.geometry.Circle;
import javafx.scene.paint.Color;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.effect.*;

Frame {
title: "Crying Baby"
width: 400
height: 700
closeAction: function() { java.lang.System.exit( 0 );
}
visible: true

stage: Stage {
fill: Color.WHITE
content: [
ImageView {
x: 100
y:10
image: Image {
url: "http://www.powermixradio.com/GGG-SAD-CARTOON.jpg"
}
effect: Reflection {
bottomOpacity:0.1
fraction: 1
topOffset: 50
}
},
ImageView {
x:0
y:300
image: Image {
url: "http://www.toyotapartsstore.com/images/71111_2_%20mirror_8CE1.jpg"
}
opacity:0.5
}
]
}
}


Things to watch:

1. Effect: Reflection -

bottomOpacity:0.1 - set the opacity of image in reflection.

fraction: 1 - set how much part of the image should come in reflection.

topOffset: 50 - How far image from the focus. There are some more useful parameters in this.

2. Opacity of second Imageview allow me to see the reflection of first image, else it will cover the reflection.

On the way to make some moving animation, but I don't know what happened to the support of gif image. gif image works like static image, don't know why ?

Monday, August 04, 2008

Play with Flickr API in Java !

I decided to play with Flickr API's for Java FX coding. But in between I found myself in hell and I started with Java :-). As all of you know Flickr Support hell lot of API to view Image, to search image, to search comment, Image translation, Image upload and many more. Check out here for detailed API. Now using these API's are not at all tough, because its all a game of XML.

Here I have written a small code, which do this :

1. It search one image(it can work for more than one image) from search API of Flickr.
2. It writes the search data on a XML, which I am copying at D:\Hello1.xml.
3. And finally the code is using XML parsing techniques to get the information required for image view.
4. Then I use JDK6 feature of Desktop and open the default browser with the parsed URL. And
Congratulations, you can see the image.

Code, can look little big because of bad coding and writing lot of repetitive things :D.

package flickrapp;

import java.awt.Desktop;
import javax.xml.namespace.QName;
import javax.xml.stream.XMLEventReader;
import javax.xml.stream.XMLInputFactory;
import javax.xml.stream.events.Attribute;
import javax.xml.stream.events.StartElement;
import javax.xml.stream.events.XMLEvent;
import java.io.*;
import java.net.*;
import java.util.*;

public class Main {

public static void main(String args[]) throws Exception {
URLConnection uc = new URL("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e3471e67d4ac10c64055420d9b211b4f&per_page=1&text=Bangalore").openConnection();
DataInputStream dis = new DataInputStream(uc.getInputStream());
FileWriter fw = new FileWriter(new File("D:\\Hello1.xml"));
String nextline;
String[] servers = new String[10];
String[] ids = new String[10];
String[] secrets = new String[10];
while ((nextline = dis.readLine()) != null) {
fw.append(nextline);
}
dis.close();
fw.close();
String filename = "D:\\Hello1.xml";
XMLInputFactory factory = XMLInputFactory.newInstance();
System.out.println("FACTORY: " + factory);

XMLEventReader r = factory.createXMLEventReader(filename, new FileInputStream(filename));
int i = -1;
while (r.hasNext()) {

XMLEvent event = r.nextEvent();
if (event.isStartElement()) {
StartElement element = (StartElement) event;
String elementName = element.getName().toString();
if (elementName.equals("photo")) {
i++;
Iterator iterator = element.getAttributes();

while (iterator.hasNext()) {

Attribute attribute = (Attribute) iterator.next();
QName name = attribute.getName();
String value = attribute.getValue();
System.out.println("Attribute name/value: " + name + "/" + value);
if ((name.toString()).equals("server")) {
servers[i] = value;
System.out.println("Server Value" + servers[0]);
}
if ((name.toString()).equals("id")) {
ids[i] = value;
}
if ((name.toString()).equals("secret")) {
secrets[i] = value;
}
}
}
}
}
System.out.println(i);
String flickrurl = "http://static.flickr.com/" + servers[i] + "/" + ids[i] + "_" + secrets[i] + ".jpg";
try {
URI uri = new URI(flickrurl);
Desktop desktop = null;
if (Desktop.isDesktopSupported()) {
desktop = Desktop.getDesktop();
}

if (desktop != null) {
desktop.browse(uri);
}
} catch (IOException ioe) {
ioe.printStackTrace();
} catch (URISyntaxException use) {
use.printStackTrace();
}
}
}

Now see this line :

URLConnection uc = new URL("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e3471e67d4ac10c64055420d9b211b4f&per_page=1&text=Bangalore").openConnection();

Here some important thing to see :

http://api.flickr.com/services/rest/?method=flickr.photos.search -> this is the way to write Flickr API.

api_key=e3471e67d4ac10c64055420d9b211b4f -> required for service. This is my api_key, you can have your own. Just go to flickr service and generate your API_key

per_page=1 -> Here is what I meant one image, if you can change this to 10. It will gather information of top 10 images in XML file.

text=Bangalore -> Sorry, I have hard coded it for now. This is the search string.

Now, look at the XML file get generated in D:\Hello1.xml. You can see one entry with tag photo inside photos. So, we need to take some data from this XML file and add in proper style to get the correct URL and that is here:

String flickrurl = "http://static.flickr.com/" + servers[i] + "/" + ids[i] + "_" + secrets[i] + ".jpg";

Again, lot of things are hard coded(which I will correct in next post). Since only one image (i=0). I am assuming its a jpg image :D. Now calling Desktop API, you can load this image on default browser.

Now, this is still a live question, for certain keyword search, it gives the same result like when I search for keyword "Vaibhav", code and search box of Flickr provided the same result(which is not my photo :-( ) whereas if I search on things like "Bangalore", result is not similar for many cases. I don't know how Flickr handles it internally.

Probably next I will try to upload image or translate image but in Java FX :-)