hmetzner
/
esp8266_milight_hub


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641
							<!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"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/css/bootstrap-colorpicker.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; }
    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;
    }
  </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 src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
  
  <script lang="text/javascript">
    var FORM_SETTINGS = [
      "admin_username", "admin_password", "ce_pin", "csn_pin", "packet_repeats",
      "http_repeat_factor"
    ];
    
    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";
      }
        
      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 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) {
      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 += '<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]));
          });
        }
      });
    };
    
    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;
        }
      });
        
      if (!errors) {
        var data = [];
        for (var i = 0; i < deviceIds.length; i++) {
          data[i] = [deviceIds[i], ports[i], 0];
        }
        $.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')});
      });
      
      $('#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>';
        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;
      });
      
      $('#cp2')
        .colorpicker({
          format: 'hex'
        })
        .on('changeColor', function(e) {
          console.log(e);
        });
      
      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">
        <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 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>
        </div>
      </div>
    </div>
    
    <div class="row"><div class="col-sm-12">
    <div class="mode-option" data-for="rgbw">
      <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>Color</h5>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <div id="cp2" class="input-group colorpicker-component">
            <input type="text" value="#FFFFFF" class="form-control" />
            <span class="input-group-addon"><i></i></span>
          </div>
        </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>
      </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>
              </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>
        </div>
        
        <div> &nbsp; </div>
        
        <pre id="sniffed-traffic"></pre>
      </div>
    </div>
  </div>
</body>
</html>