Updated with latest changes from Tree v2

Added support for dynamic fields, updated web app, etc.

data/js/app.js

@@ -0,0 +1,462 @@
+// used when hosting the site on the ESP8266
+var address = location.hostname;
+var urlBase = "";
+
+// used when hosting the site somewhere other than the ESP8266 (handy for testing without waiting forever to upload to SPIFFS)
+// var address = "esp8266-1920f7.local";
+// var urlBase = "http://" + address + "/";
+
+var postColorTimer = {};
+var postValueTimer = {};
+
+var ignoreColorChange = false;
+
+var ws = new ReconnectingWebSocket('ws://' + address + ':81/', ['arduino']);
+ws.debug = true;
+
+ws.onmessage = function(evt) {
+  if(evt.data != null)
+  {
+    var data = JSON.parse(evt.data);
+    if(data == null) return;
+    updateFieldValue(data.name, data.value);
+  }
+}
+
+$(document).ready(function() {
+  $("#status").html("Connecting, please wait...");
+
+  $.get(urlBase + "all", function(data) {
+      $("#status").html("Loading, please wait...");
+
+      $.each(data, function(index, field) {
+        if (field.type == "Number") {
+          addNumberField(field);
+        } else if (field.type == "Boolean") {
+          addBooleanField(field);
+        } else if (field.type == "Select") {
+          addSelectField(field);
+        } else if (field.type == "Color") {
+          addColorFieldPalette(field);
+          addColorFieldPicker(field);
+        } else if (field.type == "Section") {
+          addSectionField(field);
+        }
+      });
+
+      $(".minicolors").minicolors({
+        theme: "bootstrap",
+        changeDelay: 200,
+        control: "wheel",
+        format: "rgb",
+        inline: true
+      });
+
+      $("#status").html("Ready");
+    })
+    .fail(function(errorThrown) {
+      console.log("error: " + errorThrown);
+    });
+});
+
+function addNumberField(field) {
+  var template = $("#numberTemplate").clone();
+
+  template.attr("id", "form-group-" + field.name);
+  template.attr("data-field-type", field.type);
+
+  var label = template.find(".control-label");
+  label.attr("for", "input-" + field.name);
+  label.text(field.label);
+
+  var input = template.find(".input");
+  var slider = template.find(".slider");
+  slider.attr("id", "input-" + field.name);
+  if (field.min) {
+    input.attr("min", field.min);
+    slider.attr("min", field.min);
+  }
+  if (field.max) {
+    input.attr("max", field.max);
+    slider.attr("max", field.max);
+  }
+  if (field.step) {
+    input.attr("step", field.step);
+    slider.attr("step", field.step);
+  }
+  input.val(field.value);
+  slider.val(field.value);
+
+  slider.on("change mousemove", function() {
+    input.val($(this).val());
+  });
+
+  slider.on("change", function() {
+    var value = $(this).val();
+    input.val(value);
+    field.value = value;
+    delayPostValue(field.name, value);
+  });
+
+  input.on("change", function() {
+    var value = $(this).val();
+    slider.val(value);
+    field.value = value;
+    delayPostValue(field.name, value);
+  });
+
+  $("#form").append(template);
+}
+
+function addBooleanField(field) {
+  var template = $("#booleanTemplate").clone();
+
+  template.attr("id", "form-group-" + field.name);
+  template.attr("data-field-type", field.type);
+
+  var label = template.find(".control-label");
+  label.attr("for", "btn-group-" + field.name);
+  label.text(field.label);
+
+  var btngroup = template.find(".btn-group");
+  btngroup.attr("id", "btn-group-" + field.name);
+
+  var btnOn = template.find("#btnOn");
+  var btnOff = template.find("#btnOff");
+
+  btnOn.attr("id", "btnOn" + field.name);
+  btnOff.attr("id", "btnOff" + field.name);
+
+  btnOn.attr("class", field.value ? "btn btn-primary" : "btn btn-default");
+  btnOff.attr("class", !field.value ? "btn btn-primary" : "btn btn-default");
+
+  btnOn.click(function() {
+    setBooleanFieldValue(field, btnOn, btnOff, 1)
+  });
+  btnOff.click(function() {
+    setBooleanFieldValue(field, btnOn, btnOff, 0)
+  });
+
+  $("#form").append(template);
+}
+
+function addSelectField(field) {
+  var template = $("#selectTemplate").clone();
+
+  template.attr("id", "form-group-" + field.name);
+  template.attr("data-field-type", field.type);
+
+  var id = "input-" + field.name;
+
+  var label = template.find(".control-label");
+  label.attr("for", id);
+  label.text(field.label);
+
+  var select = template.find(".form-control");
+  select.attr("id", id);
+
+  for (var i = 0; i < field.options.length; i++) {
+    var optionText = field.options[i];
+    var option = $("<option></option>");
+    option.text(optionText);
+    option.attr("value", i);
+    select.append(option);
+  }
+
+  select.val(field.value);
+
+  select.change(function() {
+    var value = template.find("#" + id + " option:selected").index();
+    postValue(field.name, value);
+  });
+
+  var previousButton = template.find(".btn-previous");
+  var nextButton = template.find(".btn-next");
+
+  previousButton.click(function() {
+    var value = template.find("#" + id + " option:selected").index();
+    var count = select.find("option").length;
+    value--;
+    if(value < 0)
+      value = count - 1;
+    select.val(value);
+    postValue(field.name, value);
+  });
+
+  nextButton.click(function() {
+    var value = template.find("#" + id + " option:selected").index();
+    var count = select.find("option").length;
+    value++;
+    if(value >= count)
+      value = 0;
+    select.val(value);
+    postValue(field.name, value);
+  });
+
+  $("#form").append(template);
+}
+
+function addColorFieldPicker(field) {
+  var template = $("#colorTemplate").clone();
+
+  template.attr("id", "form-group-" + field.name);
+  template.attr("data-field-type", field.type);
+
+  var id = "input-" + field.name;
+
+  var input = template.find(".minicolors");
+  input.attr("id", id);
+
+  if(!field.value.startsWith("rgb("))
+    field.value = "rgb(" + field.value;
+
+  if(!field.value.endsWith(")"))
+    field.value += ")";
+
+  input.val(field.value);
+
+  var components = rgbToComponents(field.value);
+
+  var redInput = template.find(".color-red-input");
+  var greenInput = template.find(".color-green-input");
+  var blueInput = template.find(".color-blue-input");
+
+  var redSlider = template.find(".color-red-slider");
+  var greenSlider = template.find(".color-green-slider");
+  var blueSlider = template.find(".color-blue-slider");
+
+  redInput.attr("id", id + "-red");
+  greenInput.attr("id", id + "-green");
+  blueInput.attr("id", id + "-blue");
+
+  redSlider.attr("id", id + "-red-slider");
+  greenSlider.attr("id", id + "-green-slider");
+  blueSlider.attr("id", id + "-blue-slider");
+
+  redInput.val(components.r);
+  greenInput.val(components.g);
+  blueInput.val(components.b);
+
+  redSlider.val(components.r);
+  greenSlider.val(components.g);
+  blueSlider.val(components.b);
+
+  redInput.on("change", function() {
+    var value = $("#" + id).val();
+    var r = $(this).val();
+    var components = rgbToComponents(value);
+    field.value = r + "," + components.g + "," + components.b;
+    $("#" + id).minicolors("value", "rgb(" + field.value + ")");
+    redSlider.val(r);
+  });
+
+  greenInput.on("change", function() {
+    var value = $("#" + id).val();
+    var g = $(this).val();
+    var components = rgbToComponents(value);
+    field.value = components.r + "," + g + "," + components.b;
+    $("#" + id).minicolors("value", "rgb(" + field.value + ")");
+    greenSlider.val(g);
+  });
+
+  blueInput.on("change", function() {
+    var value = $("#" + id).val();
+    var b = $(this).val();
+    var components = rgbToComponents(value);
+    field.value = components.r + "," + components.g + "," + b;
+    $("#" + id).minicolors("value", "rgb(" + field.value + ")");
+    blueSlider.val(b);
+  });
+
+  redSlider.on("change", function() {
+    var value = $("#" + id).val();
+    var r = $(this).val();
+    var components = rgbToComponents(value);
+    field.value = r + "," + components.g + "," + components.b;
+    $("#" + id).minicolors("value", "rgb(" + field.value + ")");
+    redInput.val(r);
+  });
+
+  greenSlider.on("change", function() {
+    var value = $("#" + id).val();
+    var g = $(this).val();
+    var components = rgbToComponents(value);
+    field.value = components.r + "," + g + "," + components.b;
+    $("#" + id).minicolors("value", "rgb(" + field.value + ")");
+    greenInput.val(g);
+  });
+
+  blueSlider.on("change", function() {
+    var value = $("#" + id).val();
+    var b = $(this).val();
+    var components = rgbToComponents(value);
+    field.value = components.r + "," + components.g + "," + b;
+    $("#" + id).minicolors("value", "rgb(" + field.value + ")");
+    blueInput.val(b);
+  });
+
+  redSlider.on("change mousemove", function() {
+    redInput.val($(this).val());
+  });
+
+  greenSlider.on("change mousemove", function() {
+    greenInput.val($(this).val());
+  });
+
+  blueSlider.on("change mousemove", function() {
+    blueInput.val($(this).val());
+  });
+
+  input.on("change", function() {
+    if (ignoreColorChange) return;
+
+    var value = $(this).val();
+    var components = rgbToComponents(value);
+
+    redInput.val(components.r);
+    greenInput.val(components.g);
+    blueInput.val(components.b);
+
+    redSlider.val(components.r);
+    greenSlider.val(components.g);
+    blueSlider.val(components.b);
+
+    field.value = components.r + "," + components.g + "," + components.b;
+    delayPostColor(field.name, components);
+  });
+
+  $("#form").append(template);
+}
+
+function addColorFieldPalette(field) {
+  var template = $("#colorPaletteTemplate").clone();
+
+  var buttons = template.find(".btn-color");
+
+  var label = template.find(".control-label");
+  label.text(field.label);
+
+  buttons.each(function(index, button) {
+    $(button).click(function() {
+      var rgb = $(this).css('backgroundColor');
+      var components = rgbToComponents(rgb);
+
+      field.value = components.r + "," + components.g + "," + components.b;
+      postColor(field.name, components);
+
+      ignoreColorChange = true;
+      var id = "#input-" + field.name;
+      $(id).minicolors("value", "rgb(" + field.value + ")");
+      $(id + "-red").val(components.r);
+      $(id + "-green").val(components.g);
+      $(id + "-blue").val(components.b);
+      $(id + "-red-slider").val(components.r);
+      $(id + "-green-slider").val(components.g);
+      $(id + "-blue-slider").val(components.b);
+      ignoreColorChange = false;
+    });
+  });
+
+  $("#form").append(template);
+}
+
+function addSectionField(field) {
+  var template = $("#sectionTemplate").clone();
+
+  template.attr("id", "form-group-section-" + field.name);
+  template.attr("data-field-type", field.type);
+
+  $("#form").append(template);
+}
+
+function updateFieldValue(name, value) {
+  var group = $("#form-group-" + name);
+
+  var type = group.attr("data-field-type");
+
+  if (type == "Number") {
+    var input = group.find(".form-control");
+    input.val(value);
+  } else if (type == "Boolean") {
+    var btnOn = group.find("#btnOn" + name);
+    var btnOff = group.find("#btnOff" + name);
+
+    btnOn.attr("class", value ? "btn btn-primary" : "btn btn-default");
+    btnOff.attr("class", !value ? "btn btn-primary" : "btn btn-default");
+
+  } else if (type == "Select") {
+    var select = group.find(".form-control");
+    select.val(value);
+  } else if (type == "Color") {
+    var input = group.find(".form-control");
+    input.val("rgb(" + value + ")");
+  }
+};
+
+function setBooleanFieldValue(field, btnOn, btnOff, value) {
+  field.value = value;
+
+  btnOn.attr("class", field.value ? "btn btn-primary" : "btn btn-default");
+  btnOff.attr("class", !field.value ? "btn btn-primary" : "btn btn-default");
+
+  postValue(field.name, field.value);
+}
+
+function postValue(name, value) {
+  $("#status").html("Setting " + name + ": " + value + ", please wait...");
+
+  var body = { name: name, value: value };
+
+  $.post(urlBase + name + "?value=" + value, body, function(data) {
+    if (data.name != null) {
+      $("#status").html("Set " + name + ": " + data.name);
+    } else {
+      $("#status").html("Set " + name + ": " + data);
+    }
+  });
+}
+
+function delayPostValue(name, value) {
+  clearTimeout(postValueTimer);
+  postValueTimer = setTimeout(function() {
+    postValue(name, value);
+  }, 300);
+}
+
+function postColor(name, value) {
+  $("#status").html("Setting " + name + ": " + value.r + "," + value.g + "," + value.b + ", please wait...");
+
+  var body = { name: name, r: value.r, g: value.g, b: value.b };
+
+  $.post(urlBase + name + "?r=" + value.r + "&g=" + value.g + "&b=" + value.b, body, function(data) {
+    $("#status").html("Set " + name + ": " + data);
+  })
+  .fail(function(textStatus, errorThrown) { $("#status").html("Fail: " + textStatus + " " + errorThrown); });
+}
+
+function delayPostColor(name, value) {
+  clearTimeout(postColorTimer);
+  postColorTimer = setTimeout(function() {
+    postColor(name, value);
+  }, 300);
+}
+
+function componentToHex(c) {
+  var hex = c.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+
+function rgbToHex(r, g, b) {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+function rgbToComponents(rgb) {
+  var components = {};
+
+  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  components.r = parseInt(rgb[1]);
+  components.g = parseInt(rgb[2]);
+  components.b = parseInt(rgb[3]);
+
+  return components;
+}

data/js/r-websocket.min.js

@@ -0,0 +1 @@
+!function(a,b){"function"==typeof define&&define.amd?define([],b):"undefined"!=typeof module&&module.exports?module.exports=b():a.ReconnectingWebSocket=b()}(this,function(){function a(b,c,d){function l(a,b){var c=document.createEvent("CustomEvent");return c.initCustomEvent(a,!1,!1,b),c}var e={debug:!1,automaticOpen:!0,reconnectInterval:1e3,maxReconnectInterval:3e4,reconnectDecay:1.5,timeoutInterval:2e3};d||(d={});for(var f in e)this[f]="undefined"!=typeof d[f]?d[f]:e[f];this.url=b,this.reconnectAttempts=0,this.readyState=WebSocket.CONNECTING,this.protocol=null;var h,g=this,i=!1,j=!1,k=document.createElement("div");k.addEventListener("open",function(a){g.onopen(a)}),k.addEventListener("close",function(a){g.onclose(a)}),k.addEventListener("connecting",function(a){g.onconnecting(a)}),k.addEventListener("message",function(a){g.onmessage(a)}),k.addEventListener("error",function(a){g.onerror(a)}),this.addEventListener=k.addEventListener.bind(k),this.removeEventListener=k.removeEventListener.bind(k),this.dispatchEvent=k.dispatchEvent.bind(k),this.open=function(b){h=new WebSocket(g.url,c||[]),b||k.dispatchEvent(l("connecting")),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","attempt-connect",g.url);var d=h,e=setTimeout(function(){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","connection-timeout",g.url),j=!0,d.close(),j=!1},g.timeoutInterval);h.onopen=function(){clearTimeout(e),(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onopen",g.url),g.protocol=h.protocol,g.readyState=WebSocket.OPEN,g.reconnectAttempts=0;var d=l("open");d.isReconnect=b,b=!1,k.dispatchEvent(d)},h.onclose=function(c){if(clearTimeout(e),h=null,i)g.readyState=WebSocket.CLOSED,k.dispatchEvent(l("close"));else{g.readyState=WebSocket.CONNECTING;var d=l("connecting");d.code=c.code,d.reason=c.reason,d.wasClean=c.wasClean,k.dispatchEvent(d),b||j||((g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onclose",g.url),k.dispatchEvent(l("close")));var e=g.reconnectInterval*Math.pow(g.reconnectDecay,g.reconnectAttempts);setTimeout(function(){g.reconnectAttempts++,g.open(!0)},e>g.maxReconnectInterval?g.maxReconnectInterval:e)}},h.onmessage=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onmessage",g.url,b.data);var c=l("message");c.data=b.data,k.dispatchEvent(c)},h.onerror=function(b){(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","onerror",g.url,b),k.dispatchEvent(l("error"))}},1==this.automaticOpen&&this.open(!1),this.send=function(b){if(h)return(g.debug||a.debugAll)&&console.debug("ReconnectingWebSocket","send",g.url,b),h.send(b);throw"INVALID_STATE_ERR : Pausing to reconnect websocket"},this.close=function(a,b){"undefined"==typeof a&&(a=1e3),i=!0,h&&h.close(a,b)},this.refresh=function(){h&&h.close()}}return a.prototype.onopen=function(){},a.prototype.onclose=function(){},a.prototype.onconnecting=function(){},a.prototype.onmessage=function(){},a.prototype.onerror=function(){},a.debugAll=!1,a.CONNECTING=WebSocket.CONNECTING,a.OPEN=WebSocket.OPEN,a.CLOSING=WebSocket.CLOSING,a.CLOSED=WebSocket.CLOSED,a});

data/js/simple.js

@@ -0,0 +1,239 @@
+// used when hosting the site on the ESP8266
+var address = location.hostname;
+var urlBase = "";
+
+// used when hosting the site somewhere other than the ESP8266 (handy for testing without waiting forever to upload to SPIFFS)
+// var address = "192.168.1.13";
+// var urlBase = "http://" + address + "/";
+
+var postColorTimer = {};
+var postValueTimer = {};
+
+var ignoreColorChange = false;
+
+var patterns = [
+  "Pride",
+  "Color Waves",
+
+  "Rainbow Twinkles",
+  "Snow Twinkles",
+  "Cloud Twinkles",
+  "Incandescent Twinkles",
+
+  "Retro C9 Twinkles",
+  "Red & White Twinkles",
+  "Blue & White Twinkles",
+  "Red, Green & White Twinkles",
+  "Fairy Light Twinkles",
+  "Snow 2 Twinkles",
+  "Holly Twinkles",
+  "Ice Twinkles",
+  "Party Twinkles",
+  "Forest Twinkles",
+  "Lava Twinkles",
+  "Fire Twinkles",
+  "Cloud 2 Twinkles",
+  "Ocean Twinkles",
+
+  "Rainbow",
+  "Rainbow With Glitter",
+  "Solid Rainbow",
+  "Confetti",
+  "Sinelon",
+  "Beat",
+  "Juggle",
+  "Fire",
+  "Water"
+];
+
+var ws = new ReconnectingWebSocket('ws://' + address + ':81/', ['arduino']);
+ws.debug = true;
+
+ws.onmessage = function(evt) {
+  if(evt.data != null)
+  {
+    var data = JSON.parse(evt.data);
+    if(data == null) return;
+    switch(data.name) {
+      case "power":
+        if(data.value == 1) {
+          $("#btnOn").attr("class", "btn btn-primary");
+          $("#btnOff").attr("class", "btn btn-default");
+        } else {
+          $("#btnOff").attr("class", "btn btn-primary");
+          $("#btnOn").attr("class", "btn btn-default");
+        }
+        break;
+
+      case "pattern":
+        $(".grid-item-pattern").attr("class", "grid-item-pattern btn btn-default");
+        $("#pattern-button-" + data.value).attr("class", "grid-item-pattern btn btn-primary");
+        break;
+    }
+  }
+}
+
+$(document).ready(function() {
+  $("#status").html("Connecting, please wait...");
+
+  $.get(urlBase + "all", function(data) {
+    $("#status").html("Loading, please wait...");
+
+    $.each(data, function(index, field) {
+      switch (field.name) {
+        case "power":
+          if(field.value == 1) {
+            $("#btnOn").attr("class", "btn btn-primary");
+          } else {
+            $("#btnOff").attr("class", "btn btn-primary");
+          }
+          break;
+
+        case "pattern":
+          addPatternButtons(field);
+          break;
+      }
+    });
+  });
+
+  addColorButtons();
+
+  $("#btnOn").click(function() {
+    postValue("power", 1);
+    $("#btnOn").attr("class", "btn btn-primary");
+    $("#btnOff").attr("class", "btn btn-default");
+  });
+
+  $("#btnOff").click(function() {
+    postValue("power", 0);
+    $("#btnOff").attr("class", "btn btn-primary");
+    $("#btnOn").attr("class", "btn btn-default");
+  });
+
+  $("#status").html("Ready");
+});
+
+function addColorButtons() {
+  var hues = 25;
+  var hueStep = 360 / hues;
+
+  var levels = 10;
+  var levelStep = 60 / levels;
+
+  for(var l = 20; l < 80; l += levelStep) {
+    for(var h = 0; h < hues; h++) {
+      addColorButton(h * hueStep, 100, l);
+    }
+  }
+
+  $('.grid-color').isotope({
+    itemSelector: '.grid-item-color',
+    layoutMode: 'fitRows'
+  });
+
+}
+
+var colorButtonIndex = 0;
+
+function addColorButton(h, s, l) {
+  var color = "hsla(" + h + ", " + s + "%, " + l + "%, 1)"
+  var template = $("#colorButtonTemplate").clone();
+  template.attr("id", "color-button-" + colorButtonIndex++);
+  template.css("background-color", color);
+  template.click(function() {
+    var rgb = $(this).css('backgroundColor');
+    var components = rgbToComponents(rgb);
+
+    $(".grid-item-color").css("border", "none");
+    $(this).css("border", "1px solid");
+
+    postColor("solidColor", components);
+  });
+
+  $("#colorButtonsRow").append(template);
+}
+
+function addPatternButtons(patternField) {
+  $.each(patternField.options, function(index, pattern) {
+    if($.inArray(pattern, patterns) == -1)
+      return;
+
+    var template = $("#patternButtonTemplate").clone();
+    template.attr("id", "pattern-button-" + index);
+    template.text(pattern);
+    template.click(function() {
+      postValue("patternName", pattern);
+      $(".grid-item-color").css("border", "none");
+      $(".grid-item-pattern").attr("class", "grid-item-pattern btn btn-default");
+      $(this).attr("class", "grid-item-pattern btn btn-primary");
+    });
+
+    $("#patternGrid").append(template);
+  });
+
+  $('.grid-pattern').isotope({
+    itemSelector: '.grid-item-pattern',
+    layoutMode: 'fitRows'
+  });
+
+  $("#pattern-button-" + patternField.value).attr("class", "grid-item-pattern btn btn-primary");
+}
+
+function postValue(name, value) {
+  $("#status").html("Setting " + name + ": " + value + ", please wait...");
+
+  var body = { name: name, value: value };
+
+  $.post(urlBase + name, body, function(data) {
+    if (data.name != null) {
+      $("#status").html("Set " + name + ": " + data.name);
+    } else {
+      $("#status").html("Set " + name + ": " + data);
+    }
+  });
+}
+
+function delayPostValue(name, value) {
+  clearTimeout(postValueTimer);
+  postValueTimer = setTimeout(function() {
+    postValue(name, value);
+  }, 300);
+}
+
+function postColor(name, value) {
+  $("#status").html("Setting " + name + ": " + value.r + "," + value.g + "," + value.b + ", please wait...");
+
+  var body = { name: name, r: value.r, g: value.g, b: value.b };
+
+  $.post(urlBase + name + "?r=" + value.r + "&g=" + value.g + "&b=" + value.b, body, function(data) {
+    $("#status").html("Set " + name + ": " + data);
+  })
+  .fail(function(textStatus, errorThrown) { $("#status").html("Fail: " + textStatus + " " + errorThrown); });
+}
+
+function delayPostColor(name, value) {
+  clearTimeout(postColorTimer);
+  postColorTimer = setTimeout(function() {
+    postColor(name, value);
+  }, 300);
+}
+
+function componentToHex(c) {
+  var hex = c.toString(16);
+  return hex.length == 1 ? "0" + hex : hex;
+}
+
+function rgbToHex(r, g, b) {
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+
+function rgbToComponents(rgb) {
+  var components = {};
+
+  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  components.r = parseInt(rgb[1]);
+  components.g = parseInt(rgb[2]);
+  components.b = parseInt(rgb[3]);
+
+  return components;
+}