can now display ABC notation as an svg

App/Wrappers/TwigWrapper.php

@@ -52,11 +52,13 @@ class TwigWrapper
         $this->twig->addExtension(new TwigTests());
     }
 
+    public static function AutoRenderTwig(array $arguments)
     {
         $twigRenderer = new TwigWrapper();
         $twigRenderer->RenderTwig($twigRenderer->GuessTargetTwigFile(), $arguments);
     }
 
+    public static function RenderTwig(string $target, array $arguments)
     {
         $twigRenderer = new TwigWrapper();
         echo $twigRenderer->twig->render($target, $arguments);

Pages/tune/uuid.php

@@ -4,6 +4,8 @@ use App\Wrappers\DatabaseInteractions;
 use App\Wrappers\SQLQueryBuilderWrapper;
 use App\Wrappers\TwigWrapper;
 
+require_once __DIR__ . "/../../vendor/autoload.php";
+
 $db = new DatabaseInteractions();
 
 $tuneDetails = $db->RunOneSelect(

Public/API/V1/GetABCFile.php

@@ -0,0 +1,27 @@
+<?php
+
+use App\Wrappers\DatabaseInteractions;
+use App\Wrappers\SQLQueryBuilderWrapper;
+
+$tuneDir = __DIR__ . '/../../../LocalStorage/Tunes';
+$targetTuneID = $_GET['tune-id'];
+
+
+$data = (new DatabaseInteractions())->RunOneSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT_ONE(
+        table: 'Tunes',
+        id: $targetTuneID
+    )
+    ->cols(cols: [
+        'T.ABC',
+    ])
+);
+
+/*
+$filePath = "$tuneDir/$targetTuneID/primary.abc";
+$temp = file_get_contents(filename: $filePath);
+*/
+
+header(header: "Content-type: text/xml");
+echo $data['ABC'];
+die();

Public/Static/JS/General/ABCWrapper.js

@@ -0,0 +1,32 @@
+
+function RenderABC(containerID, targetTuneID)
+{
+
+    API_GET("/V1/GetABCFile.php?tune-id=" + targetTuneID).then(payload => {
+
+        ABCJS.renderAbc(
+            containerID,
+            payload,
+            {
+                add_classes: true,
+                format: {
+                    gchordfont: "Atkinson Hyperlegible",
+                    annotationfont: "Atkinson Hyperlegible",
+                    headerfont: "Atkinson Hyperlegible",
+                    infofont: "Atkinson Hyperlegible",
+                    repeatfont: "Atkinson Hyperlegible",
+                    tempofont: "Atkinson Hyperlegible",
+                    titlefont: "Atkinson Hyperlegible",
+                    voicefont: "Atkinson Hyperlegible",
+                    wordsfont: "Atkinson Hyperlegible",
+                }
+            }
+            );
+
+
+
+    })
+        .catch(error => {
+            console.log(error)
+        });
+}

Public/Static/JS/General/APIInteractions.js

@@ -0,0 +1,18 @@
+
+
+const API_SERVER = "http://localhost:1234/API";
+
+
+async function API_GET(target) {
+    try {
+        const response = await fetch(API_SERVER + target, {
+            method: 'GET',
+            headers: {
+            },
+            credentials: 'include',
+        });
+        return await response.text();
+    } catch (error) {
+        return {error: error.message};
+    }
+}

Public/Static/JS/AlgoliaInteractions.js → Public/Static/JS/General/AlgoliaInteractions.js

@@ -15,6 +15,10 @@ function searchTunes(query) {
 <h2><a href="/tune/${hit.objectID}">${hit.title}</a></h2>
 <div class="TuneTimeSignature">time signature: ${hit.time_sig}</div>
 <div class="TuneKeySignature">key signature: ${hit.key_sig}</div>
+<div id="VerovioContainer-${hit.objectID}"></div>
+<script>RenderVerovio("VerovioContainer-${hit.objectID}", '${hit.objectID}');</script>
+
+</div>
 `;
                 resultsDiv.appendChild(tuneDiv);
             });

Templates/Bases/StandardWebPage.html.twig

@@ -10,11 +10,17 @@
 
 
     <script src="https://cdn.jsdelivr.net/npm/algoliasearch/dist/algoliasearch-lite.umd.js"></script>
+    <script src="/Static/JS/ThirdParty/ABCJS.js"></script>
+
     <script>
         const client = algoliasearch('{{ _ALGOLIA_APP_ID_ }}', '{{ _ALGOLIA_SEARCH_ONLY_API_KEY_ }}');
         const index = client.initIndex('{{ _ALGOLIA_INDEX_NAME_ }}');
     </script>
-    <script src="/Static/JS/AlgoliaInteractions.js"></script>
+
+    <script src="/Static/JS/General/ABCWrapper.js"></script>
+    <script src="/Static/JS/General/AlgoliaInteractions.js"></script>
+    <script src="/Static/JS/General/APIInteractions.js"></script>
+
 </head>
 
 <body>

Templates/Pages/tune/uuid.html.twig

@@ -1,7 +1,11 @@
 {% extends "/Bases/StandardWebPage.html.twig" %}
 
 {% block content %}
-    <div class="InnerContent">
-        <h1>{{ TuneDetails.Title }}</h1>
-    </div>
+
+    <h1>{{ TuneDetails.Title }}</h1>
+    <div id="music-container"></div>
+
+    <script>
+        RenderABC("music-container", '45e8cdc9-da6f-11ef-985c-00bf21dc3191');
+    </script>
 {% endblock %}