From b8d7a720fb6d61380b6c130c0df9b9874a16de09 Mon Sep 17 00:00:00 2001
From: Sam Tarakajian <sam@cycling74.com>
Date: Fri, 11 Mar 2022 18:30:55 -0500
Subject: [PATCH] show the name fo the patcher

---
 index.html | 3 +++
 js/app.js  | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 861b516..d65e7e7 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,9 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <svg id="background" width="100%" height="100%"></svg>
     <div id="rnbo-root">
+		<div>
+			<h2 id="patcher-title">Unnamed patcher</h2>
+		</div>
         <div id="rnbo-clickable-keyboard">
             <h2>MIDI Keyboard</h2>
             <em id="no-midi-label">No MIDI input</em>
diff --git a/js/app.js b/js/app.js
index 7a9f905..9f93fca 100644
--- a/js/app.js
+++ b/js/app.js
@@ -31,6 +31,10 @@ async function setup() {
     // Connect the device to the web audio graph
     device.node.connect(outputNode);
 
+    // (Optional) Extract the name of the patcher from the description
+    if (patcher.desc.meta && patcher.desc.meta.filename)
+        document.getElementById("patcher-title").innerText = patcher.desc.meta?.filename;
+
     // (Optional) Automatically create sliders for the device parameters
     makeSliders(device);
 
@@ -182,7 +186,7 @@ function attachOutports(device) {
     device.messageEvent.subscribe((ev) => {
         // Message events have a tag as well as a payload
         console.log(`${ev.tag}: ${ev.payload}`);
-	});
+    });
 }
 
 function makeMIDIKeyboard(device) {