1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
\r
2 "http://www.w3.org/TR/html4/loose.dtd">
\r
3 <html xmlns="http://www.w3.org/1999/xhtml">
\r
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\r
6 <title>BeRTOS web server example</title>
\r
7 <link rel="stylesheet" type="text/css" media="screen" href="etc/style.css" />
\r
8 <script type="text/javascript" src="etc/js/jquery.js"></script>
\r
9 <script type="text/javascript" src="etc/js/excan.js"></script>
\r
10 <script type="text/javascript" src="etc/js/jqflot.js"></script>
\r
11 <script type="text/javascript">
\r
12 $(document).ready(function() {
\r
14 url: "get_chipinfo",
\r
18 success: function(data){
\r
19 $.each(data,function(k,v){
\r
24 var set_led_status = function(elm,status) {
\r
27 elm.addClass('led-on').removeClass('led-off').text('ON').append("<span></span>");
\r
29 elm.addClass('led-off').removeClass('led-on').text('OFF').prepend("<span></span>");
\r
32 $("span[id^=led]").click(function(){
\r
34 if (elm.hasClass('led-off')) {
\r
39 set_led_status(elm, status);
\r
44 data:{'n':elm.attr('name'),'set':status},
\r
46 success: function(){
\r
51 series: { shadowSize: 0 },
\r
56 var temperature_data = [];
\r
57 var plot_temperature = $.plot($("#temperature-plot"), [{label: "Temperature", data:temperature_data}], options);
\r
59 function updateStatus() {
\r
66 success: function(data){
\r
68 $('#potentiometer').width(200*(parseInt(data['volt'])/4095));
\r
69 $('#potentiometer-value').text(data['volt'])
\r
70 $('#uptime').text(data['up_time'] +' sec');
\r
71 $('#temperature').text(data['temp']+' °C');
\r
72 $('#local_ip').text(data['local_ip']);
\r
73 $('#last_connected_ip').text(data['last_connected_ip']);
\r
74 $('#tot_req').text(data['tot_req']);
\r
76 $.each(data['leds'], function (key,v) {
\r
77 set_led_status($('#led-' + key), v);
\r
80 temperature_data.push([data['up_time'],data['temp']]);
\r
82 var x = plot_temperature.getAxes().xaxis.options;
\r
83 var y = plot_temperature.getAxes().yaxis.options;
\r
84 x.max = Math.max(25,data['up_time']);
\r
85 x.min = Math.max(0,(x.max - 25));
\r
87 plot_temperature.setData([{label: "Temperature", data:temperature_data}]);
\r
88 plot_temperature.setupGrid();
\r
89 plot_temperature.draw();
\r
90 setTimeout(updateStatus, 1000);
\r
102 <div id="conteiner">
\r
105 <img src="etc/img/bertos.png" alt="BeRTOS Logo" />
\r
108 <h1>web server example</h1><br>
\r
109 <h3>Remotely control your board via web browser</h3>
\r
113 <div class="content">
\r
114 <b>Hardware Info:</b><br>
\r
115 <b>CPU Core:</b><span id="core_name">--</span><br>
\r
116 <b>Chip name:</b><span id="arch_name">--</span><br>
\r
117 <b>SRAM size:</b><span id="sram_size">--</span><br>
\r
118 <b>Flash size:</b><span id="flash_size">--</span><br>
\r
119 <b>Boot from memory:</b><span id="mem_boot_type">--</span>
\r
121 <b>Connections Info:</b><br>
\r
122 <b>Board IP:</b><span id="local_ip">--</span><br>
\r
123 <b>Your IP:</b><span id="last_connected_ip">--</span><br>
\r
124 <b>Total status requests:</b><span id="tot_req">--</span><br>
\r
126 <div class="content">
\r
127 <div class="control">
\r
128 <b class="label">BeRTOS uptime:</b><span id="uptime" class="box">--</span><br>
\r
129 <b class="label">Current temperature:</b><span id="temperature" class="box">--</span><br/>
\r
131 <div class="control">
\r
132 <b>Led status:</b><br/>
\r
133 <span id="led-0" name="0" class="led led-off">--</span><span id="led-1" name="1" class="led led-off">--</span><span id="led-2" name="2" class="led led-off">--</span>
\r
135 <div class="control">
\r
136 <b>Potentiometer Value:</b><br/>
\r
137 <span class="trigger"><span id="potentiometer"> </span></span> <span id="potentiometer-value">--</span>
\r
140 <div class="content">
\r
141 <b>Controller temperature:</b><br/>
\r
142 <div id="temperature-plot" class="temperature-plot"></div>
\r
144 <div class="content footer">
\r
145 Please visit <a href="http://www.bertos.org">www.berots.org</a> for more info
\r