diff --git a/src/components/DiploTab.vue b/src/components/DiploTab.vue
index a2a0bf0..81b87e0 100644
--- a/src/components/DiploTab.vue
+++ b/src/components/DiploTab.vue
@@ -20,6 +20,7 @@
         <SideBar class="stageItem sidebarLeft" position="left" tab="diploTab" v-if="diploTabSidebarVisible">
           <SourceSelector/>
           <WritingZoneDirectory purpose="diploTrans"/>
+          {{ diplomaticTranscriptsOnCurrentPage }}
         </SideBar>
       </Transition>
       <MainStage class="mainStage stageItem">
@@ -29,8 +30,6 @@
         <div class="mainBox">
           <FacsimileComponent type="diploTrans"/>
           <!--<VerovioComponent purpose="transcribing" type="diploTrans" getter="diplomaticTranscriptForCurrentWz" pathGetter="currentWzDtPath"/>-->
-          {{ diploTransActivationsInAnnotTrans.size }} xy
-          {{ diploTransActivationsInShapes.length }}
           <!--<OpenSeadragonComponent/>-->
         </div>
         <!--<div class="mainBox">
@@ -102,10 +101,36 @@ export default {
     },
     initializeDiploTrans () {
       this.$store.dispatch('initializeDiploTrans')
+    },
+    autoTranscribe (newShapes, oldShapes, newAnnotated, oldAnnotated) {
+      if (newShapes.length === 0 || !newAnnotated) {
+        return false
+      }
+
+      const currentWz = this.$store.getters.currentWritingZoneObject
+      if (!currentWz) {
+        return false
+      }
+
+      const atDoc = this.$store.getters.documentByPath(currentWz.annotTrans)
+      const dtDoc = this.$store.getters.documentByPath(currentWz.diploTrans)
+
+      if (!atDoc || !dtDoc) {
+        return false
+      }
+
+      console.log('DiploTab: autoTranscribe()')
+
+      if (newAnnotated === oldAnnotated && newShapes.length > oldShapes.length && oldShapes.length > 0) {
+        // add shape to existing diploTrans
+      } else {
+        console.log('dispatching…')
+        this.$store.dispatch('diploTranscribe')
+      }
     }
   },
   computed: {
-    ...mapGetters(['diploTabSidebarVisible', 'diploTransActivationsInShapes', 'diploTransActivationsInAnnotTrans']),
+    ...mapGetters(['diploTabSidebarVisible', 'diploTransActivationsInShapes', 'diploTransActivationsInAnnotTrans', 'diplomaticTranscriptsOnCurrentPage']),
     showInitializeButton () {
       const currentWz = this.$store.getters.currentWritingZoneObject
       if (!currentWz) {
@@ -136,6 +161,11 @@ export default {
         this.verifyDiploTransLoaded()
       })
 
+    this.unwatchDiploActivations = this.$store.watch((state, getters) => [getters.diploTransActivationsInShapes, getters.diploTransActivationsInAnnotTrans],
+      ([newShapes, newAnnotated], [oldShapes, oldAnnotated]) => {
+        this.autoTranscribe(newShapes, oldShapes, newAnnotated, oldAnnotated)
+      })
+
     this.verifySvgAvailable()
     this.verifyAnnotTransLoaded()
     this.verifyDiploTransLoaded()
@@ -144,6 +174,7 @@ export default {
     this.unwatchSvgVerification()
     this.unwatchAnnotTransVerification()
     this.unwatchDiploTransVerification()
+    this.unwatchDiploActivations()
   }
 }
 </script>
diff --git a/src/components/FacsimileComponent.vue b/src/components/FacsimileComponent.vue
index fce8d71..5f437b2 100644
--- a/src/components/FacsimileComponent.vue
+++ b/src/components/FacsimileComponent.vue
@@ -185,7 +185,7 @@ export default {
       */
 
       // console.log(e)
-      this.$store.dispatch('facsimileClick', click)
+      // this.$store.dispatch('facsimileClick', click)
     },
 
     /**
diff --git a/src/components/shared/VerovioComponent.vue b/src/components/shared/VerovioComponent.vue
index 8ce5a86..959d939 100644
--- a/src/components/shared/VerovioComponent.vue
+++ b/src/components/shared/VerovioComponent.vue
@@ -62,14 +62,16 @@ export default {
           const resolvedDraft = draft2score(meiDom)[0]
 
           const svg = await this.$store.getters.annotatedTranscriptForWz(resolvedDraft)
-          this.$refs.mei.innerHTML = svg
+          const localCopy = svg.repeat(1)
+          this.$refs.mei.innerHTML = localCopy
         }
 
         if (this.type === 'diploTrans') {
           const resolvedTrans = draft2page(meiDom)
 
           const svg = await this.$store.getters.diplomaticTranscriptForWz(resolvedTrans)
-          this.$refs.mei.innerHTML = svg
+          const localCopy = svg.repeat(1)
+          this.$refs.mei.innerHTML = localCopy
         }
 
         this.addListeners()
@@ -78,14 +80,14 @@ export default {
       }
     },
     removeListeners () {
-      // this.$refs.mei.removeEventListener('click', this.clickListener)
-      const els = this.$refs.mei.querySelectorAll(selectables)
-      els.forEach((elm) => elm.removeEventListener('click', this.clickListener))
+      this.$refs.mei.removeEventListener('click', this.clickListener)
+      /* const els = this.$refs.mei.querySelectorAll(selectables)
+      els.forEach((elm) => elm.removeEventListener('click', this.clickListener)) */
     },
     addListeners () {
-      // this.$refs.mei.addEventListener('click', this.clickListener)
-      const els = this.$refs.mei.querySelectorAll(selectables)
-      els.forEach((elm) => elm.addEventListener('click', this.clickListener))
+      this.$refs.mei.addEventListener('click', this.clickListener)
+      /* const els = this.$refs.mei.querySelector('selectables')
+      els.forEach((elm) => elm.addEventListener('click', this.clickListener)) */
     },
     clickListener (e) {
       const target = e.target.closest(selectables)
@@ -96,7 +98,7 @@ export default {
         // target.classList.toggle('supplied')
         const id = target.getAttribute('data-id')
         const name = target.getAttribute('data-class')
-        // console.log(this.purpose, id, name)
+
         const meiDom = this.$store.getters[this.getter]
         const path = this.$store.getters[this.pathGetter]
         this.$store.dispatch('clickedVerovio', {
@@ -108,6 +110,25 @@ export default {
           callback: () => { this.render() }
         })
       }
+    },
+    /**
+     * adds a highlighted class to the element with the given id
+     * @param {*} newActivation
+     * @param {*} oldActivation
+     */
+    activateElement (newActivation, oldActivation) {
+      if ((!newActivation && oldActivation) || (oldActivation && newActivation !== oldActivation)) {
+        const oldEl = this.$refs.mei.querySelector('*[data-id="' + oldActivation.id + '"]')
+        if (oldEl) {
+          oldEl.classList.remove('highlighted')
+        }
+      }
+      if (newActivation) {
+        const newEl = this.$refs.mei.querySelector('*[data-id="' + newActivation.id + '"]')
+        if (newEl) {
+          newEl.classList.add('highlighted')
+        }
+      }
     }
   },
   mounted: function () {
@@ -125,6 +146,13 @@ export default {
           this.render()
         }
       })
+
+    this.unwatchActivations = this.$store.watch((state, getters) => getters.diploTransActivationsInAnnotTrans,
+      (newActivation, oldActivation) => {
+        if (this.purpose === 'transcribing') {
+          this.activateElement(newActivation, oldActivation)
+        }
+      })
     /*
     this.unwatchPageXML = this.$store.watch((state, getters) => getters.xmlCode,
       (newCode, oldCode) => {
@@ -136,6 +164,7 @@ export default {
   beforeUnmount () {
     this.unwatchData()
     this.removeListeners()
+    this.unwatchActivations()
   }
 }
 </script>
@@ -159,6 +188,11 @@ export default {
     stroke: $svgSuppliedColor;
   }
 
+  svg .highlighted {
+    fill: $scoreHighlightedColor;
+    stroke: $scoreHighlightedColor;
+  }
+
   .placeholder {
     font-size: 24p;
     font-weight: bold;
diff --git a/src/css/_variables.scss b/src/css/_variables.scss
index 1458ad8..cabe158 100644
--- a/src/css/_variables.scss
+++ b/src/css/_variables.scss
@@ -29,3 +29,5 @@ $svgUnassignedShapeColor: #ff00ff;
 
 $svgActiveWritingZoneColor: $highlightColor06; //#468ffc;
 $svgActiveWritingLayerColor: $highlightColor05;
+
+$scoreHighlightedColor: $highlightColor01;
diff --git a/src/store/data/index.js b/src/store/data/index.js
index 3bfbe8d..1ddab8e 100644
--- a/src/store/data/index.js
+++ b/src/store/data/index.js
@@ -3,7 +3,7 @@ import { uuid } from '@/tools/uuid.js'
 import OpenSeadragon from 'openseadragon'
 // import { rotatePoint, getOuterBoundingRect } from '@/tools/trigonometry.js'
 import { getOsdRects } from '@/tools/facsimileHelpers.js'
-import { convertRectUnits, sortRastrumsByVerticalPosition, initializeDiploTrans, getEmptyPage } from '@/tools/mei.js'
+import { convertRectUnits, sortRastrumsByVerticalPosition, initializeDiploTrans, getEmptyPage, generateDiplomaticElement, getRenderableDiplomaticTranscript } from '@/tools/mei.js'
 import { rotatePoint } from '@/tools/trigonometry'
 // import { getRectFromFragment } from '@/tools/trigonometry.js'
 // import { Base64 } from 'js-base64'
@@ -564,11 +564,14 @@ const dataModule = {
         case 'proofreading':
           dispatch('suppliedToggle', { meiDom, path, id, name, callback })
           break
-        default:
+        case 'transcribing':
           if (getters.explorerTab === 'diplo') {
-            dispatch('diploTransToggle', { type: 'annotTrans', id, name })
-            // dispatch('moveShapeToCurrentWritingZone', shapeId)
+            dispatch('diploTransToggle', { type: 'annotTrans', id, name, path })
           }
+          break
+        default:
+          console.warn('clickedVerovio: unknown purpose', purpose)
+            // dispatch('moveShapeToCurrentWritingZone', shapeId)
       }
     },
 
@@ -1265,9 +1268,9 @@ const dataModule = {
       const currentWritingZoneObject = getters.currentWritingZoneObject
       const rastrums = getters.rastrumsOnCurrentPage
 
-      console.log('\n\ngot this:')
-      console.log('currentWritingZoneObject', currentWritingZoneObject)
-      console.log('rastrums', rastrums)
+      // console.log('\n\ngot this:')
+      // console.log('currentWritingZoneObject', currentWritingZoneObject)
+      // console.log('rastrums', rastrums)
       const wzBox = {
         left: parseInt(currentWritingZoneObject.xywh.split(',')[0]),
         top: parseInt(currentWritingZoneObject.xywh.split(',')[1]),
@@ -1291,7 +1294,7 @@ const dataModule = {
         }
       })
 
-      console.log('affectedStaves: ', affectedStaves)
+      // console.log('affectedStaves: ', affectedStaves)
 
       // const annotatedTranscript = getters.annotatedTranscriptForWz
 
@@ -1301,12 +1304,113 @@ const dataModule = {
       const baseMessage = 'add diplomatic transcript at '
       const param = dtPath.split('/').splice(-1)[0]
 
-      console.log(diploTrans, dtPath)
+      // console.log(diploTrans, dtPath)
       commit('ADD_AVAILABLE_DIPLOMATIC_TRANSCRIPT', dtPath)
       dispatch('loadDocumentIntoStore', { path: dtPath, dom: diploTrans })
       dispatch('logChange', { path: dtPath, baseMessage, param, xmlIDs: [], isNewDocument: true })
 
       return diploTrans
+    },
+
+    /**
+     * generates a diplomatic transcript from the current annotated transcript and one or more shapes
+     * @param {*} param0
+     */
+    async diploTranscribe ({ commit, getters, dispatch }) {
+      const shapesRefs = getters.diploTransActivationsInShapes
+      const annotElemRef = getters.diploTransActivationsInAnnotTrans
+
+      if (shapesRefs.length === 0 || !annotElemRef) {
+        return false
+      }
+      const currentWz = getters.currentWritingZoneObject
+      if (!currentWz) {
+        return false
+      }
+      const atDoc = getters.annotatedTranscriptForCurrentWz
+      const dtDoc = getters.diplomaticTranscriptForCurrentWz
+      const svgDoc = getters.svgForCurrentPage
+      // const meiDoc = getters.documentWithCurrentPage
+
+      if (!atDoc || !dtDoc || !svgDoc) {
+        // console.log(atDoc, dtDoc, svgDoc)
+        return false
+      }
+
+      const annotElem = atDoc.querySelector(annotElemRef.name + '[*|id="' + annotElemRef.id + '"]')
+
+      // check if element is already transcribed
+      if (annotElem.hasAttribute('corresp')) {
+        return null
+      }
+
+      const shapes = shapesRefs.map(shapeRef => svgDoc.querySelector('path[*|id="' + shapeRef.id + '"]'))
+      // console.log('annotElem', annotElem)
+      // console.log('shapes', shapes)
+
+      const annotStaffN = annotElem.closest('staff').getAttribute('n')
+      // console.log('annotStaffN', annotStaffN)
+
+      const diploStaffN = dtDoc.querySelector('staffDef[n="' + annotStaffN + '"]').getAttribute('label')
+      // console.log('diploStaffN', diploStaffN)
+      // console.log('staffDef', dtDoc.querySelector('staffDef'))
+
+      const rastrum = getters.rastrumsOnCurrentPage[diploStaffN - 1]
+      // console.log('rastrum', rastrum)
+
+      const rects = getters.osdRects
+      // console.log('rects', rects)
+
+      let x = 1000000
+      shapes.forEach(shape => {
+        const rendered = document.querySelector('path#' + shape.id)
+        const bbox = rendered.getBBox()
+        // console.log('comparing x=' + x + ' to ' + bbox.x)
+        if (parseFloat(bbox.x) < x) {
+          x = parseFloat(bbox.x)
+        }
+      })
+
+      // console.log('x', x)
+      const mm = ((x - rastrum.px.x) / rects.ratio).toFixed(1)
+      // console.log('mm', mm)
+
+      const svgPath = '../svg/' + getters.currentSvgPath.split('/').splice(-1)[0]
+
+      const diplomaticElement = generateDiplomaticElement(annotElem, shapes, mm, svgPath)
+      console.log('diplomaticElement', diplomaticElement)
+
+      const diploLayer = dtDoc.querySelector('staff[n="' + annotStaffN + '"] layer')
+
+      // Convert child nodes of diploLayer into an array
+      const children = Array.from(diploLayer.childNodes)
+
+      // Find the index of the first child node with a greater coord.x1 value
+      const index = children.findIndex(child => parseFloat(child.getAttribute('coord.x1')) > parseFloat(mm))
+
+      if (index !== -1) {
+        // If such a node is found, insert diplomaticElement before this node
+        diploLayer.insertBefore(diplomaticElement, children[index])
+      } else {
+        // If no such node is found, append diplomaticElement as the last child
+        diploLayer.appendChild(diplomaticElement)
+      }
+
+      // todo: prevent the same element to be encoded multiple times
+
+      const dtPath = getters.currentWzDtPath
+      const baseMessage = 'generate diplomatic transcription at '
+      const param = dtPath.split('/').splice(-1)[0]
+
+      annotElem.setAttribute('corresp', '../diplomaticTranscripts/' + param + '#' + diplomaticElement.getAttribute('xml:id'))
+
+      const atPath = getters.currentWzAtPath
+
+      dispatch('loadDocumentIntoStore', { path: dtPath, dom: dtDoc.cloneNode(true) })
+      dispatch('logChange', { path: dtPath, baseMessage, param, xmlIDs: [diploLayer.getAttribute('xml:id')], isNewDocument: false })
+
+      dispatch('loadDocumentIntoStore', { path: atPath, dom: atDoc.cloneNode(true) })
+      dispatch('logChange', { path: atPath, baseMessage, param, xmlIDs: [diploLayer.getAttribute('xml:id')], isNewDocument: false })
     }
   },
 
@@ -2559,6 +2663,45 @@ const dataModule = {
       })
 
       return svgDom.querySelector('svg')
+    },
+
+    /**
+     * gets an array with all diplomatic transcripts for the current page, including the MEI code
+     * to render diplomatically, and positional information
+     * @param {*} state
+     * @param {*} getters
+     */
+    diplomaticTranscriptsOnCurrentPage: async (state, getters) => {
+      const allWz = getters.writingZonesOnCurrentPage
+      const arr = []
+
+      const meiDoc = getters.documentWithCurrentPage
+      const surface = getters.currentSurfaceId
+
+      const emptyPage = await getEmptyPage(meiDoc, surface)
+
+      console.log('getters.availableDiplomaticTranscripts', getters.availableDiplomaticTranscripts)
+
+      allWz.forEach(async wzDetails => {
+        const dtPath = wzDetails.diploTrans
+        const available = getters.availableDiplomaticTranscripts.indexOf(dtPath) !== -1
+
+        if (available) {
+          const dtDoc = await getters.documentByPath(wzDetails.diploTrans)
+          console.log(772, dtDoc)
+          arr.push({ wzDetails, dtDoc })
+        }
+      })
+      console.warn('now starting…')
+      arr.forEach(async wz => {
+        console.log('wz', wz)
+        const renderableDiplomaticTranscript = await getRenderableDiplomaticTranscript(wz, emptyPage)
+        wz.renderable = renderableDiplomaticTranscript
+      })
+
+      // await console.log('got it')
+
+      return arr
     }
   }
 }
diff --git a/src/store/gui/index.js b/src/store/gui/index.js
index 06819e4..edbd9b7 100644
--- a/src/store/gui/index.js
+++ b/src/store/gui/index.js
@@ -41,7 +41,7 @@ const guiModule = {
    * @property {String} awaitedDocument name of a document to be opened when sufficient data is available. Used to resolve routes
    * @property {Number} awaitedPage number of the page to be opened when sufficient data is available. Used to resolve routes
    * @property {Boolean} allDocsLoaded boolean if all docs / sources are successfully loaded
-   * @property {Object} diploTransActivations an array of selected shapes and / or elements from the annotated transcription
+   * @property {Object} diploTransActivations an object of selected shapes and / or elements from the annotated transcription
    * @property {String} diploTransSelectedId ID of the currently selected element from the current diplomatic transcription
    * @property {Object} diploTransOsdBounds the OSD bounds currenlty viewed in both facsimile viewers
    */
@@ -340,20 +340,20 @@ const guiModule = {
       state.allDocsLoaded = true
     },
 
-    TOGGLE_DIPLO_TRANS_ITEM (state, { id, type, name }) {
+    TOGGLE_DIPLO_TRANS_ITEM (state, { id, type, name, path }) {
       if (type === 'annotTrans') {
-        /* if (state.diploTransActivations.shapes.size > 0) {
-
-        } else */ if (state.diploTransActivations.annotTrans.has(id)) {
+        state.diploTransActivations.shapes.clear()
+        if (state.diploTransActivations.annotTrans.has(id)) {
           state.diploTransActivations.annotTrans.delete(id)
         } else {
-          state.diploTransActivations.annotTrans.set(id, { id, name })
+          state.diploTransActivations.annotTrans.clear()
+          state.diploTransActivations.annotTrans.set(id, { id, name, path })
         }
       } else if (type === 'shape') {
         if (state.diploTransActivations.shapes.has(id)) {
           state.diploTransActivations.shapes.delete(id)
         } else {
-          state.diploTransActivations.shapes.set(id, { id })
+          state.diploTransActivations.shapes.set(id, { id, path })
         }
       }
     },
@@ -617,11 +617,12 @@ const guiModule = {
      * @param  {[type]} type                 [description]
      * @param  {[type]} id                   [description]
      * @param  {[type]} name                 [description]
+     * @param  {[type]} path                 [description]
      * @return {[type]}        [description]
      */
-    diploTransToggle ({ commit, getters }, { type, id, name }) {
+    diploTransToggle ({ commit, getters }, { type, id, name, path }) {
       if (getters.activeWritingZone !== null) {
-        commit('TOGGLE_DIPLO_TRANS_ITEM', { type, id, name })
+        commit('TOGGLE_DIPLO_TRANS_ITEM', { type, id, name, path })
       }
     },
 
@@ -953,7 +954,7 @@ const guiModule = {
      * @return {[type]}       [description]
      */
     diploTransActivationsInShapes: (state) => {
-      return [...state.diploTransActivations.shapes]
+      return [...state.diploTransActivations.shapes.values()]
     },
 
     /**
@@ -962,7 +963,10 @@ const guiModule = {
      * @return {[type]}       [description]
      */
     diploTransActivationsInAnnotTrans: (state) => {
-      return state.diploTransActivations.annotTrans
+      if (state.diploTransActivations.annotTrans.size === 0) {
+        return null
+      }
+      return [...state.diploTransActivations.annotTrans.values()][0]
     },
 
     /**
diff --git a/src/tools/mei.js b/src/tools/mei.js
index 23e7a2a..016eaeb 100644
--- a/src/tools/mei.js
+++ b/src/tools/mei.js
@@ -2,6 +2,105 @@ import { uuid } from '@/tools/uuid.js'
 import { getOsdRects } from '@/tools/facsimileHelpers.js'
 const parser = new DOMParser()
 
+/**
+ * generates a diplomatic transcription from a given annotated transcription and a list of shapes
+ * @param {*} annotElem the annotated transcription to be converted
+ * @param {*} shapes the shapes to be converted
+ * @param {*} x the x coordinate of the new element, relative to the staff and given in mm
+ * @returns the generated diplomatic transcription
+ */
+export function generateDiplomaticElement (annotElem, shapes, x, svgPath) {
+  const name = annotElem.localName
+  const elem = document.createElementNS('http://www.music-encoding.org/ns/mei', name)
+  elem.setAttribute('xml:id', 'd' + uuid())
+  elem.setAttribute('coord.x1', x)
+
+  const facs = []
+  shapes.forEach(shape => {
+    facs.push(svgPath + '#' + shape.getAttribute('id'))
+  })
+  elem.setAttribute('facs', facs.join(' '))
+
+  if (name === 'note') {
+    getDiplomaticNote(annotElem, elem)
+  } else {
+    console.warn('TODO: @/tools/mei.js:generateDiplomaticElement() does not yet support ' + name + ' elements')
+  }
+
+  return elem
+}
+
+/**
+ * translates an annotated note to a diplpomatic note
+ * @param {*} annotElem the annotated note to be translated
+ * @param {*} note the diplomatic note to be translated
+ */
+function getDiplomaticNote (annotElem, note) {
+  const staffN = annotElem.closest('staff').getAttribute('n')
+  const clefs = [...annotElem.closest('music').querySelectorAll('staff[n="' + staffN + '"] clef, staffDef[n="' + staffN + '"] clef, staffDef[n="' + staffN + '"][clef\\.line], *[*|id="' + annotElem.getAttribute('xml:id') + '"]')]
+  clefs.sort((a, b) => {
+    if (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1
+    } else {
+      return 1
+    }
+  })
+
+  const annotIndex = clefs.indexOf(annotElem)
+  const lastClef = clefs[annotIndex - 1]
+
+  const clefShape = lastClef.hasAttribute('clef.shape') ? lastClef.getAttribute('clef.shape') : lastClef.getAttribute('shape')
+  const clefLine = lastClef.hasAttribute('clef.line') ? lastClef.getAttribute('clef.line') : lastClef.getAttribute('line')
+  // const clefDis = lastClef.hasAttribute('clef.dis') ? lastClef.getAttribute('clef.dis') : lastClef.getAttribute('dis')
+
+  const pitches = ['c', 'd', 'e', 'f', 'g', 'a', 'b']
+  const pitchValue = pitches.indexOf(annotElem.getAttribute('pname'))
+  const octaveValue = parseInt(annotElem.getAttribute('oct'))
+
+  let loc = 4
+
+  if (clefShape === 'G' && clefLine === '2') {
+    loc = (octaveValue - 4) * 7 + pitchValue - 2
+  } else if (clefShape === 'F' && clefLine === '4') {
+    loc = (octaveValue - 3) * 7 + pitchValue + 3
+  } else if (clefShape === 'C' && clefLine === '3') {
+    loc = (octaveValue - 4) * 7 + pitchValue
+  }
+
+  // F4 in treble should be 1: (4-4) * 7 + 3 - 2
+  // C4 in treble should be -2: (4-4) * 7 + 0 - 2
+  // B3 in treble should be -3: (3-4) * 7 + 6 - 2
+
+  // B3 in bass clef should be 9: (3-3) * 7 + 6 + 3
+  // C3 in bass clef should be 3: (3-3) * 7 + 0 + 3
+  // G2 in bass clef should be 0: (2-3) * 7 + 4 + 3
+
+  note.setAttribute('loc', loc)
+
+  // head shape
+  let headshape
+  const dur = annotElem.getAttribute('dur')
+  if (dur === '1') {
+    headshape = 'whole'
+  } else if (dur === '2') {
+    headshape = 'half'
+  } else if (parseInt(dur) > 4) {
+    headshape = 'quarter'
+  }
+  if (annotElem.hasAttribute('head.shape')) {
+    headshape = annotElem.getAttribute('head.shape')
+  }
+  note.setAttribute('head.shape', headshape)
+  note.setAttribute('dur', dur)
+
+  // stem direction
+  if (dur !== '1') {
+    note.setAttribute('stem.dir', loc < 4 ? 'up' : 'down')
+  }
+
+  console.log('diplomatic note:', note)
+}
+
 /**
  * takes a template for diplomatic transcriptions and initializes it by generating IDs
  * @param {*} diploTemplate the template to be initialized
@@ -109,7 +208,7 @@ export async function getEmptyPage (mei, surfaceId) {
   template.querySelector('page').setAttribute('page.width', folium.getAttribute('width'))
 
   // determine staff height relations
-  const defaultFactor = 100 * 9 / 297 * 3 // INFO: I don't know the exact math behind the *3, but it works
+  const defaultFactor = 100 * 9 / 297 * 3 // TODO: I don't know the exact math behind the *3, but it works. Use //page/@ppu insteads
   template.querySelector('staffDef').setAttribute('scale', defaultFactor + '%')
   const firstStaffHeight = parseFloat(layout.querySelector('rastrum').getAttribute('system.height'))
 
@@ -428,6 +527,42 @@ export function draft2page (meiDom) {
   return meiDom
 }
 
+export async function getRenderableDiplomaticTranscript ({ wzDetails, dtDoc }, emptyPage) {
+  console.log('hello, emptyPage is ' + typeof emptyPage)
+  console.log('hello, dtDoc is ' + typeof dtDoc)
+  console.log('not trying to make sense out of ', wzDetails)
+
+  console.log('emptyPage', emptyPage)
+  const requiredStaves = []
+
+  if (!dtDoc) {
+    console.log('no dtDoc')
+    return null
+  }
+
+  dtDoc.querySelectorAll('staffDef').forEach(staffDef => {
+    requiredStaves.push(staffDef.getAttribute('label'))
+  })
+
+  const clonedPage = emptyPage.cloneNode(true)
+  const clonedDt = dtDoc.cloneNode(true)
+
+  clonedPage.querySelectorAll('system').forEach((system, i) => {
+    if (requiredStaves.indexOf((i + 1).toString()) === -1) {
+      system.remove()
+    } else {
+      const staffDef = clonedDt.querySelector('staffDef[label="' + (i + 1) + '"]')
+      const dtLayer = clonedDt.querySelector('staff[n="' + staffDef.getAttribute('n') + '"] layer')
+      const systemLayer = system.querySelector('layer')
+      dtLayer.querySelectorAll('*').forEach(node => {
+        systemLayer.append(node)
+      })
+    }
+  })
+
+  console.log('clonedPage', clonedPage)
+}
+
 export const rawMEISelectables = [
   'note',
   'chord',