ควบคุมการเปิดหรือปิด LED ผ่านทาง Browser

• ส่วนของหน้าจอ Browser ที่เป็นปุ่มสำหรับสั่งเปิดหรือปิด LED
• ส่วนควบคุมการเปิดหรือปิด LED

      ซึ่งในการ Refresh หน้าจอของ Browser เราจะใช้ Ajax เข้ามาช่วยในการแสดงสถานะ เปิดหรือปิด ของ LED เพื่อไม่ให้เกิดอาการกระพริบของหน้าจอ Browser

• SNAP board และ Baseboard
• LED Control Board

• WebServer.java  ทำหน้าที่เป็น HTTP Server
  

  import se.imsys.net.*; public class WebServer { public static void main(String arg[]) { HttpServer hs = new HttpServer(); // Create webserver Thread t = new Thread(hs); // Create webserver thread hs.addCgi(new LEDcgi()); // Add the Form handler t.start(); // Start thread } }

• LEDcgi.java  ทำหน้าที 2 อย่างคือ
  • ทำหน้าทีปิดและเปิด LED
    ประกาศค่า DataPort สำหรับควบคุมการเปิดหรือปิด LED

    private DataPort port = new DataPort(); //default address of 0x000000.

    สร้าง Method checkstatus(int i) สำหรับนำค่าที่ได้จากการกดปุ่มที่หน้า Browser เพื่อ เปิด หรือ ปิด โดยถ้า LED เปิดอยู่ เมื่อมีการกดครั้งต่อไปจะเป็นการปิด LED และ ถ้า LED ปิดอยู่ การกดครั้งต่อไปจะเป็นการเปิด LED

    public void checkstatus(int i){ if (status[i]== 0){ setledon(i); writec(); output[i] ="on.gif"; }else if (status[i]== 1){ setledoff(i); writec(); output[i] ="of.gif"; } }

  • ตอบสนอง การกดปุ่ม จากหน้า Browser และ จะแสดงผลสถานะของ LED ให้ กับ ผู้ใช้งาน

  สร้าง class LEDcgi implements HttpCgi

  public class LEDcgi implements HttpCgi { }

  ประกาศชื่อของ CGI function ที่จะใช้เรียกในโปรแกรม index.html ตอน submit from

  public String getName() { return("led.cgi"); }

  สร้าง Method execute(Hashtable variables, OutputStream os) throws IOException, HttpException เพื่อรองรับข้อมูลที่ส่งผ่าน จากโปรแกรม index.html ด้วย ตัวแปร data

  public void execute(Hashtable variables, OutputStream os) throws IOException, HttpException { String s; String input; s = "Content-Type: text/html\r\n\r\n\r\n"; input = (String) variables.get("data");// variable ที่ส่งผ่าน Get มาจากโปรแกรม index.html int a = Integer.parseInt(input); if (a==9){ off(); }else{ checkstatus(a); } s += "<table width=''200'' border=''0'' cellspacing=''0'' cellpadding=''0''>"; s +="<tr>"; for (int i=1;i<=8;i++){ s +="<td><img src=''../../"+output[i]+"'' width=''30'' height=''30'' /></td>"; } s +="</tr>"; s +="</table>"; os.write(s.getBytes()); }

• index.html  เป็นหน้าแรกของ Webpage เมื่อเราติดต่อกับ SNAP ด้วย Browser โดยใช้ เทคนิค Ajax มาช่วยเพื่อให้การแสดงผลไม่ต้อง refresh หน้าเพจทำให้ผลลัพธ์ออกมาอย่างรวดเร็วและนุ่มนวล และทำงานซ้ำไปมา โดยไม่ต้อง กด Back หรือ Refresh หน้า
  • Ajax function ทำงานเมื่อมีการกดปุ่ม LED โปรแกรมจะ Request ไปที่ led.cgi และส่งผลลัพธ์กลับมา โดยไม่ต้องเปลี่ยนหน้าเพจ
    

    <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); var pForm = document.forms[0]; var pBody = getRequestBody(pForm);? xmlHttp.open("post", pForm.action, true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { saveResult(xmlHttp.responseText); }else{ saveResult("พบข้อผิดพลาด " + xmlHttp.statusText); } }? }; xmlHttp.send(pBody);? } function getRequestBody(pForm) { var nParams = new Array(); for (var i=0 ; i < pForm.elements.length; i++) { var pParam = encodeURIComponent(pForm.elements[i].name); pParam += "="; pParam += encodeURIComponent(pForm.elements[i].value); nParams.push(pParam); } return nParams.join("&");? } function saveResult(pMessage) { var divStatus = document.getElementById("divPostInfo"); divStatus.innerHTML = ""+pMessage+"";? } </script>

  • Form ทำการ Post ไปที่ led.cgi โดยจะมีปุ่ม LED 8 ปุ่มและ Hidden field ชื่อว่า data การทำงาน เมื่อคลิกปุ่ม LED แต่ละปุ่ม จะส่งค่าไปที่ Hidden field ก่อนแล้วจึงเรียกใช้ฟังชั่น startRequest(); ของ Ajax

    <form?ACTION="/cgi-bin/led.cgi" METHOD="POST"> <input name="data" type="hidden" value=""/> <input name="LED1" type="button" class="text" id="LED1" onclick="this.form.data.value=1;startRequest(); return false" value="LED1"/> <input name="LED2" type="button" class="text" id="LED2" onclick="this.form.data.value=2;startRequest(); return false" value="LED2"/> <input name="LED3" type="button" class="text" id="LED3" onclick="this.form.data.value=3;startRequest(); return false" value="LED3"/> <input name="LED4" type="button" class="text" id="LED4" onclick="this.form.data.value=4;startRequest(); return false" value="LED4"/> <input name="LED5" type="button" class="text" id="LED5" onclick="this.form.data.value=5;startRequest(); return false" value="LED5"/> <input name="LED6" type="button" class="text" id="LED6" onclick="this.form.data.value=6;startRequest(); return false" value="LED6"/> <input name="LED7" type="button" class="text" id="LED7" onclick="this.form.data.value=7;startRequest(); return false" value="LED7"/> <input name="LED8" type="button" class="text" id="LED8" onclick="this.form.data.value=8;startRequest(); return false" value="LED8"/> <input name="Reset" type="button" class="text" id="Reset" onclick="this.form.data.value=9;startRequest(); return false" value="Reset LED"/> </form>

  • ผลลัพธ์ที่ได้จากการประมวลผลของ led.cgi จะถูกส่งไปที่ Ajax เพื่อแสดงผลอีกต่อหนึ่ง
    

    <div id="divPostInfo" align="center"> <table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="of.gif" width="30" height="30"/></td> <td><img src="of.gif" width="30" height="30"/></td> <td><img src="of.gif" width="30" height="30"/></td> <td><img src="of.gif" width="30" height="30"/></td> <td><img src="of.gif" width="30" height="30"/></td> <td><img src="of.gif" width="30" height="30"/></td> <td><img src="of.gif" width="30" height="30"/></td> <td><img src="of.gif" width="30" height="30"/></td> </tr> </table> </div>

• Upload แฟ้ม WebServer.class และ LEDcgi.class เข้าไปใน Subdirectory /classes
• สร้าง Subdirectory /html ด้วยคำสั่ง mkdir html
• Upload Subdirectory html ทั้งหมด ไปยัง Subdirectory /html
• Upload แฟ้ม index.html เข้าไปที่ Subdirectory /html
• Login เข้าไปยัง SNAP จากนั้นให้เข้าไปที่ /classes Execute WebServer.class ด้วยคำสั่ง java -r WebServer
• เปิด Browser พิมพ์ http://IP Address of SNAP/ ที่ช่อง Address จะปรากฏหน้าจอดังรูปข้างล่าง

• เมื่อทำการ กดปุ่ม LED1 และ LED2 ตามลำดับ จะเห็นว่าไฟดวงที่1และ2 ที่ LED Board จะติด และหน้าเว็บก็จะแสดงว่า ไฟดวงที่1และ2 ติด

• จากนั้นกดปุ่ม LED1 อีกครั้งก็จะเห็น ไฟดวงที่1 ของ LED Board ดับ