Added texture display/edit in the list of places

app/index.html

@@ -31,12 +31,10 @@
 
  <!-- build:js(.) scripts/vendor.js -->
  <!-- bower:js -->
- <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
  <script src="bower_components/tinycolor/tinycolor.js"></script>
- <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <script src="bower_components/angular-color-picker/angularjs-color-picker.js"></script>
  <script src="bower_components/d3/d3.js"></script>
  <script src="bower_components/angular-d3-module/angular-d3-module.js"></script>
@@ -48,6 +46,7 @@
  <script src="bower_components/underscore/underscore.js"></script>
  <script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>
  <script src="bower_components/Leaflet.extra-markers/src/leaflet.extra-markers.js"></script>
+ <script src="bower_components/textures/textures.min.js"></script>
  <!-- endbower -->
  <!-- endbuild -->
 

app/scripts/app.js

@@ -17,7 +17,8 @@ angular
  'angularMoment',
  'leaflet-directive',
  'color.picker',
- 'd3'
+ 'd3',
+ 'textures'
 ])
 .config(['$logProvider', function ($logProvider){
  //leaflet map debug hide

app/scripts/controllers/vis.js

@@ -3,8 +3,8 @@
 /* select year, then select and customize places to visualize */
 
 angular.module('365daysApp').controller('VisCtrl', [
- '$scope', '$location', '_', 'analyzer', 'visualizer',
- function ($scope, $location, _, analyzer, visualizer) {
+ '$scope', '$location', '_', 'textures', 'analyzer', 'visualizer',
+ function ($scope, $location, _, textures, analyzer, visualizer) {
 
  //TODO: make previous step done check as function
  //check data created
@@ -16,40 +16,106 @@ angular.module('365daysApp').controller('VisCtrl', [
  //get dataset for vis
  var dataset = analyzer.getDatasetForVis();
 
- //set colors for vis
+ //places for editing directives
+ $scope.places = dataset.places;
+
+ //set colors and textures for vis
  var colors = {
  home: ['#db59a0', '#eb7e58', '#eb535a', '#ebcd53'], //warm color
  work: ['#4fa6ce', '#5dd5ba', '#527cb0', '#96d070'], //cold color
- others: ['#666666', '#8c8c8c', '#b3b3b3', '#d9d9d9'] //grey HSB B- 40, 55, 70, 85%
+ //others: ['#666666', '#8c8c8c', '#b3b3b3', '#d9d9d9'] //grey HSB B- 40, 55, 70, 85%
+ others: ['#8c8c8c', '#8c8c8c', '#8c8c8c', '#8c8c8c'] //grey HSB B- 40, 55, 70, 85%
  };
  $scope.colors = _.object(_.map(dataset.places, function (list, type) {
  var c = _.map(_.range(list.length), function (i) {
  return colors[type][i % colors[type].length];
  });
  return [type, c];
  }));
- var oldColors = angular.copy($scope.colors);
- $scope.places = dataset.places; //needed for directives
+
+ //for texture options in the edit panel
+ var textureOptions = [
+ {}, //no texture
+ textures.lines().size(8),
+ textures.circles().size(8),
+ textures.lines().size(4),
+ textures.circles().size(4)
+ ];
+
+ //index for texture options
+ var txt = {
+ home: [1],
+ work: [0],
+ others: [1, 2, 3, 4]
+ };
+ $scope.textures = _.object(_.map(dataset.places, function (list, type) {
+ var t = _.map(_.range(list.length), function (i) {
+ return txt[type][i % txt[type].length];
+ });
+ return [type, t];
+ }));
+ $scope.textOptionsCount = function () {
+ return _.range(textureOptions.length);
+ };
 
  //draw vis
+ visualizer.drawCanvas();
  visualizer.drawVis(dataset, $scope.colors);
 
  //color change
  $scope.isEditCollapsed = true;
- $scope.$watch('colors', function (newVal, oldVal) {
- if (newVal !== oldVal) {
- _.each(oldColors, function (list, type) {
- //find the changed color and update the vis
- var oldColor = _.difference(list, newVal[type])[0];
- var newColor = _.difference(newVal[type], list)[0];
- if (!_.isUndefined(oldColor) && !_.isUndefined(newColor)) {
- var changeIndex = _.indexOf(list, oldColor);
- visualizer.updateColor(type, changeIndex, newColor);
- //update old color with new one
- oldColors[type] = angular.copy(newVal[type]);
- }
- });
+
+ $scope.drawColorTextureChip = function (wrapper, index) {
+
+ var texture = angular.copy(textureOptions[index]);
+
+ var color = 'rgba(0, 0, 0, 0)';
+ if (index === 0) {
+ texture.url = function () { return color; };
+ } else {
+ texture.background(color);
+ wrapper.call(texture);
  }
- }, true);
+ wrapper.append('rect')
+ .attr('width', 100)
+ .attr('height', 20)
+ .style('fill', texture.url());
+ };
+
+ $scope.updateTextureSelection = function (type, placeIndex, textureIndex) {
+ $scope.textures[type][placeIndex] = textureIndex;
+ };
  }
-]);
+])
+.directive('colorChip', ['d3', 'visualizer', function (d3, visualizer) {
+ return {
+ restrict: 'E',
+ scope: {
+ color: '=',
+ texture: '=',
+ type: '@',
+ index: '@'
+ },
+ link: function (scope, elem) {
+ scope.$watchGroup(['color', 'texture'], function (newVals) {
+ //apply color and pattern to the color chip
+ var svg = d3.select(elem[0]).select('svg');
+ svg.selectAll('*').remove();
+ scope.$parent.drawColorTextureChip(svg, newVals[1]);
+ visualizer.updateColor(scope.type, scope.index, newVals[0]);
+ });
+ }
+ };
+}])
+.directive('textureList', ['d3', function (d3) {
+ return {
+ restrict: 'EA',
+ scope: {
+ index: '@',
+ type: '@'
+ },
+ link: function (scope, elem) {
+ scope.$parent.drawColorTextureChip(d3.select(elem[0]).select('svg'), +scope.index);
+ }
+ };
+}]);

app/scripts/services/visualizer.js

@@ -9,10 +9,12 @@ angular.module('365daysApp').factory('visualizer', [
  landscape: { w: 4000, h: 3000 }
  };
  var options = { orientation: 'portrait', size: 1 };
-
  this.getCanvasSettings = function () {
  return options;
  };
+
+ //canvas layout variables
+ var svg;
  var margin = { top: 200 };
  var dim = {};
 
@@ -48,6 +50,13 @@ angular.module('365daysApp').factory('visualizer', [
  };
  };
 
+ this.drawCanvas = function () {
+ //draw canvas - keep only one SVG for export later
+ svg = d3.select('#vis').append('svg')
+ .attr('width', dim.w + margin.left + margin.right)
+ .attr('height', dim.h + margin.top + margin.bottom);
+ };
+
  function drawDay(g, startDate, dayUnit, index) {
 
  //offset from the rectangle composed of the blocks to put text
@@ -288,12 +297,7 @@ angular.module('365daysApp').factory('visualizer', [
 
  this.drawVis = function (data, colors) {
 
- console.log('---vis draw', colors);
-
- //draw canvas - keep only one SVG for export later
- var svg = d3.select('#vis').append('svg')
- .attr('width', dim.w + margin.left + margin.right)
- .attr('height', dim.h + margin.top + margin.bottom);
+ //console.log('---vis draw', colors);
  var g = svg.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 

app/views/vis.html

@@ -6,24 +6,28 @@ <h2> Colors </h2>
  <ul>
  <li ng-repeat="place in list">
  {{ place.name }} / {{ place.humanTime }} / {{ place.count }} days
- <!-- options.colors[type][$index % options.colors[type].length] -->
- <div style="background-color:{{ colors[type][$index] }};" class="chip"></div>
+ <color-chip data-color="colors[type][$index]" data-texture="textures[type][$index]" data-type="{{ type }}" data-index="{{ $index }}">
+ <div class="chip" style="background-color: {{ colors[type][$index] }}"><svg width="60" height="20"></svg></div>
+ </color-chip>
  <span>
  <a ng-click="isEditCollapsed = !isEditCollapsed">
  <span ng-show="isEditCollapsed">Edit</span>
  <span ng-hide="isEditCollapsed">Close</span>
  </a>
  </span>
+ <!-- color and texture edit panel -->
  <div ng-hide="isEditCollapsed" class="fill-edit">
  <color-picker ng-model="colors[type][$index]" color-picker-format="'hex'" color-picker-alpha="false" color-picker-case="'lower'"></color-picker>
- <div>new pattern selection comes here</div>
- <button type="button" class="btn btn-primary" ng-click="isEditCollapsed = true">Edit</button>
+ <texture-list ng-repeat="i in textOptionsCount()" data-index="{{ i }}">
+ <div ng-class="textures[type][$parent.$index] == i ? 'texture selected' : 'texture normal'" style="background-color: {{ colors[type][$parent.$index] }}" ng-click="updateTextureSelection(type, $parent.$index, i)">
+ <svg width="20" height="20"></svg>
+ </div>
+ </texure-list>
  </div>
  </li>
  </ul>
  </div>
  </div>
- <!-- <p ng-if="edited"><a class="btn btn-lg btn-success" ng-click="completeEdit(); edited = false">Update <span class="glyphicon glyphicon-ok"></span></a></p> -->
 </div>
 <div class="wrapper-right vis">
  <div id="vis"></div>

bower.json

@@ -15,6 +15,7 @@
  "leaflet": "~0.7.7",
  "Leaflet.extra-markers": "~1.0.3",
  "moment": "~2.11.1",
+ "textures": "*",
  "underscore": "~1.8.3"
  },
  "devDependencies": {

less/main.less

@@ -81,6 +81,7 @@
  border-radius: 0;
  box-shadow: none;
 }
+
 /* vis */
 .vis-options {
  a {
@@ -98,6 +99,18 @@
  .color-picker-wrapper {
  width: 120px;
  }
+ .texture {
+ width: 24px;
+ height: 24px;
+ margin-right: 6px;
+ display: inline-block;
+ }
+ .selected {
+ border: 2px solid #000;
+ }
+ .normal {
+ border: 2px solid #fff;
+ }
 }
 
 @import 'd3';

test/karma.conf.js

@@ -31,6 +31,7 @@ module.exports = function(config) {
  'bower_components/angular-color-picker/angularjs-color-picker.js',
  'bower_components/d3/d3.js',
  'bower_components/angular-d3-module/angular-d3-module.js',
+ 'bower_components/angular-global-injector/angular-global-injector.js',
  'bower_components/leaflet/dist/leaflet-src.js',
  'bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js',
  'bower_components/moment/moment.js',
@@ -39,6 +40,7 @@ module.exports = function(config) {
  'bower_components/underscore/underscore.js',
  'bower_components/angular-underscore-module/angular-underscore-module.js',
  'bower_components/Leaflet.extra-markers/src/leaflet.extra-markers.js',
+ 'bower_components/textures/textures.min.js',
  'bower_components/angular-mocks/angular-mocks.js',
  // endbower
  "app/scripts/**/*.js",