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

   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
   4         <head>\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
  13                                 $.ajax({\r
  14                                           url: "get_chipinfo",\r
  15                                           dataType :'json',\r
  16                                           async: false,\r
  17                                           cache: false,\r
  18                                           success: function(data){\r
  19                                                 $.each(data,function(k,v){\r
  20                                                         $('#'+k).text(v);\r
  21                                                 });\r
  22                                           }\r
  23                                         });\r
  24                                 var set_led_status = function(elm,status) {\r
  25 \r
  26                                         if (status == 1) {\r
  27                                                 elm.addClass('led-on').removeClass('led-off').text('ON').append("<span></span>");\r
  28                                         } else {\r
  29                                                 elm.addClass('led-off').removeClass('led-on').text('OFF').prepend("<span></span>");\r
  30                                         }\r
  31                                 }\r
  32                                 $("span[id^=led]").click(function(){\r
  33                                         var elm = $(this);\r
  34                                         if (elm.hasClass('led-off')) {\r
  35                                                 var status = 1;\r
  36                                         } else {\r
  37                                                 var status = 0;\r
  38                                         }\r
  39                                         set_led_status(elm, status);\r
  40                                         $.ajax({\r
  41                                           url: "set_led",\r
  42                                           async: false,\r
  43                                           cache: false,\r
  44                                           data:{'n':elm.attr('name'),'set':status},\r
  45                                           dataType :'json',\r
  46                                           success: function(){\r
  47                                           }\r
  48                                         });\r
  49                                 });\r
  50                                 var options = {\r
  51                                 series: { shadowSize: 0 },\r
  52                                 yaxis:  { min: 0},\r
  53                                 xaxis:  {min:0}\r
  54                             };\r
  55 \r
  56                                 var temperature_data = [];\r
  57                                 var plot_temperature = $.plot($("#temperature-plot"), [{label: "Temperature", data:temperature_data}], options);\r
  58 \r
  59                             function updateStatus() {\r
  60 \r
  61                         $.ajax({\r
  62                                           url: "status",\r
  63                                           async: false,\r
  64                                           cache: false,\r
  65                                           dataType :'json',\r
  66                                           success: function(data){\r
  67 \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
  75 \r
  76                                                  $.each(data['leds'], function (key,v) {\r
  77                                                         set_led_status($('#led-' + key), v);\r
  78                                                         });\r
  79 \r
  80                                                  temperature_data.push([data['up_time'],data['temp']]);\r
  81 \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
  86 \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
  91                                           }\r
  92                                         });\r
  93                             }\r
  94                            updateStatus();\r
  95                         });\r
  96 \r
  97                 </script>\r
  98         </head>\r
  99         <body>\r
 100 \r
 101                 <div id="wrapper">\r
 102                         <div id="conteiner">\r
 103                                 <div id="header">\r
 104 \r
 105                                         <img src="etc/img/bertos.png" alt="BeRTOS Logo" />\r
 106 \r
 107                                         <div>\r
 108                                                 <h1>web server example</h1><br>\r
 109                                                 <h3>Remotely control your board via web browser</h3>\r
 110                                         </div>\r
 111 \r
 112                                 </div>\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
 120                                         <br>\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
 125                                 </div>\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
 130                                         </div>\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
 134                                         </div>\r
 135                                         <div class="control">\r
 136                                                 <b>Potentiometer Value:</b><br/>\r
 137                                                 <span class="trigger"><span id="potentiometer">&nbsp;</span></span>&nbsp;<span id="potentiometer-value">--</span>\r
 138                                         </div>\r
 139                                 </div>\r
 140                                 <div class="content">\r
 141                                                 <b>Controller temperature:</b><br/>\r
 142                                                 <div id="temperature-plot" class="temperature-plot"></div>\r
 143                                 </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
 146                                 </div>\r
 147                         </div>\r
 148                 </div>\r
 149 \r
 150         </body>\r
 151 </html>\r