Generalise button building

python/lsst/ts/rubintv/models/models.py

@@ -41,6 +41,8 @@ class Channel(BaseModel):
     label: str = ""
     per_day: bool = False
     colour: str = ""
+    icon: str = ""
+    text_colour: str = "#000"
 
 
 class HasButton(BaseModel):
@@ -63,8 +65,8 @@ class HasButton(BaseModel):
         True for a shadow, false otherwise.
     """
 
-    name: str
     title: str
+    name: str = ""
     logo: str = ""
     text_colour: str = "#000"
     text_shadow: bool = False
@@ -90,10 +92,8 @@ class MosaicViewMeta(BaseModel):
     dataType: str = "image"
 
 
-class ExtraButton(BaseModel):
-    title: str
+class ExtraButton(HasButton):
     linkURL: str
-    logo: str = ""
 
 
 class Camera(HasButton):

python/lsst/ts/rubintv/models/models_data.yaml

@@ -13,6 +13,13 @@ bucket_configurations:
     [ slac, base-usdf, tucson-usdf, summit-usdf ]
 
 locations:
+  - name: test
+    title: TEST
+    profile_name: rubin-rubintv-data-summit
+    bucket_name: rubin-rubintv-data-summit
+    camera_groups:
+      Test: [ comcam ]
+
   - name: slac
     title: SLAC
     profile_name: rubin-rubintv-data-usdf
@@ -232,14 +239,21 @@ cameras:
       - name: day_movie
         title: Whole Day Movie
         per_day: True
+        color: "#83daee"
+        icon: movies
       - name: last_n_movie
         title: Last N Images Movie
         per_day: True
+        color: "#83eebe"
+        icon: movies
 
     extra_buttons:
       - title: Movies View
+        name: moviesView
         # relative url
-        linkURL: "mosaic"
+        linkURL: mosaic
+        logo: AI-astral-movie.jpg
+        text_colour: "#fff"
 
     mosaic_view_meta:
       - channel: day_movie

python/lsst/ts/rubintv/templates/_layout.jinja

@@ -34,6 +34,7 @@ window.onpageshow = function (event) {
         window.APP_DATA = {}
         window.APP_DATA.locationName = {{ location.name|tojson if location else "" }}
         window.APP_DATA.siteLocation = {{ site_location|tojson if site_location else "null" }}
+        window.APP_DATA.imagesURL = "{{ url_for('static', path='images')}}"
         window.APP_DATA.pathPrefix = {{ path_prefix|tojson if path_prefix else "null" }}
     </script>
 

src/js/components/PerDay.js

@@ -2,14 +2,23 @@ import React, { useState, useEffect } from "react"
 import PropTypes from "prop-types"
 import { cameraType, eventType } from "./componentPropTypes"
 
-function Button({ clsName, url, bckCol, logoURL, label, date }) {
+function Button({ clsName, url, bckCol, iconUrl, logoURL, label, date, textColour, textShadow }) {
+  const style = {
+    backgroundColor: bckCol,
+    color: textColour,
+    backgroundImage: `url(${logoURL})`,
+    backgroundSize: 'contain',
+  }
+  clsName = logoURL !== '' ? clsName + " button-logo" : clsName
+  clsName = textShadow !== '' ? clsName + " t-shadow" : clsName
+
   return (
     <a
       className={`button button-large ${clsName}`}
       href={url}
-      style={bckCol && { backgroundColor: bckCol }}
+      style={style}
     >
-      {logoURL && <img src={logoURL} />}
+      {iconUrl && <img src={iconUrl} />}
       {label}
       {date && <span className="date">{date}</span>}
     </a>
@@ -18,9 +27,16 @@ function Button({ clsName, url, bckCol, logoURL, label, date }) {
 
 function PerDayChannels({ camera, date, perDay }) {
   const baseUrl = window.APP_DATA.baseUrl
+  const imageRoot = window.APP_DATA.imagesURL
   const isHistorical = window.APP_DATA.isHistorical
   const locationName = document.documentElement.dataset.locationname
   const channels = camera.channels
+
+  const getImageURL = (path) => {
+    const [base, queriesMaybe] = imageRoot.split("?")
+    const queries = queriesMaybe ? "?" + queriesMaybe : ""
+    return new URL(path + queries, base + "/")
+  }
 
   return (
     ((perDay && Object.entries(perDay).length > 0) ||
@@ -35,31 +51,33 @@ function PerDayChannels({ camera, date, perDay }) {
               const label = channel.label ? channel.label : channel.title
               const filename = event.filename
               const url = `${baseUrl}event_video/${locationName}/${camera.name}/${channelName}/${filename}`
-              const logoURL = `${baseUrl}static/images/${channelName}.svg`
+              const icon = channel.icon === "" ? channelName : channel.icon
+              const iconUrl = getImageURL(`${icon}.svg`)
               return (
                 <li className="channel" key={channelName}>
                   <Button
                     clsName={channelName}
                     url={url}
                     bckCol={channel.colour}
-                    logoURL={logoURL}
+                    iconUrl={iconUrl}
                     label={label}
                     date={date}
                   />
                 </li>
               )
             })}
-          {!isHistorical && camera.extra_buttons.map(({ title, linkURL }) => {
+          {!isHistorical && camera.extra_buttons.map(({ name, title, linkURL, logo, text_colour, text_shadow }) => {
+            const logoURL = getImageURL(`logos/${logo}`)
             return (
-              <li className="channel" key={title}>
+              <li className="channel" key={name}>
                 {/* hardcoded for link to mosaic view page */}
                 <Button
-                  clsName="mosaic"
+                  clsName={name}
                   url={new URL(linkURL, location.href + '/')}
-                  bckCol="#fff"
-                  logoURL=""
+                  logoURL={logoURL}
                   label={title}
-                  date=""
+                  textColour={text_colour}
+                  textShadow={text_shadow}
                 />
               </li>
             )