2011年5月20日 星期五

iphone safari 隱藏網址列

手機畫面很小
運用點小技巧可以讓觀看畫面大一點

<script>
window.addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); }
</script>

說穿了就是當畫面都下載完後,把畫面往下拉一點,讓網址列看不到
參考網址 : http://shaunmackey.com/articles/mobile/how-to-hide-the-address-bar-in-mobilesafari/
一行寫法

<script>window.addEventListener("load", function() { setTimeout('window.scrollTo(0,1);', 1); }, false);</script>

2011年5月16日 星期一

html5 - 3D Engine Physics bullet.js

http://pl4n3.blogspot.com/2010/07/bulletjs-javascript-physics-engine.html

抓了一份簡單的修改側測試了一下
測試實作範例網址 http://excite.978.tw/html5/bullet/

2011年5月10日 星期二

macos 製作一個可開機的usb隨身碟 (freebsd)

#轉成 dmg
% hdiutil convert -format UDRW -o bsd.img FreeBSD-8.2-RELEASE-i386-disc1.iso

#看隨身碟代號
% diskutil list

#unmount隨身碟 (/dev/disk1 為 diskutil list 看到的隨身碟代號)
% diskutil unmountDisk /dev/disk1

#寫入隨身碟
sudo dd if=/Users/excite/Desktop/bsd/bsd.img.dmg of=/dev/rdisk1 bs=1m

macos - iso檔轉成dmg

參考: http://macosx.com/forums/networking-compatibility/28079-iso-img-conversion.html

指令如下
hdiutil convert "/path/to/name.iso" -format UDRW -o "/path/to/output.dmg"


2011年5月9日 星期一

php 使用GD製作圖片時出現 imagecreatefromjpeg() recoverable error: Premature end of JPEG file

使用php GD將一張JPG疊到另一張JPG時出現錯誤訊息
imagecreatefromjpeg() recoverable error: Premature end of JPEG file

解法
在php裡加上 ini_set('gd.jpeg_ignore_warning', 1);
參考網站 : http://worcesterwideweb.com/2008/03/17/php-5-and-imagecreatefromjpeg-recoverable-error-premature-end-of-jpeg-file/

2011年5月4日 星期三

html5 - Javascript 3D Engine three.js 實作範例教學 (三)

再延續上次的立體方塊
將影片貼到方塊上
實作範例教學:
HTML部分

<video id="video0" autoplay>
    <source src="video/1.mp4">
</video>
<video id="video1" autoplay>
    <source src="video/2.mp4">
</video>
<video id="video2" autoplay>
    <source src="video/3.mp4">
</video>
<video id="video3" autoplay>
    <source src="video/4.mp4">
</video>
<video id="video4" autoplay>
    <source src="video/5.mp4">
</video>
<video id="video5" autoplay>
    <source src="video/6.mp4">
</video
 

Javascript部分

var container, camera, scene, projector, renderer,particleMaterial;
var image = new Array();
var imageContext = new Array();
var texture = new Array();
var video = new Array();
var theta = 0;
var radius = 600;
$('body').append(
    $('<div id="main"/>').attr(
        {width:($(window).width()),height:($(window).height())}
    )
);
var aVideoCount = new Array();
var VideoCount = new Array();
var LoadingText = 'Loading';

//preLoad();
init();

function preLoad(){
    $('#main').html('<p style="text-align:center;">'+LoadingText+'</p>');
    if( VideoCount < 6 ){
        LoadingText = LoadingText + '.';
        loadVideo();
        setTimeout('preLoad();',1000);
    }else{
        $('#main').html('');
        init();
    }
}

function loadVideo(){
    for( var i = 0 ; i < 6 ; i++ ){
        video[i] = $('#video'+i).get(0);
        video[i].style.display = 'none';
        if( video[i].readyState === video[i].HAVE_ENOUGH_DATA ) {
            if(aVideoCount[i] < 1 ){
                VideoCount++;
                aVideoCount[i] = 1;
            }
        }
    }
}


function init(){
    container = $('#main').get(0);
    camera = new THREE.Camera( 70, ($(window).width()) / ($(window).height()), 1, 10000 );
    camera.position.y = 300;
    camera.position.z = 500;
    scene = new THREE.Scene();
    var materials = [];
    for(var i = 0; i < 6; i++){
        $('#main').append($('<canvas id="canvas'+i+'"/>').css(
                {width:'100px',height:'100px',display:'none'}
            )
        );
        video[i] = $('#video'+i).get(0);
        video[i].style.display = 'none';
        image[i] = $('#canvas'+i).get(0);
        imageContext[i] = image[i].getContext( '2d' );
        imageContext[i].fillStyle = '#000000';
        imageContext[i].fillRect( 0, 0, 100, 100 );
        texture[i] = new THREE.Texture( image[i] );
        texture[i].minFilter = THREE.LinearFilter;
        texture[i].magFilter = THREE.LinearFilter;
        materials.push( [ new THREE.MeshBasicMaterial({map: texture[i]}) ] );
    }
    var object = new THREE.Mesh( new THREE.Cube( 100, 100, 100, 1, 1, 1, materials ), new THREE.MeshFaceMaterial());
    object.position.x = 100;
    object.position.y = 100;
    object.position.z = 500;
    object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
    object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;
    object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180;
    scene.addObject( object );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( $(window).width(), $(window).height() );
    container.appendChild( renderer.domElement );

    animate();
}

function animate() {
    setTimeout( 'animate();', 1000 / 60 );
    render();
}

function render() {
    theta += 0.2;
    camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
    camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
    camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
    for(var i = 0 ; i < 6 ; i++ ){
        if( video[i].readyState === video[i].HAVE_ENOUGH_DATA ) {
            if( video[i].pause == true ){
                video[i].play();
            }
            imageContext[i].drawImage( video[i], 0, 0 );
            if ( texture[i] ) texture[i].needsUpdate = true;
        }
        if( video[i].ended == true ){
            video[i].currentTime = 0;
            video[i].play();
        }
    }
    renderer.render( scene, camera );
}

實作 : http://excite.978.tw/html5/3d_cube_video.php