튜토리얼

유저 관리

유저 관리에 대하여 설명한다.

유저생성하기

로그인창 하단의 사용자 등록신청 버튼을 클릭한다.
화면 좌측의 관리자페이지 링크()를 클릭한다.
관리자 권한이 있는 유저로 로그인한다.
시스템 - 사용자를 클릭하여 사용자메뉴를 연다.
등록신청된 아이디를 찾아 활성화 및 권한을 부여하고, 보드 역할을 설정한 후 저장한다.
해당 아이디로 로그인한다.

유저삭제하기

화면 좌측의 관리자페이지 링크()를 클릭한다.
관리자 권한이 있는 유저로 로그인한다.
시스템 - 사용자를 클릭하여 사용자메뉴를 연다.
등록신청된 아이디를 찾아 체크하고 하단의 삭제를 클릭하고 저장버튼을 클릭한다.

비밀번호찾기

로그인페이지 하단의 패스워드 초기화 버튼을 클릭한다.
유저 등록시 입력했던 메일주소를 입력한다.
관리자 유저로 승인을 한다. 승인은 아래의 두가지 방법이 있다.
- 메일이 오면 링크를 클릭하여 처리
- 관리자 페이지의 권한 승인 메뉴를 통해 처리
유저 등록시 입력했던 메일주소로 임시비밀번호가 전송된다.
임시 비밀번호를 통하여 로그인한다.

비밀번호 변경하기

좌측 메뉴 상단의 를 클릭한다.
패스워드 변경을 클릭한다.
현재 비밀번호와 새로운 비밀번호를 입력하고 확인을 클릭한다.

그룹 및 Scene 관리

그룹과 Scene에 대하여 설명한다.

그룹만들기

좌측 하단의 버튼을 클릭한다.
그룹 이름을 입력하고 그룹 타입을 SCENE으로 선택 후 Create버튼을 클릭하여 그룹을 생성한다.

그룹 이름바꾸기

그룹 옆의 을 클릭한다.
그룹 이름을 입력하고 이름버튼을 클릭하여 그룹 이름을 변경한다.

그룹권한 부여하기

관리자페이지로 이동한다.
관리자페이지에 로그인한다.
시스템 - 도메인 사용자를 순서대로 클릭하여 도메인 사용자 메뉴로 이동한다.
권한을 부여하고자 하는 유저를 찾아 상세정보 화면 팝업을 띄운다.
권한을 부여하고자 하는 그룹을 체크하고 저장을 클릭한다.
보드로 돌아가서 새로고침을 하여 그룹정보를 새로 받아온다.

Scene 만들기

Scene을 만들고자 하는 그룹으로 이동한다.
우측 하단의 버튼을 클릭한다.
Scene의 이름을 입력하고 저장을 클릭한다.

Scene 편집하기

편집하려는 Scene이 있는 그룹으로 이동한다.
Scene 하단의 를 클릭하여 정보페이지로 이동한다.
정보페이지 우측 상단의 편집 버튼()을 클릭해서 모델링 페이지로 이동한다.

Scene 복사하기

복사하려는 Scene이 있는 그룹으로 이동한다.
Scene 하단의 를 클릭하여 정보페이지로 이동한다.
정보페이지 하단의 복사 버튼을 클릭한다.
새로 생성될 Scene의 이름을 입력하고 저장을 클릭한다.

Scene 삭제하기

삭제할 Scene이 있는 그룹으로 이동한다.
Scene 하단의 를 클릭하여 정보페이지로 이동한다.
정보페이지 하단의 삭제 버튼을 클릭한다.
OK 버튼을 클릭하여 삭제한다.

Scene 그룹 변경하기

해당 Scene이 있는 그룹으로 이동한다.
그룹을 변경하려는 Scene을 드래그하여 좌측 그룹리스트 중 변경하려는 그룹으로 드랍한다.
해당 그룹을 클릭하여 Scene이 옮겨진 것을 확인한다.

Scene 이름수정하기

해당 Scene이 있는 그룹으로 이동한다.
Scene 하단의 를 클릭하여 정보페이지로 이동한다.
정보페이지 하단의 이름변경 버튼을 클릭한다.
변경할 이름을 입력 후 OK 버튼을 클릭한다.

Scene 가져오기

다른 서버의 Scene 모델링 정보를 복사해 오는 기능을 설명한다.

화면 좌측의 관리자페이지 링크()를 클릭한다.
같은 브라우저의 새 탭을 열어 복사할 Scene이 있는 Things-board에 접속후 로그인한다.
복사할 Scene의 Scene Name을 확인한다.
관리자페이지의 좌측 메뉴에서 라벨 - Scene을 순서대로 클릭하여 Scene 메뉴로 이동한다.
Scene 메뉴의 하단 가져오기 버튼을 클릭한다.
팝업에 복사할 Scene의 URL을 입력하고 Scene이 저장될 Group을 선택한 후 확인을 클릭한다.
좌측하단에 성공 메세지가 나타나면 보드로 돌아가 새로고침하여 확인한다.

모델링

모델러의 기능에 대하여 설명한다.

모델러 레이아웃

모델러의 레이아웃에 대해 설명한다.
모델러-레이아웃

제어툴바: 되돌리기, 복사, 정렬, 반전 등 컴포넌트를 제어하는 기능이 모여있는 툴바.
컴포넌트 툴바: 모델러에서 사용할 수 있는 컴포넌트가 모여있는 툴바.
속성창: 컴포넌트의 속성이 모여있는 창.

제어툴바

현재 모델링 중인 SCENE의 정보와 모델링을 더욱 간편하게 하기위해 필요한 기능들을 나열해 놓은 툴 바.
(OS가 Mac인 경우는 Ctrl키를 ⌘로 바꿔서 입력한다.) 제어툴바

되돌리기(Ctrl + Z) :
사용자가 마지막으로 편집한 내용을 되돌릴 수 있는 기능
다시실행(Ctrl + Shift + Z) :
되돌리기로 취소했던 작업의 내용을 다시 수행
잘라내기(Ctrl + X) :
선택된 컴포넌트를 클립보드로 복사 하면서 현재의 컴포넌트는 삭제
복사(Ctrl + C) :
선택된 컴포넌트를 클립보드로 복사
붙여넣기(Ctrl + V) :
클립보드로 복사한 컴포넌트를 붙여넣음
삭제(Delete or Backspace) :
선택된 컴포넌트를 삭제
왼쪽 정렬(Alt + Shift + L) :
선택된 컴포넌트들의 가장 왼쪽에 있는 컴포넌트를 기준으로 컴포넌트들을 왼쪽으로 정렬
가운데 정렬(Alt + Shift + C) :
선택된 컴포넌트들의 중앙 좌표를 기준으로 컴포넌트들의 x좌표를 가운데로 정렬
오른쪽 정렬(Alt + Shift + R) :
선택된 컴포넌트들의 가장 오른쪽에 있는 컴포넌트를 기준으로 컴포넌트들을 오른쪽으로 정렬
위쪽 정렬(Alt + Shift + T) :
선택된 컴포넌트들의 가장 위쪽에 있는 컴포넌트를 기준으로 컴포넌트들을 위쪽으로 정렬
중앙 정렬(Alt + Shift + M) :
선택된 컴포넌트들의 중앙 좌표를 기준으로 컴포넌트들의 y좌표를 가운데로 정렬
아래쪽 정렬(Alt + Shift + B) :
선택된 컴포넌트들의 가장 아래쪽에 있는 컴포넌트를 기준으로 컴포넌트들을 아래쪽으로 정렬
가로 간격을 동일하게(Alt + Shift + H) :
선택된 컴포넌트들의 가로방향 양 끝에 있는 컴포넌트를 기준으로 각 컴포넌트 사이의 폭을 같게 조절
세로 간격을 동일하게(Alt + Shift + V) :
선택된 컴포넌트들의 세로방향 양 끝에 있는 컴포넌트를 기준으로 각 컴포넌트 사이의 폭을 같게 조절
맨 앞으로 가져오기(Ctrl + Shift + F) :
선택된 컴포넌트의 순서를 맨 앞으로 보냄
맨 뒤로 보내기(Ctrl + Shift + B) :
선택된 컴포넌트의 순서를 맨 뒤로 보냄
앞으로 가져오기(Ctrl + F) :
선택된 컴포넌트의 순서를 한 칸 앞으로 보냄
뒤로 보내기(Ctrl + B) :
선택된 컴포넌트의 순서를 한 칸 뒤로 보냄
좌우반전(Alt + Shift + X) :
선택된 컴포넌트를 가로를 기준으로 대칭
상하반전(Alt + Shift + Y) :
선택된 컴포넌트를 세로를 기준으로 대칭
시계 방향으로 회전(Alt + Shift + E) :
선택된 컴포넌트를 시계 방향으로 90도 회전
반시계 방향으로 회전(Alt + Shift + W) :
선택된 컴포넌트를 반시계 방향으로 90도 회전
그룹(Ctrl + G) :
선택된 컴포넌트들을 그룹으로 묶음
그룹 해제(Ctrl + Shift + G) :
선택된 그룹을 해제
텍스트 크기 증가(Shift + WheelUp) :
선택된 컴포넌트의 텍스트 크기를 증가
텍스트 크기 감소(Shift + WheelDown) :
선택된 컴포넌트의 텍스트 크기를 감소
캔버스 크기 맞추기(Ctrl + D) :
캔버스의 크기를 화면에 딱 맞게 리사이즈 시킴
미리보기(Ctrl + P) :
편집하고 있는 모델링 화면의 3D 컴포넌트, 애니메이션 등 효과를 미리 확인
전체 화면(F11) :
툴바와 속성창들을 모두 숨기고 모델링 화면을 전체화면으로 변환
속성 창 숨기기(Ctrl + H) :
속성 창을 숨기거나 보여줌

컴포넌트 툴바

모델러에서 사용가능한 컴포넌트가 모여있는 툴바. 컴포넌트 툴바에서 원하는 컴포넌트를 클릭하면 모델러에 해당 컴포넌트가 추가된다.
컴포넌트툴바

: 선택모드와 이동모드를 변경한다. Space를 누르고 있는 동안 이동모드로 작동한다.
: 선 컴포넌트가 모여있다.
: 도형 컴포넌트가 모여있다.
: 텍스트 미디어 컴포넌트가 모여있다.
: 차트 게이지 컴포넌트가 모여있다.
: 표 컴포넌트가 모여있다.
: 컨테이너 컴포넌트가 모여있다.
: 데이터소스 컴포넌트가 모여있다.
: IOT 컴포넌트가 모여있다.
: 3D 컴포넌트가 모여있다.
: 창고 컴포넌트가 모여있다.
: 폼 컴포넌트가 모여있다.
: 기타 컴포넌트가 모여있다.

속성창

속성창의 기능들에 대해 설명한다.

: 컴포넌트의 모양에 관련된 속성. ID, class를 부여하거나, 너비, 높이 등을 지정할 수 있다.
: 컴포넌트의 스타일에 관련된 속성. 색상, 폰트 등을 지정할 수 있다.
: 컴포넌트의 효과에 관련된 속성. 그림자, 애니메이션, 클릭시 이벤트를 지정할 수 있다.
: 컴포넌트 고유 속성.
: Scene의 데이터에 관련된 속성.

모델러 저장하기

모델링을 마치고 저장하는 방법에는 다음과 같이 두가지 방법이 있다.

버튼을 이용한 방법
1. 모델러 우측 하단의 을 클릭한다.
2. 을 클릭하여 저장한다.
단축키를 이용한 방법
1. 모델링 영역을 클릭한다.
2. 저장 단축키를 입력한다.
- OS별 저장 단축키
  - Windows: Ctrl + S
  - MacOS: ⌘ + S

데이터 바인딩

Scene에 데이터를 바인딩 하는 기능에 대하여 설명한다.

데이터

데이터를 컴포넌트에 대입해주기 위해 필요한 기능. 컴포넌트 하나당 데이터 하나를 가진다. 서버로 부터 데이터를 받으려면, 컴포넌트의 ID를 서버의 데이터와 일치시켜야 한다.

데이터 컴포넌트 매핑

데이터와 컴포넌트를 매핑하는 방법에 대하여 설명한다.

속성창의 5번째 탭인 데이터탭을 클릭한다.
컴포넌트에 ID를 할당한다. 서버에서 내려오는 데이터는 자신의 Key(데이터 이름)을 동일한 컴포넌트의 ID를찾아 매핑시킨다. (즉, 컴포넌트 ID와 데이터의 Key는 동일해야 한다.)
대상의 ID를 입력한다. 대상은 나 자신이 될수도 있으며 다른 컴포넌트를 대상으로 하여 같은 데이터를 공유할 수 있다.
변경할 속성을 입력한다. 속성은 데이터가 왔을때 컴포넌트의 어떤 속성을 변경할 것인지를 설정한다.
표에 기본값을 입력한다. 기본값은 실제 데이터의 데이터가 들어오기 전, 데이터의 초기값이다. 배열형태의 데이터가 아닐경우 기본값은 아래의 그림에 표시된 것과 같이 Field1의 첫번째 줄의 데이터만을 인식한다.
데이터의 값은 컴포넌트의 ‘data’라는 속성으로 들어간다. 이 값을 컴포넌트의 다른 속성에서 쓰려면 속성 입력창에 #{data}를 입력하면 된다.
( #{속성명}을 입력하면 해당 속성의 값이 대체된다. )

데이터 전파하기

컴포넌트에 할당된 데이터를 다른 컴포넌트에 주입하는 방법에 대하여 설명한다.

타겟 컴포넌트에 ID를 할당한다.
속성창에서 데이터탭을 클릭한다.
표에 기본값을 입력한다. (생략해도 된다.)
필요에 따라 accessor를 입력한다.
타겟 컴포넌트를 지정한다.
속성을 지정한다.
규칙을 지정한다.

데이터 매핑 접근자

접근자는 데이터가 Object 또는 Array일 경우 내부 속성에 접근하기 위해 필요한 것이다. 아무것도 입력이 안되있을 시에는 기본적으로 Field1의 첫행의 값이 사용된다.

Array에 접근: [0]

// e.g. 
[1, 2, 3, 4, 5, ...] // 접근자를 [1]으로 지정

2 // 접근 결과

Object에 접근: [value] 혹은 .value

// e.g.
{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": "value4",
  ...
} // 접근자를 [key2]로 지정

"value2" // 접근 결과

데이터 매핑 타겟

데이터 값을 전파할 타겟을 설정한다.
설정은 아래의 세가지 방법이 있다.

상대적 타겟 설정 방법

(self): 자신을 타겟으로 지정한다.

(key): data의 key와 일치하는 컴포넌트들을 타겟으로 한다.
데이터의 타입이 Object인 경우 사용된다.

 // e.g. 
 {
     "id1": 1,
     "id2": 2,
     "id3": 3
 } // 타겟을 (key)로 지정
        
 1 // ID가 id1인 컴포넌트의 데이터
 2 // ID가 id2인 컴포넌트의 데이터
 3 // ID가 id3인 컴포넌트의 데이터

ID를 통한 설정 방법
- #id: 컴포넌트의 ID를 입력하여 일치하는 컴포넌트를 타겟으로 한다.
- .class: 컴포넌트의 class를 입력하여 일치하는 컴포넌트들을 타겟으로 한다.

데이터의 key를 지정하고 그 값을 통해 타겟을 설정하는 방법

[dataKey]: 입력한 값에 해당하는 dataKey의 값과 ID가 일치하는 컴포넌트를 타겟으로 한다.
데이터의 타입이 Object-Array인 경우 사용된다.

 // e.g. 
 [{
     "id": "component-1",
     "value": "1"
 }, {
     "id": "component-2",
     "value": "2"
 }, {
     "id": "component-3",
     "value": "3"
 }] // 타겟을 [id]로 지정

 {
     "id": "component-1",
     "value": "1"
 } // ID가 component-1인 컴포넌트의 데이터
 {
     "id": "component-2",
     "value": "2"
 } // ID가 component-2인 컴포넌트의 데이터
 {
     "id": "component-3",
     "value": "3"
 } // ID가 component-3인 컴포넌트의 데이터

데이터 매핑 속성

데이터 값을 타겟의 어떠한 속성에 대입할 것인지 설정한다.
타겟속성

대부분의 컴포넌트들에 공통적으로 적용될 수 있는 속성들과 value, data 등의 특수한 용도의 속성이 데이타 바인딩의 대상이 될 수 있다.

다음에는 각 속성에 대해서 설명한다.

text : 컴포넌트의 텍스트 속성
fillStyle : 컴포넌트의 배경색상
strokeStyle : 컴포넌트의 선 색상
fontColor : 컴포넌트의 텍스트의 색상
rotation : 컴포넌트의 회전값 속성(radian 단위)
hidden : 컴포넌트의 숨김 여부 (true or false)
location : 컴포넌트의 위치 좌표 (부모 컴포넌트의 left/top 위치로부터의 상대 좌표 값)

값은 { x: 10, y: 10 } 형식의 오브젝트이어야 한다.
x, y 포지션은 컴포넌트의 중심 좌표를 의미한다.

dimension : 컴포넌트의 크기 속성

값은 { width: 100, height: 100 } 형식의 오브젝트이어야 한다.
현재 dimension 속성이 지원되는 컴포넌트는 없다.

started : 컴포넌트에 설정된 애니메이션의 동작 상태

started 에 true 값을 바인드하면, 애니메이션이 시작된다.
started 에 false 값을 바인드햐면, 애니메이션이 종료된다.

reference : 컴포넌트가 참조하는 대상

현재는 tab 컴포넌트의 reference 를 변경할 때만 사용된다.

value : 컴포넌트의 대표 속성

value는 컴포넌트의 대표 속성을 의미하는 특별한 속성이다.
즉, value 속성을 변경하면 해당 컴포넌트의 대표적인 속성값이 변경된다.
데이타 바인딩에 의해 변경될 가능성이 가장 큰 속성을 컴포넌트의 대표 속성으로 선정하였으므로, value 속성을 이용하면, 하나의 데이타를 여러 컴포넌트에 대해서 바인딩을 할 때 편리할 경우가 많다.
각 컴포넌트의 대표 속성은 다음과 같다.
- 일반적인 컴포넌트의 대표 속성은 text 이다. (text, rect, ellipse, .. )
- gauge, progress 등 단일 값을 표현하는 컴포넌트의 대표 속성은 value 이다.
- indoormap, tab 컴포넌트는 activeIndex (액티브 페이지 인덱스) 이다.
- image-view, video, audio 등 URL 속성을 가지는 컴포넌트의 대표속성은 src (url) 이다.
- form 컴포넌트의 대표 속성은 action 이다.
- select, radio, checkbox 등 html 컴포넌트의 대표 속성은 value 이다.
- input-xxx, button, textarea 등 html 컴포넌트의 대표 속성은 text 이다.
- iframe, img, video 의 대표 속성은 source (url) 이다.
- link의 대표 속성은 href 이다.
- google-map, baidumap의 대표 속성은 latlng 이며, 값은 { lat, lng } 형식의 오브젝트이다.
- chartjs, table의 대표 속성은 data 이다.
- restful 컴포넌트의 대표 속성은 url 이다.
- global-ref, local-ref 의 대표 속성은 ref 이다.

data : 데이타 전달을 위한 컴포넌트 속성

모든 컴포넌트는 data 값을 가질 수 있다.
컴포넌트의 data 속성은 다른 속성과는 달리 컴포넌트에서 직접 사용하지 않고 가지고만 있는 속성이다. (chart와 table 컴포넌트는 예외 - chart와 table에서는 data 속성 값을 직접 사용해서 컴포넌트의 내용을 표현한다.)
컴포넌트가 가지고 있는 data 속성은 데이타 전파(spread)와 기타 속성에 바인드 될 소스데이타로 활용된다.

데이터 매핑 규칙

데이터의 값에 대한 룰을 지정한다.

값: 데이터의 값을 그대로 대입한다. (제일 기본적인 옵션)
MAP: 데이터의 값에 따라 특정 값으로 변환 시켜준다. (아래의 예시는 데이터의 값이 0일때는 FillStyle을 초록색, 1일때는 노란색, 2일때는 빨간색으로 변환시켜준다.)
Range: 데이터 값의 범위에 따라 변환될 값을 설정한다. (아래의 예시는 데이터의 값이 0~10미만 일때는 FillStyle을 초록색, 10~20미만 일때는 노란색, 20~30미만 일때는 빨간색으로 변환시켜준다.)

Eval: 데이터 값과 컴포넌트의 속성을 사용자가 JavaScript 코딩으로 조작할 수 있는 기능이다.
argument는 아래와 같다.

value: 접근자를 통해 접근된 데이터.

this: 데이터를 전달받은 컴포넌트.
variable-rule-03

 // e.g. 데이터 값을, '값 * 100' 해서 컴포넌트의 value를 변경
 /* 
 receiveData = {
     "goodRate": 0.973,
     "badRate": 0.027,
     "goodCount": 19000,
     ...
 }

 accessor = goodRate

 value = 0.973
  */
 return value * 100 // 컴포넌트의 value: 97.3

보드 데이터 바인더

데이터를 Scene으로 Push해주는 기능인 퍼블리셔에 대하여 설명한다.

화면 좌측의 관리자페이지 링크()를 클릭한다.
관리자페이지의 좌측 메뉴에서 모니터링 보드 관리 - 보드 데이터 바인더를 순서대로 클릭하여 Scene 메뉴로 이동한다.
보드 데이터 바인더 메뉴 하단의 추가 버튼을 클릭한다.
보드 데이터 바인더 명칭과 보드 등을 입력하고 저장버튼을 클릭한다.
- 보드는 SCENE-NAME(e.g. : SCENE-XX) 이다.
추가된 보드 데이터 바인더의 을 클릭하여 상세페이지 팝업을 연다.
상세페이지에서 Return type과 필드들에 값을 입력한다.
하단 Service Logic 필드에 SQL을 입력하고 저장한다.
테스트 버튼()을 클릭하여 데이터가 정상적으로 나오는지 확인한다.

보드 데이터 바인더 리턴타입

Array Type
SQL의 실행 결과를 리스트로 리턴한다.

입력필드 :

데이터 키 : SQL 실행 결과를 담아서 내려줄 이름

예를들어 SQL, Record Set, 데이터 키가 아래와 같을 때

SELECT ID, AGE, DEPARTMENT, WORK_YEAR FROM EMPLOYEE

ID	AGE	DEPARTMENT	WORK_YEAR
e00001	30	SALES	1
e00002	37	DEVELOPMENT	5
e00003	45	HR	12

데이터 키: data

결과는 아래와 같다.

{
  "data": [{
    "ID": "e00001",
    "AGE": 30,
    "DEPARTMENT": "SALES",
    "WORK_YEAR": 1
  }, {
    "ID": "e00002",
    "AGE": 37,
    "DEPARTMENT": "DEVELOPMENT",
    "WORK_YEAR": 5
  }, {
    "ID": "e00003",
    "AGE": 45,
    "DEPARTMENT": "HR",
    "WORK_YEAR": 12
  }]
}

Key-Value Type SQL의 실행 결과를 Key-Value 타입의 JSON Object로 리턴한다.

입력필드 :

키 필드 : SQL 실행 결과를 담아서 내려줄 필드명 (필드의 레코드값이 키가 된다.)
값 필드 : SQL 실행 결과중 값으로 사용할 필드명 (필드의 레코드값이 값이 된다.)

예를들어 SQL, Record Set, 키 필드, 값 필드이 아래와 같을 때

SELECT ID, AGE, DEPARTMENT, WORK_YEAR FROM EMPLOYEE

ID	AGE	DEPARTMENT	WORK_YEAR
e00001	30	SALES	1
e00002	37	DEVELOPMENT	5
e00003	45	HR	12

키 필드: ID, 값 필드: DEPARTMENT

결과는 아래와 같다.

{
  "e00001": "SALES",
  "e00002": "DEVELOPMENT",
  "e00003": "HR"
}

Key-Object Type
SQL의 실행 결과를 Key-Object 타입의 JSON Object로 리턴한다.

입력필드 :

키 필드 : SQL 실행 결과를 담아서 내려줄 필드명 (필드의 레코드값이 키가 된다.)

예를들어 SQL, Record Set, 키 필드가 아래와 같을 때

SELECT ID, AGE, DEPARTMENT, WORK_YEAR FROM EMPLOYEE

ID	AGE	DEPARTMENT	WORK_YEAR
e00001	30	SALES	1
e00002	37	DEVELOPMENT	5
e00003	45	HR	12

키 필드: ID

결과는 아래와 같다.

{
  "e00001": {
    "AGE": 30,
    "DEPARTMENT": "SALES",
    "WORK_YEAR": 1
  },
  "e00002": {
    "AGE": 37,
    "DEPARTMENT": "DEVELOPMENT",
    "WORK_YEAR": 5
  },
  "e00003": {
    "AGE": 45,
    "DEPARTMENT": "HR",
    "WORK_YEAR": 12
  }
}

Single Row Type
SQL의 실행 결과를 JSON Object로 리턴한다. 결과는 반드시 하나의 row만을 가져야한다.

입력필드 :
- Data Key(선택) : SQL 실행 결과를 담아서 내려줄 이름
예를들어 SQL, Record Set이 아래와 같을때
```
SELECT ID, AGE, DEPARTMENT, WORK_YEAR FROM EMPLOYEE LIMIT 1
```
ID AGE DEPARTMENT WORK_YEAR

e00001 30 SALES 1

데이터 키에 따른 결과는 아래와 같다.
1. 데이터 키가 data인 경우
```
{
  "data": {
    "ID": "e00001",
    "AGE": 30,
    "DEPARTMENT": "SALES",
    "WORK_YEAR": 1
  }
}
```
2. 데이터 키가 공백인 경우
```
{
  "ID": "e00001",
  "AGE": 30,
  "DEPARTMENT": "SALES",
  "WORK_YEAR": 1
}
```

Scene 참조

Scene에 다른 Scene의 화면을 포함(Reference)시키는 기능에 대하여 설명한다.

Scene 참조하기

Reference-Scene을 이용하면 Scene 내부에 다른 Scene을 참조하여 넣을 수 있다.

Global Reference:
다른 Scene을 참조하여 화면에 나타낸다.
Local Reference:
Scene 내의 특정 컴포넌트를 참조하여 화면에 나타낸다.

Scene 링크하기

Scene 내부에 다른 Scene을 링크할 수 있는 Goto 기능에 대하여 설명한다.

컴포넌트를 클릭 후 효과속성창을 클릭한다.
탭 이벤트의 데이터정보를 Goto로 설정한다.
링크할 Scene의 Scene-name을 값으로 설정한다.

Scene 플레이

여러 Scene을 순차적으로 보여주거나, 한 화면에 보여주는 기능에 대하여 설명한다.

플레이그룹 만들기

플레이 기능을 통해 보여질 Scene을 모아놓을 수 있는 플레이그룹을 만드는 방법에 대하여 설명한다.

좌측 하단의 버튼을 클릭한다.
그룹 이름을 입력하고 그룹 타입을 PLAY로 선택 후 Create버튼을 클릭하여 그룹을 생성한다.

플레이그룹 권한 부여하기

사용자에게 플레이그룹 권한을 부여하는 방법에 대하여 설명한다.

관리자페이지로 이동한다.
관리자페이지에 로그인한다.
시스템 - 도메인 사용자를 순서대로 클릭하여 도메인 사용자 메뉴로 이동한다.
권한을 부여하고자 하는 유저를 찾아 상세정보 화면 팝업을 띄운다.
권한을 부여하고자 하는 플레이그룹을 체크하고 저장을 클릭한다.
보드로 돌아가서 새로고침을 하여 플레이그룹정보를 새로 받아온다.

플레이그룹에 Scene 추가하기

플레이그룹에 추가하고자 하는 Scene이 있는 그룹으로 이동한다.
Scene을 드래그하여 플레이그룹에 드랍한다.

플레이하기

플레이그룹으로 이동한다.
우측 하단의 을 클릭한다.
플레이방식과 주기를 선택 후 확인을 클릭한다.

플레이방식의 종류

Carousel: 플레이그룹에 있는 Scene을 순차적으로 하나씩 보여준다.
Filp-card: 플레이그룹의 Scene 2개를 순차적으로 보여준다.
Flip-card2: Flip-card와 동일하며, 보여지는 효과가 다르다.
Grid: 플레이그룹의 Scene을 Grid형태로 배치하여 보여준다.

Visualizer에 Rack 배치하기

Visualizer에 Rack을 배치하는 방법에 대하여 설명한다.

Visualizer 배치 및 바닥 배경 이미지 넣기

Scene 모델러 좌측의 컴포넌트 툴바에서 Visualizer를 선택하여 배치한다.
배치된 Visualizer를 클릭 후, 작업 예정인 관련 도면 이미지를 Visualizer의 배경 이미지로 설정한다.
미리보기를 눌러 확인한다.

Rack Table 배치하기

컴포넌트 툴바에서 Rack-table을 선택하여 배치한다.
배치된 Rack-table을 선택 후 배치된 Visualizer에 포함되도록(Visualizer의 테두리가 주황색으로 바뀌도록) 배치한다.

Rack 배치하기

Rack-table을 선택하여 도면의 Zone에 겹치도록 배치한다.
(!주의 Rack-table은 배치한 테이블 기준으로 행에 대해서만 통로로 인식하므로, 도면상의 통로가 세로로 되어 있는 경우에는 90도 회전하여 배치한다.)
도면을 참조하여 rack-table의 행과 열을 조정한다.
도면을 참조하여 통로를 설정한다(통로에 해당하는 행 선택 후 속성의 is empty를 체크).
Rack-table을 선택 후 Rack 선반 층수와, 선반 깊이를 입력한다.
(선택사항) 랙 기둥 숨기기 여부 및 Stock scale을 설정한다.
미리보기를 통해 확인한다.

Rack에 Location 지정하기

Rack-table을 선택하고 존과 위치패턴, 단패턴을 입력한다.
로케이션을 지정하고자 하는 셀을 드래그하여 선택 후 속성창의 로케이션 지정 기능을 통해 지정한다.
(로케이션이 잘 지정되었는지 확인하려면 셀 위에 마우스를 올리면 된다.)

수동으로 단 구성하기

rack을 선택한다.
속성의 단 로케이션 입력란에 각 단의 ID를 입력한다. 각 단은 ,로 구분한다. 왼쪽부터 1층으로 취급하고, ID를 입력하지 않은 층은 숨겨진다.
미리보기로 확인한다.

셀 분할하기

Rack을 선택하고 Bin 로케이션 입력란에서 각 단을 분할할 수 있다. ,로 구분한다.
가장 아랫줄부터 1층으로 취급하며, 분할을 사용하지 않을 층은 .으로 표시한다.
입력한 텍스트는 .일 때를 제외하고 로케이션 ID 뒤에 붙어 각 bin의 ID로 사용된다.

Visualizer의 상태 지정

Visualizer의 상태를 지정하는 방법에 대하여 설명한다.

Legend 배치 및 설정

컴포넌트 툴바에서 Legend를 선택하여 배치한다.
상태 필드 및 상태값, 기본값 등을 설정한다.

Visualizer에 Legend 연결하기

Legend에 ID를 설정한다.
Visualizer를 선택하고 Legend Target 속성에 Legend의 ID를 입력한다.
미리보기를 통해 Rack의 기본 색상이 Legend에서 설정한 기본 색상으로 바뀌었는지 확인한다.

컴포넌트에 배경 이미지 넣기

컴포넌트의 배경 이미지를 설정하는 방법은 다음과 같다.

Drag N Drop 방법

배경 이미지를 설정하고자 하는 컴포넌트를 선택한다.
Alt키를 누른상태로 이미지를 선택하여 웹브라우저에 Drag & Drop 한다.
Drag & Drop한 이미지가 컴포넌트의 배경 이미지로 지정된 것을 확인할 수 있다.

공통 저장소에서 선택하는 방법

배경 이미지를 설정하고자 하는 컴포넌트를 선택한다.
스타일 속성창의 채우기 스타일을 패턴으로 지정하고, 맞춤에 체크한다.
이미지 항목의 를 클릭하고, 배경으로 지정하고자 하는 이미지를 선택하여 클릭한다.
선택한 이미지가 컴포넌트의 배경 이미지로 지정된 것을 확인할 수 있다.

Baidu Map 사용

특정 지역을 표시하기 위해 사용되는 Baidu map 컴포넌트, 지역에 대한 정보를 나타내기 위한 bmap-marker 컴포넌트를 사용하는 방법은 아래와 같다.

Baidu Map 속성 설정

Baidu map의 사용을 위한 위치 설정 등 기본적인 속성에 대해 설명한다.

모델링 화면의 컴포넌트 툴바의 etc 내의 baidu-map 컴포넌트를 클릭하여 생성한다.
모델링 화면 우측 속성창의 4번째 탭에서 baidu-map의 속성을 설정해준다.
- 첫번째와 두번째 속성인 위도와 경도를 설정해주어, 보여주고 싶은 위치로 맵을 이동시킬 수 있다.
- Zoom속성의 값을 높이면 지도를 확대할 수 있다.

Bmap Marker 속성 설정

Baidu map의 특정 위치에 marker을 표시하는 방법에 대해서 알아보도록 한다.

모델링 화면의 컴포넌트 툴바의 etc 내의 bmap-marker 컴포넌트를 클릭하여 생성한다.
모델링 화면 우측 속성창의 4번째 탭에서 bmap-marker의 속성을 설정해준다.

제일 위의 Target Map에 marker가 표시될 baidu map의 id 값을 입력한다.

위도와 경도를 설정해주어, 표시하고 싶은 위치에 bmap-marker을 생성할 수 있다.

Bmap Marker 상세정보창 생성

Baidu map에 표시되어 있는 bmap-marker을 통해 info.window 컴포넌트를 활용하여 상세 정보를 제공하는 방법을 알아보도록 한다.

모델링 화면의 컴포넌트 툴바 etc 내의 info.window 컴포넌트를 클릭하여 생성한다.
우측 속성창의 4번째 탭에서 info.window에 표시될 내용을 입력한다.
bmap-marker의 속성창 3번째 탭으로 이동하여, 이벤트 내용을 입력한다.
- 마우스 오버 이벤트 발생시에는 호버 이벤트에, 클릭 이벤트의 경우에는 탭 이벤트에 이벤트 내용을 입력한다.
- 정보창 값에는 앞서 생성한 info.window의 id 값을 입력해주고, 변수정보는 open infowindow를 선택한다.
미리보기 화면에서 bmap-marker 클릭시 info.window창이 뜨는 것을 확인한다.

glTF 임포트

glTF (혹은 glb)포맷의 3D object를 Things-board에 임포트 하는 방법에 대해서 알아본다.

glTF파일 업로드

Things-board 관리자 페이지로 이동한다.
시스템 - 저장소에 3D Resource 관리하기 위한 저장소를 추가한다. 이때 category값은 binary로 설정한다.
생성한 저장소의 상세버튼을 클릭하여, 상세 팝업을 호출한다.
팝업 우측 하단의 업로드 버튼을 클릭하여, 3d object 파일을 업로드한다. 이때 파일은 gltf혹은 glb 포맷이어야 하며, 모든 resource를 내장하는 embedded-gltf 방식이어야 한다.

glTF 사용

모델링 화면에서 컴포넌트 툴바의 3D컴포넌트 내의 gltf-object를 찾아 클릭하여 생성한다.
생성한 gltf-object의 속성창의 4번째 탭을 클릭하여, URL 값을 입력하거나, 옆의 셀렉터 창을 통해서 gltf-object를 선택한다.
모델링 화면에서 컴포넌트 툴바의 3D컴포넌트 내의 visualizer를 찾아 클릭하여 생성한 뒤, 앞서 생성한 gltf-object를 visualizer 내로 드래그해준다.
미리보기 화면에서 gltf-object를 확인한다.

Velocity 사용

velocity 문법을 통하여, 보드에서 전달한 조회조건을 이용하여 데이터를 조회하는 방법을 알아보도록 한다.

Velocity 적용방법

모델링 화면 좌측의 컴포넌트 툴바의 Form List내의 Form 컴포넌트를 생성한다.
Form 컴포넌트 속성창의 4번째 탭의 Action 값을 데이터를 조회할 URL로 설정해준다.
조회조건을 전달할 컴포넌트를 생성한다.
조회조건을 보낼 데이터의 이름을 설정해준다.
Things-board 관리자 페이지의 모니터링 보드 관리-보드 데이터 바인더에서 사용할 데이터를 생성하고, 상세 팝업 페이지를 연다.
데이터를 조회할 데이터 조회문에 앞서 모델링 화면에서 설정해둔 조회조건을 검색할 이름을 사용하여, velocity 문법으로 쿼리를 작성한다.
미리보기를 통해 조회조건 값에 따라 데이터가 조회되는지 확인한다.

Data Transform 사용

things-scene-data-transform에는 보드에서 표현되기 용이한 형태로 데이터를 가공해주는 컴포넌트들이 있다. 여기서는 각 컴포넌트의 사용방법에 대해서 알아보도록 한다.

Data Accessor

Object의 경우 입력받은 값을 key로 갖고 있거나, Array의 경우 해당 index 값의 데이터를 리턴해주는 컴포넌트이다.

준비 단계로서 Publisher에서 데이터를 Array나 Object 형태로 데이터를 만들어 직접 accessor에 보내거나, excel 컴포넌트 등을 이용하여 Array, object 형식의 데이터를 생성하여 accessor 컴포넌트에 데이터를 전달하도록 한다. 사진에서는 rect 컴포넌트에서 Object를 담고 있는 Array 형식의 데이터를 만들어, accessor에 value로 전달할 수 있도록 셋팅했다.
모델링 화면 좌측의 컴포넌트 툴바의 Etc List내의 data-accessor 컴포넌트를 생성한다.
data-accessor 컴포넌트 속성창의 4번째 탭의 접근자에 Array의 경우에는 index를, Object의 경우에는 key값을 입력해준다. 사진에서는 Object를 담고 있는 Array이기에, Array의 3번째 데이터의 color key값을 가진 value를 가져왔다.
작업 확인을 위해 데이터 맵핑을 한다.
데이터 값이 제대로 출력됨을 확인한다.

Data Wrapper

Data-wrapper은 Array 형식의 데이터를 속성명으로 입력받은 값을 key값으로한 Object로 바꿔주는 컴포넌트이다.

준비 단계로서 Publisher에서 데이터를 Array 형태로 만들어 직접 wrapper로 보내거나, excel 컴포넌트 등을 이용하여 Array 형식의 데이터를 생성하여 wrapper 컴포넌트에 데이터를 전달하도록 한다. 사진에서는 rect 컴포넌트에서 2개의 object를 갖고 있는 Array 형식의 데이터를 만들어, wrapper에 value로 전달할 수 있도록 셋팅했다.
모델링 화면 좌측의 컴포넌트 툴바의 Etc List내의 data-wrapper 컴포넌트를 생성한다.
data-wrapper 컴포넌트 속성창의 4번째 탭의 속성명은 생성할 object의 key값이다. 따라서 앞의 단계에서 data-wrapper 컴포넌트로 보낸 array 데이터를 value로 가질 key 값을 해당 필드에 입력한다.
해당 key 값을 통해 데이터 접근이 가능한지 확인하기 위해 접근자에 앞서 입력한 key 값을 입력하여, 데이터 전송을 한다.
데이터 값이 제대로 출력됨을 확인한다.

Data Enhancer

data-enhancer는 Object내 접근자 대상의 key에 해당되는 Array에 입력 받은 값으로 index 역할을 해주는 property를 추가하여 주는 컴포넌트이다.

모델링 화면 좌측의 컴포넌트 툴바의 Etc List내의 data-enhancer 컴포넌트를 생성한다.
data-wrapper를 통해서 object 형태로 만든 데이터를 enhancer에 value로 전달한다.
data-enhancer 컴포넌트 속성창의 4번째 탭의 접근자 대상에 Array의 object가 담겨있는 key값을 입력해준다. 그리고 인덱스 명에는 index 역할을 할 property의 이름을 설정해준다. 인덱스 타입은 0, 1을 번갈아가며 인덱스로 넣어주는 방법과 0부터 데이터의 인덱스 번호를 차례대로 넣어주는 형태가 있고, 둘 중에서 사용할 인덱스 타입을 선택한다.
작업 확인을 위해 접근자에 앞서 입력한 key 값을 입력하여, 데이터 맵핑을 한다.
데이터 값이 제대로 출력됨을 확인한다.
참고로 인덱스 타입을 0부터 차례대로 인덱스를 선택해주는 standard로 설정할 경우 아래와 같이 데이터 값이 출력된다.

Data Paginator

data-paginator는 한 페이지에 표시될 갯수를 페이지 사이즈로 설정하여 해당 갯수만큼, duration에 입력된 초의 시간 동안 데이터를 표시해주는 컴포넌트이다. 또한 탭 이벤트를 이용해 처음 페이지로 이동, 마지막 페이지로 이동, 전 페이지, 다음 페이지 이동이 가능하며, 직접 입력받은 페이지로 이동하는 것 또한 가능하다.

준비 단계로서 Publisher에서 데이터를 Array 형태로 만들어 직접 paginator로 보내거나, excel 컴포넌트 등을 이용하여 Array 형식의 데이터를 생성하여 data-paginator 컴포넌트에 source 속성으로 데이터를 전달하도록 한다. 사진에서는 excel파일을 임포트하여 data-paginator에 source로 전달할 수 있도록 셋팅했다.
모델링 화면 좌측의 컴포넌트 툴바의 Etc List내의 data-paginator 컴포넌트를 생성한다.
data-paginator 컴포넌트 속성창의 4번째 탭의 페이지 사이즈 속성에는 한 페이지에 표시할 데이터의 갯수를 입력해주고, 지속시간은 자동으로 페이지 넘김을 할 경우 몇 초를 주기로 다음 페이지로 넘어갈 것인지를 설정할 수 있다.
data-paginator에서 제공하는 정보의 종류는 가장 기본이 해당 페이지에 표시되어야할 데이터 리스트인 list, 현재 페이지를 뜻하는 currentPage, 총 표시할 페이지 수인 totalPage와 총 표시될 데이터의 갯수를 뜻하는 totalRecords, 보여주고 있는 데이터의 인덱스를 나타내는 startIndex와 endIndex, 그리고 data-paginator의 속성값에 입력한 한 페이지에 표시할 데이터의 갯수를 뜻하는 pageSize가 있다. 그 중에서 사용하고 싶은 내용을 접근자 명에 입력하여, 데이터를 전송하여 표시할 수 있다.
데이터 값이 제대로 출력됨을 확인한다.

Data Paginator 수동 이벤트 처리

data-paginator에서 페이지간의 이동을 수동으로 하기 위한 이벤트 처리 방법에 대해서 설명한다. 바로 앞에서 data-paginator 생성 방법과 데이터 전달에 대해서 설명하였으므로, 속성 설정부터 이벤트 처리에 초점을 두고 설명한다.

앞의 data-paginator의 속성 설정 단계에서, 지속 시간 값을 0으로 맞춰준다.
이벤트를 발생시킬 컴포넌트를 생성한다. 사진의 경우에는 Shape List의 rect 컴포넌트를 생성했다.
rect 컴포넌트의 3번째 이벤트 탭에 들어가서, 탭 이벤트를 설정해주도록 한다. action은 set value to target component를 설정해주고, 대상값에는 사용할 data-paginator의 id를 넣어준다. 값의 경우에는 이벤트 명을 넣어주면 된다. 이때 수동으로 페이지를 전환할 경우 가능한 이벤트의 종류는 제일 처음 페이지로 이동하는 first, 바로 전 페이지로 이동하는 backward, 바로 다음 페이지로 이동하는 forward, 맨 마지막 페이지로 이동하는 last가 있다. 이 중에서 적용할 이벤트 명을 값으로 넣어준다. 복수의 이벤트를 사용할 경우 이 작업을 이벤트 명만 바꾼 채로 반복해준다.
페이지 값을 직접 입력하여 이동하고 싶은 경우에는, 모델링 화면 좌측의 컴포넌트 툴바의 Form List내의 input-number 컴포넌트를 생성한다.
입력받은 값이 data-paginator에 전달되도록 매핑한다.
data-paginator가 제대로 작동 됨을 확인한다.

Data Queue

입력받은 데이터를 Queue에 추가하고, 입력받은 데이터의 수가 큐 사이즈를 초과할 경우, 먼저 들어온 데이터부터 순차적으로 삭제해주는 기능을 제공하는 컴포넌트이다. Queue의 길이가 최소 큐 사이즈 이상일 때만 표시하여 준다.

준비 단계로서 데이터를 하나씩 받아서 array형태의 value를 리턴하는 queue의 특성을 고려해 publisher등을 통해서 데이터를 입력해준다. 사진에서는 random 컴포넌트를 활용해서 일정 간격에 걸쳐 데이터를 data-queue에 넣고 있다.
모델링 화면 좌측의 컴포넌트 툴바의 Etc List내의 data-queue 컴포넌트를 생성한다.
data-queue 컴포넌트 속성창의 4번째 탭의 큐 사이즈에는 큐에 들어갈 수 있는 최대의 데이터 갯수를 입력하면 된다. 최소 큐 사이즈 필드에는 데이터를 전달할 최소의 큐의 사이즈를 입력하고, 큐 이름은 만들어진 데이터를 value로 가질 key값을 정하여 입력한다.
data-queue에서 만든 데이터를 다른 컴포넌트에 전송한다. 사진의 경우에는 chart 컴포넌트로 보내어 표시하도록 했다.
chart의 4번째 탭의 데이터 참조에 앞서 설정했던 큐 이름을 넣어준다.
data-queue가 최소 길이를 넘는 데이터가 입력되었을 경우 데이터 값이 제대로 출력됨을 확인한다.

Data Reducer

data-reducer은 입력받은 접근자 대상에 해당하는 데이터 중 접근 아이템 명으로 입력된 데이터들의 값을 처리해주는 기능을 갖고 있는 컴포넌트로서, 총합, 평균값, 표준편차, 분산 값 등 원하는 reducing 타입을 선택하면, 입력한 reducing 명을 key 값으로 처리된 값을 제공한다.

준비 단계로 총합, 평균값등 복수의 데이터들에서 단일된 값을 내는 컴포넌트이므로 Publisher에서 Array 데이터를 만들어 data-wrapper에서 object 형태로 만들어 reducer에 보내거나, excel 컴포넌트 등을 이용하여 Array를 value로 갖는 object 데이터를 생성하여 reducer 컴포넌트에 데이터를 전달하도록 한다. 사진에서는 excel파일을 임포트한 다음 wrapper를 통해서 array를 value로 갖는 object를 만들어 data-reducer에 value로 전달할 수 있도록 셋팅했다.
모델링 화면 좌측의 컴포넌트 툴바의 Etc List내의 data-reducer 컴포넌트를 생성한다.
data-reducer 컴포넌트 속성창의 4번째 탭의 접근자 대상에 Array가 value로 담겨있는 Object의 key 값을 입력해준다. 접근자 아이템 명은 처리할 데이터의 속성명을 입력하는 곳이며, Reducing 명은 연산 처리 후의 value를 담을 object의 key값을 설정하는 곳이고, Reducing 타입은 Sum(총합), Average(평균값), Standard Deviation(표준편차), Variance(분산) 총 4개가 있고, 처리할 연산 종류를 고를 수 있다.
작업 확인을 위해 데이터 맵핑을 한다.
데이터 값이 제대로 출력됨을 확인한다.

News Ticker 사용

텍스트를 되풀이하며 계속해서 표현해주는 컴포넌트인 news-ticker의 사용 방법에 대해서 알아보도록 한다.

News Ticker 적용방법

모델링 화면 좌측의 컴포넌트 툴바의 Etc List내의 news-ticker 컴포넌트를 생성한다.
Publisher를 통해 직접 데이터를 전달하거나, news-ticker 컴포넌트의 값에 직접 입력한다. 사진에서는 news-ticker의 값에 직접 텍스트를 입력했다.
news-ticker 컴포넌트 속성창의 4번째 탭의 Direction에서 세로로 흐르게 할 경우에는 vertical을, 가로로 흐르게 할 경우에는 horizontal을 선택한다. 역 방향을 체크할 경우, 텍스트가 흐르는 방향을 끝에서부터 하게 되며, 지속시간은 텍스트의 흘러가는 속도를 결정한다.
데이터 값이 제대로 출력됨을 확인한다.
참고로 Direction을 vertical로 설정할 경우 아래와 같이 데이터 값이 출력된다.