Tag: screencast

Using Prefuse through Jython

Prefuse is a very nice visualization toolkit. It is written in Java, it uses Java2D APIs to draw nodes, edges, and other visual items. It also handles events, supports animations, and other things you need to make the visualization become interactive.

The visualization display is implemented on top of JComponent. So it is very easy to embed it on another application, like what I did in LuaDeskSpot (source).

Okay, enough for the introduction. The purpose of this post is I want to show you how to use Prefuse through Jython. Yes, to make Prefuse (er.. Java, actually) scriptable!

  1. First, prepare the Jython installation.

    $ wget http://downloads.sourceforge.net/jython/jython_installer-2.5.0.jar
$ java -jar jython_installer-2.5.0.jar

  2. Create Prefuse jar file. I have made one and you can freely use it.

    $ wget http://labs.fajran.web.id/p/ubuntu-pkg-vis/lib/prefuse.jar

  3. Set environment variables. The first one is path to Jython installation.

    $ export PATH=$PATH:/path/ke/lokasi/instalasi/jython

    Secondly, set JYTHONPATH so Jython can recognize the Prefuse library.

    $ export JYTHONPATH=$JYTHONPATH:prefuse.jar

  4. Make sure the setup is woking.

    $ jython
>>> import prefuse

    If you get no error, then good! Prefuse has been set up properly. Then do whatever you want!

  5. I have made a Jython script that calls Prefuse. Check it out at http://gist.github.com/32288. Let’s try to use it as a demo.

    $ wget -O igv.py http://gist.github.com/raw/32288/503d011d94c564ffbdca91296b3fc204cf7b5186

  6. Now you have a Jython module called igv. It will handle the basic Prefuse initialization things. You just need to do the following to use it.

    $ jython
>>> from igv import InteractiveGraphVisualization
>>> ig = InteractiveGraphVisualization()

    That’s for the initialization and now let’s try to add some nodes and edges.

    >>> n1 = ig.add_node("satu")
>>> n2 = ig.add_node("dua")
>>> n3 = ig.add_node("tiga")
>>> ig.add_edge(n1, n2)
>>> ig.add_edge(n1, n3)
>>> ig.add_edge(n2, n3)

And this is the obligatory screencast.

Have fun!

um.. yes, this is the translation of my previous blog entry discussing the same thing.

Using Prefuse through Jython

Prefuse is a very nice visualization toolkit. It is written in Java, it uses Java2D APIs to draw nodes, edges, and other visual items. It also handles events, supports animations, and other things you need to make the visualization become interactive.

The visualization display is implemented on top of JComponent. So it is very easy to embed it on another application, like what I did in LuaDeskSpot (source).

Okay, enough for the introduction. The purpose of this post is I want to show you how to use Prefuse through Jython. Yes, to make Prefuse (er.. Java, actually) scriptable!

  1. First, prepare the Jython installation.

    $ wget http://downloads.sourceforge.net/jython/jython_installer-2.5.0.jar
$ java -jar jython_installer-2.5.0.jar

  2. Create Prefuse jar file. I have made one and you can freely use it.

    $ wget http://labs.fajran.web.id/p/ubuntu-pkg-vis/lib/prefuse.jar

  3. Set environment variables. The first one is path to Jython installation.

    $ export PATH=$PATH:/path/ke/lokasi/instalasi/jython

    Secondly, set JYTHONPATH so Jython can recognize the Prefuse library.

    $ export JYTHONPATH=$JYTHONPATH:prefuse.jar

  4. Make sure the setup is woking.

    $ jython
>>> import prefuse

    If you get no error, then good! Prefuse has been set up properly. Then do whatever you want!

  5. I have made a Jython script that calls Prefuse. Check it out at http://gist.github.com/32288. Let’s try to use it as a demo.

    $ wget -O igv.py http://gist.github.com/raw/32288/503d011d94c564ffbdca91296b3fc204cf7b5186

  6. Now you have a Jython module called igv. It will handle the basic Prefuse initialization things. You just need to do the following to use it.

    $ jython
>>> from igv import InteractiveGraphVisualization
>>> ig = InteractiveGraphVisualization()

    That’s for the initialization and now let’s try to add some nodes and edges.

    >>> n1 = ig.add_node("satu")
>>> n2 = ig.add_node("dua")
>>> n3 = ig.add_node("tiga")
>>> ig.add_edge(n1, n2)
>>> ig.add_edge(n1, n3)
>>> ig.add_edge(n2, n3)

And this is the obligatory screencast.

Have fun!

um.. yes, this is the translation of my previous blog entry discussing the same thing.

Multitouch browser

I was wondering can I somehow transmit TUIO data to a browser. So I can use javascript and of course HTML and friends to build a (not really) web based multitouch application. I found no available libraries.. well maybe because it is just ridiculous to implement such thing. But hey, it’s fun to have one! So, I decided to give a try.

The first problem is browser speaks HTTP and TUIO uses OSC things over UDP. Actually, creating a TUIO application using Flash also face this kind of problem. But already have a translator that converts TUIO data (which uses OSC over UDP) to XML data that flash accepts which uses TCP connection. So, if I want to have the TUIO data arrived at the browser, I have to transmit it over HTTP.

Beside that, the tracker transmit a data when a touch event happens. In other words, the TUIO data has to be transmitted right into the browser immediately after it is produced. But, as we know, in (ordinary) HTTP connection, browser is the one who initiate connection, not the server. So, how to solve this?

Then.. i remembered Comet! It’s a concept of pushing data to a browser. Exactly fits what I need. Well.. new problem came since I couldn’t found a simple and ready to use library. One requires me to install Jetty. I tried but didn’t know what to do 😀 so I tried to find another solution. Then I stumbled upon a great tutorial that gave me more keywords for google! It was orbited, stomp, and morbidq which all share another keyword: simple 😀

After coding for several.. err.. hours, i guess, finally now I have a working prototype! See the screencast below.

Basically, there is a script that reads TUIO data from tracker. Then it transmit the data to a message queue that supports stomp. Script inside the browser then takes data from the message queue (or the other way around?) and process it. Communication between the message queue and browser is handled by the orbited. I don’t really know what happens inside =D

Well.. just see the code if you want to know more. Check it out at http://github.com/fajran/tuiojs/tree/master. Have fun!

Multitouch browser

I was wondering can I somehow transmit TUIO data to a browser. So I can use javascript and of course HTML and friends to build a (not really) web based multitouch application. I found no available libraries.. well maybe because it is just ridiculous to implement such thing. But hey, it’s fun to have one! So, I decided to give a try.

The first problem is browser speaks HTTP and TUIO uses OSC things over UDP. Actually, creating a TUIO application using Flash also face this kind of problem. But already have a translator that converts TUIO data (which uses OSC over UDP) to XML data that flash accepts which uses TCP connection. So, if I want to have the TUIO data arrived at the browser, I have to transmit it over HTTP.

Beside that, the tracker transmit a data when a touch event happens. In other words, the TUIO data has to be transmitted right into the browser immediately after it is produced. But, as we know, in (ordinary) HTTP connection, browser is the one who initiate connection, not the server. So, how to solve this?

Then.. i remembered Comet! It’s a concept of pushing data to a browser. Exactly fits what I need. Well.. new problem came since I couldn’t found a simple and ready to use library. One requires me to install Jetty. I tried but didn’t know what to do 😀 so I tried to find another solution. Then I stumbled upon a great tutorial that gave me more keywords for google! It was orbited, stomp, and morbidq which all share another keyword: simple 😀

After coding for several.. err.. hours, i guess, finally now I have a working prototype! See the screencast below.

Basically, there is a script that reads TUIO data from tracker. Then it transmit the data to a message queue that supports stomp. Script inside the browser then takes data from the message queue (or the other way around?) and process it. Communication between the message queue and browser is handled by the orbited. I don’t really know what happens inside =D

Well.. just see the code if you want to know more. Check it out at http://github.com/fajran/tuiojs/tree/master. Have fun!

Simulasi air

Bosen ngerjain tesis, trus nemuin contoh kodingan menarik ttg simulasi air. Jadi kepikiran tuk porting kodingan tsb supaya bisa menerima multiple input via TUIO. Voila! jadilah aplikasinya =P

Ini screencastnya..

Kodingan bisa dilihat di http://github.com/fajran/multitouch-water-simulation/.

Kalau mau nyobain..

$ git clone git://github.com/fajran/multitouch-water-simulation.git water
$ cd water
$ make
$ ./water

Pastikan udah nginstall g++, libsdl1.2-dev, libsdl-image1.2-dev, dan bbrp library lain kalo ada (saya gak merhatiin =P). Tuk simulator multitouch table, bisa make buatan reacTIVision. 

$ wget http://prdownloads.sourceforge.net/reactivision/TUIO_Simulator-1.4rc1.zip
$ unzip TUIO_Simulator-1.4rc1.zip
$ cd TUIO_Simulator
$ java -jar TuioSimulator.jar

matikan antialiasing (Option => Antialiasing) kalo putus2..

Konversi video ke format Flash

Rasanya dulu saya pernah melakukannya.. dan memang pernah =D

Setelah sebelumnya saya membuat screencast, maka agar dapat ditampilkan di web saya perlu mengubah formatnya menjadi format yang umum “diterima”, misalnya Flash Video alias FLV. Urusan konversi ini saya serahkan ke aplikasi mencoder.

Kira2 begini perintahnya..

$ mencoder apalah.avi -o apalah.flv -of lavf -nosound -ovc lavc -lavcopts 
  vcodec=flv:vbitrate=2500:mbd=2:mv0:trell:v4mv:cbp:last_pred=3

Jangan tanya saya apa arti dari setiap parameter yang ada, soalnya saya ngga tau =D Oya, saya sedang membuat screencast tanpa suara jadi memang seluruh opsi yang berhubungan dengan suara tidak saya gunakan.

Tuk ngubah2 kualitas, bisa diatur nilai dari bitrate yang ingin digunakan. Contoh di atas menggunakan bitrate 2500 yang cukup menghasilkan hasil yang bagus untuk kasus saya. Lihat contoh videonya di bawah ini. Garis-garis yang ada cukup terlihat bagus dan tidak terlalu berbercak.

Membuat screencast berkualitas tinggi dengan ffmpeg

Akhirnya saya menemukan salah satu cara untuk membuat screencast berkualitas tinggi, yaitu dengan bantuan ffmpeg. Intinya adalah kita menyuruh si ffmpeg tuk merekam langsung sesi X11 yang ada, nanti si ffmpeg akan langsung meng-encode si video ke file dalam format dan pengaturan yang menurut saya cukup bagus. Entah apa itu 😀

ffmpeg bawaan Ubuntu 8.04 ternyata tidak dapat menangkap layar sehingga kita perlu melakukan kompilasi sendiri. Tutorial kompilasi dapat dibaca di http://gnufied.org/2008/07/14/screencasting-from-linuxubuntu/

Setelah itu kita cukup menjalankan ffmpeg tuk menangkap citra di layar dan merekamnya.

$ ffmpeg -f oss -i /dev/dsp -f x11grab -s 1024x768 -r ntsc 
     -sameq -i :0.0 foo.avi

Opsi2 lain tentu bisa diatur sendiri. Contoh di atas saya ambil dari situs yg saya sebut sebelumnya.

Jika ingin menangkap sebagian layar, atur posisi dan ukuran dengan cara berikut.

$ ffmpeg ... -s LEBARxTINGGI -i :0.0+KIRI,ATAS ...

Jadi andai bagian yang ingin ditangkap adalah area dengan lebar 400×300 yang berada di posisi 100,200, maka ffmpeg dijalankan seperti berikut.

$ ffmpeg -f oss -i /dev/dsp -f x11grab -s 400x300 -r ntsc 
     -sameq -i :0.0+100,200 foo.avi

okeh.. masalah selanjutnya adalah bagaimana cara mengkonversi formatnya menjadi format yang lebih bersahabat dengan web (flv? h264?) dan tetap mempertahankan kualitas.. perburuan masih berlanjut =D

Bikin screencast di Linux

Pake apa ya? Yang bisa bikin video dengan kualitas tinggi dan tidak terputus-putus.

Barusan nyoba recordmydesktop, xvidcap, dan istanbul. Tapi tidak ada yg cocok. Kompresi tidak bisa diatur, terputus2, dan sebagainya. xvidcap malah crash saat mau mulai merekam. recordmydesktop (melalui gtk-recordmydesktop) juga gagal ketika saya mau mengambil video tidak dalam modus satu layar penuh. istanbul kayanya lebih lumayan dibanding dua yang lain (karena bisa saya pakai =D). Tapi tetap hasilnya tidak sesuai keinginan saya.

Contoh video:

Terlihat terputus-putus padahal aplikasinya sendiri jalan dengan sangat lancar di komputer saya.

Kualitasnya juga tidak bisa berkualitas tinggi. Er.. mungkin faktor konversi dari ogg ke flv juga sih. Tapi video dalam format ogg-nya sendiri jg tidak mulus tampilannya.

Sebelumnya saya pernah membuat screencast di Mac OS X dengan Jing. Hasilnya bagus sekali. Bisa dilihat di tulisan saya sebelumnya.

Ada saran? ada yang pengalaman?

Prefuse + Jython = Keren

English version of this post can be read at http://ngoprek.fajran.web.id/2009/07/using-prefuse-through-jython.html

Setelah semalem nyobain Jython, jadi kepikiran tuk make Prefuse dari Jython. Ternyata bisa! Utak-atik dikit lagi, dan jadilah sesuatu yg lebih menarik. Silakan lihat di screencast berikut =P

Kodingan bisa dilihat di http://gist.github.com/32288

Kalau mau nyoba:

  1. Download dan install Jython 2.5b0

    $ wget http://downloads.sourceforge.net/jython/jython_installer-2.5b0.jar
$ java -jar jython_installer-2.5b0.jar

    Silakan atur sendiri lokasi instalasi.

  2. Download library prefuse.

    $ wget http://labs.fajran.web.id/p/ubuntu-pkg-vis/lib/prefuse.jar

  3. Atur environment variable

    $ export PATH=$PATH:/path/ke/lokasi/instalasi/jython
$ export JYTHONPATH=$JYTHONPATH:prefuse.jar

    Pastikan kalo jalanin jython, muncul interactive shell-nya. Dan bisa ngejalanin yang berikut

    >>> import prefuse

  4. Download kodingan yg saya buat.

    $ wget -O igv.py http://gist.github.com/raw/32288/503d011d94c564ffbdca91296b3fc204cf7b5186

  5. Jalanin deh..

    $ jython
>>> from igv import InteractiveGraphVisualization
>>> ig = InteractiveGraphVisualization()

  6. Tambahin node dan edge

    >>> n1 = ig.add_node("satu")
>>> n2 = ig.add_node("dua")
>>> n3 = ig.add_node("tiga")
>>> ig.add_edge(n1, n2)
>>> ig.add_edge(n1, n3)
>>> ig.add_edge(n2, n3)

Selamat menikmati =D