hmetzner
/
esp8266_milight_hub


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791
							<!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;
    }
  </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", "packet_repeats",
      "http_repeat_factor", "auto_restart_period"
    ];
    
    var FORM_SETTINGS_HELP = {
      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."
    }
    
    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 input:checked').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) {
            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();
        }
      });
    };
    
    $(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 += '<label for="' + k + '">' + k + '</label>';
        
        if (FORM_SETTINGS_HELP[k]) {
          elmt += '<div class="field-help" data-help-text="' + FORM_SETTINGS_HELP[k] + '"></div>';
        }
        
        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) {
          obj[k] = $('#settings input[name="' + k + '"]').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);
      });
      
      loadSettings();
      updateModeOptions();
    });
  </script>
  
  <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>
      </div>
    </div>
  </div>
</body>
</html>