فهرست منبع

Maked cursor work again.
Added a reset button for the cursor.
Changed demo layout and added icons for browser tab and as Header image.

Matthias 8 سال پیش
والد
کامیت
9cb066b73c
9فایلهای تغییر یافته به همراه81 افزوده شده و 47 حذف شده
  1. 4 2
      CHANGELOG.md
  2. 1 1
      Gruntfile.js
  3. 8 0
      demo/demo.css
  4. 5 0
      demo/demo.js
  5. BIN
      demo/favicon.ico
  6. 46 33
      demo/index.html
  7. 6 0
      src/MusicalScore/VoiceData/SourceMeasure.ts
  8. 9 7
      src/OSMD/Cursor.ts
  9. 2 4
      src/OSMD/OSMD.ts

+ 4 - 2
CHANGELOG.md

@@ -31,14 +31,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [0.1.0-beta] - 2016-09-21
 ### Added
-- Brace and bracket generation using VexFlow ([fd40c22](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/fd40c22d813279ed714028250625cbbdfd5ad633))
+- Prepared for brace and bracket generation with VexFlow ([fd40c22](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/fd40c22d813279ed714028250625cbbdfd5ad633))
 - Class documentation ([73d319f](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/73d319fb17b4663fcfa001343647b8b662c17cee))
 - OSMD is now usable via script tags  ([091dab9](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/091dab9d82d6c477b7e88de2d424024696d126fa))
 - Set up `loglevel` as logging framework ([c00b5a8](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/c00b5a8ee789ece21bf8e8eb02cfa4f13b498e70))
 - Support for ocatvated clefs ([567b3b3](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/567b3b3ec69fad492da68946039517804567cb25))
 - Demo is now automatically built and published to https://opensheetmusicdisplay.github.io/demo/ ([1c63f82](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/1c63f82ea5c7b0ae978f43cf1cc60675026e4060))
 - Class documentation generated with typedoc, published to https://opensheetmusicdisplay.github.io/ ([bc91091](https://github.com/opensheetmusicdisplay/opensheetmusicdisplay/commit/bc91091099f76ea5b9145f674bfcea2f36ca6712))
-- Added ties
+- Added rendering tuplets
+- Added rendering ties
+- Added rendering dots
 - Added documentation for VexFlow and other graphical objects
 - Proper title display
 - Cursor on first StaffEntry by default

+ 1 - 1
Gruntfile.js

@@ -161,7 +161,7 @@ module.exports = function (grunt) {
             demo: {
                 files: [
                     { src: ['*'], dest: '<%= outputDir.build %>/demo/sheets/', cwd: './test/data/', expand: true },
-                    { src: ['*.js', '*.css', '*.html'], cwd: './demo/', expand: true, dest: '<%= outputDir.build %>/demo/' },
+                    { src: ['*.js', '*.css', '*.html', '*.ico'], cwd: './demo/', expand: true, dest: '<%= outputDir.build %>/demo/' },
                     { src: ['osmd-debug.js'], cwd: './build/', expand: true, dest: '<%= outputDir.build %>/demo/' }
                 ]
             }

+ 8 - 0
demo/demo.css

@@ -1,3 +1,11 @@
+p {
+  margin: 0px 8px 8px 8px;
+}
+
+select {
+  margin: 0px 8px 8px 8px;
+}
+
 .bignum {
   width: 1em;
   text-align: center;

+ 5 - 0
demo/demo.js

@@ -31,6 +31,7 @@
         zoomDiv,
         custom,
         nextCursorBtn,
+        resetCursorBtn,
         showCursorBtn,
         hideCursorBtn;
 
@@ -48,6 +49,7 @@
         zoomOut = document.getElementById("zoom-out-btn");
         canvas = document.createElement("div");
         nextCursorBtn = document.getElementById("next-cursor-btn");
+        resetCursorBtn = document.getElementById("reset-cursor-btn");
         showCursorBtn = document.getElementById("show-cursor-btn");
         hideCursorBtn = document.getElementById("hide-cursor-btn");
 
@@ -106,6 +108,9 @@
         nextCursorBtn.addEventListener("click", function() {
             OSMD.cursor.next();
         });
+        resetCursorBtn.addEventListener("click", function() {
+            OSMD.cursor.reset();
+        });
         hideCursorBtn.addEventListener("click", function() {
             OSMD.cursor.hide();
         });

BIN
demo/favicon.ico


+ 46 - 33
demo/index.html

@@ -1,6 +1,6 @@
 <!doctype html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
 
     <title>OpenSheetMusicDisplay Demo</title>
@@ -12,42 +12,55 @@
 
     <!-- Include code and styles for this demo -->
     <script src="demo.js"></script>
-    <link href="demo.css" media="all" rel="stylesheet" />
-  </head>
-  <body>
-    <h1>OpenSheetMusicDisplay Demo</h1>
-    <table cellspacing="0">
-      <tr>
-        <td class="bignum">1</td>
+    <link href="demo.css" media="all" rel="stylesheet"/>
+    <link rel="icon" href="./favicon.ico?" type="image/x-icon"/>
+</head>
+<body>
+<table cellspacing="0" style="max-width:700px;">
+    <tr>
         <td>
-          <p>
-            Select a sample from the list below...
-          </p>
-          <select id="select"></select>
-          <p>... or just drop your MusicXML file on this page.</p>
+            <img src="./favicon.ico?" style="width:64px;height:64px;"/>
         </td>
-      </tr>
-      <tr>
-        <td class="bignum">2</td>
         <td>
-          <p>Current width: <span id="size-str">???</span>px</p>
-          <p>Zoom factor: <span id="zoom-str">???</span>%</p>
-          <p>
-            Zoom controls:
-            <input type="button" value="zoom in" id="zoom-in-btn"/>
-            <input type="button" value="zoom out" id="zoom-out-btn"/>
-          </p>
-          <p>Cursor controls:
-            <input type="button" value="show" id="show-cursor-btn"/>
-            <input type="button" value="hide" id="hide-cursor-btn"/>
-            <input type="button" value="next" id="next-cursor-btn"/>
-          </p>
+            <h1>OpenSheetMusicDisplay Demo</h1>
         </td>
-      </tr>
-      <tr id="error-tr">
+    </tr>
+</table>
+<table cellspacing="0" style="max-width:700px;">
+    <tr>
+        <td valign="top">
+            <select id="select"></select>
+            <p> Select a sample from the list ... </p>
+            <p>... or just drop your MusicXML file on this page.</p>
+        </td>
+        <td valign="top" halign="right">
+            <p>Cursor controls:
+                <input type="button" value="show" id="show-cursor-btn"/>
+                <input type="button" value="hide" id="hide-cursor-btn"/>
+                <input type="button" value="next" id="next-cursor-btn"/>
+                <input type="button" value="reset" id="reset-cursor-btn"/>
+            </p>
+            <p>
+                Zoom controls:
+                <input type="button" value="zoom in" id="zoom-in-btn"/>
+                <input type="button" value="zoom out" id="zoom-out-btn"/>
+            </p>
+            <table cellspacing="0">
+                <tr>
+                    <td>
+                        <p>Zoom factor: <span id="zoom-str">???</span>%</p>
+                    </td>
+                    <td>
+                        <p>Current width: <span id="size-str">???</span>px</p>
+                    </td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+    <tr id="error-tr">
         <td></td>
         <td id="error-td"></td>
-      </tr>
-    </table>
-  </body>
+    </tr>
+</table>
+</body>
 </html>

+ 6 - 0
src/MusicalScore/VoiceData/SourceMeasure.ts

@@ -38,7 +38,13 @@ export class SourceMeasure extends BaseIdClass {
         }
     }
 
+    /**
+     * The unique measure list index starting with 0.
+     */
     public measureListIndex: number;
+    /**
+     * The measure number for showing on the music sheet. Typically starts with 1.
+     */
     public endsPiece: boolean;
 
     private measureNumber: number;

+ 9 - 7
src/OSMD/Cursor.ts

@@ -22,14 +22,15 @@ export class Cursor {
 
     private container: HTMLElement;
     private osmd: OSMD;
+    private manager: MusicPartManager;
     private iterator: MusicPartManagerIterator;
     private graphic: GraphicalMusicSheet;
     private hidden: boolean = true;
     private cursorElement: HTMLImageElement;
 
     public init(manager: MusicPartManager, graphic: GraphicalMusicSheet): void {
-        this.iterator = manager.getIterator();
-        this.iterator.moveToNext();
+        this.manager = manager;
+        this.reset();
         this.graphic = graphic;
         this.hidden = true;
         this.hide();
@@ -59,7 +60,7 @@ export class Cursor {
         let x: number = 0, y: number = 0, height: number = 0;
         for (let idx: number = 0, len: number = iterator.CurrentVoiceEntries.length; idx < len; ++idx) {
             let voiceEntry: VoiceEntry = iterator.CurrentVoiceEntries[idx];
-            let measureIndex: number = voiceEntry.ParentSourceStaffEntry.VerticalContainerParent.ParentMeasure.MeasureNumber;
+            let measureIndex: number = voiceEntry.ParentSourceStaffEntry.VerticalContainerParent.ParentMeasure.measureListIndex;
             let staffIndex: number = voiceEntry.ParentSourceStaffEntry.ParentStaff.idInMusicSheet;
             let gse: VexFlowStaffEntry =
                 <VexFlowStaffEntry>this.graphic.findGraphicalStaffEntryFromMeasureList(staffIndex, measureIndex, voiceEntry.ParentSourceStaffEntry);
@@ -128,11 +129,12 @@ export class Cursor {
     }
 
     /**
-     * Go to previous entry. Not implemented.
+     * Go to next entry
      */
-    public prev(): void {
-        // TODO
-        // Previous does not seem to be implemented in the MusicPartManager iterator...
+    public reset(): void {
+        this.iterator = this.manager.getIterator();
+        this.iterator.moveToNext();
+        this.update();
     }
 
     private updateStyle(width: number, color: string = "#33e02f"): void {

+ 2 - 4
src/OSMD/OSMD.ts

@@ -10,8 +10,6 @@ import {MXLHelper} from "../Common/FileIO/Mxl";
 import {Promise} from "es6-promise";
 import {AJAX} from "./AJAX";
 import {Logging} from "../Common/Logging";
-import {Fraction} from "../Common/DataObjects/Fraction";
-import {OutlineAndFillStyleEnum} from "../MusicalScore/Graphical/DrawingEnums";
 import * as log from "loglevel";
 
 export class OSMD {
@@ -137,8 +135,8 @@ export class OSMD {
         // Calculate again
         this.graphic.reCalculate();
         this.graphic.Cursors.length = 0;
-        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(0, 4), OutlineAndFillStyleEnum.PlaybackCursor));
-        /*this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(1, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        /*this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(0, 4), OutlineAndFillStyleEnum.PlaybackCursor));
+        this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(1, 4), OutlineAndFillStyleEnum.PlaybackCursor));
         this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(2, 4), OutlineAndFillStyleEnum.PlaybackCursor));
         this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(3, 4), OutlineAndFillStyleEnum.PlaybackCursor));
         this.graphic.Cursors.push(this.graphic.calculateCursorLineAtTimestamp(new Fraction(4, 4), OutlineAndFillStyleEnum.PlaybackCursor));