robeaux 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fb64bdd58fcc2541db81dc55c3a21750db37af3f
-  data.tar.gz: e873c183975f9dd68f66a1dc975eec90894da0f0
+  metadata.gz: 8c74948edbd2912fd204a080d2e488f7aadae97c
+  data.tar.gz: 150a78c3344f659b4348d18885bd0435b8977144
 SHA512:
-  metadata.gz: 863dc02ee4c0e0905b537d4f0fe676ca5c0d85556437478688565e99b32b3037a0230cfe69d7d407d9fa5158c31540a0ab8284ec9f1c457b33ac753461bafe0b
-  data.tar.gz: 77ae747880626efcbfdeb149ce4c1a18d4f7134a446033d6a3d66640d37ceeb5a042e3b00c24b556c5315baa90e014d91ac00781aca11aa51c1458ac71ae3ab8
+  metadata.gz: 7577f31a5ca70bf22e31e2ad1e6b5d77b6ad0181b285aa1be86748ecb604878d6264da5a21fba2815015837e8824509787046e4f733dbedc31ba87faa089cce3
+  data.tar.gz: bb30fe68d21b85a852317f10e777da6e426445f8fb121adf21a8755ea8f1c69016db71358f77f1431bbdea95734820b86ac3aa208522166cb4e825bb427a27d7

data/Gruntfile.js

@@ -0,0 +1,43 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+    less: {
+      development: {
+        options: {
+          compress: true,
+          yuicompress: true,
+          optimization: 2
+        },
+        files: {
+          // target.css file: source.less file
+          "css/main.css": "less/app.less",
+          "css/themes/blackboard.css": "less/themes/blackboard.less",
+          "css/themes/whiteboard.css": "less/themes/whiteboard.less",
+          "css/themes/gray.css": "less/themes/gray.less",
+          "css/themes/dark.css": "less/themes/dark.less"
+        }
+      }
+    },
+    watch: {
+      layout: {
+        files: ['*.html', 'partials/*.html'],
+        options: {
+          livereload: true
+        }
+      },
+      styles: {
+        // Which files to watch (all .less files recursively in the less directory)
+        files: ['less/**/*.less',],
+        tasks: ['less'],
+        options: {
+          nospawn: true,
+          livereload: true
+        }
+      }
+    }
+  });
+ 
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+
+  grunt.registerTask('default', ['watch']);
+};

data/Makefile

@@ -1,9 +1,18 @@
 VERSION := $(shell node -e "console.log(require('./package.json').version)")
 
-.PHONY: test release
+.PHONY: test release test-controllers test-services test-functions
 
 test:
-	@./node_modules/karma/bin/karma start ./test/karma.conf.js --no-auto-watch --single-run 
+	@./node_modules/karma/bin/karma start ./test/karma_test_all.conf.js --no-auto-watch --single-run
+
+test-controllers:
+	@./node_modules/karma/bin/karma start ./test/karma_test_controllers.conf.js --no-auto-watch --single-run
+
+test-services:
+	@./node_modules/karma/bin/karma start ./test/karma_test_services.conf.js --no-auto-watch --single-run
+
+test-functions:
+	@./node_modules/karma/bin/karma start ./test/karma_test_functions.conf.js --no-auto-watch --single-run
 
 release:
 	@git tag -m "$(VERSION)" v$(VERSION)

data/README.markdown

@@ -60,6 +60,8 @@ Then, just run `make release`. It'll take care of:
 
 ## Releases
 
+- 0.3.0 - New style updates
+
 - 0.2.0 - Update for CPP-IO API spec
 
 - 0.1.1 - Remove dependency on Google WebFonts

data/css/main.css

@@ -0,0 +1 @@
+.btn{padding:10px 15px;font-size:15px;line-height:20px;border-radius:5px;display:inline-block;border:0}.btn:hover{cursor:pointer}.btn-big{padding:15px 30px;font-size:15px;line-height:15px;border-radius:5px}.btn-robot{color:#fff;background-color:#1cbbd8;border-color:#fff;text-transform:uppercase}.btn-robot:hover,.btn-robot:focus,.btn-robot:active,.btn-robot.active{color:#fff;background-color:#1694ab;border-color:#e0e0e0}.btn-robot:active,.btn-robot.active{background-image:none}.btn-robot.disabled,.btn-robot[disabled],fieldset[disabled] .btn-robot,.btn-robot.disabled:hover,.btn-robot[disabled]:hover,fieldset[disabled] .btn-robot:hover,.btn-robot.disabled:focus,.btn-robot[disabled]:focus,fieldset[disabled] .btn-robot:focus,.btn-robot.disabled:active,.btn-robot[disabled]:active,fieldset[disabled] .btn-robot:active,.btn-robot.disabled.active,.btn-robot[disabled].active,fieldset[disabled] .btn-robot.active{background-color:#1cbbd8;border-color:#fff}.btn-run,.btn-reset{color:#fff;background-color:#c36148;border-color:#fff;text-transform:uppercase}.btn-run:hover,.btn-reset:hover,.btn-run:focus,.btn-reset:focus,.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{color:#fff;background-color:#a34c35;border-color:#e0e0e0}.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{background-image:none}.btn-run.disabled,.btn-reset.disabled,.btn-run[disabled],.btn-reset[disabled],fieldset[disabled] .btn-run,fieldset[disabled] .btn-reset,.btn-run.disabled:hover,.btn-reset.disabled:hover,.btn-run[disabled]:hover,.btn-reset[disabled]:hover,fieldset[disabled] .btn-run:hover,fieldset[disabled] .btn-reset:hover,.btn-run.disabled:focus,.btn-reset.disabled:focus,.btn-run[disabled]:focus,.btn-reset[disabled]:focus,fieldset[disabled] .btn-run:focus,fieldset[disabled] .btn-reset:focus,.btn-run.disabled:active,.btn-reset.disabled:active,.btn-run[disabled]:active,.btn-reset[disabled]:active,fieldset[disabled] .btn-run:active,fieldset[disabled] .btn-reset:active,.btn-run.disabled.active,.btn-reset.disabled.active,.btn-run[disabled].active,.btn-reset[disabled].active,fieldset[disabled] .btn-run.active,fieldset[disabled] .btn-reset.active{background-color:#c36148;border-color:#fff}.btn-device,.btn-save{color:#fff;background-color:#48caac;border-color:#fff;text-transform:uppercase}.btn-device:hover,.btn-save:hover,.btn-device:focus,.btn-save:focus,.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{color:#fff;background-color:#32ad91;border-color:#e0e0e0}.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{background-image:none}.btn-device.disabled,.btn-save.disabled,.btn-device[disabled],.btn-save[disabled],fieldset[disabled] .btn-device,fieldset[disabled] .btn-save,.btn-device.disabled:hover,.btn-save.disabled:hover,.btn-device[disabled]:hover,.btn-save[disabled]:hover,fieldset[disabled] .btn-device:hover,fieldset[disabled] .btn-save:hover,.btn-device.disabled:focus,.btn-save.disabled:focus,.btn-device[disabled]:focus,.btn-save[disabled]:focus,fieldset[disabled] .btn-device:focus,fieldset[disabled] .btn-save:focus,.btn-device.disabled:active,.btn-save.disabled:active,.btn-device[disabled]:active,.btn-save[disabled]:active,fieldset[disabled] .btn-device:active,fieldset[disabled] .btn-save:active,.btn-device.disabled.active,.btn-save.disabled.active,.btn-device[disabled].active,.btn-save[disabled].active,fieldset[disabled] .btn-device.active,fieldset[disabled] .btn-save.active{background-color:#48caac;border-color:#fff}.btn-connect{color:#fff;background-color:#dec763;border-color:#fff;text-transform:uppercase}.btn-connect:hover,.btn-connect:focus,.btn-connect:active,.btn-connect.active{color:#fff;background-color:#d5b839;border-color:#e0e0e0}.btn-connect:active,.btn-connect.active{background-image:none}.btn-connect.disabled,.btn-connect[disabled],fieldset[disabled] .btn-connect,.btn-connect.disabled:hover,.btn-connect[disabled]:hover,fieldset[disabled] .btn-connect:hover,.btn-connect.disabled:focus,.btn-connect[disabled]:focus,fieldset[disabled] .btn-connect:focus,.btn-connect.disabled:active,.btn-connect[disabled]:active,fieldset[disabled] .btn-connect:active,.btn-connect.disabled.active,.btn-connect[disabled].active,fieldset[disabled] .btn-connect.active{background-color:#dec763;border-color:#fff}.connections .robot-devices .name{display:inline-block;margin-left:20px;font-weight:bold}.connections .robot-devices .details{display:inline-block;margin-left:20px;color:#1cbbd8}.connections .robot-connections .name{display:inline-block;margin-left:20px;color:#1cbbd8}.connections .robot-connections .details{display:inline-block;margin-left:20px}.device-detail h2{text-align:center}.device-detail table{margin-top:15px}.device-detail table th{border-bottom:1px solid #ccc;line-height:34px}.device-detail table td{font-family:Inconsolata,monospace;padding:3px}.device-detail .listeners{margin-top:0}.device-detail .remove{color:#f00}.device-detail .remove:hover{cursor:pointer}input[type="text"],select,textarea{display:inline-block;line-height:1.42857143;font-size:15px;color:#444;padding:6px 12px;background-color:#fff;background-image:none;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;box-sizing:border-box}input[type="text"]:focus,select:focus,textarea:focus{border-color:#1cbbd8;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(28, 187, 216, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(28, 187, 216, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(28, 187, 216, 0.6)}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}.list{margin-top:20px}.list .close{float:right;color:#ccc}.list .close:hover{color:#f00;cursor:pointer}.list .theme,.list .widget{display:block;clear:both;padding:5px;border-bottom:1px dotted #ccc}.list .theme:hover,.list .widget:hover{cursor:pointer}.list .selected{background:#eee}nav{background:#000;height:70px;margin-bottom:20px}nav .logo{display:inline-block;margin:15px 15px 0 15px}nav .links{float:right;margin-top:15px}nav .links a{color:#fff;text-decoration:none;display:inline-block;padding:10px 15px;font-size:15px;line-height:20px;border-radius:2px}nav .links a:hover{color:#1cbbd8;text-decoration:none}nav .links .active{background:#1cbbd8}nav .links .active:hover{color:#fff}.robot{width:960px;padding:0;margin-left:auto;margin-right:auto;display:block}.robot .details{float:right;line-height:43px}.robot .details span{color:#1cbbd8;margin-left:50px}.robot .details strong{color:#444;margin-right:20px}.robot .name{margin-left:20px}.robot .commands{*zoom:1}.robot .commands:before,.robot .commands:after{content:"";display:table}.robot .commands:after{clear:both}.robot .commands button{display:block;font-weight:bold;margin-top:15px}.robot .commands table th{border-bottom:1px solid #ccc;line-height:34px}.robot .commands table td{font-family:Inconsolata,monospace;padding:3px}.themes .new-theme{*zoom:1}.themes .new-theme:before,.themes .new-theme:after{content:"";display:table}.themes .new-theme:after{clear:both}.themes .new-theme input{padding:8px 12px}.themes .footer{display:block;text-align:right}.themes .selector{margin-top:20px}.widgets .new-widget input,.widgets .new-attr input{padding:8px 12px}.widgets .new-attr{padding-top:15px}.widgets .attrs{padding-bottom:20px}.widgets .footer{text-align:right}.widgets .footer .btn-reset{margin-right:10px}.widgets .new-widget-instance{position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);z-index:99;overflow:hidden}.widgets .panel{background:#fff;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;position:relative;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.3);-moz-box-shadow:0 0 5px rgba(0,0,0,0.3);box-shadow:0 0 5px rgba(0,0,0,0.3);overflow:hidden}.widgets .panel .panel-header,.widgets .panel .panel-body,.widgets .panel .panel-footer{*zoom:1}.widgets .panel .panel-header:before,.widgets .panel .panel-body:before,.widgets .panel .panel-footer:before,.widgets .panel .panel-header:after,.widgets .panel .panel-body:after,.widgets .panel .panel-footer:after{content:"";display:table}.widgets .panel .panel-header:after,.widgets .panel .panel-body:after,.widgets .panel .panel-footer:after{clear:both}.widgets .panel .panel-header{border-bottom:1px solid #eaeaea}.widgets .panel .panel-footer{border-top:1px solid #eaeaea;padding-top:6px;margin-top:12px;text-align:right}.widgets .panel .close{position:absolute;top:4px;right:10px;color:#ccc}.widgets .panel .close:hover{cursor:pointer;color:#f00}.widgets .panel h2{margin:0 0 15px 0;text-align:center}.widgets .panel h3,.widgets .panel label{font-size:14px}.widgets .panel select{display:block}.widgets .panel .attr-element{*zoom:1;margin-bottom:10px}.widgets .panel .attr-element:before,.widgets .panel .attr-element:after{content:"";display:table}.widgets .panel .attr-element:after{clear:both}.device-detail .device-header{width:960px;padding:0;margin-left:auto;margin-right:auto;display:block}.device-detail .device-header h2{display:inline;float:left;width:47.91666667%;margin:0 1.04166667%}.device-detail .device-commands{display:inline;float:left;width:47.91666667%;margin:0 1.04166667%}.device-detail .device-events{display:inline;float:left;width:47.91666667%;margin:0 1.04166667%}.device-detail .device-events .input{display:inline;float:left;width:47.91666667%;margin:0 1.04166667%}.device-detail .device-events .input input{display:inline;float:left;width:56.25%;margin:0 1.04166667%;padding:8px 12px;margin:0 2.08166667% 0 0}.device-detail .device-events .input button{display:inline;float:left;width:39.58333333%;margin:0 1.04166667%}.device-detail .device-events .listeners-div{display:inline;float:left;width:47.91666667%;margin:0 1.04166667%;margin-bottom:30px}.device-detail .device-events .listeners-div table{width:100%}.device-detail .device-events .events{width:100%}.device-detail .remove{width:10%}body{background:#efeef4;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;color:#444}.container-wrap{margin-bottom:30px}.container,.robot,.widgets,.connections,.themes{width:960px;padding:0;margin-left:auto;margin-right:auto;display:block}.row{background:#fff;padding:15px 0;margin-top:10px;*zoom:1}.row:before,.row:after{content:"";display:table}.row:after{clear:both}.robot-details{display:inline;float:left;width:97.91666667%;margin:0 1.04166667%}.robot h2{display:inline;float:left;width:97.91666667%;margin:0 1.04166667%;text-align:center;margin-bottom:15px}.robot .input,.robot .results{display:inline;float:left;width:47.91666667%;margin:0 1.04166667%}.robot-detail .widgets .new-widget-instance{height:100vh;width:100%}.robot-detail .widgets .active-widgets .add-widget{display:inline;float:left;width:22.91666667%;margin:0 1.04166667%}.robot-detail .widgets .active-widgets button{font-size:2em}.robot-detail .widgets .active-widgets widget{display:inline;float:left;width:72.91666667%;margin:0 1.04166667%}.robot-detail .widgets .panel{margin:10% auto;width:600px}.robot-detail .widgets .panel .type{display:inline;float:left;width:39.58333333%;margin:0 1.04166667%}.robot-detail .widgets .panel .attrs{display:inline;float:left;width:56.25%;margin:0 1.04166667%}.robot-detail .widgets .panel .attrs label{display:inline;float:left;width:31.25%;margin:0 1.04166667%}.robot-detail .widgets .panel .attrs input{display:inline;float:left;width:64.58333333%;margin:0 1.04166667%}.robot-detail .robot-devices{display:inline;float:left;width:47.91666667%;margin:0 1.04166667%}.robot-detail .robot-connection{display:inline;float:left;width:47.91666667%;margin:0 1.04166667%}.commands .param,.device-commands .param{display:block;width:104.16666667%;margin:0 -2.08333333%;*zoom:1;height:40px}.commands .param:before,.device-commands .param:before,.commands .param:after,.device-commands .param:after{content:"";display:table}.commands .param:after,.device-commands .param:after{clear:both}.commands .param input[type='text'],.device-commands .param input[type='text']{display:inline;float:left;width:29.16666667%;margin:0 2.08333333%}.commands .param select,.device-commands .param select{display:inline;float:left;width:20.83333333%;margin:0 2.08333333%}.commands .param .close,.device-commands .param .close{display:inline;float:left;width:4.16666667%;margin:0 2.08333333%;line-height:34px}.commands .param .close:hover,.device-commands .param .close:hover{color:#f00;cursor:pointer}.commands .input>select,.device-commands .input>select,.commands>select,.device-commands>select{width:100%;margin-left:auto;margin-right:auto;display:block;margin-bottom:15px}.commands button,.device-commands button{width:70%;margin-top:15px;margin-left:auto;margin-right:auto;display:block}.commands table,.device-commands table{width:100%}.themes .sidebar{display:inline;float:left;width:31.25%;margin:0 1.04166667%}.themes .new-theme{display:block;width:106.25%;margin:0 -3.125%;*zoom:1}.themes .new-theme:before,.themes .new-theme:after{content:"";display:table}.themes .new-theme:after{clear:both}.themes .new-theme input{display:inline;float:left;width:68.75%;margin:0 3.125%}.themes .new-theme button{display:inline;float:left;width:18.75%;margin:0 3.125%}.themes .editor{display:inline;float:left;width:64.58333333%;margin:0 1.04166667%}.themes .editor textarea{width:100%;height:250px}.themes .footer{*zoom:1;display:inline;float:left;width:97.91666667%;margin:0 1.04166667%}.themes .footer:before,.themes .footer:after{content:"";display:table}.themes .footer:after{clear:both}.widgets .sidebar{display:inline;float:left;width:22.91666667%;margin:0 1.04166667%}.widgets .new-widget{display:block;width:108.33333333%;margin:0 -4.16666667%;*zoom:1}.widgets .new-widget:before,.widgets .new-widget:after{content:"";display:table}.widgets .new-widget:after{clear:both}.widgets .new-widget input{display:inline;float:left;width:58.33333333%;margin:0 4.16666667%}.widgets .new-widget button{display:inline;float:left;width:25%;margin:0 4.16666667%}.widgets .new-attr{display:block;width:102.77777778%;margin:0 -1.38888889%;*zoom:1}.widgets .new-attr:before,.widgets .new-attr:after{content:"";display:table}.widgets .new-attr:after{clear:both}.widgets .new-attr input{display:inline;float:left;width:52.77777778%;margin:0 1.38888889%}.widgets .new-attr button{display:inline;float:left;width:30.55555556%;margin:0 1.38888889%}.widgets .editor{display:inline;float:left;width:72.91666667%;margin:0 1.04166667%}.widgets .attrs{display:inline;float:left;width:97.22222222%;margin:0 1.38888889%}.widgets .field{display:inline;float:left;width:47.22222222%;margin:0 1.38888889%}.widgets .field textarea{width:100%;min-height:250px}.widgets .footer{display:inline;float:left;width:97.91666667%;margin:0 1.04166667%}

data/css/style.css

@@ -52,7 +52,7 @@ body {
   font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
-body > .container, body > nav {
+.container,.container-wrap {
   width: 960px;
   margin: 0 auto;
   padding: 0;
@@ -102,7 +102,7 @@ body > nav a.active {
   color: white;
 }
 
-.robot, .robot-devices .device, .robot-connections .connection {
+.robot, .robot-devices .device, .robot-connections .connection, .robot-detail .widgets {
   background: white;
   height: 70px;
   line-height: 70px;
@@ -114,7 +114,7 @@ body > nav a.active {
   padding: 0 15px;
 }
 
-.icon {
+.icon, .btn {
   background: black;
   color: white;
   height: 40px;
@@ -152,7 +152,7 @@ body > nav a.active {
   float: right;
 }
 
-.robot-detail .with-commands .input , .robot-detail .with-commands .results {
+.robot-detail .with-commands .input, .robot-detail .with-commands .results {
   position: relative;
   padding-top: 20px;
   width: 50%;
@@ -240,6 +240,7 @@ body > nav a.active {
   margin-bottom: 20px;
   padding: 10px;
   text-align: center;
+  overflow: hidden;
 }
 
 .device-commands {
@@ -344,14 +345,13 @@ body > nav a.active {
 
 .close {
   border-radius: 25px;
-  border: 1px solid #444;
   color: #444;
   float: right;
   font-size: 14px;
   line-height: 14px;
   height: 20px;
   text-align: center;
-  margin-top: 4px;
+  margin-top: 7px;
   padding: 1px 5px;
 }
 
@@ -379,7 +379,7 @@ body > nav a.active {
   font-family: Inconsolata, monospace;
 }
 
-.themes {
+.themes, .widgets {
   width: 100%;
   height: 400px;
   background: white;
@@ -387,67 +387,72 @@ body > nav a.active {
   position: relative;
 }
 
-.themes h2 {
+.themes h2, .widgets h2 {
   margin: 0;
 }
 
-.themes .sidebar {
-  width: 15%;
+.themes .sidebar, .widgets .sidebar {
+  width: 25%;
   float: left;
 }
 
-.themes .sidebar {
+.themes .sidebar, .widgets .sidebar {
   text-align: center;
 }
 
-.themes .sidebar button, .themes .sidebar input {
+.themes .sidebar button, .themes .sidebar input,
+.widgets .sidebar button, .widgets .sidebar input {
   margin: 0;
   width: 90%;
   margin-top: 10px;
 }
 
-.themes .sidebar .list {
+.themes .sidebar .list, .widgets .sidebar .list {
   padding: 5px 7px;
   margin: 10px 0;
 }
 
-.themes .sidebar .list .theme {
+.themes .sidebar .list .theme, .widgets .sidebar .list .widget {
   height: 30px;
   line-height: 30px;
   padding: 0 10px;
   text-align: left;
 }
 
-.themes .sidebar .list .theme .close {
+.themes .sidebar .list .theme .close, .widgets .sidebar .list .widget .close {
   margin-top: 5px;
 }
 
-.themes .sidebar .list .theme:not(:last-child) {
+.themes .sidebar .list .theme:not(:last-child), .widgets .sidebar .list .widget:not(:last-child) {
   border-bottom: 1px solid #999;
 }
 
-.themes .sidebar .list .theme.selected {
+.themes .sidebar .list .theme.selected, .widgets .sidebar .list .widget.selected {
   background: #159e00;
   color: white;
 }
 
-.themes .sidebar .list .theme.selected .close {
+.themes .sidebar .list .theme.selected .close, .widgets .sidebar .list .widget.selected .close {
   border-color: #efefef;
   color: #efefef;
 }
 
-.themes .sidebar .list .theme.selected .close:active {
+.themes .sidebar .list .theme.selected .close:active, .widgets .sidebar .list .widget.selected .close:active {
   background: white;
   border-color: white;
   color: black;
 }
 
-.themes .editor {
-  width: 80%;
+.themes .editor, .widgets .editor {
+  width: 70%;
   float: right;
 }
 
-.themes .editor textarea {
+.themes .editor h2, .widgets .editor h2 {
+  margin-bottom: 15px;
+}
+
+.themes .editor textarea, .widgets .editor textarea {
   border: 1px solid #999;
   font-family: Inconslata, monospace;
   font-size: 14px;
@@ -457,13 +462,97 @@ body > nav a.active {
   white-space: pre;
 }
 
-.themes .footer {
+.widgets .editor .attrs {
+  margin-bottom: 20px;
+}
+
+.themes .footer, .widgets .footer {
   clear: both;
   position: absolute;
   width: 97%;
   bottom: 10px;
 }
 
-.themes .footer .selector {
+.themes .footer .selector, .widgets .footer .selector {
+  float: right;
+}
+
+.widgets .editor .field {
+  width: 49%;
+  height: 320px;
+  margin: 0;
+  display: inline-block;
+}
+
+.widgets .editor textarea {
+  width: 100%;
+}
+
+.widgets .editor .field:last-of-type {
   float: right;
 }
+
+.robot-detail .widgets {
+  line-height: 1;
+  min-height: 200px;
+  height: auto;
+  padding: 0;
+}
+
+.widget {
+  display: inline-block;
+  float: left;
+  margin: 0;
+  width: 240px;
+  height: 200px;
+}
+
+.widgets .newWidget {
+  width: 240px;
+  height: 200px;
+  font-size: 50px;
+  border: none;
+}
+
+.new-widget-instance {
+  position: absolute;
+  top: 0;
+  left: 0;
+  float: left;
+  background: hsla(0, 0%, 25%, 0.5);
+  width: 960px;
+  height: 100%;
+  padding: 10px 100px;
+}
+
+.new-widget-instance .panel {
+  width: 100%;
+  height: 100%;
+  background: white;
+  padding: 10px;
+}
+
+.new-widget-instance .panel h2 {
+  width: 100%;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.new-widget-instance .panel h3 {
+  margin: 0;
+}
+
+.new-widget-instance .panel section {
+  width: 49%;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+.new-widget-instance .panel input {
+  width: auto;
+}
+
+.new-widget-instance .panel button {
+  clear: both;
+  width: 100%;
+}

data/css/themes/blackboard.css

@@ -0,0 +1 @@
+body{background-color:#343434;color:#fff}nav{background:#2c2c2c}nav .links a{background:none;padding:8px 13px}nav .links a.active{background:none;color:#fff;border:2px solid #1cbcd8}nav .links a:hover{color:#1cbcd8 !important}.row{border-top:1px solid #1cbcd8;padding-top:25px;padding-bottom:25px;width:960px;margin-left:auto;margin-right:auto;display:block}.row:last-child{border-bottom:1px solid #1cbcd8}.row-device{border-top:none;border-bottom:none !important}.robot .details span{color:#fff}.robot .details strong{color:#1cbcd8}.row{background-color:#343434}.bullet-connections{padding-left:32px;background:transparent url(../../images/bullet-connections.png) no-repeat left center}.bullet-devices{padding-left:32px;background:transparent url(../../images/bullet-devices.png) no-repeat left center}.robot-devices{background:transparent url(../../images/devices-image.png) no-repeat 21px center;padding-left:84px}.btn-robot{color:#343434;background-color:#1cbcd8;border-color:#343434}.btn-robot:hover,.btn-robot:focus,.btn-robot:active,.btn-robot.active{color:#343434;background-color:#1695ab;border-color:#151515}.btn-robot:active,.btn-robot.active{background-image:none}.btn-robot.disabled,.btn-robot[disabled],fieldset[disabled] .btn-robot,.btn-robot.disabled:hover,.btn-robot[disabled]:hover,fieldset[disabled] .btn-robot:hover,.btn-robot.disabled:focus,.btn-robot[disabled]:focus,fieldset[disabled] .btn-robot:focus,.btn-robot.disabled:active,.btn-robot[disabled]:active,fieldset[disabled] .btn-robot:active,.btn-robot.disabled.active,.btn-robot[disabled].active,fieldset[disabled] .btn-robot.active{background-color:#1cbcd8;border-color:#343434}.btn-device,.btn-save{color:#343434;background-color:#56d884;border-color:#343434}.btn-device:hover,.btn-save:hover,.btn-device:focus,.btn-save:focus,.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{color:#343434;background-color:#2fcc67;border-color:#151515}.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{background-image:none}.btn-device.disabled,.btn-save.disabled,.btn-device[disabled],.btn-save[disabled],fieldset[disabled] .btn-device,fieldset[disabled] .btn-save,.btn-device.disabled:hover,.btn-save.disabled:hover,.btn-device[disabled]:hover,.btn-save[disabled]:hover,fieldset[disabled] .btn-device:hover,fieldset[disabled] .btn-save:hover,.btn-device.disabled:focus,.btn-save.disabled:focus,.btn-device[disabled]:focus,.btn-save[disabled]:focus,fieldset[disabled] .btn-device:focus,fieldset[disabled] .btn-save:focus,.btn-device.disabled:active,.btn-save.disabled:active,.btn-device[disabled]:active,.btn-save[disabled]:active,fieldset[disabled] .btn-device:active,fieldset[disabled] .btn-save:active,.btn-device.disabled.active,.btn-save.disabled.active,.btn-device[disabled].active,.btn-save[disabled].active,fieldset[disabled] .btn-device.active,fieldset[disabled] .btn-save.active{background-color:#56d884;border-color:#343434}.btn-connect{color:#343434;background-color:#d8ca69;border-color:#343434}.btn-connect:hover,.btn-connect:focus,.btn-connect:active,.btn-connect.active{color:#343434;background-color:#cdbc41;border-color:#151515}.btn-connect:active,.btn-connect.active{background-image:none}.btn-connect.disabled,.btn-connect[disabled],fieldset[disabled] .btn-connect,.btn-connect.disabled:hover,.btn-connect[disabled]:hover,fieldset[disabled] .btn-connect:hover,.btn-connect.disabled:focus,.btn-connect[disabled]:focus,fieldset[disabled] .btn-connect:focus,.btn-connect.disabled:active,.btn-connect[disabled]:active,fieldset[disabled] .btn-connect:active,.btn-connect.disabled.active,.btn-connect[disabled].active,fieldset[disabled] .btn-connect.active{background-color:#d8ca69;border-color:#343434}.btn-run,.btn-reset{color:#343434;background-color:#ca5252;border-color:#343434}.btn-run:hover,.btn-reset:hover,.btn-run:focus,.btn-reset:focus,.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{color:#343434;background-color:#b23737;border-color:#151515}.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{background-image:none}.btn-run.disabled,.btn-reset.disabled,.btn-run[disabled],.btn-reset[disabled],fieldset[disabled] .btn-run,fieldset[disabled] .btn-reset,.btn-run.disabled:hover,.btn-reset.disabled:hover,.btn-run[disabled]:hover,.btn-reset[disabled]:hover,fieldset[disabled] .btn-run:hover,fieldset[disabled] .btn-reset:hover,.btn-run.disabled:focus,.btn-reset.disabled:focus,.btn-run[disabled]:focus,.btn-reset[disabled]:focus,fieldset[disabled] .btn-run:focus,fieldset[disabled] .btn-reset:focus,.btn-run.disabled:active,.btn-reset.disabled:active,.btn-run[disabled]:active,.btn-reset[disabled]:active,fieldset[disabled] .btn-run:active,fieldset[disabled] .btn-reset:active,.btn-run.disabled.active,.btn-reset.disabled.active,.btn-run[disabled].active,.btn-reset[disabled].active,fieldset[disabled] .btn-run.active,fieldset[disabled] .btn-reset.active{background-color:#ca5252;border-color:#343434}input[type="text"],select,textarea{color:#fff;background:#343434}input[type="text"]:focus,select:focus,textarea:focus{border-color:#fff;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 255, 255, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 255, 255, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 255, 255, 0.6)}.widgets .panel{background:#4d4d4d}.widgets .panel .panel-header{border-bottom:1px solid #666}.widgets .panel .panel-footer{border-top:1px solid #666}

data/css/themes/dark.css

@@ -0,0 +1 @@
+body{background-color:#000;color:#000}.row{background-color:#4d4d4d}nav .links a{background:none}nav .links a.active{background:none;color:#1CBBD8}nav .links a:hover{color:#1CBBD8 !important}.robot .details span{color:#fff}.robot .details strong{color:#000}.btn-robot{color:#fff;background-color:#000;border-color:#fff}.btn-robot:hover,.btn-robot:focus,.btn-robot:active,.btn-robot.active{color:#fff;background-color:#000;border-color:#e0e0e0}.btn-robot:active,.btn-robot.active{background-image:none}.btn-robot.disabled,.btn-robot[disabled],fieldset[disabled] .btn-robot,.btn-robot.disabled:hover,.btn-robot[disabled]:hover,fieldset[disabled] .btn-robot:hover,.btn-robot.disabled:focus,.btn-robot[disabled]:focus,fieldset[disabled] .btn-robot:focus,.btn-robot.disabled:active,.btn-robot[disabled]:active,fieldset[disabled] .btn-robot:active,.btn-robot.disabled.active,.btn-robot[disabled].active,fieldset[disabled] .btn-robot.active{background-color:#000;border-color:#fff}.btn-device,.btn-save{color:#000;background-color:#fff;border-color:#000}.btn-device:hover,.btn-save:hover,.btn-device:focus,.btn-save:focus,.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{color:#000;background-color:#e6e6e6;border-color:#000}.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{background-image:none}.btn-device.disabled,.btn-save.disabled,.btn-device[disabled],.btn-save[disabled],fieldset[disabled] .btn-device,fieldset[disabled] .btn-save,.btn-device.disabled:hover,.btn-save.disabled:hover,.btn-device[disabled]:hover,.btn-save[disabled]:hover,fieldset[disabled] .btn-device:hover,fieldset[disabled] .btn-save:hover,.btn-device.disabled:focus,.btn-save.disabled:focus,.btn-device[disabled]:focus,.btn-save[disabled]:focus,fieldset[disabled] .btn-device:focus,fieldset[disabled] .btn-save:focus,.btn-device.disabled:active,.btn-save.disabled:active,.btn-device[disabled]:active,.btn-save[disabled]:active,fieldset[disabled] .btn-device:active,fieldset[disabled] .btn-save:active,.btn-device.disabled.active,.btn-save.disabled.active,.btn-device[disabled].active,.btn-save[disabled].active,fieldset[disabled] .btn-device.active,fieldset[disabled] .btn-save.active{background-color:#fff;border-color:#000}.btn-connect{color:#dec763;background-color:#000;border-color:#dec763;text-transform:uppercase}.btn-connect:hover,.btn-connect:focus,.btn-connect:active,.btn-connect.active{color:#dec763;background-color:#000;border-color:#d3b530}.btn-connect:active,.btn-connect.active{background-image:none}.btn-connect.disabled,.btn-connect[disabled],fieldset[disabled] .btn-connect,.btn-connect.disabled:hover,.btn-connect[disabled]:hover,fieldset[disabled] .btn-connect:hover,.btn-connect.disabled:focus,.btn-connect[disabled]:focus,fieldset[disabled] .btn-connect:focus,.btn-connect.disabled:active,.btn-connect[disabled]:active,fieldset[disabled] .btn-connect:active,.btn-connect.disabled.active,.btn-connect[disabled].active,fieldset[disabled] .btn-connect.active{background-color:#000;border-color:#dec763}.btn-run,.btn-reset{color:#c36148;background-color:#000;border-color:#c36148;text-transform:uppercase}.btn-run:hover,.btn-reset:hover,.btn-run:focus,.btn-reset:focus,.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{color:#c36148;background-color:#000;border-color:#9b4833}.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{background-image:none}.btn-run.disabled,.btn-reset.disabled,.btn-run[disabled],.btn-reset[disabled],fieldset[disabled] .btn-run,fieldset[disabled] .btn-reset,.btn-run.disabled:hover,.btn-reset.disabled:hover,.btn-run[disabled]:hover,.btn-reset[disabled]:hover,fieldset[disabled] .btn-run:hover,fieldset[disabled] .btn-reset:hover,.btn-run.disabled:focus,.btn-reset.disabled:focus,.btn-run[disabled]:focus,.btn-reset[disabled]:focus,fieldset[disabled] .btn-run:focus,fieldset[disabled] .btn-reset:focus,.btn-run.disabled:active,.btn-reset.disabled:active,.btn-run[disabled]:active,.btn-reset[disabled]:active,fieldset[disabled] .btn-run:active,fieldset[disabled] .btn-reset:active,.btn-run.disabled.active,.btn-reset.disabled.active,.btn-run[disabled].active,.btn-reset[disabled].active,fieldset[disabled] .btn-run.active,fieldset[disabled] .btn-reset.active{background-color:#000;border-color:#c36148}input[type="text"],select,textarea{color:#000;background:#666}input[type="text"]:focus,select:focus,textarea:focus{border-color:#fff;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 255, 255, 0.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 255, 255, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(255, 255, 255, 0.6)}.widgets .panel{background:#4d4d4d}.widgets .panel .panel-header{border-bottom:1px solid #666}.widgets .panel .panel-footer{border-top:1px solid #666}.list .theme,.list .widget{border-bottom:1px dotted #666}th{border-bottom:1px solid #666 !important}.connections .robot-devices .details{color:#000}.connections .robot-connections .name{color:#000}

data/css/themes/gray.css

@@ -0,0 +1 @@
+body{background-color:#eeeef4;color:#3e6372}nav{background:#2d4753}nav .links a{background:none;padding:8px 13px}.row{background-color:#fff;border-bottom:3px solid #e1e1e5;padding-top:25px;padding-bottom:25px;margin-bottom:26px;width:980px;margin-left:auto;margin-right:auto;display:block}.row-device{border-top:none}.robot .details span{color:#ff6900}.robot .details strong{color:#3e6372}.btn-robot{color:#fff;background-color:#ff6900;border-color:#fff}.btn-robot:hover,.btn-robot:focus,.btn-robot:active,.btn-robot.active{color:#fff;background-color:#cc5400;border-color:#e0e0e0}.btn-robot:active,.btn-robot.active{background-image:none}.btn-robot.disabled,.btn-robot[disabled],fieldset[disabled] .btn-robot,.btn-robot.disabled:hover,.btn-robot[disabled]:hover,fieldset[disabled] .btn-robot:hover,.btn-robot.disabled:focus,.btn-robot[disabled]:focus,fieldset[disabled] .btn-robot:focus,.btn-robot.disabled:active,.btn-robot[disabled]:active,fieldset[disabled] .btn-robot:active,.btn-robot.disabled.active,.btn-robot[disabled].active,fieldset[disabled] .btn-robot.active{background-color:#ff6900;border-color:#fff}.btn-device,.btn-save{color:#fff;background-color:#40cfaa;border-color:#fff}.btn-device:hover,.btn-save:hover,.btn-device:focus,.btn-save:focus,.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{color:#fff;background-color:#2cb08e;border-color:#e0e0e0}.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{background-image:none}.btn-device.disabled,.btn-save.disabled,.btn-device[disabled],.btn-save[disabled],fieldset[disabled] .btn-device,fieldset[disabled] .btn-save,.btn-device.disabled:hover,.btn-save.disabled:hover,.btn-device[disabled]:hover,.btn-save[disabled]:hover,fieldset[disabled] .btn-device:hover,fieldset[disabled] .btn-save:hover,.btn-device.disabled:focus,.btn-save.disabled:focus,.btn-device[disabled]:focus,.btn-save[disabled]:focus,fieldset[disabled] .btn-device:focus,fieldset[disabled] .btn-save:focus,.btn-device.disabled:active,.btn-save.disabled:active,.btn-device[disabled]:active,.btn-save[disabled]:active,fieldset[disabled] .btn-device:active,fieldset[disabled] .btn-save:active,.btn-device.disabled.active,.btn-save.disabled.active,.btn-device[disabled].active,.btn-save[disabled].active,fieldset[disabled] .btn-device.active,fieldset[disabled] .btn-save.active{background-color:#40cfaa;border-color:#fff}.btn-connect{color:#fff;background-color:#dccb5b;border-color:#fff}.btn-connect:hover,.btn-connect:focus,.btn-connect:active,.btn-connect.active{color:#fff;background-color:#d3be31;border-color:#e0e0e0}.btn-connect:active,.btn-connect.active{background-image:none}.btn-connect.disabled,.btn-connect[disabled],fieldset[disabled] .btn-connect,.btn-connect.disabled:hover,.btn-connect[disabled]:hover,fieldset[disabled] .btn-connect:hover,.btn-connect.disabled:focus,.btn-connect[disabled]:focus,fieldset[disabled] .btn-connect:focus,.btn-connect.disabled:active,.btn-connect[disabled]:active,fieldset[disabled] .btn-connect:active,.btn-connect.disabled.active,.btn-connect[disabled].active,fieldset[disabled] .btn-connect.active{background-color:#dccb5b;border-color:#fff}.btn-run,.btn-reset{color:#fff;background-color:#ca5252;border-color:#fff}.btn-run:hover,.btn-reset:hover,.btn-run:focus,.btn-reset:focus,.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{color:#fff;background-color:#b23737;border-color:#e0e0e0}.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{background-image:none}.btn-run.disabled,.btn-reset.disabled,.btn-run[disabled],.btn-reset[disabled],fieldset[disabled] .btn-run,fieldset[disabled] .btn-reset,.btn-run.disabled:hover,.btn-reset.disabled:hover,.btn-run[disabled]:hover,.btn-reset[disabled]:hover,fieldset[disabled] .btn-run:hover,fieldset[disabled] .btn-reset:hover,.btn-run.disabled:focus,.btn-reset.disabled:focus,.btn-run[disabled]:focus,.btn-reset[disabled]:focus,fieldset[disabled] .btn-run:focus,fieldset[disabled] .btn-reset:focus,.btn-run.disabled:active,.btn-reset.disabled:active,.btn-run[disabled]:active,.btn-reset[disabled]:active,fieldset[disabled] .btn-run:active,fieldset[disabled] .btn-reset:active,.btn-run.disabled.active,.btn-reset.disabled.active,.btn-run[disabled].active,.btn-reset[disabled].active,fieldset[disabled] .btn-run.active,fieldset[disabled] .btn-reset.active{background-color:#ca5252;border-color:#fff}.widgets .panel{background:#fff}.widgets .panel .panel-header{border-bottom:1px solid #E1E1E1}.widgets .panel .panel-footer{border-top:1px solid #E1E1E1}

data/css/themes/whiteboard.css

@@ -0,0 +1 @@
+body{background-color:#fff;color:#666}nav{background:#1cbcd8}nav .links a{background:none;padding:8px 13px}nav .links a.active{background:#353535;color:#fff;border:2px solid #1cbcd8}nav .links a.active:hover{color:#fff !important}nav .links a:hover{color:#2c2c2c !important}.row{background-color:#fff;border-top:1px solid #E1E1E1;padding-top:25px;padding-bottom:25px;width:960px;margin-left:auto;margin-right:auto;display:block}.row:last-child{border-bottom:1px solid #E1E1E1}.row-device{border-top:none;border-bottom:none !important}.robot .details span{color:#333}.robot .details strong{color:#666}.bullet-connections{padding-left:32px;background:transparent url(../../images/bullet-connections-2.png) no-repeat left center}.bullet-devices{padding-left:32px;background:transparent url(../../images/bullet-devices-2.png) no-repeat left center}.robot-devices{background:transparent url(../../images/devices-image-2.png) no-repeat 21px center;padding-left:84px}.btn-robot{color:#343434;background-color:#28d8f7;border-color:#343434}.btn-robot:hover,.btn-robot:focus,.btn-robot:active,.btn-robot.active{color:#343434;background-color:#08c3e4;border-color:#151515}.btn-robot:active,.btn-robot.active{background-image:none}.btn-robot.disabled,.btn-robot[disabled],fieldset[disabled] .btn-robot,.btn-robot.disabled:hover,.btn-robot[disabled]:hover,fieldset[disabled] .btn-robot:hover,.btn-robot.disabled:focus,.btn-robot[disabled]:focus,fieldset[disabled] .btn-robot:focus,.btn-robot.disabled:active,.btn-robot[disabled]:active,fieldset[disabled] .btn-robot:active,.btn-robot.disabled.active,.btn-robot[disabled].active,fieldset[disabled] .btn-robot.active{background-color:#28d8f7;border-color:#343434}.btn-device,.btn-save{color:#343434;background-color:#15e2ad;border-color:#343434}.btn-device:hover,.btn-save:hover,.btn-device:focus,.btn-save:focus,.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{color:#343434;background-color:#11b389;border-color:#151515}.btn-device:active,.btn-save:active,.btn-device.active,.btn-save.active{background-image:none}.btn-device.disabled,.btn-save.disabled,.btn-device[disabled],.btn-save[disabled],fieldset[disabled] .btn-device,fieldset[disabled] .btn-save,.btn-device.disabled:hover,.btn-save.disabled:hover,.btn-device[disabled]:hover,.btn-save[disabled]:hover,fieldset[disabled] .btn-device:hover,fieldset[disabled] .btn-save:hover,.btn-device.disabled:focus,.btn-save.disabled:focus,.btn-device[disabled]:focus,.btn-save[disabled]:focus,fieldset[disabled] .btn-device:focus,fieldset[disabled] .btn-save:focus,.btn-device.disabled:active,.btn-save.disabled:active,.btn-device[disabled]:active,.btn-save[disabled]:active,fieldset[disabled] .btn-device:active,fieldset[disabled] .btn-save:active,.btn-device.disabled.active,.btn-save.disabled.active,.btn-device[disabled].active,.btn-save[disabled].active,fieldset[disabled] .btn-device.active,fieldset[disabled] .btn-save.active{background-color:#15e2ad;border-color:#343434}.btn-connect{color:#343434;background-color:#fbed8f;border-color:#343434}.btn-connect:hover,.btn-connect:focus,.btn-connect:active,.btn-connect.active{color:#343434;background-color:#f9e55e;border-color:#151515}.btn-connect:active,.btn-connect.active{background-image:none}.btn-connect.disabled,.btn-connect[disabled],fieldset[disabled] .btn-connect,.btn-connect.disabled:hover,.btn-connect[disabled]:hover,fieldset[disabled] .btn-connect:hover,.btn-connect.disabled:focus,.btn-connect[disabled]:focus,fieldset[disabled] .btn-connect:focus,.btn-connect.disabled:active,.btn-connect[disabled]:active,fieldset[disabled] .btn-connect:active,.btn-connect.disabled.active,.btn-connect[disabled].active,fieldset[disabled] .btn-connect.active{background-color:#fbed8f;border-color:#343434}.btn-run,.btn-reset{color:#343434;background-color:#ca5252;border-color:#343434}.btn-run:hover,.btn-reset:hover,.btn-run:focus,.btn-reset:focus,.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{color:#343434;background-color:#b23737;border-color:#151515}.btn-run:active,.btn-reset:active,.btn-run.active,.btn-reset.active{background-image:none}.btn-run.disabled,.btn-reset.disabled,.btn-run[disabled],.btn-reset[disabled],fieldset[disabled] .btn-run,fieldset[disabled] .btn-reset,.btn-run.disabled:hover,.btn-reset.disabled:hover,.btn-run[disabled]:hover,.btn-reset[disabled]:hover,fieldset[disabled] .btn-run:hover,fieldset[disabled] .btn-reset:hover,.btn-run.disabled:focus,.btn-reset.disabled:focus,.btn-run[disabled]:focus,.btn-reset[disabled]:focus,fieldset[disabled] .btn-run:focus,fieldset[disabled] .btn-reset:focus,.btn-run.disabled:active,.btn-reset.disabled:active,.btn-run[disabled]:active,.btn-reset[disabled]:active,fieldset[disabled] .btn-run:active,fieldset[disabled] .btn-reset:active,.btn-run.disabled.active,.btn-reset.disabled.active,.btn-run[disabled].active,.btn-reset[disabled].active,fieldset[disabled] .btn-run.active,fieldset[disabled] .btn-reset.active{background-color:#ca5252;border-color:#343434}.widgets .panel{background:#fff}.widgets .panel .panel-header{border-bottom:1px solid #E1E1E1}.widgets .panel .panel-footer{border-top:1px solid #E1E1E1}

data/index.html

@@ -7,7 +7,7 @@
 
     <link rel="stylesheet" href="/css/fonts.css">
     <link rel="stylesheet" href="/css/normalize.css">
-    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/main.css">
 
     <span class="ng-hide" ng-controller="ThemesCtrl">
       <link ng-if="themes.active.url" rel="stylesheet" ng-href="{{themes.active.url}}">
@@ -17,15 +17,18 @@
 
   <body>
     <nav ng-controller="NavCtrl">
-      <span class="logo">Robeaux</span>
-
-      <span class="links">
-        <a href="#/robots" ng-class="{active: active('robots')}">robots</a>
-        <a href="#/themes" ng-class="{active: active('themes')}">themes</a>
-      </span>
+      <div class="container">
+        <a href="/" class="logo"><img src="/images/logo-robeaux.png" alt=""></a>
+
+        <span class="links">
+          <a href="#/robots" ng-class="{active: active('robots')}">Robots</a>
+          <a href="#/themes" ng-class="{active: active('themes')}">Themes</a>
+          <a href="#/widgets" ng-class="{active: active('widgets')}">Widgets</a>
+        </span>
+      </div>
     </nav>
 
-    <div ng-view class="container"></div>
+    <div ng-view class="container-wrap"></div>
 
     <script src="/js/vendor/angular.min.js"></script>
     <script src="/js/vendor/angular-route.min.js"></script>
@@ -33,12 +36,16 @@
     <script src="/js/app.js"></script>
     <script src="/js/router.js"></script>
     <script src="/js/services/themes.js"></script>
+    <script src="/js/services/widgets.js"></script>
+    <script src="/js/directives/widget.js"></script>
     <script src="/js/controllers/nav_ctrl.js"></script>
     <script src="/js/controllers/index_ctrl.js"></script>
     <script src="/js/controllers/themes_ctrl.js"></script>
+    <script src="/js/controllers/widget_editor_ctrl.js"></script>
     <script src="/js/controllers/robot_ctrl.js"></script>
     <script src="/js/controllers/robot_commands_ctrl.js"></script>
     <script src="/js/controllers/device_commands_ctrl.js"></script>
     <script src="/js/controllers/device_events_ctrl.js"></script>
+    <script src="/js/controllers/widgets_ctrl.js"></script>
   </body>
 </html>

data/js/controllers/widget_editor_ctrl.js

@@ -0,0 +1,44 @@
+var WidgetEditorCtrl = function WidgetEditorCtrl($scope, Widgets) {
+  $scope.widgets = Widgets;
+
+  $scope.add = function(name) {
+    if (!name || name === '') {
+      return false;
+    }
+
+    var result = Widgets.add(name);
+
+    if (result) {
+      $scope.edit(result);
+      $scope.name = '';
+    }
+  };
+
+  $scope.edit = function(widget) {
+    if ($scope.editing === widget || !widget.custom) {
+      return $scope.editing = null;
+    }
+
+    $scope.editing = widget;
+  };
+
+  $scope.addAttr = function() {
+    if ($scope.editing && $scope.newAttr.length) {
+      $scope.editing.attrs.push($scope.newAttr);
+    }
+
+    $scope.newAttr = '';
+
+    Widgets.save();
+  };
+
+  $scope.removeAttr = function(index) {
+    if (!$scope.editing) {
+      return;
+    }
+
+    $scope.editing.attrs.splice(index, 1);
+
+    Widgets.save();
+  };
+};

data/js/controllers/widgets_ctrl.js

@@ -0,0 +1,40 @@
+var WidgetsCtrl = function WidgetsCtrl($scope, Widgets) {
+  $scope.widgets = Widgets;
+  $scope.activeWidgets = [];
+  $scope.newWidget = false;
+
+  // fetch robot name from parent
+  var interval = setInterval(function() {
+    if ($scope.$parent.robot) {
+      $scope.$apply(function() {
+        $scope.robot = $scope.$parent.robot.name;
+        $scope.activeWidgets = Widgets.activeWidgets[$scope.robot] || [];
+      })
+    }
+  }, 100);
+
+  var save = function() {
+    Widgets.activeWidgets[$scope.robot] = $scope.activeWidgets;
+    Widgets.save();
+  }
+
+  $scope.newActiveWidget = function(widget) {
+    if (widget.base === '') {
+      return false;
+    }
+
+    widget.name = widget.base.name;
+    delete widget.base;
+
+    $scope.activeWidgets.push(widget);
+
+    save();
+
+    $scope.newWidget = false;
+  };
+
+  $scope.removeWidget = function(i) {
+    $scope.activeWidgets.splice(i, 1);
+    save();
+  };
+};

data/js/directives/widget.js

@@ -0,0 +1,50 @@
+robeaux.directive("widget", function(Widgets, $http, $compile) {
+  var directive = {};
+
+  var fetchTemplate = function(url) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url, false);
+    request.send(null);
+
+    if (request.status === 200) {
+      return request.responseText;
+    }
+  };
+
+  directive.restrict = "E";
+
+  directive.scope = {};
+
+  directive.link = function($scope, $element, $attrs) {
+    var widget = Widgets.find($attrs.name),
+        tpl;
+
+    $scope.attrs = angular.fromJson($attrs.attrs);
+
+    if (!widget) {
+      return;
+    }
+
+    if (widget.template) {
+      tpl = $compile("<span>" + widget.template + "</span>")($scope);
+    }
+
+    if (widget.template_url) {
+      tpl = $compile("<span>" + fetchTemplate(widget.template_url) + "</span>")($scope);
+    }
+
+    $element.append(tpl);
+
+    if (widget.script) {
+      eval(widget.script)
+    }
+
+    if (widget.script_url) {
+      $http.get(widget.script_url).success(function(data) {
+        eval(data);
+      });
+    }
+  };
+
+  return directive;
+});

data/js/router.js

@@ -16,6 +16,11 @@ robeaux.config(function($routeProvider) {
       templateUrl: '/partials/themes.html',
     })
 
+    .when('/widgets', {
+      controller: 'WidgetEditorCtrl',
+      templateUrl: '/partials/widget_editor.html',
+    })
+
     .otherwise({
       redirectTo: '/robots'
     });