open hab&webapp.net
TRANSCRIPT
![Page 1: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/1.jpg)
openHAB & webapp
이태영
![Page 2: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/2.jpg)
Story
발단 전개 위기 절정
결 말
![Page 3: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/3.jpg)
발단
https://www.facebook.com/groups/openHAB
![Page 4: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/4.jpg)
전개
![Page 5: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/5.jpg)
전개
![Page 6: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/6.jpg)
전개
http://www.w3.org/2011/02/mobile-web-app-state.html
![Page 7: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/7.jpg)
전개
![Page 8: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/8.jpg)
전개
![Page 9: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/9.jpg)
User Interface○ Overview openHAB 와 연결되있는 다른 technology 와 device 들이 서로 연계될 때 동일한 형태의 UI 를 제공 (Home Automation system 또는 다른 컴포넌트 타입에 종속되지 않음 )
○ Classic UI- Classic UI 는 WebApp.net 기반 Framework 을 기반으로 한 Web Interface 로 어떠한 web browser 를 통해 접속 가능하다 .- WebApp.net 는 순수 HTML5/JS 솔루션이지만 , iPhone App 와 비슷하고 , Touch 기능에 최적화 되어있다 . 이것은 iPhone/iPad 뿐만이 아니라 Android 에도 완벽하게 동작하며 , 심지어 Symbian 과 Blackberry 도 지원한다 .
○ WebApp.net- iPhone 용 웹어플리케이션을 만들 때 사용할 수 있는 오픈소스로 Mac 의 CoCoa 에서도 포함된 WebKit 라이브러리를 기반으로 만들어 졌음 . Google 의 안드로이드도 WebKit 을 기반으로 지원하기 때문에 WebApp.net 을 사용하면 Android 에서도 사용할 수 있다 .
![Page 10: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/10.jpg)
위기
http://demo.openhab.org:8080/openhab.app?sitemap=demo
![Page 11: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/11.jpg)
절정
http://webapp.net.free.fr/Demo/Index.html
![Page 12: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/12.jpg)
● Browser 엔진 성능 특성 이해한 개발 필수
● 성능 관련 Practice 요약 ○ DOM 및 Render Tree 의 복잡도 관리
■ DOM, Render Tree 의 생성 및 삭제 원리 이해 ○ CSS 2D/3D 기반 GPU 가속 Rendering 효율적 활용
■ Animation 단위 === RenderLayer/Graphics Layer 단위 ○ 우선 순위가 높은 연산이 먼저 처리되도록 통제
■ UI animation 을 부드럽게 하기 위해 painting/network loading 미루기 ○ DOM inspector 를 활용한 profiling
■ timeline, CPU, heap memory 분석
![Page 13: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/13.jpg)
절정
Browser Engine Overview
![Page 15: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/15.jpg)
● Parsing 하면서 내부 Tree 생성 ○ DOM, Render, RenderLayer, GraphicsLayer(GPU)
![Page 16: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/16.jpg)
절정
https://github.com/openhab/openhab/tree/master/bundles/ui/org.openhab.ui.webapp
![Page 17: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/17.jpg)
절정
Webkit Main Flow
![Page 18: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/18.jpg)
결 말
![Page 19: Open hab&webapp.net](https://reader034.vdocuments.mx/reader034/viewer/2022052413/55a060101a28ab462e8b4719/html5/thumbnails/19.jpg)
Q & A