index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Phoenix Dash</title>
    <link href="/node_modules/bulma/css/bulma.min.css" rel="stylesheet" />
    <link
      href="/node_modules/bulma-extensions/dist/css/bulma-extensions.min.css"
      rel="stylesheet"
    />
    <!-- <link rel="stylesheet" href="../node_modules/chart.js/dist/Chart.min.css" /> -->
    <link href="src/css/style.css" rel="stylesheet" />
  </head>

  <body>
    <div class="dashboard">
      <div class="columns">
        <div id="match-data" class="column">
          <div id="timer">2:15</div>
          <div id="event-name"></div>
          <div id="match">
            <span id="match-type"></span>
            <span id="match-number"></span>
          </div>
        </div>
        <div id="connection-data" class="column">
          <div id="robot-state">Unknown state</div>
          <!-- <button class="button" id="connect-button">Connect</button> -->
          <a
            class="button is-link"
            id="camera-button"
            href="http://localhost:8888/camera/index.html"
            target="_blank"
            >Camera Window</a
          >
          <button
            class="button is-warning"
            onclick="document.getElementById('driver-station').classList.toggle('is-hidden')"
          >
            Toggle DS
          </button>
          <div id="game-data" class="tag is-large">Game Data</div>
        </div>
        <div class="column">
          <div>
            Drivetrain Drive Speed: <span id="drivetrain-forward-speed"></span>
          </div>
          <input
            id="drivetrain-forward-speed-target"
            class="slider is-fullwidth"
            step="1"
            min="20"
            max="100"
            value="90"
            type="range"
          />
          <div>
            Drivetrain Turn Speed: <span id="drivetrain-turn-speed"></span>
          </div>
          <input
            id="drivetrain-turn-speed-target"
            class="slider is-fullwidth"
            step="1"
            min="20"
            max="100"
            value="90"
            type="range"
          />
        </div>
      </div>
      <div class="columns">
        <div id="camera" class="column"></div>
        <div class="column">
          <div id="shooter-data">
            <h1 class="is-size-3">Shooter</h1>
            <div>
              Shooter Current Speed:
              <span id="shooter-speed"></span>
            </div>
            <progress
              id="shooter-speed-bar"
              class="progress is-success"
              value="0"
              max="6000"
            ></progress>
            <div>
              Shooter Target Speed: <span id="shooter-target-speed"></span>
            </div>
            <progress
              id="shooter-target-speed-bar"
              class="progress is-info"
              value="0"
              max="6000"
            ></progress>
          </div>
          <div id="limelight-data">
            <h1 class="is-size-3">Limelight</h1>
            <div class="subtitle">
              Angle offset: <span id="ll-x-offset"></span>
            </div>
            <div class="subtitle">Y offset: <span id="ll-y-offset"></span></div>
            <span class="tag is-black is-large">Limelight Target</span>
          </div>
        </div>
        <div id="intake-data" class="column">
          <h1 class="is-size-3">Intake</h1>
          <div>Arm Position: <span id="arm-position"></span></div>
          <progress
            id="intake-arm-bar"
            class="progress is-primary"
            value="0"
            max="100"
          ></progress>
        </div>
      </div>

      <div class="modal" id="connect-modal">
        <div class="modal-background"></div>
        <div class="modal-card">
          <header class="modal-card-head">
            <p class="modal-card-title">Connect to robot</p>
          </header>
          <section class="modal-card-body">
            <input
              class="input"
              id="connect-address"
              type="text"
              value="localhost"
              disabled
            />
          </section>
          <footer class="modal-card-foot">
            <button class="button is-primary" id="connect" disabled>
              Connecting
            </button>
            <button class="button is-info" id="connect-localhost">
              Localhost
            </button>
          </footer>
        </div>
      </div>
      <div class="modal" id="auton-modal">
        <div class="modal-background"></div>
        <div class="modal-content"></div>
        <button class="modal-close is-large" aria-label="close"></button>
      </div>
    </div>

    <div class="driver-station" id="driver-station">
      <h1>This area intentionally left empty for the driver station</h1>
    </div>
    <script src="/networktables/networktables.js"></script>
    <!-- <script src="../node_modules/chart.js/dist/Chart.min.js"></script> -->
    <script src="src/ui.js"></script>
    <!-- <script src="src/connection.js"></script> -->
    <!-- <script src="charts.js"></script> -->
  </body>
</html>