-
-
-
-
-body {
- font-family: helvetica;
- margin: 0px;
- padding: 0px;
- font-size: 0.9em;
- color:#296628;
- background-color: #cccccc;
-}
-
-#header h1,#header h3, #header div, #header img {
- display: inline-block;
- vertical-align: top;
-
-}
-
-#header {
- border-style: solid;
- border-color: #3E9A3C;
- border-width: 1px;
- border-top-width: 10px;
- border-bottom-width: 10px;
- /*border-top-left-radius: 10px;
- border-top-right-radius: 10px;*/
-}
-
-
-#header h1 {
- color:#3E9A3C;
- margin-top: 35px;
- text-shadow:3px 3px 1px #eee;
- margin-bottom: 0px;
-}
-
-#header h3 {
- margin-top: 0px;
- color:#F58220;
-}
-
-#conteiner {
- width: 800px;
- margin:0px auto;
- background-color: #ffffff;
-
-}
-
-#footer {
- padding: 15px;
- background-color: #3E9A3C;
- color:#FFFFFF;
-}
-
-#footer a {
- color:#FCAF17;
-}
-
-
-.content {
- padding: 15px;
- border-style: solid;
- border-color: #3E9A3C;
- border-width: 0px 1px 1px 1px;
-}
-
-
-
-.control {
- display: inline-block;
- min-width: 250px;
-}
-
-.led-on {
- color:#FFFFFF;
- font-size: 0.9em;
- cursor:pointer;
- width:55px;
- display:inline-block;
- background-color:#3E9A3C;
- border: 1px solid #3E9A3C;
- padding: 2px;
- margin: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
-}
-
-.led-on span {
- background-color:#FFFFFF;
- float:right;
- width: 17px;
- height: 17px;
- margin-left: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- display: inline-block;
-}
-
-#led-0.led-on {
- background-color:#0BC713;
- color:#000000;
- border: 1px solid #09580D;
-}
-
-#led-1.led-on {
- background-color:#FAC52B;
- color:#000000;
- border: 1px solid #BB9010;
-}
-
-#led-2.led-on {
- background-color:#1FC2E2;
- color:#000000;
- border: 1px solid #00697E;
-}
-
-.led-off {
- color:#FFFFFF;
- font-size: 0.9em;
- cursor:pointer;
- width:55px;
- display:inline-block;
- background-color:#A7A7A7;
- border: 1px solid #A7A7A7;
- padding: 2px;
- margin: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
-}
-
-.led-off span {
- background-color:#FFFFFF;
- width: 17px;
- height: 17px;
- margin-right: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- display: inline-block;
-}
-
-.trigger {
- width:200px;
- display:inline-block;
- border: 1px solid #3E9A3C;
- padding: 1px;
- margin: 5px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
-}
-
-.trigger span {
- background-color:#3E9A3C;
- width: 0px;;
- height: 17px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- display: inline-block;
-}
-
-#temperature-plot{
- height: 250px;
- margin: 15px;
-}
-
-
-.box {
- color:#FFFFFF;
- font-size: 0.9em;
- width:55px;
- display:inline-block;
- background-color:#3E9A3C;
- border: 1px solid #3E9A3C;
- padding: 2px;
- margin: 5px;
- text-align:center;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
-}
-
-.label {
- width: 150px;
- display: inline-block;
-}
-
-
+body {\r
+ font-family: helvetica;\r
+ margin: 0px;\r
+ padding: 0px;\r
+ font-size: 0.9em;\r
+ color:#296628;\r
+ background-color: #cccccc;\r
+}\r
+\r
+#header h1,#header h3, #header div, #header img {\r
+ display: inline-block;\r
+ vertical-align: top;\r
+ zoom:1;\r
+ *display:inline;\r
+}\r
+\r
+#header {\r
+ border-style: solid;\r
+ border-color: #3E9A3C;\r
+ border-width: 1px;\r
+ border-top-width: 10px;\r
+ border-bottom-width: 10px;\r
+ /*border-top-left-radius: 10px;\r
+ border-top-right-radius: 10px;*/\r
+}\r
+\r
+\r
+#header h1 {\r
+ color:#3E9A3C;\r
+ margin-top: 35px;\r
+ text-shadow:3px 3px 1px #eee;\r
+ margin-bottom: 0px;\r
+}\r
+\r
+#header h3 {\r
+ margin-top: 0px;\r
+ color:#F58220;\r
+}\r
+\r
+#conteiner {\r
+ width: 800px;\r
+ margin:0px auto;\r
+ background-color: #ffffff;\r
+\r
+}\r
+\r
+.footer {\r
+ padding: 15px;\r
+ background-color: #3E9A3C;\r
+ color:#FFFFFF;\r
+}\r
+\r
+.footer a {\r
+ color:#FCAF17;\r
+}\r
+\r
+\r
+.content {\r
+ padding: 15px;\r
+ border-style: solid;\r
+ border-color: #3E9A3C;\r
+ border-width: 0px 1px 1px 1px;\r
+}\r
+\r
+.control {\r
+ display: inline-block;\r
+ min-width: 250px;\r
+ zoom:1;\r
+ *display:inline;\r
+}\r
+\r
+.led {\r
+ cursor:pointer;\r
+ font-size: 0.9em;\r
+ width:55px;\r
+ padding: 2px;\r
+ margin: 5px;\r
+ -webkit-border-radius: 5px;\r
+ -moz-border-radius: 5px;\r
+ border-radius: 5px;\r
+ display:inline-block;\r
+}\r
+\r
+.led span {\r
+ width: 17px;\r
+ height: 17px;\r
+ -webkit-border-radius: 5px;\r
+ -moz-border-radius: 5px;\r
+ border-radius: 5px;\r
+ background-color:#FFFFFF;\r
+}\r
+\r
+.led-on {\r
+ color:#FFFFFF;\r
+ background-color:#3E9A3C;\r
+ border: 1px solid #3E9A3C;\r
+}\r
+\r
+.led-on span {\r
+ margin-left: 15px;\r
+ display: inline-block;\r
+}\r
+\r
+.led-off {\r
+ color:#FFFFFF;\r
+ background-color:#A7A7A7;\r
+ border: 1px solid #A7A7A7;\r
+}\r
+\r
+.led-off span {\r
+ margin-right: 5px;\r
+ display: inline-block;\r
+}\r
+\r
+\r
+#led-0.led-on {\r
+ background-color:#0BC713;\r
+ color:#000000;\r
+ border: 1px solid #09580D;\r
+}\r
+\r
+#led-1.led-on {\r
+ background-color:#FAC52B;\r
+ color:#000000;\r
+ border: 1px solid #BB9010;\r
+}\r
+\r
+#led-2.led-on {\r
+ background-color:#1FC2E2;\r
+ color:#000000;\r
+ border: 1px solid #00697E;\r
+}\r
+\r
+\r
+.trigger {\r
+ width:200px;\r
+ display:inline-block;\r
+ border: 1px solid #3E9A3C;\r
+ padding: 1px;\r
+ margin: 5px;\r
+ -webkit-border-radius: 5px;\r
+ -moz-border-radius: 5px;\r
+ border-radius: 5px;\r
+}\r
+\r
+.trigger span {\r
+ background-color:#3E9A3C;\r
+ width: 0px;;\r
+ height: 17px;\r
+ -webkit-border-radius: 5px;\r
+ -moz-border-radius: 5px;\r
+ border-radius: 5px;\r
+ display: inline-block;\r
+}\r
+\r
+.temperature-plot{\r
+ height: 250px;\r
+ margin: 15px 15px 0px 15px;\r
+}\r
+\r
+\r
+.box {\r
+ color:#FFFFFF;\r
+ font-size: 0.9em;\r
+ width:55px;\r
+ display:inline-block;\r
+ background-color:#3E9A3C;\r
+ border: 1px solid #3E9A3C;\r
+ padding: 2px;\r
+ margin: 5px;\r
+ text-align:center;\r
+ -webkit-border-radius: 5px;\r
+ -moz-border-radius: 5px;\r
+ border-radius: 5px;\r
+}\r
+\r
+.label {\r
+ width: 150px;\r
+ display: inline-block;\r
+}
\ No newline at end of file
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>BeRTOS web server example</title>
- <link rel="stylesheet" type="text/css" media="screen" href="etc/style.css" />
- <script type="text/javascript" src="etc/js/jquery.js"></script>
- <!--[if lte IE 8]><script type="text/javascript" src="etc/js/excan.js"></script><![endif]-->
- <script type="text/javascript" src="etc/js/jqflot.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $.ajax({
- url: "get_chipinfo",
- dataType :'json',
- async: false,
- success: function(data){
- $.each(data,function(k,v){
- $('#'+k).text(v);
- });
- }
- });
- var set_led_status = function(elm,status) {
-
- if (status == 1) {
- elm.addClass('led-on').removeClass('led-off').text('ON').append("<span> </span>");
- } else {
- elm.addClass('led-off').removeClass('led-on').text('OFF').prepend("<span> </span>");
- }
- }
- $("span[id^=led]").click(function(){
- var elm = $(this);
- if (elm.hasClass('led-off')) {
- var status = 1;
- } else {
- var status = 0;
- }
- set_led_status(elm, status);
- $.ajax({
- url: "set_led",
- async: false,
- data:{'n':elm.attr('name'),'set':status},
- dataType :'json',
- success: function(){
- }
- });
- });
- var options = {
- series: { shadowSize: 0 },
- yaxis: { min: 0},
- xaxis: {min:0}
- };
-
- var temperature_data = [];
- var plot_temperature = $.plot($("#temperature-plot"), [{label: "Temperature", data:temperature_data}], options);
-
- function updateStatus() {
-
- $.ajax({
- url: "status",
- async: false,
- dataType :'json',
- success: function(data){
-
- $('#potentiometer').width(200*(parseInt(data['volt'])/4095));
- $('#potentiometer-value').text(data['volt'])
- $('#uptime').text(data['up_time'] +' sec');
- $('#temperature').text(data['temp']+' °C');
- $('#local_ip').text(data['local_ip']);
- $('#last_connected_ip').text(data['last_connected_ip']);
- $('#tot_req').text(data['tot_req']);
-
- $.each(data['leds'], function (key,v) {
- set_led_status($('#led-' + key), v);
- });
-
- temperature_data.push([data['up_time'],data['temp']]);
-
- var x = plot_temperature.getAxes().xaxis.options;
- var y = plot_temperature.getAxes().yaxis.options;
- x.max = Math.max(25,data['up_time']);
- x.min = Math.max(0,(x.max - 25));
-
- plot_temperature.setData([{label: "Temperature", data:temperature_data}]);
- plot_temperature.setupGrid();
- plot_temperature.draw();
- setTimeout(updateStatus, 1000);
- }
- });
- }
- updateStatus();
- });
-
- </script>
- </head>
- <body>
-
- <div id="wrapper">
- <div id="conteiner">
- <div id="header">
-
- <img src="etc/img/bertos.png" alt="BeRTOS Logo" />
-
- <div>
- <h1>web server example</h1><br/>
- <h3>Remotely control your board via web browser</h3>
- </div>
-
- </div>
- <div class="content">
- <b>Hardware Info:</b><br>
- <b>CPU Core:</b><span id="core_name">--</span><br>
- <b>Chip name:</b><span id="arch_name">--</span><br>
- <b>SRAM size:</b><span id="sram_size">--</span><br>
- <b>Flash size:</b><span id="flash_size">--</span><br>
- <b>Boot from memory:</b><span id="mem_boot_type">--</span>
- <br>
- <b>Connections Info:</b><br>
- <b>Board IP:</b><span id="local_ip">--</span><br>
- <b>Your IP:</b><span id="last_connected_ip">--</span><br>
- <b>Total status requests:</b><span id="tot_req">--</span><br>
- </div>
- <div class="content">
- <div class="control">
- <b class="label">BeRTOS uptime:</b><span id="uptime" class="box">--</span><br>
- <b class="label">Current temperature:</b><span id="temperature" class="box">--</span><br/>
- </div>
- <div class="control">
- <b>Led status:</b><br/>
- <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>
- </div>
- <div class="control">
- <b>Potentiometer Value:</b><br/>
- <span class="trigger"><span id="potentiometer"> </span></span> <span id="potentiometer-value">--</span>
- </div>
- </div>
- <div class="content">
- <b>Controller temperature:</b><br/>
- <div id="temperature-plot"></div>
- </div>
- <div id="footer">
- Please visit <a href="http://www.bertos.org">www.berots.org</a> for more info
- </div>
- </div>
- </div>
-
- </body>
-</html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"\r
+"http://www.w3.org/TR/html4/loose.dtd">\r
+<html xmlns="http://www.w3.org/1999/xhtml">\r
+ <head>\r
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
+ <title>BeRTOS web server example</title>\r
+ <link rel="stylesheet" type="text/css" media="screen" href="etc/style.css" />\r
+ <script type="text/javascript" src="etc/js/jquery.js"></script>\r
+ <script type="text/javascript" src="etc/js/excan.js"></script>\r
+ <script type="text/javascript" src="etc/js/jqflot.js"></script>\r
+ <script type="text/javascript">\r
+ $(document).ready(function() {\r
+ $.ajax({\r
+ url: "get_chipinfo",\r
+ dataType :'json',\r
+ async: false,\r
+ cache: false,\r
+ success: function(data){\r
+ $.each(data,function(k,v){\r
+ $('#'+k).text(v);\r
+ });\r
+ }\r
+ });\r
+ var set_led_status = function(elm,status) {\r
+\r
+ if (status == 1) {\r
+ elm.addClass('led-on').removeClass('led-off').text('ON').append("<span></span>");\r
+ } else {\r
+ elm.addClass('led-off').removeClass('led-on').text('OFF').prepend("<span></span>");\r
+ }\r
+ }\r
+ $("span[id^=led]").click(function(){\r
+ var elm = $(this);\r
+ if (elm.hasClass('led-off')) {\r
+ var status = 1;\r
+ } else {\r
+ var status = 0;\r
+ }\r
+ set_led_status(elm, status);\r
+ $.ajax({\r
+ url: "set_led",\r
+ async: false,\r
+ cache: false,\r
+ data:{'n':elm.attr('name'),'set':status},\r
+ dataType :'json',\r
+ success: function(){\r
+ }\r
+ });\r
+ });\r
+ var options = {\r
+ series: { shadowSize: 0 },\r
+ yaxis: { min: 0},\r
+ xaxis: {min:0}\r
+ };\r
+\r
+ var temperature_data = [];\r
+ var plot_temperature = $.plot($("#temperature-plot"), [{label: "Temperature", data:temperature_data}], options);\r
+\r
+ function updateStatus() {\r
+\r
+ $.ajax({\r
+ url: "status",\r
+ async: false,\r
+ cache: false,\r
+ dataType :'json',\r
+ success: function(data){\r
+\r
+ $('#potentiometer').width(200*(parseInt(data['volt'])/4095));\r
+ $('#potentiometer-value').text(data['volt'])\r
+ $('#uptime').text(data['up_time'] +' sec');\r
+ $('#temperature').text(data['temp']+' °C');\r
+ $('#local_ip').text(data['local_ip']);\r
+ $('#last_connected_ip').text(data['last_connected_ip']);\r
+ $('#tot_req').text(data['tot_req']);\r
+\r
+ $.each(data['leds'], function (key,v) {\r
+ set_led_status($('#led-' + key), v);\r
+ });\r
+\r
+ temperature_data.push([data['up_time'],data['temp']]);\r
+\r
+ var x = plot_temperature.getAxes().xaxis.options;\r
+ var y = plot_temperature.getAxes().yaxis.options;\r
+ x.max = Math.max(25,data['up_time']);\r
+ x.min = Math.max(0,(x.max - 25));\r
+\r
+ plot_temperature.setData([{label: "Temperature", data:temperature_data}]);\r
+ plot_temperature.setupGrid();\r
+ plot_temperature.draw();\r
+ setTimeout(updateStatus, 1000);\r
+ }\r
+ });\r
+ }\r
+ updateStatus();\r
+ });\r
+\r
+ </script>\r
+ </head>\r
+ <body>\r
+\r
+ <div id="wrapper">\r
+ <div id="conteiner">\r
+ <div id="header">\r
+\r
+ <img src="etc/img/bertos.png" alt="BeRTOS Logo" />\r
+\r
+ <div>\r
+ <h1>web server example</h1><br>\r
+ <h3>Remotely control your board via web browser</h3>\r
+ </div>\r
+\r
+ </div>\r
+ <div class="content">\r
+ <b>Hardware Info:</b><br>\r
+ <b>CPU Core:</b><span id="core_name">--</span><br>\r
+ <b>Chip name:</b><span id="arch_name">--</span><br>\r
+ <b>SRAM size:</b><span id="sram_size">--</span><br>\r
+ <b>Flash size:</b><span id="flash_size">--</span><br>\r
+ <b>Boot from memory:</b><span id="mem_boot_type">--</span>\r
+ <br>\r
+ <b>Connections Info:</b><br>\r
+ <b>Board IP:</b><span id="local_ip">--</span><br>\r
+ <b>Your IP:</b><span id="last_connected_ip">--</span><br>\r
+ <b>Total status requests:</b><span id="tot_req">--</span><br>\r
+ </div>\r
+ <div class="content">\r
+ <div class="control">\r
+ <b class="label">BeRTOS uptime:</b><span id="uptime" class="box">--</span><br>\r
+ <b class="label">Current temperature:</b><span id="temperature" class="box">--</span><br/>\r
+ </div>\r
+ <div class="control">\r
+ <b>Led status:</b><br/>\r
+ <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
+ </div>\r
+ <div class="control">\r
+ <b>Potentiometer Value:</b><br/>\r
+ <span class="trigger"><span id="potentiometer"> </span></span> <span id="potentiometer-value">--</span>\r
+ </div>\r
+ </div>\r
+ <div class="content">\r
+ <b>Controller temperature:</b><br/>\r
+ <div id="temperature-plot" class="temperature-plot"></div>\r
+ </div>\r
+ <div class="content footer">\r
+ Please visit <a href="http://www.bertos.org">www.berots.org</a> for more info\r
+ </div>\r
+ </div>\r
+ </div>\r
+\r
+ </body>\r
+</html>\r
projects / bertos.git / commitdiff