<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>LTI System Analysis</title>
  <link rel="stylesheet" href="lib/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
  <script src="lib/plotlyjs.min.js"></script>
</head>
<body>
  <div id="root" class="container">
    <h1 class="mt-3">LTI System Analysis</h1>
    <h3 class="code mt-5">
      <span class="coef">a<sub>0</sub></span>y[n] +
      <span class="coef">a<sub>1</sub></span>y[n-1] +
      <span class="coef">a<sub>2</sub></span>y[n-2] + ... +
      <span class="coef">a<sub>p</sub></span>y[n-<span class="deg">p</span>] =
    </h3>
    <h3 class="code text-right">
      <span class="coef">b<sub>0</sub></span>x[n] +
      <span class="coef">b<sub>1</sub></span>x[n-1] +
      <span class="coef">b<sub>2</sub></span>x[n-2] + ... +
      <span class="coef">b<sub>q</sub></span>x[n-<span class="deg">q</span>]
    </h3>
    <dl class="row mt-5">
      <dt class="col-sm-2">JSON data:</dt>
      <dd class="col-sm-10">
        <div class="custom-file">
          <input type="file" id="systemFile" class="custom-file-input" @change="systemFileHandler">
          <label class="custom-file-label" for="systemFile">{{ systemFile ? systemFile.name : 'Choose file' }}</label>
          <button type="button" class="btn btn-secondary" @click="systemFileHandler">Reload</button>
        </div>
      </dd>
      <dd class="col-sm-12 maxheight">
        <dl class="row mt-0 mb-0">
          <dt class="col-sm-2">Orders:</dt>
          <dd class="code col-sm-5">
            <label>p<sub>&nbsp;</sub> =</label>
            <input type="number" min="0" v-model.number="p" @change="system('a')">
          </dd>
          <dd class="code col-sm-5">
            <label>q<sub>&nbsp;</sub> =</label>
            <input type="number" min="0" v-model.number="q" @change="system('b')">
          </dd>
          <dt class="col-sm-2">Coefficients:</dt>
          <dd class="code col-sm-5">
            <p v-for="(c, i) in a">
              <label>a<sub>{{ i }}</sub> =</label>
              <input type="number" v-model.number="a[i]" @change="output">
            </p>
          </dd>
          <dd class="code col-sm-5">
            <p v-for="(c, i) in b">
              <label>b<sub>{{ i }}</sub> =</label>
              <input type="number" v-model.number="b[i]" @change="output">
            </p>
          </dd>
        </dl>
      </dd>
      <dt class="col-sm-2">System:</dt>
      <dd class="code col-sm-10">
        <span v-for="(c, i) in a">
          <span v-if="!firstTerm(a, i) && c > 0">+</span>
          <span v-else-if="c < 0">-</span>
          <span v-if="c == 1 || c == -1">
            y[n{{ i ? '-' + i : '' }}]
          </span>
          <span v-else-if="c > 0">
            {{ c }}y[n{{ i ? '-' + i : '' }}]
          </span>
          <span v-else-if="c < 0">
            {{ Math.abs(c) }}y[n{{ i ? '-' + i : '' }}]
          </span>
        </span>
        <span v-if="allZero(a)">0</span>
        =
        <span v-for="(c, i) in b">
          <span v-if="!firstTerm(b, i) && c > 0">+</span>
          <span v-else-if="c < 0">-</span>
          <span v-if="c == 1 || c == -1">
            x[n{{ i ? '-' + i : '' }}]
          </span>
          <span v-else-if="c > 0">
            {{ c }}x[n{{ i ? '-' + i : '' }}]
          </span>
          <span v-else-if="c < 0">
            {{ Math.abs(c) }}x[n{{ i ? '-' + i : '' }}]
          </span>
        </span>
        <span v-if="allZero(b)">0</span>
      </dd>
      <hr class="divider">
      <dt class="col-sm-12 mb-4"><h5>Time Response Simulation:</h5></dt>
      <dt class="col-sm-2">Plot mode:</dt>
      <dd class="col-sm-10">
        <input id="stem" type="checkbox" v-model="stem" @change="output">
        <label for="stem">stem</label>
      </dd>
      <dt class="col-sm-2">Input preset:</dt>
      <dd class="code col-sm-3">
        <select v-model="preset" @change="presetHandler">
          <option value="d">δ[n]</option>
          <option value="u">u[n]</option>
          <option value="sin">Asin[Ωn+Φ]</option>
          <option value="cos">Acos[Ωn+Φ]</option>
          <option value="exp">exp[n]</option>
          <option value="log">log[n+1]</option>
          <option value="n">n</option>
          <option value="c">custom</option>
        </select>
      </dd>
      <dt class="col-sm-2">Input length: </dt>
      <dd class="code col-sm-5">
        <input type="number" min="1" v-model.number="length" @change="lengthHandler">
      </dd>
      <dt v-if="isTrig" class="col-sm-2">A:</dt>
      <dd v-if="isTrig" class="code col-sm-10">
        <input type="number" v-model.number="A" @change="trigHandler">
      </dd>
      <dt v-if="isTrig" class="col-sm-2">Ω:</dt>
      <dd v-if="isTrig" class="code col-sm-10">
        2π / <input type="number" min="1" v-model.number="T" @change="trigHandler">
      </dd>
      <dt v-if="isTrig" class="col-sm-2">Φ:</dt>
      <dd v-if="isTrig" class="code col-sm-10">
        Ω × <input type="number" v-model.number="tao" @change="trigHandler">
      </dd>
      <dt class="col-sm-2">Input scaler:</dt>
      <dd class="code col-sm-3">
        <input type="number" v-model.number="scaler" @change="output" :disabled="!readonly">
      </dd>
      <dt class="col-sm-3">Raise scaler to the power of n: </dt>
      <dd class="col-sm-4">
        <input type="checkbox" v-model="toPower" @change="output" :disabled="!readonly">
      </dd>
      <dt class="col-sm-2"></dt>
      <dd class="col-sm-3"></dd>
      <dt class="col-sm-3">Reverse: </dt>
      <dd class="col-sm-4">
        <input type="checkbox" v-model="reverse" @change="output">
      </dd>
      <dt class="col-sm-2"></dt>
      <dd class="code col-sm-10"></dd>
      <dt class="col-sm-2">Input:</dt>
      <dd class="code col-sm-10">
        <input style="width: 100%" v-model="x" @change="inputHandler" :readonly="readonly">
      </dd>
      <div id="input"></div>
      <hr class="divider">
      <dt class="col-sm-2">Output:</dt>
      <dd class="code col-sm-10">
        <p class="nowrap" v-text="y.join(',')"></p>
      </dd>
      <div id="output"></div>
      <hr class="divider">
      <dt class="col-sm-10 mb-3"><h5>Frequency Response Analysis:</h5></dt>
      <dd class="col-sm-2">
        <button class="btn btn-success float-right" @click="redrawFR">Replot</button>
      </dd>
      <div id="magnitude"></div>
      <div id="phase"></div>
      <hr class="divider">
      <dt class="col-sm-10 mb-3"><h5>Convolution Reverb Demo:</h5></dt>
      <dd class="col-sm-2"></dd>
      <dt class="col-sm-2">Clap response:</dt>
      <dd class="col-sm-10">
        <div>
          <iframe width="480" height="270" src="https://www.youtube.com/embed/W3hsOFazEz4?rel=0" frameborder="0"></iframe>
        </div>
        <div>
          <img src="asset/wavform-clap.png" alt="clap">
        </div>
        <audio controls>
          <source src="asset/clap.mp3" type="audio/mpeg">
          Your browser does not support the audio tag.
        </audio>
      </dd>
      <dt class="col-sm-2">Sample input:</dt>
      <dd class="col-sm-10">
      <div>
        <img src="asset/wavform-sample.png" alt="sample">
      </div>
        <audio controls>
          <source src="asset/sample.mp3" type="audio/mpeg">
          Your browser does not support the audio tag.
        </audio>
      </dd>
      <dt class="col-sm-2">Result:</dt>
      <dd class="col-sm-10">
        <div>
          <canvas id="waveform3" width="480" height="100"></canvas>
        </div>
        <button class="btn btn-primary" @click="reverb">Reverb</button>
      </dd>
    </dl>
  </div>
  <script src="lib/math.min.js"></script>
  <script src="lib/vue.min.js"></script>
  <script src="main.js"></script>
</body>
</html>
