From b5a5178ec694c1ca0cb09cc41f1e9f4d3927beb0 Mon Sep 17 00:00:00 2001 From: lone-cloud Date: Tue, 22 Sep 2015 14:05:43 -0700 Subject: [PATCH] A few work things --- app/components/controls/light-control.js | 7 +- app/styles/app.scss | 22 +-- app/templates/components/bridge-controls.hbs | 3 +- .../components/controls/light-control.hbs | 10 +- bower.json | 3 +- ember-cli-build.js | 1 + package.json | 6 +- vendor/colorpicker.js | 152 ++++++++++++++++++ 8 files changed, 177 insertions(+), 27 deletions(-) create mode 100644 vendor/colorpicker.js diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js index 6f4c43f..7b39e79 100644 --- a/app/components/controls/light-control.js +++ b/app/components/controls/light-control.js @@ -10,7 +10,7 @@ export default Em.Component.extend({ lightsDataIntervalHandle: null, - isShowingAddGroupsModal: false, + isShowingColorPicker: false, didInsertElement: function(){ // handle color changes @@ -26,7 +26,10 @@ export default Em.Component.extend({ actions: { clickLight: function(){ - + console.log('clickLight'); + }, + toggleColorpicker: function() { + this.toggleProperty('isShowingColorPicker'); } }, diff --git a/app/styles/app.scss b/app/styles/app.scss index 714c0e2..b035fab 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -28,15 +28,6 @@ body { position: static; } -.triangle { - position: absolute; - right: 11px; - top: -16px; - border-style: solid; - border-width: 0 15px 15px 15px; - border-color: transparent transparent #AFAFAF transparent; -} - #settings { cursor: pointer; position: absolute; @@ -45,10 +36,15 @@ body { } .settingsItem { - margin-left: 10px; + margin-left: 15px; position: relative; } +.settingsItem md-icon::before { + font-size: 28px; + transition: 0.1s all ease-in-out; +} + .appSettingsItem { padding: 10px; transition: 0.1s all ease-in-out; @@ -188,10 +184,7 @@ md-list-item .md-no-style { } .color { - width: 50px; - padding: 22px; - cursor: pointer; - font-size: 0; + border: 1px solid rgba(0, 0, 0, 0.5); } .colorpicker { @@ -202,7 +195,6 @@ md-list-item .md-no-style { font-size: 12px; position: absolute; width: 460px; - display: none; } #picker { diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs index 9200748..f942d59 100644 --- a/app/templates/components/bridge-controls.hbs +++ b/app/templates/components/bridge-controls.hbs @@ -9,7 +9,6 @@ {{#if appSettingsDisplayed}}
-
Switch bridge
Clear application settings
@@ -21,7 +20,7 @@
{{#each tabData as |tab|}} - {{tab.name}} + {{tab.name}} {{/each}}
diff --git a/app/templates/components/controls/light-control.hbs b/app/templates/components/controls/light-control.hbs index 4a84442..931a95a 100644 --- a/app/templates/components/controls/light-control.hbs +++ b/app/templates/components/controls/light-control.hbs @@ -6,7 +6,7 @@ {{#paper-item class="item"}} {{paper-icon icon="power-settings-new"}}

Lights

- {{#paper-switch checked=lightsOn disabled=trial}} {{lightsOnTxt}} {{/paper-switch}} + {{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}} {{/paper-item}} {{#paper-item class="item"}} @@ -18,10 +18,12 @@ {{#paper-item class="item"}} {{paper-icon icon="color-lens"}}

Color

- -
+ {{#paper-button raised=true class="color" action="toggleColorpicker"}}{{/paper-button}} + {{#if isShowingColorPicker}} +
-
+
+ {{/if}} {{/paper-item}} {{#paper-item class="item"}} diff --git a/bower.json b/bower.json index e20c6d2..78136b8 100644 --- a/bower.json +++ b/bower.json @@ -5,7 +5,7 @@ "ember": "~2.0.2", "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", - "ember-data": "~1.13.9", + "ember-data": "~2.0.1", "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5", "ember-qunit": "0.4.9", "ember-qunit-notifications": "0.0.7", @@ -15,6 +15,7 @@ "jquery": "~2.1.4", "jquery-mousewheel": "~3.1.13", "loader.js": "ember-cli/loader.js#3.2.0", + "matchMedia": "~0.2.0", "nouislider": "^8.0.1", "qunit": "~1.18.0", "three.js": "~0.71.0" diff --git a/ember-cli-build.js b/ember-cli-build.js index f00946c..cbf157b 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -7,6 +7,7 @@ module.exports = function(defaults) { }); app.import('vendor/dancer.js'); + app.import('vendor/colorpicker.js'); 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'); diff --git a/package.json b/package.json index 2fafa36..8d8a367 100644 --- a/package.json +++ b/package.json @@ -36,11 +36,11 @@ "ember-cli-sri": "^1.0.1", "ember-cli-uglify": "^1.0.1", "ember-cli-windows-addon": "^1.2.2", - "ember-data": "1.13.12", + "ember-data": "2.0.1", "ember-disable-proxy-controllers": "^1.0.0", "ember-export-application-global": "^1.0.3", - "ember-modal-dialog": "0.8.0", - "ember-paper": "0.2.7", + "ember-modal-dialog": "0.8.1", + "ember-paper": "0.2.8", "ember-truth-helpers": "1.1.0", "liquid-fire": "0.21.2" } diff --git a/vendor/colorpicker.js b/vendor/colorpicker.js new file mode 100644 index 0000000..71ddc9b --- /dev/null +++ b/vendor/colorpicker.js @@ -0,0 +1,152 @@ +//https://github.com/bgrins/colorwheel-1k/tree/gh-pages +(function() { + + // Declare constants and variables to help with minification + // Some of these are inlined (with comments to the side with the actual equation) + var doc = document; + doc.c = doc.createElement; + b.a = b.appendChild; + + var width = c.width = c.height = 400, + label = b.a(doc.c("p")), + input = b.a(doc.c("input")), + imageData = a.createImageData(width, width), + pixels = imageData.data, + oneHundred = input.value = input.max = 100, + circleOffset = 10, + diameter = 380, //width-circleOffset*2, + radius = 190, //diameter / 2, + radiusPlusOffset = 200, //radius + circleOffset + radiusSquared = radius * radius, + two55 = 255, + currentY = oneHundred, + currentX = -currentY, + wheelPixel = 16040; // circleOffset*4*width+circleOffset*4; + + // Math helpers + var math = Math, + PI = math.PI, + PI2 = PI * 2, + sqrt = math.sqrt, + atan2 = math.atan2; + + // Setup DOM properties + b.style.textAlign="center"; + label.style.font = "2em courier"; + input.type = "range"; + + // Load color wheel data into memory. + for (y = input.min = 0; y < width; y++) { + for (x = 0; x < width; x++) { + var rx = x - radius, + ry = y - radius, + d = rx * rx + ry * ry, + rgb = hsvToRgb( + (atan2(ry, rx) + PI) / PI2, // Hue + sqrt(d) / radius, // Saturation + 1 // Value + ); + + // Print current color, but hide if outside the area of the circle + pixels[wheelPixel++] = rgb[0]; + pixels[wheelPixel++] = rgb[1]; + pixels[wheelPixel++] = rgb[2]; + pixels[wheelPixel++] = d > radiusSquared ? 0 : two55; + } + } + + // Bind Event Handlers + input.onchange = redraw; + c.onmousedown = doc.onmouseup = function(e) { + // Unbind mousemove if this is a mouseup event, or bind mousemove if this a mousedown event + doc.onmousemove = /p/.test(e.type) ? 0 : (redraw(e), redraw); + } + + // Handle manual calls + mousemove event handler + input change event handler all in one place. + function redraw(e) { + + // Only process an actual change if it is triggered by the mousemove or mousedown event. + // Otherwise e.pageX will be undefined, which will cause the result to be NaN, so it will fallback to the current value + currentX = e.pageX - c.offsetLeft - radiusPlusOffset || currentX; + currentY = e.pageY - c.offsetTop - radiusPlusOffset || currentY; + + // Scope these locally so the compiler will minify the names. Will manually remove the 'var' keyword in the minified version. + var theta = atan2(currentY, currentX), + d = currentX * currentX + currentY * currentY; + + // If the x/y is not in the circle, find angle between center and mouse point: + // Draw a line at that angle from center with the distance of radius + // Use that point on the circumference as the draggable location + if (d > radiusSquared) { + currentX = radius * math.cos(theta); + currentY = radius * math.sin(theta); + theta = atan2(currentY, currentX); + d = currentX * currentX + currentY * currentY; + } + + label.textContent = b.style.background = hsvToRgb( + (theta + PI) / PI2, // Current hue (how many degrees along the circle) + sqrt(d) / radius, // Current saturation (how close to the middle) + input.value / oneHundred // Current value (input type="range" slider value) + )[3]; + + // Reset to color wheel and draw a spot on the current location. + a.putImageData(imageData, 0, 0); + + // Draw the current spot. + // I have tried a rectangle, circle, and heart shape. + /* + // Rectangle: + a.fillStyle = '#000'; + a.fillRect(currentX+radiusPlusOffset,currentY+radiusPlusOffset, 6, 6); + */ + /* + // Circle: + a.beginPath(); + a.strokeStyle = '#000'; + a.arc(~~currentX+radiusPlusOffset,~~currentY+radiusPlusOffset, 4, 0, PI2); + a.stroke(); + */ + + // Heart: + a.font = "1em arial"; + a.fillText("♥", currentX+radiusPlusOffset-4,currentY+radiusPlusOffset+4); + + } + + // Created a shorter version of the HSV to RGB conversion function in TinyColor + // https://github.com/bgrins/TinyColor/blob/master/tinycolor.js + function hsvToRgb(h, s, v) { + h*=6; + var i = ~~h, + f = h - i, + p = v * (1 - s), + q = v * (1 - f * s), + t = v * (1 - (1 - f) * s), + mod = i % 6, + r = [v, q, p, p, t, v][mod] * two55, + g = [t, v, v, q, p, p][mod] * two55, + b = [p, p, t, v, v, q][mod] * two55; + + return [r, g, b, "rgb("+ ~~r + "," + ~~g + "," + ~~b + ")"]; + } + + // Kick everything off + redraw(0); + + /* + // Just an idea I had to kick everything off with some changing colors… + // Probably no way to squeeze this into 1k, but it could probably be a lot smaller than this: + currentX = currentY = 1; + var interval = setInterval(function() { + currentX--; + currentY*=1.05; + redraw(0) + }, 7); + + setTimeout(function() { + clearInterval(interval) + }, 700) + */ + +})();