월간 보관물: 2014 5월

[NEMOSHELL] 자바스크립트 지원

최근 자바스크립트로 되어있는 다양한 시각화 라이브러리들이 더욱 늘어나고 있는 추세이고, 간단한 클라이언트는 자바스크립트로 작성하는게 훨씬 효과적이기 때문에 NEMOSHELL 에서 자바스크립트를 직접 지원하는 방법을 개발 중이다. 일단 기본적으로 gjs 를 이용하여 자바스크립트 코드를 네이티브 환경에서 동작시키는 문제를 해결하였고, C 언어로 되어있는 라이브러리와 연결하기 위해서는 얼마 전에 아래 글에서 소개했던 gobject-introspection 기술을 이용하였다.

https://nemoux00.wordpress.com/2014/04/26/code-gobject-introspection-%EA%B0%84%EB%8B%A8-%EC%98%88%EC%A0%9C/

현재 chart.js 라는 몇 가지 챠트를 그릴 수 있는 오픈 소스 자바스크립트 프로젝트를 NEMOSHELL 의 클라이언트에서 완벽히 동작시키는데 성공하였기에 간단한 데모 영상과 기본 동작 원리를 소개하고자 한다.

nemotool-js

우선 해야할 작업은 자바스크립트로 되어있는 클라이언트에서 wayland 를 이용할 수 있도록 하는 작업과 최근 많은 자바스크립트 프로젝트가 사용하는 HTML5 canvas 인터페이스를 wayland 의 surface 에 연결하여 cairo 로 렌더링하는 것이다. 일단 cairo 는 gjs 에 이미 들어가있어 쉽게 해결하였고, wayland 는 C 언어로 gobject 형태로 클라이언트 인터페이스를 구현하여 자바스크립트에서 사용할 수 있도록 하였고, HTML5 canvas 는 wayland 의 서페이스에서 cairo context 를 만들어서 연결할 수 있도록 자바스크립트 모듈을 추가로 구현하였다. 앞으로 기존의 쓸만한 자바스크립트로 되어있는 시각화 라이브러리를 하나씩 포팅하다보면 추가적으로 해야할 일은 계속 있겠지만, 현재 간단한 시각화 라이브러리 정도는 잘 동작하니 일단은 만족스럽다. 아래는 chart.js 를 크롬 브라우저에서 띄운 영상과 NEMOSHELL 의 클라이언트로 띄운 영상이다.

그리고 아래 영상은 자바스크립트를 이용하여 간단한 파티클 효과를 구현하고 이를 wayland 의 멀티터치 이벤트를 이용하여 그리는 영상이다.

이를 잘 활용하면 시각적인 부분들은 어느 정도는 비교적 쉽게 해결될 수 있을 것 같다.