X-SCADA AI의 웹뷰2(WebView2) 객체를 이용하여 웹 페이지를 X-SCADA AI 프로젝트에 삽입할 수 있습니다.

웹뷰2 객체를 이용하여 HTML 웹 페이지를 프로젝트에 불러와보겠습니다.

불러올 HTML 파일은 X-SCADA AI에 기본 내장된 파일 서버(File Server)를 이용해 호스팅할 예정입니다.

X-SCADA AI 기본 기능만으로 HTML 웹 페이지를 프로젝트에 임베드해보겠습니다.

1. 호스팅할 HTML 만들기

1) X-SCADA AI 프로젝트에 임베드할 HTML을 제작한다.

2) 해당 게시글에서는 지도 서비스와 3D 뷰어를 임베드할 예정이기에 2개의 HTML을 생성한다. (첨부 파일 참고)

· 사용한 API > 지도 관련 : https://www.openstreetmap.org/

· 사용한 API > 3D 관련 : https://modelviewer.dev/

2. 파일 서버(File Server) 설정하기

1) 파일 서버를 실행한다. (기본 위치 : C:\Xisom\X-SCADA\FileServer)

· X-SCADA AI Designer > 도구(Tools) > 파일 서버(File Server) 메뉴에서 실행하는 것도 가능하다. 

2) 파일 서버 프로그램에서 [서버 시작(Start Server)]을 클릭한다.

· 파일 서버에 대한 자세한 사용방법은 FUNCTIONS > Designer > 파일 서버(File Server) 추가 게시글(클릭시 이동)에서 확인 가능하다.

3) 웹 브라우저로 파일 서버에 접속한 뒤 생성한 HTML 파일이 있는 폴더로 이동한다.

· 웹 브라우저 주소창에 localhost:8081 을 입력하면 접속 가능하다.

4) 미리보기()를 클릭하여 HTML 파일을 실행한다.

5) 실행된 HTML 페이지의 주소를 복사한다.

3. X-SCADA AI 설정 및 실행하기

1) X-SCADA AI Designer에서 웹뷰2(WebView2) 객체를 추가한다.

2) 웹뷰2 객체 선택 후 속성 > 웹뷰2 > URL 항목에 복사한 HTML 주소를 입력한다.

3) 프로젝트 저장 후 X-SCADA AI Viewer로 실행한 뒤 정상적으로 HTML 페이지를 불러오는지 확인한다.

4) 웹뷰2 객체를 웹브라우저에서 보는 것처럼 조작하면 이상없이 동작하는 것을 확인할 수 있다.