mirror of
https://github.com/mschuepbach/matrix-kernel-filter-calculator.git
synced 2026-01-15 21:12:14 +01:00
initial commit
This commit is contained in:
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
/node_modules/
|
||||
/public/build/
|
||||
|
||||
.DS_Store
|
||||
36
README.md
Normal file
36
README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# Matrix Kernel Filter Calculator
|
||||
|
||||
Live app: **[Matrix Kernel Filter Calculator](https://mschuepbach.github.io/matrix-kernel-filter-calculator)**
|
||||
|
||||
---
|
||||
|
||||
Made with [Svelte](https://svelte.dev).
|
||||
|
||||
|
||||
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
|
||||
|
||||
|
||||
## Get started
|
||||
|
||||
Install the dependencies...
|
||||
|
||||
```bash
|
||||
cd matrix-kernel-filter-calculator
|
||||
npm install
|
||||
```
|
||||
|
||||
...then start [Rollup](https://rollupjs.org):
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Navigate to [localhost:8080](http://localhost:8080).
|
||||
|
||||
## Building and running in production mode
|
||||
|
||||
To create an optimised version of the app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
1853
package-lock.json
generated
Normal file
1853
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
package.json
Normal file
24
package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "matrix-kernel-filter-calculator",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public --no-clear",
|
||||
"deploy": "gh-pages -d public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"svelte": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"sirv-cli": "^2.0.0"
|
||||
}
|
||||
}
|
||||
12
public/favicon.svg
Normal file
12
public/favicon.svg
Normal file
@@ -0,0 +1,12 @@
|
||||
<svg width="64" height="64" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="64" height="64" fill="white" />
|
||||
<rect x="12" y="12" width="8" height="8" fill="black" />
|
||||
<rect x="28" y="12" width="8" height="8" fill="black" />
|
||||
<rect x="44" y="12" width="8" height="8" fill="black" />
|
||||
<rect x="12" y="28" width="8" height="8" fill="black" />
|
||||
<rect x="28" y="28" width="8" height="8" fill="black" />
|
||||
<rect x="44" y="28" width="8" height="8" fill="black" />
|
||||
<rect x="12" y="44" width="8" height="8" fill="black" />
|
||||
<rect x="28" y="44" width="8" height="8" fill="black" />
|
||||
<rect x="44" y="44" width="8" height="8" fill="black" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 668 B |
75
public/global.css
Normal file
75
public/global.css
Normal file
@@ -0,0 +1,75 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
-webkit-padding: 0.4em 0;
|
||||
padding: 0.4em;
|
||||
margin: 0.5em;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
button:not(:disabled):active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
17
public/index.html
Normal file
17
public/index.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
|
||||
<title>Kernel Filter Calculator</title>
|
||||
|
||||
<link rel="icon" type="image/svg" href="./favicon.svg" />
|
||||
<link rel="stylesheet" href="./global.css" />
|
||||
<link rel="stylesheet" href="./build/bundle.css" />
|
||||
|
||||
<script defer src="./build/bundle.js"></script>
|
||||
</head>
|
||||
|
||||
<body></body>
|
||||
</html>
|
||||
76
rollup.config.js
Normal file
76
rollup.config.js
Normal file
@@ -0,0 +1,76 @@
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import livereload from 'rollup-plugin-livereload';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import css from 'rollup-plugin-css-only';
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
function serve() {
|
||||
let server;
|
||||
|
||||
function toExit() {
|
||||
if (server) server.kill(0);
|
||||
}
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (server) return;
|
||||
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
||||
stdio: ['ignore', 'inherit', 'inherit'],
|
||||
shell: true
|
||||
});
|
||||
|
||||
process.on('SIGTERM', toExit);
|
||||
process.on('exit', toExit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
input: 'src/main.js',
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: 'public/build/bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
compilerOptions: {
|
||||
// enable run-time checks when not in production
|
||||
dev: !production
|
||||
}
|
||||
}),
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file - better for performance
|
||||
css({ output: 'bundle.css' }),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration -
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ['svelte']
|
||||
}),
|
||||
commonjs(),
|
||||
|
||||
// In dev mode, call `npm run start` once
|
||||
// the bundle has been generated
|
||||
!production && serve(),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
};
|
||||
191
src/App.svelte
Normal file
191
src/App.svelte
Normal file
@@ -0,0 +1,191 @@
|
||||
<script>
|
||||
let matrixWidth = 4;
|
||||
let matrixHeight = 4;
|
||||
let kernelWidth = 3;
|
||||
let kernelHeight = 3;
|
||||
let padding = 0;
|
||||
|
||||
$: matrix = Array(matrixHeight)
|
||||
.fill(1)
|
||||
.map(() => Array(matrixWidth).fill(1));
|
||||
$: kernel = Array(kernelHeight)
|
||||
.fill(1)
|
||||
.map(() => Array(kernelWidth).fill(1));
|
||||
|
||||
$: result = conv_2d(kernel, matrix, padding);
|
||||
|
||||
function uniform_array(len, value) {
|
||||
let arr = new Array(len);
|
||||
for (let i = 0; i < len; ++i)
|
||||
arr[i] = Array.isArray(value) ? [...value] : value;
|
||||
return arr;
|
||||
}
|
||||
|
||||
function conv_2d(kernel, array, padding = 0) {
|
||||
// source: https://stackoverflow.com/questions/64669531/2d-convolution-for-javascript-arrays
|
||||
let result = uniform_array(array.length, uniform_array(array[0].length, 0));
|
||||
let kRows = kernel.length;
|
||||
let kCols = kernel[0].length;
|
||||
let rows = array.length;
|
||||
let cols = array[0].length;
|
||||
// find center position of kernel (half of kernel size)
|
||||
let kCenterX = Math.floor(kCols / 2);
|
||||
let kCenterY = Math.floor(kRows / 2);
|
||||
|
||||
for (let i = 0; i < rows; ++i) {
|
||||
for (let j = 0; j < cols; ++j) {
|
||||
for (let m = 0; m < kRows; ++m) {
|
||||
for (let n = 0; n < kCols; ++n) {
|
||||
// index of input signal, used for checking boundary
|
||||
let ii = i + (m - kCenterY);
|
||||
let jj = j + (n - kCenterX);
|
||||
// ignore input samples which are out of bound
|
||||
if (ii >= 0 && ii < rows && jj >= 0 && jj < cols) {
|
||||
result[i][j] += array[ii][jj] * kernel[m][n];
|
||||
} else {
|
||||
result[i][j] += padding * kernel[m][n];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="container">
|
||||
<h5 style="grid-area: matrix-title">Matrix</h5>
|
||||
<h5 style="grid-area: kernel-title">Kernel</h5>
|
||||
<h5 style="grid-area: result-title">Result</h5>
|
||||
<div style="grid-area: matrix-size">
|
||||
<input
|
||||
type="number"
|
||||
bind:value={matrixWidth}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
/>
|
||||
<span>x</span>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={matrixHeight}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
/>
|
||||
</div>
|
||||
<div style="grid-area: kernel-size">
|
||||
<input
|
||||
type="number"
|
||||
bind:value={kernelWidth}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
/>
|
||||
<span>x</span>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={kernelHeight}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
/>
|
||||
</div>
|
||||
<div style="grid-area: result-size">{result[0].length}x{result.length}</div>
|
||||
<div style="grid-area: matrix">
|
||||
{#each matrix as row, i}
|
||||
<div
|
||||
style="display: flex; flex-direction: row; justify-content: center;"
|
||||
>
|
||||
{#each row as _, j}
|
||||
<input
|
||||
type="number"
|
||||
bind:value={matrix[i][j]}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div style="grid-area: kernel">
|
||||
{#each kernel as row, i}
|
||||
<div
|
||||
style="display: flex; flex-direction: row; justify-content: center;"
|
||||
>
|
||||
{#each row as _, j}
|
||||
<input
|
||||
type="number"
|
||||
bind:value={kernel[i][j]}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div style="grid-area: result">
|
||||
{#each result as row}
|
||||
<div
|
||||
style="display: flex; flex-direction: row; justify-content: center;"
|
||||
>
|
||||
{#each row as field}
|
||||
<input
|
||||
type="number"
|
||||
value={field}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
readonly="true"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div style="grid-area: padding">
|
||||
<div>Padding</div>
|
||||
<div>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={padding}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"matrix-title kernel-title result-title"
|
||||
"matrix-size kernel-size result-size"
|
||||
"matrix kernel result"
|
||||
"padding padding padding";
|
||||
grid-gap: .5em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.container {
|
||||
grid-template-areas:
|
||||
"matrix-title"
|
||||
"matrix-size"
|
||||
"matrix"
|
||||
"kernel-title"
|
||||
"kernel-size"
|
||||
"kernel"
|
||||
"result-title"
|
||||
"result-size"
|
||||
"result"
|
||||
"padding";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
7
src/main.js
Normal file
7
src/main.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
});
|
||||
|
||||
export default app;
|
||||
Reference in New Issue
Block a user