Added server compiler settings to plain arduino webapp

apps/arduino/arduino.js

@@ -124,9 +124,7 @@ Arduino.init = function() {
   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('settingsButton', Arduino.openSettings);
   Arduino.bindClick('runButton', Arduino.loadToArduino);
 
   // Binding tabs
@@ -149,6 +147,20 @@ Arduino.adjustViewport = function() {
   }
 };
 
+/**
+ * Open a centered pop up with the server compiler settings.
+ */
+Arduino.openSettings = function() {
+  var width = 500;
+  var height = 400;
+  var left = (screen.width / 2) - (width / 2);
+  var top = (screen.height / 2) - (height / 2);
+  window.open('settings.html', '_blank',
+      'directories=no, titlebar=no, toolbar=no, location=no, status=no, ' + 
+      'menubar=no, scrollbars=yes, resizable=yes, top=' + top + ', ' +
+      'left=' + left + ', width=' + width + ', height=' + height + '');
+}
+
 /**
  * Send the Arduino Code to the ArduServerCompiler to process.
  */

apps/arduino/arduino_settings.js

+/**
+ * @license Licensed under the Apache License, Version 2.0 (the "License"):
+ *          http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * @fileoverview JavaScript for ArduBlockly's Server Compiler settings.
+ */
+'use strict';
+
+/**
+ * Create a namespace for the application.
+ */
+var ArduinoSettings = {};
+
+/**
+ * Initialize the settings form data on page load.
+ */
+window.addEventListener('load', function() {
+  ArduServerCompiler.requestCompilerLocation(
+      ArduinoSettings.setCompilerLocationHtml);
+  ArduServerCompiler.requestSketchLocation(
+      ArduinoSettings.setSketchLocationHtml);
+  ArduServerCompiler.requestArduinoBoards(
+      ArduinoSettings.setArduinoBoardsHtml);
+  ArduServerCompiler.requestSerialPorts(ArduinoSettings.setSerialPortsHtml);
+  ArduServerCompiler.requestIdeOptions(ArduinoSettings.setIdeHtml);
+});
+
+/**
+ * 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.
+ */
+ArduinoSettings.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;
+  }
+};
+
+/**
+ * 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.
+ */
+ArduinoSettings.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;
+  }
+};
+
+/**
+ * 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.
+ */
+ArduinoSettings.setArduinoBoardsHtml = function(new_el) {
+  var board_dropdown = document.getElementById('board')
+  if (board_dropdown != null) {
+    new_el.id = 'board';
+    new_el.onchange = ArduinoSettings.setBoard;
+    board_dropdown.parentNode.replaceChild(new_el, board_dropdown);
+  }
+  // Refresh the materialize select menus
+  // TODO: Currently a reported bug from Materialize
+   $('select').material_select();
+};
+
+/**
+ * Sets the Arduino Board type with the selected user input from the drop down.
+ */
+ArduinoSettings.setBoard = function() {
+  var el = document.getElementById("board");
+  var board_value = el.options[el.selectedIndex].value;
+  //TODO: check how ArduServerCompiler deals with invalid data and sanitise here
+  ArduServerCompiler.setArduinoBoard(
+      board_value, ArduinoSettings.setArduinoBoardsHtml);
+};
+
+/**
+ * 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.
+ */
+ArduinoSettings.setSerialPortsHtml = function(new_el) {
+  var serial_dropdown = document.getElementById('serial_port')
+  if (serial_dropdown != null) {
+    new_el.id = 'serial_port';
+    new_el.onchange = ArduinoSettings.setSerial;
+    serial_dropdown.parentNode.replaceChild(new_el, serial_dropdown);
+  }
+  // Refresh the materialize select menus
+  // TODO: Currently a reported bug from Materialize
+   $('select').material_select();
+};
+
+/**
+ * Sets the Serial Port with the selected user input from the drop down.
+ */
+ArduinoSettings.setSerial = function() {
+  var el = document.getElementById("serial_port");
+  var serial_value = el.options[el.selectedIndex].value;
+  //TODO: check how ArduServerCompiler deals with invalid data and sanitise
+  ArduServerCompiler.setSerialPort(
+      serial_value, ArduinoSettings.setSerialPortsHtml);
+};
+
+/**
+ * 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.
+ */
+ArduinoSettings.setIdeHtml = function(new_el) {
+  var ide_dropdown = document.getElementById('ide_settings')
+  if (ide_dropdown != null) {
+    new_el.id = 'ide_settings';
+    new_el.onchange = ArduinoSettings.setIdeSettings;
+    ide_dropdown.parentNode.replaceChild(new_el, ide_dropdown);
+  }
+  // Refresh the materialize select menus
+  // TODO: Currently a reported bug from Materialize
+   $('select').material_select();
+};
+
+/**
+ * Sets the IDE settings data with the selected user input from the drop down.
+ */
+ArduinoSettings.setIdeSettings = function() {
+  var el = document.getElementById("ide_settings");
+  var ide_value = el.options[el.selectedIndex].value;
+  //TODO: check how ArduServerCompiler deals with invalid data and sanitise
+  ArduServerCompiler.setIdeOptions(ide_value, ArduinoSettings.setIdeHtml);
+};

apps/arduino/settings.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="google" value="notranslate">
+  <title>Ardublockly: Arduino Code</title>
+  <link rel="stylesheet" href="style_settings.css">
+  <!-- Arduino Server Compiler -->
+  <script src="../../ArduinoServerCompiler/js/ArduServerCompiler.js"></script>
+</head>
+
+<body>
+  <div class="settings_wrapper">
+    <h1>Settings</h1>
+    <div class="settings_div">
+      <label>Compiler Location:</label> <br>
+      <input type="text" id="settings_compiler_location" readonly>
+    </div>
+    <div class="settings_div">
+      <label>Sketch Folder:</label> <br>
+      <input type="text" id="settings_sketch_location" readonly>
+    </div>
+    <div class="settings_div">
+      <label>Arduino Board:</label> <br>
+      <select name="settings_board" id="board">
+        <option value="uno">Uno</option>
+        <option value="leonardo">Leonardo</option>
+        <option value="mega">Mega</option>
+      </select>
+    </div>
+    <div class="settings_div">
+      <label>COM Port:</label> <br>
+      <select name="settings_serial" id="serial_port">
+        <option value="COM4">COM unknown</option>
+      </select>
+    </div>
+    <div class="settings_div">
+      <label>IDE:</label> <br>
+      <select name="settings_ide" id="ide_settings" onchange="ArduinoMaterial.setIdeSettings(this.value)">
+        <option value="ide_upload">Compile</option>
+        <option value="ide_only">Load</option>
+      </select>
+    </div>
+  </div>
+
+  <!-- Settings js -->
+  <script src="arduino_settings.js"></script>
+</body>
+</html>

apps/arduino/style_settings.css

+/* General HTML */
+html {
+  height: 100%;
+}
+body {
+  background-color: #fff;
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  height: 100%;
+}
+h1 {
+  font-weight: normal;
+  font-size: 140%;
+  margin: 0px;
+}
+select,
+input {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+/* Table */
+.settings_wrapper {
+  height: -moz-calc(100% - 40px);
+  width: -moz-calc(100% - 40px);
+  /* WebKit */
+  height: -webkit-calc(100% - 40px);
+  width: -webkit-calc(100% - 40px);
+  /* Opera */
+  height: -o-calc(100% - 40px);
+  width: -o-calc(100% - 40px);
+  /* Standard */
+  height: calc(100% - 40px);
+  width: calc(100% - 40px);
+  padding: 20px;
+}
+
+.settings_div {
+  margin: 24px 0px;
+  width: 100%;
+}
+
+.settings_div input,
+.settings_div select {
+  width: 100%;
+}