Spectro background color

client/package.json

@@ -27,7 +27,7 @@
     "vue": "^3.3.1",
     "vue-markdown-render": "^2.1.1",
     "vue-router": "^4.0.12",
-    "vuetify": "^3.9.0-beta.0"
+    "vuetify": "^3.10.0"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.13",

client/src/components/ColorPickerMenu.vue

@@ -10,6 +10,9 @@ defineProps({
 const colorpickerMenu = ref(false);
 const color = defineModel({ default: 'rgb(0, 0, 0)'});
 function updateColor(colorVal: string) {
+  if (colorVal.includes('/')) {
+    colorVal = colorVal.replace(' / undefined)', ')');
+  }
   if (!colorVal.includes(',')) {
     // convert rgb(0 0 0) to rgb(0, 0, 0)
     colorVal = colorVal.replace(/rgb\((\d+)\s+(\d+)\s+(\d+)\)/, 'rgb($1, $2, $3)');

client/src/components/SpectrogramViewer.vue

@@ -32,7 +32,7 @@ export default defineComponent({
       selectedId,
       selectedType,
       creationType,
-      blackBackground,
+      backgroundColor,
       scaledVals,
       configuration,
       scaledWidth,
@@ -237,10 +237,10 @@ export default defineComponent({
       createAnnotation,
       cursorHandler,
       imageCursorRef,
-      blackBackground,
       wheelEvent,
       scaledWidth,
       scaledHeight,
+      backgroundColor
     };
   },
 });
@@ -249,7 +249,7 @@ export default defineComponent({
 <template>
   <div
     class="video-annotator"
-    :class="{ 'black-background': blackBackground, 'white-background': !blackBackground }"
+    :style="{ backgroundColor: backgroundColor }"
     @wheel="wheelEvent($event)"
   >
     <div

client/src/components/ThumbnailViewer.vue

@@ -34,7 +34,7 @@ export default defineComponent({
     const {
       scaledWidth,
       scaledHeight,
-      blackBackground,
+      backgroundColor,
     } = useState();
 
     function updateViewerAndImages() {
@@ -154,7 +154,7 @@ export default defineComponent({
       yScale,
       scaledWidth,
       scaledHeight,
-      blackBackground,
+      backgroundColor,
     };
   },
 });
@@ -165,8 +165,8 @@ export default defineComponent({
     <div
       id="spectro"
       ref="containerRef"
+      :style="{ backgroundColor: backgroundColor }"
       class="playback-container"
-      :class="{ 'black-background': blackBackground, 'white-background': !blackBackground }"
     />
     <layer-manager
       v-if="initialized"

client/src/components/geoJS/LayerManager.vue

@@ -2,7 +2,7 @@
 import { defineComponent, nextTick, onMounted, onUnmounted, PropType, Ref, ref, watch } from "vue";
 import * as d3 from "d3";
 import { SpectrogramAnnotation, SpectrogramSequenceAnnotation } from "../../api/api";
-import { geojsonToSpectro, SpectroInfo } from "./geoJSUtils";
+import { geojsonToSpectro, SpectroInfo, textColorFromBackground } from "./geoJSUtils";
 import EditAnnotationLayer from "./layers/editAnnotationLayer";
 import RectangleLayer from "./layers/rectangleLayer";
 import CompressedOverlayLayer from "./layers/compressedOverlayLayer";
@@ -640,6 +640,7 @@ export default defineComponent({
         // convert rgb(0 0 0) to rgb(0, 0, 0)
         backgroundColor.value = backgroundColor.value.replace(/rgb\((\d+)\s+(\d+)\s+(\d+)\)/, 'rgb($1, $2, $3)');
       }
+
       const backgroundRgbColor = d3.color(backgroundColor.value) as d3.RGBColor;
       const redStops: number[] = [backgroundRgbColor.r / 255];
       const greenStops: number[] = [backgroundRgbColor.g / 255];
@@ -654,6 +655,22 @@ export default defineComponent({
       rValues.value = redStops.join(' ');
       gValues.value = greenStops.join(' ');
       bValues.value = blueStops.join(' ');
+      const textColor = textColorFromBackground(backgroundColor.value);
+      if (freqLayer) {
+        freqLayer.setTextColor(textColor);
+      }
+      if (speciesLayer) {
+        speciesLayer.setTextColor(textColor);
+      }
+      if (legendLayer) {
+        legendLayer.setTextColor(textColor);
+      }
+      if (timeLayer) {
+        timeLayer.setTextColor(textColor);
+      } 
+      if (speciesSequenceLayer) {
+        speciesSequenceLayer.setTextColor(textColor);
+      }
 
     }
 

client/src/components/geoJS/geoJSUtils.ts

@@ -620,11 +620,40 @@ function reOrdergeoJSON(coords: GeoJSON.Position[]) {
   ];
 }
 
+function luminance(r: number, g: number, b: number): number {
+  const toLinear = (c: number): number => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+
+  const R = toLinear(r);
+  const G = toLinear(g);
+  const B = toLinear(b);
+
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}
+
+
+function getContrastingColor(r: number, g: number, b: number): "black" | "white" {
+  const L = luminance(r, g, b);
+  return L > 0.179 ? "black" : "white";
+}
+
+function textColorFromBackground(rgbString: string): "black" | "white" {
+  const matches = rgbString.match(/\d+/g);
+  if (!matches || matches.length < 3) {
+    throw new Error("Invalid RGB string format");
+  }
+  const [r, g, b] = matches.map(Number);
+  return getContrastingColor(r, g, b);
+}
+
 export {
   spectroToGeoJSon,
   geojsonToSpectro,
   reOrdergeoJSON,
   useGeoJS,
   spectroToCenter,
   spectroSequenceToGeoJSon,
+  textColorFromBackground
 };

client/src/components/geoJS/layers/baseTextLayer.ts

@@ -25,6 +25,7 @@ export default abstract class BaseTextLayer<D> {
   scaledWidth: number;
   scaledHeight: number;
 
+  color = "white";
 
 
 
@@ -84,6 +85,12 @@ export default abstract class BaseTextLayer<D> {
     this.redraw();
   }
 
+  setTextColor(newColor: string) {
+    this.color = newColor;
+    this.textStyle = this.createTextStyle();
+    this.redraw();
+  }
+
 
   destroy() {
     if (this.textLayer) {
@@ -117,7 +124,7 @@ export default abstract class BaseTextLayer<D> {
   createTextStyle(): LayerStyle<D> {
     return {
       ...{
-        strokeColor: "white",
+        strokeColor: () => this.color,
         strokeWidth: 2.0,
         antialiasing: 0,
         stroke: true,
@@ -126,7 +133,7 @@ export default abstract class BaseTextLayer<D> {
         fontSize: () => this.xScale < 2.5 ? '12px' : '16px'
       },
       color: () => {
-        return "white";
+        return this.color;
       },
       textScaled: this.textScaled,
       textBaseline: 'middle',

client/src/components/geoJS/layers/freqLayer.ts

@@ -141,6 +141,9 @@ export default class FreqLayer extends BaseTextLayer<TextData> {
         uniformPolygon: true,
         fill: false,
       },
+      strokeColor: () => {
+        return this.color;
+      },
       strokeOpacity: (_point, _index, data) => {
         // Reduce the rectangle opacity if a polygon is also drawn
         if (data.grid) {
@@ -172,7 +175,7 @@ export default class FreqLayer extends BaseTextLayer<TextData> {
         fontSize: '16px',
       },
       color: () => {
-        return "white";
+        return this.color;
       },
       offset: (data) => ({
         x: data.offsetX || 0,

client/src/components/geoJS/layers/legendLayer.ts

@@ -442,6 +442,13 @@ export default class LegendLayer extends BaseTextLayer<TextData> {
     this.textLayer.data([]).draw();
   }
 
+  setTextColor(newColor: string) {
+    this.color = newColor;
+    this.textStyle = this.createTextStyle();
+    this.lineStyle = this.createLineStyle();
+    this.redraw();
+  }
+
   setGridEnabled(val: boolean) {
     this.gridEnabled = val;
     if (this.gridEnabled) {
@@ -458,10 +465,11 @@ export default class LegendLayer extends BaseTextLayer<TextData> {
   createLineStyle(): LayerStyle<LineData> {
     return {
       ...{
-        strokeColor: "#00FFFF",
+        strokeColor: () => this.color,
         strokeWidth: 2.0,
         antialiasing: 0,
         stroke: true,
+        color: () => this.color,
         uniformPolygon: true,
         fill: false,
       },
@@ -496,7 +504,7 @@ export default class LegendLayer extends BaseTextLayer<TextData> {
         fontSize: `${this.getFontSize(20, 12, this.xScale)}px`
       },
       color: () => {
-        return "white";
+        return this.color;
       },
       offset: (data) => ({
         x: data.offsetX || 0,

client/src/components/geoJS/layers/speciesLayer.ts

@@ -77,7 +77,7 @@ export default class SpeciesLayer extends BaseTextLayer<TextData> {
         fontSize: '18px',
       },
       color: () => {
-        return "white";
+        return this.color;
       },
       offset: (data) => ({
         x: data.offsetX || 0,

client/src/components/geoJS/layers/speciesSequenceLayer.ts

@@ -99,7 +99,7 @@ export default class SpeciesSequenceLayer extends BaseTextLayer<TextData> {
         if (d.textType === "type") {
           return "yellow";
         }
-        return "white";
+        return this.color;
       },
       offset: (data) => ({
         x: data.offsetX || 0,

client/src/components/geoJS/layers/timeLayer.ts

@@ -8,6 +8,7 @@ interface LineData {
   line: GeoJSON.LineString;
   thicker?: boolean;
   grid?: boolean;
+  markerLine?: boolean; // Line for markiing time endpoints
 }
 
 interface TextData {
@@ -103,6 +104,7 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
               [xmin, ymin + lineDist],
             ],
           },
+          markerLine: true,
           thicker: true,
         });
         this.lineData.push({
@@ -113,6 +115,7 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
               [xmax, ymin + lineDist],
             ],
           },
+          markerLine: true,
           thicker: true,
         });
         // Now we need to create the text Labels
@@ -163,6 +166,7 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
               [xmin, ymax - lineDist],
             ],
           },
+          markerLine: true,
           thicker: true,
         });
         this.lineData.push({
@@ -173,6 +177,7 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
               [xmax, ymax - lineDist],
             ],
           },
+          markerLine: true,
           thicker: true,
         });
         // Now we need to create the text Labels
@@ -296,8 +301,14 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
         uniformPolygon: true,
         fill: false,
       },
+      strokeColor: () => {
+        return this.color;
+      },
       strokeOpacity: (_point, _index, data) => {
         // Reduce the rectangle opacity if a polygon is also drawn
+        if (data.markerLine && this.zoomLevel < 0) {
+          return 0.0;
+        }
         if (data.grid) {
           return 0.5;
         }
@@ -327,7 +338,7 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
         fontSize: `${this.getFontSize(16, 12, this.xScale)}px`,
       },
       color: () => {
-        return "white";
+        return this.color;
       },
       offset: (data) => ({
         x: data.offsetX || 0,

client/src/components/geoJS/layers/types.ts

@@ -9,6 +9,7 @@ export interface LayerStyle<D> {
     strokeColor?: StyleFunction<string, D> | PointFunction<string, D>;
     fillColor?: StyleFunction<string, D> | PointFunction<string, D>;
     fillOpacity?: StyleFunction<number, D> | PointFunction<number, D>;
+    visible?: StyleFunction<boolean, D> | PointFunction<boolean, D>;
     position?: (point: [number, number]) => { x: number; y: number };
     color?: (data: D) => string;
     textOpacity?: (data: D) => number;

client/src/use/useState.ts

@@ -46,7 +46,6 @@ const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
 const sharedList: Ref<Recording[]> = ref([]);
 const recordingList: Ref<Recording[]> = ref([]);
 const nextShared: Ref<Recording | false> = ref(false);
-const blackBackground = ref(true);
 const scaledVals: Ref<{ x: number; y: number }> = ref({ x: 1, y: 1 });
 const viewCompressedOverlay = ref(false);
 const sideTab: Ref<"annotations" | "recordings"> = ref("annotations");
@@ -61,7 +60,7 @@ const configuration: Ref<Configuration> = ref({
   is_admin: false,
 });
 const scaledWidth = ref(0);
-const scaledHeight = ref(0);
+const scaledHeight = ref(0);  
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -160,7 +159,6 @@ export default function useState() {
     sharedList,
     recordingList,
     nextShared,
-    blackBackground,
     scaledVals,
     viewCompressedOverlay,
     sideTab,

client/src/views/Spectrogram.vue

@@ -206,8 +206,24 @@ export default defineComponent({
     );
     onMounted(() => {
       loadData();
-      colorScheme.value = colorSchemes.find((scheme) => scheme.value === configuration.value.default_color_scheme) || colorSchemes[0];
-      backgroundColor.value = configuration.value.default_spectrogram_background_color || 'rgb(0, 0, 0)';
+      const localBackgroundColor = localStorage.getItem('spectrogramBackgroundColor');
+      if (localBackgroundColor) {
+        backgroundColor.value = localBackgroundColor;
+      } else {
+        backgroundColor.value = configuration.value.default_spectrogram_background_color || 'rgb(0, 0, 0)';
+      }
+      const localColorScheme = localStorage.getItem('spectrogramColorScheme');
+      if (localColorScheme) {
+        colorScheme.value = colorSchemes.find((scheme) => scheme.value === localColorScheme) || colorSchemes[0];
+      } else if (configuration.value.default_color_scheme) {
+        colorScheme.value = colorSchemes.find((scheme) => scheme.value === configuration.value.default_color_scheme) || colorSchemes[0];
+      }
+    });
+    watch(backgroundColor, () => {
+      localStorage.setItem('spectrogramBackgroundColor', backgroundColor.value);
+    });
+    watch(colorScheme, () => {
+      localStorage.setItem('spectrogramColorScheme', colorScheme.value.value);
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const parentGeoViewerRef: Ref<any> = ref(null);