From 2e07d7a499a180b1e3fe822235ac203a949ee2a1 Mon Sep 17 00:00:00 2001
From: asterix <asterix@38d2e660-2303-0410-9eaa-f027e97ec537>
Date: Tue, 18 Oct 2011 12:46:33 +0000
Subject: [PATCH] Some cosmetic fixes.

git-svn-id: https://src.develer.com/svnoss/bertos/trunk@5171 38d2e660-2303-0410-9eaa-f027e97ec537
---
 .../sd_data/etc/style.css                     | 38 ++++++--
 .../sam3x-ek_http_server/sd_data/index.htm    | 91 ++++++++-----------
 2 files changed, 70 insertions(+), 59 deletions(-)

diff --git a/boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/etc/style.css b/boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/etc/style.css
index 904b0c12..d371b401 100644
--- a/boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/etc/style.css
+++ b/boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/etc/style.css
@@ -14,7 +14,7 @@ body {
 #header h1,#header h3, #header div, #header img {
 	display: inline-block;
 	vertical-align: top;
-	
+
 }
 
 #header {
@@ -44,7 +44,7 @@ body {
 	width: 800px;
 	margin:0px auto;
 	background-color: #ffffff;
-	
+
 }
 
 #footer {
@@ -84,7 +84,7 @@ body {
 	margin: 5px;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
-	border-radius: 5px;	
+	border-radius: 5px;
 }
 
 .led-on span {
@@ -99,19 +99,37 @@ body {
 	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:#F58220;
-	border: 1px solid #F58220;
+	background-color:#A7A7A7;
+	border: 1px solid #A7A7A7;
 	padding: 2px;
 	margin: 5px;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
-	border-radius: 5px;	
+	border-radius: 5px;
 }
 
 .led-off span {
@@ -133,7 +151,7 @@ body {
 	margin: 5px;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
-	border-radius: 5px;	
+	border-radius: 5px;
 }
 
 .trigger span {
@@ -164,8 +182,12 @@ body {
 	text-align:center;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
-	border-radius: 5px;	
+	border-radius: 5px;
 }
 
+.label {
+ width: 150px;
+ display: inline-block;
+}
 
 
diff --git a/boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/index.htm b/boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/index.htm
index 0d52c0c1..fc2e701b 100644
--- a/boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/index.htm
+++ b/boards/sam3x-ek/examples/sam3x-ek_http_server/sd_data/index.htm
@@ -10,32 +10,16 @@
 		<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);
 					    	});
    					  }
 					});
-				$.ajax({
-					  url: "get_ledStatus",
-					  dataType :'json',
-					  success: function(data){
-					    	$.each(data,function(k,v){
-
-							if (v == 1) {
-								$('#led-'+k).addClass('led-on').removeClass('led-off').text('ON').append("<span>&nbsp;</span>");
-		   					} else {
-		   						$('#led-'+k).addClass('led-off').removeClass('led-on').text('OFF').prepend("<span>&nbsp;</span>");
-			   				}
-
-					    	});
-					  }
-					});
-
    				var set_led_status = function(elm,status) {
 
    					if (status == 1) {
@@ -43,68 +27,68 @@
    					} else {
    						elm.addClass('led-off').removeClass('led-on').text('OFF').prepend("<span>&nbsp;</span>");
 	   				}
-
-   					$.ajax({
+   				}
+   				$("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(){
-
 					  }
 					});
-   				}
-
-
-   				$("span[id^=led]").click(function(){
-   					var elm = $(this);
-   					if (elm.hasClass('led-on')) {
-   						set_led_status(elm,0);
-   					} else {
-   						set_led_status(elm,1);
-   					}
    				});
-
-
    				var options = {
 			        series: { shadowSize: 0 },
-			        yaxis: { min: 0},
-			        xaxis: {min:0}
+			        yaxis:  { min: 0},
+			        xaxis:  {min:0}
 			    };
 
 				var temperature_data = [];
-				var plot_temperature = $.plot($("#temperature-plot"), [temperature_data], options);
-
+				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));
-						 y.autoscale = true;
-						 plot_temperature.setData([temperature_data]);
+
+						 plot_temperature.setData([{label: "Temperature", data:temperature_data}]);
 						 plot_temperature.setupGrid();
 						 plot_temperature.draw();
 						 setTimeout(updateStatus, 1000);
-
 					  }
 					});
-
 			    }
-
 			   updateStatus();
-
-
 			});
 
 		</script>
@@ -125,16 +109,21 @@
 				</div>
 				<div class="content">
 					<b>Hardware Info:</b><br>
-					<b>Core name:</b><span id="core_name"></span>
-					<b>Arch name:</b><span id="arch_name"></span>
-					<b>Sram size:</b><span id="sram_size"></span>
-					<b>Flash size:</b><span id="flash_size"></span>
-					<b>Mem boot type:</b><span id="mem_boot_type"></span>
+					<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>BeRTOS uptime:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b><span id="uptime" class="box">--</span><br>
-						<b>Current temperature:</b><span id="temperature" class="box">--</span><br/>
+						<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/>
@@ -142,7 +131,7 @@
 					</div>
 					<div class="control">
 						<b>Potentiometer Value:</b><br/>
-						<span class="trigger"><span id="potentiometer">&nbsp;</span></span>
+						<span class="trigger"><span id="potentiometer">&nbsp;</span></span>&nbsp;<span id="potentiometer-value">--</span>
 					</div>
 				</div>
 				<div class="content">
-- 
2.25.1