Merge pull request #3 from jportela/svg-implementation

Updating demo with SVG implementation

Author: sebastianhaas

demo/demo.js

@@ -39,7 +39,8 @@
         nextCursorBtn,
         resetCursorBtn,
         showCursorBtn,
-        hideCursorBtn;
+        hideCursorBtn,
+        backendSelect;
 
     // Initialization code
     function init() {
@@ -57,6 +58,7 @@
         resetCursorBtn = document.getElementById("reset-cursor-btn");
         showCursorBtn = document.getElementById("show-cursor-btn");
         hideCursorBtn = document.getElementById("hide-cursor-btn");
+        backendSelect = document.getElementById("backend-select");
 
         // Hide error
         error();
@@ -85,7 +87,7 @@
         };
 
         // Create OSMD object and canvas
-        OSMD = new opensheetmusicdisplay.OSMD(canvas);
+        OSMD = new opensheetmusicdisplay.OSMD(canvas, false);
         OSMD.setLogLevel('info');
 
         // Set resize event handler
@@ -121,6 +123,16 @@
         showCursorBtn.addEventListener("click", function() {
             OSMD.cursor.show();
         });
+
+        backendSelect.addEventListener("change", function(e) {
+            var value = e.target.value;
+            // clears the canvas element
+            canvas.innerHTML = "";
+            OSMD = new opensheetmusicdisplay.OSMD(canvas, false, value);
+            OSMD.setLogLevel('info');
+            selectOnChange();
+
+        });
     }
 
     function Resize(startCallback, endCallback) {

demo/index.md

@@ -14,6 +14,14 @@ OSMD can display [MusicXML][0] in both `.xml` and `.mxl` containers. On this dem
 
 <select id="select" class="btn btn-demo"></select>
 
+## Renderer
+You can select the rendering strategy, by choosing either the Canvas option, or the SVG one.
+
+<select id="backend-select" class="btn btn-demo" value="canvas">
+    <option value="canvas">Canvas</option>>
+    <option value="svg">SVG</option>
+</select>
+
 ## Zoom level
 You control the zoom level of the music sheet displayed. Right now, OSMD is rendering the music piece at <span id="zoom-str">100</span>% on <span id="size-str">0</span>px width.