Remove the Python GUI window to select sketch or compiler paths

Before this change when the "compiler" or "sketch" options were selected
in the settings the server launched a GUI file or folder browser window to
get the user to navigate the server filesystem.

This means that the server needed to be run on a desktop environment and
this feature of the application could only be used in the same computer
that is executing the Python server.

This commit removes this GUI window from the Python server, it now expects
the path to be sent from the front end interface. So for the text inputs
the user has to manually enter the file or directory paths.
This can then be extended to either offer a file browser in the html page,
or to add Electron hooks to use the native application browser.

Author: carlosperate

ardublockly/ardublockly.js

@@ -93,18 +93,32 @@ Ardublockly.bindActionFunctions = function() {
   Ardublockly.bindClick_('button_toggle_toolbox', Ardublockly.toogleToolbox);
 
   // Settings modal input field listeners
-  Ardublockly.bindClick_('settings_compiler_location', function() {
-    ArdublocklyServer.requestNewCompilerLocation(function(jsonObj) {
-      Ardublockly.setCompilerLocationHtml(
-          ArdublocklyServer.jsonToHtmlTextInput(jsonObj));
-    });
-  });
-  Ardublockly.bindClick_('settings_sketch_location', function() {
-    ArdublocklyServer.requestNewSketchLocation(function(jsonObj) {
-      Ardublockly.setSketchLocationHtml(
-          ArdublocklyServer.jsonToHtmlTextInput(jsonObj));
-    });
-  });
+  var settingsPathInputListeners = function(elId, setValFunc, setHtmlCallback) {
+    var el = document.getElementById(elId);
+    // Event listener that send the data when the user presses 'Enter'
+    el.onkeypress = function(e) {
+      if (!e) e = window.event;
+      var keyCode = e.keyCode || e.which;
+      if (keyCode == '13') {
+        setValFunc(el.value, function(jsonObj) {
+          setHtmlCallback(ArdublocklyServer.jsonToHtmlTextInput(jsonObj));
+        });
+        return false;
+      }
+    };
+    // Event listener that send the data when moving out of the input field
+    el.onblur = function(e) {
+      setValFunc(el.value, function(jsonObj) {
+        setHtmlCallback(ArdublocklyServer.jsonToHtmlTextInput(jsonObj));
+      });
+    };
+  };
+  settingsPathInputListeners('settings_compiler_location',
+                             ArdublocklyServer.setCompilerLocation,
+                             Ardublockly.setCompilerLocationHtml);
+  settingsPathInputListeners('settings_sketch_location',
+                             ArdublocklyServer.setSketchLocation,
+                             Ardublockly.setSketchLocationHtml);
 };
 
 /** Sets the Ardublockly server IDE setting to upload and sends the code. */
@@ -358,8 +372,11 @@ Ardublockly.setCompilerLocationHtml = function(newEl) {
   if (newEl === null) return Ardublockly.openNotConnectedModal();
 
   var compLocIp = document.getElementById('settings_compiler_location');
-  if (compLocIp != null && newEl.value) {
-    compLocIp.value = newEl.value;
+  if (compLocIp != null) {
+    if (newEl.value) {
+      compLocIp.value = newEl.value;
+    }
+    compLocIp.style.cssText = newEl.style.cssText;
   }
 };
 
@@ -373,7 +390,10 @@ Ardublockly.setSketchLocationHtml = function(newEl) {
 
   var sketchLocIp = document.getElementById('settings_sketch_location');
   if (sketchLocIp != null) {
-    sketchLocIp.value = newEl.value;
+    if (newEl.value) {
+      sketchLocIp.value = newEl.value;
+    }
+    sketchLocIp.style.cssText = newEl.style.cssText;
   }
 };
 

ardublockly/ardublocklyserver_ajax.js

@@ -29,29 +29,31 @@ ArdublocklyServer.putJson = function(url, json, callback) {
 };
 
 /**
- * Sends a request to the Ardubloockly Server.
+ * Sends a request to the Ardubloockly Server that returns a JSON response.
  * @param {!string} url Requestor URL.
  * @param {!string} method HTTP method.
  * @param {!string} contentType HTTP content type.
- * @param {string} data Plain text JSON content to send.
- * @param {!function} cb Request callback function.
+ * @param {string} jsonObjSend JavaScript object to be parsed into JSON to send.
+ * @param {!function} cb Request callback function, takes a single input for a
+ *     parsed JSON object.
  */
-ArdublocklyServer.sendRequest = function(url, method, contentType, data, cb) {
+ArdublocklyServer.sendRequest = function(
+    url, method, contentType, jsonObjSend, cb) {
   var request = ArdublocklyServer.createRequest();
 
   // The data received is JSON, so it needs to be converted into the right
   // format to be displayed in the page.
   var onReady = function() {
     if (request.readyState == 4) {
       if (request.status == 200) {
-        var jsonObj = null;
+        var jsonObjReceived = null;
         try {
-          jsonObj = JSON.parse(request.responseText);
+          jsonObjReceived = JSON.parse(request.responseText);
         } catch(e) {
           console.error('Incorrectly formatted JSON data from ' + url);
           throw e;
         }
-        cb(jsonObj);
+        cb(jsonObjReceived);
       } else {
         // return a null element which will be dealt with in the front end
         cb(null);
@@ -63,7 +65,7 @@ ArdublocklyServer.sendRequest = function(url, method, contentType, data, cb) {
     request.open(method, url, true);
     request.setRequestHeader('Content-type', contentType);
     request.onreadystatechange = onReady;
-    request.send(data);
+    request.send(JSON.stringify(jsonObjSend));
   } catch (e) {
     // Nullify callback to indicate error
     cb(null);
@@ -171,8 +173,14 @@ ArdublocklyServer.jsonToHtmlTextInput = function(jsonObj) {
     // Simple text input
     element = document.createElement('input');
     element.setAttribute('type', 'text');
-    element.setAttribute(
-        'value', jsonObj.selected || 'Please insert valid input here.');
+    element.style.cssText = '';
+    if (jsonObj.errors) {
+      element.setAttribute('value', '');
+      element.style.cssText = 'border-bottom: 1px solid #f75c51;' +
+                              'box-shadow: 0 1px 0 0 #d73c30;';
+    } else {
+      element.setAttribute('value', jsonObj.selected || '');
+    }
   }
   return element;
 };
@@ -204,47 +212,41 @@ ArdublocklyServer.jsonToHtmlDropdown = function(jsonObj) {
 /**
  * Gets the current Compiler location from the ArdublocklyServer settings.
  * @param {!function} callback Callback function for the server request, must
- *                             one argument to receive the new location within
- *                             an HTML element of type input text.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.requestCompilerLocation = function(callback) {
   ArdublocklyServer.getJson('/settings/compiler', callback);
 };
 
 /**
- * Request to the Ardublockly Server to prompt the user for a new compiler
- * location. Done by the Python server because a 'file browse' triggered by
- * the browser with JS will obscure the user information for security reasons.
+ * Sends a string to the Ardublockly Server for a the Arduino IDE executable
+ * path.
  * @param {!function} callback Callback function for the server request, must
- *                             one argument to receive the new location within
- *                             an HTML element of type input text.
+ *     have one argument to receive the JSON response.
  */
-ArdublocklyServer.requestNewCompilerLocation = function(callback) {
+ArdublocklyServer.setCompilerLocation = function(new_path, callback) {
     ArdublocklyServer.putJson(
-      '/settings/compiler', '{ "new_value": "TODO replace this" }', callback);
+      '/settings/compiler', {"new_value": new_path}, callback);
 };
 
 /**
  * Gets the current Sketch location from the Ardublockly Server settings.
  * @param {!function} callback Callback function for the server request, must
- *                             one argument to receive the new location within
- *                             an HTML element of type input text.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.requestSketchLocation = function(callback) {
    ArdublocklyServer.getJson('/settings/sketch', callback);
 };
 
 /**
- * Request to the Ardublockly Server to prompt the user for a new sketch
- * location. Done by the Python server because a 'file browse' triggered by
- * the browser with JS will obscure the user information for security reasons.
+ * Sends a string to the Ardublockly Server for a the Arduino sketch folder.
+ * @param {!string} new_path New Sketch location path..
  * @param {!function} callback Callback function for the server request, must
- *                             have one argument to receive the new location
- *                             within an HTML element of type input text.
+ *     have one argument to receive the JSON response.
  */
-ArdublocklyServer.requestNewSketchLocation = function(callback) {
+ArdublocklyServer.setSketchLocation = function(new_path, callback) {
   ArdublocklyServer.putJson(
-      '/settings/sketch', '{ "new_value": "TODO replace this" }', callback);
+      '/settings/sketch', {"new_value": new_path}, callback);
 };
 
 /**
@@ -253,8 +255,7 @@ ArdublocklyServer.requestNewSketchLocation = function(callback) {
  * The data is then processed into an HTML element and sent to the callback
  * function as an argument.
  * @param {!function} callback Callback function for the server request, must
- *                             have one argument to receive the new setting as
- *                             an HTML select element.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.requestArduinoBoards = function(callback) {
   ArdublocklyServer.getJson('/settings/board', callback);
@@ -266,12 +267,11 @@ ArdublocklyServer.requestArduinoBoards = function(callback) {
  * element and sent to the callback function as an argument.
  * @param {!string} new_board Indicates which board has been selected.
  * @param {!function} callback Callback function for the server request, must
- *                             have one argument to receive the new setting as
- *                             an HTML select element.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.setArduinoBoard = function(new_board, callback) {
   ArdublocklyServer.putJson(
-      '/settings/board', '{ "new_value": "' + new_board + '" }', callback);
+      '/settings/board', {"new_value": new_board}, callback);
 };
 
 /**
@@ -280,8 +280,7 @@ ArdublocklyServer.setArduinoBoard = function(new_board, callback) {
  * settings. The data is then processed into an HTML element and sent to the
  * callback function as an argument.
  * @param {!function} callback Callback function for the server request, must
- *                             have one argument to receive the new setting as
- *                             an HTML select element.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.requestSerialPorts = function(callback) {
   ArdublocklyServer.getJson('/settings/serial', callback);
@@ -293,21 +292,19 @@ ArdublocklyServer.requestSerialPorts = function(callback) {
  * and sent to the callback function as an argument.
  * @param {!string} new_port Indicates which port has been selected.
  * @param {!function} callback Callback function for the server request, must
- *                             have one argument to receive the new setting as
- *                             an HTML select element.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.setSerialPort = function(new_port, callback) {
   ArdublocklyServer.putJson(
-      '/settings/serial','{ "new_value": "' + new_port + '" }', callback);
+      '/settings/serial', {"new_value": new_port}, callback);
 };
 
 /**
  * Gets the current IDE setting from the Ardublockly Server settings. The new
  * settings menu for the IDE options is then processed into an HTML element
  * and sent to the callback function as an argument.
  * @param {!function} callback Callback function for the server request, must
- *                             have one argument to receive the new setting as
- *                             an HTML select element.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.requestIdeOptions = function(callback) {
   ArdublocklyServer.getJson('/settings/ide', callback);
@@ -319,12 +316,11 @@ ArdublocklyServer.requestIdeOptions = function(callback) {
  * and sent to the callback function as an argument.
  * @param {!string} ide_option Indicates which option has been selected.
  * @param {!function} callback Callback function for the server request, must
- *                             have one argument to receive the new setting as
- *                             an HTML select element.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.setIdeOptions = function(ide_option, callback) {
   ArdublocklyServer.putJson(
-      '/settings/ide','{ "new_value": "' + ide_option + '" }', callback);
+      '/settings/ide', {"new_value": ide_option}, callback);
 };
 
 
@@ -333,11 +329,9 @@ ArdublocklyServer.setIdeOptions = function(ide_option, callback) {
  * by the settings.
  * @param {!string} code Arduino code in a single string format.
  * @param {!function} callback Callback function for the server request, must
- *                             have one argument to receive the new setting as
- *                             an HTML select element.
+ *     have one argument to receive the JSON response.
  */
 ArdublocklyServer.sendSketchToServer = function(code, callback) {
-  ArdublocklyServer.sendRequest('/code', 'POST', 'application/json',
-                                JSON.stringify({"sketch_code": code}),
-                                callback);
+  ArdublocklyServer.sendRequest(
+      '/code', 'POST', 'application/json', {"sketch_code": code}, callback);
 };

ardublockly/index.html

@@ -217,11 +217,11 @@
       <h4><span class="translatable_settings">Settings</span></h4>
       <div class="modal_section">
         <label><span class="translatable_compilerLocation">Compiler Location</span>:</label>
-        <input type="text" id="settings_compiler_location" readonly>
+        <input type="text" id="settings_compiler_location">
       </div>
       <div class="modal_section">
         <label><span class="translatable_sketchFolder">Sketch Folder</span>:</label>
-        <input type="text" id="settings_sketch_location" readonly>
+        <input type="text" id="settings_sketch_location">
       </div>
       <div class="modal_section">
         <label><span class="translatable_arduinoBoard">Arduino Board</span>:</label>

ardublocklyserver/actions.py

@@ -15,7 +15,6 @@
 # This package modules
 from ardublocklyserver.compilersettings import ServerCompilerSettings
 from ardublocklyserver import sketchcreator
-import ardublocklyserver.gui as gui
 
 
 #
@@ -146,16 +145,15 @@ def load_arduino_cli(sketch_path):
 #
 # Compiler Settings
 #
-def set_compiler_path():
+def set_compiler_path(new_path):
     """Open the file browser to select an Arduino IDE executable.
 
     The new file path is saved into ServerCompilerSettings.
 
+    :param new_path: New path for the Arduino IDE executable.
     :return: Same as get_compiler_path().
     """
-    new_path = gui.browse_file_dialog()
-    if new_path:
-        ServerCompilerSettings().compiler_dir = new_path
+    ServerCompilerSettings().compiler_dir = new_path
     return get_compiler_path()
 
 
@@ -174,16 +172,15 @@ def get_compiler_path():
 #
 # Sketch settings
 #
-def set_sketch_path():
+def set_sketch_path(new_path):
     """Open the file browser to select an folder to store the Arduino Sketch.
 
     The new file path is saved into ServerCompilerSettings.
 
+    :param new_path: New path to store the Arduino Sketch.
     :return: Same as get_sketch_path().
     """
-    new_directory = gui.browse_dir_dialog()
-    if new_directory != '':
-        ServerCompilerSettings().sketch_dir = new_directory
+    ServerCompilerSettings().sketch_dir = new_path
     return get_sketch_path()
 
 
@@ -206,8 +203,8 @@ def set_arduino_board(new_value):
     """Set new Arduino board value in the Settings.
 
     :param new_value: New Arduino board value, must be the board name, not the
-            flag (so 'Uno', not 'arduino:avr:uno')
-    :return: Same as the get_arduino_board_selected() function
+            flag (so 'Uno', not 'arduino:avr:uno').
+    :return: Same as the get_arduino_board_selected() function.
     """
     ServerCompilerSettings().arduino_board = new_value
     return get_arduino_board_selected()
@@ -265,7 +262,7 @@ def set_load_ide_only(new_value):
     """Set a new Arduino IDE load option.
 
     :param new_value: New IDE load option to save in the Settings.
-    :return: Same as the get_load_ide_selected() function
+    :return: Same as the get_load_ide_selected() function.
     """
     ServerCompilerSettings().load_ide_option = new_value
     return get_load_ide_selected()