GUI improvements for Media Browser

Cosmic-Chatter · May 9, 2024 · 26d6345 · 26d6345
1 parent f7a1f0d
commit 26d6345
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 17 deletions.
diff --git a/exhibitera/apps/media_browser/media_browser.css b/exhibitera/apps/media_browser/media_browser.css
@@ -5,6 +5,10 @@
     --filterBackgroundColor: white;
     --filterLabelColor: black;
     --filterTextColor: black;
+    --lightboxBackgroundColor: #000000ef;
+    --lightboxTitleColor: white;
+    --lightboxCaptionColor: white;
+    --lightboxCreditColor: white;
 
     /* Font faces */
     --Header-font: 'Header-default';
@@ -80,8 +84,10 @@ body {
 }
 .cardCol {
 }
+.cardTitleContainer {
+    margin-top: 1vmax;
+}
 .cardTitle {
-    margin-top: 15px;
     font-size: calc(3vmax + var(--Title-font-adjust)*1vmax);
     font-family: var(--Title-font);
     color: var(--titleColor);
@@ -111,15 +117,13 @@ body {
     border: 0px;
 }
 .filter-entry {
-    font-size: 3vmin;
     font-family: var(--filter_text-font);
-    font-size: calc(3vmax + var(--filter_text-font-adjust)*1vmax);
+    font-size: calc(3vmin + var(--filter_text-font-adjust)*1vmin);
     color: var(--filterTextColor);
   }
 .filter-label {
-    font-size: 4vmin;
     font-family: var(--filter_label-font);
-    font-size: calc(3vmax + var(--filter_label-font-adjust)*1vmax);
+    font-size: calc(3vmin + var(--filter_label-font-adjust)*1vmin);
     color: var(--filterLabelColor);
 }
 .langSwitch-entry {
@@ -137,9 +141,7 @@ body {
     height: 100%;
 }
 .resultImg {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
+    object-fit: cover;
 }
 #attractorImage {
     position: fixed;
@@ -191,22 +193,22 @@ body {
     width: 100vw;
     top: 0vh;
     left: 0px;
-    background-color: rgba(0, 0, 0, 0.9);
+    background-color: var(--lightboxBackgroundColor);
     z-index: 1000;
     display: none;
     align-items: center;
     opacity: 0;
 }
 #mediaLightboxCaption {
     font-size: calc(2vmax + var(--Lightbox_caption-font-adjust)*1vmax);
-    color: white;
+    color: var(--lightboxCaptionColor);
     overflow-y: auto;
     height: 15%;
     font-family: var(--Lightbox_caption-font);
 }
 #mediaLightboxCredit {
     font-size: calc(1.5vmax + var(--Lightbox_credit-font-adjust)*1vmax);
-    color: white;
+    color: var(--lightboxCreditColor);
     padding-top: 10px;
     height: 6%;
     font-family: var(--Lightbox_credit-font);
@@ -221,7 +223,7 @@ body {
 #mediaLightboxTitle {
     text-align: center;
     font-size: calc(3vmax + var(--Lightbox_title-font-adjust)*1vmax);
-    color: white;
+    color: var(--lightboxTitleColor);
     height: 9%;
     font-family: var(--Lightbox_title-font);
 }
@@ -268,6 +270,9 @@ body {
     .hg-button {
         height: 100%!important;
     }
+    .resultImg {
+        height: 100%;
+    }
     .simple-keyboard {
         height: 100%;
     }
@@ -283,4 +288,7 @@ body {
     .hg-standardBtn {
         height: 3.5vh!important;
     }
+    .resultImg {
+        width: 100%;
+    }
 }
diff --git a/exhibitera/apps/media_browser/media_browser.js b/exhibitera/apps/media_browser/media_browser.js
@@ -82,7 +82,7 @@ function createCard (obj) {
   col.appendChild(card)
 
   const imgCol = document.createElement('div')
-  imgCol.classList = 'col col-12'
+  imgCol.classList = 'col col-12 d-flex justify-content-center align-items-end'
 
   if ('image_height' in def.style.layout) {
     imgCol.style.height = String(def.style.layout.image_height) + '%'
@@ -96,11 +96,46 @@ function createCard (obj) {
   img.src = thumb
   img.setAttribute('id', 'Entry_' + id)
 
+  if ('corner_radius' in def.style.layout) {
+    img.style.borderRadius = String(def.style.layout.corner_radius) + '%'
+  } else {
+    img.style.borderRadius = '0%'
+  }
+  if ('thumbnail_shape' in def.style.layout) {
+    if (def.style.layout.thumbnail_shape === 'orignal') {
+      img.style.aspectRatio = ''
+    } else if (def.style.layout.thumbnail_shape === 'square') {
+      img.style.aspectRatio = 1
+    } else if (def.style.layout.thumbnail_shape === 'viewport') {
+      const height = window.innerHeight
+      const width = window.innerWidth
+      if (width >= height) {
+        img.style.aspectRatio = String(width/height)
+      } else {
+        img.style.aspectRatio = String(height/width)
+      }
+    } else if (def.style.layout.thumbnail_shape === 'anti-viewport') {
+      const height = window.innerHeight
+      const width = window.innerWidth
+      if (width >= height) {
+        img.style.aspectRatio = String(height/width)
+      } else {
+        img.style.aspectRatio = String(width/height)
+      }
+    }
+  } else {
+    img.style.aspectRatio = ''
+  }
+
   imgCol.appendChild(img)
 
-  if (('imageHeight' in def.style.layout && def.style.layout.image_height < 100) || !('imageHeight' in def.style.layout)) {
+  if (('image_height' in def.style.layout && def.style.layout.image_height < 100) || !('image_height' in def.style.layout)) {
     const titleCol = document.createElement('div')
-    titleCol.classList = 'col col-12 text-center'
+    titleCol.classList = 'col col-12 text-center cardTitleContainer'
+
+    if ('image_height' in def.style.layout) {
+      titleCol.style.height = String(100-def.style.layout.image_height) + '%'
+    }
     card.appendChild(titleCol)
 
     const titleSpan = document.createElement('span')

diff --git a/exhibitera/apps/media_browser/setup.html b/exhibitera/apps/media_browser/setup.html
@@ -366,6 +366,23 @@ <h4>Grid layout</h4>
                   </label>
                   <input id="imageHeightSlider" type="range" calss="form-range layout-property-int" data-property="image_height" min="10" max="100" step="5" value="80">
                 </div>
+                <div class="col-12 col-md-6 col-lg-4 col-xxl-3">
+                  <label for="cornerRadiusSlider" class="form-label">
+                    Round image corners
+                  </label>
+                  <input id="cornerRadiusSlider" type="range" calss="form-range layout-property-int" data-property="corner_radius" min="0" max="50" step="1" value="0">
+                </div>
+                <div class="col-12 col-md-6 col-lg-4 col-xxl-3">
+                  <label for="imageShapeSelect" class="form-label">
+                    Image shape
+                  </label>
+                  <select id="imageShapeSelect" class="form-select" data-property="corner_radius">
+                    <option value="original">Original</option>
+                    <option value="square">Square</option>
+                    <option value="viewport">Match display</option>
+                    <option value="anti-viewport">Opposite display</option>
+                  </select>
+                </div>
               </div>
 
               <h4>Lightbox layout</h4>
@@ -418,6 +435,30 @@ <h4>Colors</h4>
                     <input id="colorPicker_filterTextColor" type="text" class="coloris form-control" value="#000000" data-property="filterTextColor" data-default="#000000">
                   </div>
                 </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                  <label for="colorPicker_lightboxBackgroundColor" class="form-label">Lightbox background</label>
+                  <div>
+                    <input id="colorPicker_lightboxBackgroundColor" type="text" class="coloris form-control" value="#000000ef" data-property="lightboxBackgroundColor" data-default="#000000ef">
+                  </div>
+                </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                  <label for="colorPicker_lightboxTitleColor" class="form-label">Lightbox title</label>
+                  <div>
+                    <input id="colorPicker_lightboxTitleColor" type="text" class="coloris form-control" value="#fff" data-property="lightboxTitleColor" data-default="#fff">
+                  </div>
+                </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                  <label for="colorPicker_lightboxCaptionColor" class="form-label">Lightbox caption</label>
+                  <div>
+                    <input id="colorPicker_lightboxCaptionColor" type="text" class="coloris form-control" value="#fff" data-property="lightboxCaptionColor" data-default="#fff">
+                  </div>
+                </div>
+                <div class="col-12 col-sm-6 col-lg-4">
+                  <label for="colorPicker_lightboxCreditColor" class="form-label">Lightbox credit</label>
+                  <div>
+                    <input id="colorPicker_lightboxCreditColor" type="text" class="coloris form-control" value="#fff" data-property="lightboxCreditColor" data-default="#fff">
+                  </div>
+                </div>
               </div>
 
               <h4>Fonts</h4>
@@ -460,11 +501,11 @@ <h4 class="mt-2">Text size</h4>
                 </div>
                 <div class="col-12 col-md-6 col-lg-4">
                   <label for="filter_labelTextSizeSlider" class="form-label">Filter label</label>
-                  <input id="filter_labelTextSizeSlider" type="range" class="form-range text-size-slider" data-property="filter_label" min="-0.5", max="2" start="0" step="0.5">
+                  <input id="filter_labelTextSizeSlider" type="range" class="form-range text-size-slider" data-property="filter_label" min="-1.5", max="1.5" start="0" step="0.5">
                 </div>
                 <div class="col-12 col-md-6 col-lg-4">
                   <label for="filter_textTextSizeSlider" class="form-label">Filter text</label>
-                  <input id="filter_textTextSizeSlider" type="range" class="form-range text-size-slider" data-property="filter_text" min="-0.5", max="2" start="0" step="0.5">
+                  <input id="filter_textTextSizeSlider" type="range" class="form-range text-size-slider" data-property="filter_text" min="-1.5", max="1.5" start="0" step="0.5">
                 </div>
               </div>
             </div>

diff --git a/exhibitera/apps/media_browser/setup.js b/exhibitera/apps/media_browser/setup.js
@@ -82,6 +82,8 @@ async function clearDefinitionInput (full = true) {
   document.getElementById('itemsPerPageInput').value = 12
   document.getElementById('numColsSelect').value = 6
   document.getElementById('imageHeightSlider').value = 80
+  document.getElementById('cornerRadiusSlider').value = 0
+  document.getElementById('imageShapeSelect').value = 'original'
 
   // Reset style options
   const colorInputs = ['titleColor', 'filterBackgroundColor', 'filterLabelColor', 'filterTextColor']
@@ -148,6 +150,16 @@ function editDefinition (uuid = '') {
     document.getElementById('numColsSelect').value = 6
   }
   document.getElementById('imageHeightSlider').value = def.style.layout.image_height
+  if ('corner_radius' in def.style.layout) {
+    document.getElementById('cornerRadiusSlider').value = def.style.layout.corner_radius
+  } else {
+    document.getElementById('cornerRadiusSlider').value = 0
+  }
+  if ('thumbnail_shape' in def.style.layout) {
+    document.getElementById('imageShapeSelect').value = def.style.layout.thumbnail_shape
+  } else {
+    document.getElementById('imageShapeSelect').value = 'original'
+  }
   document.getElementById('lightboxTitleHeightSlider').value = def.style.layout.lightbox_title_height
   document.getElementById('lightboxCaptionHeightSlider').value = def.style.layout.lightbox_caption_height
   document.getElementById('lightboxCreditHeightSlider').value = def.style.layout.lightbox_credit_height
@@ -1065,6 +1077,15 @@ document.getElementById('imageHeightSlider').addEventListener('input', (event) =
   exSetup.updateWorkingDefinition(['style', 'layout', 'image_height'], parseInt(event.target.value))
   exSetup.previewDefinition(true)
 })
+document.getElementById('cornerRadiusSlider').addEventListener('input', (event) => {
+  exSetup.updateWorkingDefinition(['style', 'layout', 'corner_radius'], parseInt(event.target.value))
+  exSetup.previewDefinition(true)
+})
+document.getElementById('imageShapeSelect').addEventListener('change', (event) => {
+  exSetup.updateWorkingDefinition(['style', 'layout', 'thumbnail_shape'], event.target.value)
+  exSetup.previewDefinition(true)
+})
+
 Array.from(document.querySelectorAll('.height-slider')).forEach((el) => {
   el.addEventListener('input', () => {
     const titleHeight = parseInt(document.getElementById('lightboxTitleHeightSlider').value)

diff --git a/exhibitera/changelog.md b/exhibitera/changelog.md
@@ -1,3 +1,27 @@
+# **Exhibitera 5.1**
+
+## Hub
+
+### General
+
+### Schedule
+
+### Maintenance
+
+## Exhibitera Apps
+
+### General
+
+### InfoStation
+
+### Media Browser
+- New style options give you greater control over the look and feel of Media Browser [Morgan Rehnberg] 
+
+### Word Cloud
+- Support for using a hardware keyboard [Alex Averill]
+- Limit the number of characters a response can be [Alex Averill]
+
+
 # **Exhibitera 5**
 Exhibitera 5 introduces a user account system that enables administrators to restrict access to various features. Divide responsibility while minimizing risk with granular permissions and improved logging.