diff --git a/README.md b/README.md index c5e81b6..7e09d81 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A piano learning webapp for midi devices ## Roadmap ### v0.1 -- [ ] decent ui +- [x] decent ui - [x] import midi - [x] play midi diff --git a/src/app.html b/src/app.html index 50174b9..f596764 100644 --- a/src/app.html +++ b/src/app.html @@ -19,6 +19,8 @@ body { display: flex; justify-content: center; + + background-color: #323437; } diff --git a/src/lib/components/noteView.css b/src/lib/components/noteView.css index 49dbe55..e05bbff 100644 --- a/src/lib/components/noteView.css +++ b/src/lib/components/noteView.css @@ -3,7 +3,6 @@ width: 100%; height: fit-content; flex: 1; - background-color: yellow; position: relative; } @@ -11,18 +10,25 @@ width: 100%; height: 100%; display: block; + + /*background-color: black;*/ +} + +#note-shadow { + background: linear-gradient(0deg, rgba(0,0,0,0) 0%, var(--background) 100%); + width: 100%; + height: 10%; + position: absolute; } #piano { display: block; + + border-radius: 30px; } .keys { - border: 1px dashed black; - box-sizing: border-box; - height: 200px; - background-color: blue; } .notes-wrapper { diff --git a/src/lib/components/noteView.svelte b/src/lib/components/noteView.svelte index 18ef97a..4a6d9af 100644 --- a/src/lib/components/noteView.svelte +++ b/src/lib/components/noteView.svelte @@ -5,7 +5,7 @@ import './noteView.css'; import { readMidiFile } from "$lib/notes"; import { Piano } from "$lib/piano"; - import { PianoRoll } from "$lib/pianoRollCanvas"; + import { PianoRoll } from "$lib/pianoRoll"; import { PianoKeys } from "$lib/pianoKeys"; const piano = new Piano(5); @@ -58,16 +58,21 @@ } }; + const updateCanvasSize = (c: HTMLCanvasElement) => { + c.width = c.clientWidth; + c.height = c.clientHeight; + } + onMount(() => { const pianoRollCanvas = document.getElementById("notes") as HTMLCanvasElement; const pianoKeysCanvas = document.getElementById("piano") as HTMLCanvasElement; - const observer = new ResizeObserver((entries) => { - pianoRollCanvas.width = pianoRollCanvas.clientWidth; - pianoRollCanvas.height = pianoRollCanvas.clientHeight; + updateCanvasSize(pianoRollCanvas); + updateCanvasSize(pianoKeysCanvas); - pianoKeysCanvas.width = pianoKeysCanvas.clientWidth; - pianoKeysCanvas.height = pianoKeysCanvas.clientHeight; + const observer = new ResizeObserver((entries) => { + updateCanvasSize(pianoRollCanvas); + updateCanvasSize(pianoKeysCanvas); pianoRoll.resize(pianoRollCanvas.width, pianoRollCanvas.height); pianoRoll.draw(); @@ -103,6 +108,7 @@ Drop MIDI file here +
diff --git a/src/lib/constants.ts b/src/lib/constants.ts index a08153d..c0d2f8d 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -4,5 +4,8 @@ export const sharpKeyWidthFactor = 0.5; export const MidiNoteOn = 159; export const MidiNoteOff = 143; -export const pianoKeyOutlineWidth = 2; +export const pianoKeyOutlineWidth = 1; export const sharpKeyHeightFactor = 0.6; + +export const backgroundGrey = "#323437"; +export const highlight = "#e2b714"; \ No newline at end of file diff --git a/src/lib/pianoKeys.ts b/src/lib/pianoKeys.ts index b50937d..e7623c5 100644 --- a/src/lib/pianoKeys.ts +++ b/src/lib/pianoKeys.ts @@ -16,8 +16,11 @@ export class PianoKeys { public setCanvas(canvas: HTMLCanvasElement) { this.canvas = canvas; const { width, height } = canvas.getBoundingClientRect(); - canvas.width = width; - canvas.height = height; + const dpi = window.devicePixelRatio; + const style_width = getComputedStyle(canvas).getPropertyValue("width").slice(0, -2); + const style_height = getComputedStyle(canvas).getPropertyValue("height").slice(0, -2); + canvas.setAttribute("width", (Number(style_width) * dpi).toString()); + canvas.setAttribute("height", (Number(style_height) * dpi).toString()); this.width = width; this.height = height; } @@ -35,7 +38,7 @@ export class PianoKeys { this.canvas.width = width; this.canvas.height = height; - ctx.translate(0.5, 0.5); + //ctx.translate(0.5, 0.5); const numNaturalKeys = this.piano.octaves * 7 + 1; const naturalKeyWidth = width / numNaturalKeys; diff --git a/src/lib/pianoRollCanvas.ts b/src/lib/pianoRoll.ts similarity index 89% rename from src/lib/pianoRollCanvas.ts rename to src/lib/pianoRoll.ts index df23677..a6a415f 100644 --- a/src/lib/pianoRollCanvas.ts +++ b/src/lib/pianoRoll.ts @@ -1,4 +1,4 @@ -import { sharpKeyWidthFactor } from "./constants"; +import { highlight, sharpKeyWidthFactor } from "./constants"; import type { Note } from "./notes"; import type { Piano } from "./piano"; @@ -36,8 +36,11 @@ export class PianoRoll { public setCanvas(canvas: HTMLCanvasElement) { this.canvas = canvas; const { width, height } = canvas.getBoundingClientRect(); - canvas.width = width; - canvas.height = height; + const dpi = window.devicePixelRatio; + const style_width = getComputedStyle(canvas).getPropertyValue("width").slice(0, -2); + const style_height = getComputedStyle(canvas).getPropertyValue("height").slice(0, -2); + canvas.setAttribute("width", (Number(style_width) * dpi).toString()); + canvas.setAttribute("height", (Number(style_height) * dpi).toString()); this.width = width; this.height = height; @@ -129,7 +132,7 @@ export class PianoRoll { ctx.clearRect(0, 0, this.width, this.height); - ctx.fillStyle = "#0000ff"; + ctx.fillStyle = highlight; this.notes.forEach(note => { const x = this.getNoteX(note.midiNumber); const y = this.height - note.startTime * tickHeight + this.time; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 99887d8..5db282c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,5 +7,16 @@
-
footer
+
+
+
+ © 2024 Jan Bessler +
+
+ GitHub + Instagram + X +
+
+
\ No newline at end of file diff --git a/src/routes/global.css b/src/routes/global.css index 7c1742c..c7fccb4 100644 --- a/src/routes/global.css +++ b/src/routes/global.css @@ -1,20 +1,45 @@ +:root { + --background: #323437; + --text: #646669; +} + .main { - background-color: red; width: 70%; height: 100%; display: flex; flex-direction: column; + + background-color: var(--background); } .header, .footer { height: 100px; min-height: 100px; - background-color: green; display: flex; flex-direction: column; justify-content: center; + + color: var(--text); + font-family: 'Courier New', Courier, monospace; +} + +.footer > div { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.footer > div a { + text-decoration: none; + color: var(--text); + margin: 0 5px; +} + +.footer > div a:hover { + text-decoration: underline; } .content { flex: 1; + overflow: hidden; } \ No newline at end of file