webOS와 websocket을 이용하여 LED 제어하기 3 : Enact Web Application

지난 시간에는 ESP와 LED, websocket을 연동하는 것까지 실습해보았습니다. 이번 시간에는 led-control과 관련하여 Enact webapplication 개발을 다룹니다.

 

• 전체 시스템 소개
• ESP+LED+websocket
• Enact webapplication
• websocket server
• 시스템 연동

Enact webapplication 개발하기

---

1. Enact 기본 앱 만들기

Enact webapplication의 설치는 기존 게시글을 참고해주세요.

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

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 { w3cwebsocket as W3CWebSocket } from "websocket";
import { useState } from 'react';
import LS2Request from '@enact/webos/LS2Request';

 

websocket과 연결하기 위하여 서버의 ip주소와 포트번호를 지정해줍니다. 

const ws = new W3CWebSocket("ws://192.168.0.114:3001");

 

 

2. MainPanel.js 코드 구성

• toggleHandler 함수 코드

const toggleHandler = (e) => {
	console.log('Switch toggled ' + e.selected);
	
	var ledStatusText = 'Off';
	if(e.selected) {
		ledStatusText = 'On';
	}

변수로 e(event)를 받아서 함수 console.log('Switch toggled ' + e.selected) 를 실행합니다.

ledStatusText을 변수로 하고, 기본 값을 'off'로 설정합니다.

if문을 사용해서 e.selected인 경우 ledStatusText 가 'on'이 되도록 합니다. 

 

 

	var command = {
		'msgType' : 'command',
		'deviceID' : 'CML001',
		'ledStatus' : ledStatusText
	}
	ws.send(JSON.stringify(command));
}

const lsSendOnSuccess = () => {
	console.log("Creat toast success");
}

const lsSendOnFailure = () => {
	console.log("Creat toast failure");
}

위에서 정해진 ledStatusText를 msg의 변수로 받습니다. 

msgType을 'command'로 server와 ESP에게 ledStatus 신호를 보냅니다.

전송이 되었는지 확인하기 위하여 console.log를 받습니다.

 

 

• toastMessage 함수 코드

function MainPanel() {
	let [ledStatus, ledStatusChange] = useState(false);
	
	ws.onopen = () => {console.log("Websocket connected.")};
	ws.onmessage = (e) => {
		console.log("Receive: " + e.data);
		var msg = JSON.parse(e.data);
		if(msg.msgType == 'status') {
			if(msg.deviceID == 'CML001') {
				var toastMessage = '';
				if(msg.ledStatus == 'On') {
					ledStatusChange(true);
					toastMessage = '방에 불이 켜졌습니다.'
				}
				else {
					ledStatusChange(false);
					toastMessage = '방에 불이 꺼졌습니다.'
				}

				var lsMessage = {
					'service':'luna://com.webos.notification',
					'method':'createToast',
					'parameters' : {
						'message': toastMessage
					},
					'onSuccess'	: lsSendOnSuccess,
					'onFailure' : lsSendOnFailure,				
				};
				ls2.send(lsMessage);
			} // end of if-deviceID
		} // end of if-msgType
	};
 }

led 상태에 따라 toastMessage를 띄우도록 함수로 만들어 사용하였습니다.

우선, Javascript의 callback 함수인 e.data를 받습니다. 

toastMessage를 띄우기 위해서는 server와 ESP 사이의 msg를 Enact-app으로 전달해야합니다.

따라서, msgtype이 'status'인 경우에만 조건문을 통과할 수 있도록 코드를 작성합니다.

특정 ESP보드의 신호만 받도록 조건문을 작성합니다. 

IF문을 이용하여 ledStatus가 on/off일 때 toast가 띄워지도록 함수를 만들었습니다.  

 

 

• return 함수 코드

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

 

return 함수를 이용하여 Enact-app이 켜졌을 때, 위의 속성이 반환되도록 코드를 작성합니다.

Title로는 “COSMOS Home IoT” 띄워지도록 작성합니다. 

ledstatus 가 true이면 “방에 불이 켜져 있습니다.” false면 “방에 불이 켜져 있습니다.”가 나타나도록 작성합니다.

그리고 toggle이 될 경우, toggleHandler가 호출할 수 있도록 onToggle={toggleHandler}을 작성합니다. 

 

 

 

3. 구현 결과

• toastMessage

  

                  ledStatus가 on / off 일 때 toastMessage               

 

 

• return

Enact-app이 켜졌을 때 나타나는 화면