Clean some console.logs

app/webserver.py

@@ -266,15 +266,19 @@ class AnimationHandler(tornado.web.RequestHandler):
                     if first_line.endswith(","):
                         first_line = first_line[:-1]
 
-                    metadata = json.loads(first_line)
+                    drawing_specs = json.loads(first_line)
+                    drawing_id = name[:-16]
+                    md =  self.index.drawings[drawing_id].get_metadata() if drawing_id in self.index.drawings else {}
+                    title = md['title'] if 'title' in md else None
                     files.append(
                         {
-                            "name": f"/files/{name[:-16]}",
+                            "name": f"/files/{drawing_id}",
-                            "id": name[:-16],
+                            "id": drawing_id,
-                            "ctime": metadata[0],
+                            "title": title,
+                            "ctime": drawing_specs[0],
                             "mtime": datetime.datetime.fromtimestamp(stat.st_mtime).strftime("%Y-%m-%d %T"),
-                            "dimensions": [metadata[1], metadata[2]],
+                            "dimensions": [drawing_specs[1], drawing_specs[2]],
-                            "svg": f"/drawing/{name[:-16]}.svg",
+                            "svg": f"/drawing/{drawing_id}.svg",
                         }
                     )
 

app/www/annotate.html

@@ -63,12 +63,16 @@
             background: white;
             display: block;
         }
+        .playlist .title{
+            display: block;
+            font-weight: bold;;
+        }
 
         .help {
             position: absolute;
             right: 0;
             top: 10px;
-            left: 70px;
+            left: 220px;
             margin: 0;
             padding: 0;
             display: flex;

app/www/annotate.js

@@ -306,7 +306,7 @@ class Annotator extends EventTarget {
 
     getColorForTag(tag_id) {
         const tag = this.tagMap[tag_id];
-        console.log(tag_id, tag);
+        // console.log(tag_id, tag);
         if (tag && tag.hasOwnProperty('color')) {
             return tag.color;
         }
@@ -423,12 +423,12 @@ class Annotator extends EventTarget {
         this.outPointTimeMs = out_ms;
         // this._seekByTimeMs(this.audioOffset < 0 ? this.audioOffset * 1000 : 0);
         // draw full stroke of annotation
-        console.log('setInOut');
+        console.debug('setInOut');
         this.drawStrokePosition(this.inPointPosition, this.outPointPosition);
-        console.log([`${this.inPointTimeMs}`, `${this.outPointTimeMs}`])
+        console.debug([`${this.inPointTimeMs}`, `${this.outPointTimeMs}`])
         this.slider.set([this.inPointTimeMs, this.outPointTimeMs]);
 
-        // console.log(this.selectedAnnotation);
+        // console.debug(this.selectedAnnotation);
         if (this.selectedAnnotation) {
             this.selectedAnnotation.t_in = in_ms;
             this.selectedAnnotation.t_out = out_ms;
@@ -443,7 +443,7 @@ class Annotator extends EventTarget {
         this.outPointTimeMs = null;
         this._seekByTimeMs(this.audioOffset < 0 ? this.audioOffset * 1000 : 0);
         // draw full stroke of annotation
-        console.log('reset!');
+        console.debug('reset!');
         this.drawStrokePosition(this.inPointPosition, [Infinity, Infinity]);
         this.setUpAnnotator();
     }
@@ -471,7 +471,7 @@ class Annotator extends EventTarget {
                             }
                             return this.loadStrokes(data, metadata)
                         })
-                        .catch(e => console.log(e));
+                        .catch(e => console.error(e));
                 } else {
                     return this.loadStrokes(data, null);
                 }
@@ -480,7 +480,7 @@ class Annotator extends EventTarget {
                 // play on click for player
                 if(this.config.is_player) {
                     this.svgEl.addEventListener('click', (ev) => {
-                        console.log('clicked for play/pause');
+                        console.debug('clicked for play/pause');
                         this.playPause();
                     });
                 }
@@ -492,11 +492,12 @@ class Annotator extends EventTarget {
                     this.wrapperEl.classList.remove('loading');
                 }
             })
-            .catch(e => console.log(e));
+            .catch(e => console.debug(e));
     }
 
     updateState() {
         const state = {
+            'title': this.title,
             'file': this.filename,
             'annotations': this.annotations,
             'audio': {
@@ -518,7 +519,7 @@ class Annotator extends EventTarget {
 
     setSaved(state) {
         if (this.state != state) {
-            console.log('already outdated');
+            console.debug('already outdated');
         }
         else {
             this.wrapperEl.classList.add('saved');
@@ -544,7 +545,7 @@ class Annotator extends EventTarget {
                 }
             })
             .catch((error) => {
-                console.log(error);
+                console.error(error);
             });
 
     }
@@ -660,11 +661,11 @@ class Annotator extends EventTarget {
                 ttInputEl.focus();
 
                 const submit = () => {
-                    console.log(ttInputEl.value);
+                    console.debug(ttInputEl.value);
                     const tcMs = this.formatter.from(ttInputEl.value);
                     let points = this.slider.get();
                     points[i] = tcMs;
-                    console.log(points);
+                    console.debug(points);
                     this.slider.set(points);
                 };
                 ttInputEl.addEventListener('keydown', (keyE) => {
@@ -700,6 +701,14 @@ class Annotator extends EventTarget {
             this._updatePlayhead();
         }
 
+        this.title = null;
+        if (metadata && metadata.hasOwnProperty('title')) {
+            this.title = metadata.title;
+        }
+        else if (drawing.hasOwnProperty('title')) {
+            this.title = drawing.title;
+        }
+
         this.filename = drawing.file;
         this.strokes = drawing.shape.map(s => new Stroke(s['color'], s['points']));
         this.viewboxes = drawing.viewboxes;
@@ -745,17 +754,15 @@ class Annotator extends EventTarget {
                 // Probably a wrong order
                 if (ev.key == 'ArrowLeft' && ev.shiftKey) {
                     const p = this._paused;
-                    console.log(p);
                     const diff = ev.ctrlKey ? 10000 : 1000;
                     this.scrubTo(this._currentTimeMs - diff);
-                    if (!p) { console.log('play!'); this.play(); } // scrubTo() causes a pause();
+                    if (!p) { this.play(); } // scrubTo() causes a pause();
                 }
                 if (ev.key == 'ArrowRight' && ev.shiftKey) {
                     const p = this._paused;
-                    console.log(p);
                     const diff = ev.ctrlKey ? 10000 : 1000;
                     this.scrubTo(this._currentTimeMs + diff);
-                    if (!p) { console.log('play!'); this.play(); } // scrubTo() causes a pause();
+                    if (!p) { this.play(); } // scrubTo() causes a pause();
                 }
 
                 // additional keys only for annotation mode
@@ -827,11 +834,29 @@ class Annotator extends EventTarget {
             }
             else {
 
+                let mdConfigEl = document.createElement('div');
+                mdConfigEl.classList.add('metadataconfig')
+                this.wrapperEl.appendChild(mdConfigEl);
+
+
+                let titleEl = document.createElement('div');
+                titleEl.classList.add('drawing-title');
+                titleEl.innerText = this.title ?? "[add title]"
+                titleEl.addEventListener('click', (ev) => {
+                    const title = prompt("Change the title for the drawing", this.title ?? "");
+                    if(title === null) return; //cancel
+                    titleEl.innerText = title.length ? title : "[add title]";
+                    this.title = title.length ? title : null;
+                    this.updateState();
+                })
+                mdConfigEl.appendChild(titleEl);
+
                 let audioConfigEl = document.createElement('div');
                 audioConfigEl.classList.add('audioconfig')
-                this.wrapperEl.appendChild(audioConfigEl);
+                mdConfigEl.appendChild(audioConfigEl);
 
-                audioConfigEl.prepend(this.audioEl);
+
+                audioConfigEl.appendChild(this.audioEl);
 
                 let audioSelectEl = document.createElement('select');
                 audioSelectEl.classList.add('audioselect');
@@ -939,12 +964,12 @@ class Annotator extends EventTarget {
             }
         } else {
             if (this.audioEl.currentTime !== t_start / 1000) {
-                console.log(this.audioEl.currentTime, t_start / 1000);
+                console.debug(this.audioEl.currentTime, t_start / 1000);
                 this.audioEl.currentTime = t_start / 1000;
             }
             this.audioEl.play();
             // this.audioEl.play(); // play is done in "seeked" evenlistener
-            console.log(this.audioEl.currentTime, t_start, t_in, t_out);
+            console.debug(this.audioEl.currentTime, t_start, t_in, t_out);
         }
 
         this.audioIsPlaying = true; // also state as playing in preroll
@@ -1087,7 +1112,7 @@ class Annotator extends EventTarget {
         // when an outpoint is set, stop playing there
         if (this.outPointPosition && (next_path > this.outPointPosition[0] ||
             (next_path == this.outPointPosition[0] && next_point > this.outPointPosition[1]))) {
-            console.log('> out point', this.outPointPosition)
+            console.debug('> out point', this.outPointPosition)
             return [null, null];
         }
 

app/www/playlist.js

@@ -2,6 +2,8 @@ class Playlist {
     constructor(wrapperEl, url) {
         this.wrapperEl = wrapperEl;
 
+        this.onlyWithTitle = true;
+
         const request = new Request(url, {
             method: 'GET',
         });
@@ -9,80 +11,109 @@ class Playlist {
         fetch(request)
             .then(response => response.json())
             .then(data => {
-                let playlist = this.wrapperEl.querySelector('.playlist');
+                this.files = data;
-                if (!playlist) {
+                this.buildList()
-                    playlist = document.createElement('nav');
-                    playlist.classList.add('playlist');
-                    this.wrapperEl.appendChild(playlist)
-                }
-                else {
-                    playlist.innerHTML = "";
-                }
-
-                const listEl = document.createElement("ul");
-                for (let file of data) {
-                    const liEl = document.createElement("li");
-
-
-                    const imgEl = document.createElement("img");
-                    imgEl.classList.add('img');
-                    imgEl.title = file.id;
-                    imgEl.src = file.svg;
-                    liEl.append(imgEl);
-
-
-                    let time = file.mtime;
-                    if (file.ctime != file.mtime){
-                        time += ` (orig: ${file.ctime})`;
-                    }
-                    const dateEl = document.createElement("span");
-                    dateEl.classList.add('date');
-                    dateEl.innerText = time;
-                    liEl.append(dateEl);
-
-
-                    const nameEl = document.createElement("span");
-                    nameEl.classList.add('name');
-                    nameEl.innerText = file.name;
-                    liEl.append(nameEl);
-
-                    const linksEl = document.createElement("span");
-                    linksEl.classList.add('links');
-                    liEl.append(linksEl);
-
-                    const playEl = document.createElement("a");
-                    playEl.classList.add('play');
-                    playEl.innerText = "Play";
-                    playEl.href = location;
-                    playEl.pathname = "annotate.html";
-                    playEl.search = "?file="+file.name+"&player=1";
-                    linksEl.append(playEl);
-                    
-                    const annotateEl = document.createElement("a");
-                    annotateEl.classList.add('annotate');
-                    annotateEl.innerText = "Annotate";
-                    annotateEl.href = location;
-                    annotateEl.pathname = "annotate.html";
-                    annotateEl.search = "?file="+file.name;
-                    linksEl.append(annotateEl);
-
-                    const drawEl = document.createElement("a");
-                    drawEl.classList.add('draw');
-                    drawEl.innerText = "Draw";
-                    drawEl.href = location;
-                    drawEl.pathname = "draw.html";
-                    drawEl.hash = file.id;
-                    linksEl.append(drawEl);
-                    
-                    // liEl.addEventListener('click', (e) => {
-                    //     this.play(fileUrl);
-                    //     playlist.style.display = "none";
-                    // });
-                    listEl.appendChild(liEl);
-                }
-                playlist.appendChild(listEl);
-                // do something with the data sent in the request
             });
 
     }
+
+    buildList() {
+        let playlist = this.wrapperEl.querySelector('.playlist');
+        if (!playlist) {
+            playlist = document.createElement('nav');
+            playlist.classList.add('playlist');
+            this.wrapperEl.appendChild(playlist)
+        }
+        else {
+            playlist.innerHTML = "";
+        }
+
+        const filterEl = document.createElement('label');
+        filterEl.classList.add('filter');
+        filterEl.innerText = "Show only diagrams with title"
+        const filterCheckEl = document.createElement('input');
+        filterCheckEl.type = "checkbox";
+        filterCheckEl.checked = this.onlyWithTitle;
+        filterCheckEl.addEventListener('click', (ev) => {
+            this.onlyWithTitle = ev.target.checked;
+            this.buildList()
+        })
+        filterEl.appendChild(filterCheckEl)
+
+        playlist.appendChild(filterEl)
+
+        const listEl = document.createElement("ul");
+        for (let file of this.files) {
+
+            if(this.onlyWithTitle && file.title === null) { 
+                continue;
+            }
+            const liEl = document.createElement("li");
+
+            const imgEl = document.createElement("img");
+            imgEl.classList.add('img');
+            imgEl.title = file.id;
+            imgEl.src = file.svg;
+            liEl.append(imgEl);
+
+            if (file.title) {
+                const titleEl = document.createElement("span");
+                titleEl.classList.add('title');
+                titleEl.innerText = file.title;
+                liEl.append(titleEl);
+            }
+
+
+            let time = file.mtime;
+            if (file.ctime != file.mtime) {
+                time += ` (orig: ${file.ctime})`;
+            }
+            const dateEl = document.createElement("span");
+            dateEl.classList.add('date');
+            dateEl.innerText = time;
+            liEl.append(dateEl);
+
+
+            const nameEl = document.createElement("span");
+            nameEl.classList.add('name');
+            nameEl.innerText = file.name;
+            liEl.append(nameEl);
+
+            const linksEl = document.createElement("span");
+            linksEl.classList.add('links');
+            liEl.append(linksEl);
+
+            const playEl = document.createElement("a");
+            playEl.classList.add('play');
+            playEl.innerText = "Play";
+            playEl.href = location;
+            playEl.pathname = "annotate.html";
+            playEl.search = "?file=" + file.name + "&player=1";
+            linksEl.append(playEl);
+
+            const annotateEl = document.createElement("a");
+            annotateEl.classList.add('annotate');
+            annotateEl.innerText = "Annotate";
+            annotateEl.href = location;
+            annotateEl.pathname = "annotate.html";
+            annotateEl.search = "?file=" + file.name;
+            linksEl.append(annotateEl);
+
+            const drawEl = document.createElement("a");
+            drawEl.classList.add('draw');
+            drawEl.innerText = "Draw";
+            drawEl.href = location;
+            drawEl.pathname = "draw.html";
+            drawEl.hash = file.id;
+            linksEl.append(drawEl);
+
+            // liEl.addEventListener('click', (e) => {
+            //     this.play(fileUrl);
+            //     playlist.style.display = "none";
+            // });
+            listEl.appendChild(liEl);
+        }
+        playlist.appendChild(listEl);
+        // do something with the data sent in the request
+    }
 }

app/www/svganim.css

@@ -249,24 +249,35 @@ path.before_in {
     right: 110%;
 }
 
-.audioconfig {
+.metadataconfig {
     z-index: 9;
     background: black;
     color: white;
     position: relative;
-    width: 100px;
+    /* width: 100px; */
     /* as wide as audio controls only */
-    overflow: hidden;
+    overflow:visible;
     /* white-space: nowrap; */
-    left: -50px;
+    /* left: -50px; */
 }
 
-.audioconfig:hover {
+.metadataconfig .drawing-title{
-    width: auto;
+    font-weight: bold;
+    padding: 10px;
+    cursor: pointer;
+}
+
+.metadataconfig .audioconfig{
+    display: none;;
+    background-color: black;;
+}
+
+.metadataconfig:hover .audioconfig{
+    /* width: auto;
     left: 0px;
     overflow: visible;
-    height: 200px;
+    height: 200px; */
-
+    display: block;
 }
 
 .audioconfig select,