فهرست منبع

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 10 سال پیش
والد
کامیت
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));