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
  14                                 $.ajax({
  15                                           url: "get_chipinfo",
  16                                           dataType :'json',
  17                                           success: function(data){
  18                                                 $.each(data,function(k,v){
  19                                                         $('#'+k).text(v);
  20                                                 });
  21                                           }
  22                                         });
  23
  24                                 var set_led_status = function(elm,status) {
  25
  26                                         if (status == 1) {
  27                                                 elm.addClass('led-on').removeClass('led-off').text('ON').append("<span>&nbsp;</span>");
  28                                         } else {
  29                                                 elm.addClass('led-off').removeClass('led-on').text('OFF').prepend("<span>&nbsp;</span>");
  30                                         }
  31
  32                                         $.ajax({
  33                                           url: "set_led",
  34                                           data:{'n':elm.attr('name'),'set':status},
  35                                           dataType :'json',
  36                                           success: function(){
  37
  38                                           }
  39                                         });
  40                                 }
  41
  42
  43                                 $("span[id^=led]").click(function(){
  44                                         var elm = $(this);
  45                                         if (elm.hasClass('led-on')) {
  46                                                 set_led_status(elm,0);
  47                                         } else {
  48                                                 set_led_status(elm,1);
  49                                         }
  50                                 });
  51
  52
  53                                 var options = {
  54                                 series: { shadowSize: 0 },
  55                                 yaxis: { min: 0, max: 100 },
  56                                 xaxis: {min:0}
  57                             };
  58
  59                                 var temperature_data = [];
  60                                 var plot_temperature = $.plot($("#temperature-plot"), [temperature_data], options);
  61
  62
  63                             function updateStatus() {
  64
  65                                 $.ajax({
  66                                           url: "status",
  67                                           dataType :'json',
  68                                           success: function(data){
  69
  70                                                  $('#trigger-value').width(200*(parseFloat(data['volt'])/3.5));
  71                                                  $('#uptime').text(data['up_time']+' sec');
  72                                                  $('#temperature').text(data['temp']+' °C');
  73                                                  temperature_data.push([data['up_time'],data['temp']]);
  74
  75                                                  var o = plot_temperature.getAxes().xaxis.options;
  76                                                  o.max = Math.max(15,data['up_time']);
  77                                                  o.min = Math.max(0,(o.max - 15));
  78                                                  plot_temperature.setData([temperature_data]);
  79                                          plot_temperature.setupGrid();
  80                                          plot_temperature.draw();
  81                                          setTimeout(updateStatus, 5000);
  82
  83                                           }
  84                                         });
  85
  86                             }
  87
  88                            updateStatus();
  89
  90
  91                         });
  92
  93                 </script>
  94         </head>
  95         <body>
  96
  97                 <div id="wrapper">
  98                         <div id="conteiner">
  99                                 <div id="header">
 100
 101                                         <img src="etc/img/bertos.png" alt="BeRTOS Logo" />
 102
 103                                         <div>
 104                                                 <h1>web server example</h1><br/>
 105                                                 <h3>Remotely control your board via web browser</h3>
 106                                         </div>
 107
 108                                 </div>
 109                                 <div class="content">
 110                                         <b>Hardware Info:</b><br>
 111                                         <b>Core name:</b><span id="core_name"></span>
 112                                         <b>Arch name:</b><span id="arch_name"></span>
 113                                         <b>Sram size</b><span id="sram_size"></span>
 114                                         <b>Flash size</b><span id="flash_size"></span>
 115                                         <b>Mem boot type</b><span id="mem_boot_type"></span>
 116                                 </div>
 117                                 <div class="content">
 118                                         <div class="control">
 119                                                 <b>BeRTOS uptime:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b><span id="uptime" class="box">--</span><br>
 120                                                 <b>Current temperature:</b><span id="temperature" class="box">--</span><br/>
 121                                         </div>
 122                                         <div class="control">
 123                                                 <b>Led status:</b><br/>
 124                                                 <span id="led-1" name="0" class="led-off"><span>&nbsp;</span>OFF</span></span><span id="led-2" name="1" class="led-off"><span>&nbsp;</span>OFF</span></span><span id="led-3" name="2" class="led-off"><span>&nbsp;</span>OFF</span>
 125                                         </div>
 126                                         <div class="control">
 127                                                 <b>Trigger Value:</b><br/>
 128                                                 <span class="trigger"><span id="trigger-value" >&nbsp;</span></span>
 129                                         </div>
 130                                 </div>
 131                                 <div class="content">
 132                                                 <b>Controller temperature:</b><br/>
 133                                                 <div id="temperature-plot"></div>
 134                                 </div>
 135                                 <div id="footer">
 136                                                 Please visit <a href="www.bertos.org">www.berots.org</a> for more info
 137                                 </div>
 138                         </div>
 139                 </div>
 140
 141         </body>
 142 </html>