Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Split view #6

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Split view #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e6a4e50
CSS moved to css-file
Jun 5, 2024
75d3d91
Dynamic resizing implementing
Jun 5, 2024
138bb27
Basic split view implemented
Jun 5, 2024
d8672ab
Re-rendering with distinct function
Jun 5, 2024
b1f1a6c
Merge branch 'dynamic-size' into split-view
Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 112 additions & 47 deletions verovio-audio-rendred.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,84 +10,106 @@ class VerovioPlayer extends HTMLElement {

static get observedAttributes() {
return ['pagewidth', 'pageheight',];
}
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
// handle property change
//this.set(property, newValue);
}

renderPlayer() {
}
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
// handle property change
if (oldValue !== newValue) {
this.setAttribute(property, newValue);
this.rerenderPlayer(this.getAttribute('pagewidth'), this.getAttribute('pageheight'));
} else {
return;
}
}


elementFromHTML(html) {
const template = document.createElement('template');
template.innerHTML = html.trim();
return template.content.firstChild;
}

renderPlayer() {
// Load jspdf asynchronously
const loadPdf = document.createElement('script');
loadPdf.src = "https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js";
loadPdf.defer = true;
this.shadowRoot.appendChild(loadPdf);


// Load Verovio and MIDI.js asynchronously
const loadVerovio = new Promise((resolve, reject) => {
const verovioScript = document.createElement('script');
verovioScript.src = "https://www.verovio.org/javascript/latest/verovio-toolkit-wasm.js";
verovioScript.defer = true;
verovioScript.onload = resolve;
verovioScript.onerror = reject;
this.shadowRoot.appendChild(verovioScript);
});
const loadMidi = new Promise((resolve, reject) => {
const midiScript = document.createElement('script');
midiScript.src = "https://www.midijs.net/lib/midi.js";
midiScript.defer = true;
midiScript.onload = resolve;
midiScript.onerror = reject;
this.shadowRoot.host.appendChild(midiScript);
});

// Load Verovio and MIDI.js asynchronously
const loadVerovio = new Promise((resolve, reject) => {
const verovioScript = document.createElement('script');
verovioScript.src = "https://www.verovio.org/javascript/latest/verovio-toolkit-wasm.js";
verovioScript.defer = true;
verovioScript.onload = resolve;
verovioScript.onerror = reject;
this.shadowRoot.appendChild(verovioScript);
});

const loadMidi = new Promise((resolve, reject) => {
const midiScript = document.createElement('script');
midiScript.src = "https://www.midijs.net/lib/midi.js";
midiScript.defer = true;
midiScript.onload = resolve;
midiScript.onerror = reject;
this.shadowRoot.host.appendChild(midiScript);
});


const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'verovio-css.css';
link.defer = true;
this.shadowRoot.appendChild(link);

console.log("this is the shadow root", this.shadowRoot)


const navDiv = document.createElement('div');
navDiv.id = 'nav';
navDiv.className = 'nav';
this.shadowRoot.appendChild(navDiv);

const contentDiv = document.createElement('div');
contentDiv.id = 'content';
contentDiv.className = 'content';
this.shadowRoot.appendChild(contentDiv);


// Create and append the play button
const playButton = document.createElement('button');
playButton.textContent = 'Play';
playButton.id = 'playMIDI';
this.shadowRoot.appendChild(playButton);
this.shadowRoot.getElementById('nav').appendChild(playButton);

// Create and append the stop button
const stopButton = document.createElement('button');
stopButton.textContent = 'Stop';
stopButton.id = 'stopMIDI';
this.shadowRoot.appendChild(stopButton);
this.shadowRoot.getElementById('nav').appendChild(stopButton);

// Create and append the stop button
const nextButton = document.createElement('button');
nextButton.textContent = 'next';
nextButton.id = 'next';
this.shadowRoot.appendChild(nextButton);
this.shadowRoot.getElementById('nav').appendChild(nextButton);

// Create and append the stop button
const previousButton = document.createElement('button');
previousButton.textContent = 'previous';
previousButton.id = 'previous';
this.shadowRoot.appendChild(previousButton);

this.shadowRoot.getElementById('nav').appendChild(previousButton);

// Create and append split view button
const splitViewButton = document.createElement('button');
splitViewButton.textContent = 'Split View';
splitViewButton.id = 'splitView';
this.shadowRoot.getElementById('nav').appendChild(splitViewButton);

// Create and append the notation div
const notationDiv = document.createElement('div');
notationDiv.id = 'notation';
this.shadowRoot.appendChild(notationDiv);


this.shadowRoot.getElementById('content').appendChild(notationDiv);

console.log("this is the shadwo root", this.shadowRoot)

Expand All @@ -97,7 +119,7 @@ class VerovioPlayer extends HTMLElement {
if (typeof MIDIjs !== 'undefined') {
const tk = new verovio.toolkit();
console.log('Verovio and MIDI.js have loaded!', MIDIjs);

this.initPlayer(tk, MIDIjs);
} else {
console.error('MIDIjs is not loaded yet');
Expand All @@ -111,15 +133,17 @@ class VerovioPlayer extends HTMLElement {
async initPlayer(tk, MIDIjs) {
console.log('Initializing player...');
tk.setOptions({
pageWidth: 1000 ,
pageHeight: 2000,
// pageHeight and pageWidth are swapped because the page is in landscape
pageHeight: this.getAttribute('pagewidth'),
pageWidth: this.getAttribute('pageheight'),
scaleToPageSize: true,
scale: 50,
landscape: true,
});

let currentPage = 1;



const playMIDIHandler = () => {
let base64midi = tk.renderToMIDI();
Expand All @@ -144,25 +168,42 @@ class VerovioPlayer extends HTMLElement {
};

const nextPageHandler = () => {
if(currentPage < tk.getPageCount()){
currentPage++
if (currentPage < tk.getPageCount()) {
currentPage++
this.shadowRoot.getElementById("notation").innerHTML = tk.renderToSVG(currentPage);
}
};


const previousPageHandler = () => {
if(currentPage != 1){
if (currentPage != 1) {
currentPage--
this.shadowRoot.getElementById("notation").innerHTML = tk.renderToSVG(currentPage);
}

};

// Toggle split view
const splitViewHandler = () => {
if (this.shadowRoot.getElementById('facs-viewer') !== null) {
console.log("removing the element");
this.shadowRoot.getElementById('facs-viewer').remove();
this.rerenderPlayer(this.getAttribute('pagewidth'), this.getAttribute('pageheight'));
}else {
const newElement = this.elementFromHTML(`
<div id="facs-viewer">
<img src="https://picsum.photos/400/600"/>
</div>
`);
this.shadowRoot.getElementById('content').appendChild(newElement);
this.rerenderPlayer(this.getAttribute('pagewidth') / 2, this.getAttribute('pageheight'));
}

}

const midiHightlightingHandler = function (event) {
console.log("number of pages are " ,tk.getPageCount())
console.log("number of pages are ", tk.getPageCount())

console.log('MIDI event:', event);
console.log('MIDI event:', event);
// Remove the attribute 'playing' of all notes previously playing
let playingNotes = this.shadowRoot.querySelectorAll('g.note.playing');
for (let playingNote of playingNotes) playingNote.classList.remove("playing");
Expand Down Expand Up @@ -190,8 +231,31 @@ class VerovioPlayer extends HTMLElement {
this.shadowRoot.getElementById('stopMIDI').addEventListener('click', stopMIDIHandler);
this.shadowRoot.getElementById('next').addEventListener('click', nextPageHandler);
this.shadowRoot.getElementById('previous').addEventListener('click', previousPageHandler);
this.shadowRoot.getElementById('splitView').addEventListener('click', splitViewHandler);



try {
const response = await fetch("https://www.verovio.org/examples/downloads/Schubert_Lindenbaum.mei");
const meiXML = await response.text();
tk.loadData(meiXML);
let svg = tk.renderToSVG(1);
this.shadowRoot.getElementById("notation").innerHTML = svg;
} catch (error) {
console.error('Error initializing player:', error);
}
}

async rerenderPlayer(width, height) {
const tk = new verovio.toolkit();
tk.setOptions({
// pageHeight and pageWidth are swapped because the page is in landscape
pageHeight: width,
pageWidth: height,
scaleToPageSize: true,
scale: 50,
landscape: true,
});

try {
const response = await fetch("https://www.verovio.org/examples/downloads/Schubert_Lindenbaum.mei");
Expand All @@ -202,6 +266,7 @@ class VerovioPlayer extends HTMLElement {
} catch (error) {
console.error('Error initializing player:', error);
}

}
}

Expand Down
29 changes: 28 additions & 1 deletion verovio-css.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,32 @@

.content {
display: grid;
grid-template-columns: 50% 50%;
max-width: 100vw;
}

g.note.playing {
color: crimson


}
}

@keyframes pulse {
0% {
fill: orange;
}

50% {
fill: brown;
}

100% {
fill: orange;
}
}

g.note.playing {
animation-name: pulse;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}
55 changes: 27 additions & 28 deletions verovio-renderer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,33 @@
<body>
<h1>Verovio Renderer Demo</h1>

<!-- <verovio-api-renderer style="width: 100%; height: 100%; background-color: red;">
</verovio-api-renderer> -->

<verovio-player pagewidth="100">
<style>

@keyframes pulse {
0% {
fill: orange;
}
50% {
fill: brown;
}
100% {
fill: orange;
}
}

g.note.playing {
animation-name: pulse;
animation-duration: 1.0s;
animation-iteration-count: infinite;
}

</style>

</verovio-player>
<verovio-player id="verovioPlayer"></verovio-player>


</body>
</html>


<script>
var startWidth = window.innerWidth || document.documentElement.clientWidth;
var startHeight = window.innerHeight || document.documentElement.clientHeight;
setVerovioPlayerSize(startWidth, startHeight);

// Listen for window resize events and change the pagewidth attribute of the verovio-player element
var resizeTimeout;
window.addEventListener('resize', function () {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function () {
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
// Set the pagewidth attribute based on the viewport width
setVerovioPlayerSize(viewportWidth, viewportHeight);
}, 300); // Adjust the delay (in milliseconds) as needed
});

function setVerovioPlayerSize(width, height) {
var verovioPlayer = document.getElementById('verovioPlayer');
verovioPlayer.setAttribute('pagewidth', width);
verovioPlayer.setAttribute('pageheight', height);
}

</script>