Implemented note display

html/assets/css/base.css

@@ -5,10 +5,6 @@ body {
 h1 {
     margin: 0;
 }
-img {
-    height: auto;
-    width: 100%;
-}
 #titlebar {
     font-family: 'arial';
     color: white;
@@ -20,7 +16,13 @@ img {
 .container {
     max-width: 1920px;
     background-color: white;
-    display: flex;
+    padding: 1%;
     margin: 10px auto;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    display: flex;
+    flex-direction: column;
+}
+#note-render {
+    display: inline-block;
+    margin: 0 auto;
 }

html/assets/scripts/midi.js

@@ -1,7 +1,8 @@
 // prepare svg object for later use
 var keyboard = document.getElementById("piano");
 var svgDoc; // loaded keyboard svg
-var keysB = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86]
+const keysB = [2,5,7,10,12,14,17,19,22,24,26,29,31,34,36,38,41,43,46,48,50,53,55,58,60,62,65,67,70,72,74,77,79,82,84,86]
+const keyTo = {}
 
 window.addEventListener("load", function() {
     svgDoc = keyboard.contentDocument;

html/assets/scripts/render.js

@@ -0,0 +1,99 @@
+const { Renderer, Stave, StaveNote, Voice, Formatter, TickContext } = Vex.Flow;
+
+class Notation {
+    constructor() {
+        // Create an SVG renderer and attach it to the DIV element
+        this.div = document.getElementById("note-render");
+        this.renderer = new Renderer(this.div, Renderer.Backends.SVG);
+
+        // Configure the rendering context.
+        this.renderer.resize(321, 500);
+        this.ctx = this.renderer.getContext();
+
+        // Create the staves 
+        this.topStaff = new Vex.Flow.Stave(20, 100, 300);
+        this.bottomStaff = new Vex.Flow.Stave(20, 200, 300);
+
+        // add clefs
+        this.topStaff.addClef('treble');
+        this.bottomStaff.addClef('bass');
+
+        // add brace and line
+        this.brace     = new Vex.Flow.StaveConnector(this.topStaff, this.bottomStaff).setType(3); // 3 = brace
+        this.lineLeft  = new Vex.Flow.StaveConnector(this.topStaff, this.bottomStaff).setType(1);
+        this.lineRight = new Vex.Flow.StaveConnector(this.topStaff, this.bottomStaff).setType(6);
+
+        // create voice
+        this.voiceTop    = new Vex.Flow.Voice({num_beats: 4, beat_value: 4, resolution: Vex.Flow.RESOLUTION});
+        this.voiceBottom = new Vex.Flow.Voice({num_beats: 4, beat_value: 4, resolution: Vex.Flow.RESOLUTION});
+
+        // init notelist
+        this.notesTop    = [];
+        this.notesBottom = [];
+
+        this.draw();
+    }
+    /**
+     * Takes list of notes ex: [{clef: "bass/treble", keys: ["c/4,"e/4"], duration: "w"},{clef: "bass/treble", keys: ["c/4,"e/4"], duration: "w"}]
+     * @param {*} notes 
+     */
+    set_notes(to_set) {
+        this.voiceTop.tickables    = [];
+        this.voiceBottom.tickables = [];
+
+        this.notesTop    = [];
+        this.notesBottom = [];
+
+        to_set.forEach( note => {
+            if (note.clef == "treble") {
+                console.log("amogus");
+                this.notesTop.push(new Vex.Flow.StaveNote(note));
+            } else {
+                console.log("amogus");
+                this.notesBottom.push(new Vex.Flow.StaveNote(note));
+            }
+        });
+
+        for (let note of this.notesTop) {
+            note.x_shift = 100;
+        }
+        for (let note of this.notesBottom) {
+            note.x_shift = 100;
+        }
+
+        this.voiceTop.addTickables(this.notesTop);
+        this.voiceBottom.addTickables(this.notesBottom);
+        this.draw();
+    }
+
+    draw() {
+        // draw background
+        this.topStaff.setContext(this.ctx).draw();
+        this.bottomStaff.setContext(this.ctx).draw();
+        this.brace.setContext(this.ctx).draw();
+        this.lineLeft.setContext(this.ctx).draw();
+        this.lineRight.setContext(this.ctx).draw();
+
+        // draw notes
+        if (this.notesTop.length != 0) {
+            new Vex.Flow.Formatter().joinVoices([this.voiceTop]).format([this.voiceTop], 500);
+            this.voiceTop.draw(this.ctx, this.topStaff);
+        }
+        if (this.notesBottom.length != 0) {
+            new Vex.Flow.Formatter().joinVoices([this.voiceBottom]).format([this.voiceBottom], 500);
+            this.voiceBottom.draw(this.ctx, this.bottomStaff);
+        }
+    }
+}
+
+class Noteset {
+    // syntax for notes: https://github.com/0xfe/vexflow/blob/master/src/tables.ts
+    constructor(clef, keys) {
+        this.clef     = clef;
+        this.keys     = keys;
+        this.duration = "w";
+    }
+}
+
+notator = new Notation();
+notator.set_notes([new Noteset("treble",["c/5","c/6"]),new Noteset("bass",["c/3"])]);

html/index.html

@@ -5,6 +5,10 @@
 </head>
 <body>
     <div class="container">
+        <div id="note-render"></div>
         <object id="piano" data="assets/img/piano-keyboard.svg" type="image/svg+xml" width="100%" type="image/svg+xml"></object>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script>
+    <script src="assets/scripts/render.js"></script>
     <script src="assets/scripts/midi.js"></script>
 </body>