가상장치 제어
소개
이번에는 웹브라우저 내부에서 실시간으로 가상의 장치를 생성하고, 해당 장치와 실시간 소통하는 예제입니다.
준비물
이 체험은 웹브라우저 화면 2개 사용을 권장드립니다. 1대의 데스크탑 PC에 웹브라우저 창을 2개 열어서 테스트 할 수 도 있지만, 가능한 노트북이나 PC와 스마트폰 같이 별도의 하드웨어를 사용하시면 좋습니다. 참고로 본 예제는 홈채널을 활용하므로 2개의 장치가 하나의 공유기에 연결되어 있어야 합니다.
순서
- 브라우저에서 리모컨 앱을 2개 엽니다. https://remocon.kr
- 첫번째 앱은 device(장치) 메뉴를 선택합니다.
- 두번째 앱은 Virtual(가상장치) 메뉴 를 선택합니다.
- 이후, 두번째 앱에서 가상 장치가 생성되고, 해당 장치 정보를 알립니다.
- 첫번째 앱에서 가상장치를 인식한 뒤 새로운 장치 제어용 UI가 2개가 추가 됩니다.
- 가상 장치 하나는 가상 전구(Light Bulb) , 나머지 하나는 동적 UI(Dynamic UI)입니다.
가상전구(Light Bulb)
가상장치(Virtual Device)
- 두개의 앱에서 ON,OFF, 토글(toggle) 버튼을 누르면 가상전구가 ON, OFF 됩니다.
- 가상장치 측에서도 버튼을 눌러서 ON OFF제어가 됩니다.
- 양방향으로 제어와 상태정보 공유가 되는것을 확인할 수 있습니다.
동적 UI 장치
장치 UI정보는 해당 장치를 제어할 때 필요한 명령어 목록, 버튼 이름 목록등의 정보이며, 제어 명령을 수행할 장치에게 전달되어야 할 정보입니다. 특정 네트워크에 진입하거나 장치목록을 검색한 후, 특정 장치의 세부 정보중의 하나로 얻는 정보입니다.
매우 단순화 한 UI정보는 아래와 같이 표현 가능합니다.
// ON,OFF,Toggle 3개의 버튼(명령어)을 가진 장치
ui = "ON,OFF,Toggle"
위 와 같은 시그널로 공유한 제어자는 아래와 같은 시그널 명령을 보내서 장치를 제어할 수 있습니다.
remote.signal("channel","ON")
위 시그널을 수신한 장치는 장치를 ON 하는 기능을 수행하게 됩니다.
동적 UI 변경하기
장치(device) 목록 화면
동적 UI 화면에서 ui 텍스트필드에 있는 값을 변경해보실 수 있습니다. 버튼의 개수와 이름을 변경해 보실수 있습니다. 이때 구분기호는 “,” 컴마 기호가 사용됩니다.
제어측 앱에서 Dynamic UI 창 속 버튼이 실시간 변경되는것을 확인 가능합니다.
ui = "A,B,C,D"
가령 ui 정보를 위와 같이 변경 할 경우 제어앱 측 버튼 목록이 [A][B][C][D] 로 변경됩니다.
제한
데모 서버에 접속된 익명 장치는 동기화 가능한 기기의 개수가 약 3~5개(변경 가능)로 제한되어있습니다. 제한 개수보다 많은 앱이나 장치가 연결된 경우 일부 기기만 상태정보 동기화가 가능합니다. 참고로 서버 구동시 설정으로 제한 값을 조절 할 수 있습니다.
참고사항
본 예제는 공통 채널이름을 통한 시그널 공유와 더불어 단일 장치와의 1:1 통신 기능도 함께 사용되었습니다. 멀티캐스팅과 유니캐스팅의 차이와 사용법에대해서는 시그널태그 자료를 참고하시기 바랍니다.