hmetzner
/
esp8266_milight_hub


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068
							<!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"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--[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; }
    #sniffed-traffic { max-height: 50em; overflow-y: auto; }
    .btn-secondary {
      background-color: #fff;
      border: 1px solid #ccc;
    }
    .inline { display: inline-block; }
    .white-temp-picker {
      height: 2em;
      background: linear-gradient(to right,
        rgb(166, 209, 255) 0%,
        rgb(255, 255, 255) 50%,
        rgb(255, 160, 0) 100%
      );
      display: inline-block;
      padding: 3px 0;
    }
    .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", "discovery_port", "mqtt_server",
      "mqtt_topic_pattern", "mqtt_update_topic_pattern", "mqtt_username", "mqtt_password",
      "radio_interface_type", "listen_repeats"
    ];

    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/:device_type/:group_id. See README for further details.",
      mqtt_update_topic_pattern : "Pattern to publish MQTT updates. Packets that " +
        "are received from other devices, and packets that are sent from this device will " +
        "result in updates being sent.",
      discovery_port : "UDP port to listen for discovery packets on. Defaults to " +
        "the same port used by MiLight devices, 48899. Use 0 to disable.",
      listen_repeats : "Increasing this increases the amount of time spent listening for " +
        "packets. Set to 0 to disable listening. Default is 3."
    }

    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() {
      sniffRequest = $.get('/gateway_traffic', function(data) {
        $('#sniffed-traffic').prepend('<pre>' + data + '</pre>');
        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 id="restore-settings-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">Restore Settings</h2>
        </div>
        <div class="modal-body">
          <form action="/settings" 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 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">
          <div class="white-temp-picker">
            <input class="slider raw-update" name="temperature"
                data-slider-min="0"
                data-slider-max="100"
                data-slider-value="100"
            />
          </div>
        </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> &nbsp; </div>

        <div id="sniffed-traffic"></div>
      </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" class="btn btn-danger system-btn" data-command="clear_wifi_config">
          Clear Wifi Config
        </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>

        <a href="/settings" download="settings.json" class="btn btn-primary">Backup Settings</a>

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#restore-settings-modal">
          Restore Settings
        </button>
      </div>
    </div>
  </div>
</body>
</html>