hmetzner
/
esp8266_milight_hub


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
							<!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]-->
</head>

<body>
  <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>

  <link rel="stylesheet" href="style.css" />
  <script src="bundle.js"></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>