hmetzner
/
esp8266_milight_hub


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031
							<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>MiLight Hub</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.0/css/bootstrap-slider.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.min.css" rel="stylesheet"/>

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->

  <style>
    .header-row { border-bottom: 1px solid #ccc; }
    label { display: block; }
    .radio-option { padding: 0 5px; cursor: pointer; }
    .command-buttons { list-style: none; margin: 0; padding: 0; }
    .command-buttons li { display: inline-block; margin-right: 1em; }
    .form-entry { margin: 0 0 20px 0; }
    .form-entry .form-control { width: 20em; }
    .form-entry label { display: inline-block; }
    label:not(.error) .error-info { display: none; }
    .error-info { color: #f00; font-size: 0.7em; }
    .error-info:before { content: '('; }
    .error-info:after { content: ')'; }
    .header-btn { margin: 20px; }
    .btn-secondary {
      background-color: #fff;
      border: 1px solid #ccc;
    }
    .inline { display: inline-block; }
    .hue-picker {
      height: 2em;
      width: 100%;
      display: block;
    }
    .hue-picker-inner {
      height: 2em;
      width: calc(100% - 3em);
      display: inline-block;
      cursor: pointer;
      background: linear-gradient(to right,
        rgb(255, 0, 0) 0%,
        rgb(255, 255, 0) 16.6667%,
        rgb(0, 255, 0) 33.3333%,
        rgb(0, 255, 255) 50%,
        rgb(0, 0, 255) 66.6667%,
        rgb(255, 0, 255) 83.3333%,
        rgb(255, 0, 0) 100%
      );
    }
    .hue-value-display {
      border: 1px solid #000;
      margin-left: 0.5em;
      width: 2em;
      height: 2em;
      display: inline-block;
    }
    .plus-minus-group {
      overflow: auto;
      width: 100%;
      clear: both;
      display: block;
    }
    .plus-minus-group button:first-of-type {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      float: left;
      display: block;
    }
    .plus-minus-group button:last-of-type {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
      display: block;
    }
    .plus-minus-group .title {
      border-width: 1px 0;
      border-color: #ccc;
      border-style: solid;
      padding: 5px 5px 5px 7px;
      margin: 0;
      height: 34px;
      line-height: 1.49;
      float: left;
      display: block;
    }
    .field-help {
      display: inline-block;
      font-size: 1.25em;
      margin-left: 0.5em;
    }
    .glyphicon.spinning {
      animation: spin 1s infinite linear;
      -webkit-animation: spin2 1s infinite linear;
    }

    @keyframes spin {
      from { transform: scale(1) rotate(0deg); }
      to { transform: scale(1) rotate(360deg); }
    }

    @-webkit-keyframes spin2 {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
    }
  </style>
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.0/bootstrap-slider.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>

  <script lang="text/javascript">
    var FORM_SETTINGS = [
      "admin_username", "admin_password", "ce_pin", "csn_pin", "reset_pin","packet_repeats",
      "http_repeat_factor", "auto_restart_period", "mqtt_server", "mqtt_topic_pattern",
      "mqtt_username", "mqtt_password", "radio_interface_type"
    ];

    var FORM_SETTINGS_HELP = {
      ce_pin : "'CE' for NRF24L01 interface, and 'PKT' for 'PL1167/LT8900' interface",
      packet_repeats : "The number of times to repeat RF packets sent to bulbs",
      http_repeat_factor : "Multiplicative factor on packet_repeats for " +
        "requests initiated by the HTTP API. UDP API typically receives " +
        "duplicate packets, so more repeats should be used for HTTP.",
      auto_restart_period : "Automatically restart the device every number of " +
        "minutes specified. Use 0 for disabled.",
      radio_interface_type : "2.4 GHz radio model. Only change this if you know " +
        "You're not using an NRF24L01!",
      mqtt_server : "Domain or IP address of MQTT broker. Optionally specify a port " +
        "with (example) mymqqtbroker.com:1884.",
      mqtt_topic_pattern : "Pattern for MQTT topics to listen on. Example: " +
        "lights/:device_id/:type/:group. See README for further details."
    }

    var UDP_PROTOCOL_VERSIONS = [ 5, 6 ];
    var DEFAULT_UDP_PROTOCL_VERSION = 5;

    var selectize;

    var toHex = function(v) {
      return "0x" + (v).toString(16).toUpperCase();
    }

    var activeUrl = function() {
      var deviceId = $('#deviceId option:selected').val()
        , groupId = $('#groupId .active input').data('value')
        , mode = getCurrentMode();

      if (deviceId == "") {
        alert("Please enter a device ID.");
        throw "Must enter device ID";
      }

      if (! $('#group-option').data('for').split(',').includes(mode)) {
        groupId = 0;
      }

      return "/gateways/" + deviceId + "/" + mode + "/" + groupId;
    }

    var getCurrentMode = function() {
      return $('input[name="mode"]:checked').data('value');
    };

    var updateGroup = _.throttle(
      function(params) {
        $.ajax(
          activeUrl(),
          {
            method: 'PUT',
            data: JSON.stringify(params),
            contentType: 'application/json'
          }
        );
      },
      1000
    );

    var sendCommand = _.throttle(
      function(params) {
        $.ajax(
          '/system',
          {
            method: 'POST',
            data: JSON.stringify(params),
            contentType: 'application/json'
          }
        );
      },
      1000
    )

    var sniffRequest;
    var sniffing = false;
    var getTraffic = function() {
      var sniffType = $('#sniff-type input:checked').data('value');

      sniffRequest = $.get('/gateway_traffic/' + sniffType, function(data) {
        $('#sniffed-traffic').html(data + $('#sniffed-traffic').html());
        getTraffic();
      });
    };

    var gatewayServerRow = function(deviceId, port, version) {
      var elmt = '<tr>';
      elmt += '<td>';
      elmt += '<input name="deviceIds[]" class="form-control" value="' + deviceId + '"/>';
      elmt += '</td>';
      elmt += '<td>'
      elmt += '<input name="ports[]" class="form-control" value="' + port + '"/>';;
      elmt += '</td>';
      elmt += '<td>';
      elmt += '<div class="btn-group" data-toggle="buttons">';

      for (var i = 0; i < UDP_PROTOCOL_VERSIONS.length; i++) {
        var val = UDP_PROTOCOL_VERSIONS[i]
          , selected = (version == val || (val == DEFAULT_UDP_PROTOCL_VERSION && !UDP_PROTOCOL_VERSIONS.includes(version)));

        elmt += '<label class="btn btn-secondary' + (selected ? ' active' : '') + '">';
        elmt += '<input type="radio" name="versions[]" autocomplete="off" data-value="' + val + '" '
          + (selected ? 'checked' : '') +'> ' + val;
        elmt += '</label>';
      }

      elmt += '</div></td>';
      elmt += '<td>';
      elmt += '<button class="btn btn-danger remove-gateway-server">';
      elmt += '<i class="glyphicon glyphicon-remove"></i>';
      elmt += '</button>';
      elmt += '</td>';
      elmt += '</tr>';
      return elmt;
    }

    var loadSettings = function() {
      $.getJSON('/settings', function(val) {
        Object.keys(val).forEach(function(k) {
          var field = $('#settings input[name="' + k + '"]');

          if (field.length > 0) {
            if (field.attr('type') === 'radio') {
              field.filter('[value="' + val[k] + '"]').click();
            } else {
              field.val(val[k]);
            }
          }
        });

        if (val.device_ids) {
          selectize.clearOptions();
          val.device_ids.forEach(function(v) {
            selectize.addOption({text: toHex(v), value: v});
          });
          selectize.refreshOptions();
        }

        var gatewayForm = $('#gateway-server-configs').html('');
        if (val.gateway_configs) {
          val.gateway_configs.forEach(function(v) {
            gatewayForm.append(gatewayServerRow(toHex(v[0]), v[1], v[2]));
          });
        }
      });
    };

    var saveGatewayConfigs = function() {
      var form = $('#gateway-server-form')
        , errors = false;

      $('input', form).removeClass('error');

      var deviceIds = $('input[name="deviceIds[]"]', form).map(function(i, v) {
        var val = $(v).val();

        if (isNaN(val)) {
          errors = true;
          $(v).addClass('error');
          return null;
        } else {
          return val;
        }
      });

      var ports = $('input[name="ports[]"]', form).map(function(i, v) {
        var val = $(v).val();

        if (isNaN(val)) {
          errors = true;
          $(v).addClass('error');
          return null;
        } else {
          return val;
        }
      });

      var versions = $('.active input[name="versions[]"]', form).map(function(i, v) {
        return $(v).data('value');
      });

      if (!errors) {
        var data = [];
        for (var i = 0; i < deviceIds.length; i++) {
          data[i] = [deviceIds[i], ports[i], versions[i]];
        }
        $.ajax(
          '/settings',
          {
            method: 'put',
            contentType: 'application/json',
            data: JSON.stringify({gateway_configs: data})
          }
        )
      }
    };

    var deviceIdError = function(v) {
      if (!v) {
        $('#device-id-label').removeClass('error');
      } else {
        $('#device-id-label').addClass('error');
        $('#device-id-label .error-info').html(v);
      }
    };

    var updateModeOptions = function() {
      var currentMode = getCurrentMode();

      $('.mode-option').map(function() {
        if ($(this).data('for').split(',').includes(currentMode)) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    };

    var parseVersion = function(v) {
      var matches = v.match(/(\d+)\.(\d+)\.(\d+)(-(.*))?/);

      return {
        major: matches[1],
        minor: matches[2],
        patch: matches[3],
        revision: matches[5],
        parts: [matches[1], matches[2], matches[3], matches[5]]
      };
    };

    var isNewerVersion = function(a, b) {
      var va = parseVersion(a)
        , vb = parseVersion(b);

      return va.parts > vb.parts;
    };

    var handleCheckForUpdates = function() {
      var currentVersion = null
        , latestRelease = null;

      var handleReceiveData = function() {
        if (currentVersion != null) {
          $('#current-version').html(currentVersion.version + " (" + currentVersion.variant + ")");
        }

        if (latestRelease != null) {
          $('#latest-version .info-key').each(function() {
            var value = latestRelease[$(this).data('key')];
            var prop = $(this).data('prop');

            if (prop) {
              $(this).prop(prop, value);
            } else {
              $(this).html(value);
            }
          });
        }

        if (currentVersion != null && latestRelease != null) {
          $('#latest-version .status').html('');
          $('#latest-version-info').show();

          var summary;
          if (isNewerVersion(latestRelease.tag_name, currentVersion.version)) {
            summary = "New version available!";
          } else {
            summary = "You're on the most recent version.";
          }
          $('#version-summary').html(summary);

          var releaseAsset = latestRelease.assets.filter(function(x) {
            return x.name.indexOf(currentVersion.variant) != -1;
          });

          if (releaseAsset.length > 0) {
            console.log(releaseAsset[0].url);
            $('#firmware-link').prop('href', releaseAsset[0].browser_download_url);
          }
        }

        console.log(latestRelease);
      }

      var handleError = function(e, d) {
        console.log(e);
        console.log(d);
      }

      $('#current-version,#latest-version .status').html('<i class="spinning glyphicon glyphicon-refresh"></i>');
      $('#version-summary').html('');
      $('#latest-version-info').hide();
      $('#updates-modal').modal();

      $.ajax(
        '/about',
        {
          success: function(data) {
            currentVersion = JSON.parse(data);
            handleReceiveData();
          },
          failure: handleError
        }
      );

      $.ajax(
        '/latest_release',
        {
          success: function(data) {
            latestRelease = data;
            handleReceiveData();
          },
          failure: handleError
        }
      );
    };

    $(function() {
      $('.radio-option').click(function() {
        $(this).prev().prop('checked', true);
      });

      var hueDragging = false;
      var colorUpdated = function(e) {
        var x = e.pageX - $(this).offset().left
          , pct = x/(1.0*$(this).width())
          , hue = Math.round(360*pct)
          ;

        $('.hue-value-display').css({
          backgroundColor: "hsl(" + hue + ",100%,50%)"
        });

        updateGroup({hue: hue});
      };

      $('.hue-picker-inner')
        .mousedown(function(e) {
          hueDragging = true;
          colorUpdated.call(this, e);
        })
        .mouseup(function(e) {
          hueDragging = false;
        })
        .mouseout(function(e) {
          hueDragging = false;
        })
        .mousemove(function(e) {
          if (hueDragging) {
            colorUpdated.call(this, e);
          }
        });

      $('.slider').slider();

      $('.raw-update').change(function() {
        var data = {}
          , val = $(this).attr('type') == 'checkbox' ? $(this).is(':checked') : $(this).val()
          ;

        data[$(this).attr('name')] = val;
        updateGroup(data);
      });

      $('.command-btn').click(function() {
        updateGroup({command: $(this).data('command')});
      });

      $('.system-btn').click(function() {
        sendCommand({command: $(this).data('command')});
      });

      $('#sniff').click(function() {
        if (sniffing) {
          sniffRequest.abort();
          sniffing = false;
          $(this).html('Start Sniffing');
        } else {
          sniffing = true;
          getTraffic();
          $(this).html('Stop Sniffing');
        }
      });

      $('#add-server-btn').click(function() {
        $('#gateway-server-configs').append(gatewayServerRow('', ''));
      });

      $('#mode').change(updateModeOptions);

      $('body').on('click', '.remove-gateway-server', function() {
        $(this).closest('tr').remove();
      });

      selectize = $('#deviceId').selectize({
        create: true,
        sortField: 'text',
        onOptionAdd: function(v, item) {
          item.value = parseInt(item.value);
        },
        createFilter: function(v) {
          if (! v.match(/^(0x[a-fA-F0-9]{1,4}|[0-9]{1,5})$/)) {
            deviceIdError("Must be an integer between 0x0000 and 0xFFFF");
            return false;
          }

          var value = parseInt(v);

          if (! (0 <= v && v <= 0xFFFF)) {
            deviceIdError("Must be an integer between 0x0000 and 0xFFFF");
            return false;
          }

          deviceIdError(false);

          return true;
        }
      });
      selectize = selectize[0].selectize;

      var settings = "";

      FORM_SETTINGS.forEach(function(k) {
        var elmt = '<div class="form-entry">';
        elmt += '<div>';
        elmt += '<label for="' + k + '">' + k + '</label>';

        if (FORM_SETTINGS_HELP[k]) {
          elmt += '<div class="field-help" data-help-text="' + FORM_SETTINGS_HELP[k] + '"></div>';
        }

        elmt += '</div>';

        if(k === "radio_interface_type") {
          elmt += '<div class="btn-group" id="radio_interface_type" data-toggle="buttons">' +
            '<label class="btn btn-secondary active">' +
              '<input type="radio" id="nrf24" name="radio_interface_type" autocomplete="off" value="nRF24" /> nRF24' +
            '</label>'+
            '<label class="btn btn-secondary">' +
              '<input type="radio" id="lt8900" name="radio_interface_type" autocomplete="off" value="LT8900" /> PL1167/LT8900' +
            '</label>' +
          '</div>';
        } else {
          elmt += '<input type="text" class="form-control" name="' + k + '"/>';
          elmt += '</div>';
        }

        settings += elmt;
      });

      $('#settings').prepend(settings);
      $('#settings').submit(function(e) {
        var obj = {};

        FORM_SETTINGS.forEach(function(k) {
          var elmt = $('#settings input[name="' + k + '"]');

          if (elmt.attr('type') === 'radio') {
            obj[k] = elmt.filter(':checked').val();
          } else {
            obj[k] = elmt.val();
          }
        });

        // pretty hacky. whatever.
        obj.device_ids = _.map(
          $('.selectize-control .option'),
          function(x) {
            return $(x).data('value')
          }
        );

        $.ajax(
          "/settings",
          {
            method: 'put',
            contentType: 'application/json',
            data: JSON.stringify(obj)
          }
        );

        e.preventDefault();
        return false;
      });

      $('#gateway-server-form').submit(function(e) {
        saveGatewayConfigs();
        e.preventDefault();
        return false;
      });

      $('.field-help').each(function() {
        var elmt = $('<i></i>')
          .addClass('glyphicon glyphicon-question-sign')
          .tooltip({
            placement: 'top',
            title: $(this).data('help-text'),
            container: 'body'
          });
        $(this).append(elmt);
      });

      $('#updates-btn').click(handleCheckForUpdates);

      loadSettings();
      updateModeOptions();
    });
  </script>

  <div id="update-firmware-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="modal-title">Update Firmware</h2>
        </div>
        <div class="modal-body">
          <div class="alert alert-warning">
            <p>
            Download firmware binaries from the
            <a href="https://github.com/sidoh/esp8266_milight_hub/releases">GitHub releases page</a>.
            Check for a new version by clicking on the "Check for Updates" button.
            </p>

            <p>
              <b>Make sure the binary you're uploading was compiled for your board!</b>
              Firmware with incompatible settings could prevent boots. If this happens,
              reflash the board with USB.
            </p>
          </div>
          <form action="/firmware" method="post" enctype="multipart/form-data">
            <input type="file" name="file"/>
            <p>&nbsp;</p>
            <input type="submit" name="submit" class="btn btn-success"/>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="updates-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="modal-title">Update</h2>
        </div>
        <div class="modal-body">
          <div id="version-summary"></div>

          <hr />

          <h4>Current Version</h4>
          <div id="current-version"></div>

          <div id="latest-version">
            <h4>Latest Version</h4>
            <div class="status"></div>
            <div id="latest-version-info">
              <label>Version</label>
              <div class="info-key" data-key="tag_name"></div>

              <label>Release Date</label>
              <div class="info-key" data-key="published_at"></div>

              <label>Release Notes</label>
              <pre class="info-key" data-key="body"></pre>

              <div>
                <a class="info-key" data-prop="href" data-key="html_url">View on GitHub</a>
              </div>

              <div>
                <a class="info-key" id="firmware-link">Download Firmware</a>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <a href="/download_update/web" class="btn btn-primary">Update Web UI</a>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div class="container">
    <div class="row header-row">
      <div class="col-sm-12">
        <h1>
          Control Lights
        </h1>
      </div>
    </div>

    <div>&nbsp;</div>

    <div class="row">
      <div class="col-sm-4">
        <label for="deviceId" id="device-id-label">
          Device Id
          <span class="error-info"></span>
        </label>
        <select id="deviceId" placeholder="Enter hub ID">
				</select>
      </div>

      <div class="col-sm-3">
        <div class="mode-option" id="group-option" data-for="cct,rgbw,rgb_cct">
          <label for="groupId">Group</label>

          <div class="btn-group" id="groupId" data-toggle="buttons">
            <label class="btn btn-secondary active">
              <input type="radio" name="options" autocomplete="off" data-value="1" checked> 1
            </label>
            <label class="btn btn-secondary">
              <input type="radio" name="options" autocomplete="off" data-value="2"> 2
            </label>
            <label class="btn btn-secondary">
              <input type="radio" name="options" autocomplete="off" data-value="3"> 3
            </label>
            <label class="btn btn-secondary">
              <input type="radio" name="options" autocomplete="off" data-value="4"> 4
            </label>
            <label class="btn btn-secondary">
              <input type="radio" name="options" autocomplete="off" data-value="0"> All
            </label>
          </div>
        </div>
      </div>

      <div class="col-sm-4">
        <label for="groupId">Mode</label>

        <div class="btn-group" id="mode" data-toggle="buttons">
          <label class="btn btn-secondary active">
            <input type="radio" name="mode" autocomplete="off" data-value="rgbw" checked> RGBW
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="mode" autocomplete="off" data-value="cct"> CCT
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="mode" autocomplete="off" data-value="rgb_cct"> RGB+CCT
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="mode" autocomplete="off" data-value="rgb"> RGB
          </label>
        </div>
      </div>
    </div>

    <div class="row"><div class="col-sm-12">
    <div class="mode-option" data-for="rgbw,rgb_cct,rgb">
      <div class="row">
        <div class="col-sm-12">
          <h5>Hue</h5>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <span class="hue-picker">
            <span class="hue-picker-inner"></span>
            <span class="hue-value-display"></span>
          </span>
        </div>
      </div>
    </div>
    </div></div>

    <div class="mode-option" data-for="rgb_cct">
      <div class="row">
        <div class="col-sm-12">
          <h5>Saturation</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <input class="slider raw-update" name="saturation"
              data-slider-min="0"
              data-slider-max="100"
              data-slider-value="100"
          />
        </div>
      </div>
    </div>

    <div class="mode-option" data-for="cct,rgb_cct">
      <div class="row">
        <div class="col-sm-12">
          <h5>Color Temperature</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <input class="slider raw-update" name="temperature"
              data-slider-min="0"
              data-slider-max="100"
              data-slider-value="100"
          />
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12">
        <h5>Brightness</h5>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12">
        <input class="slider raw-update" name="level"
            data-slider-min="0"
            data-slider-max="100"
            data-slider-value="100"
        />
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12">
        <h5>Commands</h5>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-12">
        <ul class="command-buttons">
          <li>
            <input type="checkbox" name="status" class="raw-update" data-toggle="toggle" checked/>
          </li>
          <div class="mode-option inline" data-for="rgbw,rgb_cct">
            <li>
              <button type="button" class="btn btn-secondary command-btn" data-command="set_white">White</button>
            </li>
          </div>
          <li>
            <button type="button" class="btn btn-success command-btn" data-command="pair">
              <i class="glyphicon glyphicon-plus"></i>
              Pair
            </button>
          </li>
          <li>
            <button type="button" class="btn btn-danger command-btn" data-command="unpair">
              <i class="glyphicon glyphicon-remove"></i>
              Unpair
            </button>
          </li>
        </ul>
        <p></p>
        <ul class="command-buttons">
          <div class="mode-option inline" data-for="rgb,rgbw,rgb_cct">
            <li>
              <div class="plus-minus-group">
                <button type="button" class="btn btn-default btn-number command-btn" data-command="previous_mode">
                  <span class="glyphicon glyphicon-minus"></span>
                </button>
                <span class="title">Mode</span>
                <button type="button" class="btn btn-default btn-number command-btn clearfix" data-command="next_mode">
                  <span class="glyphicon glyphicon-plus"></span>
                </button>
                <div class="clearfix"></div>
              </div>
            </li>
          </div>
          <div class="mode-option inline" data-for="rgb,rgbw,rgb_cct">
            <li>
              <div class="plus-minus-group">
                <button type="button" class="btn btn-default btn-number command-btn" data-command="mode_speed_down">
                  <span class="glyphicon glyphicon-minus"></span>
                </button>
                <span class="title">Speed</span>
                <button type="button" class="btn btn-default btn-number command-btn" data-command="mode_speed_up">
                  <span class="glyphicon glyphicon-plus"></span>
                </button>
                <div class="clearfix"></div>
              </div>
            </li>
          </div>
        </ul>
      </div>
    </div>

    <div class="row header-row">
      <div class="col col-sm-10">
        <h1>Gateway Servers</h1>
      </div>

      <div class="col col-sm-2">
        <button class="btn btn-success header-btn" id="add-server-btn">
          <i class="glyphicon glyphicon-plus"></i>
          Add Server
        </button>
      </div>
    </div>

    <div class="row">
      <div class="col col-sm-12">
        <form id="gateway-server-form">
          <table class="table">
            <thead>
              <tr>
                <th>Device ID</th>
                <th>UDP Port</th>
                <th>Protocol Version</th>
              </tr>
            </thead>
            <tbody id="gateway-server-configs">
            </tbody>
          </table>
          <input type="submit" class="btn btn-success" value="Save" />
        </form>
      </div>
    </div>

    <div>&nbsp;</div>

    <div class="row header-row">
      <div class="col-sm-12">
        <h1>Settings</h1>
      </div>
    </div>

    <div>&nbsp;</div>

    <div class="row">
      <div class="col-sm-12">
        <form action="#" id="settings">
          <input type="submit" class="btn btn-success" value="Submit" />
        </form>
      </div>
    </div>

    <div class="row header-row">
      <div class="col-sm-12">
        <h1>Sniff Traffic</h1>
      </div>
    </div>

    <div>&nbsp;</div>

    <div class="row">
      <div class="col-sm-12">
        <button type="button" id="sniff" class="btn btn-primary">Start Sniffing</button>

        <div class="btn-group" id="sniff-type" data-toggle="buttons">
          <label class="btn btn-secondary active">
            <input type="radio" name="options" autocomplete="off" data-value="rgbw" checked> RGBW
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off" data-value="cct"> CCT
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off" data-value="rgb_cct"> RGB+CCT
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="options" autocomplete="off" data-value="rgb"> RGB
          </label>
        </div>

        <div> &nbsp; </div>

        <pre id="sniffed-traffic"></pre>
      </div>
    </div>

    <div class="row header-row">
      <div class="col-sm-12">
        <h1>Admin</h1>
      </div>
    </div>

    <div>&nbsp;</div>

    <div class="row">
      <div class="col-sm-12">
        <button type="button" class="btn btn-danger system-btn" data-command="restart">
          Restart
        </button>

        <button type="button" id="updates-btn" class="btn btn-primary">
          Check for Updates
        </button>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#update-firmware-modal">
          Update Firmware
        </button>
      </div>
    </div>
  </div>
</body>
</html>