[dat.gui] dat.gui를 사용한 간단한 설정 관리

dat.gui 자바스크립트로 간단한 설정을 관리할 수 있는 UI 라이브러리을 제공한다. 임시 테스트용으로 사용하기 최적이다.

작성자: ospace114@empal.com, http://ospace.tistory.com/

들어가기

테스트를 위한 설정 정보를 변경하거나 데모를 위한 설정을 변경할 경우 매번 값을 수정해서 실행하기 쉽지가 않다. dat.gui를 사용하면 간단한 설정정보를 관리할 수 UI을 제공하고 변경사항을 적용할 수 있는 인터페이스를 제공하고 있다. 여기서는 바로 dat.gui을 사용하는 방법을 살펴보려고 한다.

CDN

먼저 CDN에서 사용할 javascript 파일을 추가한다. 물론 파일로 저장해서 사용할 수 있다.

<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>

초기화

data.GUI 객체를 새로 생성하고 기본 설정값을 정의해보자. settings라는 설정 관리할 객체를 정의한다. 그리고 사용할 설정항목을 정의한다. 다음으로 dat.GUI 객체를 생성한다.

const settings = {
    key1: 0,
    key2: 0,
    checked: false,
    color1: "rgba(0,0,0,0)",
};

const gui = new dat.GUI();

첫번째 설정 항목

dat.gui는 설정항목을 폴더로 묶어서 관리할 수있는 기능이 있다. 첫번째 설정 항목으로 key1과 key2에 대해 폴더를 만들어서 관리하려고 한다.

• key1: 숫자로 범위는 0에서 100까지 입력하고 10단위로 값을 증감
• key2: 임의 숫자 입력

const f1 = gui.addFolder("Foo");
f1.add(settings, "key1", 10, 100)
    .step(10)
    .name("KEY1")
    .onChange(() => {
      console.log("> changed key1:", settings.key1);
    });
f1.add(settings, "key2")
    .name("KEY2")
    .onChange(() => {
      console.log("> changed key2:", settings.key2);
    });

key1에 대해서 값 범위가 step()을 이용해서 증감치를 정의한다. 값입력이 해당 조건에 맞게 변경이 된다.
key2는 별다른 설정 없이 정의했다. 입의 값을 입력할 수 있다.
name()으로 UI에 표시될 라벨을 지정할 수 있고, onChange()로 값이 변경될 경우 호출되는 콜백함수를 정의한다.

두번째 설정 항목

dat.gui에서는 숫자 값 외에도 boolean 값과 색상도 설정 관리가능하다. boolean은 체크박스로 색상은 color picker을 제공한다.

• checked: ture또는 false 값
• color1: 색상 값으로 rgb(0,0,0), #000000, rgb 배열, hsv 객체 등으로 설정 가능

const f2 = gui.addFolder("Bar");
f2.add(settings, "checked")
    .name("CHECKED")
    .onChange(() => {
      console.log("> changed checked:", settings.checked);
    });
f2.addColor(settings, "color1")
    .name("COLOR1")
    .onChange(() => {
      console.log("> changed color1:", settings.color1);
    });

boolean값을 dat.gui에 자동으로 감지해서 체크박스로 표시된다. 그러나 색상으로 addColor()을 명시적으로 사용해야 된다.

실행결과

기본 실행화면이다. 폴더 기준으로 표시된다.

기본 화면이 닫힌 화면으로 하고 싶다면 close()을 호출해주면 된다.

gui.close();

하위 폴더가 닫힌 상태인데 열린 상태로 보여주려면 open()을 호출하면 된다.

f1.open();
f2.open();

전체 소스

<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
<script>
  const gui = new dat.GUI();
  const f1 = gui.addFolder("Foo");
  const f2 = gui.addFolder("Bar");

  const settings = {
    key1: 0,
    key2: 0,
    checked: false,
    color1: "rgb(0,0,0)",
  };
  f1.add(settings, "key1", 10, 100)
    .step(10)
    .name("KEY1")
    .onChange(() => {
      console.log("> changed key1:", settings.key1);
    });
  f1.add(settings, "key2")
    .name("KEY2")
    .onChange(() => {
      console.log("> changed key2:", settings.key2);
    });
  f2.add(settings, "checked")
    .name("CHECKED")
    .onChange(() => {
      console.log("> changed checked:", settings.checked);
    });
  f2.addColor(settings, "color1")
    .name("COLOR1")
    .onChange(() => {
      console.log("> changed color1:", settings.color1);
    });

  f1.open();
  f2.open();
  gui.close();
</script>

결론

간단한 설정값을 관리할 수 있는 라이브러리이다. 사용하기에도 매우 단순해서 잘만들어졌다고 생각이 든다. 생각을 많이하게 하는 라이브러리이다. 모드 즐프하세요. ospace.

참고

[1] https://github.com/dataarts/dat.gui
[2] https://github.com/dataarts/dat.gui/blob/master/API.md