Basic functionality for drawing and updating the label.

client/index.js

@@ -151,13 +151,13 @@ function error(msg) {
 }
 
 // Once images are downloaded, set up listeners
-function initialize(err, results) {
+function initialize(err, themesWithImages) {
 
   // Populate themes menu
   d3.select("#input-theme")
     .on("change", updateTheme)
     .selectAll("option")
-    .data(results) // themes with images
+    .data(themesWithImages)
     .enter()
     .append("option")
       .text(function(d){
@@ -239,12 +239,12 @@ function updateCaption() {
   preview.caption(this.value);
 }
 
-function updateTheme() {
-  preview.theme(d3.select(this.options[this.selectedIndex]).datum());
+function updateLabel() {
+  preview.label(this.value);
 }
 
-function updateLabel() {
-  // updating logic
+function updateTheme() {
+  preview.theme(d3.select(this.options[this.selectedIndex]).datum());
 }
 
 function preloadImages(themes) {

client/preview.js

@@ -10,6 +10,7 @@ var context = d3.select("canvas").node().getContext("2d");
 
 var theme,
     caption,
+    label,
     file,
     selection;
 
@@ -25,6 +26,10 @@ function _caption(_) {
   return arguments.length ? (caption = _, redraw()) : caption;
 }
 
+function _label(_) {
+  return arguments.length ? (label = _, redraw()) : theme;
+}
+
 function _selection(_) {
   return arguments.length ? (selection = _) : selection;
 }
@@ -80,6 +85,7 @@ function redraw() {
 
   renderer.drawFrame(context, {
     caption: caption,
+    label: label,
     waveform: sampleWave,
     frame: 0
   });
@@ -108,6 +114,7 @@ function loadAudio(f, cb) {
 
 module.exports = {
   caption: _caption,
+  label: _label,
   theme: _theme,
   file: _file,
   selection: _selection,

renderer/index.js

@@ -55,7 +55,12 @@ module.exports = function(t) {
 
     // Write the caption
     if (options.caption) {
-      wrapText(context, options.caption);
+      wrapText(context, options.caption, 'caption');
+    }
+
+    // Write the label
+    if (options.label) {
+      wrapText(context, options.label, 'label');
     }
 
     return this;

renderer/text-wrapper.js

@@ -6,73 +6,145 @@ module.exports = function(theme) {
   var left = ifNumeric(theme.captionLeft, 0),
       right = ifNumeric(theme.captionRight, theme.width),
       bottom = ifNumeric(theme.captionBottom, null),
-      top = ifNumeric(theme.captionTop, null);
+      top = ifNumeric(theme.captionTop, null),
+      labelLeft = ifNumeric(theme.labelLeft, 0),
+      labelRight = ifNumeric(theme.labelRight, theme.width),
+      labelBottom = ifNumeric(theme.labelBottom, null),
+      labelTop = ifNumeric(theme.labelTop, null),
+
+      renderfunctions ;
 
   if (bottom === null && top === null) {
     top = 0;
   }
 
-  var captionWidth = right - left;
+  if (labelBottom === null && labelTop === null) {
+    labelTop = 0;
+  }
+
+  var captionWidth = right - left,
+      labelWidth = labelRight - labelLeft;
 
-  return function(context, caption) {
+  return function(context, caption, type) {
 
     if (!caption) {
       return;
     }
 
-    var lines = [[]],
-        maxWidth = 0,
-        words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
+    if (type === 'caption') {
+      var lines = [[]],
+          maxWidth = 0,
+          words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
 
-    context.font = theme.captionFont;
-    context.textBaseline = "top";
-    context.textAlign = theme.captionAlign || "center";
+      context.font = theme.captionFont;
+      context.textBaseline = "top";
+      context.textAlign = theme.captionAlign || "center";
 
-    // Check whether each word exceeds the width limit
-    // Wrap onto next line as needed
-    words.forEach(function(word,i){
+      // Check whether each word exceeds the width limit
+      // Wrap onto next line as needed
+      words.forEach(function(word,i){
 
-      var width = context.measureText(lines[lines.length - 1].concat([word]).join(" ")).width;
+        var width = context.measureText(lines[lines.length - 1].concat([word]).join(" ")).width;
 
-      if (word[0] === "\n" || (lines[lines.length - 1].length && width > captionWidth)) {
+        if (word[0] === "\n" || (lines[lines.length - 1].length && width > captionWidth)) {
 
-        word = word.trim();
-        lines.push([word]);
-        width = context.measureText(word).width;
+          word = word.trim();
+          lines.push([word]);
+          width = context.measureText(word).width;
 
-      } else {
+        } else {
+
+          lines[lines.length - 1].push(word);
+
+        }
+
+        maxWidth = Math.max(maxWidth,width);
 
-        lines[lines.length - 1].push(word);
+      });
 
+      var totalHeight = lines.length * theme.captionLineHeight + (lines.length - 1) * theme.captionLineSpacing;
+
+      // horizontal alignment
+      var x = theme.captionAlign === "left" ? left : theme.captionAlign === "right" ? right : (left + right) / 2;
+
+      // Vertical alignment
+      var y;
+
+      if (top !== null && bottom !== null) {
+        // Vertical center
+        y = (bottom + top - totalHeight) / 2;
+      } else if (bottom !== null) {
+        // Vertical align bottom
+        y = bottom - totalHeight;
+      } else {
+        // Vertical align top
+        y = top;
       }
 
-      maxWidth = Math.max(maxWidth,width);
+      // draw caption
+      context.fillStyle = theme.captionColor;
+      lines.forEach(function(line, i){
+        context.fillText(line.join(" "), x, y + i * (theme.captionLineHeight + theme.captionLineSpacing));
+      });
+    } // end if caption
 
-    });
 
-    var totalHeight = lines.length * theme.captionLineHeight + (lines.length - 1) * theme.captionLineSpacing;
+    if (type === 'label') {
+      var lines = [[]],
+          maxWidth = 0,
+          words = smartquotes(caption + "").trim().replace(/\s\s+/g, " \n").split(/ /g);
 
-    // horizontal alignment
-    var x = theme.captionAlign === "left" ? left : theme.captionAlign === "right" ? right : (left + right) / 2;
+      context.font = theme.labelFont;
+      context.textBaseline = "top";
+      context.textAlign = theme.labelAlign || "center";
 
-    // Vertical alignment
-    var y;
+      // Check whether each word exceeds the width limit
+      // Wrap onto next line as needed
+      words.forEach(function(word,i){
 
-    if (top !== null && bottom !== null) {
-      // Vertical center
-      y = (bottom + top - totalHeight) / 2;
-    } else if (bottom !== null) {
-      // Vertical align bottom
-      y = bottom - totalHeight;
-    } else {
-      // Vertical align top
-      y = top;
-    }
+        var width = context.measureText(lines[lines.length - 1].concat([word]).join(" ")).width;
+
+        if (word[0] === "\n" || (lines[lines.length - 1].length && width > labelWidth)) {
 
-    context.fillStyle = theme.captionColor;
-    lines.forEach(function(line, i){
-      context.fillText(line.join(" "), x, y + i * (theme.captionLineHeight + theme.captionLineSpacing));
-    });
+          word = word.trim();
+          lines.push([word]);
+          width = context.measureText(word).width;
+
+        } else {
+
+          lines[lines.length - 1].push(word);
+
+        }
+
+        maxWidth = Math.max(maxWidth,width);
+
+      });
+
+      var totalHeight = lines.length * theme.labelLineHeight + (lines.length - 1) * theme.labelLineSpacing;
+
+      // horizontal alignment
+      var x = theme.labelAlign === "left" ? left : theme.labelAlign === "right" ? right : (left + right) / 2;
+
+      // Vertical alignment
+      var y;
+
+      if (top !== null && bottom !== null) {
+        // Vertical center
+        y = (bottom + top - totalHeight) / 2;
+      } else if (bottom !== null) {
+        // Vertical align bottom
+        y = bottom - totalHeight;
+      } else {
+        // Vertical align top
+        y = top;
+      }
+
+      // draw label
+      context.fillStyle = theme.labelColor;
+      lines.forEach(function(line, i){
+        context.fillText(line.join(" "), x, y + i * (theme.labelLineHeight + theme.labelLineSpacing));
+      });
+    }
 
  };
 

settings/labels.json

@@ -1,6 +1,6 @@
 {
   "podcasts" : [
-    "Generic",
+    "None",
     "The Daily",
     "Still Processing",
     "Popcast",

settings/themes.json

@@ -13,7 +13,11 @@
     "captionLineHeight": 52,
     "captionLineSpacing": 7,
     "captionLeft": 200,
-    "captionRight": 1080
+    "captionRight": 1080,
+    "labelTop": 200,
+    "labelLeft": 60,
+    "labelLineHeight": 20,
+    "labelLineSpacing": 4
   },
   "NYT Light": {
     "width": 1000,
@@ -28,7 +32,9 @@
     "captionTop": 70,
     "captionLeft": 50,
     "captionRight": 860,
-    "backgroundImage": "t_logo_light.png"
+    "backgroundImage": "t_logo_light.png",
+    "labelFont": "300 30px 'NYT Franklin Light'",
+    "labelColor": "#000"
   },
   "NYT Dark": {
     "width": 1000,
@@ -44,6 +50,7 @@
     "captionTop": 70,
     "captionLeft": 50,
     "captionRight": 860,
-    "backgroundImage": "t_logo_dark.png"
+    "backgroundImage": "t_logo_dark.png",
+    "labelColor": "#000"
   }
 }