Information Technology Tips

I realized that most of the modern browser download the image which is set on src attribute even if the img element is hidden. This sometimes goes to performance problem because even if there are a lot of hidden image which are only shown user interacts, all images are downloaded initial page load! So I wrote a simple javascript for reflesh the src attribute and download image only when user interacts somethig on window - like press button etc. I know you can use JQuery LazyLoad plugin , but I would like to take much more faster solution - no external javascript. Here is the demo. When you push the button, the image is loaded lazyly Load image Here is the key method. (maybe you can check the logic by viewing the src directly though.) Replace the src attribute with data-original attribute i the img tag. function loadImage(elem) { if(elem.attr("src") != elem.attr("data-original")) { elem.attr("src", elem.attr("data-original&qu

I have developed very very simple youtube sample application on Google App Engine. Internally I have used FreeMarker and Spring. The purpose of this blog entry is just giving hints how to use Spring + FreeMarker on GAEJ with youtube API example. Youtube API Here is the code for extracting video url etc from Youtube API response. I frequently use JDOM for parsing XML. package com.dukesoftware.gaej.youtube; import java.io.IOException; import java.net.HttpURLConnection; import java.net.URI; import java.net.URISyntaxException; import java.net.URL; import java.util.ArrayList; import java.util.List; import org.jdom.Document; import org.jdom.Element; import org.jdom.JDOMException; import org.jdom.Namespace; import org.jdom.input.SAXBuilder; import org.jdom.xpath.XPath; import com.dukesoftware.utils.io.JDOMUtils; import com.dukesoftware.utils.io.MinimumIOUtils; public class YouTube { private final static XPath XPATH_MEDIA; private final static Namespace NS_MEDIA = Namesp

I finally announce Java Web Start Demo for CMSL (Connected Multilayer Spring Layout) is available!! 2013/11 Sorry, looks like jnlp not works very well. I stopped make the demo public. I developed the CMSL originally in 2008. Screenshots Source Code The source code is available on CMSL on sourceforge. Future Plan I know I need to do a lot of refactoring for the code, put functionality for playing music, support more flexible data structure, etc.... X( I will keep updates on this blog if something of CMSL is improved. Currently In order to improve the calculation speed for layout of elements, am working on following tasks Cell division algorithm Multi-threading The limit of number of elements frame rate which meet achieving 30fps is about 1000. Am targeting to achieve 10000 elements. Not sure people can see 1000 elements at a time though :P

HTML5のcanvasエレメントを使うと画像のピクセル処理ができると知りまして、試しにJavascriptで画像処理プログラムを書いてみました。 「画像処理なんてServer Sideでやれよ!」とか「なんでC++ではなくてJavascript?」というご指摘もありそうですがご容赦のほどを。 デモを公開 しました。 注意点など   デモを見るにはHTML5対応のブラウザが必要（当たり前）。  サイズの大きなメディアンフィルタのデモは少し時間がかかるので、気長に待ってください。  サーバサイド側では何もしていません。興味のある方はhtmlのソースを見てください。役に立ちそうなら、勝手に使っちゃってください。（でもこのブログにリンクとか張ってくれると、とても嬉しいです。）  今のところ以下の処理が選択できます。がんばって増やします!! 輝度変換 グレースケール化（YUV画像ののY値信号のみ取り出し） メディアンフィルタ(3x3, 5x5, 7x7) 判別分析法による2値化 Prewitt Filter Sobel Filter Laplacian Filter Sharpening Filter LOG Filter(エッジ検出)  今後、試したい処理 Gammaカーブ変更 コーナー検出 ハフ変換 パターンマッチング アフィン変換 画像のResampling フーリエ変換 バイラテラルフィルタ ラベリング ソースコード例 上記のURLからソースコードを読むと余計なコードが入っていますので、純粋に画像処理部分だけ抜き出したコードを下に示します。 興味がある方は、サンプルサイトのソースコードを読んでみてください。 判別分析法による2値化 function binalyze(srcRgbImageData, destImageData) { var step = 4; var LEN = 256, MAX=255; var srcRgb = srcRgbImageData.data; var dest = destImageData.data; var imgWidth = srcRgbImageData.width; v

(2020年5月更新) こちらの下記理由により、デモを非公開にしました。 picasaはもうGoogle Photosに統合されてAPIが変わった。 Gallerifficももうアクティブに開発されていない。JQueryのプラグイン化されたようです。 記録目的で記事は残してあります。 Javascriptで実装された画像ギャラリーのライブラリ集です。 試しにいくつか使ってみた中で実際に使えると思ったものを選びました。 他にもかっこいいものがいっぱいあるのですが、実際使うとなると、なかなか厳しい(=使いにくい)ものも多いです。 最近はブラウザのJavascriptエンジンの性能も上がっていますし、HTML5やCSS3も徐々に浸透してきていますので、 ブラウザでお手軽に見栄えのするものが作れるのが魅力かなと思います。 注意点をいくつか。 上記のデモの場合、1つのオリジナル画像につき、「75px程度の正方形にクロップされた画像」と「幅が500px程度にサイズ変更された画像」の2つが必要です。 Picasaについては画像サイズを指定してクエリを投げられるので、ちょうどよい大きさの画像のクエリを作成して投げれば簡単にサムネイルが画像を取得できます。 肝はデモで使っているURLの https://picasaweb.google.com/data/feed/api/all?alt=rss&kind=photo&thumbsize=72c,512&access=public&imgmax=1600&hl=en_US&max-results=50 のthumbsize=72c,512の部分です。 簡単に説明しますと、サイズの後にcをつけると画像を正方形にクロップしてくれます。何もつけないとアスペクト比を固定して画像をリサイズしてくれます。 詳しく知りたい方は Picasa Data APIの公式ドキュメント を参照してください。 自分で大量の画像のサイズ変更するのは面倒くさいと思います。私の場合はJavaやC#で画像サイズを変更するプログラムを書きました。バッチ処理が可能な画像処理用のソフトを使うのもいいかもしれません。 C#のコードは簡潔で、実行性能もいいので載せておきます。画像を指定したサイズの正方形