Server requests now react to failures due to the Ardublockly server not running.

Also added detection to see if the app is run from the Ardublockly server or an online server. If only then it displays a message indicating unsupported features.

ArduinoServerCompiler/js/ArduServerCompiler.js

@@ -26,14 +26,25 @@ ArduServerCompiler.ajaxPostForm = function(url, params, callback) {
   // The data received is JSON, so it needs to be converted into the right
   // format to be displayed in the page.
   request.onreadystatechange = function() {
-    if ( (request.readyState == 4) && (request.status == 200) ) {
-      var el = ArduServerCompiler.createElementFromJson(request.responseText);
-      callback(el);
+    if (request.readyState == 4) {
+      if (request.status == 200) {
+        var el = ArduServerCompiler.createElementFromJson(request.responseText);
+        callback(el);
+      } else if (request.status == 405) {
+        // return a null element which will be dealt with in the front end
+        callback(null);
+      }
     }
   }
 
   // Send the data
-  request.send(params);
+  try {
+    request.send(params);
+  } catch(e) {
+    // The request will fail if opening the html directly on a browser, so
+    // let's just send the callback nullified and the front end will deal.
+    callback(null);
+  }
 };
 
 /**
@@ -51,14 +62,25 @@ ArduServerCompiler.ajaxPostPlain = function(url, data, callback) {
   // The data received is JSON, so it needs to be converted into the right
   // format to be displayed in the page.
   request.onreadystatechange = function() {
-    if ( (request.readyState == 4) && (request.status == 200) ) {
-      var el = ArduServerCompiler.createElementFromJson(request.responseText);
-      callback(el);
+    if (request.readyState == 4) {
+      if (request.status == 200)  {
+        var el = ArduServerCompiler.createElementFromJson(request.responseText);
+        callback(el);
+      } else if (request.status == 405) {
+        // return a null element which will be dealt with in the front end
+        callback(null);
+      }
     }
   }
 
   // Send the data
-  request.send(data);
+  try {
+    request.send(params);
+  } catch(e) {
+    // The request will fail if opening the html directly on a browser, so
+    // let's just send the callback nullified and the front end will deal.
+    callback(null);
+  }
 };
 
 /**
@@ -98,7 +120,7 @@ ArduServerCompiler.createAjaxRequest = function() {
  */
 ArduServerCompiler.createElementFromJson = function(json_data) {
   var parsed_json = JSON.parse(json_data);
-  var element;
+  var element = null;
 
   if (parsed_json.element == 'text_input') {
     // Simple text input

apps/arduino/arduino_material.js

@@ -23,6 +23,12 @@ window.addEventListener('load', function() {
   ArduinoMaterial.bindActionFunctions_();
   ArduinoMaterial.bindDesignEventListeners_();
   ArduinoMaterial.bindBlocklyEventListeners_();
+
+  // Check if not running locally (including developer's local network IP)
+  if (document.location.hostname != "localhost" &&
+      document.location.hostname != "192.168.0.7") {
+    $('#not_running_dialog').openModal();
+  }
 });
 
 /**
@@ -175,44 +181,59 @@ ArduinoMaterial.populateSettings = function() {
 
 /**
  * Sets the compiler location form data retrieve from an updated element.
- * @param {!boolean} new_el New HTML element to replace the one in the current
- *                          DOM. Should contain a complete input text element.
+ * @param {element} new_el New HTML element to replace the one in the current
+ *                         DOM. Should contain a complete input text element.
  */
 ArduinoMaterial.setCompilerLocationHtml = function(new_el) {
-  var comp_loc_ip = document.getElementById('settings_compiler_location')
-  if (comp_loc_ip != null) {
-    comp_loc_ip.value = new_el.value;
+  if (new_el != null) {
+    var comp_loc_ip = document.getElementById('settings_compiler_location')
+    if (comp_loc_ip != null) {
+      comp_loc_ip.value = new_el.value;
+    }
+  } else {
+    // If the element is Null, then Ardublockly server is not running 
+    $('#not_running_dialog').openModal();
   }
 };
 
 /**
  * Sets the sketch location form data retrieve from an updated element.
- * @param {!boolean} new_el New HTML element to replace the one in the current
- *                          DOM. Should contain a complete input text element.
+ * @param {element} new_el New HTML element to replace the one in the current
+ *                         DOM. Should contain a complete input text element.
  */
 ArduinoMaterial.setSketchLocationHtml = function(new_el) {
-  var sketch_loc_ip = document.getElementById('settings_sketch_location')
-  if (sketch_loc_ip != null) {
-    sketch_loc_ip.value = new_el.value;
+  if (new_el != null) {
+    var sketch_loc_ip = document.getElementById('settings_sketch_location');
+    if (sketch_loc_ip != null) {
+      sketch_loc_ip.value = new_el.value;
+    }
+  } else {
+    // If the element is Null, then Ardublockly server is not running 
+    $('#not_running_dialog').openModal();
   }
 };
 
 /**
  * Replaces the Arduino Boards form data with a new HTMl element.
  * Ensures there is a change listener to call 'setSerialPort' function
- * @param {!element} new_el New HTML element to replace the one in the current
- *                          DOM. Should contain a complete select element.
+ * @param {element} new_el New HTML element to replace the one in the current
+ *                         DOM. Should contain a complete select element.
  */
 ArduinoMaterial.setArduinoBoardsHtml = function(new_el) {
-  var board_dropdown = document.getElementById('board')
-  if (board_dropdown != null) {
-    new_el.id = 'board';
-    new_el.onchange = ArduinoMaterial.setBoard;
-    board_dropdown.parentNode.replaceChild(new_el, board_dropdown);
+  if (new_el != null) {
+    var board_dropdown = document.getElementById('board');
+    if (board_dropdown != null) {
+      new_el.id = 'board';
+      new_el.onchange = ArduinoMaterial.setBoard;
+      board_dropdown.parentNode.replaceChild(new_el, board_dropdown);
+      // Refresh the materialize select menus
+      // TODO: Currently a reported bug from Materialize
+      $('select').material_select();
+    }
+  } else {
+    // If the element is Null, then Ardublockly server is not running 
+    $('#not_running_dialog').openModal();
   }
-  // Refresh the materialize select menus
-  // TODO: Currently a reported bug from Materialize
-   $('select').material_select();
 };
 
 /**
@@ -229,19 +250,24 @@ ArduinoMaterial.setBoard = function() {
 /**
  * Replaces the Serial Port form data with a new HTMl element.
  * Ensures there is a change listener to call 'setSerialPort' function
- * @param {!element} new_el New HTML element to replace the one in the current
- *                          DOM. Should contain a complete select element.
+ * @param {element} new_el New HTML element to replace the one in the current
+ *                         DOM. Should contain a complete select element.
  */
 ArduinoMaterial.setSerialPortsHtml = function(new_el) {
-  var serial_dropdown = document.getElementById('serial_port')
-  if (serial_dropdown != null) {
-    new_el.id = 'serial_port';
-    new_el.onchange = ArduinoMaterial.setSerial;
-    serial_dropdown.parentNode.replaceChild(new_el, serial_dropdown);
+  if (new_el != null) {
+    var serial_dropdown = document.getElementById('serial_port');
+    if (serial_dropdown != null) {
+      new_el.id = 'serial_port';
+      new_el.onchange = ArduinoMaterial.setSerial;
+      serial_dropdown.parentNode.replaceChild(new_el, serial_dropdown);
+      // Refresh the materialize select menus
+      // TODO: Currently a reported bug from Materialize
+      $('select').material_select();
+    }
+  } else {
+    // If the element is Null, then Ardublockly server is not running 
+    $('#not_running_dialog').openModal();
   }
-  // Refresh the materialize select menus
-  // TODO: Currently a reported bug from Materialize
-   $('select').material_select();
 };
 
 /**
@@ -258,19 +284,24 @@ ArduinoMaterial.setSerial = function() {
 /**
  * Replaces IDE options form data with a new HTMl element.
  * Ensures there is a change listener to call 'setIdeSettings' function
- * @param {!element} new_el New HTML element to replace the one in the current
- *                          DOM. Should contain a complete select element.
+ * @param {element} new_el New HTML element to replace the one in the current
+ *                         DOM. Should contain a complete select element.
  */
 ArduinoMaterial.setIdeHtml = function(new_el) {
-  var ide_dropdown = document.getElementById('ide_settings')
-  if (ide_dropdown != null) {
-    new_el.id = 'ide_settings';
-    new_el.onchange = ArduinoMaterial.setIdeSettings;
-    ide_dropdown.parentNode.replaceChild(new_el, ide_dropdown);
+  if (new_el != null) {
+    var ide_dropdown = document.getElementById('ide_settings');
+    if (ide_dropdown != null) {
+      new_el.id = 'ide_settings';
+      new_el.onchange = ArduinoMaterial.setIdeSettings;
+      ide_dropdown.parentNode.replaceChild(new_el, ide_dropdown);
+      // Refresh the materialize select menus
+      // TODO: Currently a reported bug from Materialize
+      $('select').material_select();
+    }
+  } else {
+    // If the element is Null, then Ardublockly server is not running 
+    $('#not_running_dialog').openModal();
   }
-  // Refresh the materialize select menus
-  // TODO: Currently a reported bug from Materialize
-   $('select').material_select();
 };
 
 /**
@@ -297,12 +328,17 @@ ArduinoMaterial.sendCode = function() {
 
 /**
  * Receives the IDE data back to be displayed and stops spinner.
- * @param {!element} new_el New HTML element to replace the one in the current
- *                          DOM. Should contain a complete select element.
+ * @param {element} new_el New HTML element to replace the one in the current
+ *                         DOM. Should contain a complete select element.
  */
 ArduinoMaterial.sendCodeReturn = function(data_back) {
   ArduinoMaterial.runButtonSpinner(false);
-  ArduinoMaterial.arduinoIdeModal(data_back);
+  if (data_back != null) {
+    ArduinoMaterial.arduinoIdeModal(data_back);
+  } else {
+    // If the element is Null, then Ardublockly server is not running 
+    $('#not_running_dialog').openModal();
+  }
 };
 
 /**

apps/arduino/arduino_material_ardublockly.js

@@ -42,7 +42,12 @@ ArduinoMaterial.injectBlockly = function(blockly_el, toolbox_path) {
       }
     }
   }
-  request.open("GET", toolbox_path, true);
+  // If file run locally Internet explorer fails here
+  try {
+    request.open("GET", toolbox_path, true);
+  } catch(e) {
+    $('#not_running_dialog').openModal();
+  }
 
   // Once file is open, inject blockly into element with the toolbox string
   request.onreadystatechange = function() {
@@ -60,7 +65,12 @@ ArduinoMaterial.injectBlockly = function(blockly_el, toolbox_path) {
     }
   }
 
-  request.send(null);
+  // If file run locally Chrome will fail here
+  try {
+    request.send(null);
+  } catch(e) {
+    $('#not_running_dialog').openModal();
+  }
 };
 
 /**

apps/arduino/index.html

@@ -55,7 +55,8 @@
   <!-- Arduino Material design app -->
   <link href="arduino_material.css" rel="stylesheet" media="screen,projection">
   <script src="arduino_material_design.js"></script>
-  <script src="arduino_material_ardublockly.js"></script>  <script src="arduino_material.js"></script>
+  <script src="arduino_material_ardublockly.js"></script>
+  <script src="arduino_material.js"></script>
 </head>
 
 <body>
@@ -78,11 +79,11 @@
 
   <!-- Sidebar navigation -->
   <ul id="slide-out" class="side-nav">
-    <li class="logo"><img src="img/sidenav_header.png"/></li>
+    <li class="logo"><img src="img/sidenav_header.png" alt="Ardublockly block image"></li>
     <li class="no-padding">
       <ul>
         <li id="menu_load"><a href="#">Open<i class="mdi-file-file-upload left"></i></a></li>
-        <li id="menu_save"><a href="#" id="button_save">Save<i class="mdi-file-file-download left"></i></a></li>
+        <li id="menu_save"><a href="#">Save<i class="mdi-file-file-download left"></i></a></li>
         <li id="menu_delete"><a href="#">Delete All<i class="mdi-action-delete left"></i></a></li>
         <li id="menu_settings"><a href="#">Settings<i class="mdi-action-settings left"></i></a></li>
       </ul>
@@ -236,5 +237,24 @@
     </div>
   </div>
 
+  <!-- General Alert: Content is loaded using Javascript to display alerts -->
+  <div id="not_running_dialog" class="modal modal-fixed-footer">
+    <div class="modal-content">
+      <h4 id="gen_alert_title">Ardublockly not running locally</h4>
+      <p>For Ardublockly to work correctly, the Ardublockly server must be
+      running locally on your computer.</p>
+      <p>If you are using an online version you will not be able to configure
+      the settings nor load the blocks code into an Arduino.</p>
+      <p>Installation instruction can be found in the
+      <a href="https://github.com/carlosperate/ardublockly">Ardublockly
+      repository</a>.</p>
+      <p>If you have Ardublockly already installed, make sure the "<i>setup.py</i> or
+      the "<i>ardublockly_win.bat</i>" program is running.</p>
+    </div>
+    <div class="modal-footer">
+      <a id="gen_alert_ok_link" href="#" class="waves-effect btn-flat modal-close">Okay</a>
+    </div>
+  </div>
+
 </body>
 </html>
\ No newline at end of file