X-600M Users Manual Appendix H: Custom Web Pages
JavaScript Helper Library
The template engine is a very powerful tool for creating dynamic content in custom web pages. The one
thing the template engine cannot do is continuously update the web page as the state of the I/O change.
To achieve this we use AJAX (Asynchronous JavaScript and XML.) This can be done by creating your
own JavaScript library to request XML files from the X-600M, and then update the I/O states in the web
page. Alternatively the X-600M has a built-in library for handling such things. This JavaScript library can
be included in custom pages and used to update the I/O.
Just like the template engine, the X-600M JavaScript library contains a set of classes that can be used
to access information about io, registers, etc. To use the X-600M library, include it and the JQuery library
into the custom web pages in the head section of the HTML file. The JQuery library version 1.11.1 is
already located on the X-600M; however, new versions can be uploaded and used as well.
<script src="/javascript/jquery-1.11.1.min.js"></script>
<script src="/javascript/x600m.js"></script>
The following example shows how to periodically update the state of a register named “register1” and a
1-Wire temperature sensor name “owSensor1.” It also shows how to create buttons that can change the
state of I/Os or Registers using the X-600M JavaScript library.
1: <div id="content">
2: <p>Example Custom Web Page for the X-600M</p>
3: <p>Welcome {$user->name()}</p>
4: <table class="rounded-table" style="width: 500px;">
5: <thead>
6: <tr>
7: <th class="rounded-head-left">I/O Description</th>
8: <th class="rounded-head-right">Value</th>
9: </tr>
10:<thead>
11:<tbody>
12: <tr>
13: <td>{$io->desc("owSensor1")}</td>
14: <td><span id="owSensor1">--</span> {$io->units("owSensor1")}</td>
15: </tr>
16: <tr>
17: <td>{$reg->desc("register1")}</td>
18: <td><span id="register1">--</span> {$reg->units("register1")}
19: <input type="button" value="ON" onclick="reg.set('register1', 1,
callback)">
20: <input type="button" value="PULSE" onclick="reg.pulse('register1', 5,
callback)">
21: <input type="button" value="TOGGLE" onclick="reg.toggle('register1',
callback)">
22: </td>
23: </tr>
24: </tbody>
25: <tfoot>
26: <tr>
27: <td class="rounded-foot-left">X-600M I/O</td>
28: <td class="rounded-foot-right"></td>
29: </tr>
30:<tfoot>
40:</table>
50:</div>
60:
Xytronix Research & Design, Inc. Page 143
To Next Page
Loading...