Home Explore Help
Sign In
liujunchi
/
osmd-extended
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

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 years ago
parent
6ebb07a8e9
commit
9cb066b73c
9 changed files with 81 additions and 47 deletions
Unified View Show Diff Stats
  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
View File 

@@ -31,14 +31,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 
 
 ## [0.1.0-beta] - 2016-09-21
 
 ## [0.1.0-beta] - 2016-09-21
 
 ### Added
 
 ### 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))
 
 - 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))
 
 - 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))
 
 - 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))
 
 - 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))
 
 - 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))
 
 - 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
 
 - Added documentation for VexFlow and other graphical objects
 
 - Proper title display
 
 - Proper title display
 
 - Cursor on first StaffEntry by default
 
 - Cursor on first StaffEntry by default

+ 1 - 1
Gruntfile.js
View File 

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

+ 8 - 0
demo/demo.css
View File 

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

+ 5 - 0
demo/demo.js
View File 

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

BIN
demo/favicon.ico
View File


+ 46 - 33
demo/index.html
View File 

@@ -1,6 +1,6 @@
 
 <!doctype html>
 
 <!doctype html>
 
 <html lang="en">
 
 <html lang="en">
 
-  <head>
 
+<head>
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
 
 
     <title>OpenSheetMusicDisplay Demo</title>
 
     <title>OpenSheetMusicDisplay Demo</title>
 
@@ -12,42 +12,55 @@
 
 
 
     <!-- Include code and styles for this demo -->
 
     <!-- Include code and styles for this demo -->
 
     <script src="demo.js"></script>
 
     <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>
 
         <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>
 
         </td>
 
-      </tr>
 
-      <tr>
 
-        <td class="bignum">2</td>
 
         <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>
 
         </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></td>
 
         <td id="error-td"></td>
 
         <td id="error-td"></td>
 
-      </tr>
 
-    </table>
 
-  </body>
 
+    </tr>
 
+</table>
 
+</body>
 
 </html>
 
 </html>

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

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

+ 9 - 7
src/OSMD/Cursor.ts
View File 

@@ -22,14 +22,15 @@ export class Cursor {
 
 
 
     private container: HTMLElement;
 
     private container: HTMLElement;
 
     private osmd: OSMD;
 
     private osmd: OSMD;
 
+    private manager: MusicPartManager;
 
     private iterator: MusicPartManagerIterator;
 
     private iterator: MusicPartManagerIterator;
 
     private graphic: GraphicalMusicSheet;
 
     private graphic: GraphicalMusicSheet;
 
     private hidden: boolean = true;
 
     private hidden: boolean = true;
 
     private cursorElement: HTMLImageElement;
 
     private cursorElement: HTMLImageElement;
 
 
 
     public init(manager: MusicPartManager, graphic: GraphicalMusicSheet): void {
 
     public init(manager: MusicPartManager, graphic: GraphicalMusicSheet): void {
 
-        this.iterator = manager.getIterator();
 
-        this.iterator.moveToNext();
 
+        this.manager = manager;
 
+        this.reset();
 
         this.graphic = graphic;
 
         this.graphic = graphic;
 
         this.hidden = true;
 
         this.hidden = true;
 
         this.hide();
 
         this.hide();
 
@@ -59,7 +60,7 @@ export class Cursor {
 
         let x: number = 0, y: number = 0, height: number = 0;
 
         let x: number = 0, y: number = 0, height: number = 0;
 
         for (let idx: number = 0, len: number = iterator.CurrentVoiceEntries.length; idx < len; ++idx) {
 
         for (let idx: number = 0, len: number = iterator.CurrentVoiceEntries.length; idx < len; ++idx) {
 
             let voiceEntry: VoiceEntry = iterator.CurrentVoiceEntries[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 staffIndex: number = voiceEntry.ParentSourceStaffEntry.ParentStaff.idInMusicSheet;
 
             let gse: VexFlowStaffEntry =
 
             let gse: VexFlowStaffEntry =
 
                 <VexFlowStaffEntry>this.graphic.findGraphicalStaffEntryFromMeasureList(staffIndex, measureIndex, voiceEntry.ParentSourceStaffEntry);
 
                 <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 {
 
     private updateStyle(width: number, color: string = "#33e02f"): void {

+ 2 - 4
src/OSMD/OSMD.ts
View File 

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