Skip to content

Commit 072cc3d

Browse files
bginsbgins
committed
Add UI
1 parent 75931d9 commit 072cc3d

9 files changed

+1047
-33
lines changed

‎package-lock.json

+933-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@
1414
"devDependencies": {
1515
"@sveltejs/adapter-static": "next",
1616
"@sveltejs/kit": "next",
17+
"@tailwindcss/typography": "^0.5.2",
1718
"@typescript-eslint/eslint-plugin": "^4.33.0",
1819
"@typescript-eslint/parser": "^4.33.0",
1920
"ava": "^3.15.0",
21+
"daisyui": "^2.0.2",
2022
"eslint": "^7.32.0",
2123
"eslint-config-prettier": "^8.1.0",
2224
"eslint-plugin-svelte3": "^3.2.1",
@@ -29,6 +31,7 @@
2931
"svelte-check": "^2.0.0",
3032
"svelte-preprocess": "^4.0.0",
3133
"svelte-seo": "^1.2.1",
34+
"tailwindcss": "^3.0.22",
3235
"ts-node": "^10.4.0",
3336
"tsconfig-paths": "^3.12.0",
3437
"tslib": "^2.0.0",

‎postcss.config.cjs

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
},
5+
};

‎src/app.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="halloween">
33

44
<head>
55
<meta charset="utf-8" />

‎src/global.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/routes/__layout.svelte

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
import Header from '$components/Header.svelte'
33
import Footer from '$components/Footer.svelte'
44
5+
import '../global.css'
6+
57
</script>
68

79

‎src/routes/index.svelte

+75-23
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,104 @@
44
import { AdditiveSynth, setHarmonics, setSpectra } from '$lib/audio/audio'
55
import { Keyboard } from '$lib/controllers/keyboard'
66
import { EventEmitter } from '$lib/common/event-emitter'
7-
7+
import partials from '$lib/audio/partials.json'
8+
89
const noteEmitter = new EventEmitter()
910
const controller = new Keyboard()
1011
const synth = new AdditiveSynth()
1112
let isMobileDevice: boolean = false
13+
let selectedPartials = 'harmonics'
1214
1315
controller.enable(noteEmitter)
1416
1517
onMount(async () => {
1618
await synth.initialize(noteEmitter)
1719
})
1820
19-
2021
const setDevice = () => {
2122
if (window.innerWidth <= 768) {
22-
isMobileDevice = true
23+
isMobileDevice = true
2324
} else {
2425
isMobileDevice = false
2526
}
2627
}
2728
29+
$ : {
30+
if (selectedPartials === 'harmonics') {
31+
setHarmonics()
32+
} else {
33+
setSpectra()
34+
}
35+
}
36+
2837
setDevice()
2938
</script>
3039

3140
<svelte:window on:resize={setDevice} />
3241

33-
<h2>Quick demo of Harmonics vs 12-ED2 Spectra</h2>
34-
<button on:click={synth.start}>Start</button>
35-
<button on:click={setHarmonics}>Harmonics</button>
36-
<button on:click={setSpectra}>Spectra</button>
37-
<div class="row">
38-
Harmonic multipliers
39-
<code>[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]</code>
40-
</div>
41-
<div class="row">
42-
Spectral multipliers
43-
<code>[1, 2, 2.997, 4, 5.04, 5.993, 7.127, 8, 8.98, 10.079, 11.314, 11.986, 12.699, 14.254, 15.102, 16]</code>
44-
</div>
45-
<div class="row">
46-
Amplitudes
47-
<code>[0.1, 0.09, 0.08, 0.07, 0.06, 0.05, 0.04, 0.03,0.02, 0.01, 0.009, 0.008, 0.007, 0.006, 0.005, 0.004]</code>
42+
<div class="grid grid-flow-row auto-rows-max justify-center bg-neutral h-screen p-10 text-base-content">
43+
<div class="card w-full bg-base-100 shadow-xl">
44+
<div class="card-body">
45+
<h1 class="text-4xl pb-7">Coincident Spectra</h1>
46+
<div class="grid grid-flow-row auto-rows-max gap-7">
47+
<div class="grid grid-flow-col auto-cols-max gap-4">
48+
<button class="btn btn-primary" on:click={synth.start}>
49+
Start Audio
50+
</button>
51+
<select class="select w-full max-w-xs select-primary">
52+
<option disabled selected>Tuning System</option>
53+
<option value="12-ed2">12-ED2</option>
54+
<option value="19-ed2">19-ED2</option>
55+
</select>
56+
<select class="select w-full max-w-xs select-primary" bind:value={selectedPartials}>
57+
<option value="harmonics">Harmonics</option>
58+
<option value="spectra">Spectra</option>
59+
</select>
60+
<select class="select w-full max-w-xs select-primary">
61+
<option disabled selected>Controller</option>
62+
<option>Keyboard</option>
63+
<option>MIDI</option>
64+
</select>
65+
<select class="select w-full max-w-xs select-primary">
66+
<option disabled selected>MIDI Device</option>
67+
<option>Arturia Keystep</option>
68+
<option>Roland Keyboard</option>
69+
</select>
70+
</div>
71+
<div class="overflow-x-auto">
72+
<table class="table table-compact w-full">
73+
<thead>
74+
<tr>
75+
<th>Partial</th>
76+
<th>Harmonics</th>
77+
<th>Spectra</th>
78+
<th>Gain</th>
79+
</tr>
80+
</thead>
81+
<tbody>
82+
{#each partials.harmonics as harmonic, index}
83+
<tr>
84+
<th>1</th>
85+
<td>{harmonic}</td>
86+
<td>{partials.spectra[index]}</td>
87+
<td>
88+
<input
89+
type="range"
90+
min="0"
91+
max="100"
92+
value="40"
93+
class="range range-xs"
94+
/>
95+
</td>
96+
</tr>
97+
{/each}
98+
</tbody>
99+
</table>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
48104
</div>
49105

50106
<style>
51-
.row {
52-
padding-top: 1rem
53-
}
54-
55-
</style>
107+
</style>

‎svelte.config.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ import adapter from '@sveltejs/adapter-static'
66
const config = {
77
// Consult https://github.com/sveltejs/svelte-preprocess
88
// for more information about preprocessors
9-
preprocess: preprocess(),
9+
preprocess: preprocess({
10+
defaults: {
11+
style: "postcss",
12+
},
13+
postcss: true,
14+
}),
1015
kit: {
1116
adapter: adapter({
1217
pages: 'build',

‎tailwind.config.cjs

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
mode: "jit",
3+
purge: {
4+
content: ["./src/**/*.{html,js,svelte,ts}"],
5+
options: {
6+
safelist: [/data-theme$/],
7+
},
8+
},
9+
plugins: [require("@tailwindcss/typography"),require("daisyui")],
10+
daisyui: {
11+
styled: true,
12+
themes: ["halloween"],
13+
base: true,
14+
utils: true,
15+
logs: true,
16+
rtl: false,
17+
darkTheme: "dark",
18+
},
19+
};

0 commit comments

Comments
 (0)