JSON formatter bookmarklet

At work I need to read JSON document pretty often and making it pretty will help me pretty much. Last time I showed how to prettify a JSON document using Python script. But since I am working mostly in a browser, having to switch from browser to terminal is a bit cumbersome. There are a lot of online JSON formatter out there but I think it’s too much if I need to make a remote request just to do the formatting. Also the JSON document I need to format can be a sensitive document so it’s also not a good idea to use an online service.

Then I realized browser nowadays has in-browser JSON formatter function: JSON.stringify. I just need to find a way to make using it a bit easier. So I made the following bookmarklet.

Prettify JSON

Drag the link above to bookmark bar in your browser. If you need to format a JSON document, you can click it, then paste the JSON document (make sure it’s valid), and finally click the button there. Voila!

Memulai WebGL

Setelah sebelumnya kita berkenalan sedikit dengan WebGL, mari kita mulai membuat aplikasi WebGL. Pastikan dulu browser yang Anda gunakan mendukung WebGL agar Anda dapat melihat hasil yang diharapkan.

Jika semua sudah siap, mari kita buka teks editor dan masukkan kode berikut ini.

<canvas id="canvas" width="640" height="480">WebGL tidak didukung</canvas>

Kode di atas akan membuat sebuah area gambar yang akan dijadikan tempat menggambar gambar 3 dimensi dengan WebGL.

Persiapan dari sisi HTML sudah cukup, sekarang mari beralih ke dunia Javascript untuk mengendalikan WebGL.

Pertama, dapatkan referensi ke area gambar <canvas> yang kita buat sebelumnya.

<script type="text/javascript">

var canvas = document.getElementById('canvas');

Setelah itu, ambil pengendali WebGL dari area gambar tadi.

var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

Mengapa mencoba mengambil dua hal berbeda (webgl dan experimental-webgl)? Sampai saat ini, WebGL masih bersifat eksperimental sehingga beberapa browser masih belum menjadikannya hal yang “udah pasti ada”. Maka dari itu, browser2 ini menggunakan nama experimental-webgl sebagai identifikasi pengendali WebGL.

Nilai yang dihasilkan dapat kita gunakan untuk mengecek apakah browser yang dipakai mendukung WebGL atau tidak.

if (!gl) {
  alert('WebGL tidak didukung');
}

Jika nilai keluaran tidak dievaluasi menjadi true, maka bisa diambil kesimpulan si browser tidak mendukung WebGL.

Setelah mendapatkan referensi ke pengendali WebGL, kita sudah bisa memanggil fungsi-fungsi WebGL. Sebagai contoh, fungsi untuk menghapus area gambar dengan warna tertentu.

if (gl) {
  // hapus layar
  gl.clearColor(1.0, 0.5, 0.0, 1.0); // warna oranye
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
}

</script>

Jika sukses, area gambar yang dibuat seharusnya akan berwarna oranye seperti berikut.

Memulai WebGL

Selamat, aplikasi WebGL super sederhana sudah jadi! 😀

Kode lengkap dari tutorial kali ini dapat dilihat di http://fajran.github.io/webgl-tutorial/01-memulai-webgl/index.html. Seluruh kode sumber tutorial WebGL ini akan tersedia di https://github.com/fajran/webgl-tutorial.

Pengenalan WebGL

Mari kita mulai ngoprek2 WebGL 😀 Mudah2an ini beneran menjadi satu set tutorial xD

Apa itu WebGL? Singkatnya WebGL adalah OpenGL yang hidup di dalam browser. OpenGL sendiri adalah satu set API yang dapat dipakai untuk membuat gambar 3 dimensi (termasuk juga 2 dimensi). Proses penggambaran yang menggunakan OpenGL biasanya akan “dibantu” dengan perangkat keras grafis (GPU) sehingga prosesnya akan jauh lebih cepat.

Kalau OpenGL aslinya adalah satu set API untuk bahasa C, maka WebGL, berhubung dia hidup di dalam browser, adalah API untuk Javascript. WebGL ini merupakan kelanjutan dari Canvas API yang hanya menyediakan fasilitas menggambar gambar 2 dimensi.

Sampai saat ini, belum semua browser mendukung WebGL. Dukungan yang disediakan juga sering bergantung dengan GPU dan driver yang dipakai. Hal ini tidak selalu berarti pengguna GPU tipe lama tidak bisa menikmati WebGL karena implementasi prosedur gambar 3 dimensi bisa saja dilakukan tanpa bantuan perangkat keras, walau efeknya proses akan berjalan lebih lambat. Pendekatan ini diambil oleh Chromium/Google Chrome yang juga menyediakan implementasi WebGL yang hanya menggunakan peranti lunak.

Untuk mencari tahu apakah browser yang Anda pakai saat ini dapat menampilkan WebGL atau tidak, kunjungi saja halaman berikut ini.

http://get.webgl.org/

Jika WebGL didukung, Anda akan menjumpai tampilan seperti berikut. Perhatikan juga ada sebuah animasi kubus berputar di halaman tersebut.

Screen Shot 2013-05-28 at 8.32.57 PM

Apakah browser yang Anda gunakan mendukung WebGL?

3.7 Gigapixel (v2)

Tulisan ini merupakan kelanjutan dari tulisan saya sebelumnya mengenai Kasuari, sebuah skrip untuk menampilkan gambar super besar dg teknik multi-scale pada halaman web dengan bantuan Javascript dan Canvas.

Saya baru saja menulis ulang skrip tersebut. Kali ini saya mematikan dulu fungsi pergerakan halus karena kok rasanya ngga terlalu menunjang sisi interaktivitas. Fungsi ini sebenarnya menunda pergerakan layar sehingga terlihat tidak menempel dengan pointer mouse. Karena penundaan ini, pergerakan terlihat “terlambat” dan tidak mengikuti pergerakan pointer mouse secara langsung. Penundaan ini mungkin bisa membuat pergerakan menjadi lebih “dinamis” dan tidak kaku tapi di lain pihak, pengguna bisa salah mengira kalau keterlambatan ini disebabkan oleh komputer yg lambat. Mungkin saya masih perlu bereksperimen dengan parameter2 yg ada.

Selain itu, saya juga menambahkan satu buah fitur baru, yaitu pembesaran halus. Saat mendekatkan atau menjauhkan gambar yg membuat gambar terlihat lebih besar dan kecil, transisi dilakukan secara bertahap. Dengan demikian, pengguna bisa mengikuti proses yang terjadi (yaitu pembesaran/pengecilan gambar) sehingga diharapkan pengguna tidak kehilangan konteks.

Saya juga menulis ulang aplikasi untuk mempersiapkan gambar yang akan dipakai oleh Kasuari. Awalnya aplikasi (yg saya tulis dg Python) ini hanya bisa menggunakan satu buah sumber gambar yang dijadikan gambar asli dalam resolusi penuh. Aplikasi akan memotong-motong gambar menjadi banyak gambar dengan ukuran lebih kecil (yaitu 256 × 256 piksel) dan lalu membuat gambar dalam skala (ukuran) yg lain dari gambar-gambar ini.

Kekurangan dari aplikasi ini adalah jika gambar berukuran sangat besar, bisa saja gambar disediakan dalam beberapa potongan gambar yang lebih kecil. Oleh karena itu, aplikasi harus dapat memproses beberapa gambar ini dalam menyusun gambar yang dibutuhkan oleh Kasuari.

Saya menggunakan pustaka Python Imaging Library (PIL) untuk membantu mengolah gambar. Namun ternyata PIL ini memiliki masalah jika gambar yang ditangani memiliki ukuran yang besar. PIL bekerja sangat lambat dan butuh memori sangat besar. Mungkin karena gambar yang ada perlu dimasukkan ke memori terlebih dahulu secara keseluruhan sebelum dapat diproses lebih lanjut. Berhubung proses pemotongan gambar dilakukan perbaris, seharusnya ada cara yang lebih cerdas untuk mengatasi masalah ini.

Akhirnya saya mencoba untuk menggunakan libjpeg untuk membuat aplikasi pemotong gambar. Walaupun akhirnya saya harus menulis kode dalam bahasa C, namun hasil akhirnya cukup memuaskan. Aplikasi yang saya tulis ini dapat bekerja dengan cepat dan menggunakan memori secukupnya.

Sebagai bahan uji coba, saya telah melanjutkan usaha gagal yang saya lakukan sebelumnya, yaitu mencoba menyediakan gambar berukuran 3.7 gigapixel dalam Kasuari. Gambar ini adalah peta dunia dari NASA yang memiliki resolusi 500m untuk setiap piksel yang ada. Ukuran gambar adalah 3.7 gigapixel (86400 × 43200) yang awalnya tersusun dari 8 buah gambar berukuran 21600 × 21600 piksel.

Hasil akhir dapat dilihat di http://labs.fajran.web.id/p/kasuari/bluemarble500m/ 🙂

Kode sumber Kasuari dan aplikasi pemotong gambar dapat dilihat di http://github.com/fajran/kasuari

3.7 Gigapixel

Itulah salah satu ukuran gambar peta dunia koleksi NASA BlueMarble. Dengan ukuran sebesar itu, satu piksel pada gambar sudah merepresentasikan sebuah area dengan luas 500×500 meter persegi.
Sungguh sangat menarik tuk ditampilkan dengan Kasuari. Langkah pertama yg saya harus lakukan tentu saja mendapatkan gambar tersebut.

Peta dunia dengan ukuran tersebut disajikan dalam dua versi. Versi pertama adalah 8 buah potong gambar yg harus disusun terlebih dahulu agar menjadi sebuah gambar utuh. Versi kedua (sepertinya) adalah gambar yang sudah utuh yang siap digunakan. Berhubung yang sudah jelas format gambarnya adalah yang versi pertama (tersedia dalam format JPEG dan PNG), saya coba mengunduh 8 buah gambar yg saya butuhkan.

Setelah gambar diunduh, tugas berikutnya adalah menggabungkan ke-delapan gambar tersebut menjadi satu gambar utuh. Setiap potongan gambar memiliki ukuran 21600×21600 piksel, alias sekitar 466 MP. Kalau 8 buah gambar tersebut digabung, maka ukuran akhir gambar adalah 86400×43200 piksel, alias sekitar 3.7 GP. Untuk urusan menggabungkan gambar seperti ini, saya mencoba menggunakan aplikasi montage dari ImageMagick.

Perintahnya sangat sederhana, yaitu seperti berikut ini.

$ montage {1,2,3,4,5,6,7,8}.jpg -tile 4x2 -geometry 21600 hasil.jpg

Daripada langsung menggabungkan 8 buah gambar tersebut sekaligus dalam sebuah perintah, saya tadi mencoba untuk menggabungkan setiap 2 gambar terlebih dahulu. Sehingga setelah tahap awal ini, saya memiliki 4 buah gambar dg ukuran 21600×43200 piksel. Setelah itu, saya coba gabungkan lagi 4 buah gambar tersebut menjadi satu gambar hasil yang saya harapkan.

Namun.. ternyata SISA KAPASITAS HARDDISK TIDAK CUKUP =)) Padahal sisa saat itu adalah sekitar 44GB (oya, saya make komputer di lab kampus). ImageMagick sudah cukup cerdas dg menggunakan harddisk sebagai media untuk meletakkan data sementara sehingga tidak seluruh pemrosesan dilakukan di RAM dari awal sampai akhir. Kalau tidak seperti ini, RAM 2GB yg ada mungkin sudah habis dan aplikasi tidak dapat bekerja banyak. Apa dikata ternyata harddisk yg tersisa jg tidak cukup T__T

Dengan demikian, upaya mendapatkan gambar 3.7 GP dg menggabungkan 8 buah gambar bisa dibilang gagal xD Langkah berikutnya adalah dg mencoba mengunduh gambar yg (sepertinya) sudah jadi. Ukuran berkasnya juga cukup (dan jauh) lebih besar, sampai 2.6GB.

Saya menghindari berkas yg satu ini berhubung ekstensi berkas yg dipakai tidak saya kenal. .bin.gz tidak menjelaskan sama sekali apa format berkas tersebut. Berkas readme yang ada sebenarnya sudah menyebut beberapa format, tapi tetap saja tidak ada yg saya kenal xD Daripada penasaran akhirnya saya coba unduh berkas tsb. Untungnya semua dilakukan di kampus, termasuk menggunakan koneksi internet kampus jadi saya gak perlu merelakan komputer saja tuk mengerjakan semua hal ini.

Setelah berkas tsb saya unduh dan ekstrak, saya coba gunakan file untuk mendeteksi format berkas tersebut. Namun.. file cuma bilang kalau berkas tsb adalah sebuah data T__T tetap tidak menjelaskan.. xD

Berhubung saya lg males nyobain aplikasi yg disebut di berkas readme tadi, maka saya hentikan dulu eksperimen menggunakan gambar 3.7 GP ini. Kayanya akan lbh menarik jika saya mikirin bagaimana cara lain untuk menyiapkan gambar bagi Kasuari dibanding nyari cara tuk mendapatkan satu buah gambar besar. Andai 8 gambar lbh kecil tadi bisa langsung digunakan, tentu saja akan lebih efisien.

Oh ya, dr tadi saya nyebut Kasuari, apa itu? Ya, itu nama burung di daerah irian sana. Tapi itu jg adalah nama proyek iseng2 saya terbaru =D Silakan cek langsung di http://github.com/fajran/kasuari/.

Kasuari adalah sebuah penampil gambar dg teknik “multiscale”. Gambar yg sangat besar bisa ditampilkan pada layar yg kecil dengan cara menampilkannya dalam beberapa level detil. Persis sama dengan Google Maps yg bisa digunakan untuk menampilkan peta dunia. Euh, keduanya emang aplikasi sejenis. Begitu pula dengan Seadragon dan Seadragon AJAX dari Microsoft Live Labs.

Apa yang berbeda dengan yg lain? Kalau dari fitur, tentu saja Kasuari masih kalah jauh. Namun yang jelas, Kasuari itu open source sehingga bisa dioprek dan dipakai sesuka hati. Bukan hosted service seperti Google Maps sehingga bisa dipasang di mana saja. Kasuari juga cuma menggunakan javascript, css, dan HTML Canvas untuk melakukan semua hal ini. Ada produk open source sejenis, yaitu OpenZoom, namun OpenZoom ini menggunakan Flash.

Tuk ngeliat seperti apa Kasuari itu, silakan buka http://labs.fajran.web.id/p/kasuari/bluemarble/. Peta dunia dari NASA BlueMarble dengan ukuran lebih kecil (yaitu sekitar 233 MP) ditampilkan dengan Kasuari.

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!