Chrome Packaged Appsで、スライドショー部品を作成。(HTML5/canvas) 2014-06-19

梅雨ですね。
HTML5で、スライドショー部品を作成してみます。

[前おき]
スライドショー部品で、jQueryプラグインを使用していたのですが、
画像の数が多くなると、読込み起動が重たくなる場合があり。
対策で別ライブラリ等を探したのですが。結局、HTML5で自作する事にしました。
(初期化で、ブラウザ画面内のIMGタグなどに、全画像配置する仕組みが重かったようです)

[主な要件]
1) 1画像づつスライドさせる。
2) １画像を通信して取得後完了後、アニメーションを開始。
*) 目安目標で、大きめの画像(500KB以上) 100-150 枚程度を、永久ループ可能。

[Screen]

[source code]
Github : https://github.com/kuc-arc-f/chrome_slide

初期データの配列作成します。　get_slideData()
スライド部品のインスタンスを作成し、
間隔＝ミリ秒
配列データ(URL etc)
canvas width
canvas height
を渡す。

	onload = function() {
	var canvas =document.getElementById('id_canvas');
	var iW = canvas.width;
	var iH = canvas.height;
	console.log( 'iW='+ iW +',iH=' + iH)
	var items= get_slideData();
	var slide = new CustomSlide(1000 * 10 ,items, iW, iH );
	slide.start();
	}
	//
	//function
	//
	function get_slideData(){
	var items= new Array();
	items[0]={ title:'p11.JPG' , url: 'http://kuc-arc-f.github.io/h5_t0604_page/img/p11.JPG' };
	items[1]={ title:'p12.JPG' , url: 'http://kuc-arc-f.github.io/h5_t0604_page/img/p12.JPG' };
	items[2]={ title:'p13.JPG' , url: 'http://kuc-arc-f.github.io/h5_t0604_page/img/p13.JPG' };
	items[3]={ title:'p14.JPG' , url: 'http://kuc-arc-f.github.io/h5_t0604_page/img/p14.JPG' };
	return items;
	}

view raw chrome_slide-js1.js hosted with ❤ by GitHub

XMLHttpRequest　で画像を取得
Imageのロードのコールバック内から
アニメーションを開始させる。

	CustomSlide.load_image = function ( item, ipos) {
	console.log('#load_image=' + item.url );
	var xhr = new XMLHttpRequest();
	xhr.open('GET', item.url );
	xhr.responseType = 'blob';
	xhr.onload = function() {
	console.log('#r.onload,url=' + item.url );
	var image = new Image();
	var objURL = URL.createObjectURL(xhr.response);
	image.src = objURL;
	image.onload = function() {
	console.log('#image.onload.w='+ image.width + ',h='+ image.height);
	CustomSlide.start_anim( image, mNUM_TIMER );
	};
	};
	xhr.send();
	};

view raw chrome_slide-js2.js hosted with ❤ by GitHub

アニメーション処理。
タイマで起動、画面左の端でアニメ終了＞　次の画像の処理＞LOOP
*) 各描画間隔＝20 msecですが、10 -15msecでも良いかと思います。

	CustomSlide.start_anim = function (image, msec ) {
	var ixSt = mWidthSlide;
	var ix = 0;
	var imx = msec / mDuration;
	var ixDf = ixSt / imx;
	console.log('imx='+ imx + ',ixDf=' +ixDf +',ipos='+ mPosition_Slide );
	setTimeout(function(){
	function gravity() {
	mContext.clearRect(0, 0, mWidthSlide, mHeightSlide);
	var iposX= ixSt - (ix * ixDf);
	// console.log('iposX =' + iposX );
	var iposY= CustomSlide.get_positinY(image);
	mContext.drawImage(image, iposX, iposY, image.width, image.height);
	if(iposX < 0){
	clearInterval(g);
	$(this).delay( mNUM_WAIT_AFT ).queue(function() {
	CustomSlide.display_anim( mPosition_Slide +1 );
	$(this).dequeue();
	});
	}
	ix++;
	};
	var g = setInterval(gravity, mDuration);
	}, 100 );
	};

view raw chrome_slide-js3.js hosted with ❤ by GitHub

*) 画像読込みを、１画像づつで。メモリ消費は減らせた気がします。

[update 2014-06-19 13:11]
続編のHTML5版も追加しました。
http://knaka0209.blogspot.jp/2014/06/html5-canvas-2014-06-19.html