Electron: Add hooks to Settings to launch file dialogs

When the input text elements for the Settings Compiler path or Sketch path
are clicked it will launch the Electron native file and folder browsers to
select a path for the selected setting.

Author: carlosperate

ardublockly/ardublockly.js

@@ -92,32 +92,34 @@ Ardublockly.bindActionFunctions = function() {
   Ardublockly.bindClick_('button_load_xml', Ardublockly.XmlTextareaToBlocks);
   Ardublockly.bindClick_('button_toggle_toolbox', Ardublockly.toogleToolbox);
 
-  // Settings modal input field listeners
+  // Settings modal input field listeners only if they can be edited
   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') {
+    if (el.readOnly === false) {
+      // 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() {
         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,
+                             ArdublocklyServer.setSketchLocationHtml,
                              Ardublockly.setSketchLocationHtml);
 };
 

ardublockly/ardublockly_desktop.js

@@ -28,7 +28,8 @@ Ardublockly.isRunningElectron = function() {
  */
 (function loadJsInElectron(){
   if (Ardublockly.isRunningElectron()) {
-    var projectLocator = require('electron').remote.require('./projectlocator.js');
+    var projectLocator = require('electron').remote.require(
+        './projectlocator.js');
     var projectRoot = projectLocator.getProjectRootPath();
     window.$ = window.jQuery = require(projectRoot +
         '/ardublockly/js_libs/jquery-2.1.3.min.js');
@@ -72,6 +73,49 @@ Ardublockly.htmlPrompt = function(message, defaultValue, callback) {
   window.location.hash = '';
 };
 
+/**
+ * Add click listeners to the Compiler and Sketch input fields to launch the 
+ * Electron file/folder browsers.
+ */
+Ardublockly.bindSettingsPathInputs = function() {
+  var dialog = require('electron').remote.dialog;
+
+  // Compiler path
+  var compilerEl = document.getElementById('settings_compiler_location');
+  compilerEl.readOnly = true;
+  Ardublockly.bindClick_(compilerEl, function() {
+    dialog.showOpenDialog({
+      title: 'Select the Arduino IDE executable',
+      buttonLabel: 'Select',
+      properties: ['openFile']
+    }, function (files) {
+      if (files && files[0]) {
+        ArdublocklyServer.setCompilerLocation(files[0], function(jsonObj) {
+          Ardublockly.setCompilerLocationHtml(
+              ArdublocklyServer.jsonToHtmlTextInput(jsonObj));
+        });
+      }
+    })
+  });
+  // Sketch path
+  var sketchEl = document.getElementById('settings_sketch_location');
+  sketchEl.readOnly = true;
+  Ardublockly.bindClick_(sketchEl, function() {
+    dialog.showOpenDialog({
+      title: 'Select the Arduino IDE executable',
+      buttonLabel: 'Select',
+      properties: ['openDirectory']
+    }, function (folders) {
+      if (folders && folders[0]) {
+        ArdublocklyServer.setSketchLocation(folders[0], function(jsonObj) {
+          Ardublockly.setSketchLocationHtml(
+              ArdublocklyServer.jsonToHtmlTextInput(jsonObj));
+        });
+      }
+    })
+  });
+};
+
 /** Initialize Ardublockly code required for Electron on page load. */
 window.addEventListener('load', function load(event) {
   window.removeEventListener('load', load, false);
@@ -80,6 +124,9 @@ window.addEventListener('load', function load(event) {
     Ardublockly.containerFullWidth();
     Ardublockly.hideSideMenuButton();
 
+    // Open the file or directory browsers when clicking on the Settings inputs
+    Ardublockly.bindSettingsPathInputs();
+
     // Prevent browser zoom changes like pinch-to-zoom
     var webFrame = require('electron').webFrame;
     webFrame.setZoomLevelLimits(1, 1);

package/electron/app/appmenu.js

@@ -234,7 +234,7 @@ var getExamplesMenuData = function() {
                      BrowserWindow.getFocusedWindow().webContents
                         .executeJavaScript(
                             'Ardublockly.loadServerXmlFile("../examples/' +
-                            'serial_print_ascii_.xml");');
+                            'serial_print_ascii.xml");');
                 }
             }, {
                 label: 'Serial Repeat Game',