From 7ab75b6b9007c8398914ea9359d8c35f30798b97 Mon Sep 17 00:00:00 2001
From: Tasio Mendez <tm.tasio@gmail.com>
Date: Tue, 30 Jan 2018 19:37:46 +0100
Subject: [PATCH] Setting model variables

---
 server.py                | 23 +++++++++++--
 templates/css/main.css   | 25 +++++++++++---
 templates/index.html     |  7 ++--
 templates/js/socket.js   | 13 +++++---
 templates/js/template.js | 72 ++++++++++++++++++++++++++++++++++++++++
 5 files changed, 126 insertions(+), 14 deletions(-)
 create mode 100644 templates/js/template.js

diff --git a/server.py b/server.py
index dd2cc4c..f62c95a 100644
--- a/server.py
+++ b/server.py
@@ -99,6 +99,24 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
 			self.write_message({'type': 'trials',
 				'data': trials })
 
+			settings = []
+			for key in config['environment_params']: 
+				if type(config['environment_params'][key]) == float:
+					setting_type = 'number'
+				elif type(config['environment_params'][key]) == bool:
+					setting_type = 'boolean'
+				else:
+					setting_type = 'undefined'
+
+				settings.append({
+					'label': key,
+					'type': setting_type,
+					'value': config['environment_params'][key]
+				})
+
+			self.write_message({'type': 'settings',
+				'data': settings})
+
 		elif msg['type'] == 'get_trial':
 			if self.application.verbose:
 				logger.info('Trial {} requested!'.format(msg['data']))
@@ -118,7 +136,7 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
 				self.log_capture_string.seek(0)
 		finally:
 			if self.capture_logging:
-				thread = threading.Timer(0.01, self.update_logging)
+				thread = threading.Timer(0.001, self.update_logging)
 				thread.start()
 
 	def on_close(self):
@@ -139,13 +157,12 @@ class SocketHandler(tornado.websocket.WebSocketHandler):
 		self.update_logging()
 		yield self.capture_logging
 
-		self.capture_logging = False
 		self.log_capture_string.close()
 		self.logger_application.removeHandler(ch)
+		self.capture_logging = False
 		return self.capture_logging
 	
 
-
 class ModularServer(tornado.web.Application):
 	""" Main visualization application. """
 
diff --git a/templates/css/main.css b/templates/css/main.css
index 2e08cce..c430c30 100644
--- a/templates/css/main.css
+++ b/templates/css/main.css
@@ -221,13 +221,11 @@ hr {
 	width: 100% !important;
 }
 
-.speed-slider .slider, 
-.link-distance-slider .slider {
+.slider {
 	width: 100% !important;
 }
 
-.speed-slider .slider-selection,
-.link-distance-slider .slider-selection {
+.slider .slider-selection {
 	background-image: linear-gradient(to bottom, 
                     rgba(36, 110, 162, 0.5) 0%, 
                     rgba(3, 169, 224, 0.5) 100%) !important;
@@ -291,3 +289,22 @@ table#link-distance .max {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   background-color: #555;
 }
+
+/** FORMS **/
+.checkbox {
+  margin-left: 10px !important;
+}
+
+#wrapper-settings {
+  padding: 15px !important;
+}
+
+#wrapper-settings .btn-group button:focus {
+  background: initial;
+  border-color: #ccc;
+}
+
+#wrapper-settings .btn-group button {
+  font-size: xx-small;
+  padding: 3px 6px;
+}
diff --git a/templates/index.html b/templates/index.html
index 428ee62..70838c2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -24,6 +24,7 @@
   <script type="text/javascript" src="js/visualization.js"></script>
   <script type="text/javascript" src="js/timeline.js"></script>
   <script type="text/javascript" src="js/socket.js"></script>
+  <script type="text/javascript" src="js/template.js"></script>
 
   <!-- STYLESHEETS -->
   <link rel="stylesheet" type="text/css" href="css/main.css">
@@ -110,8 +111,8 @@
 
     <!-- CONSOLE -->
     <div class="col-sm-9 console">
-        Please, update YAML file that define all the parameters of a simulation. <br/>
-        If you don't know how to write the file, please visit this link:<br/>
+        Please, upload a YAML file that defines all the parameters of a simulation. <br/>
+        If you don't know how to write the file, please visit this page:<br/>
         http://soilsim.readthedocs.io/en/latest/quickstart.html<br/><br/>
     </div>
     <!-- //CONSOLE -->
@@ -254,7 +255,7 @@
 
         <!-- Wrapper Settings -->
         <div class="item">
-            <div class="container-fluid">
+            <div class="container-fluid" id="wrapper-settings">
 
                 
 
diff --git a/templates/js/socket.js b/templates/js/socket.js
index 9527edb..ce66ba4 100755
--- a/templates/js/socket.js
+++ b/templates/js/socket.js
@@ -9,7 +9,7 @@ ws.onopen = function() {
 
 // Receive data from server
 ws.onmessage = function(message) {
-	console.log('Message received!');
+	//console.log('Message received!');
 
 	var msg = JSON.parse(message.data);
 
@@ -30,6 +30,11 @@ ws.onmessage = function(message) {
 			});
 			break;
 
+		case 'settings':
+			//console.log(msg['data']);
+			initGUI(msg['data']);
+			break;
+
 		case 'error':
 			console.log(msg['error']);
 			_socket.error(msg['error']);
@@ -37,9 +42,9 @@ ws.onmessage = function(message) {
 			break;
 
 		case 'log':
-			console.log(msg['logging'])
-			$('.console').append(msg['logger'] + ': ' + msg['logging'] + '<br/>');
-        	$('.console').animate({ scrollTop: $(window).height() }, 'slow');
+			$('.console').append('$ ' + msg['logger'] + ': ' + msg['logging'] + '<br/>');
+        	$('.console').animate({ scrollTop: $('.console')[0].scrollHeight }, 'slow');
+        	break;
 
 		default:
 			console.log('Unexpected message!')
diff --git a/templates/js/template.js b/templates/js/template.js
new file mode 100644
index 0000000..c320a89
--- /dev/null
+++ b/templates/js/template.js
@@ -0,0 +1,72 @@
+// Add model parameters that can be edited prior to a model run
+var initGUI = function(model_params) {
+
+    var onSubmitCallback = function(param_name, value) {
+        // SEND SOCKET REQUEST
+    };
+
+    var addBooleanInput = function(name, value) {
+        var checked = (value) ? 'checked' : 'value';
+
+        var wrapper     = $('<div>').attr('class', 'col-sm-4').height('110px');
+        var input_group = $('<div>').attr('class', 'input-group').appendTo(wrapper);
+        var label       = $('<label>').attr('for', name).attr('class', 'checkbox').appendTo(input_group);
+        var input       = $('<input>') .attr('class', 'form-check-input').attr('id', name).attr('type', 'checkbox').attr(checked, checked).appendTo(label);
+
+        input.after(name);
+        $('#wrapper-settings').append(wrapper);
+    };
+
+    var addSliderInput = function(name, value) {
+
+        var wrapper = $('<div>').attr('class', 'col-sm-4').height('110px');
+        var label   = $('<div>').width('100%').text(name).css('text-align', 'center').css('font-weight', 'bolder').appendTo(wrapper);
+        var input   = $('<input>').attr('id', name).attr('type', 'text').attr('data-slider-min', '0.001').attr('data-slider-max', '1').attr('data-slider-step', '0.001').attr('data-slider-value', value).attr('data-slider-tooltip', 'hide').css('padding', '0 10px').appendTo(wrapper);
+        
+        var span          = $('<div>').attr('id', name + '_value').text('Current value: ').width('100%').css('padding-top', '10px').appendTo(wrapper);
+        var current_value = $('<span>').attr('id', name + '_number').text(value).appendTo(span);
+
+        var button_group  = $('<div>').attr('class', 'btn-group').attr('role', 'group').css('position', 'absolute').css('right', '15px').appendTo(span);
+        var button_down   = $('<button>').attr('type', 'button').attr('class', 'btn btn-default btn-default-down').appendTo(button_group);
+        var button_up     = $('<button>').attr('type', 'button').attr('class', 'btn btn-default btn-default-down').appendTo(button_group);
+
+        $('<span>').attr('class', 'glyphicon glyphicon-chevron-down').attr('aria-hidden', 'true').appendTo(button_down);
+        $('<span>').attr('class', 'glyphicon glyphicon-chevron-up').attr('aria-hidden', 'true').appendTo(button_up);
+
+        $('#wrapper-settings').append(wrapper);
+        input.slider().on('change', function(slideEvt) {
+            current_value.text(slideEvt.value.newValue);
+        });
+        button_down.click(function() {
+            input.slider('setValue', input.slider('getValue') - 0.001);
+            current_value.text(input.slider('getValue'));
+        });
+        button_up.click(function() {
+            input.slider('setValue', input.slider('getValue') + 0.001);
+            current_value.text(input.slider('getValue'));
+        })
+    };
+
+    var addTextBox = function(param, obj) {
+        var well = $('<div class="well">' + obj.value + '</div>')[0];
+        sidebar.append(well);
+    };
+
+    for (var option in model_params) {
+
+        var type = typeof(model_params[option]);
+        var param_str = String(option);
+
+        switch (model_params[option]['type']) {
+            case "boolean":
+                addBooleanInput(model_params[option]['label'], model_params[option]['value']);
+                break;
+            case "number":
+                addSliderInput(model_params[option]['label'], model_params[option]['value']);
+                break;
+            case "object":
+                addParamInput(param_str, model_params[option]);    // catch-all for params that use Option class
+                break;
+        }
+    }
+};
\ No newline at end of file