toggle 버튼과 루나 서비스 이용해서 led 켜기/끄기

•  enact 기본 템플릿으로 앱 만들기
  
•  toggle 버튼 넣기
•  toggle 버튼 눌렀을 때 -> gpio 제어하는 루나 서비스 이용해서 led 켜기/끄기

 

GPIO 제어하는 루나 서비스 이용해서 LED 켜기/끄기

---

이 포스팅에서는 GPIO를 제어하는 루나 서비스를 활용하여 LED 제어하는 실습을 해보겠습니다.

먼저, GPIO란 General-Purpose Input/Output의 약자로 입력이나 출력을 포함한 동작이 사용자에 의해 직접 제어될 수 있는 직접회로나 전기 회로 기판의 디지털 신호 핀을 말합니다. 

이번 실습에서는 LED 제어를 위해 GPIO를 활용할 것입니다. 

 

1. Enact 기본 앱 만들기

 

이전에 포스팅한  'webOS Enact 사용하기'를 활용하여 앱을 만들어주면 됩니다. 

https://webos-supporters.tistory.com/16

글순서에 따라 Enact 개발환경을 세팅하고, template을 만든 후 MainPanel.js 코드를 수정하여 LED를 제어하는 application을 만들어보겠습니다. 

 

 

2. appinfo.json 코드구성 (Permission 추가)

{
   "id": "com.cosmos.enactsample.gpio",
   "version": "1.0.0",
   "vendor": "COSMOS",
   "type": "web",
   "main": "index.html",
   "title": "Enact GPIO Demo",
   "icon": "icon.png",
   "miniicon": "icon-mini.png",
   "largeIcon": "icon-large.png",
   "uiRevision": 2,
   "requiredPermissions": [
      "time.query",
      "activity.operation",
      "peripheralmanager.gpio.operation"
   ]
}

web application 개발 단계에서 앱을 패키징하기 전에 metadata가 있어야합니다. 다음은 metadata를 저장한 appinfo.json 코드입니다. 

 

Luna Service API를 사용하기 위해서는 appinfo.json 파일에 requiredPermissions를 추가해야 합니다.

requiredPermissions에 추가해야 하는 내용은 webos 공식 홈페이지에서 각 method별로 ACG 뒤에 적힌 내용을 통해  확인할 수 있습니다.

이번 실습에서는  peripheralmanager API의 gpio제어를 사용할 예정이기 때문에 위와 같이 "peripheralmanager.gpio.operation"를 추가합니다. 

https://www.webosose.org/docs/reference/ls2-api/com-webos-service-peripheralmanager/#methods

 

또한 id와 title은 원하는대로 변경가능합니다.

 

 

3. MainPanel.js 코드 구성

• Luna service 호출하기

import Button from '@enact/sandstone/Button';
import kind from '@enact/core/kind';
import {Panel, Header} from '@enact/sandstone/Panels';

import Switch from '@enact/sandstone/Switch';
import { useState } from 'react';
import LS2Request from '@enact/webos/LS2Request';

webOS 플랫폼에서 LS2 API를 사용하기 위하여 위의 명령어를 코드의 맨 윗줄에 입력해 import해줍니다.

Button, Switch 등 기능을 사용할 수 있도록 MainPanel.js에 위의 코드를 추가합니다. 

자세한 내용은 enact 공식 홈페이지에서 확인할 수 있습니다.

 : https://enactjs.com/docs/modules/webos/LS2Request/

 

• return 함수코드

   return (
      <Panel>
         <Header title="COSMOS Home IoT" />
         {
            ledStatus
            ? <span> LED가 켜져 있습니다. </span>
            : <span> LED가 꺼져 있습니다. </span>
         }
         <Switch selected={ledStatus} onToggle={toggleHandler}></Switch>
      </Panel>
   );

return 함수는 https://webos-supporters.tistory.com/25 와 동일합니다. 

 

• toggleHandler 함수 코드

   function toggleHandler(e) {
      let lsMessage = {
         'service':'luna://com.webos.service.peripheralmanager',
         'method':'gpio/setValue',
         'parameters' : {
            'pin': 'gpio4',
            'value': e.selected ? 'high' : 'low'
         },
         'onSuccess'   : ()=>{console.log('success - set value gpio4');},
         'onFailure' : (e)=>{console.log('failure - set value gpio4 ' + e.returnValue);},            
      };
      ls2.send(lsMessage);
      setLedStatus(e.selected);
   }

toggleHandler 함수는 변수로 e(event)를 받습니다. 

이번 실습에서는 gpio를 제어하기 위해 Luna Service API 중 주변 장치를 모니터링하는 서비스를 제공하는 'peripheralmanager'를 이용합니다. 이 때문에 url로 com.webos.service.peripheralmanager을 추가합니다.

 

Method name에는 사용할 method를 선언합니다. webos 공식 홈페이지에서 method별로 정리된 내용을 확인할 수 있습니다. 

value 값으로 e.selected가 참이면 'high'로 거짓이면 'low' 가 되도록 합니다. 

그리고 성공 했을 때와 실패 했을 때의 msg를 띄워줍니다.

 

• 전체 코드

import Button from '@enact/sandstone/Button';
import kind from '@enact/core/kind';
import {Panel, Header} from '@enact/sandstone/Panels';

import Switch from '@enact/sandstone/Switch';
import { useState } from 'react';
import LS2Request from '@enact/webos/LS2Request';

const ls2 = new LS2Request();

function MainPanel() {
   let [ledStatus, setLedStatus] = useState(false);

   function toggleHandler(e) {
      let lsMessage = {
         'service':'luna://com.webos.service.peripheralmanager',
         'method':'gpio/setValue',
         'parameters' : {
            'pin': 'gpio4',
            'value': e.selected ? 'high' : 'low'
         },
         'onSuccess'   : ()=>{console.log('success - set value gpio4');},
         'onFailure' : (e)=>{console.log('failure - set value gpio4 ' + e.returnValue);},            
      };
      ls2.send(lsMessage);
      setLedStatus(e.selected);
   }

   return (
      <Panel>
         <Header title="COSMOS Home IoT" />
         {
            ledStatus
            ? <span> LED가 켜져 있습니다. </span>
            : <span> LED가 꺼져 있습니다. </span>
         }
         <Switch selected={ledStatus} onToggle={toggleHandler}></Switch>
      </Panel>
   );
}


export default MainPanel;

 

4. index.js 코드 구성

• gpio/open 코드

gpio/open

let lsMessage = {
   'service':'luna://com.webos.service.peripheralmanager',
   'method':'gpio/open',
   'parameters' : {
      'pin': 'gpio4'
   },
   'onSuccess'   : ()=>{console.log('success - open gpio4');},
   'onFailure' : (e)=>{console.log('failure - open gpio4 ' + e.returnValue);},            
};
ls2.send(lsMessage);

 

LS2 method에 요청을 보내기 위한 option들을 lsMessage 변수에 저장합니다.

 

"service" key에는 MainPanel.js와 마찬가지로 LS2서비스의 이름을 써주고, "method"에는 사용할 method의 이름을 적어줍니다. 그리고 그 외 필요에 따른 파라미터와 함수들을 넣어줍니다.

 

이번 코드에서는 gpio/open 메소드를 사용합니다. 그리고 해당 파라미터 중 필수로 요구되는(Required) pin 파라미터를 gpio4로 지정합니다. 

 

• gpio/setDirection 코드

gpio/setDirection

lsMessage = {
   'service':'luna://com.webos.service.peripheralmanager',
   'method':'gpio/setDirection',
   'parameters' : {
      'pin': 'gpio4',
      'direction': 'outLow'
   },
   'onSuccess'   : ()=>{console.log('success - set direction gpio4');},
   'onFailure' : (e)=>{console.log('failure - set direction gpio4 ' + e.returnValue);},            
};
ls2.send(lsMessage);

gpio/setDirection 역시 위의 enact 페이지를 참고하여 LS2 method에 요청을 보내기 위한 option들을 lsMessage 변수에 저장합니다.

peripheralmanager API의 gpio/setDirection을 사용할 것이기 때문에 해당 파라미터 중 필수로 요구되는(Required) pin과 Direction 파라미터를 각각 gpio4, outlow로 지정합니다. 최초로 gpio가 꺼지도록 설정하였습니다. 

다른옵션들은 https://www.webosose.org/docs/reference/ls2-api/com-webos-service-peripheralmanager/

에서 확인할 수 있습니다.

• 전체코드

import {render} from 'react-dom';

import App from './App';

const appElement = (<App />);

import LS2Request from '@enact/webos/LS2Request';

const ls2 = new LS2Request();

let lsMessage = {
   'service':'luna://com.webos.service.peripheralmanager',
   'method':'gpio/open',
   'parameters' : {
      'pin': 'gpio4'
   },
   'onSuccess'   : ()=>{console.log('success - open gpio4');},
   'onFailure' : (e)=>{console.log('failure - open gpio4 ' + e.returnValue);},            
};
ls2.send(lsMessage);   

lsMessage = {
   'service':'luna://com.webos.service.peripheralmanager',
   'method':'gpio/setDirection',
   'parameters' : {
      'pin': 'gpio4',
      'direction': 'outLow'
   },
   'onSuccess'   : ()=>{console.log('success - set direction gpio4');},
   'onFailure' : (e)=>{console.log('failure - set direction gpio4 ' + e.returnValue);},            
};
ls2.send(lsMessage);

// In a browser environment, render instead of exporting
if (typeof window !== 'undefined') {
   render(appElement, document.getElementById('root'));
}

export default appElement;

 

5. 어플리케이션 패키징 및 설치하기

enact pack

다음 명령어로 프로젝트를 빌드해줍니다. 빌드에 성공하면 dist라는 폴더가 생깁니다.

 

dist 폴더를 다른 web application과 동일하게 ares-package를 이용하여 ipk로 패키징한 후 ares-install 명령어를 통해 화면을 띄우고자 하는 디바이스에 설치해줍니다. 

 

5. App 실행 결과

다음은 toggle 버튼을 누르기 전 LED가 꺼져있는 초기 상태입니다. 

다음은 toggle 버튼을 누른 후 LED가 켜진 상태입니다.