Merge a9b4a281afee90552d0c641f3d3b633c148a701e into c1b14f115474d1469d474aecfd6584601d42e754

.gitignore

 media/
 *.log
 .jobs
+settings/backgrounds/

.python-version

+2.7.13

Dockerfile

 FROM ubuntu:16.04
 
 # Install dependencies
-RUN apt-get update --yes && apt-get upgrade --yes
-RUN apt-get install git nodejs npm \
-libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev libpng-dev build-essential g++ \
-ffmpeg \
-redis-server --yes
+RUN apt-get --yes update && \
+    apt-get --yes upgrade
+RUN apt-get --yes install git \
+                          nodejs \
+                          npm \
+                          libcairo2-dev \
+                          libjpeg8-dev \
+                          libpango1.0-dev \
+                          libgif-dev \
+                          libpng-dev \
+                          build-essential \
+                          g++ \
+                          ffmpeg \
+                          redis-server
 
-RUN ln -s `which nodejs` /usr/bin/node
+RUN update-alternatives --install /usr/bin/node node $(which nodejs) 50
 
 # Non-privileged user
-RUN useradd -m audiogram
+ARG UID=1000
+RUN useradd --create-home \
+            --no-log-init \
+            --shell /bin/false \
+            --uid $UID \
+            audiogram
 USER audiogram
 WORKDIR /home/audiogram
 
 # Clone repo
-RUN git clone https://github.com/nypublicradio/audiogram.git
+RUN : breakcache0
+RUN git clone https://github.com/brizandrew/audiogram.git
 WORKDIR /home/audiogram/audiogram
+#VOLUME /home/audiogram/audiogram
 
 # Install dependencies
 RUN npm install
+CMD npm start

INSTALL.md

 
 If you use [Docker](https://www.docker.com/products/docker), you can build an image from the included Dockerfile.
 
-In addition to installing Docker, you'll need to install Git.  You can do this by installing [GitHub Desktop](https://desktop.github.com/).
+In addition to installing Docker, you may need to install Git.  You can do this by installing [GitHub Desktop](https://desktop.github.com/).
 
-You can clone the repo and build an image, or build it directly from the repo:
-
-```sh
-git clone https://github.com/nypublicradio/audiogram.git
-cd audiogram
-docker build -t audiogram .
-```
+Some operating systems e.g. Ubuntu provide a permission group "docker. You can join this group like `sudo usermod -aG docker $USER` and then it's not necessary to prepend every docker command with `sudo`. It's necessary to log out of the desktop session for this permission group change to take effect.
 
-or
+You can clone the repo and build an image, or build it directly from the repo:
 
+An ephemeral container image can be built and run like
 ```sh
-docker build -t audiogram https://github.com/nypublicradio/audiogram.git
+docker build -t audiogram https://github.com/brizandrew/audiogram.git
+docker run -p 8888:8888 audiogram
 ```
 
-Now you can run Audiogram in a container using that image:
+or you can clone the source code to obtain the service file for docker compose and run these commands once in order to always have the container running in the background and available at http://localhost:8888.
 
 ```sh
-docker run -p 8888:8888 -t -i audiogram
+git clone https://github.com/brizandrew/audiogram.git
+cd audiogram
+docker build -t audiogram .
+docker-compose up
 ```
 
 ## AWS installation

audiogram/combine-frames.js

 
   // Raw ffmpeg command with standard mp4 setup
   // Some old versions of ffmpeg require -strict for the aac codec
-  var cmd = "ffmpeg -r " + options.framesPerSecond + " -i \"" + options.framePath + "\" -i \"" + options.audioPath + "\" -c:v libx264 -c:a aac -strict experimental -shortest -pix_fmt yuv420p \"" + options.videoPath + "\"";
+  var cmd = "ffmpeg -r " + options.framesPerSecond + " -i \"" + options.framePath + "\" -i \"" + options.audioPath + "\" -c:v libx264 -c:a aac -strict experimental -shortest -pix_fmt yuv420p -vf 'scale=trunc(iw/2)*2:trunc(ih/2)*2' \"" + options.videoPath + "\"";
 
   exec(cmd, cb);
 

client/index.js

     $ = require("jquery"),
     preview = require("./preview.js"),
     video = require("./video.js"),
-    audio = require("./audio.js");
+    audio = require("./audio.js"),
+    themeEditor = require("./themeEditor.js");
 
 d3.json("/settings/themes.json", function(err, themes){
 
     return;
   }
 
+  if(themeEditor.isEditor())
+    themeEditor.initializeThemes(themes);
+
   for (var key in themes) {
     themes[key] = $.extend({}, themes.default, themes[key]);
   }
 
   // Populate dropdown menu
   d3.select("#input-theme")
-    .on("change", updateTheme)
+    .on("change.a", updateTheme)
+    .on("change.b", function(){
+      if(themeEditor.isActive())
+        themeEditor.populateThemeFields();
+    })
     .selectAll("option")
     .data(themesWithImages)
     .enter()
 
   d3.select("#submit").on("click", submitted);
 
+  d3.select("#theme-edit").on("click", function(){
+    var activeTheme = d3.select('#input-theme').property('value');
+    var url = window.location.origin + window.location.pathname + 'themes.html?t=' + activeTheme;
+    window.location = url;
+  });
+
+  d3.select("#new-theme").on("click", function(){
+    var url = window.location.origin + window.location.pathname + 'themes.html?t=default'
+    window.location = url;
+  });
+
+  if(themeEditor.isEditor())
+    themeEditor.initialize();
+
 }
 
 function updateAudioFile() {

client/preview.js

 // Resize video and preview canvas to maintain aspect ratio
 function resize(width, height) {
 
-  var widthFactor = 640 / width,
-      heightFactor = 360 / height,
+  var containerWidth = document.querySelector('#preview').clientWidth,
+      aspectRatio = height/width;
+  containerWidth = containerWidth > 0 ? containerWidth : 640;
+
+  var widthFactor = containerWidth / width,
+      heightFactor = containerWidth * aspectRatio / height,
       factor = Math.min(widthFactor, heightFactor);
 
   d3.select("canvas")
 }
 
 function redraw() {
-
   resize(theme.width, theme.height);
 
   video.kill();
   theme: _theme,
   file: _file,
   selection: _selection,
-  loadAudio: loadAudio
+  loadAudio: loadAudio,
+  redraw: redraw
 };

client/themeEditor.js

+var d3 = require('d3'),
+  $ = require('jquery'),
+  preview = require('./preview.js'),
+  options = require('./themeOptions.js');
+
+var editorIsActive = false;
+var themesJson = {};
+
+function updateTheme(options) {
+  if(options !== undefined){
+    if(options.backgroundImage !== '')
+      getImage(options);
+    preview.theme(options);
+  }
+  else{
+    preview.theme(d3.select(this.options[this.selectedIndex]).datum());
+  }
+}
+
+function getImage(theme) {
+  if (theme.backgroundImage) {
+    theme.backgroundImageFile = new Image();
+
+    theme.backgroundImageFile.onload = function(){
+      updateTheme(anonymousTheme());
+    };
+
+    theme.backgroundImageFile.src = '/settings/backgrounds/' + theme.backgroundImage;
+  }
+}
+
+function error(msg) {
+  if (msg.responseText) {
+    msg = msg.responseText;
+  }
+  if (typeof msg !== 'string') {
+    msg = JSON.stringify(msg);
+  }
+  if (!msg) {
+    msg = 'Unknown error';
+  }
+  d3.select('#loading-message').text('Loading...');
+  setClass('error', msg);
+}
+
+function setClass(cl, msg) {
+  d3.select('body').attr('class', cl || null);
+  d3.select('#error').text(msg || '');
+}
+
+function anonymousTheme(){
+  var output = {};
+  d3.selectAll('.options-attribute-input').each(function(d){
+    if(d.type == 'number'){
+      if(Number.isNaN(parseFloat(this.value)))
+        output[d.name] = null;
+      else
+        output[d.name] = parseFloat(this.value);
+    }
+    else{
+      output[d.name] = this.value;
+    }
+  });
+
+  return output;
+}
+
+function postTheme(type, data, cb){
+  var postData = {
+    type: type,
+    data: data
+  };
+
+  $.ajax({
+    url: '/api/themes',
+    type: 'POST',
+    data: JSON.stringify(postData),
+    contentType: 'application/json',
+    cache: false,
+    success: cb,
+    error: error
+  });
+}
+
+function saveChanges(){
+  var activeTheme = preview.theme();
+  var activeThemeName = d3.select('#input-theme').property('value');
+
+  function makeTheme(){
+    var file = {};
+
+    file.name = activeTheme.name;
+    file.currentName = activeThemeName;
+
+    d3.selectAll('.options-attribute-input').each(function(d){
+      if(!this.disabled){
+        if(this.getAttribute('type') == 'number')
+          file[d.name] = parseFloat(this.value);
+        else
+          file[d.name] = this.value;
+      }
+    });
+
+    return file;
+  }
+
+  function reloadPage(){
+    var url = window.location.origin + window.location.pathname + '?t=' + activeTheme.name;
+    window.location = url;
+  }
+
+  var themeNames = [];
+  d3.selectAll('#input-theme option').each(function(d){
+    themeNames.push(d.name);
+  });
+  themeNames.splice(themeNames.length-1, 1);
+
+  var postData = makeTheme();
+
+  if(activeTheme.name == 'default' || activeTheme.name == '0' || activeTheme.name == ''){
+    window.alert('Please give your theme a name.');
+  }
+  else if(themeNames.indexOf(activeTheme.name) != -1 && activeThemeName == 'default'){
+    window.alert('That theme name already exists. Please choose a different name or select it to edit it.');
+  }
+  else if(themeNames.indexOf(activeThemeName) != -1){
+    var msg = 'Are you sure you want to override the options for "';
+    msg += activeThemeName + '"? This action is permanent and cannot be undone.';
+    if(window.confirm(msg)){
+      postTheme('UPDATE', postData, reloadPage);
+    }
+  }
+  else{
+    postTheme('ADD', postData, reloadPage);
+  }
+}
+
+function deleteTheme(){
+  var activeThemeName = d3.select('#input-theme').property('value');
+
+  var msg = 'Are you sure you want to delete the theme "';
+  msg += activeThemeName + '"? This action is permanent and cannot be undone.';
+
+  if(window.confirm(msg)){
+    var postData = {name: activeThemeName};
+    postTheme('DELETE', postData, function(){
+      var url = window.location.origin + window.location.pathname;
+      window.location = url;
+    });
+  }
+}
+
+function refreshTheme(){
+  var theme = $.extend({name: preview.theme().name}, themesJson.default, themesJson[preview.theme().name]);
+  updateTheme(theme);
+  populateThemeFields();
+}
+
+function loadBkgndImages(cb){
+  $.ajax({
+    url: '/api/images',
+    type: 'GET',
+    cache: false,
+    success: function(data){
+      $('#attribute-backgroundImage').html('');
+
+      var bkgndImgSelect = d3.select('#attribute-backgroundImage');
+      for(var img of data){
+        bkgndImgSelect.append('option')
+          .attr('value', img)
+          .text(img);
+      }
+
+      if(cb !== undefined){
+        cb();
+      }
+
+    },
+    error: error
+  });
+}
+
+function uploadImage(){
+  // this = the file input calling the function
+  var img = this.files[0];
+
+  var confirmed = confirm('Are you sure you want to upload ' + img.name + '?');
+  if(confirmed){
+    var formData = new FormData();
+    formData.append('img', img);
+
+    setClass('loading');
+
+    $.ajax({
+      url: '/api/images',
+      type: 'POST',
+      data: formData,
+      contentType: false,
+      cache: false,
+      processData: false,
+      success: function(){
+        var setImg = function(){
+          var input = d3.select('#container-backgroundImage').select('.options-attribute-input');
+          input.property('value', img.name).attr('data-value', img.name);
+
+          updateTheme(anonymousTheme());
+
+          setClass(null);
+        };
+
+        loadBkgndImages(setImg);
+      },
+      error: error
+    });
+  }
+}
+
+function camelToTitle(string){
+  var conversion = string.replace( /([A-Z])/g, ' $1' );
+  var title = conversion.charAt(0).toUpperCase() + conversion.slice(1);
+  return title;
+}
+
+function queryParser(query){
+    query = query.substring(1);
+    let query_string = {};
+    const vars = query.split('&');
+    for (var i=0;i<vars.length;i++) {
+        var pair = vars[i].split('=');
+        if (typeof query_string[pair[0]] === 'undefined') {
+            query_string[pair[0]] = decodeURIComponent(pair[1]);
+        } else if (typeof query_string[pair[0]] === 'string') {
+            const arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
+            query_string[pair[0]] = arr;
+        } else {
+            query_string[pair[0]].push(decodeURIComponent(pair[1]));
+        }
+    }
+
+    if (Object.keys(query_string).includes(''))
+        return {};
+    else
+        return query_string;
+};
+
+
+function isEditor(){
+  return document.querySelector('#themeEditor') !== null;
+}
+
+function isActive(){
+  return editorIsActive;
+}
+
+function initializeThemes(themes){
+  for (var key in themes) {
+    themesJson[key] = $.extend({}, themes[key]);
+    if('foregroundColor' in themesJson[key]){
+      themesJson[key].captionColor = themesJson[key].foregroundColor;
+      themesJson[key].waveColor = themesJson[key].foregroundColor;
+    }
+  }
+}
+
+function initializePreview(){
+  var container = $('#preview');
+  var top = $(container).offset().top;
+  $(window).scroll(function() {
+    var y = $(this).scrollTop();
+    if (y >= top){
+      $(container).addClass('sticky');
+    }
+    else{
+      $(container).removeClass('sticky');
+    }
+  });
+
+  preview.redraw();
+}
+
+function toggleSection(d){
+  var name;
+
+  if(typeof(d) == 'object')
+    name = d.name;
+  else
+    name = d;
+
+  $('#section-options-'+ name).slideToggle(500);
+  $('#section-toggle-' + name).toggleClass('toggled');
+}
+
+function initialize(){
+  var container = d3.select('#options');
+
+  // Add Option Sections
+  var sections = container.selectAll('.section').data(options)
+    .enter()
+    .append('div')
+    .attr('class', 'section');
+
+  var headers = sections.append('div')
+    .attr('class', 'section-header')
+    .on('click', toggleSection);
+
+  // Add Section Toggles
+  headers.append('svg')
+    .attr('id', function(d){return 'section-toggle-' + d.name;})
+    .attr('class', 'section-toggle')
+    .attr('viewBox', '0 0 24 24')
+    .append('path')
+    .attr('d', function(){
+      var path = 'M12,13.7c-0.5,0-0.9-0.2-1.2-0.5L0.5,2.9c-0.7-0.7-0.7-1.8,0-2.4C0.8,0.2,1.3,0,1.7,0h20.6C23.3,0,' +
+          '24,0.8,24,1.7c0,0.4-0.2,0.9-0.5,1.2L13.2,13.2C12.9,13.6,12.5,13.7,12,13.7z';
+      return path;
+    });
+
+  // Add Section Titles
+  headers.append('h4')
+    .attr('class', 'section-title')
+    .text(function(d){return d.name;});
+
+  var attributesContainer = sections.append('div')
+    .attr('class', 'section-options')
+    .attr('id', function(d){return 'section-options-' + d.name;})
+    .style('display', 'none');
+
+  // Add Option Container
+  var attributes = attributesContainer.selectAll('.options-attribute')
+    .data(function(d){return d.options;})
+    .enter()
+    .append('div')
+    .attr('class','options-attribute')
+    .attr('id', function(d){return 'container-' + d.name;})
+    .attr('data-type', function(d){return d.type;});
+
+  // Add Enable Checkboxes
+  attributes.append('input')
+    .attr('id', function(d){return 'enable-' + d.name;})
+    .attr('class', 'options-checkbox options-attribute-child')
+    .attr('name', function(d){return 'enable-' + d.name;})
+    .attr('value', 'true')
+    .attr('type', 'checkbox')
+    .property('checked', true)
+    .on('click', function(d){
+      var input = d3.select('#attribute-' + d.name);
+      if(this.checked){
+        input.property('disabled', false);
+        input.property('value', input.attr('data-value'));
+        input.attr('value', input.attr('data-value'));
+        updateTheme(anonymousTheme());
+      }
+      else{
+        input.property('value', themesJson.default[d.name]);
+        input.attr('value', themesJson.default[d.name]);
+        input.property('disabled', true);
+        updateTheme(anonymousTheme());
+      }
+    });
+
+  // Add Option Labels
+  attributes.append('label')
+    .attr('for', function(d){return 'attribute-' + d.name;})
+    .attr('class', 'options-attribute-child')
+    .text(function(d){return camelToTitle(d.name);});
+
+  // Add Help Text Icons
+  attributes.append('i')
+    .attr('id', function(d){return 'help-' + d.name;})
+    .attr('class', 'attribute-help options-attribute-child fa fa-question')
+    .attr('title', function(d){return d.help;});
+
+  // Add Inputs For Text Fields
+  sections.selectAll('.options-attribute:not([data-type="select"])')
+    .append('input')
+    .attr('id', function(d){return 'attribute-' + d.name;})
+    .attr('class', 'options-attribute-input options-attribute-child input-text')
+    .attr('name', function(d){return d.name;})
+    .attr('type', function(d){return d.type;})
+    .on('input', function(){
+      this.setAttribute('data-value', this.value);
+      updateTheme(anonymousTheme());
+    });
+
+  // Add Inputs For Select Fields
+  sections.selectAll('.options-attribute[data-type="select"]')
+    .append('select')
+    .attr('id', function(d){return 'attribute-' + d.name;})
+    .attr('class', 'options-attribute-input options-attribute-child input-select')
+    .attr('name', function(d){return d.name;})
+    .attr('type', function(d){return d.type;})
+    .on('input', function(){updateTheme(anonymousTheme());})
+    .selectAll('options')
+    .data(function(d){return d.options;})
+    .enter()
+    .append('option')
+    .attr('value', function(d){return d;})
+    .text(function(d){return camelToTitle(d);});
+
+  // Add Section Notes
+  attributesContainer.append('p')
+    .attr('class', 'options-note note')
+    .text(function(d){return d.note;});
+
+  // Add "New..." option to theme select
+  d3.select('#input-theme')
+    .append('option')
+    .data([themesJson.default])
+    .attr('value', 'default')
+    .text('New...');
+
+  // Add clickHandler for Save Button
+  d3.select('#saveChanges')
+    .on('click', saveChanges);
+
+  // Add clickHandler for Delete Button
+  d3.select('#deleteTheme')
+    .on('click', deleteTheme);
+
+  // Add clickHandler for Refresh Button
+  d3.select('#refreshTheme')
+    .on('click', refreshTheme);
+
+  // Background Images Populate and Add Uploader
+  loadBkgndImages(populateThemeFields);
+  var bkgndImgContainer = d3.select('#container-backgroundImage');
+  bkgndImgContainer.append('label')
+    .attr('for', 'imgUploader')
+    .attr('id', 'imgUploader-label')
+    .attr('class', 'button')
+    .append('i')
+    .attr('class', 'fa fa-upload');
+  bkgndImgContainer.append('input')
+    .attr('type', 'file')
+    .attr('id', 'imgUploader')
+    .attr('name', 'imgUploader')
+    .on('change', uploadImage);
+
+  toggleSection('Metadata');
+
+  // Active url theme
+  var selectedTheme = queryParser(window.location.search);
+  if('t' in selectedTheme && selectedTheme.t in themesJson){
+    d3.select('#input-theme')
+      .property('value', selectedTheme.t)
+      .dispatch('change');
+  }
+
+  populateThemeFields();
+
+  initializePreview();
+  window.addEventListener('resize', function(){
+    preview.redraw();
+  });
+
+  d3.select('#toggle-more-instructions').on('click', function(){
+    $('#more-instructions').slideToggle(500);
+  })
+
+
+  // Toggle the editor container to loaded
+  editorIsActive = true;
+}
+
+function populateThemeFields(){
+  var activeTheme = preview.theme();
+  var themeJson = activeTheme.name !== undefined && activeTheme.name in themesJson ?
+    themesJson[activeTheme.name] :
+    themesJson.default;
+
+  d3.selectAll('.options-attribute').each(function(d){
+    var input = d3.select(this).select('.options-attribute-input');
+
+    var activeValue = d.name in activeTheme ? activeTheme[d.name] : '';
+    input.property('value', activeValue).attr('data-value', activeValue);
+
+    if(d.name == 'name'){
+      d3.select('#enable-'+d.name).property('checked', true);
+      input.property('disabled', false);
+    }
+    else if(activeTheme.name == undefined || !(d.name in themeJson)){
+      d3.select('#enable-'+d.name).property('checked', false);
+      input.property('disabled', true);
+    }
+    else{
+      d3.select('#enable-'+d.name).property('checked', true);
+      input.property('disabled', false);
+    }
+
+  });
+}
+
+window.themesJson = themesJson;
+
+module.exports = {
+  isEditor,
+  isActive,
+  initialize,
+  initializeThemes,
+  populateThemeFields
+};

client/themeOptions.js

+module.exports = [
+  {
+    'name': 'Metadata',
+    'options': [
+      {
+        'name': 'name',
+        'type': 'text',
+        'help': 'The name of the theme.'
+      }
+    ]
+  },
+  {
+    'name': 'Movie',
+    'options': [
+      {
+        'name': 'width',
+        'type': 'number',
+        'help': 'Desired video width in pixels.'
+      },
+      {
+        'name': 'height',
+        'type': 'number',
+        'help': 'Desired video height in pixels.'
+      },
+      {
+        'name': 'framesPerSecond',
+        'type': 'number',
+        'help': 'Desired video framerate.'
+      },
+      {
+        'name': 'samplesPerFrame',
+        'type': 'number',
+        'help': 'How many data points to use for the waveform. More points = a more detailed wave. (e.g. 128)'
+      },
+      {
+        'name': 'maxDuration',
+        'type': 'number',
+        'help': 'Maximum duration of an audiogram, in seconds (e.g. set this to 30 to enforce a 30-second time limit).'
+      }
+    ]
+  },
+  {
+    'name': 'Background',
+    'note': 'You can set both a Background Color and a Background Image, in which case the image will be drawn on top of the color.',
+    'options': [
+      {
+        'name': 'backgroundImage',
+        'type': 'select',
+        'help': 'What image to put in the background of every frame, it should be a file in settings/backgrounds/',
+        'options': []
+      },
+      {
+        'name': 'backgroundColor',
+        'type': 'color',
+        'help': 'A CSS color to fill the background of every frame (e.g. pink or #ff00ff).'
+      }
+    ]
+  },
+  {
+    'name': 'Caption',
+    'note': 'If both Caption Top and Caption Bottom are set, the caption will be roughly vertically centered between them, give or take a few pixels depending on the font.',
+    'options': [
+      {
+        'name': 'captionColor',
+        'type': 'color',
+        'help': 'A CSS color, what color the text should be (e.g. red or #ffcc00).'
+      },
+      {
+        'name': 'captionAlign',
+        'type': 'select',
+        'help': 'Text alignment of the caption.',
+        'options': [
+          'left',
+          'right',
+          'center'
+        ]
+      },
+      {
+        'name': 'captionFont',
+        'type': 'text',
+        'help': 'A full CSS font definition to use for the caption. ([weight] size \'family\').'
+      },
+      {
+        'name': 'captionLineHeight',
+        'type': 'number',
+        'help': 'How tall each caption line is in pixels. You\'ll want to adjust this for whatever font and font size you\'re using.'
+      },
+      {
+        'name': 'captionLineSpacing',
+        'type': 'number',
+        'help': 'How many extra pixels to put between caption lines. You\'ll want to adjust this for whatever font and font size you\'re using.'
+      },
+      {
+        'name': 'captionLeft',
+        'type': 'number',
+        'help': 'How many pixels from the left edge to place the caption'
+      },
+      {
+        'name': 'captionRight',
+        'type': 'number',
+        'help': 'How many pixels from the right edge to place the caption'
+      },
+      {
+        'name': 'captionBottom',
+        'type': 'number',
+        'help': 'How many pixels from the bottom edge to place the caption.'
+      },
+      {
+        'name': 'captionTop',
+        'type': 'number',
+        'help': 'How many pixels from the top edge to place the caption.'
+      }
+    ]
+  },
+  {
+    'name': 'Wave',
+    'options': [
+      {
+        'name': 'pattern',
+        'type': 'select',
+        'help': 'What waveform shape to draw.',
+        'options': [
+          'wave',
+          'bars',
+          'line',
+          'curve',
+          'roundBars',
+          'pixel',
+          'bricks',
+          'equalizer'
+        ]
+      },
+      {
+        'name': 'waveTop',
+        'type': 'number',
+        'help': 'How many pixels from the top edge to start the waveform.'
+      },
+      {
+        'name': 'waveBottom',
+        'type': 'number',
+        'help': 'How many pixels from the top edge to end the waveform.'
+      },
+      {
+        'name': 'waveLeft',
+        'type': 'number',
+        'help': 'How many pixels from the left edge to start the waveform.'
+      },
+      {
+        'name': 'waveRight',
+        'type': 'number',
+        'help': 'How many pixels from the right edge to start the waveform.'
+      },
+      {
+        'name': 'waveColor',
+        'type': 'color',
+        'help': 'A CSS color, what color the wave should be.'
+      }
+    ]
+  }
+];

docker-compose.yml

+version: '2'
+services:
+  audiogram:
+    image: audiogram
+    ports:
+        - 8888:8888
+    restart: always

editor/css/editor.css

 div.container {
   width: 640px;
   margin-bottom: 2rem;
+  padding: 0 20px;
 }
 
 h1 {
   color: #c00;
 }
 
+code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: rgba(27,31,35,0.05);
+  border-radius: 3px;
+}
+
 /* Buttons/controls */
 button,
 .button {
     -webkit-transform: scaleY(1.0);
   }
 }
+
+#theme-edit i.fa,
+#new-theme i.fa{
+  margin: 0;
+}
+
+#themeEditor{
+  width: 100%;
+  max-width: 900px;
+}
+
+#themeEditor #row-instructions p{
+  line-height: 1.3;
+  margin: 0 auto;
+  padding: 10.5px 0;
+}
+
+#themeEditor #row-instructions p:first-of-type{
+  padding-top: 0;
+}
+
+#themeEditor #row-instructions i.fa{
+  margin: 0 2px;
+}
+
+#themeEditor #row-instructions #toggle-more-instructions{
+  cursor: pointer;
+}
+
+#themeEditor #row-instructions #toggle-more-instructions:hover{
+  text-decoration: underline;
+}
+
+#themeEditor #row-instructions #more-instructions{
+  display: none;
+}
+
+#themeEditor #editor-tools{
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+}
+
+#themeEditor #editor-tools #options-container,
+#themeEditor #editor-tools #preview-container{
+  width: 50%;
+}
+
+#themeEditor #preview.sticky{
+  top: 6px;
+  position: fixed;
+}
+
+#themeEditor #editor-tools #options-container{
+  padding-right: 20px;
+}
+
+#themeEditor .section{
+  padding: 13px 0;
+  border-top: 1px solid #e0e0e0;
+}
+
+#themeEditor .section:first-child{
+  padding-top: 0;
+  border-top: none;
+}
+
+#themeEditor .section-header{
+  cursor: pointer;
+}
+
+#themeEditor .section-toggle{
+  float: right;
+  width: 15px;
+  height: 15px;
+  margin: 2px 0 0 1px;
+  background-color: transparent;
+  border: 0;
+  padding-top: 3px;
+}
+
+#themeEditor .section-toggle.toggled{
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg);
+}
+
+#themeEditor .section-options{
+  overflow: hidden;
+}
+
+#themeEditor .options-attribute{
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-bottom: 15px;
+}
+
+#themeEditor .options-attribute:first-of-type{
+  margin-top: 10px;
+}
+
+#themeEditor .options-attribute:last-of-type{
+  margin-bottom: 10px;
+}
+
+#themeEditor .section:last-of-type .options-attribute:last-of-type{
+  margin-bottom: 0;
+}
+
+#themeEditor .options-attribute-child{
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  margin: 0 10px;
+}
+
+#themeEditor .options-attribute-child:first-child{
+  -webkit-box-flex: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  margin: 0 10px 0 0;
+}
+
+#themeEditor .options-attribute-child:last-child{
+  margin: 0 0 0 10px;
+}
+
+#themeEditor .options-attribute label{
+  text-align: right;
+  margin-right: 0;
+  min-width: 130px;
+}
+
+#themeEditor .options-attribute .attribute-help{
+  margin-left: 0px;
+  border: 0px;
+  border-radius: 50px;
+  background-color: white;
+  padding: 3px 0px 7px 1px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  font-size: 10px;
+  cursor: help;
+}
+
+#themeEditor .options-attribute .options-attribute-input{
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  width: 20%;
+  padding: 6px;
+  color: #666;
+  font-size: 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 0 0 0;
+          box-shadow: 0 0 0 0;
+}
+
+#themeEditor .options-attribute .options-attribute-input[type="color"]{
+  padding: 0px;
+  border: 0px;
+  margin: 10px 6px;
+}
+
+#themeEditor .options-attribute .options-attribute-input[disabled=""]{
+  cursor: not-allowed;
+}
+
+#themeEditor .options-note{
+  margin-top: -7px;
+}
+
+#themeEditor .options-note:empty{
+  display: none;
+}
+
+#themeEditor #imgUploader-label{
+  min-width: 0;
+}
+
+#themeEditor #imgUploader-label.button:hover{
+  color: #333;
+  background-color: #e6e6e6;
+  border-color: #adadad;
+}
+
+#themeEditor #imgUploader-label.button:active{
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+          box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
+}
+
+#themeEditor #imgUploader-label i{
+  margin-right: 0;
+}
+
+#themeEditor #imgUploader{
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+#themeEditor #themeButtons button:first-child{
+  margin-left: 0;
+}
+
+#themeEditor #themeButtons i.fa{
+  margin: 0;
+}
+
+@media (max-width: 760px) {
+  #themeEditor #editor-tools{
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+
+  #themeEditor #editor-tools #options-container,
+  #themeEditor #editor-tools #preview-container{
+    width: 100%;
+  }
+
+  #themeEditor #preview.sticky{
+    top: 0;
+    position: initial;
+  }
+}

editor/index.html

         <div class="row form-row" id="row-theme">
           <label for="input-theme">Theme</label>
           <select id="input-theme" name="theme"></select>
+          <button id="theme-edit" title="Edit Theme"><i class="fa fa-pencil-square-o"></i></button>
+          <button id="new-theme" title="New Theme"><i class="fa fa-plus"></i></button>
         </div>
         <div class="row form-row" id="row-caption">
           <label for="input-caption">

editor/themes.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Theme Editor</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
+    <link href="/css/base.css" rel="stylesheet" type="text/css">
+    <link href="/css/editor.css" rel="stylesheet" type="text/css">
+    <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
+  </head>
+  <body class="loading">
+    <div id="themeEditor" class="container" data-active="false">
+      <p id="back-to-audiogram"><a href="../"><i class="fa fa-arrow-left"></i>Back to Audiogram</a></p>
+      <h1>Theme Editor</h1>
+      <div id="loading">
+        <div id="loading-bars">
+          <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div>
+        </div>
+        <div id="loading-message">Loading...</div>
+      </div><!-- #loading -->
+      <div id="loaded">
+        <div id="error"></div>
+        <div class="row form-row" id="row-audio" style="display:none;">
+          <label for="input-audio">Audio</label>
+          <input id="input-audio" name="audio" type="file" />
+        </div>
+        <div class="row" id="row-instructions">
+          <p>Welcome to the Theme Editor. From here you can edit existing themes or make new ones. Start by selecting a
+            theme to edit from the dropdown menu or choosing <code>New…</code> to make a new one. If you need more help, click this
+            <i id="toggle-more-instructions" class="fa fa-question"></i> or hover over the many others throughout the
+            page for more detailed help.</p>
+            <div id="more-instructions">
+              <p>Themes work by overriding the default styles your site administrator has set up. To override an option,
+                toggle it on with its checkbox. If an option isn’t toggled on, you won’t be able to adjust it. If you’re not
+                 sure what an option does, hover over the <i class="fa fa-question"></i> icon to get a description of it.</p>
+              <p>When you’re finished, you can click the <i class="fa fa-floppy-o"></i> button to save the changes to ONLY
+                the theme you’re currently editing. Switching themes will revert all the changes you’ve made in this
+                session. Themes can also be renamed by choosing them from the dropdown menu, changing the name option, and
+                saving the theme. Finally, if you’re absolutely sure, you can delete a theme by clicking the
+                <i class="fa fa-trash-o"></i> button. This action is irreversible and the theme will be gone forever.</p>
+              <p>Your theme preview changes live as you toggle options on and off and change their values. Experiment with
+                different values to create new and interesting themes. If you want to start over, you can click the
+                <i class="fa fa-refresh"></i> button to reset your theme.</p>
+            </div>
+        </div>
+        <div class="row form-row" id="row-theme">
+          <label for="input-theme">Theme</label>
+          <select id="input-theme" name="theme"></select>
+        </div>
+        <div class="row form-row" id="row-caption">
+          <label for="input-caption">
+            <div class="note">Preview a caption here.</div>
+          </label>
+          <input id="input-caption" name="caption" type="text" autocomplete="off" placeholder="Add a caption"
+            value="Lorem ipsum dolor sit amet, consectetur."/>
+        </div>
+
+        <div id="editor-tools">
+          <div id="options-container">
+            <div id="options"></div>
+            <div id="themeButtons">
+              <button id="saveChanges" title="Save Changes"><i class="fa fa-floppy-o"></i></button>
+              <button id="deleteTheme" title="Delete Theme"><i class="fa fa-trash-o"></i></button>
+              <button id="refreshTheme" title="Reset Theme"><i class="fa fa-refresh"></i></button>
+            </div>
+          </div>
+          <div id="preview-container">
+            <div id="preview">
+              <div style="background-color: black;">
+                <div id="canvas">
+                  <canvas width="640" height="360"></canvas>
+                  <div id="preview-label">Preview</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="audio">
+          <audio controls>
+            <source />
+          </audio>
+        </div>
+        <div id="video">
+          <video width="640" height="360" controls>
+            <source type="video/mp4" />
+          </video>
+        </div>
+      </div><!-- #loaded -->
+    </div><!-- .container -->
+    <script src="/js/bundle.js"></script>
+    <!-- Force load custom fonts -->
+    <script src="/fonts/fonts.js"></script>
+  </body>
+</html>

server/imageAPI.js

+var fs = require('fs'),
+  path = require('path'),
+  multer = require('multer');
+
+var Storage = multer.diskStorage({
+  destination: function(req, file, callback) {
+    callback(null, './settings/backgrounds');
+  },
+  filename: function(req, file, callback) {
+    callback(null, file.originalname);
+  }
+});
+
+var upload = multer({
+  storage: Storage,
+  fileFilter: function(req, file, cb) {
+
+    var filetypes = /jpeg|jpg|png|gif|tiff|webp/;
+    var mimetype = filetypes.test(file.mimetype);
+    var extname = filetypes.test(path.extname(file.originalname).toLowerCase());
+
+    if (mimetype && extname) {
+      return cb(null, true);
+    }
+    cb('Error: File upload only supports the following image filetypes: ' + filetypes + '.');
+  }
+}).array('img', 1);
+
+var post = function(req, res){
+  upload(req, res, function(err) {
+    if(err)
+      return res.status(500).send(err);
+    else
+        return res.status(200).send('');
+  });
+};
+
+var get = function(req, res){
+  fs.readdir(path.join(__dirname, '..', 'settings', 'backgrounds'), function(err, files){
+    if(err)
+      res.status(500).send('An error occured reading the background directory.');
+    else{
+      res.setHeader('Content-Type', 'application/json');
+      res.status(200).send(JSON.stringify(files));
+    }
+  });
+};
+
+module.exports = {
+  post: post,
+  get: get
+};

server/index.js

     path = require("path"),
     multer = require("multer"),
     uuid = require("uuid"),
-    mkdirp = require("mkdirp");
+    mkdirp = require("mkdirp"),
+    bodyParser = require('body-parser');
 
 // Routes and middleware
 var logger = require("../lib/logger/"),
     render = require("./render.js"),
     status = require("./status.js"),
     fonts = require("./fonts.js"),
+    themesAPI = require("./themesAPI.js"),
+    imageAPI = require("./imageAPI.js"),
     errorHandlers = require("./error.js");
 
 // Settings
 
 }, express.static(path.join(__dirname, "..", "settings")));
 
+// Ovewrite themes file
+app.post("/api/themes", bodyParser.json(), themesAPI);
+
+// Get & Upload Images
+app.get("/api/images", imageAPI.get);
+app.post("/api/images", bodyParser.json(), imageAPI.post);
+
 // Serve editor files statically
 app.use(express.static(path.join(__dirname, "..", "editor")));
 

server/themesAPI.js

+var fs = require('fs'),
+  path = require('path');
+
+var themesPath = path.join(__dirname, '..','settings','themes.json');
+
+function getThemes(cb){
+  fs.readFile(themesPath, 'utf8', function (err, data) {
+    if (err){
+      if(err.code == 'ENOENT'){
+        cb('');
+      }
+    }
+    else{
+      cb(data);
+    }
+  });
+}
+
+function writeThemeFile(data, res){
+  var file = JSON.stringify(data, null, '\t');
+  fs.writeFile(themesPath, file, function(err){
+    if(err)
+      res.status(500).send('There was a problem saving "themes.json".');
+    else
+      res.status(200).send('');
+  });
+}
+
+function addTheme(body, res){
+
+  function save(data){
+    var themeFile = JSON.parse(data);
+
+    // add the new addition to the JSON and remove the name and themeName attributes
+    themeFile[body.name] = body;
+    delete themeFile[body.name].currentName;
+    delete themeFile[body.name].name;
+
+    writeThemeFile(themeFile, res);
+  }
+
+  getThemes(save);
+}
+
+function updateTheme(body, res){
+
+  function save(data){
+    var themeFile = JSON.parse(data);
+
+    // remove the old theme options
+    delete themeFile[body.currentName];
+
+    // add the new addition to the JSON and remove the name and themeName attributes
+    themeFile[body.name] = body;
+    delete themeFile[body.name].currentName;
+    delete themeFile[body.name].name;
+
+    writeThemeFile(themeFile, res);
+  }
+
+  getThemes(save);
+}
+
+function deleteTheme(body, res){
+
+  function save(data){
+    var themeFile = JSON.parse(data);
+
+    // remove the deleted theme options
+    delete themeFile[body.name];
+
+    writeThemeFile(themeFile, res);
+  }
+
+  getThemes(save);
+}
+
+module.exports = function(req, res){
+  switch (req.body.type) {
+    case 'ADD':
+      addTheme(req.body.data, res);
+      break;
+    case 'UPDATE':
+      updateTheme(req.body.data, res);
+      break;
+    case 'DELETE':
+      deleteTheme(req.body.data, res);
+  }
+};

settings/themes.json

 {
-  "default": {
-    "width": 1280,
-    "height": 720,
-    "framesPerSecond": 20,
-    "maxDuration": 300,
-    "samplesPerFrame": 128,
-    "pattern": "wave",
-    "waveTop": 150,
-    "waveBottom": 420,
-    "captionTop": 470,
-    "captionFont": "300 52px 'Source Sans Pro'",
-    "captionLineHeight": 52,
-    "captionLineSpacing": 7,
-    "captionLeft": 200,
-    "captionRight": 1080
-  },
-  "Basic": {
-    "backgroundColor": "#eee",
-    "foregroundColor": "#de1e3d"
-  },
-  "Neon": {
-    "backgroundColor": "#556270",
-    "foregroundColor": "#c7f464"
-  },
-  "Three colors": {
-    "backgroundColor": "#eee",
-    "captionColor": "#515151",
-    "waveColor": "#00b4ff"
-  },
-  "Background image with top right text": {
-    "captionAlign": "right",
-    "captionTop": 60,
-    "captionRight": 1220,
-    "captionLeft": 640,
-    "backgroundImage": "subway.jpg",
-    "foregroundColor": "#fc0",
-    "waveBottom": 660,
-    "waveTop": 320
-  },
-  "Bars": {
-    "pattern": "bars",
-    "foregroundColor": "#d84a4a"
-  },
-  "Rounded bars with bottom left text": {
-    "pattern": "roundBars",
-    "foregroundColor": "#d84a4a",
-    "captionAlign": "left",
-    "captionLeft": 60,
-    "captionRight": 640,
-    "captionBottom": 660,
-    "captionTop": null
-  },
-  "Line": {
-    "backgroundColor": "#edc951",
-    "foregroundColor": "#00a0b0",
-    "pattern": "line"
-  },
-  "Curve": {
-    "backgroundColor": "#00a0b0",
-    "foregroundColor": "#edc951",
-    "pattern": "curve"
-  },
-  "Bricks": {
-    "backgroundColor": "#8771aa",
-    "foregroundColor": "#fff",
-    "pattern": "bricks"
-  },
-  "Equalizer on the bottom": {
-    "backgroundColor": "#222",
-    "foregroundColor": "#fff",
-    "pattern": "equalizer",
-    "captionTop": 40,
-    "captionBottom": 380,
-    "waveTop": 420,
-    "waveBottom": 720
-  },
-  "Bold italic orange": {
-    "captionAlign": "right",
-    "captionTop": null,
-    "captionBottom": 660,
-    "captionRight": 1220,
-    "captionLeft": 640,
-    "backgroundColor": "#fd5a1e",
-    "waveColor": "#fff",
-    "captionFont": "bold italic 52px 'Source Sans Pro'"
-  },
-  "Pixelated": {
-    "backgroundColor": "#ecd078",
-    "foregroundColor": "#c02942",
-    "pattern": "pixel"
-  },
-  "Square with background image": {
-    "width": 640,
-    "height": 640,
-    "samplesPerFrame": 64,
-    "waveTop": 20,
-    "waveBottom": 300,
-    "captionTop": 340,
-    "captionLeft": 20,
-    "captionRight": 620,
-    "foregroundColor": "#0eb8ba",
-    "backgroundImage": "nyc.png"
-  }
-}
+	"default": {
+		"width": 1280,
+		"height": 720,
+		"framesPerSecond": 20,
+		"maxDuration": 300,
+		"samplesPerFrame": 128,
+		"backgroundColor": "#ffffff",
+		"backgroundImage": "",
+		"captionColor": "#000000",
+		"captionAlign": "left",
+		"captionFont": "300 52px 'Source Sans Pro'",
+		"captionLineHeight": 52,
+		"captionLineSpacing": 7,
+		"captionLeft": 60,
+		"captionRight": 640,
+		"captionTop": null,
+		"captionBottom": 660,
+		"pattern": "wave",
+		"waveTop": 0,
+		"waveBottom": 720,
+		"waveLeft": 0,
+		"waveRight": 1280,
+		"waveColor": "#000000"
+	},
+	"Basic": {
+		"backgroundColor": "#eee",
+		"captionColor": "#de1e3d",
+		"waveColor": "#de1e3d"
+	},
+	"Neon": {
+		"backgroundColor": "#556270",
+		"captionColor": "#c7f464",
+		"waveColor": "#c7f464"
+	},
+	"Background image with top right text": {
+		"captionAlign": "right",
+		"captionTop": 60,
+		"captionRight": 1220,
+		"captionLeft": 640,
+		"backgroundImage": "subway.jpg",
+		"captionColor": "#fc0fc0",
+		"waveColor": "#fc0fc0",
+		"waveBottom": 660,
+		"waveTop": 320
+	},
+	"Bars": {
+		"pattern": "bars",
+		"captionColor": "#d84a4a",
+		"waveColor": "#d84a4a"
+	},
+	"Rounded bars with bottom left text": {
+		"pattern": "roundBars",
+		"captionColor": "#d84a4a",
+		"waveColor": "#d84a4a",
+		"captionAlign": "left",
+		"captionLeft": 60,
+		"captionRight": 640,
+		"captionBottom": 660,
+		"captionTop": null
+	},
+	"Line": {
+		"backgroundColor": "#edc951",
+		"captionColor": "#00a0b0",
+		"waveColor": "#00a0b0",
+		"pattern": "line"
+	},
+	"Curve": {
+		"backgroundColor": "#00a0b0",
+		"captionColor": "#edc951",
+		"waveColor": "#edc951",
+		"pattern": "curve"
+	},
+	"Bricks": {
+		"backgroundColor": "#8771aa",
+		"captionColor": "#ffffff",
+		"waveColor": "#ffffff",
+		"pattern": "bricks"
+	},
+	"Equalizer on the bottom": {
+		"backgroundColor": "#222",
+		"captionColor": "#ffffff",
+		"waveColor": "#ffffff",
+		"pattern": "equalizer",
+		"captionTop": 40,
+		"captionBottom": 380,
+		"waveTop": 420,
+		"waveBottom": 720
+	},
+	"Bold italic orange": {
+		"captionAlign": "right",
+		"captionTop": null,
+		"captionBottom": 660,
+		"captionRight": 1220,
+		"captionLeft": 640,
+		"backgroundColor": "#fd5a1e",
+		"waveColor": "#fff",
+		"captionFont": "bold italic 52px 'Source Sans Pro'"
+	},
+	"Pixelated": {
+		"backgroundColor": "#ecd078",
+		"captionColor": "#c02942",
+		"waveColor": "#c02942",
+		"pattern": "pixel"
+	},
+	"Square with background image": {
+		"width": 640,
+		"height": 640,
+		"samplesPerFrame": 64,
+		"waveTop": 20,
+		"waveBottom": 300,
+		"captionTop": 340,
+		"captionLeft": 20,
+		"captionRight": 620,
+		"captionColor": "#0eb8ba",
+		"waveColor": "#0eb8ba",
+		"backgroundImage": "nyc.png"
+	},
+	"Three colors": {
+		"backgroundColor": "#eeeeee",
+		"captionColor": "#515151",
+		"waveTop": 100,
+		"waveBottom": 500,
+		"waveColor": "#53fe64"
+	}
+}