Record and playback now working, user interface not yet working.

README.md

@@ -1,14 +1,30 @@
-# sikhi
+# muharni
 
-A Clojure library designed to ... well, that part is up to you.
+A Clojure library designed to hack up a web page for studying the Punjabi
+script and the pronunciation thereof approved for the reading of Sikh
+sacred texts.
 
 ## Usage
 
-FIXME
+In its present state of extreme hackiness, just loading the namespace `muharni.construct` will cause the web page to be generated.
+
+Thus, start the REPL by connecting to the repository directory and invoking
+
+> lein repl
+
+The REPL will start up, and eventually show a prompt 
+
+> muharni.construct=>  
+
+At this prompt, invoke
+
+> (use 'muharni.construct :reload)
+
+You'll see a series of messages which are in fact printed by [JTidy](https://github.com/jtidy/jtidy) and which you can safely ignore. As a side effect, the HTML page will be generated in `resources/public/index.html`.
 
 ## License
 
-Copyright © 2022 FIXME
+Copyright © 2022 Lucy Fyfe and Simon Brooke
 
 This program and the accompanying materials are made available under the
 terms of the Eclipse Public License 2.0 which is available at

resources/public/style.css

@@ -21,6 +21,10 @@ th {
     background-color: silver;
 }
 
+.character-table {
+    position: relative
+}
+
 .entry {
     font-size: 3em;
 }
@@ -40,4 +44,10 @@ th {
 #footer p {
     margin: 0;
     padding: 0.25em;
+}
+
+#popup {
+    position: absolute;
+    display: none;
+    background-color: whitesmoke;
 }

src/muharni/construct.clj

@@ -83,14 +83,21 @@
   "Emit a table cell describing one entry from entries with either the
    long or short audio clip available on click. "
   [^Integer row ^Integer col ^Boolean long?]
-  (vector :td {:class "entry"
+  (let [audio (format
+               "audio/%02d%s.mp3"
+               (inc row)
+               ((columns col) (if long? :upper-latin :lower-latin)))
+        char ((entries row) col)]
+    (vector :td {:class "entry"
 
                :onclick (format
-                         "new Audio('audio/%02d%s.mp3').play();"
+                         "showPopup( '%s', '%s', '%s', '%s')"
-                         (inc row)
+                         (if long? row (+ row 40))
-                         ((columns col) (if long? :upper-latin :lower-latin)))}
+                         col
+                         char
+                         audio)}
           ;; (audio row col long?)
-          ((entries row) col)))
+          char)))
 
 ;; (entry-cell 3 4 true)
 
@@ -135,11 +142,13 @@
                  [[:td]]
                  (map #(vector
                         :td {:class "play-column"
-                             :onclick (format
+                             :onclick 
+                             (format
                                        "new Audio('audio/%s%s%s_MP3WRAP.mp3').play();"
                                        (if ttb? "ttb" "btt")
                                        (if long? "long" "short")
-                                       ((columns %) (if long? :upper-latin :lower-latin)))}
+                                       ((columns %) (if long? :upper-latin :lower-latin)))
+                             }
                         (str "Play " (if ttb? "down" "up")))
                       (range (count columns)))
                  [[:td]])))
@@ -150,7 +159,8 @@
   [^Boolean long?]
   (apply
    vector
-   (concat [:table]
+   (concat [:table {:class "character-table"
+                    :summary "Table of Punjabi characters from which to select sound recordings"}]
            [(col-headers-row)
             (play-column-row true long?)]
            (map #(entries-row % long?)
@@ -164,10 +174,28 @@
   [title]
   [:html
    [:head
-    [:meta {:charset "UTF-8"}]
+    [:meta {:charset "UTF-8" :content ""}]
-    [:link {:rel "stylesheet" :href "style.css"}]
+    [:link {:rel "stylesheet" :type "text/css" :href "style.css"}]
+    ;; pull jquery from Google rather than host locally.
+    [:script {:type "text/javascript"
+              :src "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"}]
+    [:script {:type "text/javascript"
+              :src "scripts/muharni.js"}]
     [:title (str title)]]
-   [:body
+   [:body {:id "body"}
+    [:div {:id "popup" 
+           :onmouseout "hidePopup();"
+           :style "display: none; border: thin solid gray; width: 10%"}
+     [:p {:id "character" :style "text-align: center; margin: 0; font-size: 4em;"} "?"]
+     [:table {:id "controls" :summary "Controls for audio playback and recording"}
+      [:tr
+       [:th "Tutor"]
+       [:td {:id "play-tutor"} [:button {:onclick "playTutorSound();"}
+                                "►"]]]
+      [:tr
+       [:th "You"]
+       [:td {:id "play-student"} [:button {:onclick "playStudentSound();"} "►"]]
+       [:td {:id "record-stop"} [:button {:onclick "recordStudentSound();"} "⏺"]]]]]
     [:h1 (str title)]
     [:button {:onclick "var l = document.getElementById('long');
                         var s = document.getElementById('short');
@@ -189,7 +217,10 @@
     [:div {:id "footer"}
      [:p "Made with love by " [:a {:href "mailto:simon@journeyman.cc"} "Simon Brooke"] " for "
       [:img {:id "bug" :src "img/bug.jpg" :alt "Lucy Fyfe"}]]
-     [:p "all errors my own"]]]])
+     [:p "all errors my own."]
+     [:p [:img {:height 16 :width 16 :alt "GitHub logo" :src "img/github-logo-transparent.png"}]
+      "Find me/fork me on "
+      [:a {:href "https://github.com/simon-brooke/muharni"} "GitHub"]]]]])
 
 (defn tidy-page
   "Reads HTML as a string, emits cleaned-up HTML as a string. This is not yet