Initial commit
This commit is contained in:
commit
b7defdf5d8
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
**/.DS_Store
|
||||
**/main.js
|
||||
**/node_modules
|
||||
190
Home/.stylelintrc
Normal file
190
Home/.stylelintrc
Normal file
@ -0,0 +1,190 @@
|
||||
{
|
||||
"extends": "/usr/local/lib/node_modules/stylelint-config-standard",
|
||||
"plugins": [
|
||||
"/usr/local/lib/node_modules/stylelint-order"
|
||||
],
|
||||
"rules": {
|
||||
"at-rule-no-vendor-prefix": true,
|
||||
"media-feature-name-no-vendor-prefix": true,
|
||||
"property-no-vendor-prefix": true,
|
||||
"selector-no-vendor-prefix": true,
|
||||
"value-no-vendor-prefix": true,
|
||||
"order/properties-order": [
|
||||
[
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"font-weight",
|
||||
"font-style",
|
||||
"font-variant",
|
||||
"font-size-adjust",
|
||||
"font-stretch",
|
||||
"font-effect",
|
||||
"font-emphasize",
|
||||
"font-emphasize-position",
|
||||
"font-emphasize-style",
|
||||
"font-smooth",
|
||||
"line-height",
|
||||
"position",
|
||||
"z-index",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
"display",
|
||||
"visibility",
|
||||
"float",
|
||||
"clear",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"clip",
|
||||
"zoom",
|
||||
"align-content",
|
||||
"align-items",
|
||||
"align-self",
|
||||
"flex",
|
||||
"flex-flow",
|
||||
"flex-basis",
|
||||
"flex-direction",
|
||||
"flex-grow",
|
||||
"flex-shrink",
|
||||
"flex-wrap",
|
||||
"justify-content",
|
||||
"order",
|
||||
"box-sizing",
|
||||
"width",
|
||||
"min-width",
|
||||
"max-width",
|
||||
"height",
|
||||
"min-height",
|
||||
"max-height",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
"table-layout",
|
||||
"empty-cells",
|
||||
"caption-side",
|
||||
"border-spacing",
|
||||
"border-collapse",
|
||||
"list-style",
|
||||
"list-style-position",
|
||||
"list-style-type",
|
||||
"list-style-image",
|
||||
"content",
|
||||
"quotes",
|
||||
"counter-reset",
|
||||
"counter-increment",
|
||||
"resize",
|
||||
"cursor",
|
||||
"user-select",
|
||||
"nav-index",
|
||||
"nav-up",
|
||||
"nav-right",
|
||||
"nav-down",
|
||||
"nav-left",
|
||||
"transition",
|
||||
"transition-delay",
|
||||
"transition-timing-function",
|
||||
"transition-duration",
|
||||
"transition-property",
|
||||
"transform",
|
||||
"transform-origin",
|
||||
"animation",
|
||||
"animation-name",
|
||||
"animation-duration",
|
||||
"animation-play-state",
|
||||
"animation-timing-function",
|
||||
"animation-delay",
|
||||
"animation-iteration-count",
|
||||
"animation-direction",
|
||||
"text-align",
|
||||
"text-align-last",
|
||||
"vertical-align",
|
||||
"white-space",
|
||||
"text-decoration",
|
||||
"text-emphasis",
|
||||
"text-emphasis-color",
|
||||
"text-emphasis-style",
|
||||
"text-emphasis-position",
|
||||
"text-indent",
|
||||
"text-justify",
|
||||
"letter-spacing",
|
||||
"word-spacing",
|
||||
"text-outline",
|
||||
"text-transform",
|
||||
"text-wrap",
|
||||
"text-overflow",
|
||||
"text-overflow-ellipsis",
|
||||
"text-overflow-mode",
|
||||
"word-wrap",
|
||||
"word-break",
|
||||
"tab-size",
|
||||
"hyphens",
|
||||
"pointer-events",
|
||||
"opacity",
|
||||
"color",
|
||||
"border",
|
||||
"border-width",
|
||||
"border-style",
|
||||
"border-color",
|
||||
"border-top",
|
||||
"border-top-width",
|
||||
"border-top-style",
|
||||
"border-top-color",
|
||||
"border-right",
|
||||
"border-right-width",
|
||||
"border-right-style",
|
||||
"border-right-color",
|
||||
"border-bottom",
|
||||
"border-bottom-width",
|
||||
"border-bottom-style",
|
||||
"border-bottom-color",
|
||||
"border-left",
|
||||
"border-left-width",
|
||||
"border-left-style",
|
||||
"border-left-color",
|
||||
"border-radius",
|
||||
"border-top-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-image",
|
||||
"border-image-source",
|
||||
"border-image-slice",
|
||||
"border-image-width",
|
||||
"border-image-outset",
|
||||
"border-image-repeat",
|
||||
"outline",
|
||||
"outline-width",
|
||||
"outline-style",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"background",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"background-repeat",
|
||||
"background-attachment",
|
||||
"background-position",
|
||||
"background-position-x",
|
||||
"background-position-y",
|
||||
"background-clip",
|
||||
"background-origin",
|
||||
"background-size",
|
||||
"box-decoration-break",
|
||||
"box-shadow",
|
||||
"text-shadow"
|
||||
],
|
||||
{
|
||||
"unspecified": "bottomAlphabetical"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
3
Home/Compiler/.babelrc
Normal file
3
Home/Compiler/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env"]
|
||||
}
|
||||
1
Home/Compiler/.npmrc
Normal file
1
Home/Compiler/.npmrc
Normal file
@ -0,0 +1 @@
|
||||
package-lock=false
|
||||
190
Home/Compiler/.stylelintrc
Normal file
190
Home/Compiler/.stylelintrc
Normal file
@ -0,0 +1,190 @@
|
||||
{
|
||||
"extends": "/usr/local/lib/node_modules/stylelint-config-standard",
|
||||
"plugins": [
|
||||
"/usr/local/lib/node_modules/stylelint-order"
|
||||
],
|
||||
"rules": {
|
||||
"at-rule-no-vendor-prefix": true,
|
||||
"media-feature-name-no-vendor-prefix": true,
|
||||
"property-no-vendor-prefix": true,
|
||||
"selector-no-vendor-prefix": true,
|
||||
"value-no-vendor-prefix": true,
|
||||
"order/properties-order": [
|
||||
[
|
||||
"font",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"font-weight",
|
||||
"font-style",
|
||||
"font-variant",
|
||||
"font-size-adjust",
|
||||
"font-stretch",
|
||||
"font-effect",
|
||||
"font-emphasize",
|
||||
"font-emphasize-position",
|
||||
"font-emphasize-style",
|
||||
"font-smooth",
|
||||
"line-height",
|
||||
"position",
|
||||
"z-index",
|
||||
"top",
|
||||
"right",
|
||||
"bottom",
|
||||
"left",
|
||||
"display",
|
||||
"visibility",
|
||||
"float",
|
||||
"clear",
|
||||
"overflow",
|
||||
"overflow-x",
|
||||
"overflow-y",
|
||||
"clip",
|
||||
"zoom",
|
||||
"align-content",
|
||||
"align-items",
|
||||
"align-self",
|
||||
"flex",
|
||||
"flex-flow",
|
||||
"flex-basis",
|
||||
"flex-direction",
|
||||
"flex-grow",
|
||||
"flex-shrink",
|
||||
"flex-wrap",
|
||||
"justify-content",
|
||||
"order",
|
||||
"box-sizing",
|
||||
"width",
|
||||
"min-width",
|
||||
"max-width",
|
||||
"height",
|
||||
"min-height",
|
||||
"max-height",
|
||||
"margin",
|
||||
"margin-top",
|
||||
"margin-right",
|
||||
"margin-bottom",
|
||||
"margin-left",
|
||||
"padding",
|
||||
"padding-top",
|
||||
"padding-right",
|
||||
"padding-bottom",
|
||||
"padding-left",
|
||||
"table-layout",
|
||||
"empty-cells",
|
||||
"caption-side",
|
||||
"border-spacing",
|
||||
"border-collapse",
|
||||
"list-style",
|
||||
"list-style-position",
|
||||
"list-style-type",
|
||||
"list-style-image",
|
||||
"content",
|
||||
"quotes",
|
||||
"counter-reset",
|
||||
"counter-increment",
|
||||
"resize",
|
||||
"cursor",
|
||||
"user-select",
|
||||
"nav-index",
|
||||
"nav-up",
|
||||
"nav-right",
|
||||
"nav-down",
|
||||
"nav-left",
|
||||
"transition",
|
||||
"transition-delay",
|
||||
"transition-timing-function",
|
||||
"transition-duration",
|
||||
"transition-property",
|
||||
"transform",
|
||||
"transform-origin",
|
||||
"animation",
|
||||
"animation-name",
|
||||
"animation-duration",
|
||||
"animation-play-state",
|
||||
"animation-timing-function",
|
||||
"animation-delay",
|
||||
"animation-iteration-count",
|
||||
"animation-direction",
|
||||
"text-align",
|
||||
"text-align-last",
|
||||
"vertical-align",
|
||||
"white-space",
|
||||
"text-decoration",
|
||||
"text-emphasis",
|
||||
"text-emphasis-color",
|
||||
"text-emphasis-style",
|
||||
"text-emphasis-position",
|
||||
"text-indent",
|
||||
"text-justify",
|
||||
"letter-spacing",
|
||||
"word-spacing",
|
||||
"text-outline",
|
||||
"text-transform",
|
||||
"text-wrap",
|
||||
"text-overflow",
|
||||
"text-overflow-ellipsis",
|
||||
"text-overflow-mode",
|
||||
"word-wrap",
|
||||
"word-break",
|
||||
"tab-size",
|
||||
"hyphens",
|
||||
"pointer-events",
|
||||
"opacity",
|
||||
"color",
|
||||
"border",
|
||||
"border-width",
|
||||
"border-style",
|
||||
"border-color",
|
||||
"border-top",
|
||||
"border-top-width",
|
||||
"border-top-style",
|
||||
"border-top-color",
|
||||
"border-right",
|
||||
"border-right-width",
|
||||
"border-right-style",
|
||||
"border-right-color",
|
||||
"border-bottom",
|
||||
"border-bottom-width",
|
||||
"border-bottom-style",
|
||||
"border-bottom-color",
|
||||
"border-left",
|
||||
"border-left-width",
|
||||
"border-left-style",
|
||||
"border-left-color",
|
||||
"border-radius",
|
||||
"border-top-left-radius",
|
||||
"border-top-right-radius",
|
||||
"border-bottom-right-radius",
|
||||
"border-bottom-left-radius",
|
||||
"border-image",
|
||||
"border-image-source",
|
||||
"border-image-slice",
|
||||
"border-image-width",
|
||||
"border-image-outset",
|
||||
"border-image-repeat",
|
||||
"outline",
|
||||
"outline-width",
|
||||
"outline-style",
|
||||
"outline-color",
|
||||
"outline-offset",
|
||||
"background",
|
||||
"background-color",
|
||||
"background-image",
|
||||
"background-repeat",
|
||||
"background-attachment",
|
||||
"background-position",
|
||||
"background-position-x",
|
||||
"background-position-y",
|
||||
"background-clip",
|
||||
"background-origin",
|
||||
"background-size",
|
||||
"box-decoration-break",
|
||||
"box-shadow",
|
||||
"text-shadow"
|
||||
],
|
||||
{
|
||||
"unspecified": "bottomAlphabetical"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
24
Home/Compiler/LICENSE
Normal file
24
Home/Compiler/LICENSE
Normal file
@ -0,0 +1,24 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2011-2019 Twitter, Inc.
|
||||
Copyright (c) 2011-2019 The Bootstrap Authors
|
||||
Copyright (C) 2017 by Marijn Haverbeke <marijnh@gmail.com> and others
|
||||
Copyright (c) 2013-present, Yuxi (Evan) You
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
22
Home/Compiler/README.md
Normal file
22
Home/Compiler/README.md
Normal file
@ -0,0 +1,22 @@
|
||||
# Requirements
|
||||
|
||||
- node.js
|
||||
- npm
|
||||
|
||||
# Install Dependencies
|
||||
|
||||
```
|
||||
$ npm install
|
||||
```
|
||||
|
||||
# Generate main.js
|
||||
|
||||
```
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
# Watch for changes
|
||||
|
||||
```
|
||||
$ npm run watch
|
||||
```
|
||||
75
Home/Compiler/index.html
Normal file
75
Home/Compiler/index.html
Normal file
@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Assignment</title>
|
||||
<link rel="stylesheet" href="lib/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="lib/codemirror.min.css">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root" class="container">
|
||||
<h1>Lexical, Syntax & Semantic Analysis</h1>
|
||||
<dl class="row mt-5">
|
||||
<dt class="col-sm-2">Requirements: </dt>
|
||||
<dd class="col-sm-10">
|
||||
<pre>
|
||||
# 保留字或運算子：begin, for, end, if, then, else, while, int
|
||||
# 運算子：+, -, *, /, =
|
||||
# 判斷子：<, >, <=, >=, ==, and, or
|
||||
# 若有詞法或語法錯誤，請印出並說明
|
||||
# 請印出所有變數最後的狀態
|
||||
# 自定義文法，使得以下範例成立：
|
||||
|
||||
begin
|
||||
int x=0, zzz=5;
|
||||
int i, j=1;
|
||||
# 進行迴圈
|
||||
for, i=1, i<=50, j; # j爲i每次遞增的值
|
||||
x=x+1;
|
||||
end
|
||||
if ((x>5) and (j<=8)) then
|
||||
x=1;
|
||||
else
|
||||
for, i=1, i<=50, j+1;
|
||||
x=x+1;
|
||||
end
|
||||
while (i<11)
|
||||
yy=x;
|
||||
i=i+1;
|
||||
end
|
||||
end
|
||||
end
|
||||
</pre>
|
||||
</dd>
|
||||
<dt class="col-sm-2">Source Code: </dt>
|
||||
<dd class="col-sm-10">
|
||||
<div class="custom-file">
|
||||
<input type="file" id="file" class="custom-file-input" @change="fileHandler">
|
||||
<label class="custom-file-label" for="file">{{ file ? file.name : 'Choose file' }}</label>
|
||||
<button type="button" class="btn btn-secondary" @click="fileHandler">Reload</button>
|
||||
</div>
|
||||
<div id="editor" class="editor"></div>
|
||||
</dd>
|
||||
<dt class="col-sm-2"></dt>
|
||||
<dd class="col-sm-10">
|
||||
<button type="button" class="btn btn-info" @click="lexer">Lex</button>
|
||||
<button type="button" class="btn btn-info" @click="parser">Parse</button>
|
||||
<button type="button" class="btn btn-primary" @click="run">Run</button>
|
||||
<button type="button" class="btn btn-secondary" @click="reset">Clear</button>
|
||||
</dd>
|
||||
<hr>
|
||||
<dt class="col-sm-2">Console: </dt>
|
||||
<dd class="col-sm-10">
|
||||
<pre class="error" v-if="error" v-text="error"></pre>
|
||||
<pre v-if="!error && ids.length" v-for="(v, i) in ids">{{ v }}: {{ vars[i] }}</pre>
|
||||
<p v-if="!error && lex.length" v-for="(l, i) in lex">{{ l }}</p>
|
||||
<pre v-if="!error && json" v-text="json"></pre>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<script src="lib/codemirror.min.js"></script>
|
||||
<script src="lib/vue-2.6.0.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
7
Home/Compiler/lib/bootstrap.min.css
vendored
Normal file
7
Home/Compiler/lib/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
8
Home/Compiler/lib/codemirror.min.css
vendored
Normal file
8
Home/Compiler/lib/codemirror.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
8
Home/Compiler/lib/codemirror.min.js
vendored
Normal file
8
Home/Compiler/lib/codemirror.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6
Home/Compiler/lib/vue-2.6.0.min.js
vendored
Normal file
6
Home/Compiler/lib/vue-2.6.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
30
Home/Compiler/main.css
Normal file
30
Home/Compiler/main.css
Normal file
@ -0,0 +1,30 @@
|
||||
h1 {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: "Menlo", "Consolas", monospace;
|
||||
}
|
||||
|
||||
pre.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-file {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.custom-file button {
|
||||
position: relative;
|
||||
top: -38px;
|
||||
left: 255px;
|
||||
}
|
||||
|
||||
.editor {
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
20
Home/Compiler/package.json
Normal file
20
Home/Compiler/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "Compiler",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"watch": "npm run build -- --watch"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.2",
|
||||
"@babel/preset-env": "^7.7.1",
|
||||
"babel-loader": "^8.0.6",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.10"
|
||||
}
|
||||
}
|
||||
6
Home/Compiler/sandbox.html
Normal file
6
Home/Compiler/sandbox.html
Normal file
@ -0,0 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>sandbox</title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
571
Home/Compiler/src/main.dev.js
Normal file
571
Home/Compiler/src/main.dev.js
Normal file
@ -0,0 +1,571 @@
|
||||
/* global Vue FileReader CodeMirror */
|
||||
Vue.config.devtools = true
|
||||
|
||||
window.app = new Vue({
|
||||
el: '#root',
|
||||
data: {
|
||||
ast: {},
|
||||
editor: {},
|
||||
error: '',
|
||||
fileReader: new FileReader(),
|
||||
file: '',
|
||||
ids: [],
|
||||
js: '',
|
||||
json: '',
|
||||
lex: [],
|
||||
vars: [] // the value of ids
|
||||
},
|
||||
mounted () {
|
||||
this.editor = CodeMirror(document.querySelector('#editor'), {
|
||||
lineNumbers: true,
|
||||
tabSize: 2,
|
||||
extraKeys: {
|
||||
Tab: cm => {
|
||||
const spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
|
||||
cm.replaceSelection(spaces)
|
||||
}
|
||||
}
|
||||
})
|
||||
this.fileReader.onload = e => {
|
||||
this.editor.setValue(this.fileReader.result)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fileHandler () {
|
||||
const file = document.querySelector('#file').files[0]
|
||||
if (file) this.file = file
|
||||
this.fileReader.readAsText(this.file)
|
||||
},
|
||||
reset () {
|
||||
this.error = ''
|
||||
this.ids = []
|
||||
this.vars = []
|
||||
this.lex = []
|
||||
this.json = ''
|
||||
},
|
||||
run () {
|
||||
try {
|
||||
this.reset()
|
||||
this.ast = parse(TokenStream(InputStream(this.editor.getValue())))
|
||||
this.js = '(function () { "use strict"; try { ' + makeJS(this.ast)
|
||||
this.ids = [...new Set(this.ids)]
|
||||
this.js +=
|
||||
' parent.app.vars = [' +
|
||||
this.ids.join(', ') +
|
||||
']; } catch (e) { parent.app.error = "Runtime Error: " + e.message; }}());'
|
||||
// recreate an iframe sandbox if it already exist
|
||||
// , then run the transpiled js in it
|
||||
const sb = document.querySelector('#sandbox')
|
||||
if (sb) sb.remove()
|
||||
const iframe = document.createElement('iframe')
|
||||
iframe.id = 'sandbox'
|
||||
iframe.style.display = 'none'
|
||||
iframe.src = 'sandbox.html'
|
||||
document.body.appendChild(iframe)
|
||||
const script = document.createElement('script')
|
||||
script.textContent = this.js
|
||||
document
|
||||
.querySelector('#sandbox')
|
||||
.contentDocument.body.appendChild(script)
|
||||
} catch (e) {
|
||||
this.error = e.message
|
||||
}
|
||||
},
|
||||
lexer () {
|
||||
try {
|
||||
this.reset()
|
||||
const tokens = TokenStream(InputStream(this.editor.getValue()))
|
||||
while (!tokens.eof()) {
|
||||
this.lex.push(tokens.next())
|
||||
}
|
||||
} catch (e) {
|
||||
this.error = e.message
|
||||
}
|
||||
},
|
||||
parser () {
|
||||
try {
|
||||
this.reset()
|
||||
this.ast = parse(TokenStream(InputStream(this.editor.getValue())))
|
||||
this.json = JSON.stringify(this.ast, null, 2)
|
||||
} catch (e) {
|
||||
this.error = e.message
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function InputStream (input) {
|
||||
let pos = 0
|
||||
let line = 1
|
||||
let col = 0
|
||||
return {
|
||||
next: next,
|
||||
peek: peek,
|
||||
eof: eof,
|
||||
croak: croak
|
||||
}
|
||||
function next () {
|
||||
const ch = input.charAt(pos++)
|
||||
if (ch === '\n') {
|
||||
line++
|
||||
col = 0
|
||||
} else col++
|
||||
return ch
|
||||
}
|
||||
function peek () {
|
||||
return input.charAt(pos)
|
||||
}
|
||||
function eof () {
|
||||
return peek() === ''
|
||||
}
|
||||
function croak (msg, type = 'Syntax') {
|
||||
throw new Error(type + ' Error: ' + msg + ' (' + line + ':' + col + ')')
|
||||
}
|
||||
}
|
||||
|
||||
function TokenStream (input) {
|
||||
let current = null
|
||||
const reserved =
|
||||
' abstract arguments boolean break byte case catch char class const continue' +
|
||||
' debugger default delete do double else enum eval export extends false final' +
|
||||
' finally float for function goto if implements import in instanceof int' +
|
||||
' interface let long native new null package private protected public return' +
|
||||
' short static super switch synchronized this throw throws transient true try' +
|
||||
' typeof var void volatile while with yield '
|
||||
const keywords = ' begin for end if then else while int '
|
||||
const ops = ' + - * / = == != > < >= <= and or '
|
||||
return {
|
||||
next: next,
|
||||
peek: peek,
|
||||
eof: eof,
|
||||
croak: input.croak
|
||||
}
|
||||
function isKeyword (x) {
|
||||
return keywords.indexOf(' ' + x + ' ') >= 0
|
||||
}
|
||||
function isReservedWord (x) {
|
||||
return reserved.indexOf(' ' + x + ' ') >= 0
|
||||
}
|
||||
function isDigit (ch) {
|
||||
return /[0-9]/i.test(ch)
|
||||
}
|
||||
function isIdStart (ch) {
|
||||
return /[a-z_]/i.test(ch)
|
||||
}
|
||||
function isId (ch) {
|
||||
return isIdStart(ch) || '_0123456789'.indexOf(ch) >= 0
|
||||
}
|
||||
function isOpChar (ch, prev, prev2) {
|
||||
if (!prev) return '+-*/=!<>'.indexOf(ch) >= 0
|
||||
else if (
|
||||
(prev === '=' && !prev2) ||
|
||||
prev === '!' ||
|
||||
prev === '<' ||
|
||||
prev === '>'
|
||||
) {
|
||||
return ch === '='
|
||||
}
|
||||
return false
|
||||
}
|
||||
function isOp (x) {
|
||||
return ops.indexOf(' ' + x + ' ') >= 0
|
||||
}
|
||||
function isPunc (ch) {
|
||||
return ',;()'.indexOf(ch) >= 0
|
||||
}
|
||||
function isWhitespace (ch) {
|
||||
return ' \t\n'.indexOf(ch) >= 0
|
||||
}
|
||||
function readWhile (predicate) {
|
||||
let str = ''
|
||||
while (
|
||||
!input.eof() &&
|
||||
predicate(input.peek(), str[str.length - 1], str[str.length - 2])
|
||||
) {
|
||||
str += input.next()
|
||||
}
|
||||
return str
|
||||
}
|
||||
function readNumber () {
|
||||
const number = readWhile(isDigit)
|
||||
return { type: 'num', value: parseInt(number, 10) }
|
||||
}
|
||||
function readIdent () {
|
||||
const id = readWhile(isId)
|
||||
if (!isKeyword(id) && isReservedWord(id)) {
|
||||
input.croak('Variable name "' + id + '" is not allowed', 'Lexical')
|
||||
}
|
||||
return {
|
||||
type: isKeyword(id) ? 'kw' : isOp(id) ? 'op' : 'var',
|
||||
value: id
|
||||
}
|
||||
}
|
||||
function readOp () {
|
||||
const id = readWhile(isOpChar)
|
||||
return {
|
||||
type: isOp(id) ? 'op' : input.croak('Unknown symbol: ' + id, 'Lexical'),
|
||||
value: id
|
||||
}
|
||||
}
|
||||
function skipComment () {
|
||||
readWhile(function (ch) {
|
||||
return ch !== '\n'
|
||||
})
|
||||
input.next()
|
||||
}
|
||||
function readNext () {
|
||||
readWhile(isWhitespace)
|
||||
if (input.eof()) return null
|
||||
const ch = input.peek()
|
||||
if (ch === '#') {
|
||||
skipComment()
|
||||
return readNext()
|
||||
}
|
||||
if (isDigit(ch)) return readNumber()
|
||||
if (isPunc(ch)) {
|
||||
return {
|
||||
type: 'punc',
|
||||
value: input.next()
|
||||
}
|
||||
}
|
||||
if (isOpChar(ch)) return readOp()
|
||||
if (isIdStart(ch)) return readIdent()
|
||||
input.croak('Invalid symbol: ' + ch, 'Lexical')
|
||||
}
|
||||
function peek () {
|
||||
return current || (current = readNext())
|
||||
}
|
||||
function next () {
|
||||
const tok = current
|
||||
current = null
|
||||
return tok || readNext()
|
||||
}
|
||||
function eof () {
|
||||
return peek() === null
|
||||
}
|
||||
}
|
||||
|
||||
function parse (input) {
|
||||
const PRECEDENCE = {
|
||||
'=': 1,
|
||||
or: 2,
|
||||
and: 3,
|
||||
'<': 7,
|
||||
'>': 7,
|
||||
'<=': 7,
|
||||
'>=': 7,
|
||||
'==': 7,
|
||||
'!=': 7,
|
||||
'+': 10,
|
||||
'-': 10,
|
||||
'*': 20,
|
||||
'/': 20
|
||||
}
|
||||
return parseToplevel()
|
||||
function parseToplevel () {
|
||||
const prog = []
|
||||
while (!input.eof()) {
|
||||
prog.push(parseExpression())
|
||||
const last = prog.slice(-1)[0]
|
||||
if (requireSemicolon(last)) skipPunc(';')
|
||||
}
|
||||
return { type: 'prog', prog: prog }
|
||||
}
|
||||
function parseBlock () {
|
||||
const body = []
|
||||
while (!input.eof() && !isKw('else') && !isKw('end')) {
|
||||
body.push(parseExpression())
|
||||
const last = body.slice(-1)[0]
|
||||
if (requireSemicolon(last)) skipPunc(';')
|
||||
}
|
||||
return { type: 'block', body: body }
|
||||
}
|
||||
function parseExpression () {
|
||||
if (input.eof()) input.croak('Expecting an expression but reached EOF')
|
||||
return maybeBinary(parseAtom(), 0)
|
||||
}
|
||||
function parseAtom () {
|
||||
if (isPunc('(')) {
|
||||
input.next()
|
||||
const exp = parseExpression()
|
||||
skipPunc(')')
|
||||
return exp
|
||||
}
|
||||
if (isKw('begin')) return parseBegin()
|
||||
if (isKw('int')) return parseInit()
|
||||
if (isKw('for')) return parseFor()
|
||||
if (isKw('while')) return parseWhile()
|
||||
if (isKw('if')) return parseIf()
|
||||
if (isOp('-')) return parseUnary('-')
|
||||
if (isOp('+')) return parseUnary('+')
|
||||
const tok = input.next()
|
||||
if (tok.type === 'var' || tok.type === 'num') {
|
||||
return tok
|
||||
}
|
||||
input.croak('Unexpected token ' + tok.value)
|
||||
}
|
||||
function parseBegin () {
|
||||
skipKw('begin')
|
||||
const block = parseBlock()
|
||||
skipKw('end')
|
||||
return { type: 'begin', body: block.body }
|
||||
}
|
||||
function parseInit () {
|
||||
const vars = []
|
||||
let first = true
|
||||
skipKw('int')
|
||||
while (!input.eof()) {
|
||||
if (isPunc(';')) break
|
||||
if (first) first = false
|
||||
else skipPunc(',')
|
||||
if (isPunc(';')) break // the last "," can be missing
|
||||
const tok = parseExpression()
|
||||
if (tok.type !== 'var' && tok.type !== 'assign') {
|
||||
input.croak('Unexpected token ' + tok.type)
|
||||
}
|
||||
vars.push(tok)
|
||||
}
|
||||
skipPunc(';')
|
||||
return {
|
||||
type: 'init',
|
||||
vars: vars
|
||||
}
|
||||
}
|
||||
function parseFor () {
|
||||
skipKw('for')
|
||||
skipPunc(',')
|
||||
const init = parseExpression()
|
||||
if (init.type !== 'assign') {
|
||||
input.croak('Unexpected token ' + init.type)
|
||||
}
|
||||
skipPunc(',')
|
||||
const cond = parseExpression()
|
||||
isRval(cond)
|
||||
skipPunc(',')
|
||||
const inc = parseExpression()
|
||||
isRval(inc)
|
||||
skipPunc(';')
|
||||
const body = parseBlock()
|
||||
skipKw('end')
|
||||
return {
|
||||
type: 'for',
|
||||
init: init,
|
||||
cond: cond,
|
||||
inc: inc,
|
||||
body: body
|
||||
}
|
||||
}
|
||||
function parseWhile () {
|
||||
skipKw('while')
|
||||
skipPunc('(')
|
||||
const cond = parseExpression()
|
||||
isRval(cond)
|
||||
skipPunc(')')
|
||||
const body = parseBlock()
|
||||
skipKw('end')
|
||||
return { type: 'while', cond: cond, body: body }
|
||||
}
|
||||
function parseIf () {
|
||||
skipKw('if')
|
||||
skipPunc('(')
|
||||
const cond = parseExpression()
|
||||
isRval(cond)
|
||||
skipPunc(')')
|
||||
skipKw('then')
|
||||
const then = parseBlock()
|
||||
const ret = { type: 'if', cond: cond, then: then }
|
||||
if (isKw('else')) {
|
||||
input.next()
|
||||
ret.else = parseBlock()
|
||||
}
|
||||
skipKw('end')
|
||||
return ret
|
||||
}
|
||||
function parseUnary (op) {
|
||||
skipOp(op)
|
||||
const right = parseAtom()
|
||||
isRval(right)
|
||||
return { type: 'unary', operator: op, right: right }
|
||||
}
|
||||
function maybeBinary (left, myPrec) {
|
||||
if (left.type === 'assign' && left.left.type !== 'var') {
|
||||
input.croak('Invalid left-hand side in assignment')
|
||||
}
|
||||
const tok = isOp()
|
||||
if (tok) {
|
||||
const hisPrec = PRECEDENCE[tok.value]
|
||||
if (hisPrec > myPrec) {
|
||||
input.next()
|
||||
const right = maybeBinary(parseAtom(), hisPrec)
|
||||
isRval(left)
|
||||
isRval(right)
|
||||
return maybeBinary(
|
||||
{
|
||||
type: tok.value === '=' ? 'assign' : 'binary',
|
||||
operator: tok.value,
|
||||
left: left,
|
||||
right: right
|
||||
},
|
||||
myPrec
|
||||
)
|
||||
}
|
||||
}
|
||||
return left
|
||||
}
|
||||
function isPunc (ch) {
|
||||
var tok = input.peek()
|
||||
return tok && tok.type === 'punc' && (!ch || tok.value === ch) && tok
|
||||
}
|
||||
function isKw (kw) {
|
||||
var tok = input.peek()
|
||||
return tok && tok.type === 'kw' && (!kw || tok.value === kw) && tok
|
||||
}
|
||||
function isOp (op) {
|
||||
var tok = input.peek()
|
||||
return tok && tok.type === 'op' && (!op || tok.value === op) && tok
|
||||
}
|
||||
function isRval (tok) {
|
||||
if (
|
||||
tok.type !== 'var' &&
|
||||
tok.type !== 'num' &&
|
||||
tok.type !== 'unary' &&
|
||||
tok.type !== 'binary'
|
||||
) {
|
||||
input.croak('Unexpected token ' + tok.type)
|
||||
}
|
||||
}
|
||||
function skipOp (ch) {
|
||||
if (isOp(ch)) input.next()
|
||||
else if (!input.eof()) {
|
||||
input.croak('Expecting ' + ch + ' but got ' + input.peek().value)
|
||||
} else {
|
||||
input.croak('Expecting ' + ch + ' but reached EOF')
|
||||
}
|
||||
}
|
||||
function skipPunc (ch) {
|
||||
if (isPunc(ch)) input.next()
|
||||
else if (!input.eof()) {
|
||||
input.croak('Expecting ' + ch + ' but got ' + input.peek().value)
|
||||
} else {
|
||||
input.croak('Expecting ' + ch + ' but reached EOF')
|
||||
}
|
||||
}
|
||||
function skipKw (kw) {
|
||||
if (isKw(kw)) input.next()
|
||||
else if (!input.eof()) {
|
||||
input.croak('Expecting ' + kw + ' but got ' + input.peek().value)
|
||||
} else {
|
||||
input.croak('Expecting ' + kw + ' but reached EOF')
|
||||
}
|
||||
}
|
||||
function isBlock (tok) {
|
||||
return (
|
||||
tok.type === 'begin' ||
|
||||
tok.type === 'for' ||
|
||||
tok.type === 'while' ||
|
||||
tok.type === 'if'
|
||||
)
|
||||
}
|
||||
function requireSemicolon (tok) {
|
||||
return !isBlock(tok) && tok.type !== 'init'
|
||||
}
|
||||
}
|
||||
|
||||
function makeJS (ast) {
|
||||
return js(ast)
|
||||
function js (ast) {
|
||||
const cases = [
|
||||
'js_num',
|
||||
'js_var',
|
||||
'js_unary',
|
||||
'js_binary',
|
||||
'js_assign',
|
||||
'js_init',
|
||||
'js_begin',
|
||||
'js_block',
|
||||
'js_prog',
|
||||
'js_for',
|
||||
'js_while',
|
||||
'js_if'
|
||||
]
|
||||
const handler = {
|
||||
js_num (ast) {
|
||||
return JSON.stringify(ast.value)
|
||||
},
|
||||
js_var (ast) {
|
||||
window.app.ids.push(ast.value)
|
||||
return ast.value
|
||||
},
|
||||
js_unary (ast) {
|
||||
const op = ast.operator
|
||||
return '( ' + op + js(ast.right) + ' )'
|
||||
},
|
||||
js_binary (ast) {
|
||||
let op = ' ' + ast.operator + ' '
|
||||
if (op === ' and ') op = ' && '
|
||||
if (op === ' or ') op = ' || '
|
||||
if (op === ' / ') {
|
||||
return 'Math.trunc(' + js(ast.left) + op + js(ast.right) + ')'
|
||||
}
|
||||
return '( ' + js(ast.left) + op + js(ast.right) + ' )'
|
||||
},
|
||||
js_assign (ast) {
|
||||
return js(ast.left) + ' = ' + js(ast.right)
|
||||
},
|
||||
js_init (ast) {
|
||||
const vars = []
|
||||
for (let i = 0; i < ast.vars.length; i += 1) {
|
||||
vars.push(js(ast.vars[i]))
|
||||
}
|
||||
return 'var ' + vars.join(', ')
|
||||
},
|
||||
js_prog (ast) {
|
||||
const prog = []
|
||||
for (let i = 0; i < ast.prog.length; i += 1) {
|
||||
prog.push(js(ast.prog[i]))
|
||||
}
|
||||
return prog.join('; ') + ';'
|
||||
},
|
||||
js_block (ast) {
|
||||
const body = []
|
||||
for (let i = 0; i < ast.body.length; i += 1) {
|
||||
body.push(js(ast.body[i]))
|
||||
}
|
||||
return body.join('; ') + ';'
|
||||
},
|
||||
js_begin (ast) {
|
||||
return this.js_block(ast)
|
||||
},
|
||||
js_for (ast) {
|
||||
return (
|
||||
'for (' +
|
||||
js(ast.init) +
|
||||
'; ' +
|
||||
js(ast.cond) +
|
||||
'; ' +
|
||||
js(ast.init.left) +
|
||||
' += ' +
|
||||
js(ast.inc) +
|
||||
') { ' +
|
||||
js(ast.body) +
|
||||
' }'
|
||||
)
|
||||
},
|
||||
js_while (ast) {
|
||||
return 'while (' + js(ast.cond) + ') { ' + js(ast.body) + ' }'
|
||||
},
|
||||
js_if (ast) {
|
||||
let str = 'if (' + js(ast.cond) + ') { ' + js(ast.then) + ' }'
|
||||
if (ast.else) {
|
||||
str += ' else { ' + js(ast.else) + ' }'
|
||||
}
|
||||
return str
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < cases.length; i += 1) {
|
||||
if ('js_' + ast.type === cases[i]) {
|
||||
return handler[cases[i]](ast)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
24
Home/Compiler/test.big5.txt
Normal file
24
Home/Compiler/test.big5.txt
Normal file
@ -0,0 +1,24 @@
|
||||
begin
|
||||
int x=0, zzz = 5;
|
||||
int i, j = 1;
|
||||
|
||||
# 進行迴圈計算
|
||||
for, i=1, i<=50, j; # j是i每次增加的數值
|
||||
x=x+1;
|
||||
end # for
|
||||
|
||||
if ((x>5) and (j<=8)) then
|
||||
x=1;
|
||||
else
|
||||
for, i=1, i<=50, j+1;
|
||||
x=x+1;
|
||||
end
|
||||
|
||||
while (i < 11)
|
||||
yy = x;
|
||||
i = i + 1;
|
||||
end
|
||||
|
||||
end # if
|
||||
|
||||
end
|
||||
24
Home/Compiler/test.utf8.txt
Normal file
24
Home/Compiler/test.utf8.txt
Normal file
@ -0,0 +1,24 @@
|
||||
begin
|
||||
int x=0, zzz = 5;
|
||||
int i, j = 1;
|
||||
|
||||
# 進行迴圈計算
|
||||
for, i=1, i<=50, j; # j是i每次增加的數值
|
||||
x=x+1;
|
||||
end # for
|
||||
|
||||
if ((x>5) and (j<=8)) then
|
||||
x=1;
|
||||
else
|
||||
for, i=1, i<=50, j+1;
|
||||
x=x+1;
|
||||
end
|
||||
|
||||
while (i < 11)
|
||||
yy = x;
|
||||
i = i + 1;
|
||||
end
|
||||
|
||||
end # if
|
||||
|
||||
end
|
||||
13
Home/Compiler/webpack.config.js
Normal file
13
Home/Compiler/webpack.config.js
Normal file
@ -0,0 +1,13 @@
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
mode: 'none',
|
||||
entry: './src/main.dev.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './'),
|
||||
filename: 'main.js'
|
||||
},
|
||||
module: {
|
||||
rules: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }]
|
||||
}
|
||||
}
|
||||
BIN
Home/LTI/asset/clap.mp3
Normal file
BIN
Home/LTI/asset/clap.mp3
Normal file
Binary file not shown.
BIN
Home/LTI/asset/sample.mp3
Normal file
BIN
Home/LTI/asset/sample.mp3
Normal file
Binary file not shown.
BIN
Home/LTI/asset/wavform-clap.png
Normal file
BIN
Home/LTI/asset/wavform-clap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
Home/LTI/asset/wavform-sample.png
Normal file
BIN
Home/LTI/asset/wavform-sample.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
201
Home/LTI/index.html
Normal file
201
Home/LTI/index.html
Normal file
@ -0,0 +1,201 @@
|
||||
<!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>
|
||||
7
Home/LTI/lib/bootstrap.min.css
vendored
Normal file
7
Home/LTI/lib/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
43
Home/LTI/lib/math.min.js
vendored
Normal file
43
Home/LTI/lib/math.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
24
Home/LTI/lib/plotlyjs.min.js
vendored
Normal file
24
Home/LTI/lib/plotlyjs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6
Home/LTI/lib/vue.min.js
vendored
Normal file
6
Home/LTI/lib/vue.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
49
Home/LTI/main.css
Normal file
49
Home/LTI/main.css
Normal file
@ -0,0 +1,49 @@
|
||||
input {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.deg {
|
||||
color: rgb(192, 0, 0);
|
||||
}
|
||||
|
||||
.coef {
|
||||
color: rgb(0, 0, 192);
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Menlo", "Consolas", monospace;
|
||||
}
|
||||
|
||||
.code p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
|
||||
.custom-file {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.custom-file button {
|
||||
position: relative;
|
||||
top: -38px;
|
||||
left: 305px;
|
||||
}
|
||||
|
||||
.maxheight {
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
audio:focus {
|
||||
outline: none;
|
||||
}
|
||||
20
Home/LTI/package.json
Normal file
20
Home/LTI/package.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "LTI",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"watch": "npm run build -- --watch"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.7.2",
|
||||
"@babel/preset-env": "^7.7.1",
|
||||
"babel-loader": "^8.0.6",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.10"
|
||||
}
|
||||
}
|
||||
706
Home/LTI/src/main.dev.js
Normal file
706
Home/LTI/src/main.dev.js
Normal file
@ -0,0 +1,706 @@
|
||||
/* global
|
||||
Audio,
|
||||
AudioContext,
|
||||
FileReader,
|
||||
Plotly,
|
||||
Vue,
|
||||
cancelAnimationFrame,
|
||||
fetch,
|
||||
math,
|
||||
requestAnimationFrame
|
||||
*/
|
||||
Vue.config.devtools = true
|
||||
|
||||
const figureIn = {
|
||||
data: [
|
||||
{
|
||||
line: {
|
||||
dash: 'solid',
|
||||
color: 'rgb(0,113.985,188.955)',
|
||||
width: 1
|
||||
},
|
||||
mode: 'lines+markers',
|
||||
name: '',
|
||||
type: 'scatter',
|
||||
x: [],
|
||||
y: [],
|
||||
xaxis: 'x',
|
||||
yaxis: 'y',
|
||||
marker: {
|
||||
line: {
|
||||
width: 1,
|
||||
color: []
|
||||
},
|
||||
size: 8,
|
||||
symbol: 'circle',
|
||||
color: []
|
||||
},
|
||||
visible: true,
|
||||
showlegend: true
|
||||
}
|
||||
],
|
||||
layout: {
|
||||
title: '',
|
||||
width: 840,
|
||||
xaxis: {
|
||||
side: 'bottom',
|
||||
type: 'linear',
|
||||
range: [],
|
||||
ticks: 'inside',
|
||||
anchor: 'y',
|
||||
domain: [0.13, 0.905],
|
||||
mirror: 'ticks',
|
||||
nticks: 9,
|
||||
ticklen: 6.51,
|
||||
showgrid: false,
|
||||
showline: true,
|
||||
tickfont: {
|
||||
size: 10,
|
||||
color: 'rgb(38.25,38.25,38.25)',
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
tickmode: 'auto',
|
||||
zeroline: false,
|
||||
autorange: true,
|
||||
gridcolor: 'rgb(38.25,38.25,38.25)',
|
||||
gridwidth: 1,
|
||||
linecolor: 'rgb(38.25,38.25,38.25)',
|
||||
linewidth: 1,
|
||||
tickcolor: 'rgb(38.25,38.25,38.25)',
|
||||
tickwidth: 1,
|
||||
titlefont: {
|
||||
size: 11,
|
||||
color: 'rgb(38.25,38.25,38.25)',
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
exponentformat: 'none'
|
||||
},
|
||||
yaxis: {
|
||||
side: 'left',
|
||||
type: 'linear',
|
||||
range: [],
|
||||
ticks: 'inside',
|
||||
anchor: 'x',
|
||||
domain: [0.11, 0.925],
|
||||
mirror: 'ticks',
|
||||
nticks: 12,
|
||||
ticklen: 6.51,
|
||||
showgrid: false,
|
||||
showline: true,
|
||||
tickfont: {
|
||||
size: 10,
|
||||
color: 'rgb(38.25,38.25,38.25)',
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
tickmode: 'auto',
|
||||
zeroline: true,
|
||||
autorange: false,
|
||||
gridcolor: 'rgb(38.25,38.25,38.25)',
|
||||
gridwidth: 1,
|
||||
linecolor: 'rgb(38.25,38.25,38.25)',
|
||||
linewidth: 1,
|
||||
tickcolor: 'rgb(38.25,38.25,38.25)',
|
||||
tickwidth: 1,
|
||||
titlefont: {
|
||||
size: 11,
|
||||
color: 'rgb(38.25,38.25,38.25)',
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
exponentformat: 'none',
|
||||
showticklabels: true
|
||||
},
|
||||
height: 480,
|
||||
margin: {
|
||||
b: 0,
|
||||
l: 0,
|
||||
r: 0,
|
||||
t: 0,
|
||||
pad: 0
|
||||
},
|
||||
autosize: false,
|
||||
hovermode: 'closest',
|
||||
titlefont: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
},
|
||||
showlegend: false,
|
||||
annotations: [
|
||||
{
|
||||
x: 0.5175,
|
||||
y: 0.935,
|
||||
font: {
|
||||
size: 11,
|
||||
color: 'rgb(0,0,0)',
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
text: '',
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
align: 'center',
|
||||
xanchor: 'center',
|
||||
yanchor: 'bottom',
|
||||
borderpad: 3,
|
||||
showarrow: false,
|
||||
textangle: 0,
|
||||
bordercolor: 'rgba(0,0,0,0)',
|
||||
borderwidth: 0.5
|
||||
}
|
||||
],
|
||||
plot_bgcolor: 'rgba(0,0,0,0)',
|
||||
paper_bgcolor: 'rgb(255,255,255)'
|
||||
},
|
||||
frames: []
|
||||
}
|
||||
|
||||
const figureMag = {
|
||||
data: [
|
||||
{
|
||||
line: {
|
||||
dash: 'solid',
|
||||
color: 'rgb(0,113.985,188.955)',
|
||||
width: 1
|
||||
},
|
||||
mode: 'lines',
|
||||
name: '',
|
||||
type: 'scatter',
|
||||
x: [],
|
||||
y: [],
|
||||
xaxis: 'x',
|
||||
yaxis: 'y',
|
||||
marker: {
|
||||
line: {
|
||||
width: 1,
|
||||
color: []
|
||||
},
|
||||
size: 8,
|
||||
symbol: 'circle',
|
||||
color: []
|
||||
},
|
||||
visible: true,
|
||||
showlegend: true
|
||||
}
|
||||
],
|
||||
layout: {
|
||||
title: '',
|
||||
width: 840,
|
||||
xaxis: {
|
||||
title: 'Normalized Frequency (× π rad/sample)',
|
||||
side: 'bottom',
|
||||
type: 'linear',
|
||||
range: [0, 2],
|
||||
ticks: 'inside',
|
||||
anchor: 'y',
|
||||
domain: [0.13, 0.905],
|
||||
mirror: 'ticks',
|
||||
nticks: 9,
|
||||
ticklen: 6.51,
|
||||
showgrid: true,
|
||||
showline: true,
|
||||
tickfont: {
|
||||
size: 10,
|
||||
color: 'rgb(38.25,38.25,38.25)',
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
tickmode: 'array',
|
||||
tickvals: [0, 0.2, 0.4, 0.6, 0.8, 1, 1.2, 1.4, 1.6, 1.8, 2],
|
||||
zeroline: false,
|
||||
autorange: true,
|
||||
gridcolor: 'rgba(38.25,38.25,38.25,0.25)',
|
||||
gridwidth: 1,
|
||||
linecolor: 'rgb(38.25,38.25,38.25)',
|
||||
linewidth: 1,
|
||||
tickcolor: 'rgb(38.25,38.25,38.25)',
|
||||
tickwidth: 1,
|
||||
titlefont: {
|
||||
size: 18,
|
||||
color: 'rgb(38.25,38.25,38.25)',
|
||||
family: 'serif'
|
||||
},
|
||||
exponentformat: 'none'
|
||||
},
|
||||
yaxis: {
|
||||
title: 'Magnitude (dB)',
|
||||
side: 'left',
|
||||
type: 'linear',
|
||||
range: [],
|
||||
ticks: 'inside',
|
||||
anchor: 'x',
|
||||
domain: [0.11, 0.925],
|
||||
mirror: 'ticks',
|
||||
nticks: 12,
|
||||
ticklen: 6.51,
|
||||
showgrid: true,
|
||||
showline: true,
|
||||
tickfont: {
|
||||
size: 10,
|
||||
color: 'rgb(38.25,38.25,38.25)',
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
tickmode: 'auto',
|
||||
zeroline: false,
|
||||
autorange: true,
|
||||
gridcolor: 'rgba(38.25,38.25,38.25,0.25)',
|
||||
gridwidth: 1,
|
||||
linecolor: 'rgb(38.25,38.25,38.25)',
|
||||
linewidth: 1,
|
||||
tickcolor: 'rgb(38.25,38.25,38.25)',
|
||||
tickwidth: 1,
|
||||
titlefont: {
|
||||
size: 18,
|
||||
color: 'rgb(38.25,38.25,38.25)',
|
||||
family: 'serif'
|
||||
},
|
||||
exponentformat: 'none',
|
||||
showticklabels: true
|
||||
},
|
||||
height: 480,
|
||||
margin: {
|
||||
b: 0,
|
||||
l: 0,
|
||||
r: 0,
|
||||
t: 0,
|
||||
pad: 0
|
||||
},
|
||||
autosize: false,
|
||||
hovermode: 'closest',
|
||||
titlefont: {
|
||||
color: 'rgba(38.25,38.25,38.25,1)'
|
||||
},
|
||||
showlegend: false,
|
||||
annotations: [
|
||||
{
|
||||
x: 0.5175,
|
||||
y: 0.935,
|
||||
font: {
|
||||
size: 11,
|
||||
color: 'rgb(0,0,0)',
|
||||
family: 'Arial, sans-serif'
|
||||
},
|
||||
text: '',
|
||||
xref: 'paper',
|
||||
yref: 'paper',
|
||||
align: 'center',
|
||||
xanchor: 'center',
|
||||
yanchor: 'bottom',
|
||||
borderpad: 3,
|
||||
showarrow: false,
|
||||
textangle: 0,
|
||||
bordercolor: 'rgba(0,0,0,0)',
|
||||
borderwidth: 0.5
|
||||
}
|
||||
],
|
||||
plot_bgcolor: 'rgba(0,0,0,0)',
|
||||
paper_bgcolor: 'rgb(255,255,255)'
|
||||
},
|
||||
frames: []
|
||||
}
|
||||
|
||||
const figureOut = JSON.parse(JSON.stringify(figureIn))
|
||||
const figurePhase = JSON.parse(JSON.stringify(figureMag))
|
||||
|
||||
window.app = new Vue({
|
||||
el: '#root',
|
||||
data: {
|
||||
figureIn: figureIn,
|
||||
figureOut: figureOut,
|
||||
figureMag: figureMag,
|
||||
figurePhase: figurePhase,
|
||||
p: 0,
|
||||
q: 0,
|
||||
a: [1],
|
||||
b: [1],
|
||||
w: [],
|
||||
x: [1].concat(Array(19).fill(0)),
|
||||
y: [1].concat(Array(19).fill(0)),
|
||||
z: [],
|
||||
preset: 'd',
|
||||
length: 20,
|
||||
isTrig: false,
|
||||
A: 1,
|
||||
T: 19,
|
||||
tao: 0,
|
||||
scaler: 1,
|
||||
reverse: false,
|
||||
toPower: false,
|
||||
readonly: true,
|
||||
stem: true,
|
||||
systemFile: '',
|
||||
fileReader: new FileReader()
|
||||
},
|
||||
methods: {
|
||||
systemFileHandler () {
|
||||
const file = document.querySelector('#systemFile').files[0]
|
||||
if (file) {
|
||||
this.systemFile = file
|
||||
this.fileReader.readAsText(this.systemFile)
|
||||
}
|
||||
},
|
||||
getDegreeKey (s) {
|
||||
// convert 'a' -> 'p', 'b' -> 'q'
|
||||
// 'p' - 'a' == 15
|
||||
return String.fromCharCode(s.charCodeAt(0) + 15)
|
||||
},
|
||||
system (s) {
|
||||
this.truncate()
|
||||
const old = this[s].slice(0)
|
||||
const len = this[this.getDegreeKey(s)] + 1
|
||||
if (len > old.length) {
|
||||
this[s] = Array(len).fill(1)
|
||||
Array.prototype.splice.apply(this[s], [0, old.length].concat(old))
|
||||
} else {
|
||||
this[s] = old.slice(0, len)
|
||||
}
|
||||
this.output()
|
||||
},
|
||||
input (name, length) {
|
||||
const omega = (2 * Math.PI) / this.T
|
||||
const fn = {
|
||||
d: [1].concat(Array(length - 1).fill(0)),
|
||||
u: Array(length).fill(1),
|
||||
sin: [...Array(length).keys()].map(
|
||||
x => this.A * Math.sin(omega * (x + this.tao))
|
||||
),
|
||||
cos: [...Array(length).keys()].map(
|
||||
x => this.A * Math.cos(omega * (x + this.tao))
|
||||
),
|
||||
exp: [...Array(length).keys()].map(x => Math.exp(x)),
|
||||
log: [...Array(length).keys()].map(x => Math.log(x + 1)),
|
||||
n: [...Array(length).keys()],
|
||||
c: this.x
|
||||
}
|
||||
return fn[name]
|
||||
},
|
||||
output () {
|
||||
const d = this.input('d', this.length)
|
||||
const h = this.filter(this.b, this.a, d)
|
||||
const x = this.input(this.preset, this.length)
|
||||
this.x = x.map((x, n) => this.scale(x, n))
|
||||
if (this.reverse) this.x = this.x.reverse()
|
||||
this.y = this.conv(this.x, h).slice(0, this.length)
|
||||
this.redrawIO(this.x, this.figureIn)
|
||||
this.redrawIO(this.y, this.figureOut)
|
||||
},
|
||||
scale (x, n) {
|
||||
const s = Math.pow(this.scaler, this.toPower ? n : 1)
|
||||
return s * x
|
||||
},
|
||||
presetHandler () {
|
||||
const s = this.preset
|
||||
if (s === 'c') {
|
||||
this.scaler = 1
|
||||
this.toPower = false
|
||||
this.readonly = false
|
||||
} else {
|
||||
this.length = 20
|
||||
this.x = this.input(s, this.length)
|
||||
this.readonly = true
|
||||
if (s === 'sin' || s === 'cos') {
|
||||
this.isTrig = true
|
||||
} else {
|
||||
this.isTrig = false
|
||||
}
|
||||
}
|
||||
this.output()
|
||||
},
|
||||
lengthHandler () {
|
||||
this.truncate()
|
||||
if (this.length > this.x.length) {
|
||||
const s = this.preset
|
||||
if (s === 'c') {
|
||||
const diff = this.length - this.x.length
|
||||
this.x = this.x.concat(Array(diff).fill(0))
|
||||
} else {
|
||||
this.x = this.input(s, this.length)
|
||||
}
|
||||
} else {
|
||||
this.x.length = this.length
|
||||
}
|
||||
this.output()
|
||||
},
|
||||
inputHandler () {
|
||||
this.x = this.x.split(',')
|
||||
this.length = this.x.length
|
||||
this.output()
|
||||
},
|
||||
trigHandler () {
|
||||
this.truncate()
|
||||
this.output()
|
||||
},
|
||||
truncate () {
|
||||
const keys = ['p', 'q', 'length', 'T', 'tao']
|
||||
keys.forEach(key => {
|
||||
this[key] = Math.trunc(this[key])
|
||||
})
|
||||
},
|
||||
// view helper function
|
||||
firstTerm (a, i) {
|
||||
for (let j = 0; j < i; j += 1) {
|
||||
if (a[j] !== 0) return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
// view helper function
|
||||
allZero (a) {
|
||||
for (const i of a) {
|
||||
if (i !== 0) return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
filter (b, a, x) {
|
||||
if (a[0] !== 0) {
|
||||
const n = a.length - 1
|
||||
const m = b.length - 1
|
||||
const y = []
|
||||
for (let i = 0; i < x.length; i += 1) {
|
||||
let lhs = 0
|
||||
let rhs = 0
|
||||
for (let j = 1; j <= n && j <= i; j += 1) {
|
||||
lhs = lhs + a[j] * y[i - j]
|
||||
}
|
||||
for (let j = 0; j <= m && j <= i; j += 1) {
|
||||
rhs = rhs + b[j] * x[i - j]
|
||||
}
|
||||
y[i] = (rhs - lhs) / a[0]
|
||||
}
|
||||
return y
|
||||
}
|
||||
return x
|
||||
},
|
||||
conv (x, h) {
|
||||
let disp = 0
|
||||
const y = []
|
||||
for (let k = 0; k < h.length; k += 1) {
|
||||
y.push(x[0] * h[k])
|
||||
}
|
||||
disp = disp + 1
|
||||
for (let j = 1; j < x.length; j += 1) {
|
||||
for (let k = 0; k < h.length; k += 1) {
|
||||
if (disp + k !== y.length) {
|
||||
y[disp + k] = y[disp + k] + x[j] * h[k]
|
||||
} else {
|
||||
y.push(x[j] * h[k])
|
||||
}
|
||||
}
|
||||
disp = disp + 1
|
||||
}
|
||||
return y
|
||||
},
|
||||
redrawIO (data, figure) {
|
||||
const x = figure.data[0].x
|
||||
const y = figure.data[0].y
|
||||
const lineColor = figure.data[0].marker.line.color
|
||||
const color = figure.data[0].marker.color
|
||||
x.length = 0
|
||||
y.length = 0
|
||||
lineColor.length = 0
|
||||
color.length = 0
|
||||
for (let i = 0; i < this.length; i += 1) {
|
||||
if (this.stem) {
|
||||
figure.data[0].mode = 'lines+markers'
|
||||
x.push(i, i, null)
|
||||
y.push(0, data[i], null)
|
||||
lineColor.push(
|
||||
'rgba(0,0,0,0)',
|
||||
'rgb(0,113.985,188.955)',
|
||||
'rgba(0,0,0,0)'
|
||||
)
|
||||
color.push('rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)')
|
||||
} else {
|
||||
figure.data[0].mode = 'lines'
|
||||
x.push(i)
|
||||
y.push(data[i])
|
||||
}
|
||||
}
|
||||
Plotly.redraw(document.getElementById('input'))
|
||||
Plotly.redraw(document.getElementById('output'))
|
||||
},
|
||||
freqz (ob, oa, oz) {
|
||||
let b = ob.slice()
|
||||
let a = oa.slice()
|
||||
if (b.length > a.length) {
|
||||
a = a.slice().concat(Array(b.length - a.length).fill(0))
|
||||
} else if (b.length < a.length) {
|
||||
b = b.slice().concat(Array(a.length - b.length).fill(0))
|
||||
}
|
||||
const H = []
|
||||
for (let i = 0; i < oz.length; i += 1) {
|
||||
const z = math.conj(oz[i])
|
||||
let B = math.complex(0, 0)
|
||||
let A = math.complex(0, 0)
|
||||
for (let i = 0; i < b.length; i += 1) {
|
||||
B = math.add(B, math.multiply(b[i], math.pow(z, i)))
|
||||
A = math.add(A, math.multiply(a[i], math.pow(z, i)))
|
||||
}
|
||||
H.push(math.round(math.divide(B, A), 5))
|
||||
}
|
||||
return H
|
||||
},
|
||||
unwrap (op) {
|
||||
const p = op.slice()
|
||||
const dp = []
|
||||
const dps = []
|
||||
const dpcorr = []
|
||||
const cumsum = []
|
||||
const cutoff = Math.PI
|
||||
for (let i = 0; i < p.length - 1; i += 1) {
|
||||
dp[i] = p[i + 1] - p[i]
|
||||
}
|
||||
for (let i = 0; i < p.length - 1; i += 1) {
|
||||
dps[i] =
|
||||
dp[i] +
|
||||
Math.PI -
|
||||
Math.floor((dp[i] + Math.PI) / (2 * Math.PI)) * (2 * Math.PI) -
|
||||
Math.PI
|
||||
}
|
||||
for (let i = 0; i < p.length - 1; i += 1) {
|
||||
if (dps[i] === -Math.PI && dp[i] > 0) {
|
||||
dps[i] = Math.PI
|
||||
}
|
||||
}
|
||||
for (let i = 0; i < p.length - 1; i += 1) {
|
||||
dpcorr[i] = dps[i] - dp[i]
|
||||
}
|
||||
for (let i = 0; i < p.length - 1; i += 1) {
|
||||
if (Math.abs(dp[i]) < cutoff) {
|
||||
dpcorr[i] = 0
|
||||
}
|
||||
}
|
||||
cumsum[0] = dpcorr[0]
|
||||
for (let i = 1; i < p.length - 1; i += 1) {
|
||||
cumsum[i] = cumsum[i - 1] + dpcorr[i]
|
||||
}
|
||||
for (let i = 1; i < p.length; i += 1) {
|
||||
p[i] += cumsum[i - 1]
|
||||
}
|
||||
return p
|
||||
},
|
||||
redrawFR () {
|
||||
const mags1 = []
|
||||
const mags2 = []
|
||||
const phases1 = []
|
||||
const phases2 = []
|
||||
const H = this.freqz(this.b, this.a, this.z)
|
||||
for (let i = 0; i < H.length; i += 1) {
|
||||
const mag = Math.sqrt(Math.pow(H[i].re, 2) + Math.pow(H[i].im, 2))
|
||||
const phase = atan2(H[i].im, H[i].re)
|
||||
if (i < 512) {
|
||||
mags1.push(20 * Math.log10(mag))
|
||||
phases1.push(phase)
|
||||
} else {
|
||||
mags2.push(20 * Math.log10(mag))
|
||||
phases2.push(phase)
|
||||
}
|
||||
}
|
||||
const unwrap1 = this.unwrap(phases1).map(x => (x * 180) / Math.PI)
|
||||
const unwrap2 = this.unwrap(phases2).map(x => (x * 180) / Math.PI)
|
||||
mags1[511] = null
|
||||
unwrap1[511] = null
|
||||
mags2[0] = null
|
||||
unwrap2[0] = null
|
||||
figureMag.data[0].y = mags1.concat(mags2)
|
||||
figurePhase.data[0].y = unwrap1.concat(unwrap2)
|
||||
Plotly.redraw(document.getElementById('magnitude'))
|
||||
Plotly.redraw(document.getElementById('phase'))
|
||||
function atan2 (im, re) {
|
||||
if (im === 0 && re === 0) {
|
||||
return 0
|
||||
}
|
||||
return Math.atan2(im, re)
|
||||
}
|
||||
},
|
||||
drawBuffer (width, height, context, buffer) {
|
||||
context.clearRect(0, 0, width, height)
|
||||
const data = buffer
|
||||
const step = Math.ceil(data.length / width)
|
||||
const amp = height / 2
|
||||
for (let i = 0; i < width; i++) {
|
||||
let min = 1.0
|
||||
let max = -1.0
|
||||
for (let j = 0; j < step; j++) {
|
||||
const datum = data[i * step + j]
|
||||
if (datum < min) min = datum
|
||||
if (datum > max) max = datum
|
||||
}
|
||||
context.fillStyle = '#0072BD'
|
||||
context.fillRect(i, (1 + min) * amp, 1, Math.max(1, (max - min) * amp))
|
||||
}
|
||||
},
|
||||
reverb () {
|
||||
const canvas = document.getElementById('waveform3')
|
||||
const audioSource = new Audio('asset/sample.mp3')
|
||||
const audioCtx = new AudioContext()
|
||||
const audioInput = audioCtx.createMediaElementSource(audioSource)
|
||||
const convolver = audioCtx.createConvolver()
|
||||
const gain = audioCtx.createGain()
|
||||
const analyser = audioCtx.createAnalyser()
|
||||
const waveform = new Float32Array(analyser.frequencyBinCount)
|
||||
let request
|
||||
let chunks = new Float32Array(0)
|
||||
gain.gain.value = 3.5
|
||||
audioSource.onended = e => {
|
||||
cancelAnimationFrame(request)
|
||||
audioCtx.close()
|
||||
this.drawBuffer(
|
||||
canvas.width,
|
||||
canvas.height,
|
||||
canvas.getContext('2d'),
|
||||
chunks
|
||||
)
|
||||
}
|
||||
fetch('asset/clap.mp3')
|
||||
.then(response => response.arrayBuffer())
|
||||
.then(arrayBuffer => audioCtx.decodeAudioData(arrayBuffer))
|
||||
.then(buffer => {
|
||||
convolver.buffer = buffer
|
||||
audioInput
|
||||
.connect(convolver)
|
||||
.connect(gain)
|
||||
.connect(analyser)
|
||||
.connect(audioCtx.destination)
|
||||
audioSource.play()
|
||||
updateWaveform()
|
||||
})
|
||||
function updateWaveform () {
|
||||
request = requestAnimationFrame(updateWaveform)
|
||||
analyser.getFloatTimeDomainData(waveform)
|
||||
chunks = Float32Concat(chunks, waveform)
|
||||
}
|
||||
function Float32Concat (first, second) {
|
||||
const firstLength = first.length
|
||||
const result = new Float32Array(firstLength + second.length)
|
||||
result.set(first)
|
||||
result.set(second, firstLength)
|
||||
return result
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const input = document.getElementById('input')
|
||||
const output = document.getElementById('output')
|
||||
const magnitude = document.getElementById('magnitude')
|
||||
const phase = document.getElementById('phase')
|
||||
|
||||
for (let i = 0; i <= 1023; i += 1) {
|
||||
this.w.push((i * (2 * Math.PI)) / 1023)
|
||||
this.z.push(math.exp(math.complex(0, this.w[i])))
|
||||
}
|
||||
|
||||
figurePhase.layout.yaxis.title = 'Phase (degrees)'
|
||||
figureMag.data[0].x = this.w.map(x => x / Math.PI)
|
||||
figurePhase.data[0].x = this.w.map(x => x / Math.PI)
|
||||
Plotly.plot(input, { data: figureIn.data, layout: figureIn.layout })
|
||||
Plotly.plot(output, { data: figureOut.data, layout: figureOut.layout })
|
||||
Plotly.plot(magnitude, { data: figureMag.data, layout: figureMag.layout })
|
||||
Plotly.plot(phase, { data: figurePhase.data, layout: figurePhase.layout })
|
||||
this.redrawIO(this.x, this.figureIn)
|
||||
this.redrawIO(this.y, this.figureOut)
|
||||
this.redrawFR()
|
||||
this.fileReader.onload = e => {
|
||||
const json = JSON.parse(this.fileReader.result)
|
||||
this.a = json.a
|
||||
this.b = json.b
|
||||
this.p = this.a.length - 1
|
||||
this.q = this.b.length - 1
|
||||
this.output()
|
||||
}
|
||||
}
|
||||
})
|
||||
13
Home/LTI/webpack.config.js
Normal file
13
Home/LTI/webpack.config.js
Normal file
@ -0,0 +1,13 @@
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
mode: 'none',
|
||||
entry: './src/main.dev.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './'),
|
||||
filename: 'main.js'
|
||||
},
|
||||
module: {
|
||||
rules: [{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }]
|
||||
}
|
||||
}
|
||||
BIN
Home/image/bg.jpg
Normal file
BIN
Home/image/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
47
Home/index.html
Normal file
47
Home/index.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>S10659043</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Times New Roman", serif;
|
||||
font-size: 14pt;
|
||||
background: url(image/bg.jpg) no-repeat center center fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
height: 20rem;
|
||||
margin: 5rem auto;
|
||||
padding: 0.1rem 2rem;
|
||||
border-radius: 1rem;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
ul a {
|
||||
color: rgb(55, 55, 55);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>My projects</h1>
|
||||
<ul>
|
||||
<li>Signals & Systems</li>
|
||||
<ol>
|
||||
<li><a href="LTI">LTI system: Time & Freqency Response Analysis</a></li>
|
||||
<li><a href="LTI/ppt">Presentation</a></li>
|
||||
</ol>
|
||||
<li>Concepts of Programming Languages</li>
|
||||
<ol>
|
||||
<li><a href="Compiler">Lexical, Syntax & Semantic Analysis</a></li>
|
||||
</ol>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
2
Home/robots.txt
Normal file
2
Home/robots.txt
Normal file
@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow: /
|
||||
Loading…
Reference in New Issue
Block a user