DDMAL · kyuchia · May 21, 2025 · May 13, 2025 · May 16, 2025 · May 18, 2025
diff --git a/Rodan/index.html b/Rodan/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="refresh" content="0; url=/e2e-omr-documentation/" />
+  <title>Redirecting...</title>
+</head>
+
+<body>
+  <p>If you are not redirected automatically, <a href="/e2e-omr-documentation/">click here</a>.</p>
+</body>
+
+</html>
diff --git a/activities/posters/content.json b/activities/posters/content.json
@@ -1,7 +1,7 @@
 {
     "2019": [
         "Hopkins, Emily, Yaolong Ju, Gustavo Polins Pedro, Cory McKay, Julie Cumming, and Ichiro Fujinaga. 2019. \u201cSIMSSA DB: Symbolic Music Discovery and Search.\u201d Poster presented at the 6th International Conference on Digital Libraries for Musicology, Den Haag, Netherlands, November 9.",
-        "Ju, Yaolong. 2019. \u201cAn Interactive Workflow for Generating Chord Labels for Homorhythmic Music in Symbolic Formats.\u201d Presented at the The 20thInternational Society of Music Information Retrieval Conference, Delft, Netherlands, November 8. <a href=\"http://cloud.simssa.ca/index.php/f/996\">http://cloud.simssa.ca/index.php/f/996</a>.",
+        "Ju, Yaolong. 2019. \u201cAn Interactive Workflow for Generating Chord Labels for Homorhythmic Music in Symbolic Formats.\u201d Presented at the 20th International Society of Music Information Retrieval Conference, Delft, Netherlands, November 8. <a href=\"http://cloud.simssa.ca/index.php/f/996\">http://cloud.simssa.ca/index.php/f/996</a>.",
         "N\u00e1poles, N\u00e9stor L\u00f3pez, Gabriel Vigliensoni, and Ichiro Fujinaga. 2019. \u201cThe Effects of Translation between Symbolic Music Formats: A Case Study with Humdrum, Lilypond, MEI, and MusicXML.\u201d Poster presented at the annual Music Encoding Conference, Vienna, Austria, June 29.",
         "Reuse, Tim de, and Ichiro Fujinaga. 2019. \u201cCopyForward: Point-Set Matching for Predicting Patterns.\u201d Poster presented at the 15th running of the Music Information Retrieval Evaluation eXchange at the 20th International Society for Music Information retrieval Conference, Delft, Netherlands, November 4."
     ],
@@ -99,9 +99,9 @@
     "2005": [
         "Burgoyne, John Ashley, and Lawrence K. Saul. 2005. \u201cLearning Harmonic Relationships in Digital Audio with Dirichlet-Based Hidden Markov Models.\u201d Poster presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11.",
         "Fiebrink, Rebecca, Cory McKay, and Ichiro Fujinaga. 2005. \u201cCombining D2K and JGAP for Efficient Feature Weighting for Classification Tasks in Music Information Retrieval.\u201d Poster, London, UK, September 11.",
-        "Lai, Catherine, Beinan Li, and Ichiro Fujinaga. 2005. \u201cPreservation Digitizaation of David Edelberg\u2019s Handel LP Collection: A Pilot Project.\u201d Poster presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11.",
+        "Lai, Catherine, Beinan Li, and Ichiro Fujinaga. 2005. \u201cPreservation Digitization of David Edelberg\u2019s Handel LP Collection: A Pilot Project.\u201d Poster presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11.",
         "Lai, Catherine, Ichiro Fujinaga, and Cynthia A. Leive. 2005. \u201cMetaData for Phonograph Records: Facilitating New Forms of Use and Access to Analogue Recordings.\u201d Poster presented at the 5th ACM/IEEE-CS joint conference on Digital libraries, Denver, USA, June 7.",
         "McEnnis, Daniel, Cory McKay, Ichiro Fujinaga, and Philippe Depalle. 2005. \u201cJAudio: A Feature Extraction Library.\u201d Posrer presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11.",
         "Sinyor, Elliot, Cory McKay, Rebecca Fiebrink, Daniel McEnnis, and Ichiro Fujinaga. 2005. \u201cBeatbox Classification Using ACE.\u201d Poster presented at the 6th International Conference on Music Information Retrieval, London, UK, September 11."
     ]
-}
+}
diff --git a/activities/posters/gallery.js b/activities/posters/gallery.js
@@ -0,0 +1,89 @@
+// gallery.js — Parses a CSV file of poster filenames and years, then dynamically generates a thumbnail gallery grouped by year.
+// Also controls view switching between list and grid.
+
+document.addEventListener("DOMContentLoaded", function () {
+  console.log("Page loaded, starting CSV parsing...");
+
+  // Toggle view logic
+  function showView(view) {
+    document.getElementById('text-view').classList.toggle('hidden', view !== 'text');
+    document.getElementById('gallery-view').classList.toggle('hidden', view !== 'gallery');
+
+    const icons = document.querySelectorAll('.toggle-buttons i');
+    icons.forEach(icon => icon.classList.remove('active'));
+
+    if (view === 'text') {
+      document.querySelector('.toggle-buttons i.fa-list-ul').classList.add('active');
+    } else {
+      document.querySelector('.toggle-buttons i.fa-grip').classList.add('active');
+    }
+  }
+
+  // Make showView globally accessible
+  window.showView = showView;
+
+  // Set default view on load
+  showView('gallery');
+
+  // Load and parse CSV
+  Papa.parse("poster_filenames_v2.csv", {
+    download: true,
+    header: true,
+    complete: function (results) {
+      console.log("CSV parsed results:", results.data);
+
+      const data = results.data.filter(row => row.filename && row.year);
+      const groupedByYear = {};
+
+      data.forEach(row => {
+        const year = row.year.trim();
+        if (!groupedByYear[year]) groupedByYear[year] = [];
+        groupedByYear[year].push(row.filename.trim());
+      });
+
+      const container = document.getElementById("poster-gallery-container");
+
+      Object.keys(groupedByYear).sort((a, b) => b - a).forEach(year => {
+        // Create a wrapper for both heading and gallery
+        const yearBlock = document.createElement("div");
+        yearBlock.className = "year-block";
+        // Add year heading and horizontal line
+        yearBlock.innerHTML = `<h2 id="${year}">${year}</h2><hr />`;
+
+        // Create the gallery grid
+        const gallery = document.createElement("div");
+        gallery.className = "gallery";
+
+        groupedByYear[year].forEach(filename => {
+          const posterDiv = document.createElement("div");
+          posterDiv.className = "poster";
+
+          const img = document.createElement("img");
+          img.src = `../../posters/jpg/${filename}`;
+          img.alt = filename;
+
+          img.onerror = function () {
+            console.warn("Image not found:", img.src);
+          };
+
+          const link = document.createElement("a");
+          link.href = `../../posters/jpg/${filename}`;
+          link.target = "_blank";
+          link.appendChild(img);
+
+          // const caption = document.createElement("p");
+          // caption.textContent = filename;
+
+          posterDiv.appendChild(link);
+          // posterDiv.appendChild(caption); // Removed caption text below thumbnail
+          gallery.appendChild(posterDiv);
+        });
+
+        yearBlock.appendChild(gallery);   // Add gallery inside year block
+        container.appendChild(yearBlock); // Append full block to container
+      });
+    }
+  });
+
+
+});
diff --git a/activities/posters/index.html b/activities/posters/index.html
@@ -1,99 +1,178 @@
 <!DOCTYPE html>
 <html lang="en-us">
-  <head>
-    <link href="http://gmpg.org/xfn/11" rel="profile">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <!-- Enable responsiveness on mobile devices-->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
-    <meta name="theme-color" content="#1DB2E9">
-    <!-- Windows Phone -->
-    <meta name="msapplication-navbutton-color" content="#1DB2E9">
-    <!-- iOS Safari -->
-    <meta name="apple-mobile-web-app-status-bar-style" content="#1DB2E9">
-    <title>
-      Posters &middot; DDMAL
-    </title>
-    <link rel="stylesheet" href="../../assets/css/main.css" />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
-    <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway:300,400,500" rel="stylesheet">
-    <!-- Icons -->
-    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../public/mcgill_crest.png">
-    <link rel="shortcut icon" href="../../public/mcgill_crest.png">
-    <!-- RSS -->
-    <link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
-  </head>
+
+<head>
+  <link href="http://gmpg.org/xfn/11" rel="profile">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta http-equiv="content-type" content="text/html; charset=utf-8">
+  <!-- Enable responsiveness on mobile devices-->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+  <meta name="theme-color" content="#1DB2E9">
+  <!-- Windows Phone -->
+  <meta name="msapplication-navbutton-color" content="#1DB2E9">
+  <!-- iOS Safari -->
+  <meta name="apple-mobile-web-app-status-bar-style" content="#1DB2E9">
+  <title>
+    Posters &middot; DDMAL
+  </title>
+  <link rel="stylesheet" href="../../assets/css/main.css" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway:300,400,500" rel="stylesheet">
+  <!-- Icons -->
+  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../public/mcgill_crest.png">
+  <link rel="shortcut icon" href="../../public/mcgill_crest.png">
+  <!-- RSS -->
+  <link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-  <nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
-    <a class="navbar-brand" href="../../">DDMAL</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" >
+  <link rel="stylesheet" href="./poster.css">
+</head>
+
+<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
+  <a class="navbar-brand" href="../../">DDMAL</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav ml-auto" id="nav-items">
-        <li class="nav-item">
-          <a class="nav-link" href="../../">Home <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="../../lab_members/">Lab Members</a>
-        </li>
-        <li class="dropdown">
-          <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">Activities<span class="caret"></span></a>
-          <ul class="dropdown-menu" role="menu">
-            <li><a href='../../activities/media/' target='_top' >Media</a></li>
-            <li><a href='../../activities/posters/' target='_top' >Posters</a></li>
-            <li><a href='../../activities/presentations/' target='_top' >Presentations</a></li>
-            <li><a href='../../activities/publications/' target='_top' >Publications</a></li>
-          </ul>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="../../research/">Research</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="../../software/">Software</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="../../events/">Events</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="../../resources/">Resources</a>
-        </li>
-      </ul>
-    </div>
-  </nav>
-  <body id ="Site" class='layout-reverse theme-base-db sidebar-overlay'>
-    <!-- Wrap is the content to shift when toggling the sidebar. We wrap the
-      content to avoid any CSS collisions with our real content. -->
-    <div class="wrap">
-      <div class="container content">
-        <div class="page container">
-          <h1 style="text-align: left;" class="page-title">Posters</h1>
-          <div style="margin-bottom: 25px"></div>
-          <div id="json-content"></div>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav ml-auto" id="nav-items">
+      <li class="nav-item">
+        <a class="nav-link" href="../../">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../lab_members/">Lab Members</a>
+      </li>
+      <li class="dropdown">
+        <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">Activities<span
+            class="caret"></span></a>
+        <ul class="dropdown-menu" role="menu">
+          <li><a href='../../activities/media/' target='_top'>Media</a></li>
+          <li><a href='../../activities/posters/' target='_top'>Posters</a></li>
+          <li><a href='../../activities/presentations/' target='_top'>Presentations</a></li>
+          <li><a href='../../activities/publications/' target='_top'>Publications</a></li>
+        </ul>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../research/">Research</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../software/">Software</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../events/">Events</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../resources/">Resources</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+
+<nav class="navbar navbar-light fixed-top navbar-expand-lg bg-white">
+  <a class="navbar-brand" href="../../">DDMAL</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav ml-auto" id="nav-items">
+      <li class="nav-item">
+        <a class="nav-link" href="../../">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../lab_members/">Lab Members</a>
+      </li>
+      <li class="dropdown">
+        <a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">Activities<span
+            class="caret"></span></a>
+        <ul class="dropdown-menu" role="menu">
+          <li><a href='../../activities/media/' target='_top'>Media</a></li>
+          <li><a href='../../activities/posters/' target='_top'>Posters</a></li>
+          <li><a href='../../activities/presentations/' target='_top'>Presentations</a></li>
+          <li><a href='../../activities/publications/' target='_top'>Publications</a></li>
+        </ul>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../research/">Research</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../software/">Software</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../events/">Events</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="../../resources/">Resources</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+
+<body id="Site" class='layout-reverse theme-base-db sidebar-overlay'>
+  <!-- Wrap is the content to shift when toggling the sidebar. We wrap the
+    content to avoid any CSS collisions with our real content. -->
+  <div class="wrap">
+    <div class="container content">
+      <div class="page container">
+        <h1 style="text-align: left;" class="page-title">Posters</h1>
+        <div style="margin-bottom: 25px"></div>
+
+        <div class="toggle-buttons" style="text-align: right; margin-bottom: 20px;">
+          <button onclick="showView('text')" title="Show List View">
+            <i class="fa-solid fa-list-ul" aria-hidden="true"></i>
+          </button>
+          <button onclick="showView('gallery')" title="Show Grid View">
+            <i class="fa-solid fa-grip" aria-hidden="true"></i>
+          </button>
+        </div>
+
+        <div id="text-view">
+          <div id="json-content">
+            <!-- index.html text content will be dynamically loaded here -->
+          </div>
         </div>
-        <br>
-        <br>
+
+        <div id="gallery-view" class="hidden">
+          <div id="poster-gallery-container"></div></div>
       </div>
+      <br>
+      <br>
     </div>
-    <label for="sidebar-checkbox" class="sidebar-toggle"></label>
-    <footer id="sticky">
-      <div class="footer-img-wrap">
-        <img class="mcgill-img-footer" src="../../assets/schulich_logo.png" alt="">
-        <img class="ddmal-img-footer" src="../../assets/Ddmal_logo_transp-bg_no-border_1600w.png" alt="">
-      </div>
-    </footer>
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
-    <script src="../../js/bootstrap.js"></script>
-    <script type="text/javascript">
-      $(document).ready(function () {
-          var url = window.location;
-          $('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');
-          $('ul.navbar-nav a').filter(function() {
-               return this.href == url;
-          }).parent().addClass('active');
-      });
-    </script>
-    <script src="../script.js"></script>    
-  </body>
-</html>
+  </div>
+
+  <label for="sidebar-checkbox" class="sidebar-toggle"></label>
+  <footer id="sticky">
+    <div class="footer-img-wrap">
+      <img class="mcgill-img-footer" src="../../assets/schulich_logo.png" alt="">
+      <img class="ddmal-img-footer" src="../../assets/Ddmal_logo_transp-bg_no-border_1600w.png" alt="">
+    </div>
+  </footer>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
+    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
+    crossorigin="anonymous"></script>
+  <script src="../../js/bootstrap.js"></script>
+  <script type="text/javascript">
+    $(document).ready(function () {
+      var url = window.location;
+      $('ul.navbar-nav a[href="' + url + '"]').parent().addClass('active');
+      $('ul.navbar-nav a').filter(function () {
+        return this.href == url;
+      }).parent().addClass('active');
+    });
+  </script>
+
+  <!-- PapaParse for CSV -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
+
+  <!-- Load JSON content into #json-content -->
+  <script src="../script.js"></script>
+
+  <!-- Load thumbnail gallery -->
+  <script src="../posters/gallery.js"></script>
+
+</body>
+
+</html>