comfilehmi:webapi:index
차이
문서의 선택한 두 판 사이의 차이를 보여줍니다.
| 양쪽 이전 판 이전 판 다음 판 | 이전 판 | ||
|
comfilehmi:webapi:index [2021/07/26 16:56] Comfile Technology [2) 웹브라우저에서 응답 처리하는 방법 (HTML / javascript / JSON에 대한 이해 필요)] |
comfilehmi:webapi:index [2023/07/26 10:17] Comfile Technology [6) 웹브라우저 주소창에서 사용시 제약 사항] |
||
|---|---|---|---|
| 줄 1: | 줄 1: | ||
| - | ====== Web API (CHC 시리즈/HDM-C070RL & 펌웨어 v3.49 이상 지원)====== | + | ====== Web API (CHC 시리즈 & 펌웨어 v3.49 이상 지원)====== |
| - | Web API 기능은 HTTP 프로토콜을 사용하여 원격으로 HMI(서버 역할)와 통신하면서 여러가지 처리를 할 수 있는 기능입니다. (HMI 제어하기, HMI 변수나 메모리 값 등을 읽어오기, HMI에 있는 파일을 웹브라우저로 다운로드, 실행하기, 웹브라우저에 실시간 동작 UI 구성하기 등) | + | Web API 기능은 HTTP 프로토콜을 사용하여 원격으로 HMI(서버 역할)와 통신하면서 여러가지 처리를 할 수 있는 기능입니다. (HMI 제어하기, //내부 변수//나 //내부 메모리// 값 등을 읽어오기, HMI에 있는 파일을 웹브라우저로 다운로드, 실행하기, 웹브라우저에 실시간 동작 UI 구성하기 등) |
| 기존의 웹브라우저(예: 크롬)를 사용할 수도 있고 다른 HMI가 클라이언트가 되어 사용할 수도 있습니다('액션>HTTP 요청') | 기존의 웹브라우저(예: 크롬)를 사용할 수도 있고 다른 HMI가 클라이언트가 되어 사용할 수도 있습니다('액션>HTTP 요청') | ||
| 줄 29: | 줄 29: | ||
| (1) 'script' | (1) 'script' | ||
| - | HMI의 [액션>스크립트]에서 사용하는 스크립트를 사용합니다. HMI 변수, 문자열 변수, 함수 등을 사용할 수 있으며 세미콜론(';')으로 연결하여 스크립트를 길게 작성할 수 있습니다. | + | HMI의 [액션>스크립트]에서 사용하는 스크립트를 사용합니다. //내부 변수//, //내부 문자열 변수//, 함수 등을 사용할 수 있으며 세미콜론(';')으로 연결하여 스크립트를 길게 작성할 수 있습니다. |
| (2) 'open' | (2) 'open' | ||
| 줄 61: | 줄 61: | ||
| '#' -> '%23' \\ '%' -> '%25' \\ '\' -> '%5C' (파일 경로일 경우 간단하게 '/'로도 치환 가능) | '#' -> '%23' \\ '%' -> '%25' \\ '\' -> '%5C' (파일 경로일 경우 간단하게 '/'로도 치환 가능) | ||
| - | 예1) 192.168.0.20:9138/script/<html></html>/a$="3 나누기 5는 백분율로 60<html><font color="#ff0000">%25</font></html>입니다.";vars_to_json("$a") \\ 예2) 192.168.0.20:9138/open/<html></html>/storage card<html><font color="#ff0000">/</font></html>web_hmi.html \\ 예3) 192.168.0.20:9138/download/<html></html>/storage card<html><font color="#ff0000">/</font>sub<font color="#ff0000">/</font></html>data.bin \\ 예4) 192.168.0.20:9138/script/filenames_to_json("storage card<html><font color="#ff0000">/</font></html>dir") | + | 예1) 192.168.0.20:9138/script/<html></html>/$a="3 나누기 5는 백분율로 60<html><font color="#ff0000">%25</font></html>입니다.";vars_to_json("$a") \\ 예2) 192.168.0.20:9138/open/<html></html>/storage card<html><font color="#ff0000">/</font></html>web_hmi.html \\ 예3) 192.168.0.20:9138/download/<html></html>/storage card<html><font color="#ff0000">/</font>sub<font color="#ff0000">/</font></html>data.bin \\ 예4) 192.168.0.20:9138/script/<html></html>/filenames_to_json("storage card<html><font color="#ff0000">/</font></html>dir") |
| ===== 2. 응답 처리하는 방법 ===== | ===== 2. 응답 처리하는 방법 ===== | ||
| 줄 69: | 줄 69: | ||
| ==== 1) HMI 클라이언트에서 응답 처리하는 방법 ==== | ==== 1) HMI 클라이언트에서 응답 처리하는 방법 ==== | ||
| - | HMI 클라이언트는 들어오는 JSON 응답을 자체적으로 해석할 수 있는 능력이 있으므로 별도로 JSON에 관한 처리를 안하더라도 자동으로 처리됩니다. 원격지 HMI 변수값이나 HMI 메모리값이 JSON 형식으로 수신되면 HMI 클라이언트는 그 내용을 그대로 자신에게 복사합니다.(같은 변수명, 같은 메모리 번지로) \\ | + | HMI 클라이언트는 들어오는 JSON 응답을 자체적으로 해석할 수 있는 능력이 있으므로 별도로 JSON에 관한 처리를 안하더라도 자동으로 처리됩니다. 원격지 //내부 변수//값이나 //내부 메모리//값이 JSON 형식으로 수신되면 HMI 클라이언트는 그 내용을 그대로 자신에게 복사합니다.(같은 변수명, 같은 메모리 번지로) \\ |
| 도착한 JSON 응답이 자동 처리된 후 실행할 사용자 액션을 지정할 수 있습니다. \\ | 도착한 JSON 응답이 자동 처리된 후 실행할 사용자 액션을 지정할 수 있습니다. \\ | ||
| - | JSON 응답에는 변수값이나 메모리값 등의 정보 이외에도 성공했는지 여부, 에러일 경우 에러코드와 에러메시지 정보도 담길 수 있습니다. 가장 최근에 응답 온 JSON 관련해서, 성공여부는 last_json_result() 함수, 에러 코드는 last_json_error_code() 함수, 에러메시지는 last_json_error_message() 함수를 사용하여 알아낼 수 있습니다. \\ | + | JSON 응답에는 변수값이나 메모리값 등의 정보 이외에도 성공했는지 여부, 에러일 경우 에러코드와 에러메시지 정보도 담길 수 있습니다. 가장 최근에 응답 온 JSON 관련해서, 성공여부는 last_json_result() 함수, 에러 코드는 last_json_error_code() 함수, 에러메시지는 last_json_error_message() 함수를 사용하여 알아낼 수 있습니다. 이 함수들에 대한 자세한 설명은 다음 링크를 참고하세요 : [[http://www.comfilewiki.co.kr/ko/doku.php?id=comfilehmi:hmieditor_function:index#web_api_%EA%B4%80%EB%A0%A8_%ED%95%A8%EC%88%98_%EA%B3%A0%EA%B8%89_%EA%B8%B0%EB%8A%A5_chc_hdm-c070rl_%EB%98%90%EB%8A%94_%EA%B7%B8_%EC%83%81%EC%9C%84_%EB%AA%A8%EB%8D%B8%EC%97%90%EC%84%9C%EB%A7%8C_%EC%A7%80%EC%9B%90|WebAPI 관련 함수]] |
| - | 이 함수들에 대한 자세한 설명과 구체적인 전체 에러 코드와 에러 메세지 목록은 시스템 함수 설명 편을 참고하세요. | + | |
| ==== 2) 웹브라우저에서 응답 처리하는 방법 (HTML / javascript / JSON에 대한 이해 필요) ==== | ==== 2) 웹브라우저에서 응답 처리하는 방법 (HTML / javascript / JSON에 대한 이해 필요) ==== | ||
| 줄 78: | 줄 77: | ||
| download나 open 커맨드의 경우 성공할 경우 웹브라우저에 결과 동작이 반영되므로 JSON을 처리하는 문제를 고려할 필요가 없지만, script 커맨드의 경우는 응답이 항상 JSON 형식으로 도착하므로 들어오는 JSON 응답을 처리하려면 해당 처리를 할 수 있는 HTML 소스 코드를 직접 작성해두어야 합니다. 작성된 HTML 소스는 SD카드의 적당한 위치에 위치시키고 open 커맨드를 통해 웹브라우저로 불러옵니다.(HTML 파일은 반드시 원격지 HMI 에 있어야 하며 웹브라우저가 존재하는 로컬 PC에 존재하면 제대로 실행이 안될 수 있음) | download나 open 커맨드의 경우 성공할 경우 웹브라우저에 결과 동작이 반영되므로 JSON을 처리하는 문제를 고려할 필요가 없지만, script 커맨드의 경우는 응답이 항상 JSON 형식으로 도착하므로 들어오는 JSON 응답을 처리하려면 해당 처리를 할 수 있는 HTML 소스 코드를 직접 작성해두어야 합니다. 작성된 HTML 소스는 SD카드의 적당한 위치에 위치시키고 open 커맨드를 통해 웹브라우저로 불러옵니다.(HTML 파일은 반드시 원격지 HMI 에 있어야 하며 웹브라우저가 존재하는 로컬 PC에 존재하면 제대로 실행이 안될 수 있음) | ||
| - | 쉬운 예제) 변수 a 값과 HMI 메모리의 5,6 번지의 값을 원격지에 있는 HMI로부터 받아서 실시간으로 (200ms 주기로) 웹브라우저에 표시합니다. \\ {{ :comfilehmi:webapi:sample1.htm | 쉬운 예제 HTML 파일 다운로드 받기}} | + | 쉬운 예제) 변수 a 값과 HMI 메모리의 5,6 번지의 값을 원격지에 있는 HMI로부터 받아서 실시간으로 (200ms 주기로) 웹브라우저에 표시합니다. \\ {{ :comfilehmi:webapi:sample1.htm | 쉬운 예제 HTML 파일 다운로드 받기}} \\ |
| + | {{:comfilehmi:webapi:sample1.png|}} | ||
| 고급 예제) 웹브라우저의 슬라이더로 원격지 HMI에 있는 변수 a의 값을 쓰고, 다시 그 값을 불러 와서 웹브라우저의 게이지 그래프에 표시하는 예제. 슬라이더의 값이 정한 범위(0~100)를 넘어가면 게이지가 빨간색으로 변합니다. \\ | 고급 예제) 웹브라우저의 슬라이더로 원격지 HMI에 있는 변수 a의 값을 쓰고, 다시 그 값을 불러 와서 웹브라우저의 게이지 그래프에 표시하는 예제. 슬라이더의 값이 정한 범위(0~100)를 넘어가면 게이지가 빨간색으로 변합니다. \\ | ||
| - | {{ :comfilehmi:webapi:sample2.htm | 고급 예제 HTML 파일 다운로드 받기}} | + | {{ :comfilehmi:webapi:sample2.htm | 고급 예제 HTML 파일 다운로드 받기}} \\ |
| + | {{:comfilehmi:webapi:sample2.png|}}{{:comfilehmi:webapi:sample2b.png|}} | ||
| <예제 테스트 절차> \\ | <예제 테스트 절차> \\ | ||
| 1. 다운로드 받은 sample1.htm 또는 sample2.htm 파일을 HMI의 storage card 폴더 밑에 복사한다.(SD카드의 루트 폴더) \\ | 1. 다운로드 받은 sample1.htm 또는 sample2.htm 파일을 HMI의 storage card 폴더 밑에 복사한다.(SD카드의 루트 폴더) \\ | ||
| - | 복사하기 전에, htm 소스 코드 내부에 원격 IP 주소 설정하는 부분 중 서버 주소/포트 번호를 환경에 맞게 변경해줘야 한다.('192.168.0.99:9138'이라고 되어 있는 부분) \\ | + | 복사하기 전에, htm 소스 코드 내부에 원격 IP 주소 설정하는 부분 중 '서버 주소:포트 번호'를 환경에 맞게 변경해줘야 한다.('192.168.0.99:9138'이라고 되어 있는 부분) \\ |
| 2. HMI의 런타임 [설정>서버>원격 제어 서버 구동]에 체크하고 네트워크탭을 해당 환경에 맞게 설정해준다. \\ | 2. HMI의 런타임 [설정>서버>원격 제어 서버 구동]에 체크하고 네트워크탭을 해당 환경에 맞게 설정해준다. \\ | ||
| - | 3. 웹브라우저를 실행하고 주소창에 다음과 같이 입력한다. \\ | + | 3. 웹브라우저를 실행하고 주소창에 URL을 입력한다. \\ |
| - | 192.168.0.99:9138/open/<html></html>/storage card/sample1.htm (서버 주소가 192.168.0.99이고 포트번호가 기본 포트 번호인 9138일 경우) | + | 예) 192.168.0.99:9138/open/<html></html>/storage card/sample1.htm (서버 주소가 192.168.0.99이고 포트번호가 기본 포트 번호인 9138이고 설정된 비밀번호가 없는 경우) |
| + | ===== 3. JSON 응답 형식 ===== | ||
| + | |||
| + | ^ 필드명 ^ 타입 | 내용 | | ||
| + | | success | boolean | 성공 여부. true이면 성공. false이면 실패 | | ||
| + | | vars.{내부 변수명} | number | vars_to_json() 함수로 요청한 원격지 //내부 변수//의 값. | | ||
| + | | vars.{내부 문자열 변수명} | string | vars_to_json() 함수로 요청한 원격지 //내부 문자열 변수//의 값. \\ //내부 문자열 변수//명은 '$'로 시작함. | | ||
| + | | mem.{내부 메모리 시작 번지} | array | mem_to_json() 함수로 요청한 원격지 내부 메모리의 주소 연속적인 값들 | | ||
| + | | error.code | number | 오류 코드 | | ||
| + | | error.message | string | 오류 메세지. 언어는 프로젝트 기본 언어 설정에 따라 | | ||
| + | | filenames | array | filenames_to_json() 함수로 요청한 원격지 HMI 특정 폴더 내의 파일명 목록 | | ||
| + | | dirnames | array | dirnames_to_json() 함수로 요청한 원격지 HMI 특정 폴더 내의 폴더명 목록 | | ||
| + | |||
| + | <code> | ||
| + | 예1) 성공했을 경우 | ||
| + | { | ||
| + | "success": true, | ||
| + | "vars": { | ||
| + | "temperature" : 16.7, | ||
| + | "$city" : "Seoul" | ||
| + | }, | ||
| + | "mem" : { | ||
| + | "20" : [31,43,21] | ||
| + | } | ||
| + | } | ||
| + | |||
| + | 예2) 실패했을 경우 | ||
| + | { | ||
| + | "success" : false, | ||
| + | "error" : { | ||
| + | "code" : 4011, | ||
| + | "message" : "Command syntax error." | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | |||
| + | Web API 에러 코드와 에러 메세지 | ||
| + | |||
| + | ^ 오류 코드 ^ 오류 메세지 ^ | ||
| + | | 8047 | 응답받은 JSON의 형식이 잘못되었습니다. | | ||
| + | | 4011 | 커맨드의 구문 오류입니다. 다음과 같이 사용하세요 : 서버 주소:포트번호/커맨드명/비밀번호/커맨드 내용 | | ||
| + | | 4010 | 알 수 없는 커맨드입니다. | | ||
| + | | 3010 | Web API 실행을 지원하지 않는 기기입니다. 지원되는 기기 예: CHC, HDM-C070RL | | ||
| + | | 3009 | 현재 프로젝트 실행 모드가 아닌 HMI 기기에 접속을 시도했습니다. | | ||
| + | | 3012 | 원격제어 비밀번호가 맞지 않습니다. | | ||
| + | | 3013 | 스크립트의 구문 오류입니다. | | ||
| + | |||
| + | [[comfilehmi:index|ComfileHMI]] | ||
comfilehmi/webapi/index.txt · 마지막으로 수정됨: 2023/07/26 10:17 저자 Comfile Technology