Merge pull request #91 from rickcarlino/master

README updates, Macaw designs, Javascript test suite updates

README.md

@@ -14,13 +14,25 @@ This Repo is the Web based side of FarmBot. It is the glue that ties together al
  4. `rails s`
  5. Go to `http://localhost:3000`
 
+# Running Tests
+
+Please run them before submitting pull requests.
+
+## Ruby Specs
+
+ * `bundle exec rspec spec`
+
+## Javascript Specs
+
+ * ` bundle exec rake spec:javascript`
+
 # How to Contribute
 
  * Check out [Waffle.io](https://waffle.io/farmbot/farmbot-web-backend) for issues that are ready to be worked on.
  * Pull requests are always appreciated, but *please*
    * Write tests.
    * Follow the [Ruby Community Style Guide](https://github.com/bbatsov/ruby-style-guide).
-   * Raise issues. We love to know about issues.
+   * Raise issues. We love to know about issues. Even the issues you think are only relevant to your setup. Just submit issues if you have issues.
 
 # Roadmap
 

Rakefile

@@ -2,5 +2,4 @@
 # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
 
 require File.expand_path('../config/application', __FILE__)
-
 Dss::Application.load_tasks

designs/Manual Control Page/.macaw

@@ -0,0 +1 @@
+macaw

designs/Manual Control Page/css/manual-control-grid.css

@@ -0,0 +1,92 @@
+.fluid-span-1 {
+  width: 7.4166666667%;
+}
+
+.fluid-span-2 {
+  width: 15.8333333333%;
+}
+
+.fluid-span-3 {
+  width: 24.25%;
+}
+
+.fluid-span-4 {
+  width: 32.6666666667%;
+}
+
+.fluid-span-5 {
+  width: 41.0833333333%;
+}
+
+.fluid-span-6 {
+  width: 49.5%;
+}
+
+.fluid-span-7 {
+  width: 57.9166666667%;
+}
+
+.fluid-span-8 {
+  width: 66.3333333333%;
+}
+
+.fluid-span-9 {
+  width: 74.75%;
+}
+
+.fluid-span-10 {
+  width: 83.1666666667%;
+}
+
+.fluid-span-11 {
+  width: 91.5833333333%;
+}
+
+.fluid-span-12 {
+  width: 100%;
+}
+
+.fluid-offset-1 {
+  margin-left: 8.4166666667%;
+}
+
+.fluid-offset-2 {
+  margin-left: 16.8333333333%;
+}
+
+.fluid-offset-3 {
+  margin-left: 25.25%;
+}
+
+.fluid-offset-4 {
+  margin-left: 33.6666666667%;
+}
+
+.fluid-offset-5 {
+  margin-left: 42.0833333333%;
+}
+
+.fluid-offset-6 {
+  margin-left: 50.5%;
+}
+
+.fluid-offset-7 {
+  margin-left: 58.9166666667%;
+}
+
+.fluid-offset-8 {
+  margin-left: 67.3333333333%;
+}
+
+.fluid-offset-9 {
+  margin-left: 75.75%;
+}
+
+.fluid-offset-10 {
+  margin-left: 84.1666666667%;
+}
+
+.fluid-offset-11 {
+  margin-left: 92.5833333333%;
+}
+

designs/Manual Control Page/css/standardize.css

@@ -0,0 +1,491 @@
+/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+[hidden] {
+    display: none;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ * 3. Ensure that the HTML is always 100% height. This fixed body height issues in Chrome for example.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    min-height: 100%;
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+fieldset {
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    font-weight: inherit; /* 1 */
+    margin: 0; /* 3 */
+    padding: 0;
+}
+
+/**
+ * Remove the default button background color that browsers set
+ */
+
+button {
+    background: transparent;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * Make sure selects don't get the default browser styles.
+ */
+select {
+  -webkit-appearance: none;
+}
+
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ * 3. Disable resizing by default.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+    resize: none; /* 3 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-weight: inherit;
+  font-style: inherit;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+/* remember to define focus styles! */
+:focus {
+  outline: 0;
+}
+body {
+  line-height: 1;
+  color: black;
+  background: white;
+}
+ol, ul, li {
+  list-style: none;
+}
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+}
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: "";
+}
+blockquote, q {
+  quotes: "" "";
+}
+a,
+a:hover,
+a:visited {
+  text-decoration: none;
+}
+button,
+input,
+fieldset,
+textarea,
+select {
+  font-size: inherit;
+  color: inherit;
+  border: none;
+}
+img {
+  width: 100%;
+  height: auto;
+}
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+
+* {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}

designs/Manual Control Page/css/styles.css

@@ -0,0 +1,747 @@
+body {
+  background-color: rgb(230, 230, 230);
+  font: 300 0.875em/1.38 'Open Sans';
+  color: rgb(0,0,0);
+}
+
+.absolute-position-control {
+  z-index: 44;
+  margin-left: 1%;
+}
+
+.absolute-position-control .widget-content {
+  float: left;
+  clear: both;
+  width: 99.9999999999%;
+  padding-bottom: 15px;
+}
+
+.column-axis {
+  position: relative;
+  float: left;
+  clear: both;
+  z-index: 37;
+  width: 24.8711340206%;
+}
+
+.column-current-position {
+  position: relative;
+  float: left;
+  z-index: 33;
+  width: 24.8711340206%;
+}
+
+.column-home {
+  position: relative;
+  float: left;
+  z-index: 24;
+  width: 24.8711340206%;
+  height: 181px;
+}
+
+.column-new-position {
+  position: relative;
+  float: left;
+  z-index: 29;
+  width: 24.8711340206%;
+  margin-left: 0.25572%;
+}
+
+.current-position-x {
+  display: inline-block;
+  float: left;
+  width: 100%;
+  padding: 15px;
+  font-size: 1em;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(0,0,0);
+}
+
+.current-position-y,
+.current-position-z {
+  display: inline-block;
+  float: left;
+  clear: both;
+  width: 100%;
+  padding: 15px;
+  font-size: 1em;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(0,0,0);
+}
+
+.device-selector {
+  display: block;
+  float: left;
+  width: 16%;
+  min-width: 200px;
+  height: 45px;
+  margin-left: 1%;
+  padding-right: 15px;
+  padding-left: 15px;
+  border-radius: 3px;
+  font-size: 1.143em;
+  line-height: 1.38;
+  text-align: left;
+  color: rgb(204, 204, 204);
+}
+
+.home-all {
+  display: block;
+  float: left;
+  clear: both;
+  width: 50.2590673575%;
+  height: 30px;
+  margin: 19px 0 0 24.87047%;
+  border-radius: 3px;
+  background-color: rgb(26, 26, 26);
+  font-size: 1.143em;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(255, 255, 255);
+}
+
+.home-x {
+  display: block;
+  float: left;
+  width: 50.2590673575%;
+  height: 30px;
+  margin-left: 24.87047%;
+  border-radius: 3px;
+  background-color: rgb(39, 107, 238);
+  font-size: 1.143em;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(255, 255, 255);
+}
+
+.home-y {
+  display: block;
+  float: left;
+  clear: both;
+  width: 50.2590673575%;
+  height: 30px;
+  margin: 19px 0 0 24.87047%;
+  border-radius: 3px;
+  background-color: rgb(245, 216, 92);
+  font-size: 1.143em;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(26, 26, 26);
+}
+
+.home-z {
+  display: block;
+  float: left;
+  clear: both;
+  width: 50.2590673575%;
+  height: 30px;
+  margin: 19px 0 0 24.87047%;
+  border-radius: 3px;
+  background-color: rgb(135, 31, 208);
+  font-size: 1.143em;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(255, 255, 255);
+}
+
+.image {
+  display: block;
+  float: left;
+  width: 466px;
+  height: auto;
+  overflow: hidden;
+}
+
+.jog-x-n1 {
+  display: block;
+  position: absolute;
+  top: 141px;
+  left: 23.1759656652%;
+  z-index: 12;
+  width: 6.8669527896%;
+  height: 28px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-x-n10 {
+  display: block;
+  position: absolute;
+  top: 141px;
+  left: 16.5236051502%;
+  z-index: 11;
+  width: 6.8669527896%;
+  height: 28px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-x-n100 {
+  display: block;
+  position: absolute;
+  top: 141px;
+  left: 2.7896995708%;
+  z-index: 4;
+  width: 13.7339055793%;
+  height: 28px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-x-p1 {
+  display: block;
+  position: absolute;
+  top: 141px;
+  left: 36.4806866952%;
+  z-index: 13;
+  width: 6.8669527896%;
+  height: 28px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-x-p10 {
+  display: block;
+  position: absolute;
+  top: 141px;
+  left: 43.5622317596%;
+  z-index: 14;
+  width: 6.8669527896%;
+  height: 28px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-x-p100 {
+  display: block;
+  position: absolute;
+  top: 141px;
+  left: 50.643776824%;
+  z-index: 3;
+  width: 13.7339055793%;
+  height: 28px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-y-n1 {
+  display: block;
+  position: absolute;
+  top: 169px;
+  left: 30.2575107296%;
+  z-index: 10;
+  width: 6.0085836909%;
+  height: 34px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-y-n10 {
+  display: block;
+  position: absolute;
+  top: 200px;
+  left: 30.2575107296%;
+  z-index: 9;
+  width: 6.0085836909%;
+  height: 34px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-y-n100 {
+  display: block;
+  position: absolute;
+  top: 235px;
+  left: 30.2575107296%;
+  z-index: 2;
+  width: 6.0085836909%;
+  height: 64px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-y-p1 {
+  display: block;
+  position: absolute;
+  top: 109px;
+  left: 30.2575107296%;
+  z-index: 8;
+  width: 6.0085836909%;
+  height: 34px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-y-p10 {
+  display: block;
+  position: absolute;
+  top: 76px;
+  left: 30.2575107296%;
+  z-index: 7;
+  width: 6.0085836909%;
+  height: 34px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-y-p100 {
+  display: block;
+  position: absolute;
+  top: 11px;
+  left: 30.2575107296%;
+  z-index: 1;
+  width: 6.0085836909%;
+  height: 64px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-z-n1 {
+  display: block;
+  position: absolute;
+  top: 170px;
+  left: 73.3905579399%;
+  z-index: 18;
+  width: 6.0085836909%;
+  height: 34px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-z-n10 {
+  display: block;
+  position: absolute;
+  top: 201px;
+  left: 73.3905579399%;
+  z-index: 17;
+  width: 6.0085836909%;
+  height: 34px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-z-n100 {
+  display: block;
+  position: absolute;
+  top: 234px;
+  left: 73.3905579399%;
+  z-index: 6;
+  width: 6.0085836909%;
+  height: 64px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-z-p1 {
+  display: block;
+  position: absolute;
+  top: 109px;
+  left: 73.3905579399%;
+  z-index: 16;
+  width: 6.0085836909%;
+  height: 34px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-z-p10 {
+  display: block;
+  position: absolute;
+  top: 76px;
+  left: 73.3905579399%;
+  z-index: 15;
+  width: 6.0085836909%;
+  height: 34px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.jog-z-p100 {
+  display: block;
+  position: absolute;
+  top: 12px;
+  left: 73.3905579399%;
+  z-index: 5;
+  width: 6.0085836909%;
+  height: 64px;
+  border-radius: 3px;
+  font: 400 1.143em/1.38 Helvetica;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.move {
+  display: block;
+  float: left;
+  clear: both;
+  width: 100%;
+  height: 34px;
+  margin-top: 15px;
+  border: 1px solid rgb(0, 0, 0);
+  border-radius: 3px;
+  background-color: rgb(26, 26, 26);
+  font-size: 1.143em;
+  font-weight: 400;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(255, 255, 255);
+}
+
+.move-to-x {
+  display: block;
+  float: left;
+  width: 100%;
+  height: 34px;
+  padding: 15px;
+  border: 2px solid rgb(39, 107, 238);
+  border-radius: 5px;
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.move-to-y {
+  display: block;
+  float: left;
+  clear: both;
+  width: 100%;
+  height: 34px;
+  margin-top: 15px;
+  padding: 15px;
+  border: 2px solid rgb(245, 216, 92);
+  border-radius: 5px;
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.move-to-z {
+  display: block;
+  float: left;
+  clear: both;
+  width: 100%;
+  height: 34px;
+  margin-top: 15px;
+  padding: 15px;
+  border: 2px solid rgb(135, 31, 208);
+  border-radius: 5px;
+  font-size: 1em;
+  font-weight: 400;
+  line-height: 1.38;
+  text-align: center;
+  color: rgb(0, 0, 0);
+}
+
+.navigation-dashboard,
+.navigation-farm-designer,
+.navigation-help,
+.navigation-settings {
+  display: inline-block;
+  float: left;
+  height: 45px;
+  padding-right: 15px;
+  padding-left: 15px;
+  border-radius: 3px;
+  font-size: 1.143em;
+  line-height: 1.38;
+  text-align: left;
+  color: rgb(204, 204, 204);
+}
+
+.navigation-manual-control {
+  display: inline-block;
+  float: left;
+  height: 45px;
+  padding-right: 15px;
+  padding-left: 15px;
+  border-radius: 3px;
+  font-size: 1.143em;
+  font-weight: 600;
+  line-height: 1.38;
+  text-align: left;
+  color: rgb(204, 204, 204);
+}
+
+.relative-position-control {
+  z-index: 47;
+  margin-left: 1.0625%;
+}
+
+.relative-position-control .widget-content {
+  position: relative;
+  width: 466px;
+  margin: 57px auto 0;
+}
+
+.user-settings {
+  display: inline-block;
+  float: right;
+  height: 45px;
+  margin-right: 1%;
+  padding-right: 15px;
+  padding-left: 15px;
+  border-radius: 3px;
+  font-size: 1.143em;
+  line-height: 1.38;
+  text-align: right;
+  color: rgb(204, 204, 204);
+}
+
+.widget {
+  position: relative;
+  float: left;
+  width: 48.5%;
+  margin-top: 60px;
+  background-color: rgb(217, 217, 217);
+}
+
+.widget-content-titles {
+  position: relative;
+  float: left;
+  width: 99.9999999999%;
+}
+
+.widget-header {
+  display: block;
+  float: left;
+  width: 99.9999999999%;
+  padding: 15px 45px 15px 15px;
+  border-radius: 3px;
+  font-size: 1.429em;
+  line-height: 1.38;
+  text-align: left;
+  color: rgb(0, 0, 0);
+}
+
+._container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 55;
+  width: 100%;
+  height: 45px;
+  background-color: rgb(26, 26, 26);
+}
+
+._text {
+  display: inline-block;
+  float: left;
+  padding: 15px;
+  line-height: 1.38;
+  color: rgb(0,0,0);
+}
+
+.column-axis ._text {
+  width: 100%;
+  font-size: 1em;
+}
+
+.widget-content-titles ._text {
+  width: 24.9999999999%;
+  font-size: 0.857em;
+  font-weight: 800;
+}
+
+.column-axis ._text-6,
+.column-axis ._text-7 {
+  clear: both;
+}
+
+.widget-content-titles ._text-2,
+.widget-content-titles ._text-3,
+.widget-content-titles ._text-4 {
+  text-align: center;
+}
+
+@media(max-width: 1200px) {
+  .absolute-position-control {
+    z-index: 44;
+  }
+
+  .column-home .home-all,
+  .column-home .home-x,
+  .column-home .home-y,
+  .column-home .home-z {
+    margin-left: 24.85703%;
+  }
+
+  .relative-position-control {
+    clear: both;
+    z-index: 47;
+    margin-top: 15px;
+  }
+
+  .relative-position-control .widget-content {
+    float: left;
+    clear: both;
+    margin-top: 0;
+    margin-right: 0;
+    margin-left: 20.1241999999%;
+  }
+
+  .widget {
+    position: relative;
+    width: 65%;
+    margin-left: 17.5%;
+  }
+
+  .widget-content .column-axis {
+    position: relative;
+    z-index: 37;
+  }
+
+  .widget-content .column-current-position {
+    position: relative;
+    z-index: 33;
+  }
+
+  .widget-content .column-home {
+    position: relative;
+    z-index: 24;
+  }
+
+  .widget-content .column-new-position {
+    position: relative;
+    z-index: 29;
+    margin-left: 0.25441%;
+  }
+
+  .widget-content .image {
+    height: auto;
+  }
+
+  ._container .user-settings-1 {
+    margin-right: 0;
+  }
+
+  .widget-content-titles ._text-4 {
+    clear: both;
+  }
+}
+
+@media(max-width: 800px) {
+  body {
+    font-size: 0.875em;
+  }
+
+  .absolute-position-control {
+    z-index: 44;
+  }
+
+  .column-home .home-all,
+  .column-home .home-x,
+  .column-home .home-y,
+  .column-home .home-z {
+    margin-left: 24.84975%;
+  }
+
+  .relative-position-control {
+    z-index: 47;
+  }
+
+  .relative-position-control .widget-content {
+    margin-left: 0;
+  }
+
+  .widget {
+    position: relative;
+    width: 98%;
+    margin-left: 1%;
+  }
+
+  .widget-content .column-axis {
+    position: relative;
+    z-index: 37;
+  }
+
+  .widget-content .column-current-position {
+    position: relative;
+    z-index: 33;
+  }
+
+  .widget-content .column-home {
+    position: relative;
+    z-index: 24;
+  }
+
+  .widget-content .column-new-position {
+    position: relative;
+    z-index: 29;
+    margin-left: 0.2571%;
+  }
+
+  .widget-content .image {
+    height: auto;
+  }
+
+  ._container .navigation-dashboard-1 {
+    clear: both;
+    margin-top: -45px;
+    margin-left: 17%;
+  }
+
+  ._container .navigation-farm-designer-1 {
+    margin-top: -45px;
+    margin-left: 30.5%;
+  }
+
+  ._container .navigation-help-1 {
+    margin-top: -45px;
+    margin-left: 75.125%;
+  }
+
+  ._container .navigation-manual-control-1 {
+    margin-top: -45px;
+    margin-left: 47.125%;
+  }
+
+  ._container .navigation-settings-1 {
+    margin-top: -45px;
+    margin-left: 64.375%;
+  }
+
+  ._container .user-settings-1 {
+    clear: both;
+    margin-right: -0.5%;
+  }
+}

designs/Manual Control Page/manual-control.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="initial-scale=1.0">
+  <title>manual-control</title>
+  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,800,600" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="css/standardize.css">
+  <link rel="stylesheet" href="css/manual-control-grid.css">
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<body class="body manual-control clearfix">
+  <header class="_container clearfix">
+    <button class="device-selector">Device Name&nbsp;</button>
+    <button class="navigation-dashboard navigation-dashboard-1">Dashboard    </button>
+    <button class="navigation-farm-designer navigation-farm-designer-1">Farm Designer    </button>
+    <button class="navigation-manual-control navigation-manual-control-1">Manual Control    </button>
+    <button class="navigation-settings navigation-settings-1">Settings    </button>
+    <button class="navigation-help navigation-help-1">Help    </button>
+    <button class="user-settings user-settings-1">Welcome, Rory!</button>
+  </header>
+  <div class="widget absolute-position-control clearfix">
+    <button class="widget-header h2">Absolute Position Control</button>
+    <div class="widget-content clearfix">
+      <div class="widget-content-titles h3 clearfix">
+        <p class="_text">Axis</p>
+        <p class="_text _text-2">Current Position (m)</p>
+        <p class="_text _text-3">Enter New Position (m)</p>
+        <p class="_text _text-4">Home</p>
+      </div>
+      <div class="column-axis clearfix">
+        <p class="_text">Gantry (X)</p>
+        <p class="_text _text-6">Cross-Slide (Y)</p>
+        <p class="_text _text-7">Tool Mount (Z)</p>
+      </div>
+      <div class="column-current-position clearfix">
+        <p class="current-position-x">10.345</p>
+        <p class="current-position-y">10.345</p>
+        <p class="current-position-z">10.345</p>
+      </div>
+      <div class="column-new-position clearfix">
+        <input class="move-to-x" type="number">
+        <input class="move-to-y" name="Enter an X coordinate in meters" type="number">
+        <input class="move-to-z" name="Enter an X coordinate in meters" type="number">
+        <button class="move">Move</button>
+      </div>
+      <div class="column-home clearfix">
+        <button class="home-x">X</button>
+        <button class="home-y">Y</button>
+        <button class="home-z">X</button>
+        <button class="home-all">All</button>
+      </div>
+    </div>
+  </div>
+  <div class="widget relative-position-control clearfix">
+    <button class="widget-header h2">Relative Position Control</button>
+    <div class="widget-content clearfix">
+      <img class="image" src="images/Jog Control Pad.svg">
+      <button class="jog-z-n1">&nbsp;</button>
+      <button class="jog-z-n10">&nbsp;</button>
+      <button class="jog-z-p1">&nbsp;</button>
+      <button class="jog-z-p10">&nbsp;</button>
+      <button class="jog-x-p10">&nbsp;</button>
+      <button class="jog-x-p1">&nbsp;</button>
+      <button class="jog-x-n1">&nbsp;</button>
+      <button class="jog-x-n10">&nbsp;</button>
+      <button class="jog-y-n1">&nbsp;</button>
+      <button class="jog-y-n10">&nbsp;</button>
+      <button class="jog-y-p1">&nbsp;</button>
+      <button class="jog-y-p10">&nbsp;</button>
+      <button class="jog-z-n100">&nbsp;</button>
+      <button class="jog-z-p100">&nbsp;</button>
+      <button class="jog-x-n100">&nbsp;</button>
+      <button class="jog-x-p100">&nbsp;</button>
+      <button class="jog-y-n100">&nbsp;</button>
+      <button class="jog-y-p100">&nbsp;</button>
+    </div>
+  </div>
+</body>
+</html>

spec/javascripts/example_spec.coffee

@@ -1,15 +1,11 @@
-#= require application
-#= require angular/angular-mock
-
-describe "Restauranteur controllers", ->
+describe "MovementController", ->
   beforeEach ->
     module("FarmBot")
     inject ($controller) ->
       @scope = {}
       @ctrl = $controller("MovementController", $scope: scope)
 
-  describe "MovementController", ->
-    it "initializes X, Y and Z", ->
-      expect(scope.x).toBe(0)
-      expect(scope.y).toBe(0)
-      expect(scope.z).toBe(0)
+  it "initializes X, Y and Z", ->
+    expect(scope.x).toBe(0)
+    expect(scope.y).toBe(0)
+    expect(scope.z).toBe(0)

spec/javascripts/helpers/includes.js.coffee

@@ -0,0 +1,5 @@
+# This file includes the main application.
+# It, in turn, is included by the tests.
+# Prevents us having to include application files on every spec.
+#= require application
+#= require angular/angular-mock

spec/javascripts/ng-controllers/movement_controller_spec.coffee

@@ -0,0 +1,11 @@
+describe "MovementController", ->
+  beforeEach ->
+    module("FarmBot")
+    inject ($controller) ->
+      @scope = {}
+      @ctrl = $controller("MovementController", $scope: scope)
+
+  it "initializes X, Y and Z", ->
+    expect(scope.x).toBe(0)
+    expect(scope.y).toBe(0)
+    expect(scope.z).toBe(0)

spec/javascripts/ng-controllers/settings_controller_spec.js.coffee

@@ -0,0 +1,12 @@
+describe "SettingsController", ->
+  beforeEach ->
+    module("FarmBot")
+    inject ($controller) ->
+      @scope = {}
+      @ctrl = $controller("SettingsController", $scope: scope)
+
+  it "initializes an empty default device", ->
+    expect(scope.device).toEqual({})
+
+  it "has a list of user created devices", ->
+  	expect(scope.devices).toBeDefined()