[ui] brightness/contrast toolbar in ImageViewer

webui/src/components/display/blobs/ImageViewer.svelte

@@ -3,6 +3,7 @@
 
   import { deleteEntry, fetchEntity, putEntry } from "../../../lib/api";
   import { useEntity } from "../../../lib/entity";
+  import IconButton from "../../utils/IconButton.svelte";
   import Spinner from "../../utils/Spinner.svelte";
   import UpObject from "../UpObject.svelte";
 
@@ -184,24 +185,54 @@
       document.exitFullscreen();
     }
   }
+
+  let brightnesses = [0.5, 0.75, 1, 1.25, 1.5, 2, 2.5];
+  let brightnessIdx = 2;
+  function cycleBrightness() {
+    brightnessIdx++;
+    brightnessIdx = brightnessIdx % brightnesses.length;
+  }
+
+  let contrasts = [0.5, 0.75, 1, 1.25, 1.5];
+  let contrastsIdx = 2;
+  function cycleContrast() {
+    contrastsIdx++;
+    contrastsIdx = contrastsIdx % contrasts.length;
+  }
+
+  $: {
+    if (imageEl) {
+      const brightness = brightnesses[brightnessIdx];
+      const contrast = contrasts[contrastsIdx];
+      imageEl.style.filter = `brightness(${brightness}) contrast(${contrast})`;
+    }
+  }
 </script>
 
-<div
+<div class="image-viewer">
-  class="image-viewer"
-  class:zoomable={!editable && !hasAnnotations}
-  on:click={clicked}
->
   {#if !imageLoaded}
     <Spinner centered />
   {/if}
-  <img
+  {#if imageLoaded}
-    class="preview-image"
+    <div class="toolbar">
-    src="api/{detail ? 'raw' : 'thumb'}/{address}"
+      <IconButton name="brightness-half" on:click={cycleBrightness} />
-    alt={address}
+      <IconButton name="tone" on:click={cycleContrast} />
-    on:load={loaded}
+    </div>
-    bind:this={imageEl}
+  {/if}
-    draggable="false"
+  <div
-  />
+    class="image"
+    class:zoomable={!editable && !hasAnnotations}
+    on:click={clicked}
+  >
+    <img
+      class="preview-image"
+      src="api/{detail ? 'raw' : 'thumb'}/{address}"
+      alt={address}
+      on:load={loaded}
+      bind:this={imageEl}
+      draggable="false"
+    />
+  </div>
   <div class="a8sUpLink" bind:this={a8sLinkTarget}>
     {#if a8sLinkAddress}
       <div class="link">
@@ -216,21 +247,34 @@
 
   .image-viewer {
     display: flex;
+    flex-direction: column;
     min-height: 0;
 
-    & > *,
+    .image {
-    img {
+      display: flex;
-      min-width: 0;
+      justify-content: center;
-      max-width: 100%;
       min-height: 0;
-      max-height: 100%;
+
+      & > *,
+      img {
+        min-width: 0;
+        max-width: 100%;
+        min-height: 0;
+        max-height: 100%;
+      }
+
+      img {
+        margin: auto;
+      }
     }
 
-    .preview-image {
+    .toolbar {
-      margin: auto;
+      display: flex;
+      justify-content: center;
+      margin-bottom: 0.5em;
     }
 
-    &.zoomable {
+    .zoomable {
       cursor: zoom-in;
     }