color

app/components/bridge-controls.js

@@ -1,7 +1,7 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNames: ['container-fluid'],
+  classNames: ['container'],
   elementId: 'bridgeControls',
 
   bridgeIp: null,

app/components/bridge-finder.js

@@ -1,7 +1,7 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNames: ['container-fluid', 'bridgeFinder'],
+  classNames: ['container', 'bridgeFinder'],
 
   bridgeIp: null,
   trial: false,

app/components/controls/light-control.js

@@ -14,15 +14,20 @@ export default Em.Component.extend({
 
   didInsertElement: function(){
     // handle color changes
-    var self = this;
+    var self = this,
+      canvas = $('#picker')[0].getContext('2d'),
+      image = new Image();
 
-    Em.$('.color').colorPicker({
-      opacity: false,
+    image.src ='assets/images/colorwheel.png';
+    image.onload = function () {
+      canvas.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
+    };
+  },
 
-      renderCallback: function(elem){
-        console.log(elem[0].value);
-      }
-    });
+  actions: {
+    clickLight: function(){
+
+    }
   },
 
   // determines whether the lights are on/off for the lights switch

app/components/huegasm-app.js

@@ -1,7 +1,7 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNames: ['container-fluid'],
+  classNames: ['container'],
   bridgeIp: null,
 
   bridgeUsername: null,

app/styles/app.scss

@@ -51,6 +51,7 @@ body {
 
 .appSettingsItem {
   padding: 10px;
+  transition: 0.1s all ease-in-out;
 }
 
 .appSettingsItem.warn {
@@ -149,13 +150,17 @@ md-progress-linear {
   right: 0;
 }
 
+md-list {
+  padding: 0;
+}
+
 md-list-item .md-no-style {
   padding: 0;
 }
 
 #bridgeControls {
   position: relative;
-  max-width: 900px;
+  max-width: 1000px;
 }
 
 .navigation {
@@ -171,14 +176,11 @@ md-list-item .md-no-style {
 .navigationItem.active {
   font-weight: bold;
   cursor: default;
+  text-decoration: none !important;
 }
 
 .navigationItem:hover {
-  font-weight: bold;
-}
-
-.cp-color-picker{
-  z-index: 100;
+  text-decoration: underline;
 }
 
 #lightControl{
@@ -190,9 +192,27 @@ md-list-item .md-no-style {
   padding: 22px;
   cursor: pointer;
   font-size: 0;
-  margin-right: 10px;
 }
-  // LIGHT GROUP
+
+.colorpicker {
+  background-color: #222222;
+  border-radius: 5px 5px 5px 5px;
+  box-shadow: 2px 2px 2px #444444;
+  color: #FFFFFF;
+  font-size: 12px;
+  position: absolute;
+  width: 460px;
+  display: none;
+}
+
+#picker {
+  cursor: crosshair;
+  float: left;
+  margin: 10px;
+  border: 0;
+}
+
+// LIGHT GROUP
 md-slider {
   cursor: pointer;
 }
@@ -238,6 +258,7 @@ md-slider.md-default-theme .md-thumb:after {
 }
 
 .lightInactive {
+  cursor: pointer;
   position: relative;
 }
 
@@ -266,18 +287,21 @@ md-slider.md-default-theme .md-thumb:after {
   background-color: rgba(255, 0, 0, 0.7);
 }
 
-.lightActive img {
-  transition-duration: 0.3s;
-  transition-property: transform;
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-}
+.lightActive {
+  cursor: pointer;
 
-.lightActive img:hover {
-  transform: scale(1.2);
+  img {
+    transition-duration: 0.3s;
+    transition-property: transform;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  }
+  img:hover {
+    transform: scale(1.2);
+  }
 }
 
 .ember-modal-overlay.translucent {
-  background-color: #000000;
+  background-color: rgba(0, 0, 0, 0.50);
 }
 
 md-icon {
@@ -293,7 +317,7 @@ md-icon {
 }
 
 .removeButton {
-  margin: 10px 0 10px auto;
+  margin: 10px 0 10px 50px;
 }
 
 .sideNavTitle {
@@ -306,6 +330,10 @@ md-toolbar {
 }
 
 // GROUP CONTROL
+.groupRow {
+  transition: 0.1s all ease-in-out;
+}
+
 .groupRow.selectedRow {
   background-color: #7F7F7F !important;
   color: white;
@@ -317,11 +345,10 @@ md-toolbar {
 
 .groupRow.selectedRow .groupSelect {
   cursor: default;
-  padding-left: 10px;
 }
 
 .groupSelect {
-  padding: 10px 0 10px 0;
+  padding: 10px 0 10px 10px;
   width: 70%;
   font-family: 'Open Sans', sans-serif;
 }

app/templates/components/controls/light-control.hbs

@@ -19,6 +19,9 @@
     {{paper-icon icon="color-lens"}}
     <p>Color</p>
     <input class="color" value="rgb(0, 0, 0)" />
+    <div class="colorpicker">
+        <canvas id="picker" width="300" height="300"></canvas>
+    </div>
   {{/paper-item}}
 
   {{#paper-item class="item"}}

bower.json

@@ -11,15 +11,13 @@
     "ember-qunit-notifications": "0.0.7",
     "ember-resolver": "~0.1.18",
     "hammerjs": "~2.0.4",
-    "hue-color-converter": "https://github.com/Q42/hue-color-converter",
     "JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
     "jquery": "~2.1.4",
     "jquery-mousewheel": "~3.1.13",
     "loader.js": "ember-cli/loader.js#3.2.0",
     "nouislider": "^8.0.1",
     "qunit": "~1.18.0",
-    "three.js": "~0.71.0",
-    "tinyColorPicker": "https://github.com/PitPik/tinyColorPicker.git"
+    "three.js": "~0.71.0"
   },
   "resolutions": {
     "ember": "~2.0.2",

ember-cli-build.js

@@ -10,8 +10,6 @@ module.exports = function(defaults) {
   app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
   app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
   app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
-  app.import('bower_components/tinyColorPicker/colors.js');
-  app.import('bower_components/tinyColorPicker/jqColorPicker.js');
   app.import('bower_components/three.js/three.js');
 
   // Use `app.import` to add additional libraries to the generated