webOS Engineering Blog

전체 시스템 소개 조명 제어 스마트 가습기 수면 패턴 분석 최종 결과물 최종 작품 1. 영상

전체 시습템 설계 조명제어 스마트 가습기 수면 패턴 분석 시스템 연동 Enact webapplication 개발하기 1. Enact 기본 앱 만들기 Enact webapplication의 설치 및 Enact App 개발 시작에 관한 설명은 를 참고해주세요. 2. webapplication의 ui 디자인 & 기능 침대에 압력이 가해지면 연결된 디바이스로부터 측정된 압력값을 서비스에서 알맞게 처리하여, 차트로 도식화합니다. X축은 시간 단위로, 취침 측정을 시작한 이후부터 표시됩니다. 위 예시에선 19시에 측정이 시작된 것을 볼 수 있습니다. Y축은 압력의 크기로, 1시간 단위로 압력 변화(이전 압력과 현재 압력의 차이)를 누적한 값을 나타냅니다. 즉, 차트의 높이가 높을수록 침대에 가해지는 압력 변동이 심..

전체 시습템 설계 조명제어 스마트 가습기 수면 패턴 분석 시스템 연동 Enact webapplication 개발하기 1. Enact 기본 앱 만들기 Enact webapplication의 설치 및 Enact App개발 시작에 관한 것은 기존 게시글을 참고해주세요. 2. wepappication의 UI 디자인 & 기능 코드 1. MainPanel.js 전체 코드 import imgHumidOn from '../../../resources/humidOn.png'; import imgHumidOff from '../../../resources/humidOff.png'; import './HumidityPanel.style.css'; import Switch from '@enact/sandstone/Switch..

전체 시스템 소개 조명 제어 스마트 가습기 수면 패턴 분석 시스템 연동 Enact webapplication 개발하기 1. Enact 기본 앱 만들기 Enact webapplication의 설치 및 Enact App개발 시작에 관한 것은 기존게시글을 참고해주세요. 2. webapplication의 ui 디자인 위 사진처럼 1. 각 방의 전등을 제어, 2. 모든 방의 전등을 한번에 제어 할 수 있게 ui를 짰습니다. 3. LightPanel.js 전체 코드 main 코드인 Main.Panel.js 파일의 전체 코드입니다. import './LightPanel.style.css'; import {useEffect, useState} from 'react'; import React from 'react'; i..

본격적인 Enact app 개발에 앞서 API library 소개 API library - sandstone library sandstone library의 component 구현해보기 (실습) *이 포스팅은 Enact 홈페이지를 참고하여 작성되었습니다. 본격적인 Enact app 개발에 앞서 지난 시간에는 Enact로 개발환경을 setting하고 app을 build한 뒤 직접 webOS에 설치하여 실행하는 것까지 실습해보았습니다. 이번 시간에는 Enact 앱 개발의 더 많은 부분을 다룹니다. 본격적인 Enact app 개발에 앞서, Enact가 무엇인지 제대로 이해하고 갈 필요가 있습니다. 1. What is Enact? Enact란, React를 기반으로 구축된 사용하기 쉽고 성능이 좋으며 사용자 정..

Enact 개발환경 세팅 Template 만들기 Enact만든 app을 webOS 어플리케이션으로 만들어서 설치하기 *이 포스팅은 Enact 홈페이지를 참고하여 작성되었습니다. Enact 개발환경 세팅하기 1. enact cli 설치하기 powershell에서 아래의 명령어로 enact cli를 설치합니다. npm install -g @enact/cli 2. webOS template 설치하기 아래의 명령어로 webOS template을 설치합니다. enact template install @enact/template-webostv Template 만들기 1. webostv 템플릿으로 enact 예제 app만들기 아래의 명령어로 webostv 템플릿을 이용하여 enact 예제 app을 만듭니다. enac..