add image support to statusbar, regularize voyager menu image names, …

…add empty menu image
freethoughtdesign · Feb 24, 2020 · 4f92ca0 · 4f92ca0
1 parent 034133f
commit 4f92ca0
Show file tree

Hide file tree

Showing 36 changed files with 73 additions and 28 deletions.
diff --git a/images/empty.svg b/images/empty.svg
diff --git a/images/voyager/cmap_a.png → images/voyager/color_a.png b/images/voyager/cmap_a.png → images/voyager/color_a.png
diff --git a/images/voyager/cmap_aips0.png → images/voyager/color_aips0.png b/images/voyager/cmap_aips0.png → images/voyager/color_aips0.png
diff --git a/images/voyager/cmap_b.png → images/voyager/color_b.png b/images/voyager/cmap_b.png → images/voyager/color_b.png
diff --git a/images/voyager/cmap_bb.png → images/voyager/color_bb.png b/images/voyager/cmap_bb.png → images/voyager/color_bb.png
diff --git a/images/voyager/cmap_blue.png → images/voyager/color_blue.png b/images/voyager/cmap_blue.png → images/voyager/color_blue.png
diff --git a/images/voyager/cmap_color.png → images/voyager/color_color.png b/images/voyager/cmap_color.png → images/voyager/color_color.png
diff --git a/images/voyager/cmap_cool.png → images/voyager/color_cool.png b/images/voyager/cmap_cool.png → images/voyager/color_cool.png
diff --git a/images/voyager/cmap_green.png → images/voyager/color_green.png b/images/voyager/cmap_green.png → images/voyager/color_green.png
diff --git a/images/voyager/cmap_grey.png → images/voyager/color_grey.png b/images/voyager/cmap_grey.png → images/voyager/color_grey.png
diff --git a/images/voyager/cmap_he.png → images/voyager/color_he.png b/images/voyager/cmap_he.png → images/voyager/color_he.png
diff --git a/images/voyager/cmap_heat.png → images/voyager/color_heat.png b/images/voyager/cmap_heat.png → images/voyager/color_heat.png
diff --git a/images/voyager/cmap_hsv.png → images/voyager/color_hsv.png b/images/voyager/cmap_hsv.png → images/voyager/color_hsv.png
diff --git a/images/voyager/cmap_i8.png → images/voyager/color_i8.png b/images/voyager/cmap_i8.png → images/voyager/color_i8.png
diff --git a/images/voyager/cmap_inferno.png → images/voyager/color_inferno.png b/images/voyager/cmap_inferno.png → images/voyager/color_inferno.png
diff --git a/images/voyager/cmap_magma.png → images/voyager/color_magma.png b/images/voyager/cmap_magma.png → images/voyager/color_magma.png
diff --git a/images/voyager/cmap_parula.png → images/voyager/color_parula.png b/images/voyager/cmap_parula.png → images/voyager/color_parula.png
diff --git a/images/voyager/cmap_plasma.png → images/voyager/color_plasma.png b/images/voyager/cmap_plasma.png → images/voyager/color_plasma.png
diff --git a/images/voyager/cmap_rainbow.png → images/voyager/color_rainbow.png b/images/voyager/cmap_rainbow.png → images/voyager/color_rainbow.png
diff --git a/images/voyager/cmap_red.png → images/voyager/color_red.png b/images/voyager/cmap_red.png → images/voyager/color_red.png
diff --git a/images/voyager/cmap_sls.png → images/voyager/color_sls.png b/images/voyager/cmap_sls.png → images/voyager/color_sls.png
diff --git a/images/voyager/cmap_staircase.png → images/voyager/color_staircase.png b/images/voyager/cmap_staircase.png → images/voyager/color_staircase.png
diff --git a/images/voyager/cmap_standard.png → images/voyager/color_standard.png b/images/voyager/cmap_standard.png → images/voyager/color_standard.png
diff --git a/images/voyager/cmap_turbo.png → images/voyager/color_turbo.png b/images/voyager/cmap_turbo.png → images/voyager/color_turbo.png
diff --git a/images/voyager/cmap_viridis.png → images/voyager/color_viridis.png b/images/voyager/cmap_viridis.png → images/voyager/color_viridis.png
diff --git a/images/voyager/zoom_zoom.svg b/images/voyager/zoom_zoom.svg
diff --git a/js9-allinone.css b/js9-allinone.css
@@ -1662,13 +1662,27 @@ div.JS9MouseTouchHeader, div.JS9MouseTouchFooter {
     padding-left: 2px;
 }
 
+.JS9StatusbarImage {
+    white-space:nowrap;
+}
+
 .JS9StatusbarItemNoHighlight {
     border: 1px solid #D0D0D0;
 }
 
 .JS9StatusbarItemHighlight {
     border: 1px solid #B5B5B5;
 }
+
+img.JS9StatusbarImageOption[name*="zoom_"]{
+    height: 12px;
+    width:  12px;
+}
+
+img.JS9StatusbarImageOption[name*="color_"]{
+    height: 12px;
+    width:  40px;
+}
 div.JS9SeparateContainer {
     padding: 2px;
 }

diff --git a/js9-allinone.js b/js9-allinone.js
diff --git a/js9.js b/js9.js
@@ -229,7 +229,8 @@ JS9.globalOpts = {
     mousetouchZoom: false,	// use mouse wheel, pinch to zoom?
     metaClickPan: true,         // metaKey + click pans to mouse position?
     // statusBar: ["zoom", "scale", "colormap", "wcssys"],  // status display
-    statusBar: "zoom: $zoom; scale: $scale/$scaleclipping($scalemin,$scalemax); color: $colormap($contrast,$bias); wcs: $wcssys($wcsunits)",  // status display
+    // statusBar: "zoom: $zoom; scale: $scale/$scaleclipping($scalemin,$scalemax); color: $colormap($contrast,$bias); wcs: $wcssys($wcsunits)",  // status display
+    statusBar: "$img(images/voyager/zoom_1.svg) $zoom; $scale($scaleclipping); $img(images/voyager/color_$colormap.png) $colormap; $wcssys",  // status display
     toolbarTooltips: false,     // display tooltips on toolbar?
     centerDivs: ["JS9Menubar"], // divs which take part in JS9.Display.center()
     resizeDivs: ["JS9Menubar", "JS9Colorbar", "JS9Toolbar", "JS9Statusbar"], // divs which take part in JS9.Display.resize()

diff --git a/js9.min.js b/js9.min.js
diff --git a/js9plugins.js b/js9plugins.js
@@ -6089,7 +6089,6 @@ JS9.RegisterPlugin(JS9.Mef.CLASS, JS9.Mef.NAME, JS9.Mef.init,
 		    winResize: true,
 		    winDims: [JS9.Mef.WIDTH, JS9.Mef.HEIGHT]});
 
-
 /*
  * JS9 menubar to manage menubar and its menus
  */
@@ -8059,7 +8058,7 @@ JS9.Menubar.createMenus = function(){
 		s1 = JS9.globalOpts.topColormaps[i];
 		s2 = s1;
 		if( JS9.globalOpts.menuImages ){
-		    hstr = `<div class='JS9MenubarImage' name='${s2}'><img src='images/voyager/cmap_${s2}.png' name='color_${s2}' class='JS9MenubarImage JS9MenubarImageOption' >` + `&nbsp;&nbsp;${s2}</div>`;
+		    hstr = `<div class='JS9MenubarImage' name='${s2}'><img src='images/voyager/color_${s2}.png' name='color_${s2}' class='JS9MenubarImage JS9MenubarImageOption' onerror='this.src="images/empty.jpg"' >` + `&nbsp;&nbsp;${s2}</div>`;
 		    items[s1] = {name: hstr, isHtmlName: true};
 		} else {
 		    items[s1] = xname(s2);
@@ -8082,7 +8081,7 @@ JS9.Menubar.createMenus = function(){
 		if( !JS9.globalOpts.topColormaps.includes(s1) ){
 		    s2 = s1;
 		    if( JS9.globalOpts.menuImages ){
-			hstr = `<div class='JS9MenubarImage' name='${s2}'><img src='images/voyager/cmap_${s2}.png' name='color_${s2}' class='JS9MenubarImage JS9MenubarImageOption' >` + `&nbsp;&nbsp;${s2}</div>`;
+			hstr = `<div class='JS9MenubarImage' name='${s2}'><img src='images/voyager/color_${s2}.png' name='color_${s2}' class='JS9MenubarImage JS9MenubarImageOption' onerror='this.src="images/empty.jpg"' >` + `&nbsp;&nbsp;${s2}</div>`;
 			items.morecmaps.items[s1] = {name: hstr, isHtmlName: true};
 		    } else {
 			items.morecmaps.items[s1] = xname(s2);
@@ -8319,7 +8318,7 @@ JS9.Menubar.createMenus = function(){
 	    if( JS9.globalOpts.menuImages ){
 		for(i=0; i<JS9.regions.length; i++){
 		    reg = JS9.regions[i];
-		    items[reg] = {name: `<div class='JS9MenubarImage' name='${reg}'><img src='images/voyager/regions_${reg}.svg' name='regions_${reg}' class='JS9MenubarImage JS9MenubarImageOption' >` + `&nbsp;&nbsp;${reg}</div>`,
+		    items[reg] = {name: `<div class='JS9MenubarImage' name='${reg}'><img src='images/voyager/regions_${reg}.svg' name='regions_${reg}' class='JS9MenubarImage JS9MenubarImageOption' onerror='this.src="images/empty.jpg"' >` + `&nbsp;&nbsp;${reg}</div>`,
 				  isHtmlName: true};
 		}
 	    } else {
@@ -12178,7 +12177,8 @@ JS9.Statusbar.display = function(im){
 	    // wrap in element containers
 	    s = `<span class='JS9StatusbarItemContainer JS9StatusbarItemNoHighlight' onmousedown='JS9.Statusbar.setup(this)' onmouseup='JS9.Statusbar.xeq(this)'>${s}</span></span>`
 	        .replace(/: */g, ": <span class='JS9StatusbarItemValue'>")
-	        .replace(/; */g, "</span></span>&nbsp;<span class='JS9StatusbarItemContainer JS9StatusbarItemNoHighlight' onmousedown='JS9.Statusbar.setup(this)' onmouseup='JS9.Statusbar.xeq(this)'>");
+	        .replace(/; */g, "</span></span>&nbsp;<span class='JS9StatusbarItemContainer JS9StatusbarItemNoHighlight' onmousedown='JS9.Statusbar.setup(this)' onmouseup='JS9.Statusbar.xeq(this)'>")
+	        .replace(/\$img\(([^()]+)\)/g, "<img src='$1' name='$1' class='JS9StatusbarImage JS9StatusbarImageOption'>");
 	}
 	this.statusContainer.html(s);
     } else {

diff --git a/js9support.css b/js9support.css
@@ -1661,13 +1661,27 @@ div.JS9MouseTouchHeader, div.JS9MouseTouchFooter {
     padding-left: 2px;
 }
 
+.JS9StatusbarImage {
+    white-space:nowrap;
+}
+
 .JS9StatusbarItemNoHighlight {
     border: 1px solid #D0D0D0;
 }
 
 .JS9StatusbarItemHighlight {
     border: 1px solid #B5B5B5;
 }
+
+img.JS9StatusbarImageOption[name*="zoom_"]{
+    height: 12px;
+    width:  12px;
+}
+
+img.JS9StatusbarImageOption[name*="color_"]{
+    height: 12px;
+    width:  40px;
+}
 div.JS9SeparateContainer {
     padding: 2px;
 }

diff --git a/js9usermenus.js b/js9usermenus.js
@@ -111,60 +111,60 @@ JS9.globalOpts.userMenuBar = [
     {
 	"name": "colormap",
 	"title": "myColormaps",
-	"imageTitle": "images/voyager/cmap_viridis.png",
+	"imageTitle": "images/voyager/color_viridis.png",
 	"updateTitle": "image",
 	"options": [
 	    {
 		"name": "grey",
-		"image": "images/voyager/cmap_grey.png",
+		"image": "images/voyager/color_grey.png",
 		"cmd": "SetColormap",
 		"args": ["grey"]
 	    },
 	    {
 		"name": "cool",
-		"image": "images/voyager/cmap_cool.png",
+		"image": "images/voyager/color_cool.png",
 		"cmd": "SetColormap",
 		"args": ["cool"]
 	    },
 	    {
 		"name": "heat",
-		"image": "images/voyager/cmap_heat.png",
+		"image": "images/voyager/color_heat.png",
 		"cmd": "SetColormap",
 		"args": ["heat"]
 	    },
 	    {
 		"name": "viridis",
-		"image": "images/voyager/cmap_viridis.png",
+		"image": "images/voyager/color_viridis.png",
 		"cmd": "SetColormap",
 		"args": ["viridis"]
 	    },
 	    {
 		"name": "magma",
-		"image": "images/voyager/cmap_magma.png",
+		"image": "images/voyager/color_magma.png",
 		"cmd": "SetColormap",
 		"args": ["magma"]
 	    },
 	    {
 		"name": "sls",
-		"image": "images/voyager/cmap_sls.png",
+		"image": "images/voyager/color_sls.png",
 		"cmd": "SetColormap",
 		"args": ["sls"]
 	    },
 	    {
 		"name": "red",
-		"image": "images/voyager/cmap_red.png",
+		"image": "images/voyager/color_red.png",
 		"cmd": "SetColormap",
 		"args": ["red"]
 	    },
 	    {
 		"name": "green",
-		"image": "images/voyager/cmap_green.png",
+		"image": "images/voyager/color_green.png",
 		"cmd": "SetColormap",
 		"args": ["green"]
 	    },
 	    {
 		"name": "blue",
-		"image": "images/voyager/cmap_blue.png",
+		"image": "images/voyager/color_blue.png",
 		"cmd": "SetColormap",
 		"args": ["blue"]
 	    },