alphatab + drawAndListen

frontend/src/App.vue

@@ -31,17 +31,15 @@ const state = ref({
             Analyzer
           </RouterLink>
         </li>
+        <li>
+          <RouterLink :to="{ name: 'DrawAndListen' }">
+            Draw&Listen
+          </RouterLink>
+        </li>
       </ul>
     </nav>
 
     <div class="content">
-      <!-- <a href="https://vitejs.dev" target="_blank">
-            <img src="/guitarDiffLogo2.svg" class="logo" alt="Vite logo" />
-            </a> -->
-
-      <!-- <keep-alive>
-            <router-view />
-            </keep-alive> -->
       <RouterView v-slot="{ Component }">
         <keep-alive>
           <component :is="Component" :key="$route.fullPath" />
@@ -60,9 +58,9 @@ const state = ref({
 }
 
 .navbar {
-    background-color: #c5bdbd;
-    margin: 0px;
-    padding: 0px;
+    background-color: var(--background-light2);
+    /* margin: 10px; */
+    padding: 5px;
     /* padding: 1rem; */
     /* width: 100%; */
     /* margin-left: 10px; */
@@ -83,7 +81,11 @@ const state = ref({
 
 .nav-list li a {
     text-decoration: none;
-    color: rgb(78, 74, 74);
+    color: var(--text-color-dark);
+    background-color: var(--accent-color2);
+    padding: 0.8rem;
+    font-size: 1.2rem;
+    font-weight: 600;
 }
 
 .content {

frontend/src/components/AlphaTabWidget.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, onUpdated, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, onUpdated, ref, watch } from 'vue'
 import { Pane } from 'tweakpane'
 
 const props = defineProps({
@@ -22,9 +22,9 @@ const props = defineProps({
 
 const emit = defineEmits(['updateScoreCode'])
 
-const openSheetMusicDisplay = null
-const timeoutID = null
-let pane = null
+// const openSheetMusicDisplay = null
+// const timeoutID = null
+// let pane = null
 let api = null
 let main = null
 let wrapper = null
@@ -37,48 +37,61 @@ const parsingError = ref('')
 // const count = ref(0)
 const settingsStatus = ref(false)
 const isActive = ref(false)
-
-const SETTINGS_PARAMS = {
-  scale: 1.0,
-  // width: 800,
-  // factor: 123,
-  // title: 'hello',
-  // color: '#ff0055',
-  // percentage: 50,
-  // theme: 'dark',
-  // prop: 'Put your\nmultiline\ntext here!'
-}
+const wrapRef = ref(null)
+const mainRef = ref(null)
+
+// const SETTINGS_PARAMS = {
+//   scale: 1.0,
+//   // width: 800,
+//   // factor: 123,
+//   // title: 'hello',
+//   // color: '#ff0055',
+//   // percentage: 50,
+//   // theme: 'dark',
+//   // prop: 'Put your\nmultiline\ntext here!'
+// }
 
 const divId = computed(() => {
   return `xmlScoreContainer_${props.id}`
 })
 
-function initializePane() {
-  pane = new Pane({
-    container: document.getElementById('paneContainerXml'),
-    title: 'MusicXML Settings',
-  },
-  )
-  pane.addBinding(SETTINGS_PARAMS, 'scale', {
-    min: 0.5,
-    max: 2.0,
-    step: 0.1,
-  }).on('change', (ev) => {
-    console.log(ev.value)
-    openSheetMusicDisplay.zoom = ev.value
-    openSheetMusicDisplay.render()
-  })
-}
+// function initializePane() {
+//   pane = new Pane({
+//     container: document.getElementById('paneContainerXml'),
+//     title: 'MusicXML Settings',
+//   },
+//   )
+//   pane.addBinding(SETTINGS_PARAMS, 'scale', {
+//     min: 0.5,
+//     max: 2.0,
+//     step: 0.1,
+//   }).on('change', (ev) => {
+//     console.log(ev.value)
+//     openSheetMusicDisplay.zoom = ev.value
+//     openSheetMusicDisplay.render()
+//   })
+// }
+
+onUnmounted(() => {
+  console.log('onUnmounted')
+  // pane = null
+  api = null
+  main = null
+  wrapper = null
+  settings = null
+})
 
-onMounted(async () => {
+onMounted(() => {
   // console.log($(`#${divId.value}`)[0])
-  initializePane()
-  wrapper = document.querySelector('.at-wrap')
-  main = wrapper.querySelector('.at-main')
+  // initializePane()
+  // wrapper = document.querySelector('.at-wrap')
+  // main = wrapper.querySelector('.at-main')
+  wrapper = wrapRef.value
+  main = mainRef.value
   // initialize alphatab
   settings = {
     // file: 'https://www.alphatab.net/files/canon.gp',
-    // file: '/Fantasia_no.2.musicxml.gpx',
+    file: '/Fantasia_no.2.musicxml.gpx',
     player: {
       enablePlayer: true,
       soundFont: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/soundfont/sonivox.sf2',
@@ -89,12 +102,12 @@ onMounted(async () => {
 })
 
 function initializeOSMD() {
+  console.log('initializeOSMD')
   api = new alphaTab.AlphaTabApi(main, settings)
-  api.tex(`
-  \\title 'Test' . 3.3.4
-  :4 2.3 3.3 :8 3.3 4.3 3.3 4.3 |
-
-  `)
+  // api.tex(`
+  // \\title 'Test' . 3.3.4
+  // :4 2.3 3.3 :8 3.3 4.3 3.3 4.3 |
+  // `)
 
   // overlay logic
   const overlay = wrapper.querySelector('.at-overlay')
@@ -271,77 +284,7 @@ function initializeOSMD() {
     songPosition.innerText
       = `${formatDuration(e.currentTime)} / ${formatDuration(e.endTime)}`
   })
-
-  // await fetch('/guitar-diff-example.musicxml')
-  //   .then((response) => {
-  //     return response.text()
-  //   })
-  //   .then((data) => {
-  //     console.log('in data')
-  //     openSheetMusicDisplay.load(data)
-  //       .then(
-  //         () => {
-  //           window.osmd = openSheetMusicDisplay
-  //           openSheetMusicDisplay.render()
-  //           // openSheetMusicDisplay.cursor.show();
-  //           console.log('in load')
-  //           showParsingError.value = false
-  //           currentScoreCode.value = data
-  //         },
-  //       )
-  //       .catch((e) => {
-  //         showParsingError.value = true
-  //         console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
-  //         parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
-  //       })
-  //   })
-}
-
-// function showScore() {
-//   openSheetMusicDisplay.clear()
-//   console.log(currentScoreCode.value)
-//   openSheetMusicDisplay.load(currentScoreCode.value)
-//     .then(
-//       () => {
-//         window.osmd = openSheetMusicDisplay
-//         openSheetMusicDisplay.render()
-//         // openSheetMusicDisplay.cursor.show();
-//         console.log('in load')
-//         showParsingError.value = false
-//       },
-//     )
-//     .catch((e) => {
-//       showParsingError.value = true
-//       console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
-//       parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
-//     })
-// }
-
-// function handleKeyUp(_event) {
-//   if (timeoutID)
-//     clearTimeout(timeoutID)
-//   timeoutID = setTimeout(showScore, 500)
-// }
-
-// function handleDrop(event) {
-//   event.preventDefault()
-//   const textData = event.dataTransfer.getData('text')
-//   const file = event.dataTransfer.files[0]
-//   console.log(textData)
-//   console.log(file)
-//   if (file) {
-//     const reader = new FileReader()
-//     reader.onload = function (e) {
-//       currentScoreCode.value = e.target.result
-//       showScore()
-//     }
-//     reader.readAsText(file)
-//   }
-//   else if (textData) {
-//     currentScoreCode.value = textData
-//     showScore()
-//   }
-// }
+}
 
 function showHideSettings() {
   console.log('showHideSettings')
@@ -391,7 +334,7 @@ watch(currentScoreCode, () => {
      -->
   <div>
     <div>
-      <div class="at-wrap">
+      <div ref="wrapRef" class="at-wrap">
         <div class="at-overlay">
           <div class="at-overlay-content">
             Music sheet is loading
@@ -404,7 +347,7 @@ watch(currentScoreCode, () => {
             </div>
           </div>
           <div class="at-viewport">
-            <div class="at-main" />
+            <div ref="mainRef" class="at-main" />
           </div>
         </div>
         <div class="at-controls">
@@ -485,7 +428,7 @@ watch(currentScoreCode, () => {
       <button class="left-align" @click="showHideSettings">
         Settings
       </button>
-      <div :id="divId" class="scoreContainer22" />
+      <div class="scoreContainer22" />
 
       <div v-show="settingsStatus" id="tabSettingsArea22">
         <div id="paneContainerXml22" />
@@ -515,11 +458,6 @@ watch(currentScoreCode, () => {
 </template>
 
 <style scoped>
-body {
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 12px;
-}
-
 .at-wrap {
   width: 80vw;
   height: 80vh;

frontend/src/components/AlphaTexDL.vue

@@ -0,0 +1,610 @@
+<script setup>
+import { computed, onMounted, onUnmounted, onUpdated, ref, toRaw, watch } from 'vue'
+import { Pane } from 'tweakpane'
+import formatDuration from '@/utils/timeUtils.js'
+
+const props = defineProps({
+  alphaTex: {
+    type: String,
+    required: false,
+  },
+})
+
+const emit = defineEmits(['updateScoreCode'])
+
+// const openSheetMusicDisplay = null
+// const timeoutID = null
+let pane = null
+let api = null
+let wrapper = null
+let settings = null
+let timeoutID = null
+
+// const message = ref('hello')
+const currentScoreCode = ref(props.alphaTex)
+const showParsingError = ref(false)
+const parsingError = ref('')
+// const count = ref(0)
+const settingsStatus = ref(false)
+const isActive = ref(false)
+const wrapRef = ref(null)
+const mainRef = ref(null)
+const viewPortRef = ref(null)
+const paneContainer = ref(null)
+const canvasRef = ref(null)
+
+const tracks = ref([])
+const songPosition = ref('00:00 / 00:00')
+const previousTime = -1
+const title = ref('')
+const artist = ref('')
+const isPlaying = ref(false)
+const selectedLayout = ref('page')
+const isZoomMenuVisible = ref(false)
+const selectedZoom = ref(100)
+const zoomOptions = [
+  { value: '25', label: '25%' },
+  { value: '50', label: '50%' },
+  { value: '75', label: '75%' },
+  { value: '90', label: '90%' },
+  { value: '100', label: '100%' },
+  { value: '110', label: '110%' },
+  { value: '125', label: '125%' },
+  { value: '150', label: '150%' },
+  { value: '200', label: '200%' },
+]
+const metronomeIsActive = ref(false)
+// const loopIsActive = ref(false)
+
+const CANVAS_SIZE_X = 600
+const CANVAS_SIZE_Y = 300
+const CANVAS_SCALE = 1
+const isMouseDown = false
+let mousePressed = false
+const hasIntroText = true
+let lastX = 0
+let lastY = 0
+let isFirstCurve = true
+let ctx = null
+
+const SETTINGS_PARAMS = {
+  scale: 1.0,
+  stretchForce: 1.0,
+  // width: 800,
+  // factor: 123,
+  // title: 'hello',
+  // color: '#ff0055',
+  // percentage: 50,
+  // theme: 'dark',
+  // prop: 'Put your\nmultiline\ntext here!'
+}
+
+// const divId = computed(() => {
+//   return `xmlScoreContainer_${props.id}`
+// })
+
+function initializePane() {
+  pane = new Pane({
+    container: paneContainer.value,
+    title: 'Notation Settings',
+  },
+  )
+  pane.addBinding(SETTINGS_PARAMS, 'scale', {
+    min: 0.1,
+    max: 2.0,
+    step: 0.1,
+  }).on('change', (ev) => {
+    console.log(ev.value)
+    api.settings.display.scale = ev.value
+    api.updateSettings()
+    api.render()
+  })
+  pane.addBinding(SETTINGS_PARAMS, 'stretchForce', {
+    min: 0.1,
+    max: 2.0,
+    step: 0.1,
+  }).on('change', (ev) => {
+    console.log(ev.value)
+    api.settings.display.stretchForce = ev.value
+    api.updateSettings()
+    api.render()
+  })
+}
+
+onUnmounted(() => {
+  console.log('onUnmounted')
+  // pane = null
+  api = null
+  wrapper = null
+  settings = null
+})
+
+onMounted(() => {
+  // console.log($(`#${divId.value}`)[0])
+  initializePane()
+  // wrapper = document.querySelector('.at-wrap')
+  // main = wrapper.querySelector('.at-main')
+  wrapper = wrapRef.value
+  // initialize alphatab
+  settings = {
+    // file: 'https://www.alphatab.net/files/canon.gp',
+    // file: '/Fantasia_no.2.musicxml.gpx',
+    player: {
+      enablePlayer: true,
+      soundFont: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/soundfont/sonivox.sf2',
+      scrollElement: viewPortRef.value,
+
+    },
+    display: {
+      // barsPerRow: 3,
+      layoutMode: alphaTab.LayoutMode.Horizontal,
+      padding: [0, 0, 0, 0],
+      stretchForce: 1,
+    },
+    notation: {
+      elements: {
+        scoreTitle: false,
+        trackNames: false,
+        guitarTuning: false,
+      },
+    },
+    staveProfile: alphaTab.StaveProfile.Score,
+  }
+  initAlphaTab()
+
+  ctx = canvasRef.value.getContext('2d')
+  ctx.lineWidth = 2
+  ctx.lineJoin = 'round'
+  ctx.lineCap = 'round'
+  ctx.font = '20px sans-serif'
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.fillStyle = '#212121'
+  ctx.fillText('Draw a curve!', 600 / 2, 300 / 2)
+
+  // Set the line color for the canvas.
+  ctx.strokeStyle = '#212121'
+
+  // function drawLine(fromX, fromY, toX, toY) {
+  // // Draws a line from (fromX, fromY) to (toX, toY).
+  //   ctx.beginPath()
+  //   ctx.moveTo(fromX, fromY)
+  //   ctx.lineCap = 'round'
+  //   ctx.lineTo(toX, toY)
+  //   ctx.closePath()
+  //   ctx.stroke()
+})
+
+function Draw(x, y, isDown) {
+  if (isFirstCurve) {
+    ctx.clearRect(0, 0, CANVAS_SIZE_X, CANVAS_SIZE_Y)
+    isFirstCurve = false
+  }
+  if (isDown) {
+    ctx.beginPath()
+    // ctx.strokeStyle = $('#selColor').val();
+    // ctx.lineWidth = $('#selWidth').val();
+    // ctx.lineJoin = "round";
+    ctx.moveTo(lastX, lastY)
+    ctx.lineTo(x, y)
+    ctx.closePath()
+    ctx.stroke()
+  }
+  lastX = x
+  lastY = y
+}
+// function canvasMouseDown(e) {
+//   mousePressed = true
+//   Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false)
+// }
+function canvasMouseDown(e) {
+  const rect = e.target.getBoundingClientRect()
+  const mouseX = e.clientX - rect.left
+  const mouseY = e.clientY - rect.top
+
+  mousePressed = true
+  Draw(mouseX, mouseY, false)
+}
+function canvasMouseMove(e) {
+  if (mousePressed) {
+    const rect = e.target.getBoundingClientRect()
+    const mouseX = e.clientX - rect.left
+    const mouseY = e.clientY - rect.top
+
+    Draw(mouseX, mouseY, true)
+  }
+}
+function canvasMouseUp(e) {
+  mousePressed = false
+  const imgData = ctx.getImageData(0, 0, CANVAS_SIZE_X, CANVAS_SIZE_Y)
+  console.log(imgData)
+  // curveList.push(imgData)
+}
+function canvasMouseOut(e) {
+  mousePressed = false
+}
+function updateZoom() {
+  // Handle zoom update logic here
+  // const zoomLevel = Number.parseInt(zoom.value) / 100
+  api.settings.display.scale = selectedZoom.value / 100
+  api.updateSettings()
+  api.render()
+}
+
+function scoreExport() {
+  const exporter = new alphaTab.exporter.Gp7Exporter()
+  const data = exporter.export(api.score, api.settings)
+
+  // trigger download
+  const a = document.createElement('a')
+  a.download = api.score.title.length > 0 ? `${api.score.title}.gp` : 'Untitled.gp'
+  a.href = URL.createObjectURL(new Blob([data]))
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+
+function handleKeyUp(event) {
+  if (timeoutID)
+    clearTimeout(timeoutID)
+  timeoutID = setTimeout(showScore, 500)
+}
+
+// function handleDrop(event) {
+//   event.preventDefault()
+//   const textData = event.dataTransfer.getData('text')
+//   const file = event.dataTransfer.files[0]
+//   console.log(textData)
+//   console.log(file)
+//   if (file) {
+//     const reader = new FileReader()
+//     reader.onload = function (e) {
+//       currentScoreCode.value = e.target.result
+//       showScore()
+//     }
+//     reader.readAsText(file)
+//   }
+//   else if (textData) {
+//     currentScoreCode.value = textData
+//     showScore()
+//   }
+// }
+
+function showScore() {
+  try {
+    api.tex(currentScoreCode.value)
+    showParsingError.value = false
+  }
+  catch (e) {
+    showParsingError.value = true
+    console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
+    parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
+  }
+}
+
+function initAlphaTab() {
+  console.log('initAlphaTab')
+  api = new alphaTab.AlphaTabApi(mainRef.value, settings)
+  // api.tex(`
+  // \\title 'Test' . 3.3.4
+  // :4 2.3 3.3 :8 3.3 4.3 3.3 4.3 |
+  // `)
+  api.tex(currentScoreCode.value)
+
+  // overlay logic
+  const overlay = wrapper.querySelector('.at-overlay')
+  api.renderStarted.on(() => {
+    overlay.style.display = 'flex'
+  })
+  api.renderFinished.on(() => {
+    overlay.style.display = 'none'
+  })
+
+  /** Controls */
+  api.scoreLoaded.on((score) => {
+    title.value = score.title
+    artist.value = score.artist
+  })
+
+  api.playerStateChanged.on((e) => {
+    isPlaying.value = e.state
+  })
+  api.playerPositionChanged.on((e) => {
+    // reduce number of UI updates to second changes.
+    const currentSeconds = (e.currentTime / 1000) | 0
+    if (currentSeconds > previousTime)
+      songPosition.value = `${formatDuration(e.currentTime)} / ${formatDuration(e.endTime)}`
+  })
+}
+
+function showHideSettings() {
+  console.log('showHideSettings')
+  settingsStatus.value = !settingsStatus.value
+}
+
+// invoked when there is any type of change in the component
+onUpdated(() => {
+  if (props.isActive !== isActive.value) {
+    // Prop has changed, update the ref and emit an event
+    if (props.isActive) {
+      isActive.value = props.isActive
+      emit('updateScoreCode', currentScoreCode.value)
+      // console.log("emitted updateScoreCode");
+      // console.log(currentScoreCode.value);
+    }
+    isActive.value = props.isActive
+  }
+})
+
+// watch(currentScoreCode, () => {
+//   // Emit the event so that the parent component can update the tabText
+//   // prop
+//   emit('updateScoreCode', currentScoreCode.value)
+//   // console.log("emitted updateScoreCode");
+//   // console.log(currentScoreCode.value);
+// })
+watch(currentScoreCode, () => {
+  // Emit the event so that the parent component can update the tabText
+  // prop
+  emit('updateScoreCode', currentScoreCode.value)
+  console.log('emitted updateScoreCode')
+  // this should go to the first tab that is shown (for now vextab)
+}, { immediate: true })
+
+// const moveCursor = () => {
+//     openSheetMusicDisplay.cursor.next();
+// };
+
+// const fillScore = () => {
+//     // console.log(vt);
+//     // Perform any logic to fill the score
+//     response.value = 'Button pressed!'; // Update response if needed
+
+// };
+</script>
+
+<template>
+  <div>
+    <div
+      ref="wrapRef"
+      class="at-wrap"
+    >
+      <div class="canvasWrapper">
+        <canvas
+          ref="canvasRef" class="canvas"
+          width="600" height="300"
+          @mousedown="canvasMouseDown"
+          @mousemove="canvasMouseMove"
+          @mouseup="canvasMouseUp"
+          @mouseout="canvasMouseOut"
+        />
+      </div>
+
+      <div class="at-overlay">
+        <div class="at-overlay-content">
+          Music sheet is loading
+        </div>
+      </div>
+      <div class="at-content">
+        <div ref="viewPortRef" class="at-viewport">
+          <div ref="mainRef" class="at-main" />
+        </div>
+      </div>
+      <div class="at-controls">
+        <div class="at-controls-left">
+          <button class="btn i-fad:rew" @click="api.stop()" />
+          <button class="btn" :class="{ 'i-fad:play': !isPlaying, 'i-fad:pause': isPlaying }" @click="api.playPause()" />
+
+          <div class="at-song-info">
+            {{ title }} - {{ artist }}
+          </div>
+          <div class="at-song-position">
+            {{ songPosition }}
+          </div>
+        </div>
+        <div class="at-controls-right">
+          <!-- <div :class="{ active: metronomeIsActive }">
+            <button class="btn i-fad:metronome" @click="toggleMetronome" />
+          </div> -->
+          <!-- <div>
+            <button class="btn i-fad:repeat" :class="{ active: loopingIsActive }" @click="toggleLooping" />
+          </div> -->
+          <div :class="{ active: settingsStatus }">
+            <button class="btn i-fa:edit" @click="showHideSettings" />
+          </div>
+
+          <div>
+            <button class="btn i-foundation:print" @click="api.print()" />
+          </div>
+
+          <div>
+            <button class="btn i-foundation:page-export" @click="scoreExport" />
+          </div>
+
+          <div class="at-zoom">
+            <!-- <button class="btn i-fad:zoomin" @click="toggleZoomMenu" /> -->
+            <select v-model="selectedZoom" @change="updateZoom">
+              <option v-for="zoomOption in zoomOptions" :key="zoomOption.value" :value="zoomOption.value">
+                {{ zoomOption.label }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-show="settingsStatus" id="tabSettingsArea">
+      <div ref="paneContainer" />
+      <textarea
+        v-model="currentScoreCode"
+        class="editorBox"
+        placeholder="add your musicxml code here or drag a file"
+        @keyup="handleKeyUp"
+        @drop="handleDrop"
+        @dragover.prevent
+      />
+    </div>
+    <div v-if="showParsingError" class="parsing-error" v-html="parsingError" />
+  </div>
+
+  <!-- </div> -->
+</template>
+
+<style scoped>
+#tabSettingsArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+  margin-left: 10px;
+}
+.at-wrap {
+  width: 60vw;
+  /* width:90%; */
+  /* height: 50vh; */
+  margin: 0 auto;
+  /* border: 1px solid rgba(0, 0, 0, 0.12); */
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  justify-content: center;
+}
+.at-content {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+}
+
+.canvas-wrapper {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+  background-color: green;
+}
+.canvas {
+  background-color: var(--accent-color2);
+  width: 600px;
+  height: 300px;
+}
+.at-viewport {
+  flex: 100%;
+  overflow-y: scroll;
+  /* position: absolute;
+  top: 0;
+  left: 70px;
+  right: 0;
+  bottom: 0;
+  padding-right: 20px; */
+}
+
+.at-sidebar {
+  /* position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  max-width: 70px;
+  width: auto; */
+  flex: 0%;
+  display: flex;
+  align-content: stretch;
+  justify-content: center;
+  max-width: 70px;
+  z-index: 1001;
+  overflow: hidden;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  background: #862b2b;
+
+}
+
+.at-track-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.at-controls {
+  /* flex: 0 0 auto; */
+  display: flex;
+  justify-content: space-between;
+  background: #7b8379;
+  color: #e2e2c3;
+}
+
+.at-controls > div {
+  display: flex;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: center;
+}
+
+.at-controls > div > * {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px;
+  margin: 0 3px;
+}
+
+.at-controls .btn {
+  color: #e2e2c3;
+  /* border-radius: 0; */
+  height: 40px;
+  width: 40px;
+  font-size: 16px;
+}
+
+.at-controls .active {
+  background-color: #85b379;
+  /* text-decoration: none; */
+}
+
+.at-controls select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  width: 100%;
+  height: 40px;
+  background: #85b379;
+  padding: 4px 10px;
+  color: #e2e2c3;
+  font-size: 16px;
+  text-align-last: center;
+  text-align: center;
+  -ms-text-align-last: center;
+  -moz-text-align-last: center;
+  cursor: pointer;
+}
+
+/* .at-song-title {
+  font-weight: bold;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+} */
+
+.at-cursor-bar {
+  /* Defines the color of the bar background when a bar is played */
+  background: rgba(255, 242, 0, 0.25);
+}
+
+.at-selection div {
+  /* Defines the color of the selection background */
+  background: rgba(64, 64, 255, 0.1);
+}
+
+.at-cursor-beat {
+  /* Defines the beat cursor */
+  background: rgba(64, 64, 255, 0.75);
+  width: 3px;
+}
+
+.at-highlight * {
+  /* Defines the color of the music symbols when they are being played (svg) */
+  fill: #0078ff;
+  stroke: #0078ff;
+}
+</style>

frontend/src/components/AlphaTexWidget.vue

@@ -0,0 +1,554 @@
+<script setup>
+import { computed, onMounted, onUnmounted, onUpdated, ref, toRaw, watch } from 'vue'
+import { Pane } from 'tweakpane'
+import formatDuration from '@/utils/timeUtils.js'
+
+const props = defineProps({
+  // int id
+  id: {
+    type: String,
+    required: true,
+  },
+  alphaTex: {
+    type: String,
+    required: false,
+  },
+  isActive: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+
+})
+
+const emit = defineEmits(['updateScoreCode'])
+
+// const openSheetMusicDisplay = null
+// const timeoutID = null
+let pane = null
+let api = null
+let main = null
+let wrapper = null
+let settings = null
+let timeoutID = null
+
+// const message = ref('hello')
+const currentScoreCode = ref(props.alphaTex)
+const showParsingError = ref(false)
+const parsingError = ref('')
+// const count = ref(0)
+const settingsStatus = ref(false)
+const isActive = ref(false)
+const wrapRef = ref(null)
+const mainRef = ref(null)
+const viewPortRef = ref(null)
+const paneContainer = ref(null)
+
+const tracks = ref([])
+const songPosition = ref('00:00 / 00:00')
+const previousTime = -1
+const title = ref('')
+const artist = ref('')
+const isPlaying = ref(false)
+const selectedLayout = ref('page')
+const isZoomMenuVisible = ref(false)
+const selectedZoom = ref(100)
+const zoomOptions = [
+  { value: '25', label: '25%' },
+  { value: '50', label: '50%' },
+  { value: '75', label: '75%' },
+  { value: '90', label: '90%' },
+  { value: '100', label: '100%' },
+  { value: '110', label: '110%' },
+  { value: '125', label: '125%' },
+  { value: '150', label: '150%' },
+  { value: '200', label: '200%' },
+]
+const metronomeIsActive = ref(false)
+// const loopIsActive = ref(false)
+
+const SETTINGS_PARAMS = {
+  scale: 1.0,
+  // width: 800,
+  // factor: 123,
+  // title: 'hello',
+  // color: '#ff0055',
+  // percentage: 50,
+  // theme: 'dark',
+  // prop: 'Put your\nmultiline\ntext here!'
+}
+
+// const divId = computed(() => {
+//   return `xmlScoreContainer_${props.id}`
+// })
+
+function initializePane() {
+  pane = new Pane({
+    container: paneContainer.value,
+    title: 'MusicXML Settings',
+  },
+  )
+  pane.addBinding(SETTINGS_PARAMS, 'scale', {
+    min: 0.1,
+    max: 2.0,
+    step: 0.1,
+  }).on('change', (ev) => {
+    console.log(ev.value)
+    api.settings.display.scale = ev.value
+    api.updateSettings()
+    api.render()
+  })
+}
+
+onUnmounted(() => {
+  console.log('onUnmounted')
+  // pane = null
+  api = null
+  main = null
+  wrapper = null
+  settings = null
+})
+
+onMounted(() => {
+  // console.log($(`#${divId.value}`)[0])
+  initializePane()
+  // wrapper = document.querySelector('.at-wrap')
+  // main = wrapper.querySelector('.at-main')
+  wrapper = wrapRef.value
+  main = mainRef.value
+  // initialize alphatab
+  settings = {
+    // file: 'https://www.alphatab.net/files/canon.gp',
+    // file: '/Fantasia_no.2.musicxml.gpx',
+    player: {
+      enablePlayer: true,
+      soundFont: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/soundfont/sonivox.sf2',
+      scrollElement: viewPortRef.value,
+
+    },
+  }
+  initAlphaTab()
+})
+
+function renderTrack(track) {
+  // Assuming you have an API method to render tracks
+  // Example: api.renderTracks([track]);
+  api.renderTracks([toRaw(track)])
+}
+
+function updateLayout() {
+  switch (selectedLayout.value) {
+    case 'horizontal':
+      api.settings.display.layoutMode = alphaTab.LayoutMode.Horizontal
+      break
+    case 'page':
+      api.settings.display.layoutMode = alphaTab.LayoutMode.Page
+      break
+  }
+  api.updateSettings()
+  api.render()
+}
+
+// function toggleZoomMenu() {
+//   isZoomMenuVisible.value = !isZoomMenuVisible.value
+// }
+
+function updateZoom() {
+  // Handle zoom update logic here
+  // const zoomLevel = Number.parseInt(zoom.value) / 100
+  api.settings.display.scale = selectedZoom.value / 100
+  api.updateSettings()
+  api.render()
+}
+
+function scoreExport() {
+  const exporter = new alphaTab.exporter.Gp7Exporter()
+  const data = exporter.export(api.score, api.settings)
+
+  // trigger download
+  const a = document.createElement('a')
+  a.download = api.score.title.length > 0 ? `${api.score.title}.gp` : 'Untitled.gp'
+  a.href = URL.createObjectURL(new Blob([data]))
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+
+function toggleMetronome() {
+  metronomeIsActive.value = !metronomeIsActive.value
+  if (metronomeIsActive.value)
+    api.metronomeVolume = 1
+
+  else
+    api.metronomeVolume = 0
+}
+
+function handleKeyUp(event) {
+  if (timeoutID)
+    clearTimeout(timeoutID)
+  timeoutID = setTimeout(showScore, 500)
+}
+
+// function handleDrop(event) {
+//   event.preventDefault()
+//   const textData = event.dataTransfer.getData('text')
+//   const file = event.dataTransfer.files[0]
+//   console.log(textData)
+//   console.log(file)
+//   if (file) {
+//     const reader = new FileReader()
+//     reader.onload = function (e) {
+//       currentScoreCode.value = e.target.result
+//       showScore()
+//     }
+//     reader.readAsText(file)
+//   }
+//   else if (textData) {
+//     currentScoreCode.value = textData
+//     showScore()
+//   }
+// }
+
+function showScore() {
+  try {
+    api.tex(currentScoreCode.value)
+    showParsingError.value = false
+  }
+  catch (e) {
+    showParsingError.value = true
+    console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
+    parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
+  }
+}
+
+function initAlphaTab() {
+  console.log('initAlphaTab')
+  api = new alphaTab.AlphaTabApi(main, settings)
+  // api.tex(`
+  // \\title 'Test' . 3.3.4
+  // :4 2.3 3.3 :8 3.3 4.3 3.3 4.3 |
+  // `)
+  api.tex(currentScoreCode.value)
+
+  // overlay logic
+  const overlay = wrapper.querySelector('.at-overlay')
+  api.renderStarted.on(() => {
+    overlay.style.display = 'flex'
+  })
+  api.renderFinished.on(() => {
+    overlay.style.display = 'none'
+  })
+
+  // track selector
+  api.scoreLoaded.on((score) => {
+    tracks.value = score.tracks
+  })
+
+  api.renderStarted.on(() => {
+  })
+
+  /** Controls */
+  api.scoreLoaded.on((score) => {
+    title.value = score.title
+    artist.value = score.artist
+  })
+
+  api.playerStateChanged.on((e) => {
+    isPlaying.value = e.state
+  })
+  api.playerPositionChanged.on((e) => {
+    // reduce number of UI updates to second changes.
+    const currentSeconds = (e.currentTime / 1000) | 0
+    if (currentSeconds > previousTime)
+      songPosition.value = `${formatDuration(e.currentTime)} / ${formatDuration(e.endTime)}`
+  })
+}
+
+function showHideSettings() {
+  console.log('showHideSettings')
+  settingsStatus.value = !settingsStatus.value
+}
+
+// invoked when there is any type of change in the component
+onUpdated(() => {
+  if (props.isActive !== isActive.value) {
+    // Prop has changed, update the ref and emit an event
+    if (props.isActive) {
+      isActive.value = props.isActive
+      emit('updateScoreCode', currentScoreCode.value)
+      // console.log("emitted updateScoreCode");
+      // console.log(currentScoreCode.value);
+    }
+    isActive.value = props.isActive
+  }
+})
+
+// watch(currentScoreCode, () => {
+//   // Emit the event so that the parent component can update the tabText
+//   // prop
+//   emit('updateScoreCode', currentScoreCode.value)
+//   // console.log("emitted updateScoreCode");
+//   // console.log(currentScoreCode.value);
+// })
+watch(currentScoreCode, () => {
+  // Emit the event so that the parent component can update the tabText
+  // prop
+  emit('updateScoreCode', currentScoreCode.value)
+  console.log('emitted updateScoreCode')
+  // this should go to the first tab that is shown (for now vextab)
+}, { immediate: true })
+
+// const moveCursor = () => {
+//     openSheetMusicDisplay.cursor.next();
+// };
+
+// const fillScore = () => {
+//     // console.log(vt);
+//     // Perform any logic to fill the score
+//     response.value = 'Button pressed!'; // Update response if needed
+
+// };
+</script>
+
+<template>
+  <div>
+    <div
+      ref="wrapRef"
+      class="at-wrap"
+    >
+      <div class="at-overlay">
+        <div class="at-overlay-content">
+          Music sheet is loading
+        </div>
+      </div>
+      <div class="at-content">
+        <div class="at-sidebar">
+          <div class="at-track-list">
+            <div v-for="track in tracks" :key="track.index" class="at-track" @click="renderTrack(track)">
+              <div class="at-track-icon">
+                <i class="i-fa:music" />
+              </div>
+              <div class="at-track-details">
+                <div class="at-track-name">
+                  {{ track.name }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div ref="viewPortRef" class="at-viewport">
+          <div ref="mainRef" class="at-main" />
+        </div>
+      </div>
+      <div class="at-controls">
+        <div class="at-controls-left">
+          <button class="btn i-fad:rew" @click="api.stop()" />
+          <button class="btn" :class="{ 'i-fad:play': !isPlaying, 'i-fad:pause': isPlaying }" @click="api.playPause()" />
+
+          <div class="at-song-info">
+            {{ title }} - {{ artist }}
+          </div>
+          <div class="at-song-position">
+            {{ songPosition }}
+          </div>
+        </div>
+        <div class="at-controls-right">
+          <div :class="{ active: metronomeIsActive }">
+            <button class="btn i-fad:metronome" @click="toggleMetronome" />
+          </div>
+          <!-- <div>
+            <button class="btn i-fad:repeat" :class="{ active: loopingIsActive }" @click="toggleLooping" />
+          </div> -->
+          <div :class="{ active: settingsStatus }">
+            <button class="btn i-fa:edit" @click="showHideSettings" />
+          </div>
+
+          <div>
+            <button class="btn i-foundation:print" @click="api.print()" />
+          </div>
+
+          <div>
+            <button class="btn i-foundation:page-export" @click="scoreExport" />
+          </div>
+
+          <div class="at-zoom">
+            <!-- <button class="btn i-fad:zoomin" @click="toggleZoomMenu" /> -->
+            <select v-model="selectedZoom" @change="updateZoom">
+              <option v-for="zoomOption in zoomOptions" :key="zoomOption.value" :value="zoomOption.value">
+                {{ zoomOption.label }}
+              </option>
+            </select>
+          </div>
+          <div class="at-layout">
+            <select v-model="selectedLayout" @change="updateLayout">
+              <option value="horizontal">
+                Horizontal
+              </option>
+              <option value="page">
+                Page
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-show="settingsStatus" id="tabSettingsArea">
+      <div ref="paneContainer" />
+      <textarea
+        v-model="currentScoreCode"
+        class="editorBox"
+        placeholder="add your musicxml code here or drag a file"
+        @keyup="handleKeyUp"
+        @drop="handleDrop"
+        @dragover.prevent
+      />
+    </div>
+    <div v-if="showParsingError" class="parsing-error" v-html="parsingError" />
+  </div>
+
+  <!-- </div> -->
+</template>
+
+<style scoped>
+#tabSettingsArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+  margin-left: 10px;
+}
+.at-wrap {
+  width: 50vw;
+  height: 50vh;
+  margin: 0 auto;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+.at-content {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+}
+.at-viewport {
+  flex: 100%;
+  overflow-y: scroll;
+  /* position: absolute;
+  top: 0;
+  left: 70px;
+  right: 0;
+  bottom: 0;
+  padding-right: 20px; */
+}
+
+.at-sidebar {
+  /* position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  max-width: 70px;
+  width: auto; */
+  flex: 0%;
+  display: flex;
+  align-content: stretch;
+  justify-content: center;
+  max-width: 70px;
+  z-index: 1001;
+  overflow: hidden;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  background: #862b2b;
+
+}
+
+.at-track-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.at-controls {
+  /* flex: 0 0 auto; */
+  display: flex;
+  justify-content: space-between;
+  background: #329e17;
+  color: #e2e2c3;
+}
+
+.at-controls > div {
+  display: flex;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: center;
+}
+
+.at-controls > div > * {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px;
+  margin: 0 3px;
+}
+
+.at-controls .btn {
+  color: #e2e2c3;
+  /* border-radius: 0; */
+  height: 40px;
+  width: 40px;
+  font-size: 16px;
+}
+
+.at-controls .active {
+  background-color: #5bbb43;
+  /* text-decoration: none; */
+}
+
+.at-controls select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  width: 100%;
+  height: 40px;
+  background: #5bbb43;
+  padding: 4px 10px;
+  color: #e2e2c3;
+  font-size: 16px;
+  text-align-last: center;
+  text-align: center;
+  -ms-text-align-last: center;
+  -moz-text-align-last: center;
+  cursor: pointer;
+}
+
+/* .at-song-title {
+  font-weight: bold;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+} */
+
+.at-cursor-bar {
+  /* Defines the color of the bar background when a bar is played */
+  background: rgba(255, 242, 0, 0.25);
+}
+
+.at-selection div {
+  /* Defines the color of the selection background */
+  background: rgba(64, 64, 255, 0.1);
+}
+
+.at-cursor-beat {
+  /* Defines the beat cursor */
+  background: rgba(64, 64, 255, 0.75);
+  width: 3px;
+}
+
+.at-highlight * {
+  /* Defines the color of the music symbols when they are being played (svg) */
+  fill: #0078ff;
+  stroke: #0078ff;
+}
+</style>

frontend/src/components/MusicXmlWidget2.vue

@@ -0,0 +1,559 @@
+<script setup>
+import { computed, onMounted, onUnmounted, onUpdated, ref, toRaw, watch } from 'vue'
+import { Pane } from 'tweakpane'
+import { OpenSheetMusicDisplay } from 'opensheetmusicdisplay'
+import formatDuration from '@/utils/timeUtils.js'
+
+const props = defineProps({
+  // int id
+  id: {
+    type: String,
+    required: true,
+  },
+  // xmlText: {
+  //   type: String,
+  //   required: false,
+  // },
+  xmlText: {
+    type: String,
+    required: false,
+  },
+  isActive: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+
+})
+
+const emit = defineEmits(['updateScoreCode'])
+
+let pane = null
+let api = null
+let main = null
+let wrapper = null
+let settings = null
+let timeoutID = null
+let openSheetMusicDisplay = null
+
+// const message = ref('hello')
+const currentScoreCode = ref(props.xmlText)
+const showParsingError = ref(false)
+const parsingError = ref('')
+// const count = ref(0)
+const settingsStatus = ref(false)
+const isActive = ref(false)
+const wrapRef = ref(null)
+const mainRef = ref(null)
+const viewPortRef = ref(null)
+const paneContainer = ref(null)
+
+const tracks = ref([])
+const songPosition = ref('00:00 / 00:00')
+const previousTime = -1
+const title = ref('')
+const artist = ref('')
+const isPlaying = ref(false)
+const selectedLayout = ref('page')
+const isZoomMenuVisible = ref(false)
+const selectedZoom = ref(100)
+const zoomOptions = [
+  { value: '25', label: '25%' },
+  { value: '50', label: '50%' },
+  { value: '75', label: '75%' },
+  { value: '90', label: '90%' },
+  { value: '100', label: '100%' },
+  { value: '110', label: '110%' },
+  { value: '125', label: '125%' },
+  { value: '150', label: '150%' },
+  { value: '200', label: '200%' },
+]
+const metronomeIsActive = ref(false)
+// const loopIsActive = ref(false)
+
+const SETTINGS_PARAMS = {
+  scale: 1.0,
+  // width: 800,
+  // factor: 123,
+  // title: 'hello',
+  // color: '#ff0055',
+  // percentage: 50,
+  // theme: 'dark',
+  // prop: 'Put your\nmultiline\ntext here!'
+}
+
+// const divId = computed(() => {
+//   return `xmlScoreContainer_${props.id}`
+// })
+
+function initializePane() {
+  pane = new Pane({
+    container: paneContainer.value,
+    title: 'MusicXML Settings',
+  },
+  )
+  pane.addBinding(SETTINGS_PARAMS, 'scale', {
+    min: 0.1,
+    max: 2.0,
+    step: 0.1,
+  }).on('change', (ev) => {
+    console.log(ev.value)
+    openSheetMusicDisplay.zoom = ev.value
+    openSheetMusicDisplay.render()
+  })
+}
+
+onUnmounted(() => {
+  console.log('onUnmounted')
+  // pane = null
+  api = null
+  main = null
+  wrapper = null
+  settings = null
+})
+
+onMounted(async () => {
+  // console.log($(`#${divId.value}`)[0])
+  initializePane()
+  // wrapper = document.querySelector('.at-wrap')
+  // main = wrapper.querySelector('.at-main')
+  wrapper = wrapRef.value
+  main = mainRef.value
+  // initialize alphatab
+  // settings = {
+  //   // file: 'https://www.alphatab.net/files/canon.gp',
+  //   // file: '/Fantasia_no.2.musicxml.gpx',
+  //   player: {
+  //     enablePlayer: true,
+  //     soundFont: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/soundfont/sonivox.sf2',
+  //     scrollElement: viewPortRef.value,
+
+  //   },
+  // }
+  await initOSMD()
+})
+
+function updateLayout() {
+  switch (selectedLayout.value) {
+    case 'horizontal':
+      openSheetMusicDisplay.renderSingleHorizontalStaffline = true
+      break
+    case 'page':
+      openSheetMusicDisplay.renderSingleHorizontalStaffline = false
+      break
+  }
+  openSheetMusicDisplay.render()
+}
+
+function updateZoom() {
+  // Handle zoom update logic here
+  // const zoomLevel = Number.parseInt(zoom.value) / 100
+  openSheetMusicDisplay.zoom = selectedZoom.value / 100
+  openSheetMusicDisplay.render()
+}
+
+function handleKeyUp(event) {
+  if (timeoutID)
+    clearTimeout(timeoutID)
+  timeoutID = setTimeout(showScore, 500)
+}
+
+function handleDrop(event) {
+  event.preventDefault()
+  const textData = event.dataTransfer.getData('text')
+  const file = event.dataTransfer.files[0]
+  console.log(textData)
+  console.log(file)
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = function (e) {
+      currentScoreCode.value = e.target.result
+      showScore()
+    }
+    reader.readAsText(file)
+  }
+  else if (textData) {
+    currentScoreCode.value = textData
+    showScore()
+  }
+}
+
+function showScore() {
+  openSheetMusicDisplay.clear()
+  console.log(currentScoreCode.value)
+  openSheetMusicDisplay.load(currentScoreCode.value)
+    .then(
+      () => {
+        window.osmd = openSheetMusicDisplay
+        openSheetMusicDisplay.render()
+        // openSheetMusicDisplay.cursor.show();
+        console.log('in load')
+        showParsingError.value = false
+      },
+    )
+    .catch((e) => {
+      showParsingError.value = true
+      console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
+      parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
+    })
+}
+
+async function initOSMD() {
+  // renderer = new Flow.Renderer($('#' + divId.value)[0], Flow.Renderer.Backends.SVG);
+  // artist = new Artist(10, 10, 750, { scale: 0.8 });
+  // tab = new VexTab(artist);
+  openSheetMusicDisplay = new OpenSheetMusicDisplay(mainRef.value, {
+    autoResize: true,
+    backend: 'svg',
+    disableCursor: false,
+    drawingParameters: 'full', // : "default", // try compact (instead of default)
+    drawPartNames: false, // try false
+    drawTitle: false,
+    drawSubtitle: false,
+    drawComposer: false,
+    // darkMode: true,
+    // cursor
+    followCursor: true,
+    drawFingerings: true,
+    // fingeringPosition: "left", // Above/Below is default. try left or right. experimental: above, below.
+    // fingeringPositionFromXML: false, // do this if you want them always left, for example.
+    // fingeringInsideStafflines: "true", // default: false. true draws fingerings directly above/below notes
+    setWantedStemDirectionByXml: true, // try false, which was previously the default behavior
+    // drawUpToMeasureNumber: 20, // draws only up to measure 3, meaning it draws measure 1 to 3 of the piece.
+    // drawFromMeasureNumber : 1,
+    // drawUpToMeasureNumber : 3,
+    drawMeasureNumbers: true,
+
+    // drawMeasureNumbers: false, // disable drawing measure numbers
+    // measureNumberInterval: 4, // draw measure numbers only every 4 bars (and at the beginning of a new system)
+    useXMLMeasureNumbers: true, // read measure numbers from xml
+
+    // coloring options
+    coloringEnabled: true,
+    // defaultColorNotehead: "#CC0055", // try setting a default color. default is black (undefined)
+    // defaultColorStem: "#BB0099",
+
+    autoBeam: false, // try true, OSMD Function Test AutoBeam sample
+    autoBeamOptions: {
+      beam_rests: false,
+      beam_middle_rests_only: false,
+      // groups: [[3,4], [1,1]],
+      maintain_stem_directions: false,
+    },
+    // pageFormat: "A4_P",//"Endless",//pageFormat,
+    // pageBackgroundColor: "red",
+    renderSingleHorizontalStaffline: true, // true
+
+    // tupletsBracketed: true, // creates brackets for all tuplets except triplets, even when not set by xml
+    // tripletsBracketed: true,
+    // tupletsRatioed: true, // unconventional; renders ratios for tuplets (3:2 instead of 3 for triplets)
+  })
+  // window.osmd = openSheetMusicDisplay;
+  // artist.reset();
+  // tab.reset();
+  // tab.parse(currentTabText.value);
+  // artist.render(renderer);
+  await fetch('/Fantasia_no.2.musicxml')
+    .then((response) => {
+      return response.text()
+    })
+    .then((data) => {
+      console.log('in data')
+      openSheetMusicDisplay.load(data)
+        .then(
+          () => {
+            window.osmd = openSheetMusicDisplay
+            openSheetMusicDisplay.render()
+            // openSheetMusicDisplay.cursor.show();
+            console.log('in load')
+            showParsingError.value = false
+            currentScoreCode.value = data
+          },
+        )
+        .catch((e) => {
+          showParsingError.value = true
+          console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'))
+          parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>')
+        })
+
+      // .catch((e) => {
+      //     showParsingError.value = true;
+      //     console.log(e.message.replace(/(?:\r\n|\r|\n)/g, '<br>'));
+      //     parsingError.value = e.message.replace(/(?:\r\n|\r|\n)/g, '<br>');
+      // });
+    })
+
+  // title.value = score.title
+  // artist.value = score.artist
+}
+
+function showHideSettings() {
+  console.log('showHideSettings')
+  settingsStatus.value = !settingsStatus.value
+}
+
+// invoked when there is any type of change in the component
+onUpdated(() => {
+  if (props.isActive !== isActive.value) {
+    // Prop has changed, update the ref and emit an event
+    if (props.isActive) {
+      isActive.value = props.isActive
+      emit('updateScoreCode', currentScoreCode.value)
+      // console.log("emitted updateScoreCode");
+      // console.log(currentScoreCode.value);
+    }
+    isActive.value = props.isActive
+  }
+})
+
+// watch(currentScoreCode, () => {
+//   // Emit the event so that the parent component can update the tabText
+//   // prop
+//   emit('updateScoreCode', currentScoreCode.value)
+//   // console.log("emitted updateScoreCode");
+//   // console.log(currentScoreCode.value);
+// })
+watch(currentScoreCode, () => {
+  // Emit the event so that the parent component can update the tabText
+  // prop
+  emit('updateScoreCode', currentScoreCode.value)
+  console.log('emitted updateScoreCode')
+  // this should go to the first tab that is shown (for now vextab)
+}, { immediate: true })
+
+// const moveCursor = () => {
+//     openSheetMusicDisplay.cursor.next();
+// };
+
+// const fillScore = () => {
+//     // console.log(vt);
+//     // Perform any logic to fill the score
+//     response.value = 'Button pressed!'; // Update response if needed
+
+// };
+</script>
+
+<template>
+  <div>
+    <div
+      ref="wrapRef"
+      class="at-wrap"
+    >
+      <!-- <div class="at-overlay">
+        <div class="at-overlay-content">
+          Music sheet is loading
+        </div>
+      </div> -->
+      <div class="at-content">
+        <!-- <div class="at-sidebar">
+          <div class="at-track-list">
+            <div v-for="track in tracks" :key="track.index" class="at-track" @click="renderTrack(track)">
+              <div class="at-track-icon">
+                <i class="i-fa:music" />
+              </div>
+              <div class="at-track-details">
+                <div class="at-track-name">
+                  {{ track.name }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div> -->
+        <div ref="viewPortRef" class="at-viewport">
+          <div ref="mainRef" class="at-main" />
+        </div>
+      </div>
+      <div class="at-controls">
+        <div class="at-controls-left">
+          <div class="at-song-info">
+            {{ title }} - {{ artist }}
+          </div>
+        </div>
+        <div class="at-controls-right">
+          <div :class="{ active: settingsStatus }">
+            <button class="btn i-fa:edit" @click="showHideSettings" />
+          </div>
+
+          <!-- <div>
+            <button class="btn i-foundation:print" @click="api.print()" />
+          </div>
+
+          <div>
+            <button class="btn i-foundation:page-export" @click="scoreExport" />
+          </div> -->
+
+          <div class="at-zoom">
+            <!-- <button class="btn i-fad:zoomin" @click="toggleZoomMenu" /> -->
+            <select v-model="selectedZoom" @change="updateZoom">
+              <option v-for="zoomOption in zoomOptions" :key="zoomOption.value" :value="zoomOption.value">
+                {{ zoomOption.label }}
+              </option>
+            </select>
+          </div>
+          <div class="at-layout">
+            <select v-model="selectedLayout" @change="updateLayout">
+              <option value="horizontal">
+                Horizontal
+              </option>
+              <option value="page">
+                Page
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-show="settingsStatus" id="tabSettingsArea">
+      <div ref="paneContainer" />
+      <textarea
+        v-model="currentScoreCode"
+        class="editorBox"
+        placeholder="add your musicxml code here or drag a file"
+        @keyup="handleKeyUp"
+        @drop="handleDrop"
+        @dragover.prevent
+      />
+    </div>
+    <div v-if="showParsingError" class="parsing-error" v-html="parsingError" />
+  </div>
+
+  <!-- </div> -->
+</template>
+
+<style scoped>
+#tabSettingsArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+  margin-left: 10px;
+}
+.at-wrap {
+  width: 50vw;
+  height: 50vh;
+  margin: 0 auto;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+.at-content {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+}
+.at-viewport {
+  flex: 100%;
+  overflow-y: scroll;
+  /* position: absolute;
+  top: 0;
+  left: 70px;
+  right: 0;
+  bottom: 0;
+  padding-right: 20px; */
+}
+
+/* .at-sidebar {
+
+  flex: 15%;
+  display: flex;
+  align-content: stretch;
+  justify-content: center;
+  max-width: 70px;
+  z-index: 1001;
+  overflow: hidden;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  background: #862b2b;
+} */
+
+.at-track-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.at-controls {
+  /* flex: 0 0 auto; */
+  display: flex;
+  justify-content: space-between;
+  background: #329e17;
+  color: #e2e2c3;
+}
+
+.at-controls > div {
+  display: flex;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: center;
+}
+
+.at-controls > div > * {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px;
+  margin: 0 3px;
+}
+
+.at-controls .btn {
+  color: #e2e2c3;
+  /* border-radius: 0; */
+  height: 40px;
+  width: 40px;
+  font-size: 16px;
+}
+
+.at-controls .active {
+  background-color: #5bbb43;
+  /* text-decoration: none; */
+}
+
+.at-controls select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  width: 100%;
+  height: 40px;
+  background: #5bbb43;
+  padding: 4px 10px;
+  color: #e2e2c3;
+  font-size: 16px;
+  text-align-last: center;
+  text-align: center;
+  -ms-text-align-last: center;
+  -moz-text-align-last: center;
+  cursor: pointer;
+}
+
+/* .at-song-title {
+  font-weight: bold;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+} */
+
+.at-cursor-bar {
+  /* Defines the color of the bar background when a bar is played */
+  background: rgba(255, 242, 0, 0.25);
+}
+
+.at-selection div {
+  /* Defines the color of the selection background */
+  background: rgba(64, 64, 255, 0.1);
+}
+
+.at-cursor-beat {
+  /* Defines the beat cursor */
+  background: rgba(64, 64, 255, 0.75);
+  width: 3px;
+}
+
+.at-highlight * {
+  /* Defines the color of the music symbols when they are being played (svg) */
+  fill: #0078ff;
+  stroke: #0078ff;
+}
+</style>

frontend/src/components/ScoreWidgetBase.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { computed, onMounted, onUpdated, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, onUpdated, ref, toRaw, watch } from 'vue'
 import { Pane } from 'tweakpane'
+import formatDuration from '@/utils/timeUtils.js'
 
 const props = defineProps({
   // int id
@@ -8,10 +9,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  alphtaText: {
-    type: String,
-    required: false,
-  },
   isActive: {
     type: Boolean,
     required: false,
@@ -22,8 +19,8 @@ const props = defineProps({
 
 const emit = defineEmits(['updateScoreCode'])
 
-const openSheetMusicDisplay = null
-const timeoutID = null
+// const openSheetMusicDisplay = null
+// const timeoutID = null
 let pane = null
 let api = null
 let main = null
@@ -37,6 +34,33 @@ const parsingError = ref('')
 // const count = ref(0)
 const settingsStatus = ref(false)
 const isActive = ref(false)
+const wrapRef = ref(null)
+const mainRef = ref(null)
+const viewPortRef = ref(null)
+const paneContainer = ref(null)
+
+const tracks = ref([])
+const songPosition = ref('00:00 / 00:00')
+const previousTime = -1
+const title = ref('')
+const artist = ref('')
+const isPlaying = ref(false)
+const selectedLayout = ref('page')
+const isZoomMenuVisible = ref(false)
+const selectedZoom = ref(100)
+const zoomOptions = [
+  { value: '25', label: '25%' },
+  { value: '50', label: '50%' },
+  { value: '75', label: '75%' },
+  { value: '90', label: '90%' },
+  { value: '100', label: '100%' },
+  { value: '110', label: '110%' },
+  { value: '125', label: '125%' },
+  { value: '150', label: '150%' },
+  { value: '200', label: '200%' },
+]
+const metronomeIsActive = ref(false)
+// const loopIsActive = ref(false)
 
 const SETTINGS_PARAMS = {
   scale: 1.0,
@@ -49,55 +73,121 @@ const SETTINGS_PARAMS = {
   // prop: 'Put your\nmultiline\ntext here!'
 }
 
-const divId = computed(() => {
-  return `xmlScoreContainer_${props.id}`
-})
+// const divId = computed(() => {
+//   return `xmlScoreContainer_${props.id}`
+// })
 
 function initializePane() {
   pane = new Pane({
-    container: document.getElementById('paneContainerXml'),
+    container: paneContainer.value,
     title: 'MusicXML Settings',
   },
   )
   pane.addBinding(SETTINGS_PARAMS, 'scale', {
-    min: 0.5,
+    min: 0.1,
     max: 2.0,
     step: 0.1,
   }).on('change', (ev) => {
     console.log(ev.value)
-    openSheetMusicDisplay.zoom = ev.value
-    openSheetMusicDisplay.render()
+    api.settings.display.scale = ev.value
+    api.updateSettings()
+    api.render()
   })
 }
 
-onMounted(async () => {
+onUnmounted(() => {
+  console.log('onUnmounted')
+  // pane = null
+  api = null
+  main = null
+  wrapper = null
+  settings = null
+})
+
+onMounted(() => {
   // console.log($(`#${divId.value}`)[0])
   initializePane()
-  wrapper = document.querySelector('.at2-wrap')
-  main = wrapper.querySelector('.at2-main')
+  // wrapper = document.querySelector('.at-wrap')
+  // main = wrapper.querySelector('.at-main')
+  wrapper = wrapRef.value
+  main = mainRef.value
   // initialize alphatab
   settings = {
     // file: 'https://www.alphatab.net/files/canon.gp',
-    // file: '/Fantasia_no.2.musicxml.gpx',
+    file: '/Fantasia_no.2.musicxml.gpx',
     player: {
       enablePlayer: true,
       soundFont: 'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/soundfont/sonivox.sf2',
-      scrollElement: wrapper.querySelector('.at2-viewport'),
+      scrollElement: viewPortRef.value,
+
     },
   }
-  initializeOSMD()
+  initAlphaTab()
 })
 
-function initializeOSMD() {
-  api = new alphaTab.AlphaTabApi(main, settings)
-  api.tex(`
-  \\title 'Test' . 3.3.4
-  :4 2.3 3.3 :8 3.3 4.3 3.3 4.3 |
+function renderTrack(track) {
+  // Assuming you have an API method to render tracks
+  // Example: api.renderTracks([track]);
+  api.renderTracks([toRaw(track)])
+}
 
-  `)
+function updateLayout() {
+  switch (selectedLayout.value) {
+    case 'horizontal':
+      api.settings.display.layoutMode = alphaTab.LayoutMode.Horizontal
+      break
+    case 'page':
+      api.settings.display.layoutMode = alphaTab.LayoutMode.Page
+      break
+  }
+  api.updateSettings()
+  api.render()
+}
+
+// function toggleZoomMenu() {
+//   isZoomMenuVisible.value = !isZoomMenuVisible.value
+// }
+
+function updateZoom() {
+  // Handle zoom update logic here
+  // const zoomLevel = Number.parseInt(zoom.value) / 100
+  api.settings.display.scale = selectedZoom.value / 100
+  api.updateSettings()
+  api.render()
+}
+
+function scoreExport() {
+  const exporter = new alphaTab.exporter.Gp7Exporter()
+  const data = exporter.export(api.score, api.settings)
+
+  // trigger download
+  const a = document.createElement('a')
+  a.download = api.score.title.length > 0 ? `${api.score.title}.gp` : 'Untitled.gp'
+  a.href = URL.createObjectURL(new Blob([data]))
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+}
+
+function toggleMetronome() {
+  metronomeIsActive.value = !metronomeIsActive.value
+  if (metronomeIsActive.value)
+    api.metronomeVolume = 1
+
+  else
+    api.metronomeVolume = 0
+}
+
+function initAlphaTab() {
+  console.log('initAlphaTab')
+  api = new alphaTab.AlphaTabApi(main, settings)
+  // api.tex(`
+  // \\title 'Test' . 3.3.4
+  // :4 2.3 3.3 :8 3.3 4.3 3.3 4.3 |
+  // `)
 
   // overlay logic
-  const overlay = wrapper.querySelector('.at2-overlay')
+  const overlay = wrapper.querySelector('.at-overlay')
   api.renderStarted.on(() => {
     overlay.style.display = 'flex'
   })
@@ -106,170 +196,27 @@ function initializeOSMD() {
   })
 
   // track selector
-  function createTrackItem(track) {
-    const templateElement = document.querySelector('#at2-track-template')
-    const templateContent = templateElement.firstElementChild
-    const clonedNode = templateContent.cloneNode(true)
-    const trackItem = clonedNode.children[1]
-    trackItem.querySelector('.at2-track-name').textContent = track.name
-    trackItem.track = track
-    trackItem.onclick = (e) => {
-      e.stopPropagation()
-      api.renderTracks([track])
-    }
-    return trackItem
-  }
-  const trackList = wrapper.querySelector('.at2-track-list')
   api.scoreLoaded.on((score) => {
-    // clear items
-    trackList.innerHTML = ''
-    // generate a track item for all tracks of the score
-    score.tracks.forEach((track) => {
-      trackList.appendChild(createTrackItem(track))
-    })
+    tracks.value = score.tracks
   })
+
   api.renderStarted.on(() => {
-    // collect tracks being rendered
-    const tracks = new Map()
-    api.tracks.forEach((t) => {
-      tracks.set(t.index, t)
-    })
-    // mark the item as active or not
-    const trackItems = trackList.querySelectorAll('.at2-track')
-    trackItems.forEach((trackItem) => {
-      if (tracks.has(trackItem.track.index))
-        trackItem.classList.add('active')
-
-      else
-        trackItem.classList.remove('active')
-    })
   })
 
   /** Controls */
   api.scoreLoaded.on((score) => {
-    wrapper.querySelector('.at2-song-title').innerText = score.title
-    wrapper.querySelector('.at2-song-artist').innerText = score.artist
+    title.value = score.title
+    artist.value = score.artist
   })
 
-  const countIn = wrapper.querySelector('.at2-controls .at2-count-in')
-  countIn.onclick = () => {
-    countIn.classList.toggle('active')
-    if (countIn.classList.contains('active'))
-      api.countInVolume = 1
-
-    else
-      api.countInVolume = 0
-  }
-
-  const metronome = wrapper.querySelector('.at2-controls .at2-metronome')
-  metronome.onclick = () => {
-    metronome.classList.toggle('active')
-    if (metronome.classList.contains('active'))
-      api.metronomeVolume = 1
-
-    else
-      api.metronomeVolume = 0
-  }
-
-  const loop = wrapper.querySelector('.at2-controls .at2-loop')
-  loop.onclick = () => {
-    loop.classList.toggle('active')
-    api.isLooping = loop.classList.contains('active')
-  }
-
-  wrapper.querySelector('.at2-controls .at2-print').onclick = () => {
-    api.print()
-  }
-
-  const zoom = wrapper.querySelector('.at2-controls .at2-zoom select')
-  zoom.onchange = () => {
-    const zoomLevel = Number.parseInt(zoom.value) / 100
-    api.settings.display.scale = zoomLevel
-    api.updateSettings()
-    api.render()
-  }
-
-  const layout = wrapper.querySelector('.at2-controls .at2-layout select')
-  layout.onchange = () => {
-    switch (layout.value) {
-      case 'horizontal':
-        api.settings.display.layoutMode = alphaTab.LayoutMode.Horizontal
-        break
-      case 'page':
-        api.settings.display.layoutMode = alphaTab.LayoutMode.Page
-        break
-    }
-    api.updateSettings()
-    api.render()
-  }
-
-  // player loading indicator
-  const playerIndicator = wrapper.querySelector(
-    '.at2-controls .at2-player-progress',
-  )
-  api.soundFontLoad.on((e) => {
-    const percentage = Math.floor((e.loaded / e.total) * 100)
-    playerIndicator.innerText = `${percentage}%`
-  })
-  api.playerReady.on(() => {
-    playerIndicator.style.display = 'none'
-  })
-
-  // main player controls
-  const playPause = wrapper.querySelector(
-    '.at2-controls .at2-player-play-pause',
-  )
-  const stop = wrapper.querySelector('.at2-controls .at2-player-stop')
-  playPause.onclick = (e) => {
-    if (e.target.classList.contains('disabled'))
-      return
-
-    api.playPause()
-  }
-  stop.onclick = (e) => {
-    if (e.target.classList.contains('disabled'))
-      return
-
-    api.stop()
-  }
-  api.playerReady.on(() => {
-    playPause.classList.remove('disabled')
-    stop.classList.remove('disabled')
-  })
   api.playerStateChanged.on((e) => {
-    const icon = playPause.querySelector('i.fas')
-    if (e.state === alphaTab.synth.PlayerState.Playing) {
-      icon.classList.remove('i-fa:play')
-      icon.classList.add('i-fa:pause')
-    }
-    else {
-      icon.classList.remove('i-fa:pause')
-      icon.classList.add('i-fa:play')
-    }
+    isPlaying.value = e.state
   })
-
-  // song position
-  function formatDuration(milliseconds) {
-    let seconds = milliseconds / 1000
-    const minutes = (seconds / 60) | 0
-    seconds = (seconds - minutes * 60) | 0
-    return (
-      `${String(minutes).padStart(2, '0')
-      }:${
-      String(seconds).padStart(2, '0')}`
-    )
-  }
-
-  const songPosition = wrapper.querySelector('.at2-song-position')
-  const previousTime = -1
   api.playerPositionChanged.on((e) => {
     // reduce number of UI updates to second changes.
     const currentSeconds = (e.currentTime / 1000) | 0
-    if (currentSeconds == previousTime)
-      return
-
-    songPosition.innerText
-      = `${formatDuration(e.currentTime)} / ${formatDuration(e.endTime)}`
+    if (currentSeconds > previousTime)
+      songPosition.value = `${formatDuration(e.currentTime)} / ${formatDuration(e.endTime)}`
   })
 }
 
@@ -313,138 +260,243 @@ watch(currentScoreCode, () => {
 </script>
 
 <template>
-  <!--
-        Which ever of the following elements wants to use the class
-        attributes coming from the parent component needs to use
-        :class="$attrs.class"
-        UNLESS I have a single root div-element
-     -->
   <div>
-    <div>
-      <!-- <div class="at2-wrap"> -->
-      <div class="at2-wrap">
-        <div class="at2-overlay">
-          <div class="at2-overlay-content">
-            Music sheet is loading
-          </div>
+    <div
+      ref="wrapRef"
+      class="at-wrap"
+    >
+      <div class="at-overlay">
+        <div class="at-overlay-content">
+          Music sheet is loading
         </div>
-        <div class="at2-content">
-          <div class="at2-sidebar">
-            <div class="at2-sidebar-content">
-              <div class="at2-track-list" />
+      </div>
+      <div class="at-content">
+        <div class="at-sidebar">
+          <div class="at-track-list">
+            <div v-for="track in tracks" :key="track.index" class="at-track" @click="renderTrack(track)">
+              <div class="at-track-icon">
+                <i class="i-fa:music" />
+              </div>
+              <div class="at-track-details">
+                <div class="at-track-name">
+                  {{ track.name }}
+                </div>
+              </div>
             </div>
           </div>
-          <div class="at2-viewport">
-            <div class="at2-main" />
-          </div>
         </div>
-        <div class="at2-controls">
-          <div class="at2-controls-left">
-            <a class="btn at2-player-stop disabled">
-              <i class="fas i-fa:step-backward"> Begining </i>
-            </a>
-            <a class="btn at2-player-play-pause disabled">
-              <i class="fas i-fa:play">SkAta</i>
-            </a>
-            <span class="at2-player-progress">0%</span>
-            <div class="at2-song-info">
-              <span class="at2-song-title" /> -
-              <span class="at2-song-artist" />
-            </div>
-            <div class="at2-song-position">
-              00:00 / 00:00
-            </div>
-          </div>
-          <div class="at2-controls-right">
-            <a class="btn toggle at2-count-in">
-              <i class="fas fa-hourglass-half" />
-            </a>
-            <a class="btn at2-metronome">
-              <i class="fas i-fa:edit" />
-            </a>
-            <a class="btn at2-loop">
-              <i class="fas i-fa:retweet" />
-            </a>
-            <a class="btn at2-print">
-              <i class="fas i-fa:print" />
-            </a>
-            <div class="at2-zoom">
-              <i class="fas i-fa:search" />
-              <select>
-                <option value="25">
-                  25%
-                </option>
-                <option value="50">
-                  50%
-                </option>
-                <option value="75">
-                  75%
-                </option>
-                <option value="90">
-                  90%
-                </option>
-                <option value="100" selected>
-                  100%
-                </option>
-                <option value="110">
-                  110%
-                </option>
-                <option value="125">
-                  125%
-                </option>
-                <option value="150">
-                  150%
-                </option>
-                <option value="200">
-                  200%
-                </option>
-              </select>
-            </div>
-            <div class="at2-layout">
-              <select>
-                <option value="horizontal">
-                  Horizontal
-                </option>
-                <option value="page" selected>
-                  Page
-                </option>
-              </select>
-            </div>
-          </div>
+        <div ref="viewPortRef" class="at-viewport">
+          <div ref="mainRef" class="at-main" />
         </div>
       </div>
-      <button class="left-align" @click="showHideSettings">
-        Settings
-      </button>
-      <div :id="divId" class="scoreContainer22" />
-
-      <div v-show="settingsStatus" id="tabSettingsArea22">
-        <div id="paneContainerXml22" />
-        <textarea
-          v-model="currentScoreCode"
-          class="editorBox22"
-          placeholder="add your musicxml code here or drag a file"
-          @keyup="handleKeyUp"
-          @drop="handleDrop"
-          @dragover.prevent
-        />
-      </div>
+      <div class="at-controls">
+        <div class="at-controls-left">
+          <button class="btn i-fad:rew" @click="api.stop()" />
+          <button class="btn" :class="{ 'i-fad:play': !isPlaying, 'i-fad:pause': isPlaying }" @click="api.playPause()" />
 
-      <div v-if="showParsingError" class="parsing-error" v-html="parsingError" />
-    </div>
-    <template id="at2-track-template" ref="at2-trackTemplate">
-      <div class="at2-track">
-        <div class="at2-track-icon">
-          <i class="fas fa-guitar" />
+          <div class="at-song-info">
+            {{ title }} - {{ artist }}
+          </div>
+          <div class="at-song-position">
+            {{ songPosition }}
+          </div>
         </div>
-        <div class="at2-track-details">
-          <div class="at2-track-name" />
+        <div class="at-controls-right">
+          <div :class="{ active: metronomeIsActive }">
+            <button class="btn i-fad:metronome" @click="toggleMetronome" />
+          </div>
+          <!-- <div>
+            <button class="btn i-fad:repeat" :class="{ active: loopingIsActive }" @click="toggleLooping" />
+          </div> -->
+          <div :class="{ active: settingsStatus }">
+            <button class="btn i-fa:edit" @click="showHideSettings" />
+          </div>
+
+          <div>
+            <button class="btn i-foundation:print" @click="api.print()" />
+          </div>
+
+          <div>
+            <button class="btn i-foundation:page-export" @click="scoreExport" />
+          </div>
+
+          <div class="at-zoom">
+            <!-- <button class="btn i-fad:zoomin" @click="toggleZoomMenu" /> -->
+            <select v-model="selectedZoom" @change="updateZoom">
+              <option v-for="zoomOption in zoomOptions" :key="zoomOption.value" :value="zoomOption.value">
+                {{ zoomOption.label }}
+              </option>
+            </select>
+          </div>
+          <div class="at-layout">
+            <select v-model="selectedLayout" @change="updateLayout">
+              <option value="horizontal">
+                Horizontal
+              </option>
+              <option value="page">
+                Page
+              </option>
+            </select>
+          </div>
         </div>
       </div>
-    </template>
+    </div>
+    <div v-show="settingsStatus" id="tabSettingsArea">
+      <div ref="paneContainer" />
+      <textarea
+        v-model="currentScoreCode"
+        class="editorBox"
+        placeholder="add your musicxml code here or drag a file"
+        @keyup="handleKeyUp"
+        @drop="handleDrop"
+        @dragover.prevent
+      />
+    </div>
+    <div v-if="showParsingError" class="parsing-error" v-html="parsingError" />
   </div>
+
+  <!-- </div> -->
 </template>
 
 <style scoped>
+#tabSettingsArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+  margin-left: 10px;
+}
+.at-wrap {
+  width: 50vw;
+  height: 50vh;
+  /* margin: 0 auto; */
+  border: 2px solid rgba(0, 0, 0, 0.568);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+.at-content {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: row;
+}
+.at-viewport {
+  flex: 80%;
+  overflow-y: scroll;
+  /* position: absolute;
+  top: 0;
+  left: 70px;
+  right: 0;
+  bottom: 0;
+  padding-right: 20px; */
+}
+
+.at-sidebar {
+  /* position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  max-width: 70px;
+  width: auto; */
+  flex: 15%;
+  display: flex;
+  align-content: stretch;
+  justify-content: center;
+  max-width: 70px;
+  z-index: 1001;
+  overflow: hidden;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+  background: #bec0b6;
+}
+
+.at-track-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.at-controls {
+  /* flex: 0 0 auto; */
+  display: flex;
+  justify-content: space-between;
+  background: #329e17;
+  color: #e2e2c3;
+}
+
+.at-controls > div {
+  display: flex;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: center;
+}
+
+.at-controls > div > * {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px;
+  margin: 0 3px;
+}
 
+.at-controls .btn {
+  color: #e2e2c3;
+  /* border-radius: 0; */
+  height: 40px;
+  width: 40px;
+  font-size: 16px;
+}
+
+.at-controls .active {
+  background-color: #5bbb43;
+  /* text-decoration: none; */
+}
+
+.at-controls select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  width: 100%;
+  height: 40px;
+  background: #5bbb43;
+  padding: 4px 10px;
+  color: #e2e2c3;
+  font-size: 16px;
+  text-align-last: center;
+  text-align: center;
+  -ms-text-align-last: center;
+  -moz-text-align-last: center;
+  cursor: pointer;
+}
+
+/* .at-song-title {
+  font-weight: bold;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+} */
+
+.at-cursor-bar {
+  /* Defines the color of the bar background when a bar is played */
+  background: rgba(255, 242, 0, 0.25);
+}
+
+.at-selection div {
+  /* Defines the color of the selection background */
+  background: rgba(64, 64, 255, 0.1);
+}
+
+.at-cursor-beat {
+  /* Defines the beat cursor */
+  background: rgba(64, 64, 255, 0.75);
+  width: 3px;
+}
+
+.at-highlight * {
+  /* Defines the color of the music symbols when they are being played (svg) */
+  fill: #0078ff;
+  stroke: #0078ff;
+}
 </style>

frontend/src/plugins/router.js

@@ -6,6 +6,11 @@ const routes = [
     name: 'Analyzer',
     component: () => import('@/views/Analyzer.vue'),
   },
+  {
+    path: '/drawlisten',
+    name: 'DrawAndListen',
+    component: () => import('@/views/DrawAndListen.vue'),
+  },
   {
     path: '/',
     name: 'Home',

frontend/src/style.css

@@ -16,6 +16,7 @@
   --background-light2: #dee8f8;
   --background-dark: #3c3d3d;
   --accent-color: #b9a329;
+  --accent-color2: #e2d16f;
   --text-color-dark: #333333;
   --text-color-light: #e0e0e0;
   color: var(--text-color-dark);
@@ -34,12 +35,12 @@ body {
   /* margin: 100px; */
   margin: 0px;
   /* display: flex; */
-  /* place-items: top center; */
+  place-items: top center;
   /* min-width: 320px; */
   /* min-height: 100vh; */
   /* overflow: auto; */
-  /* background-color: var(--background-dark); */
-  background-color: rgb(17, 73, 241);
+  background-color: var(--background-dark);
+  /* background-color: rgb(17, 73, 241); */
   /* width: 100vw; */
 }
 

frontend/src/utils/timeUtils.js

@@ -0,0 +1,11 @@
+// song position
+export default function formatDuration(milliseconds) {
+  let seconds = milliseconds / 1000
+  const minutes = (seconds / 60) | 0
+  seconds = (seconds - minutes * 60) | 0
+  return (
+    `${String(minutes).padStart(2, '0')
+    }:${
+    String(seconds).padStart(2, '0')}`
+  )
+}

frontend/src/views/Analyzer.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { client } from '@gradio/client'
 import { onMounted, ref } from 'vue'
-import AlphaTabWidget from '../components/AlphaTabWidget.vue'
 import VextabWidget from '@/components/VextabWidget.vue'
-import MusicXmlWidget from '@/components/MusicXmlWidget.vue'
+import MusicXmlWidget from '@/components/MusicXmlWidget2.vue'
 import ScoreBaseWidget from '@/components/ScoreWidgetBase.vue'
+import AlphaTexWidget from '@/components/AlphaTexWidget.vue'
 import '@/style.css'
 
 let app = null
@@ -14,8 +14,8 @@ const currentScoreCode = ref('')
 const tabs = [
   { name: 'VexTab', component: VextabWidget, id: 'first' },
   { name: 'MusicXml', component: MusicXmlWidget, id: 'second' },
-  // { name: 'AlphaTab', component: AlphaTabWidget, id: 'third' },
-  // { name: 'Base', component: ScoreBaseWidget, id: 'fourth' },
+  { name: 'AlphaTex', component: AlphaTexWidget, id: 'third' },
+  { name: 'AlphaTab', component: ScoreBaseWidget, id: 'fourth' },
 ]
 const tabText_component1 = `
 tabstave notation=true key=A time=4/4
@@ -24,10 +24,9 @@ notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
 notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :q p5/4
 text :w, |#segno, ,|, :hd, , #tr
 `
-const tabText_component2 = `
-tabstave notation=true key=A time=4/4
-
-notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
+const alphaTex = `
+\\title 'Test' . 3.3.4
+:4 2.3 3.3 :8 3.3 4.3 3.3 4.3 |
 `
 
 async function connectToServer() {
@@ -68,9 +67,9 @@ function updateScoreCode(scoreCode) {
     <h1 class="title">
       Guitar Score Analyzer
     </h1>
-    <p class="description">
+    <!-- <p class="description">
       You can load a guitar score either using Vextab or MusicXml
-    </p>
+    </p> -->
     <br>
 
     <!-- Tab Buttons -->
@@ -104,7 +103,7 @@ function updateScoreCode(scoreCode) {
     </div>
 
     <!-- MusicXml Widget -->
-    <div v-show="currentTab === 1" class="tab" :class="{ active: currentTab === 2 }">
+    <div v-show="currentTab === 1" class="tab" :class="{ active: currentTab === 1 }">
       <MusicXmlWidget
         :id="tabs[currentTab].id"
         class="tab-musicXml"
@@ -113,25 +112,22 @@ function updateScoreCode(scoreCode) {
       />
     </div>
 
-    <!-- <div v-show="currentTab === 2" class="tab" :class="{ active: currentTab === 1 }">
-      <AlphaTabWidget
+    <div v-if="currentTab === 2" class="tab" :class="{ active: currentTab === 2 }">
+      <AlphaTexWidget
         :id="tabs[currentTab].id"
-        class="tab-vexTab"
-        :tab-text="tabText_component2"
+        :alpha-tex="alphaTex"
         :is-active="currentTab === 2"
         @update-score-code="updateScoreCode"
       />
-    </div> -->
+    </div>
 
-    <!-- <div v-show="currentTab === 3" class="tab" :class="{ active: currentTab === 1 }">
+    <div v-if="currentTab === 3" class="tab" :class="{ active: currentTab === 3 }">
       <ScoreBaseWidget
         :id="tabs[currentTab].id"
-        class="tab-vexTab"
-        :tab-text="tabText_component2"
         :is-active="currentTab === 3"
         @update-score-code="updateScoreCode"
       />
-    </div> -->
+    </div>
     <!-- </div> -->
 
     <!-- Report Container -->
@@ -151,6 +147,11 @@ function updateScoreCode(scoreCode) {
   max-width: 1280px; /* Adjust the max width as needed */
   margin: auto;
   background-color: rgb(238, 235, 212);
+  /* height: 100vh; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .title {
@@ -171,10 +172,11 @@ function updateScoreCode(scoreCode) {
 }
 
 .tab-button {
-  background-color: rgb(248, 240, 201);
+  background-color: var(--accent-color2);
   padding: 10px;
   margin-right: 5px;
   cursor: pointer;
+  color: var(--text-color-dark);
 }
 
 .tab-button.active {
@@ -187,12 +189,13 @@ function updateScoreCode(scoreCode) {
 
 .tab.active {
   display: flex;
-  /* background-color: #4caf50; */
+  /* background-color: #f5f5f0; */
   width: 800px;
   max-width: 1280px;
   min-width:200px;
   min-height:300px;
-
+  justify-content: center;
+  align-items: center;
 }
 
 .analyze-button {

frontend/src/views/DrawAndListen.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { client } from '@gradio/client'
+import { onMounted, ref } from 'vue'
+import VextabWidget from '@/components/VextabWidget.vue'
+import MusicXmlWidget from '@/components/MusicXmlWidget2.vue'
+import ScoreBaseWidget from '@/components/ScoreWidgetBase.vue'
+import AlphaTexDL from '@/components/AlphaTexDL.vue'
+import '@/style.css'
+
+let app = null
+const response = ref('')
+const currentTab = ref(0)
+const currentScoreCode = ref('')
+
+const alphaTex = `
+15.2.4 :16 17.2 15.2 :8 14.2 14.1 17.1.4 |
+:4 r r r r |
+:8 1.3 3.2 1.1 3.1 3.2 3.1 3.4 2.3 1.3 2.3
+`
+
+async function connectToServer() {
+  try {
+    // app = await client('xribene/guitar-diff')
+    app = await client('https://xribene-guitar-diff.hf.space/--replicas/qmsjt/')
+  }
+  catch (error) {
+    console.error('Error fetching data:', error)
+  }
+}
+
+onMounted(async () => {
+  // Call the async function when the component is mounted
+  await connectToServer()
+})
+
+async function processScore() {
+  try {
+    const result = await app.predict('/process', [currentScoreCode.value])
+    response.value = result.data
+    console.log(result.data)
+  }
+  catch (error) {
+    console.error('Error processing the score:', error)
+  }
+}
+
+function updateScoreCode(scoreCode) {
+  currentScoreCode.value = scoreCode
+  // console.log("updateScoreCode")
+  // console.log(currentScoreCode.value);
+}
+</script>
+
+<template>
+  <div class="draw-and-listen">
+    <h1 class="title">
+      Draw & Listen
+    </h1>
+    <!-- <p class="description">
+      You can load a guitar score either using Vextab or MusicXml
+    </p> -->
+    <br>
+
+    <!-- Tab Buttons -->
+    <!-- <div class="tab-buttons">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="index"
+        class="tab-button" :class="[{ active: currentTab === index }]"
+        @click="currentTab = index"
+      >
+        {{ tab.name }}
+      </button>
+    </div> -->
+    <br>
+    <br>
+
+    <div class="tab">
+      <AlphaTexDL
+        :alpha-tex="alphaTex"
+        @update-score-code="updateScoreCode"
+      />
+    </div>
+
+    <!-- </div> -->
+    <br>
+    <br>
+    <!-- Report Container -->
+    <div class="debug-background-color report-container">
+      <button class="analyze-button" @click="processScore">
+        Generate
+      </button>
+      <!-- <p class="response">
+        {{ response }}
+      </p> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.draw-and-listen {
+  /* max-width: 1280px; Adjust the max width as needed */
+  width: 60vw;
+  height: 100vh;
+  margin: auto;
+  background-color: rgb(238, 235, 212);
+  /* height: 100vh; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.title {
+  font-size: 2em;
+  /* flex: 20%; */
+  /* margin-bottom: 10px; */
+  /* background-color: aqua; */
+  text-align: center;
+}
+
+.tab {
+  flex: 80%;
+  /* background-color: aquamarine; */
+}
+
+.description {
+  font-size: 1.2em;
+  margin-bottom: 20px;
+  /* background-color: aquamarine; */
+}
+
+.analyze-button {
+  padding: 10px;
+  background-color: #4caf50;
+  color: #fff;
+  cursor: pointer;
+}
+</style>

frontend/uno.config.js

@@ -10,6 +10,11 @@ import {
 import presetIcons from '@unocss/preset-icons/browser'
 
 export default defineConfig({
+  rules: [
+    [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],
+    [/^w-screen-(\d+)$/, ([, d]) => ({ width: `${d}vw` })],
+    [/^h-screen-(\d+)$/, ([, d]) => ({ height: `${d}vh` })],
+  ],
   presets: [
     presetUno(),
     presetIcons({
@@ -26,11 +31,13 @@ export default defineConfig({
         // mdi: () => import('@iconify/json/mid.json').then(i => i.default),
         // logos: () => import('@iconify/json/logos.json').then(i => i.default),
         // twemoji: () => import('@iconify/json/twemoji.json').then(i => i.default),
-        mdi: () => import('@iconify/json/json/mdi.json').then(i => i.default),
-        logos: () => import('@iconify/json/json/logos.json').then(i => i.default),
-        twemoji: () => import('@iconify/json/json/twemoji.json').then(i => i.default),
-        vscode: () => import('@iconify/json/json/vscode-icons.json').then(i => i.default),
+        // mdi: () => import('@iconify/json/json/mdi.json').then(i => i.default),
+        // logos: () => import('@iconify/json/json/logos.json').then(i => i.default),
+        // twemoji: () => import('@iconify/json/json/twemoji.json').then(i => i.default),
+        // vscode: () => import('@iconify/json/json/vscode-icons.json').then(i => i.default),
         fa: () => import('@iconify/json/json/fa-solid.json').then(i => i.default),
+        fad: () => import('@iconify/json/json/fad.json').then(i => i.default),
+        foundation: () => import('@iconify/json/json/foundation.json').then(i => i.default),
       },
     }),
     presetWebFonts({