{% extends "base.html" %}
{% block content %}
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <div class="container">
    <div class="row">

      <div class="col-md-6">
        <!-- pilot mode/recording -->
        <form>
            <label>(M)ode</label>
            <select id="mode_select" class="form-control"  style="display: inline">
              <option value="user">(U)ser</option>
              <option value="local">Full (A)uto</option>
              <option value="local_angle">Auto (S)teer</option>
            </select>
            <button type="button" id="record_button" class="btn btn-info" >
              Start (R)ecording
            </button>
        </form>

        <!-- programmable buttons -->
        <form id="button_bar">
          <button type="button" id="w1" class="btn btn-info">1</button>
          <button type="button" id="w2" class="btn btn-info">2</button>
          <button type="button" id="w3" class="btn btn-info">3</button>
          <button type="button" id="w4" class="btn btn-info">4</button>
          <button type="button" id="w5" class="btn btn-info">5</button>
        </form>

        <!-- video -->
        <div class="thumbnail">
          <img id='mpeg-image', class='img-responsive' src="/video"/> </img>
        </div>

        <!-- steering/throttle meters -->
        <div id="control-bars">
          <div>
            <span class="glyphicon glyphicon-resize-horizontal pull-left"></span>
            <div class="progress negative">
              <div id="angle-bar-backward" class="progress-bar progress-bar-warning pull-right" role="progressbar" style="width: 0%;">
              </div>
            </div>

            <div class="progress positive">
              <div id="angle-bar-forward" class="progress-bar progress-bar-info" role="progressbar" style="width: 0%;">
              </div>
            </div>
          </div>

          <div>
            <span class="glyphicon glyphicon-resize-vertical pull-left"></span>
            <div class="progress negative">
              <div id="throttle-bar-backward" class="progress-bar progress-bar-danger pull-right" role="progressbar" style="width: 0%;">
              </div>
            </div>

            <div class="progress positive">
              <div id="throttle-bar-forward" class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;">
              </div>
            </div>
          </div>
        </div>
      </div> <!-- end video column -->

      <div id="joystick-column"  class="col-md-6">
        <div style="text-align:center;color:rgb(255, 27, 65);display:inline-block">Note: physical game controller overrides web control.</div>
        <!-- virtual joystick -->
        <div id="joystick_outer" class="thumbnail">
          <div id="joystick_container">
            <p>Click/touch to use joystick.</p>
          </div>
        </div>

        <div class="form-inline">
          <div>
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-primary" id="joystick-toggle">
                <input type="radio" name="controlMode" id="joystick" autocomplete="off" value="joystick"> Joystick
              </label>
              <label class="btn btn-primary" id="gamepad-toggle">
                <input type="radio" name="controlMode" id="gamepad" autocomplete="off" value="gamepad"> Gamepad
              </label>
              <label class="btn btn-primary" id="tilt-toggle">
                <input type="radio" name="controlMode" id="tilt" autocomplete="off" value="tilt">Device Tilt
              </label>
            </div>
            <label class="group-label" style="display: inline">
              <a data-toggle="modal" class="btn btn-primary btn-xs" data-target="#aboutControlModes">
                <span class="glyphicon glyphicon-info-sign"></span>
              </a>
            </label>
          </div>

          <br/>
          <div>
            <label class="group-label" style="display: inline">Throttle:</label>
            <select id="throttle_mode_select" class="form-control" style="display: inline">
              <option value="user" selected>Maximum</option>
              <option value="constant">Constant</option>
            </select>
            <select id="max_throttle_select" class="form-control" style="display: inline">
              {% for t in [100, 95, 90, 85, 80, 75, 70, 60, 50, 40, 30, 20, 10] %}
                <option value="{{ t / 100.0 }}">{{ t }}%</option>
              {% end %}
            </select>
          </div>

          <br/>
          <div class="panel panel-default" id="pid_panel">
            <div class="panel-heading">PID / 回中 / 加速度调节</div>
            <ul class="list-group">
              <li class="list-group-item">
                <div class="row">
                  <div class="col-xs-6">Kp</div>
                  <div class="col-xs-6">
                    <input id="pid_kp" type="range" min="0" max="3" step="0.05" class="form-control"/>
                    <small>当前: <span data-for="pid_kp"></span></small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="row">
                  <div class="col-xs-6">Ki</div>
                  <div class="col-xs-6">
                    <input id="pid_ki" type="range" min="0" max="1" step="0.01" class="form-control"/>
                    <small>当前: <span data-for="pid_ki"></span></small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="row">
                  <div class="col-xs-6">Kd</div>
                  <div class="col-xs-6">
                    <input id="pid_kd" type="range" min="0" max="0.1" step="0.001" class="form-control"/>
                    <small>当前: <span data-for="pid_kd"></span></small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="row">
                  <div class="col-xs-6">回中速度 (角/秒)</div>
                  <div class="col-xs-6">
                    <input id="recenter_rate" type="range" min="0" max="2" step="0.05" class="form-control"/>
                    <small>当前: <span data-for="recenter_rate"></span></small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="row">
                  <div class="col-xs-6">转向角速度 (角/秒)</div>
                  <div class="col-xs-6">
                    <input id="steer_rate" type="range" min="0" max="3" step="0.05" class="form-control"/>
                    <small>当前: <span data-for="steer_rate"></span></small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="row">
                  <div class="col-xs-6">加速度变化率</div>
                  <div class="col-xs-6">
                    <input id="accel_rate" type="range" min="0" max="3" step="0.05" class="form-control"/>
                    <small>当前: <span data-for="accel_rate"></span></small>
                  </div>
                </div>
              </li>
              <li class="list-group-item">
                <div class="row">
                  <div class="col-xs-6">刹车变化率</div>
                  <div class="col-xs-6">
                    <input id="brake_rate" type="range" min="0" max="3" step="0.05" class="form-control"/>
                    <small>当前: <span data-for="brake_rate"></span></small>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- 参数管理面板 -->
        <div class="panel panel-default" id="param_management_panel">
          <div class="panel-heading">参数管理</div>
          <div class="panel-body">
            <div class="btn-group btn-group-justified" role="group">
              <div class="btn-group" role="group">
                <button type="button" id="reset_params_btn" class="btn btn-warning btn-sm">
                  <span class="glyphicon glyphicon-refresh"></span> 重置默认值
                </button>
              </div>
              <div class="btn-group" role="group">
                <button type="button" id="export_params_btn" class="btn btn-info btn-sm">
                  <span class="glyphicon glyphicon-download-alt"></span> 导出参数
                </button>
              </div>
            </div>
            <div class="btn-group btn-group-justified" role="group" style="margin-top:10px;">
              <div class="btn-group" role="group">
                <label for="import_params_file" class="btn btn-success btn-sm" style="margin:0;">
                  <span class="glyphicon glyphicon-upload"></span> 导入参数
                  <input type="file" id="import_params_file" accept=".json" style="display:none;"/>
                </label>
              </div>
              <div class="btn-group" role="group">
                <button type="button" id="load_server_params_btn" class="btn btn-primary btn-sm">
                  <span class="glyphicon glyphicon-cloud-download"></span> 从服务器加载
                </button>
              </div>
            </div>
            <div style="margin-top:10px;font-size:12px;color:#666;">
              <span class="glyphicon glyphicon-info-sign"></span> 
              参数自动保存到本地存储和服务器（如可用）
            </div>
          </div>
        </div>
      </div> <!-- end joystick-column -->
      <div id="joystick-padding"></div>
    </div> <!-- END row -->
  </div> <!-- END page Container -->

  <footer class="footer" id="vehicle_footer">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <button type="button" id="brake_button" class="btn btn-lg btn-success btn-block">Start Vehicle (space)</button>
        </div>
      </div>
    </div>
  </footer>

  <!-- Modal -->
  <div class="modal fade" id="aboutControlModes" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">About Control Modes</h4>
        </div>
        <div class="modal-body">
          <p>
            <strong>Joystick</strong> control is provided via the blue touch/click area on screen. Click or touch and drag to control throttle and steering.
          </p>
          <p>
            <strong>Keyboard (IKJL)</strong> control with racing game feel:
            <ul>
              <li>Forward: <code>I</code> (Hold to accelerate, release to auto-brake)</li>
              <li>Reverse: <code>K</code> (Hold to brake/reverse, release to auto-brake)</li>
              <li>Left: <code>J</code> (Hold to steer left, release to auto-center)</li>
              <li>Right: <code>L</code> (Hold to steer right, release to auto-center)</li>
            </ul>
            <em>Features: PID smoothing, auto-centering steering, auto-braking throttle. Adjustable via sliders below.</em>
          </p>
          <p>
            <strong>Gamepad</strong> control is enabled by the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">HTML5 gamepad API</a>, currently supported by Chrome and Firefox. Playstation 3 controllers have been confirmed to work.
          </p>
          <p>
            <strong>Device tilt</strong> control is enabled for devices with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation">device orientation sensors</a>, and should work with most modern smartphones. Hold your device in landscape mode, tilt  forward/backward for throttle and left/right for steering.
          </p>
          <p>
            <strong>Pilot Mode</strong> can be toggled or chosen using the keyboard.
            <ul>
              <li>Toggle Pilot <b>M</b>ode: <code>M</code></li> 
              <li><b>U</b>ser Mode: <code>U</code></li> 
              <li>Auto <b>S</b>teering  Mode: <code>S</code></li> 
              <li>Full <b>A</b>uto Mode: <code>A</code></li> 
            </ul>
          </p>
          <p>
            <strong>Recording</strong> can be toggled using the keyboard.
            <ul><li>Toggle <b>R</b>ecording: <code>R</code></li></ul>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript">
  $( document ).ready(function() {
    console.log( "document ready!" );
    driveHandler.load()
  });
</script>

{% end %}