Rev. 2.73

Guillermo Rauch씨는 MooTools 자바스크립트 라이브러리와 CSS를 이용하여 재미있는 메뉴 네비게이션 효과를 만들었다. 메뉴 항목에 마우스가 이동할 때 마다 배경이미지에 시각적인 변화가 발생하며, 간단한 마크업만으로 사용할 수 있는 것이 특징이다. 이 것을 회사 프로젝트에 써먹기 위해 Prototype/Scriptaculous에서도 사용할 수 있도록 수정하였으며 사용방법은 아래와 같다.

<div id="fancymenu">
  <ul>
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
  </ul>
</div>
new FancyMenu('fancymenu', {
  transition: Effect.Transitions.backOut,
  duration: 0.7
});


※ 위 소스는 프로젝트 위키에서 다운로드 할 수 있습니다.

Comments

aptana.gif

Aptana에서의 공식발표는 없지만 Milestone 9의 Nightly(Build 16069)버전의 업데이트가 19일 부터 가능합니다. 다수의 버그수정과 기능개선이 있었고, 약속대로 PHP가 지원되는 것을 확인 했습니다. PHP의 문법강조 및 유효성 검사(PHP5), 코드 어시스트, 아웃라인 함수 등의 기능이 추가되어 있습니다. Nightly Build의 설치방법은 환경설정 > 설치/갱신 > Aptana Automatic Updates 에서 "Nightly builds with more features, but possible bugs" 항목을 선택하고 업데이트를 실행하면 됩니다. 일부 버전에서는 업데이트가 더이상 진행되지 않기도 합니다. 이런 경우 Aptana의 다운로드 페이지에서 Milestone Release 8b (Beta: Build 15613)버전을 다시 설치하고 시도하세요.

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