robeaux 0.2.0 → 0.3.0

data/js/widgets/attitude.html

@@ -0,0 +1,32 @@
+<div class="attitude" ng-style="styles()">
+  <div class="sky"></div>
+  <div class="earth"></div>
+</div>
+
+<style>
+  widget[data-name="attitude"] {
+    overflow: hidden;
+  }
+
+  widget[data-name="attitude"] .attitude {
+    width: 200%;
+    height: 200%;
+    margin-left: -50%;
+    margin-top: -50%;
+  }
+
+  widget[data-name="attitude"] .attitude div {
+    width: 100%;
+    height: 54%;
+    padding: 0;
+    margin: 0;
+  }
+
+  widget[data-name="attitude"] .attitude .sky {
+    background: #02A2F9;
+  }
+
+  widget[data-name="attitude"] .attitude .earth {
+    background: #A07857;
+  }
+</style>

data/js/widgets/attitude.js

@@ -0,0 +1,27 @@
+$scope.styles = function() {
+  var styles = {};
+
+  var prefixes = [
+    "-webkit-",
+    "-moz-",
+    "-ms-",
+    "-o-",
+    ""
+  ];
+
+  prefixes.forEach(function(prefix) {
+    styles[prefix + "transform"] = "rotate(" + $scope.attitude / 4 + "turn)";
+  });
+
+  return styles;
+};
+
+var url = "/api/robots/" + $attrs.robot + "/devices/" + $attrs.device + "/events/" + $attrs.event;
+
+var es = new EventSource(url);
+
+es.addEventListener('message', function(message) {
+  $scope.$apply(function() {
+    $scope.attitude = JSON.parse(message.data);
+  });
+}, false);

data/js/widgets/mindwave.html

@@ -0,0 +1,51 @@
+<div class="column {{ name }}"
+     ng-style="{ 'height': value + '%', 'left': (22 * $index) + 'px' }"
+     ng-repeat="(name, value) in eeg">
+</div>
+
+<style>
+  widget[data-name="mindwave"] {
+    position: relative;
+  }
+
+  widget[data-name="mindwave"] .column {
+    display: inline-bLock;
+    background: red;
+    width: 20px;
+    margin: 2px;
+    position: absolute;
+    bottom: 10px;
+  }
+
+  widget[data-name='mindwave'] .Delta {
+    background: #52A6FF;
+  }
+
+  widget[data-name='mindwave'] .Theta {
+    background: #BF3629;
+  }
+
+  widget[data-name='mindwave'] .LoAlpha {
+    background: #61BF40;
+  }
+
+  widget[data-name='mindwave'] .HiAlpha {
+    background: #417F2B;
+  }
+
+  widget[data-name='mindwave'] .LoBeta {
+    background: #895ABF;
+  }
+
+  widget[data-name='mindwave'] .HiBeta {
+    background: #5C3C7F;
+  }
+
+  widget[data-name='mindwave'] .LoGamma {
+    background: #536FBF;
+  }
+
+  widget[data-name='mindwave'] .MidGamma {
+    background: #374A7F;
+  }
+</style>

data/js/widgets/mindwave.js

@@ -0,0 +1,23 @@
+var scaleEEG = function(original) {
+  var eeg = {};
+
+  for (var key in original) {
+    var num = original[key];
+    num = (num / 20000000) * 100;
+    eeg[key] = num;
+  }
+
+  return eeg;
+};
+
+var url = "/api/robots/" + $attrs.robot + "/devices/" + $attrs.device + "/events/" + $attrs.event;
+
+var es = new EventSource(url);
+
+es.addEventListener('message', function(message) {
+  var eeg = JSON.parse(message.data);
+
+  $scope.$apply(function() {
+    $scope.eeg = scaleEEG(eeg);
+  });
+}, false);

data/less/app.less

@@ -0,0 +1,21 @@
+@import 'vendor/elements';
+@import 'vendor/semantic-grid';
+@import 'themes/default';
+@import 'support/mixins';
+
+/* Objects */
+@import 'objects/buttons';
+@import 'objects/connections';
+@import 'objects/device';
+@import 'objects/forms';
+@import 'objects/list';
+@import 'objects/nav';
+@import 'objects/robot';
+@import 'objects/themes';
+@import 'objects/widgets';
+
+/* Views */
+@import 'views/devices';
+@import 'views/robots';
+@import 'views/themes';
+@import 'views/widgets';

data/less/objects/buttons.less

@@ -0,0 +1,32 @@
+.btn {
+  .button-size(10px; 15px; 15px; 20px; 5px);
+  display: inline-block;
+  border: 0;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.btn-big {
+  .button-size(15px; 30px; 15px; 15px; 5px);
+}
+
+.btn-robot {
+  .button-variant(@btn-robot-color; @btn-robot-background; @btn-robot-color);
+  text-transform: uppercase;
+}
+
+.btn-run, .btn-reset {
+  .button-variant(@btn-run-color; @btn-run-background; @btn-run-color);
+  text-transform: uppercase;
+}
+
+.btn-device, .btn-save {
+  .button-variant(@btn-device-color; @btn-device-background; @btn-device-color);
+  text-transform: uppercase;
+}
+
+.btn-connect {
+  .button-variant(@btn-connect-color; @btn-connect-background; @btn-connect-color);
+  text-transform: uppercase;
+}

data/less/objects/connections.less

@@ -0,0 +1,28 @@
+.connections {
+  .robot-devices {
+    .name {
+      display: inline-block;
+      margin-left: 20px;
+      font-weight: bold;
+    }
+
+    .details {
+      display: inline-block;
+      margin-left: 20px;
+      color: @color04;
+    }
+  }
+
+  .robot-connections {
+    .name {
+      display: inline-block;
+      margin-left: 20px;
+      color: @color04;
+    }
+
+    .details {
+      display: inline-block;
+      margin-left: 20px;
+    }
+  }
+}

data/less/objects/device.less

@@ -0,0 +1,30 @@
+.device-detail {
+  h2 {
+    text-align: center;
+  }
+
+  table {
+    margin-top: 15px;
+
+    th {
+      border-bottom: 1px solid #ccc;
+      line-height: 34px;
+    }
+
+    td {
+      font-family: @code-font-family;
+      padding: 3px;
+    }
+  }
+
+  .listeners {
+    margin-top: 0;
+  }
+  
+  .remove {
+    color: #f00;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}

data/less/objects/forms.less

@@ -0,0 +1,29 @@
+input[type="text"], select, textarea {
+  display: inline-block;
+  line-height: @line-height-base;
+  font-size: @body-font-size;
+  color: @body-text-color;
+  .form-control();
+  .form-control-focus(@input-border-color-focus);
+  box-sizing: border-box;
+}
+
+button {
+  outline: none;
+}
+
+button::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
+input[type="submit"]::-moz-focus-inner,
+input[type="file"] > input[type="button"]::-moz-focus-inner {
+  outline: none;
+}
+
+button:focus::-moz-focus-inner,
+input[type="reset"]:focus::-moz-focus-inner,
+input[type="button"]:focus::-moz-focus-inner,
+input[type="submit"]:focus::-moz-focus-inner,
+input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
+  outline: none;
+}

data/less/objects/list.less

@@ -0,0 +1,27 @@
+.list {
+  margin-top: 20px;
+
+  .close {
+    float: right;
+    color: #ccc;
+    &:hover {
+      color: #f00;
+      cursor: pointer;
+    }
+  }
+
+  .theme, .widget {
+    display: block;
+    clear: both;
+    padding: 5px;
+    border-bottom: 1px dotted #ccc;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .selected {
+    background: #eee;
+  }
+}

data/less/objects/nav.less

@@ -0,0 +1,33 @@
+
+nav {
+  background: @nav-background-color;
+  height: 70px;
+  margin-bottom: 20px;
+
+  .logo {
+    display: inline-block;
+    margin: 15px 15px 0 15px;
+  }
+
+  .links {
+    float: right;
+    margin-top: 15px;
+    a {
+      color: @nav-link-color;
+      text-decoration: none;
+      display: inline-block;
+      .button-size(10px; 15px; 15px; 20px; 2px);
+      &:hover {
+        color: @nav-link-color-hover;
+        text-decoration: none;
+      }
+    }
+
+    .active {
+      background: @nav-link-background-hover;
+      &:hover {
+        color: @nav-link-color;
+      }
+    }
+  }
+}

data/less/objects/robot.less

@@ -0,0 +1,43 @@
+.robot {
+  .container();
+
+  .details { 
+    float: right;
+    line-height: 43px;
+    span {
+      color: @connection-digits-color;
+      margin-left: 50px;
+    }
+
+    strong {
+      color: @body-text-color;
+      margin-right: 20px;
+    }
+  }
+
+  .name {
+    margin-left: 20px;
+  }
+
+  .commands {
+    .clearfix();
+
+    button {
+      display: block;
+      font-weight: bold;
+      margin-top: 15px;
+    }
+
+    table {
+      th {
+        border-bottom: 1px solid #ccc;
+        line-height: 34px;
+      }
+
+      td {
+        font-family: @code-font-family;
+        padding: 3px;
+      }
+    }
+  }
+}

data/less/objects/themes.less

@@ -0,0 +1,18 @@
+.themes {
+  .new-theme {
+    .clearfix();
+
+    input {
+      padding: 8px 12px;
+    }
+  }
+  
+  .footer {
+    display: block;
+    text-align: right;
+  }
+
+  .selector {
+    margin-top: 20px;
+  }
+}

data/less/objects/widgets.less

@@ -0,0 +1,85 @@
+.widgets {
+  .new-widget, .new-attr {
+    input {
+      padding: 8px 12px;
+    }
+  }
+
+  .new-attr {
+    padding-top: 15px;
+  }
+
+  .attrs {
+    padding-bottom: 20px;
+  }
+
+  .footer {
+    text-align: right;
+
+    .btn-reset {
+      margin-right: 10px;
+    }
+  }
+
+  .new-widget-instance {
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 99;
+    overflow: hidden;
+  }
+
+  .panel {
+    background: @modal-bg-color;
+    padding: 6px;
+    .rounded(4px);
+    position: relative;
+    .drop-shadow(0, 0, 5px, 0.3);
+    overflow: hidden;
+
+    .panel-header, .panel-body, .panel-footer {
+      .clearfix();
+    }
+
+    .panel-header {
+      border-bottom: 1px solid #eaeaea;
+    }
+
+    .panel-footer {
+      border-top: 1px solid #eaeaea;
+      padding-top: 6px;
+      margin-top: 12px;
+      text-align: right;
+    }
+
+    .close {
+      position: absolute;
+      top: 4px;
+      right: 10px;
+      color: #ccc;
+      &:hover {
+        cursor: pointer;
+        color: #f00;
+      }
+    }
+
+    h2 {
+      margin: 0 0 15px 0;
+      text-align: center;
+    }
+
+    h3, label {
+      font-size: 14px;
+    }
+
+    select {
+      display: block;
+    }
+
+    .attr-element {
+      .clearfix();
+      margin-bottom: 10px;
+    }
+  }
+}

data/less/support/buttons.less

@@ -0,0 +1,39 @@
+.button-variant(@color; @background; @border) {
+  color: @color;
+  background-color: @background;
+  border-color: @border;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.active {
+    color: @color;
+    background-color: darken(@background, 10%);
+        border-color: darken(@border, 12%);
+  }
+
+  &:active,
+  &.active {
+    background-image: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      background-color: @background;
+          border-color: @border;
+    }
+  }
+}
+
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+}

data/less/support/container.less

@@ -0,0 +1,9 @@
+.container() {
+  .container-block();
+}
+
+.container-block() {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}

data/less/support/forms.less

@@ -0,0 +1,18 @@
+.form-control() {
+  padding: 6px 12px;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  .rounded(4px);
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+.form-control-focus(@color) {
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  &:focus {
+    border-color: @color;
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+  }
+}

data/less/support/mixins.less

@@ -0,0 +1,3 @@
+@import 'buttons';
+@import 'container';
+@import 'forms';