Work in progress: use canvas for day view actagram

browse/makefile

@@ -3,7 +3,7 @@ CC=gcc -std=c99 -Wall -DVIEWCGI
 LINKER=link
 LINKCON = /nologo
 
-all:objdir view.cgi wait_change.cgi tb.cgi ../../www/realtime.html ../../www/favicon.ico ../../www/showpic.js ../../www/styledir.css
+all:objdir view.cgi wait_change.cgi tb.cgi ../../www/realtime.html ../../www/favicon.ico ../../www/showpic.js ../../www/showdir.js ../../www/styledir.css
 
 OBJ = obj
 
@@ -49,5 +49,8 @@ wait_change.cgi:	$(OBJ)/wait_change.o
 ../../www/showpic.js: showpic.js
 	cp showpic.js ../../www
 
+../../www/showdir.js: showdir.js
+	cp showdir.js ../../www
+
 ../../www/styledir.css: styledir.css
 	cp styledir.css ../../www

browse/showdir.c

@@ -80,6 +80,7 @@ static void PrintNavLinks(Dir_t * Dir, int IsRoot)
 //----------------------------------------------------------------------------------
 // Show an actagram for one hour.
 //----------------------------------------------------------------------------------
+/*
 static void ShowHourActagram(VarList SubdImages, char * HtmlPath, char * SubdirName)
 {
     // Build an actagram for the hour.
@@ -129,6 +130,7 @@ static void ShowHourActagram(VarList SubdImages, char * HtmlPath, char * SubdirN
     if (hrefOpen) printf("</a>");
     printf("</ul>\n");
 }
+*/
 
 //----------------------------------------------------------------------------------
 // Show directories for all the hours (or days)
@@ -140,9 +142,9 @@ static int ShowHourlyDirs(char * HtmlPath, int IsRoot, VarList Directories)
     int prevwkd = 6, thiswkd=6;
     for (int b=0;b<Directories.NumEntries;b++){
         char * SubdirName = Directories.Entries[b].Name;
-        
+
         if (strcmp(SubdirName, "saved") == 0) continue;
-        
+
         int isw = IsWeekendString(SubdirName);
         thiswkd = isw & 7;
         if (thiswkd < prevwkd){
@@ -171,15 +173,75 @@ static int ShowHourlyDirs(char * HtmlPath, int IsRoot, VarList Directories)
         printf("<br>\n");
 
         if (!IsRoot) {
-            ShowHourActagram(SubdImages, HtmlPath, SubdirName);
+            //ShowHourActagram(SubdImages, HtmlPath, SubdirName);
+            printf("<br>\n<canvas id='canvas-%s' width='240px' height='30px' "
+                   "style=\"margin: 0; padding: 0; overflow: hidden; text-decoration: none;\"></canvas>\n", SubdirName);
+            int npic = 0;
+            char * Prefix = NULL;
+            int prefixlen = 0;
+
+            for (int a=0;a<(int)SubdImages.NumEntries;a++){
+                if (!NameIsImage(SubdirName)) continue;
+
+                if (Prefix == NULL){
+                    Prefix = SubdirName;
+                    prefixlen = 7;
+                    continue;
+                }
+
+                for (int b=0;b<prefixlen;b++){
+                    if (SubdirName[b] != Prefix[b] || SubdirName[b] == 0){
+                        prefixlen = b;
+                        break;
+                    }
+                }
+            }
+            prefixlen = prefixlen >= 7 ? 7 : 0;
+
+
+            printf("\n<script type=\"text/javascript\">\n");
+            printf("pixpath=\"pix/\"\n");
+            printf("subdir=\"%s\"\n",HtmlPath);
+            printf("prefix=\"%.*s\"\n",prefixlen, Prefix);
+            printf("console.log(\"subdirname\", %s)\n", SubdirName);
+            printf("subdirname='canvas-%s'\n", SubdirName);
+            printf("piclist = [");
+
+            // Output list of images in the hour that we can flip through.
+            int HasLog = 0;
+
+            for (int a=0;a<(int)SubdImages.NumEntries;a++){
+                if (strcmp(SubdirName, "Log.html") == 0) HasLog = 1;
+                if (!NameIsImage(SubdirName)) continue;
+
+                int e = strlen(SubdirName);
+                e -= 4;
+
+                if (npic){
+                    putchar(',');
+                    if (npic % 5 == 0) putchar('\n');
+                }
+                printf("\"%s\"",SubdirName+prefixlen);
+                npic++;
+            }
+
+            printf("];\n\n");
+
+            // Dump some variables for the javascript code.
+            printf("hasLog=%d\n",HasLog);
+            //printf("isSavedDir=%d\n",IsSavedDir);
+            //printf("PrevDir=\"%s\";NextDir=\"%s\"\n",dir->Previous, dir->Next);
+            printf("</script>\n");
+            // Include the showdir.js javascript file.
+            printf("<script type=\"text/javascript\" src=\"showdir.js\"></script>\n");
         }
         free(SubdImages.Entries);
 
         printf("</div>\n");
     }
     printf("<br clear=left>\n");
     if (TotImages) printf("<br>%d images<br>",TotImages);
-    
+
     return TotImages;
 }
 
@@ -346,11 +408,11 @@ void MakeHtmlOutput(Dir_t * Dir)
 
     int IsSavedDir = 0;
     int IsRoot = 0;
-            
+
     if (strstr(Dir->HtmlPath, "saved") != NULL) IsSavedDir = 1;
-    
+
     Images = Dir->Images;
-    Directories = Dir->Dirs;    
+    Directories = Dir->Dirs;
 
     // Header of file.
     printf("<html>\n<title>%s</title>\n",Dir->HtmlPath);
@@ -394,28 +456,33 @@ void MakeHtmlOutput(Dir_t * Dir)
     }
 
     printf("<p>\n");
-        
+
     if (IsRoot){
         // Show host name and free space for root directory.
         FILE * fp = fopen("/proc/sys/kernel/hostname","r");
         char HostName[32];
         memset(HostName, 0, 32);
         fread(HostName, 1, 30, fp);
         fclose(fp);
-        
+
         struct statvfs sv;
         statvfs("pix/", &sv);
         printf("%s: %5.1f gig ", HostName, (double)sv.f_bavail * sv.f_bsize / 1000000000);
         printf("(%4.1f%%) free<br>\n", (double)(sv.f_bavail*100.0/sv.f_blocks));
     }
-    
+
     int SubdirImages = 0;
     if (Directories.NumEntries){
         if (!IsSavedDir){
             printf("<b>20%.2s/%.2s/%.2s</b><br>",Dir->HtmlPath,Dir->HtmlPath+2,Dir->HtmlPath+4);
         }
         PrintNavLinks(Dir, IsRoot);
+
         SubdirImages = ShowHourlyDirs(Dir->HtmlPath, IsRoot, Directories);
+
+        // Include the showdir.js javascript file.
+        //printf("<script type=\"text/javascript\" src=\"showdir.js\"></script>\n");
+
     }else{
         PrintNavLinks(Dir, IsRoot);
     }
@@ -425,24 +492,24 @@ void MakeHtmlOutput(Dir_t * Dir)
         ShowThumbnailList(Dir->HtmlPath, IsSavedDir, Images);
     }
 
-    printf("<p>\n");    
+    printf("<p>\n");
     PrintNavLinks(Dir, IsRoot);
 
     // Add javascript for hover-over preview when showing a whole day's worth of images
     if (SubdirImages){
-        
+
         printf("<br><small id='prevn'></small><br>\n"
            "<a id='prevh' href=""><img id='preview' src='' width=0 height=0></a>\n");
 
-    // Javascript
+        // Javascript
         printf("<script>\n" // Script to resize the image to the right aspect ratio
            "function sizeit(){\n"
            "  var h = 350\n"
            "  var w = h/el.naturalHeight*el.naturalWidth;\n"
            "  if (w > 1024){ w=850;h=w/el.naturalWidth*el.naturalHeight;}\n"
            "  el.width=w;el.height=h;\n"
            "}\n");
-           
+
         printf("function mmo(str){\n"
            "   str='%s/'+str\n",Dir->HtmlPath);
         printf("   el = document.getElementById('preview')\n"
@@ -456,4 +523,6 @@ void MakeHtmlOutput(Dir_t * Dir)
            " + ' &nbsp;'+str.substring(15, 17)+':'+str.substring(17,19);"
            "}\n</script>\n");
     }
+    printf("</body>\n");
+    printf("</html>\n");
 }

browse/showdir.js

@@ -0,0 +1,75 @@
+// Javascript code for flipping through an hour's worth of images from imgcomp
+// Invoked from HTML generated by view.cgi module showpic.c
+var canv = document.getElementById(subdirname);
+pic_mouseindex = -1
+console.log("canv", subdirname)
+
+if (canv) {
+    BARS_HEIGHT = canv.height-5;
+} else {
+    console.log("canv is null; subdirname", subdirname);
+}
+HIST_BINS = 240
+
+thisbin_last = -1
+per_hist_bar = canv.width/HIST_BINS
+
+function UpdateActagram(){
+    console.log("update called for", subdirname)
+    // Update the actagram text character display below the nav links.
+    var ctx = canv.getContext("2d");
+    var thisbin
+
+    if (piclist.length){
+        var thissec = parseInt(piclist[pic_index].substring(0,2))*60 + parseInt(piclist[pic_index].substring(2,4))
+        thisbin = Math.floor(thissec*HIST_BINS/3600)
+    }
+
+    if (thisbin == thisbin_last) return;
+    thisbin_last = thisbin
+
+    // clear canvas so we don't draw on top of it each time
+    ctx.clearRect(0, 0, canv.width, canv.height);
+
+    // draw 10 minute scale stripe background as first layer
+    for (a=0;a<60;a+=10){
+        ctx.fillStyle = a % 20 == 0 ? "#ffffff" : "#ebebeb";
+        var histX = a*HIST_BINS/60*per_hist_bar
+        ctx.fillRect(histX, 0, canv.width/6, canv.height);
+    }
+
+    ctx.fillStyle = "#a0a0ff"
+    ctx.fillRect((thisbin-0.5)*per_hist_bar, 0, per_hist_bar*2-0.5, canv.height);
+
+    for (a=0;a<HIST_BINS;a++){
+        b = ActBins[a];
+        if (!b) continue
+
+        ctx.fillStyle = a == thisbin ? "black" : "gray";
+        var rectHeight = b/max_bin*BARS_HEIGHT;
+        ctx.fillRect(a*per_hist_bar, BARS_HEIGHT, per_hist_bar-0.5, -rectHeight);
+    }
+}
+
+
+
+
+
+// Fill bins for actagram (a sort of motion time histogram)
+ActBins = []
+ActNums = []
+
+var max_bin = 6;// maximun used to scale histogram within canvas height
+for (a=0;a<piclist.length;a++){
+    var sec = parseInt(piclist[a].substring(0,2))*60 + parseInt(piclist[a].substring(2,4))
+    var binfl = sec*HIST_BINS/3600
+    var bin = Math.floor(binfl)
+    var frac = binfl-bin
+    if (ActBins[bin]) ActBins[bin]++
+    else ActBins[bin] = 1
+
+    if (frac < 0.6 || !ActNums[bin]) ActNums[bin] = a;
+    if (max_bin < ActBins[bin]) max_bin = ActBins[bin];
+}
+
+UpdateActagram()