202 lines
7.6 KiB
HTML
202 lines
7.6 KiB
HTML
|
<!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> </sub> =</label>
|
|||
|
|
<input type="number" min="0" v-model.number="p" @change="system('a')">
|
|||
|
|
</dd>
|
|||
|
|
<dd class="code col-sm-5">
|
|||
|
|
<label>q<sub> </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>
|