hmetzner
/
esp8266_milight_hub


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
							<!doctype html>

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

  <title>MiLight Hub</title>

  <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.6/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.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]-->
  <link href="css/style.css" rel="stylesheet" />
</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.6/js/standalone/selectize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

  <script src="js/rgb2hsv.js" lang="text/javascript"></script>
  <script src="js/script.js" lang="text/javascript"></script>

  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">MiLight Hub</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#settings" data-toggle="modal" data-target="#settings-modal">Settings</a></li>
          <li>
            <a href="#sniff" id="sniff">
              <i class="glyphicon glyphicon-play"></i>
              <span>Start Sniffing</span>
            </a>
          </li>
          <li class="dropdown">
            <a href="#admin" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#admin-actions" data-toggle="modal" data-target="#admin-actions-modal">Actions</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#check-updates" id="updates-btn" data-toggle="modal" data-target="#updates-modal">Check for Updates</a></li>
              <li><a href="#updates" data-toggle="modal" data-target="#update-firmware-modal">Update Firmware</a></li>
              <li><a href="#backup" data-toggle="modal" data-target="#backup-settings-modal">Backup</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container" id="content">
    <div class="row">
      <div class="col-sm-3">
        <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-4">
        <div class="mode-option" id="group-option" data-for="cct,rgbw,rgb_cct,fut089,fut091">
          <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 mode-option" data-for="fut089">
              <input type="radio" name="options" autocomplete="off" data-value="5"> 5
            </label>
            <label class="btn btn-secondary mode-option" data-for="fut089">
              <input type="radio" name="options" autocomplete="off" data-value="6"> 6
            </label>
            <label class="btn btn-secondary mode-option" data-for="fut089">
              <input type="radio" name="options" autocomplete="off" data-value="7"> 7
            </label>
            <label class="btn btn-secondary mode-option" data-for="fut089">
              <input type="radio" name="options" autocomplete="off" data-value="8"> 8
            </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="mode">Remote Type</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>
          <label class="btn btn-secondary">
            <input type="radio" name="mode" autocomplete="off" data-value="fut089"> FUT089
          </label>
          <label class="btn btn-secondary">
            <input type="radio" name="mode" autocomplete="off" data-value="fut091"> FUT091
          </label>
        </div> -->
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            <label>Mode</label>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" id="mode">
            <li data-value="rgbw">
              <a href="#">RGBW</a>
            </li>
            <li data-value="cct">
              <a href="#">CCT</a>
            </li>
            <li data-value="rgb_cct" class="active">
              <a href="#">RGB+CCT</a>
            </li>
            <li data-value="rgb">
              <a href="#">RGB</a>
            </li>
            <li data-value="fut089">
              <a href="#">FUT089 / B8</a>
            </li>
            <li data-value="fut091">
              <a href="#">FUT091 / B2</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="row"><div class="col-sm-12">
    <div class="mode-option" data-for="rgbw,rgb_cct,rgb,fut089">
      <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,fut089">
      <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,fut089,fut091">
      <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,fut089">
            <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-info command-btn" data-command="night_mode">Night</button>
          </li>
          <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">
            <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="rgbw,rgb_cct,fut089">
            <li>
              <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                  Mode
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu mode-dropdown">
                </ul>
              </div>
          </li>
          </div>
          <div class="mode-option inline" data-for="rgb,rgbw,rgb_cct,fut089">
            <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>

    <!-- The content of this modal is dynamically injected into the settings modal -->
    <div id="gateway-servers-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">Gateway Servers</h2>
          </div>
          <div class="modal-body">

            <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>
                        <th>
                          <a class="btn btn-success gateway-add-btn" id="add-server-btn">
                            <i class="glyphicon glyphicon-plus"></i>
                          </a>
                        </th>
                      </tr>
                    </thead>
                    <tbody id="gateway-server-configs">
                    </tbody>
                  </table>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>&nbsp;</div>

    <div id="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">Settings</h2>
          </div>
          <div class="modal-body">

            <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>
        </div>
      </div>
    </div>

    <div class="alert alert-warning alert-block" id="traffic-sniff">
      <button type="button" class="close" id="traffic-sniff-close">&times;</button>
      <h4>Traffic sniffed (sent and received)</h4>
      <div id="sniffed-traffic"></div>
    </div>
  </div>

  <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">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       </div>
     </div>
   </div>
  </div>

  <div id="backup-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>
        </div>
        <div class="modal-body">
          <div>
            <h3 class="section-title">Backup Settings</h3>
            <a href="/settings" download="settings.json" class="btn btn-primary">Backup Settings</a>
          </div>

          <div>
            <h3 class="section-title">Restore Settings</h3>
            <form action="/settings" method="post" enctype="multipart/form-data">
              <p>
                <input type="file" name="file"/>
              </p>
              <p>
                <input type="submit" name="submit" class="btn btn-success"/>
              </p>
            </form>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

  <div id="admin-actions-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">Admin Actions</h2>
        </div>
        <div class="modal-body">
          <ul class="action-buttons">
            <li>
              <button class="btn btn-danger btn-sm system-btn" data-command="restart">Restart</button>
            </li>
            <li>
              <button class="btn btn-danger btn-sm system-btn" data-command="clear_wifi_config">Clear Wifi Config</button>
            </li>
          </ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</body>
</html>