Rev. 2.73

presenter.jpg

마더보드의 BIOS 업데이트 도중에 블루스크린이 뜨는 바람에 보드가 정신이 나갔습니다.(벌써 두번째 해 먹었군요) 용산에서 A/S 맡기고 돌아오는 길에 소싯적 추억의 장소인 선인상가에 들렀어요. 그리곤 마음에 드는 녀석을 발견했습니다.

성공적인 프레젠테이션을 돕는 장치인 3M의 WP-6600 무선 프레젠터(presenter)입니다. 4방향 커서와 모드전환 휠, 그리고 3개의 기능 버튼을 가지고 있습니다. 레이져 포인터 뿐만아니라 슬라이드 이동, 상/하 스크롤, 볼륨 조절, 애플리케이션 실행 등의 기능을 가지고 있으며, 2.4GHz 라디오 주파수 방식으로 방향성 없이 20미터 내외에서는 벽도 뚫고 작동합니다. 멋지죠?

이 녀석을 리모콘 대용으로 질렀습니다(;)
멀티미디어 플레이어에서 재생/일시정지와 구간 탐색을 할 수 있고, 마스터 볼륨 및 영상볼륨을 모두 컨트롤 할 수 있으며, 심심하면 레이져 포인터로 장난도 칠 수 있습니다. 이제부터는 침대속에서 안움직여도 됩니다(흐뭇)

Comments

web20layerstyles_03.jpg

Dezinerfolio.com은 여러 사이트에 흩어져 있는 쿨한 리소스만을 엄선하여 한 곳에 취합하고 다운로드 서비스까지 제공하는 멋진 사이트이다. Photoshop의 레이어 스타일 부터 시작하여, 아이콘, 뺏지, 구슬, 버튼, 그레디언트, 레이아웃 등 웹 2.0 스러운 것을 용도별로 분류하고 .PSD 및 .PNG 확장자로 저장된 재사용 가능한 형태의 소스를 제공한다.

Comments

SasCam Webcam Server와 자바스크립트로 스트리밍 웹캠을 구현해 보았습니다. SasCam Webcam Server는 무료로 제공되는 웹캠 서버 프로그램입니다. 이 서버는 캠에 잡힌 화면을 하나의 jpg파일에 저장하고 지속적으로 업데이트하는 역할을 합니다. 플래시기반 웹캠 뷰어는 저장된 jpg파일을 계속해서 불러오는 구조로 만들어져 있더군요. 사실, 플레이어가 너무나도 허접스러워서 자바스크립트로 만들어 본 것입니다.

자바스크립트 플레이어 역시 허접스러운 것은 마찬가지입니다. SasCam Webcam Server가 업데이트 한 이미지를 계속 리로드하여 마치 동영상인 것처럼 속이는 꼼수입니다. 좌측 영상은 창문 밖에 심어놓은 배달 확인용 웹캠 화면입니다. 금일 24시간 방영(?)할 예정이니 많은 시청 바랍니다(;) 마우스 클릭으로 재생할 수 있어요. 5년전에 구입한 이 웹캠은 지금까지 한번도 제대로 사용해 본 적이 없었는데, 요런 엉뚱한 용도로 쓰게 되는군요. 서버에 할당해서 저렴한 온라인 방범 솔루션 구성도 생각해 볼만 하겠습니다.

var SasVideo = Class.create();
SasVideo.prototype = {
  initialize: function(element, options) {
    this.options = Object.extend({
      serverIP  : 'http://yourwebcamserveraddress.com/', // your webcam server address
      frameRate : 2, // frameRate / seconds
      autoPlay  : false
    }, options || {});

    this.state = 'idle';
    this.frameIdx = 0;
    this.element = $(element);
    this.frame = this.element.down('img');
    this.src = 'http://' + this.options.serverIP + '/images/SaschArtCamImage.jpg';

    if (this.options.autoPlay) this.play();
    else {
      this.frame.src = this.src;
      this.frame.style.cursor = 'pointer';
      this.frame.alt = 'click to play/stop';
      Event.observe(this.frame, 'click', this.control.bindAsEventListener(this));
    }
  },
  control: function() {
    if(this.state != 'running') this.play();
    else this.state = 'stop';
  },
  play: function() {
    if (this.state == 'stop' || this.options.frameRate < 1) {
      this.state = 'idle';
      return;
    }
    if (this.state == 'idle') this.state = 'running';

    setTimeout(function() {
      var src = this.src + '?' + new Date().getTime();
      try { this.frame.src = src; } catch(e) { return; }
      if (this.frameIdx % 5 == 1) this.element.style.background = 'url(' + src + ')';
      this.frameIdx++;
      this.play(); // loop play
    }.bind(this), 1000 / this.options.frameRate);
  }
};

new SasVideo('SasVideo'); // create object

Comments