Skip to content
Permalink
Browse files

* bit:color:sort - moving to bit:preview, adding color name via name-…

…that-color module

* bit:color:sort - fixed bug: incorrect max range for calc'ing percents
* removed unnecessary modules
  • Loading branch information...
steven dale
steven dale committed Sep 16, 2016
1 parent c345bac commit a1b5e0d2d2acdcbdef8e1fd4939aa1536b08d2f6
@@ -1,7 +1,9 @@
import chroma from 'chroma-js';
import Granim from 'granim';
import _ from 'lodash';
// cant figure out how to load vibrant via import, using vendored minified js file
import nameThisColor from 'name-this-color';

// depends on vibrant.js, vendored. TODO: refactor via import

classifyColors = function classifyColors(template){

@@ -14,11 +16,13 @@ classifyColors = function classifyColors(template){

// sample the image for key colors
var swatches = vibrant.swatches();
var populationSum = 0;

for (var swatch in swatches){
// some swatches have 0 population, skip them
if (swatches.hasOwnProperty(swatch) && swatches[swatch] && swatches[swatch].population){
console.log(swatch, ": ", swatches[swatch].getHex(), ": ", swatches[swatch].population);
// Parallels.log.debug(swatch, ": ", swatches[swatch].getHex(), ": ", swatches[swatch].population);
populationSum = populationSum + swatches[swatch].population;
vibSwatchesArray.push( {
name: swatch,
hex: swatches[swatch].getHex(),
@@ -36,14 +40,14 @@ classifyColors = function classifyColors(template){

var options = {
oldNumber: value.population,
oldMin: _.minBy(vibSwatchesArray, 'population').population, // most used
oldMax: _.maxBy(vibSwatchesArray, 'population').population, // least used color
oldMin: 0,
oldMax: populationSum,
newMin: 0,
newMax: 1
}

value.scaledPopulation = Utilities.scaleNumberToRange(options);
console.log("value.scaledPopulation: ", value.scaledPopulation);
// Parallels.log.debug("value.scaledPopulation: ", value.scaledPopulation);
});

var vibSortedSwatches = _.sortBy(vibSwatchesArray, ['population']);
@@ -82,10 +86,12 @@ classifyColors = function classifyColors(template){

// make sure image is ready + loaded before trying to process
img.addEventListener('load', function() {
// console.log('loaded image');
// Parallels.log.debug('loaded image');

var sample = sampleColors(img);
console.log(sample);
// Parallels.log.debug(sample);

var $scaleContainer = $('<div>').addClass('scale__container');

//////////////////////
//////////////////////
@@ -106,7 +112,6 @@ classifyColors = function classifyColors(template){
$chromaScale.prepend($swatch);
});

$bitElement.prepend($chromaScale);

//////////////////////
//////////////////////
@@ -119,21 +124,27 @@ classifyColors = function classifyColors(template){
var $swatch = $('<div>', {
class: 'swatch--vibrant vibrant--' + value.name ,
css: {
backgroundColor: value.hex,
text: value.name + ':' + value.population
backgroundColor: value.hex
},
// figure the % this color represents from the total
// then make the width of this box
// TODO: adjust for small %
width: colorPercent
width: colorPercent + "%"
});

$swatch.text(value.name, ':', colorPercent);
var colorName = nameThisColor(value.hex)[0].title;
var colorText = value.name + ':' + colorPercent + ':' + colorName;
// console.log('swatch color: ', colorName);
// console.log('iteration', key);
// console.log(colorText);

$swatch.text(colorText);
$vibrantScale.prepend($swatch);
});

$bitElement.prepend($vibrantScale);

$scaleContainer.prepend($chromaScale);
$scaleContainer.prepend($vibrantScale);
$bitElement.prepend($scaleContainer);
});

};
@@ -1,15 +1,21 @@
.scale__container {
display: none;
width: 400px;
margin: 0 auto;
}

.scale--chroma {
position: relative;
margin: 3rem;
top: 400px;
position: absolute;
z-index: 10000;
width: 400px;
top: 0;
}

.scale--vibrant {
position: relative;
margin: 3rem;
top: 420px;
position: absolute;
z-index: 10000;
width: 400px;
top: 50px;
}

.swatch--chroma {
@@ -19,8 +25,10 @@
}

.swatch--vibrant {
display: inline-block;
display: block;
padding: 0.5rem 0;
height: 40px;
color: white;
// width: // variable, depends on population (# of pixels this color has), calc'ed by JS
}

@@ -21,7 +21,6 @@ BitEvents = {
$editingElement.attr('contenteditable', 'true');
$editingElement.attr('data-clickable', 'true');
}

}
},

@@ -23,7 +23,6 @@ Parallels.AppModes['preview-bit'] = {
Session.set('bitPreviewingId', bitPreviewingId);

Parallels.log.debug("bit:image:preview: " + bitPreviewingId);

Parallels.Keys.unbindActions();

var options = {
@@ -35,6 +34,20 @@ Parallels.AppModes['preview-bit'] = {

Parallels.Animation.Image.morph(options);
Draggable.get( $bit ).disable();

var tl = new TimelineMax();
tl
.set( $bit.find('.scale__container'), { display: 'block', opacity: 0 })
.to(
$bit.find('.scale__container'),
1,
{
opacity: 1,
autoAlpha: 1,
ease: Power4.easeOut
}
);

// TODO: disable bitHover too

}
@@ -53,6 +66,10 @@ Parallels.AppModes['preview-bit'] = {
var bitTemplate = Utilities.getBitTemplate(bitPreviewingId);
var bit = Blaze.getData(bitTemplate);

var tl = new TimelineMax();
tl
.to( $bit.find('.scale__container'), 0.25, { opacity: 0, autoAlpha: 0, ease: Power4.easeOut })
.set( $bit.find('.scale__container'), { display: 'none' });

if (bitPreviewingId) {
// TODO: pass the assignment/resetting of these
@@ -64,7 +81,7 @@ Parallels.AppModes['preview-bit'] = {
Session.set('bitPreviewingId', null);

Parallels.Keys.bindActions();

var options = {
bit: bit,
$bit: $bit,

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -17,8 +17,6 @@
"granim": "^1.0.31",
"lodash": "^4.15.0",
"meteor-node-stubs": "^0.2.3",
"neo4j": "1.1.1",
"node-vibrant": "^2.1.2",
"vibrant": "0.0.1"
"neo4j": "1.1.1"
}
}
@@ -55,7 +55,6 @@
},
"dependencies": {
"chroma": "0.0.1",
"meteor-node-stubs": "^0.2.3",
"node-vibrant": "^2.1.2"
"meteor-node-stubs": "^0.2.3"
}
}

0 comments on commit a1b5e0d

Please sign in to comment.
You can’t perform that action at this time.