first

2020-09-09 06:50:29 +02:00
commit 7ec31edf21
18 changed files with 3521 additions and 0 deletions
@@ -0,0 +1 @@
+body { padding-bottom: 70px; }
@@ -0,0 +1,232 @@
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>ESP32 FastLED Web Server by Evil Genius Labs</title>
+
+  <!-- request CSS from internet CDN -->
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css" integrity="sha256-4wnSkPYU5B4yngAlx/rEb8LdfMah4teUth4AfhGEuaY=" crossorigin="anonymous" />
+
+  <!-- request CSS from the ESP32 web server -->
+  <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
+  <!-- <link rel="stylesheet" href="css/jquery.minicolors.min.css"> -->
+
+  <!-- <link rel="stylesheet" href="/css/styles.css" /> -->
+
+  <link rel="icon" href="images/atom196.png" />
+</head>
+
+<body style="padding-bottom: 70px;">
+
+  <nav class="navbar navbar-default navbar-static-top" id="top" role="banner">
+    <div class="container">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank"><img src="https://evilgeniuslabs.org/images/atom.svg" style="width: 24px; height: 24px;" /></a>
+        <a class="navbar-brand" href="https://www.evilgeniuslabs.org" target="_blank">Evil Genius Labs</a>
+      </div>
+      <div class="collapse navbar-collapse" id="navbar-collapse-1">
+        <ul class="nav navbar-nav">
+          <li class="active"><a href="/">ESP32 FastLED Web Server <span class="sr-only">(current)</span></a></li>
+          <!-- <li><a href="/simple.htm" target="_blank" title="Simple Mode">Simple</a></li>
+          <li><a href="/edit.htm" target="_blank" title="Edit Files">Files</a></li>
+          <li><a href="/update" target="_blank" title="Update Firmware">Firmware</a></li> -->
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+          <li>
+            <a href="https://github.com/jasoncoon/esp32-fastled-webserver">
+              <img style="height: 16px;" src="https://assets-cdn.github.com/favicon.ico" />
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <div id="container" class="container">
+
+    <form class="form-horizontal" id="form">
+    </form>
+
+  </div>
+
+  <div id="templates" style="display: none">
+
+    <div id="sectionTemplate" class="form-group">
+      <div class="col-sm-12">
+        <hr style="margin-bottom: 5px;margin-top: 5px;" />
+      </div>
+    </div>
+
+    <div id="numberTemplate" class="form-group">
+      <label class="col-sm-2 control-label"></label>
+      <div class="col-sm-2">
+        <input class="form-control input" type="number" step="1" min="0" max="255" />
+      </div>
+      <div class="col-sm-8">
+        <input class="form-control slider" type="range" step="1" min="0" max="255" />
+      </div>
+    </div>
+
+    <div id="booleanTemplate" class="form-group">
+      <label class="col-sm-2 control-label"></label>
+      <div class="col-sm-10">
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-default" id="btnOn">On</button>
+          <button type="button" class="btn btn-default" id="btnOff">Off</button>
+        </div>
+      </div>
+    </div>
+
+    <div id="selectTemplate" class="form-group">
+      <label class="col-sm-2 control-label"></label>
+      <div class="col-sm-8">
+        <select class="form-control"></select>
+      </div>
+      <div class="col-sm-2">
+        <div class="btn-group" role="group" aria-label="...">
+          <button type="button" class="btn btn-default btn-previous"
+                  aria-label="Previous" title="Previous">
+            <span class="glyphicon glyphicon-chevron-left"></span>
+          </button>
+          <button type="button" class="btn btn-default btn-next"
+                  aria-label="Next" title="Next">
+            <span class="glyphicon glyphicon-chevron-right"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div id="colorPaletteTemplate" class="form-group">
+      <label class="col-sm-2 control-label color-label"></label>
+      <div class="col-sm-10">
+        <div class="btn-group btn-group-justified" role="group">
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #FF0000;" title="Red">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #FF8000;" title="Orange">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #FFFF00;" title="Yellow">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #80FF00;" title="Chartreuse">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #00FF00;" title="Green">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #00FF80;" title="Spring Green">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #00FFFF;" title="Cyan">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #0080FF;" title="Azure">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #0000FF;" title="Blue">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #8000FF;" title="Violet">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #FF00FF;" title="Magenta">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #FF0080;" title="Rose">&#160;</button>
+          </div>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-default btn-color" style="background: #FFFFFF;" title="White">&#160;</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="colorTemplate">
+      <div class="form-group">
+        <!-- <label class="col-sm-2 control-label color-label"></label> -->
+        <div class="col-sm-12 col-sm-offset-2">
+          <input type="text" class="form-control minicolors" />
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="col-sm-2 control-label">Red</label>
+        <div class="col-sm-2">
+          <input class="form-control color-red-input" type="number" step="1" min="0" max="255" />
+        </div>
+        <div class="col-sm-8">
+          <input class="form-control color-red-slider" type="range" step="1" min="0" max="255" />
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="col-sm-2 control-label">Green</label>
+        <div class="col-sm-2">
+          <input class="form-control color-green-input" type="number" step="1" min="0" max="255" />
+        </div>
+        <div class="col-sm-8">
+          <input class="form-control color-green-slider" type="range" step="1" min="0" max="255" />
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="col-sm-2 control-label">Blue</label>
+        <div class="col-sm-2">
+          <input class="form-control color-blue-input" type="number" step="1" min="0" max="255" />
+        </div>
+        <div class="col-sm-8">
+          <input class="form-control color-blue-slider" type="range" step="1" min="0" max="255" />
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <nav class="navbar navbar-default navbar-fixed-bottom">
+    <div class="container">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2" aria-expanded="false">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+      </div>
+      <div class="collapse navbar-collapse" id="navbar-collapse-2">
+        <ul class="nav navbar-nav">
+          <li>
+            <a href="/" aria-label="Refresh" title="Refresh">
+              <span class="glyphicon glyphicon-refresh" id="btnRefresh"></span>
+            </a>
+          </li>
+          <li><p class="navbar-text" id="status">Loading, please wait...</p></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <!-- request js from internet CDN -->
+  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js" integrity="sha256-XAFQ9dZ6hy8p/GRhU8h/8pMvM1etymiJLZW1CiHV3bQ=" crossorigin="anonymous"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha256-A4JwlcDvqO4JXpvEtvWY1RH8JAEMu5W21wP8GUXLUNs=" crossorigin="anonymous"></script> -->
+
+  <!-- request js from the ESP32 web server -->
+  <!-- <script src="js/jquery-3.1.1.min.js"></script> -->
+  <!-- <script src="js/bootstrap.min.js"></script> -->
+  <!-- <script src="js/jquery.minicolors.min.js"></script> -->
+  <!-- <script src="js/r-websocket.min.js"></script> -->
+
+  <script src="js/app.js"></script>
+
+</body>
+
+</html>
@@ -0,0 +1,467 @@
+// 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.86.55";
+// 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 + "fieldValue?name=" + 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 + "fieldValue?name=" + name + "&value=" + "&r=" + value.r + "&g=" + value.g + "&b=" + value.b, body, function(data) {
+    $("#status").html("Set " + name + ": " + data);
+  })
+  .fail(
+    function(jqXHR, textStatus, errorThrown) {
+      console.error(textStatus);
+      console.error(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;
+}