wemx WebService V1.0

Transcription

1 wemx WebService

2 2 wemx WebService WEMX WEBSERVICE WEB SERVICE INTRODUCTION SYSTEM PAGE USER PAGE WEB SERVICE API SYSTEM PAGE PROVIDED BY THE WEB SERVICE SYSTEM PAGE EXAMPLE SETTING THE WEB SERVER CONNECTING TO/USING THE SYSTEM PAGE SYSTEM PAGE COMPOSITION SETTINGS FOR USING AUTHORIZATION FEATURES MAKING AN USER PAGE WITH WEB SERVICE API USING WEB SERVICE API WITH JAVASCRIPT CREATING A REQUEST OBJECT SENDING REQUESTS PROCESSING RESPONSES WEB SERVICE API ADDRESS READING SINGLE ADDRESS READING INDEX.HTML HMX PROJECT Installing wemx Designer and creating a screen WRITING INDEX.HTML HTML JavaScript CONSECUTIVE ADDRESS READING INDEX.HTML... 30

3 wemx WebService HMX PROJECT Installing wemx Designer and creating a screen WRITING INDEX.HTML HTML CONFIGURING USER PAGE SETTINGS WEB SERVICE API ADDRESS WRITING SINGLE ADDRESS WRITING INDEX.HTML HMX PROJECT Installing wemx Designer and creating a screen 설치및화면만들기 WRITING INDEX.HTML HTML JavaScript CONSECUTIVE ADDRESS WRITING INDEX.HTML HMX PROJECT Installing wemx Designer and creating a screen WRITING INDEX.HTML HTML JavaScript CONFIGURING USER PAGE SETTINGS WEB SERVICE API READING/WRITING MULTIPLE ADDRESSES AT ONCE INDEX.HTML HMX PROJECT INSTALLING WEMX DESIGNER AND CREATING A SCREEN WRITING INDEX.HTML HTML JAVASCRIPT Multiple Address Handling Example Requesting Response... 56

4 4 wemx WebService 7.4. CONFIGURING USER PAGE SETTINGS WEB SERVICE API READING ALARMS INDEX.HTML HMX PROJECT INSTALLING WEMX DESIGNER AND CREATING A SCREEN WRITING INDEX.HTML HTML JAVA SCRIPT Initializing Terminating Example of Reading (Paging) History Alarms Requesting Response CONFIGURING USER PAGE SETTINGS WEB SERVICE API ALARM CHECK/DELETE INDEX.HTML HMX PROJECT INSTALLING WEMX DESIGNER AND CREATING A SCREEN WRITING INDEX.HTML HTML JAVA SCRIPT Example of checking all History Alarms Example of deleting all History Alarms Requesting for Alarm Checks Requesting for Alarm Deletes CONFIGURING USER PAGE SETTINGS WEB SERVICE API AUTHORIZATION INDEX.HTML HMX PROJECT... 81

5 wemx WebService INSTALLING WEMX DESIGNER AND CREATING A SCREEN WRITING INDEX.HTML HTML JAVA SCRIPT Log-in Example Log-out Example CONFIGURING USER PAGE SETTINGS... 85

6 6 wemx WebService 1. WEB SERVICE INTRODUCTION wemxplayercontains a web server by default. The Web Service allows monitoring and controlling of wemx Player s data through various web browsers. In order to use our Web Service, devices with wemx Players installed must be configured with an IP address. wemx is largely composed ofsystem Page and User Page to provide the Web Service 1.1. System Page The System Page is a webpage provided by wemx Player by default. Users can manage& monitor addresses of devicesthat are connected to the wemx Player, and control & monitoralarms.

7 wemx WebService User Page User Page s UI can be customized according to various requests and tastes through HTML, CSS, JS, Image, and JSON to replacethe System Page. The page provides Web Service API to allow it to be synced with wemx Player. By utilizing these APIs, users can monitor/control specific address, or check alarms. Users can also monitor/control all addresses used by HMX Projects, and check occurring alarms in real-time.

8 8 wemx WebService 1.3. Web Service API Through the webpage, wemx provides a variety of Web Service APIs in order to allow users to monitor/control addresses from HMX Projects. The Web Service API utilizes RESTFul API method, and uses GET, PUT, POST, and DELETE methods to send requests, and receiveresponses through JSON. API can be largely divided into Account, Address, Alarm.Their functions are as follows: - Account: Log-in/out function - Address: Address read/write function - Alarm: Alarm list view/delete function More details on APIs can be found in the wemx-webservice-api document.

9 wemx WebService 9 2. SYSTEM PAGE PROVIDED BY THE WEB SERVICE We will now look into how to use the System Page, which is provided by wemx by default. The System Page provides monitoring/controlling functionalities for addresses and alarms. These features are provided by default, and anyone can use them after understanding the basics System Page Example Let s learn how to use the System Page by looking at an example (Modbus). A simple HMX Project is prepared to use the Web Service.

10 10 wemx WebService Setting the web server In [Project] [System Settings] [Screen], select [Web Server] tab to configure necessary settings for using the Web Service. In settings, using of Web Server is disabled by default. Enable Use Web Server to use the Web Service. Default Web Page settingsare divided into System Page setting, and User Page Setting.

11 wemx WebService 11 In order to configure the System Page, select the Default Web Page to be System Page. In order to configure the User Page, Select the Default Web Page to be User page. By clicking Import, you can import previously created User Page files (HTML, CSS, JS, Image, etc.) to HMX Projects. The Connect Port is set to 80 by default. In order to target Android devices, you cannot use Well-Known Ports. Please check the list of ports usable by Android systems. In this example, we will use port 8080, or 8081, in case an error occurs. Thread Count is set to 4 as default. Users can set any value between 1~8. Use SSL will be available in the near future.

12 12 wemx WebService Connecting to/using the System Page 1. Configure necessary settings to connect with anandroid Device. Use pymodslaveqt that simulates Modbus Slavewith external devices 2. Check the IP information of devices (PC, etc.) using wemx Player, and run the Player. 3. Open a web browser and type in the IP address. 4. On the left menu, go to [Address] [Monitor]. [Monitor] page contains features for monitoring specific Addresses. 5. Enter an address you wish to monitor in the Address section. We typed in [PLC1] in the example. 6. Set Data Type to the type of address you wish to monitor. We selected Bit in the example. 7. Click the Get button to start monitoring. 8. On the left menu, go to [Address] [Control]. [Control] page contains features for setting necessary values for specific addresses. 9. Enter an address you wish to change the value of in the Address section. We typed in [PLC1] in the example. 10. Set Data Type to the type of address you wish to change. We selected Integer 16bit in the example.

13 wemx WebService Type in the value you would like to set on the Value section. We typed in 77 in the example. 12. Click the Set button and the value of address will be changed.

14 14 wemx WebService System Page Composition Next is about wemx System Page composition. [Address] [Monitor] Address Data Type Count Refresh Type in the address you wish to monitor. Ex) [DISPLAY]USR00000, [PLC1]D00001, [PLC1]P0001 Set the data type of address you wish to monitor. Supported type: Bit, Integer 16bit, Integer 32bit, Unsigned Integer 16bit, Unsigned Integer 32bit, Text(UTF-8) Type in the number of values you wish to import that are within the data type of entered addresses starting number In case of Text types, count must be specified. In this case, count is considered a byte count. Set the monitoring cycle (seconds)

15 wemx WebService 15 [Address] [Control] Address Data Type Value Type in the address you wish to change. Ex) [DISPLAY]USR00000, [PLC1]D00001, [PLC1]P0001 Set the data type of address you wish to change. Supported type: Bit, Integer 16bit, Integer 32bit, Unsigned Integer 16bit, Unsigned Integer 32bit, Text(UTF-8) Type in the value you wish to change into.

16 16 wemx WebService [Alarm] Block No. Type Column Row Set the block number which was set in the alarm setting. Set the type of alarm you wish to monitor. Selectable type: History, Log, Active Select the alarm category you wish to display when monitoring. Set the number of alarms that are displayed in a single page. Page number will increase if the number of alarms exceeds the set amount.

17 wemx WebService Settings for Using Authorization Features You can use authorization featureswhen using the System Page. Go to [Project] [Common Settings] [Security]-[Password] and enable Use Security, and ID Setting, and set the ID and Password. After the above process, you will be directed to a log-in page when connecting to the webpage.

18 18 wemx WebService 3. MAKING AN USER PAGE WITH WEB SERVICE API User Page is a utilization of web servers provided by wemx Player after importing a user-made webpage. File formats such as HTML, CSS, JS, and Image are supported. The System Page simply uses preset structure to allow users to monitor/control specific addresses and check alarms, but the User Page allows users to configure the UI according to their tastes, monitor/control all addresses being used by HMX Projects, and check occurring alarms in real-time. In this section, we will look into how to configure a simple HMX Project and a webpage. 1. Install wemx Designer 2. Refer to Making a simple screen to create a project and add numeric display and string one by one.

19 wemx WebService 19 In the Numeric Display section, set the address to use [DISPLAY]USR Create an index.html file to convert the above HMX Project into a webpage. <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>wemx Web Service Demo</title> </head> <body> <form> <table> <tr> <td>id_value:</td> <td id="id_value" width="125"> </td> <td> <input type="button" onclick="getdata()" width="50" value="get"> </td> </tr> </table> </form> </body> </html> You can use HTML to create a display like above, and add some touches with tools such as CSS. HTML examples from now on will add necessary lines on to the above format.

20 20 wemx WebService 4. USING WEB SERVICE API WITH JAVASCRIPT You can utilize a variety of methods when using wemx s Web Service API. Examples on Web Service User Page use an asynchronous method called AJAX to send requests and receive results. On this section, we will look into how AJAX work by using an example. AJAX is an acronym for Asynchronous JavaScript and XML. Which is an asynchronous communication method that uses JavaScript and XML. In recent years, JSON is mostly used instead of XML. The process of using AJAX for communication is as follows: 1. Create an object for a request. 2. Use JavaScript to make requests with the created object. 3. Send the request 4. Receive a result and process it through JavaScript. Most of our examples use the following structure. <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>wemx Web Service Demo</title> </head> <body> <script type="text/javascript"> function getdata() { var xmlhttp = null; if (window.activexobject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e1) { alert('giving up :( Cannot create an XMLHTTP instance'); return; else if (window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); if (xmlhttp == null) { return; var url = " + window.location.host + "/feeds/address"

21 wemx WebService 21 xmlhttp.open("get", url, true); + "?displayname=[display]usr00001" + "&type=uint16"; xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { document.getelementbyid("id_value").innerhtml = decodeuricomponent(json["value"]); xmlhttp.send(); </script> <form> <table> <tr> <td>value:</td> <td id="id_value" width="125"> </td> <td> <input type="button" onclick="getdata()" width="50" value="get"> </td> </tr> </table> </form> </body> </html> Now, in the order of what was mentioned above, let s understand the process of AJAX step-by-step.

22 22 wemx WebService 4.1. Creating a Request Object In order to use AJAX, you must first create an object according to the web browser that uses XMLHttpRequest. var xmlhttp = null; if (window.activexobject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e1) { alert('giving up :( Cannot create an XMLHTTP instance'); return; else if (window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); if (xmlhttp == null) { return; In case of Internet Explorer, ActiveXObjects must be used to create XMLHttpRequest, and other browsers can create with XMLHttpRequest.

23 wemx WebService Sending Requests Use the created xmlhttp object and open() function to send a request. xmlhttp.open("get", url, true); In the example, we used a GET as a first variable of open() function. This variable defines the request sending method. GET, PUT, POST, and DELETE can be used. For the second variable, input the address you wish to send the request to. For the third variable, define whether to use synchronistic (true), or asynchronistic (false) method. After above process is finished, use the send() function to send the request. xmlhttp.send(); In case of POST, send() function sends a parameter in order to send the formed data. In cases such as GET, PUT, DELETE that sendsparameters to addresses, parametersare not sent. In order to send the parameter, the data is converted to JSON before being sent. var request = []; var readjob1 = {; readjob1["job"] = "read"; readjob1["displayname"] = "[DISPLAY]USR00001"; readjob1["type"] = "uint16"; readjob1["count"] = 1; request[0] = readjob1; var json = {; json["jobs"] = request; xmlhttp.send(json.stringify(json)); With above code, JSON can be created as following: { "jobs": [ { ], "job": "read", "displayname": "[DISPLAY]USR00001", "type": "uint16", "count": 1

24 24 wemx WebService 4.3. Processing Responses In order to process responses after requests are sent with send() function, the process must take placein the moment the status of request object changes. For this to happen, request object defines a JavaScript function through onreadystatechange. xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { document.getelementbyid("id_value").innerhtml = decodeuricomponent(json["value"]); The process happens when the value of readystate reaches 4. The state can have total of 5 values. 0: Before connection 1: Connected 2: Response standby status 3: Receiving response 4: Received After the point 4: Received, received JSON data will go through a syntax analysis, and the result will be displayed var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { document.getelementbyid("id_value").innerhtml = decodeuricomponent(json["value"]);

25 wemx WebService WEB SERVICE API ADDRESS READING By using address readingapi, wemx Player s address can be read. There are 2 types of address reading. Single address reading, and consecutive address reading Single Address Reading On the example below, you can check the entered value on the datadisplay ([DISPLAY]USR00001) by connecting to the webpage through the Web Service API.

26 26 wemx WebService Index.html <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>wemx Web Service Demo</title> </head> <body> <script type="text/javascript"> function getdata() { var xmlhttp = null; if (window.activexobject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e1) { alert('giving up :( Cannot create an XMLHTTP instance'); return; else if (window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); if (xmlhttp == null) { return; var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00001" + "&type=uint16"; xmlhttp.open("get", url, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { document.getelementbyid("id_value").innerhtml = decodeuricomponent(json["value"]); xmlhttp.send(); </script> <form> <table> <tr> <td>id_value:</td> <td id="id_value" width="125"> </td> <td> <input type="button" onclick="getdata()" width="50" value="get"> </td> </tr>

27 wemx WebService 27 </table> </form> </body> </html> HMX Project Installing wemx Designer and creating a screen Install wemx Designerto use the web service. Refer to Making a Simplescreen to create a project and add a numeric display and string one by one. In the Numeric Display section, set the address to use [DISPLAY]USR Writing index.html On requesting with JavaScript and processing the response data (JSON), refer to information below HTML <form> <table> <tr> <td>id_value:</td> <td id="id_value" width="125"> </td> <td> <input type="button" onclick="getdata()" width="50" value="get"> </td> </tr> </table> </form>

28 28 wemx WebService If an input button is clicked within HTML, getdata() JavaScript is called to assign the value received from the set address in place of id in id_value JavaScript Single Address Reading Example Method Example GET [Request] [Response] HTTP/ OK Content-Type: application/json; charset=utf-8; Keep-Alive: timeout=5, max=100 { "version": "1.0", "value": 999 This is an example of reading a single address. On detailed information on address API, you can refer to wemx- WebService-API document. All User Page examples contain codes for requestingurl and processing the received data (JSON) Request var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00001" + "&type=uint16"; xmlhttp.open("get", url, true); Click the Get button on the webpage to request for the addresses value. Define the address that will be read as API s parameter as displayname. Type can be set to bit, int16, int32, uint16, uint32, or text. In case of text, count parameter must be added to input the number of bytes.in case of text, only UTF-8 encoding is supported Response xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) {

29 wemx WebService 29 decodeuricomponent(json["value"]); document.getelementbyid("id_value").innerhtml = Within HTML, assign the received address value (json[ value ])to theplace of id in id_value. When strings are received, use decodeuricomponent() function to decode & properly display the data.

30 30 wemx WebService 5.2. Consecutive Address Reading On the example below, values entered to data display([display]usr00001 ~ [DISPLAY]USR00003) are displayed in the webpage through the Web Service API Index.html <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>wemx Web Service Demo</title> </head> <body> <script type="text/javascript"> function getdata() { var xmlhttp = null; if (window.activexobject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e1) { alert('giving up :( Cannot create an XMLHTTP instance'); return;

31 wemx WebService 31 else if (window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); if (xmlhttp == null) { return; var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00001" + "&type=uint16" + "&count=3"; xmlhttp.open("get", url, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { var values = json["values"] document.getelementbyid("id_value1").innerhtml = decodeuricomponent(values[0]); document.getelementbyid("id_value2").innerhtml = decodeuricomponent(values[1]); document.getelementbyid("id_value3").innerhtml = decodeuricomponent(values[2]); xmlhttp.send(); </script> <form> <table> <tr><td>id_value1:</td> <td id="id_value1" width="125"> </td></tr> <tr><td>id_value2:</td> <td id="id_value2" width="125"> </td></tr> <tr><td>id_value3:</td> <td id="id_value3" width="125"> </td></tr> <tr> <td><input type="button" onclick="getdata()" width="50" value="get"> </td> </tr> </table> </form> </body> </html> HMX Project Installing wemx Designer and creating a screen Install wemx Designerto use the web service.

32 32 wemx WebService Refer to Making a SimpleScreento create a project and add 3 numeric displays and 3 strings. Starting from the first numeric display, set the address to use ([DISPLAY]USR00001 ~ [DISPLAY]USR00003) in the correct order Writing index.html On requesting with JavaScript and processing the response data (JSON), refer to information below HTML <form> <table> <tr><td>id_value1:</td> <td id="id_value1" width="125"> </td></tr> <tr><td> id_value2:</td> <td id="id_value2" width="125"> </td></tr> <tr><td> id_value3:</td> <td id="id_value3" width="125"> </td></tr> <tr> <td><input type="button" onclick="getdata()" width="50" value="get"> </td> </tr> </table> </form> If an input button is clicked within HTML, getdata() JavaScript is called to assign the values received from the set address in place of id in id_value1, id_value2, id_value3.

33 wemx WebService 33 JavaScript Consecutive Address Reading Example Method Example GET [Request] [Response] HTTP/ OK Content-Type: application/json; charset=utf-8; { "version": "1.0", "displayname": "[DISPLAY]USR ", "type": "bit", "count": 3, "values": [999, 888, 777] This is an example of consecutive address reading. On detailed information on address API, you can refer to wemx-webservice-api document. All User Page examples contain codes for requesting URL and processing the received data (JSON) Request var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00001" + "&type=uint16" + "&count=3"; xmlhttp.open("get", url, true); Click the Get button on the webpage to request for the addresses value. Define the address that will be read as API s parameter as displayname. Type can be set to bit, int16, int32, uint16, uint32, or text. In case of count parameter, enter the number of addresses that will be consecutively read Response xmlhttp.onreadystatechange = function () {

34 34 wemx WebService if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { var values = json["values"] document.getelementbyid("id_value1").innerhtml = decodeuricomponent(values[0]); document.getelementbyid("id_value2").innerhtml = decodeuricomponent(values[1]); document.getelementbyid("id_value3").innerhtml = decodeuricomponent(values[2]); Within HTML, assign the received address value (var values = json[ value ]) to theplace of id in id_value1, id_value2, and id_value3. When strings are received, use decodeuricomponent() function to decode & properly display the data.

35 wemx WebService Configuring User Page Settings In order to upload the completed webpage to the web server, you have to configure theweb Server Settings in wemx Designer.Type in the IP address and Port to the webpage s address bar to use User Webpage.

36 36 wemx WebService 6. WEB SERVICE API ADDRESS WRITING By using addresswriting API, wemx Player s address can be written. There are 2 types of address writing. Single address writing, and consecutive address writing Single Address Writing On the example below, you can check the written value on the datadisplay ([DISPLAY]USR00001, [DISPLAY]USR00002) by connecting to the webpage through the Web Service API Index.html <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>wemx Web Service Demo</title> </head> <body> <script type="text/javascript"> function setdata() { var xmlhttp = null; if (window.activexobject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP");

37 wemx WebService 37 catch(e1) { alert('giving up :( Cannot create an XMLHTTP instance'); return; else if (window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); if (xmlhttp == null) { return; var value = document.getelementbyid("id_value1").value; var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00001" + "&type=uint16" + "&value=" + value; //+ "&quite=true"; xmlhttp.open("put", url, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { document.getelementbyid("id_value1").innerhtml = decodeuricomponent(json["value"]); xmlhttp.send(); function settext() { var xmlhttp = null; if (window.activexobject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e1) { alert('giving up :( Cannot create an XMLHTTP instance'); return; else if (window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); if (xmlhttp == null) { return; var value = document.getelementbyid("id_value2").value; var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00002" + "&type=text";

38 38 wemx WebService xmlhttp.open("put", url, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { document.getelementbyid("id_value2").innerhtml = decodeuricomponent(json["value"]); var job = {; job["value"] = value; job["count"] = 10; xmlhttp.send(json.stringify(job)); </script> <form> <table> <tr> <td>value:</td> <td width="125"><input id="id_value1" type="number"></input></td> <td> <input type="button" onclick="setdata()" width="50" value="set"> </td> </tr> <tr> <td>value:</td> <td width="125"><input id="id_value2" type="text"></input></td> <td> <input type="button" onclick="settext()" width="50" value="set"> </td> </tr> </table> </form> </body> </html> HMX Project Installing wemx Designer and creating a screen 설치및화면만들기 Install wemx Designerto use the web service. one. Refer to Making a SimpleScreento create a project and add a numeric display, a string display and a string one by

39 wemx WebService 39 In the firstnumeric Display section, set the address to use ([DISPLAY]USR00001) In the second String Display section, set the address to use ([DISPLAY]USR00002)and the number of bytes (15) Writing index.html On requesting with JavaScript and processing the response data (JSON), refer to information below HTML <form> <table> <tr> <td>value:</td> <td width="125"><input id="id_value1" type="number"></input></td> <td> <input type="button" onclick="setdata()" width="50" value="set"> </td> </tr> <tr> <td>value:</td> <td width="125"><input id="id_value2" type="text"></input></td> <td>

40 40 wemx WebService <input type="button" onclick="settext()" width="50" value="set"> </td> </tr> </table> </form> If the input button is clicked within HTML, setdata() JavaScript is called to write the assigned value from the address, and received value will be written in the place of id in id_value. After that, if the input button on below is clicked, settext() JavaScript is called to write the assigned value from the address, and received value will be written in the place of id in id_value JavaScript Single Address Writing Example Metho d Exampl e PUT [Request] e=true [Response] HTTP/ OK Content-Type: application/json; charset=utf-8; { "version": "1.0", "displayname": "[DISPLAY]USR00001", "type": "uint16", "count": 1, "value": 333 This is an example of single address writing. On detailed information on address API, you can refer to wemx- WebService-API document. All User Page examples contain codes for requesting URL and processing the received data (JSON) Request var value = document.getelementbyid("id_value1").value;

41 wemx WebService 41 var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00001" + "&type=uint16" + "&value=" + value; //+ "&quite=true"; xmlhttp.open("put", url, true); Click the Set button on the webpage to request the address for writing a value. In case of strings, the intended string and address must be converted to JSON, and sent with the request. Click the second Set button on the webpage to request the address for writing strings. var value = document.getelementbyid("id_value2").value; var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00002" + "&type=text"; xmlhttp.open("put", url, true); Create JSON like below to send it with the request. var job = {; job["value"] = value; job["count"] = 10; xmlhttp.send(json.stringify(job)); Define the address that will be recognized as API s parameter as displayname. Type can be set to bit, int16, int32, uint16, uint32, or text. In case of text, count parameter must be added to input the number of bytes.in case of text, only UTF-8 encoding is supported. Also, if the value of quite is set to true, only successfully written result values will be received Response xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { document.getelementbyid("id_value1").innerhtml = decodeuricomponent(json["value"]); Within HTML, assign the received address value ( json[ value ]) to theplace of id in id_value1. When strings are received, use decodeuricomponent() function to decode & properly display the data.

42 42 wemx WebService 6.2. Consecutive Address Writing On the example below, the data display([display]usr00001 ~ [DISPLAY]USR00003) displays written valuesin the webpage through the Web Service API Index.html <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>wemx Web Service Demo</title> </head> <body> <script type="text/javascript"> function setdata() { var xmlhttp = null; if (window.activexobject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e1) { alert('giving up :( Cannot create an XMLHTTP instance'); return;

43 wemx WebService 43 else if (window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); if (xmlhttp == null) { return; var url = " + window.location.host + "/feeds/address" + "?displayname=[display]usr00001" + "&type=uint16" + "&count=3" + "&values=[" + document.getelementbyid("id_value1").value + "," + document.getelementbyid("id_value2").value + "," + document.getelementbyid("id_value3").value + "]"; xmlhttp.open("put", url, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); console.log(json); if (json!= undefined && json["error"] == undefined) { var values = json["values"] console.log(values[0]) document.getelementbyid("id_value1").innerhtml = decodeuricomponent(values[0]); document.getelementbyid("id_value2").innerhtml = decodeuricomponent(values[1]); document.getelementbyid("id_value3").innerhtml = decodeuricomponent(values[2]); xmlhttp.send(); </script> <form> <table> <tr><td>id_value1:</td> <td width="125"><input id="id_value1" type="number"></input></td></tr> <tr><td>id_value2:</td> <td width="125"><input id="id_value2" type="number"></input></td></tr> <tr><td>id_value3:</td> <td width="125"><input id="id_value3" type="number"></input></td></tr> <tr> <td><input type="button" onclick="setdata()" width="50" value="set"> </td> </tr> </table> </form> </body> </html>

44 44 wemx WebService HMX Project Installing wemx Designer and creating a screen Install wemx Designerto use the web service. Refer to Making a SimpleScreen to create a project and add 3 numeric displays and 3 strings. Starting from the first numeric display, set the address to use ([DISPLAY]USR00001 ~ [DISPLAY]USR00003) in the correct order Writing index.html On requesting with JavaScript and processing the response data (JSON), refer to information below HTML <form> <table> <tr><td>id_value1:</td> <td id="id_value1" width="125"> </td></tr> <tr><td>id_value1:</td> <td id="id_value2" width="125"> </td></tr>

45 wemx WebService 45 <tr><td>id_value3:</td> <td id="id_value3" width="125"> </td></tr> <tr> <td><input type="button" onclick="setdata()" width="50" value="get"> </td> </tr> </table> </form> If an input button is clicked within HTML, setdata() JavaScript is called to write received values to the set addresses webpage, and assign the received values in place of id in id_value1, id_value2, id_value JavaScript Consecutive Address Writing Example Metho d Exampl e PUT [Request] =[555,666,888] [Response] HTTP/ OK Content-Type: application/json; charset=utf-8; { "version": "1.0", "displayname": "[DISPLAY]USR00000", "count": 3, "values": [555, 666, 888] This is an example of consecutive address writing. On detailed information on address API, you can refer to wemx-webservice-api document. All User Page examples contain codes for requesting URL and processing the received data (JSON) Request var url = " + window.location.host + "/feeds/address"

46 46 wemx WebService xmlhttp.open("put", url, true); + "?displayname=[display]usr00001" + "&type=uint16" + "&count=3" + "&values=[" + document.getelementbyid("id_value1").value + "," + document.getelementbyid("id_value2").value + "," + document.getelementbyid("id_value3").value + "]"; Click the Set button on the webpage to request for the addresses values to be written. With above method, write values on consecutive addresses. Define the address that will be read as API s parameter as displayname. Type can be set to bit, int16, int32, uint16, uint32, or text. In case of count parameter, enter the number of addresses that will be consecutively read. Place the values between [, and ] to list them Response xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { var values = json["values"] document.getelementbyid("id_value1").innerhtml = decodeuricomponent(values[0]); document.getelementbyid("id_value2").innerhtml = decodeuricomponent(values[1]); document.getelementbyid("id_value3").innerhtml = decodeuricomponent(values[2]); Within HTML, assign the received address value (var values = json[ value ]) to theplace of id in id_value1, id_value2, and id_value3. When strings are received, use decodeuricomponent() function to decode & properly display the data.

47 wemx WebService Configuring User Page Settings In order to upload the completed webpage to the web server, you have to configure theweb Server Settings in wemx Designer. Type in the IP address and Port to the webpage s address bar to use User Webpage.

48 48 wemx WebService 7. WEB SERVICE API READING/WRITING MULTIPLE ADDRESSES AT ONCE By using an API that reads/writes multiple addresses, you can read/write from wemx s multiple addresses at once. On the example below, you can display the written values on the datadisplay ([DISPLAY]USR00001) and string display ([DISPLAY]USR00002) to the webpageby using the Web Service API. Values that are entered in the webpage are written on data display ([DISPLAY]USR00018), and string display (DISPLAY)USR00019) Index.html <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>wemx Web Service Demo</title> </head> <body> <script type="text/javascript"> function getdata() {

49 wemx WebService 49 var xmlhttp = null; if (window.activexobject) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1) { try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e1) { alert('giving up :( Cannot create an XMLHTTP instance'); return; else if (window.xmlhttprequest) { xmlhttp = new XMLHttpRequest(); if (xmlhttp == null) { return; var url = " + window.location.host + "/feeds/address"; xmlhttp.open("post", url, true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { var values = json["results"] document.getelementbyid("id_value1").innerhtml = decodeuricomponent(values[0].value); document.getelementbyid("id_value2").innerhtml = decodeuricomponent(values[1].values); document.getelementbyid("id_value3").innerhtml = decodeuricomponent(values[2].value); document.getelementbyid("id_value4").innerhtml = decodeuricomponent(values[3].value); var request = []; var readjob1 = {; readjob1["job"] = "read"; readjob1["displayname"] = "[DISPLAY]USR00001"; readjob1["type"] = "uint16"; readjob1["count"] = 1; request[0] = readjob1; var readjob2 = { readjob2["job"] = "read"; readjob2["displayname"] = "[DISPLAY]USR00002"; readjob2["type"] = "text"; readjob2["count"] = 15; request[1] = readjob2; var writejob1 = { writejob1["job"] = "write"; writejob1["displayname"] = "[DISPLAY]USR00018"; writejob1["type"] = "uint16"; writejob1["count"] = 1; writejob1["value"] = encodeuricomponent(document.getelementbyid("id_value3").value); request[2] = writejob1;

50 50 wemx WebService var writejob2 = { writejob2["job"] = "write"; writejob2["displayname"] = "[DISPLAY]USR00019"; writejob2["type"] = "text"; writejob2["count"] = 15; writejob2["value"] = encodeuricomponent(document.getelementbyid("id_value4").value); request[3] = writejob2; var json = {; json["jobs"] = request; xmlhttp.send(json.stringify(json)); </script> <form> <table> <tr><td>id_value1:</td> <td id="id_value1" width="125"> </td></tr> <tr><td>id_value2:</td> <td id="id_value2" width="125"> </td></tr> <tr><td>id_value3:</td> <td width="125"><input id="id_value3" type="number"></input></td></tr> <tr><td>id_value4:</td> <td width="125"><input id="id_value4" type="text"></input></td></tr> <tr><td><input type="button" onclick="getdata()" width="50" value="get/set"></td></tr> </table> </form> </body> </html>

51 wemx WebService HMX Project Installing wemx Designer and creating a screen Install wemx Designerto use the web service. Refer to Making asimplescreen to create a project and add each of four numeric displays, string displays and strings. In the firstnumeric Display section, set the address to use ([DISPLAY]USR00001) In the second String Display section, set the address to use ([DISPLAY]USR00002) and the number of bytes (15).

52 52 wemx WebService In thethirdnumeric Display section, set the address to use ([DISPLAY]USR00018). Be sure to use [DISPLAY]USR00018.Be sure to use [DISPLAY]USR00018, because the second String Display is using 15 bytes. In thefourth Numeric Display section, set the address to use ([DISPLAY]USR00019)and byte number (15).

53 wemx WebService Writing Index.html On requesting with JavaScript and processing the response data (JSON), refer to information below HTML <form> <table> <tr><td>id_value1:</td> <td id="id_value1" width="125"> </td></tr> <tr><td>id_value2:</td> <td id="id_value2" width="125"> </td></tr> <tr><td>id_value3:</td> <td width="125"><input id="id_value3" type="number"></input></td></tr> <tr><td>id_value4:</td> <td width="125"><input id="id_value4" type="text"></input></td></tr> <tr><td><input type="button" onclick="getdata()" width="50" value="get/set"></td></tr> </table> </form> If an input button is clicked within HTML, getdata() JavaScript is called to react as defined from set addresses. Received values from addresses will be written in place of id in id_value1, id_value2, id_value3, and id_value JavaScript Multiple Address Handling Example Method Example POST [Request] Content-Type: application/json; charset=utf-8 POST { "jobs": [ {, { "job":"read", "displayname":"[display]usr00001", "type":"uint16", "count":1

54 54 wemx WebService ], {, { "job":"read", "displayname":"[display]usr00002", "type":"text", "count":15 "job":"write", "displayname":"[display]usr00018", "type":"uint16", "count":1, "value":"888" "job":"write", "displayname":"[display]usr00019", "type":"text", "count":15, "value":"%ec%95%88%eb%85%95" [Response] HTTP/ OK Content-Type: application/json; charset=utf-8; { "version":"1.0", "results": [ {, { "job":"read", "displayname":"[display]usr00001", "type":"uint16", "count":1, "value":777

55 wemx WebService 55 ], {, { "job":"read", "displayname":"[display]usr00002", "type":"text", "count":15, "values":["hello"] "job":"write", "displayname":"[display]usr00018", "type":"uint16", "count":1 "job":"write", "displayname":"[display]usr00019", "type":"text", "count":15, "value":"%ec%95%88%eb%85%95" This is an example of address multi-process. On detailed information on address API, you can refer to wemx- WebService-API document. All User Page examples contain codes for requesting URL and processing the received data (JSON) Request var url = " + window.location.host + "/feeds/address"; xmlhttp.open("post", url, true); Click the Get/Set button on the webpage to request for the addresses actions. Request for Multiple action will be made as a POST method. In order to make the request, make each addresses action into JSON and send them var request = [];

56 56 wemx WebService var readjob1 = {; readjob1["job"] = "read"; readjob1["displayname"] = "[DISPLAY]USR00001"; readjob1["type"] = "uint16"; readjob1["count"] = 1; request[0] = readjob1; var readjob2 = { readjob2["job"] = "read"; readjob2["displayname"] = "[DISPLAY]USR00002"; readjob2["type"] = "text"; readjob2["count"] = 15; request[1] = readjob2; var writejob1 = { writejob1["job"] = "write"; writejob1["displayname"] = "[DISPLAY]USR00018"; writejob1["type"] = "uint16"; writejob1["count"] = 1; writejob1["value"] = encodeuricomponent(document.getelementbyid("id_value3").value); request[2] = writejob1; var writejob2 = { writejob2["job"] = "write"; writejob2["displayname"] = "[DISPLAY]USR00019"; writejob2["type"] = "text"; writejob2["count"] = 15; writejob2["value"] = encodeuricomponent(document.getelementbyid("id_value4").value); request[3] = writejob2; var json = {; json["jobs"] = request; xmlhttp.send(json.stringify(json)); Response xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4) { if (xmlhttp.status == 200) { var json = JSON.parse(xmlhttp.responseText); if (json!= undefined && json["error"] == undefined) { var values = json["results"] document.getelementbyid("id_value1").innerhtml = decodeuricomponent(values[0].value); document.getelementbyid("id_value2").innerhtml = decodeuricomponent(values[1].values); document.getelementbyid("id_value3").innerhtml = decodeuricomponent(values[2].value); document.getelementbyid("id_value4").innerhtml = decodeuricomponent(values[3].value); Within HTML, assign the received address value (var values = json[ values ]) to theplace of id in id_value1, id_value2, id_value3, and id_value4. When strings are received, use decodeuricomponent() function to decode & properly display the data.

57 wemx WebService Configuring User Page Settings In order to upload the completed webpage to the web server, you have to configure theweb Server Settings in wemx Designer. Type in the IP address and Port to the webpage s address bar to use User Webpage.

58 58 wemx WebService 8. WEB SERVICE API ALARMS PAGING By using the alarm Paging API, you can import the list of occurring alarms from the wemx Player to the webpage. Alarms types are as follows: History Alarm, Active Alarm, and Log Alarm. Below figure shows an example of importing History Alarms that occurred in wemx Player.

59 wemx WebService index.html <!DOCTYPE html> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>wemx Web Service Demo</title> </head> <body> <script type="text/javascript"> window.onload = function (){ loadalarmreportdata(); timer = setinterval(loadalarmreportdata, 1000); window.onunload = function (){ clearinterval(timer); function loadalarmreportdata(){ var xmlhttp = null; if (window.activexobject){ try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); catch(e1){ try { return new ActiveXObject("Microsoft.XMLHTTP"); catch(e1){ alert('giving up :( Cannot create an XMLHTTP instance'); return; else if (window.xmlhttprequest){ xmlhttp = new XMLHttpRequest(); if (xmlhttp == null){ return; time.tostring(); var time = new Date().getTime(); var url = " + window.location.host +"/feeds/alarm/history?block=1&time=" + xmlhttp.open("get", url, true); xmlhttp.onreadystatechange = function (){ if (xmlhttp.readystate == 4){ console.log("xmlhttp.status : " + xmlhttp.status); if (xmlhttp.status == 200){ var json = JSON.parse(xmlhttp.responseText); if (json == undefined json["count"] == undefined){ return; document.getelementbyid("listcontainer"); var listcontainer =

60 60 wemx WebService while (listcontainer.firstchild) { listcontainer.removechild(listcontainer.firstchild); var numberoflistitems = json["count"]; var results = json["results"]; for (var i = 0 ; i < numberoflistitems ; ++i) { var listelement = document.createelement("tr"); listcontainer.appendchild(listelement); var listitem = document.createelement("td"); listitem.innerhtml = results[i].index; listelement.appendchild(listitem); listitem = document.createelement("td"); listitem.innerhtml = results[i].id; listelement.appendchild(listitem); decodeuricomponent(results[i].message); listitem = document.createelement("td"); listitem.innerhtml = listelement.appendchild(listitem); listitem = document.createelement("td"); listitem.innerhtml = results[i].status; listelement.appendchild(listitem); listitem = document.createelement("td"); listitem.innerhtml = results[i].triggered; listelement.appendchild(listitem); listitem = document.createelement("td"); listitem.innerhtml = results[i].acknowledged; listelement.appendchild(listitem); listitem = document.createelement("td"); listitem.innerhtml = results[i].recovered; listelement.appendchild(listitem); listitem = document.createelement("td"); listitem.innerhtml = results[i].count; listelement.appendchild(listitem); </script> xmlhttp.send(); listitem = document.createelement("td"); listitem.innerhtml = results[i].level; listelement.appendchild(listitem); <form action="" method="post"> <table> <tr> <th>index</th> <th>id</th> <th>message</th>

61 wemx WebService 61 </form> </body> </html> </table> <th>status</th> <th>triggered</th> <th>ack</th> <th>recovered</th> <th>count</th> <th>level</th> </tr> <tbody id="listcontainer"></tbody>

62 62 wemx WebService 8.2. HMX Project Installing wemx Designer and creating a screen Install wemx Designer to use the web service. Prepare a HMX Project with alarm features. Set the alarms in [Project] [Common Settings] [Alarm] Create an Alarm display in [Part] [Alarm].

63 wemx WebService Writing index.html HTML <form action="" method="post"> <table> <tr> </form> </table> <th>index</th> <th>id</th> <th>message</th> <th>status</th> <th>triggered</th> <th>ack</th> <th>recovered</th> <th>count</th> <th>level</th> </tr> <tbody id="listcontainer"></tbody> Create a table to import a list of alarms. In HTML, basic structure of the Table is as follows: Java Script Initializing window.onload = function () { loadalarmreportdata(); timer = setinterval(loadalarmreportdata, 1000); When the webpage is loaded, call theloadalarmreportdata() function. Set the Timer to call the function every 1,000ms, and refresh the list of alarms.

64 64 wemx WebService Terminating window.onunload = function () { clearinterval(timer); Disable the Timer when closing the webpage Example of Reading (Paging) History Alarms Method Example GET [Request] [Response] HTTP/ OK Content-Type: application/json; charset=utf-8; { "version": "1.0", "block": 1, "type": "history", // log, active "total": 100, "count": 10, "results": [ { "index": 0, "id": 1, "message": "Temperature is too high.", "status": "triggered", "triggered": " T13:15:43Z", "acknowledged": null "recovered": null "count": 1 "level": 0, //... ] On detailed information on parameters used byalarm API and alarm API, you can refer to wemx-webservice- API document. All User Page examples contain codes for requesting URL and processing the received data (JSON).

65 wemx WebService Requesting var time = new Date().getTime(); var url = " + window.location.host +"/feeds/alarm/history?block=1&time=" + time.tostring(); xmlhttp.open("get", url, true); Request for the whole list of alarms on the History Alarm Block 1. By using the filters, which is API s parameter, you can only request for necessary information. startindex, and count can be used to set the number of alarm lists when importing them Response var numberoflistitems = json["count"]; var results = json["results"]; for (var i = 0 ; i < numberoflistitems ; ++i){ var listitem = document.createelement("td"); listitem.innerhtml = results[i].index; listelement.appendchild(listitem); By utilizing the received data, form the table by repeatedly going through the alarm list ( json[ count ]) times. Add the received values to the Table (id, message, ack, etc.). In case of message, use decodeuricomponent() function to decode & properly display the data.

66 66 wemx WebService 8.4. Configuring User Page Settings In order to upload the completed webpage to the web server, you have to configure theweb Server Settings in wemx Designer. Type in the IP address and Port to the webpage s address bar to use User Webpage.

67 wemx WebService WEB SERVICE API ALARMCHECK/DELETE By using the Alarm Check/Delete API, you can check the occurred Alarms in wemx Player, or delete the list of Alarms. History Alarm, Log Alarm, and Activate Alarm can be checked/deleted one by one, or all at once. The figure below is an example of checking all occurred History Alarm, and deleting the list. Checking alarms