feat: improved ui

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
 

src/app.html

@@ -19,6 +19,8 @@
 		body {
 			display: flex;
 			justify-content: center;
+
+			background-color: #323437;
 		}
 	</style>
 </html>

src/lib/components/noteView.css

@@ -3,26 +3,32 @@
     width: 100%;
     height: fit-content;
     flex: 1;
-    background-color: yellow;
     position: relative;
 }
 
 #notes {
     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 {

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
             </div>
         </div>
+        <div id="note-shadow"></div>
         <canvas id="notes"></canvas>
     </div>
     <canvas id="piano" class="keys"></canvas>

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";

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;

src/lib/pianoRollCanvas.ts → 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;

src/routes/+layout.svelte

@@ -7,5 +7,16 @@
     <div class="content">
         <slot></slot>
     </div>
-    <div class="footer">footer</div>
+    <div class="footer">
+        <div>
+            <div>
+                &copy 2024 Jan Bessler
+            </div>
+            <div>
+                <a href="https://github.com/Jaybee18/mfp">GitHub</a>
+                <a href="https://www.instagram.com/jaybes.mg/">Instagram</a>
+                <a href="https://twitter.com/JanBessler">X</a>
+            </div>
+        </div>
+    </div>
 </div>

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;
 }