boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/index.htm

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2 "http://www.w3.org/TR/html4/loose.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml">
   4         <head>
   5                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6                 <title>BeRTOS web server example</title>
   7                 <link rel="stylesheet" type="text/css" media="screen" href="etc/style.css" />
   8                 <script type="text/javascript" src="etc/js/jquery.js"></script>
   9                 <!--[if lte IE 8]><script type="text/javascript" src="etc/js/excan.js"></script><![endif]-->
  10                 <script type="text/javascript" src="etc/js/jqflot.js"></script>
  11                 <script type="text/javascript">
  12                         $(document).ready(function() {
  13                                 $.ajax({
  14                                           url: "get_chipinfo",
  15                                           dataType :'json',
  16                                           async: false,
  17                                           success: function(data){
  18                                                 $.each(data,function(k,v){
  19                                                         $('#'+k).text(v);
  20                                                 });
  21                                           }
  22                                         });
  23                                 var set_led_status = function(elm,status) {
  24
  25                                         if (status == 1) {
  26                                                 elm.addClass('led-on').removeClass('led-off').text('ON').append("<span>&nbsp;</span>");
  27                                         } else {
  28                                                 elm.addClass('led-off').removeClass('led-on').text('OFF').prepend("<span>&nbsp;</span>");
  29                                         }
  30                                 }
  31                                 $("span[id^=led]").click(function(){
  32                                         var elm = $(this);
  33                                         if (elm.hasClass('led-off')) {
  34                                                 var status = 1;
  35                                         } else {
  36                                                 var status = 0;
  37                                         }
  38                                         set_led_status(elm, status);
  39                                         $.ajax({
  40                                           url: "set_led",
  41                                           async: false,
  42                                           data:{'n':elm.attr('name'),'set':status},
  43                                           dataType :'json',
  44                                           success: function(){
  45                                           }
  46                                         });
  47                                 });
  48                                 var options = {
  49                                 series: { shadowSize: 0 },
  50                                 yaxis:  { min: 0},
  51                                 xaxis:  {min:0}
  52                             };
  53
  54                                 var temperature_data = [];
  55                                 var plot_temperature = $.plot($("#temperature-plot"), [{label: "Temperature", data:temperature_data}], options);
  56
  57                             function updateStatus() {
  58
  59                         $.ajax({
  60                                           url: "status",
  61                                           async: false,
  62                                           dataType :'json',
  63                                           success: function(data){
  64
  65                                                  $('#potentiometer').width(200*(parseInt(data['volt'])/4095));
  66                                                  $('#potentiometer-value').text(data['volt'])
  67                                                  $('#uptime').text(data['up_time'] +' sec');
  68                                                  $('#temperature').text(data['temp']+' °C');
  69                                                  $('#local_ip').text(data['local_ip']);
  70                                                  $('#last_connected_ip').text(data['last_connected_ip']);
  71                                                  $('#tot_req').text(data['tot_req']);
  72
  73                                                  $.each(data['leds'], function (key,v) {
  74                                                         set_led_status($('#led-' + key), v);
  75                                                         });
  76
  77                                                  temperature_data.push([data['up_time'],data['temp']]);
  78
  79                                                  var x = plot_temperature.getAxes().xaxis.options;
  80                                                  var y = plot_temperature.getAxes().yaxis.options;
  81                                                  x.max = Math.max(25,data['up_time']);
  82                                                  x.min = Math.max(0,(x.max - 25));
  83
  84                                                  plot_temperature.setData([{label: "Temperature", data:temperature_data}]);
  85                                                  plot_temperature.setupGrid();
  86                                                  plot_temperature.draw();
  87                                                  setTimeout(updateStatus, 1000);
  88                                           }
  89                                         });
  90                             }
  91                            updateStatus();
  92                         });
  93
  94                 </script>
  95         </head>
  96         <body>
  97
  98                 <div id="wrapper">
  99                         <div id="conteiner">
 100                                 <div id="header">
 101
 102                                         <img src="etc/img/bertos.png" alt="BeRTOS Logo" />
 103
 104                                         <div>
 105                                                 <h1>web server example</h1><br/>
 106                                                 <h3>Remotely control your board via web browser</h3>
 107                                         </div>
 108
 109                                 </div>
 110                                 <div class="content">
 111                                         <b>Hardware Info:</b><br>
 112                                         <b>CPU Core:</b><span id="core_name">--</span><br>
 113                                         <b>Chip name:</b><span id="arch_name">--</span><br>
 114                                         <b>SRAM size:</b><span id="sram_size">--</span><br>
 115                                         <b>Flash size:</b><span id="flash_size">--</span><br>
 116                                         <b>Boot from memory:</b><span id="mem_boot_type">--</span>
 117                                         <br>
 118                                         <b>Connections Info:</b><br>
 119                                         <b>Board IP:</b><span id="local_ip">--</span><br>
 120                                         <b>Your IP:</b><span id="last_connected_ip">--</span><br>
 121                                         <b>Total status requests:</b><span id="tot_req">--</span><br>
 122                                 </div>
 123                                 <div class="content">
 124                                         <div class="control">
 125                                                 <b class="label">BeRTOS uptime:</b><span id="uptime" class="box">--</span><br>
 126                                                 <b class="label">Current temperature:</b><span id="temperature" class="box">--</span><br/>
 127                                         </div>
 128                                         <div class="control">
 129                                                 <b>Led status:</b><br/>
 130                                                 <span id="led-0" name="0" class="led-off">--</span><span id="led-1" name="1" class="led-off">--</span><span id="led-2" name="2" class="led-off">--</span>
 131                                         </div>
 132                                         <div class="control">
 133                                                 <b>Potentiometer Value:</b><br/>
 134                                                 <span class="trigger"><span id="potentiometer">&nbsp;</span></span>&nbsp;<span id="potentiometer-value">--</span>
 135                                         </div>
 136                                 </div>
 137                                 <div class="content">
 138                                                 <b>Controller temperature:</b><br/>
 139                                                 <div id="temperature-plot"></div>
 140                                 </div>
 141                                 <div id="footer">
 142                                                 Please visit <a href="http://www.bertos.org">www.berots.org</a> for more info
 143                                 </div>
 144                         </div>
 145                 </div>
 146
 147         </body>
 148 </html>