Functionality added to plain arduino webapp:

Load blocks from XML file
Save blocks from XML file
Send Arduino code to the ArduServerCompiler
CSS Modal window to display data back
Alert to indicate settings are not yet implemented.

apps/arduino/arduino.js

@@ -30,22 +30,7 @@ Arduino.tabClick = function(clickedName) {
   if (document.getElementById('tab_xml').className == 'tabon') {
     var xmlTextarea = document.getElementById('content_xml');
     var xmlText = xmlTextarea.value;
-    var xmlDom = null;
-    try {
-      xmlDom = Blockly.Xml.textToDom(xmlText);
-    } catch (e) {
-      var message = 'Error parsing XML:\\n' + e + '\\n\\nSelect \'OK\' to ' +
-      'abandon your changes or \'Cancel\' to further edit the XML.';
-      var q = window.confirm(message);
-      if (!q) {
-        // Leave the user on the XML tab.
-        return;
-      }
-    }
-    if (xmlDom) {
-      Blockly.mainWorkspace.clear();
-      Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xmlDom);
-    }
+    Arduino.replaceBlocksfromXml(xmlText);
   }
 
   // Deselect the button, and ensure side panel is hidden
@@ -135,9 +120,14 @@ Arduino.init = function() {
   Arduino.tabClick(Arduino.selected);
 
   // Binding buttons
+  Arduino.bindClick('peekCode', Arduino.peekCode);
+  Arduino.bindClick('openButton', Arduino.loadXmlFile);
+  Arduino.bindClick('saveButton',   Arduino.saveXmlFile);
   Arduino.bindClick('trashButton', Arduino.discard);
+  Arduino.bindClick('settingsButton', function() {
+      alert('Function not yet implemented.\n' +
+            'Try the Arduino Material webapp instead.')});
   Arduino.bindClick('runButton', Arduino.loadToArduino);
-  Arduino.bindClick('peekCode', Arduino.peekCode);
 
   // Binding tabs
   for (var i = 0; i < Arduino.TABS_.length; i++) {
@@ -160,10 +150,24 @@ Arduino.adjustViewport = function() {
 };
 
 /**
- * Load and execute the user's code to the Arduino.
+ * Send the Arduino Code to the ArduServerCompiler to process.
  */
 Arduino.loadToArduino = function() {
-  //TODO: Add ajax function call to send string with code to Python server
+  ArduServerCompiler.sendSketchToServer(
+      Blockly.Arduino.workspaceToCode(),
+      Arduino.loadToArduinoReturn);
+};
+
+/**
+ * Send the Arduino Code to the ArduServerCompiler to process
+ */
+Arduino.loadToArduinoReturn = function(data_back_el) {
+  // edit modal with new content
+  var modal = document.getElementById('modal_content');
+  modal.innerHTML = '';
+  modal.appendChild(data_back_el);
+  // display modal
+  document.getElementById('modal_toggle').checked = true;
 };
 
 /**
@@ -316,6 +320,84 @@ Arduino.injectBlockly = function(blockly_el, toolbox_path) {
   request.send(null);
 };
 
+/**
+ * Loads an XML file from the users file system and adds the blocks into the
+ * Blockly workspace.
+ */
+Arduino.loadXmlFile = function() {
+  // Create event listener function
+  var parseInputXMLfile = function(e) {
+    var files = e.target.files;
+    var reader = new FileReader();
+    reader.onload = function() {
+      var success = Arduino.replaceBlocksfromXml(reader.result);
+      if (success) {
+        Arduino.renderContent();
+      } else {
+        alert('Invalid XML!\nThe XML file was not successfully parsed into ' +
+              'blocks. Please review the XML code and try again.');
+      }
+    };
+    reader.readAsText(files[0]);
+  }
+  // Create once invisible browse button with event listener, and click it
+  var select_file = document.getElementById("select_file");
+  if (select_file == null) {
+    var select_file_dom = document.createElement('INPUT');
+    select_file_dom.type = 'file';
+    select_file_dom.id = 'select_file';
+    select_file_dom.style = 'display: none';
+    document.body.appendChild(select_file_dom);
+    select_file = document.getElementById("select_file");
+    select_file.addEventListener('change', parseInputXMLfile, false);
+  }
+  select_file.click();
+};
+
+/**
+ * Parses the XML from its input to generate and replace the blocks in the
+ * Blockly workspace.
+ * @param {!string} blocks_xml String of XML code for the blocks.
+ * @return {!boolean} Indicates if the XML into blocks parse was successful.
+ */
+Arduino.replaceBlocksfromXml = function(blocks_xml) {
+  var xmlDom = null;
+  var success = true;
+  try {
+    xmlDom = Blockly.Xml.textToDom(blocks_xml);
+  } catch (e) {
+    success = false;
+    var message = 'Error parsing XML:\n' + e + '\n\nSelect \'OK\' to ' +
+    'abandon your changes or \'Cancel\' to further edit the XML.';
+    var errorAlert = window.confirm(message);
+    if (!errorAlert) {
+      // Leave the user on the current state
+      return success;
+    }
+  }
+  if (xmlDom) {
+    Blockly.mainWorkspace.clear();
+    Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xmlDom);
+  }
+  return success;
+};
+
+/**
+ * Creates an XML file containing the blocks from the Blockly workspace and
+ * prompts the users to save it into their local file system.
+ */
+Arduino.saveXmlFile = function() {
+  // Generate XML
+  var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
+  var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
+  // Create blob
+  var blob = new Blob(
+      [xmlText],
+      {type: "text/plain;charset=utf-8"});
+  // Prompt user to save as a file
+  saveAs(blob, "ardublockly.xml");
+};
+
 /**
  * Bind a function to a button's click event.
  * On touch enabled browsers, ontouchend is treated as equivalent to onclick.

apps/arduino/index.html

@@ -42,11 +42,13 @@
   <script src="../../generators/arduino/variables.js"></script>
   <!-- Load Blockly's language strings -->
   <script src="../../msg/js/en.js"></script>
+  <!-- Arduino Server Compiler -->
+  <script src="../../ArduinoServerCompiler/js/ArduServerCompiler.js"></script>
   <!-- Prettify -->
   <link rel="stylesheet" href="../../demos/prettify.css">
   <script src="../../demos/prettify.js"></script>
-  <!-- Webapp js -->
-  <script src="arduino.js"></script>
+  <!-- FileSaver from arduino materia app -->
+  <script src="../arduino_material/js_libs/FileSaver.min.js"></script>
 </head>
 
 <body>
@@ -65,18 +67,18 @@
                 <button id="peekCode" class="button_text" title="Toggle the code view on the side">
                   Code peek <img src="../../media/1x1.gif">
                 </button>
-                <button id="" title="Load blocks">
+                <button id="openButton" title="Load blocks">
                   <img src="../../media/1x1.gif" class="icon21 load">
                 </button>
-                <button id="" title="Save blocks">
+                <button id="saveButton" title="Save blocks">
                   <img src="../../media/1x1.gif" class="icon21 save">
                 </button>
-                <button id="" title="Open the Settings">
-                  <img src="../../media/1x1.gif" class="icon21 settings">
-                </button>
                 <button id="trashButton" title="Discard all blocks">
                   <img src="../../media/1x1.gif" class="icon21 trash">
                 </button>
+                <button id="settingsButton" title="Open the Settings">
+                  <img src="../../media/1x1.gif" class="icon21 settings">
+                </button>
                 <button id="runButton" class="primary" title="Run the program defined by the blocks in the workspace">
                   <img src='../../media/1x1.gif' class="icon21 run">
                 </button>
@@ -103,5 +105,19 @@
       </tr>
     </table>
   </div>
+
+  <!-- Modal -->
+  <input type="checkbox" id="modal_toggle" />
+  <div class="modal">
+    <div id="modal_content"></div>
+    <p>
+      <button onclick="document.getElementById('modal_toggle').checked=false" class="primary">
+        Okay
+      </button>
+    <p>
+  </div>
+
+  <!-- Webapp js -->
+  <script src="arduino.js"></script>
 </body>
 </html>

apps/arduino/style.css

@@ -261,3 +261,55 @@ img.load{
   height: 21px;
   width: 1px;
 }
+
+/* Modal */
+.modal {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  margin: auto;
+  padding: 20px;
+  min-width: 350px;
+  max-width: 800px;
+  width: 50%;
+  min-height: 150px;
+  max-height: 800px;
+  height: 50%;
+  background: rgba(235,235,235,0.9);
+  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
+  box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  -webkit-transition: opacity 1s ease;
+  -moz-transition: opacity 1s ease;
+  -ms-transition: opacity 1s ease;
+  -o-transition: opacity 1s ease;
+  transition: opacity 1s ease;
+  overflow: scroll;
+  word-wrap: break-word;
+  overflow-x: hidden;
+}
+.modal h4 {
+  margin: 5px 0px;
+  color: #232323;
+  text-transform: uppercase;
+  font: 25px/1.5 Helvetica, Verdana, sans-serif;
+}
+.modal p {
+  color: #444;
+  text-align: left;
+  font: 13px/1.8 Georgia, Times, sans-serif;
+}
+input#modal_toggle {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+input#modal_toggle:checked + .modal {
+  opacity: 1;
+  z-index: 1;
+}