Skinning

README.md

@@ -85,6 +85,28 @@ The schema for config.json is like this::
 Note that `realm` and `addr_root` are optional, and will default to
 values `test_realm` and `observatory`.
 
+Limited custom skinning can be added to a crossbar configuration.  For
+example:
+
+```
+{"crossbars": [
+    {"name": "ocs-8001",
+     "url": "ws://localhost:8001/ws",
+     "realm": "test_realm",
+     "addr_root": "observatory",
+     "styling": {
+       "banner": "My OCS",
+       "background": "#ff8888"}
+    }
+  ]
+}
+```
+
+The text in `banner` will appear in the top banner bar, instead of a
+string constructed from the "name".  The color specified for
+`background` will be used to fill the top banner bar and the side bar
+(clickable Agent listing).
+
 
 ### Environment variables
 

src/App.vue

@@ -1,6 +1,9 @@
 <template>
-  <h1>{{ main_title }}</h1>
-  <hr />
+  <div class="main_title_bar">
+    <div class="main_title_holder" :style="{backgroundColor: platformColor()}">
+      <h1>{{ main_title }}</h1>
+    </div>
+  </div>
 
   <!-- Viewport-fixed for unscrollables-->
   <div class="viewport">
@@ -55,7 +58,7 @@
 
     <!-- Sidebar -->
     <div class="left_bar">
-      <div class="left_bar_menu box">
+      <div class="left_bar_menu box" :style="{ backgroundColor: platformColor()}">
         <h2>Main</h2>
         <div class="ocs_ui">
           <ul>
@@ -308,6 +311,12 @@
       confirmPw() {
         this.passwordWindow = null;
       },
+      platformColor() {
+        let bgColor = ocs_bundle.config?.styling?.background;
+        if (!bgColor)
+          return '#ccf';
+        return bgColor;
+      },
     },
     setup() {
       const { cookies } = useCookies();
@@ -347,6 +356,8 @@
       window.ocs.start();
 
       this.main_title = `Observatory Control System - [${ocs_bundle.config.name}]`;
+      if (ocs_bundle.config.styling?.banner)
+        this.main_title = ocs_bundle.config.styling.banner;
 
       // Transitional converter -- if client is a string, construct a
       // client assuming it's the agent address; otherwise assume client.
@@ -453,7 +464,10 @@
     -moz-osx-font-smoothing: grayscale;
     text-align: left;
     color: #2c3e50;
-    margin-top: 30px;
+  }
+
+  body {
+    margin: 0px;
   }
 
   .container {
@@ -478,6 +492,24 @@
     background-color: #ccf;
   }
 
+  div.main_title_bar {
+    height: 100%;
+    padding: 10px;
+    margin: 0;
+  }
+
+  div.main_title_holder {
+    padding: 10px;
+    margin: 0;
+    border: 3px solid #000;
+  }
+
+  .main_title_bar h1 {
+    font-size: 40px;
+    color: '#fff';
+    white-space: nowrap;
+  }
+
   .left_bar_menu > div {
     padding-bottom: 10px;
   }

src/panels/ConfigsWindow.vue

@@ -11,6 +11,7 @@
           <form v-on:submit.prevent>
             <div class="ocs_row">
               <h2 class="ocs_triple">
+                <div class="sysIcon" :style="{ backgroundColor: bgColor(config) }" />
                 <a :href="'?ocs=' + config.name">
                   {{ config.name }}
                 </a>
@@ -37,6 +38,12 @@
               :modelValue="config.addr_root"
               @input="emitConfigChange(index, 'addr_root', $event.target.value)"
             />
+            <OpParam
+              caption="Banner alias"
+              v-if="config.styling?.banner"
+              :modelDisabled="!config.edit"
+              :modelValue="config.styling.banner"
+            />
             <div class="ocs_row">
               <label>Reset passwords</label>
               <button @click="clearPw(index)"
@@ -70,6 +77,11 @@
       clearPw() {
         this.$emit('clearPw');
       },
+      bgColor(cfg) {
+        if (cfg.styling?.background)
+          return cfg.styling.background;
+        return '#fff';
+      },
     },
     mounted() {
       let c = window.ocs;
@@ -86,4 +98,12 @@
   .active {
     background-color: #50c878;
   }
+
+  .sysIcon {
+    height: 20px;
+    width: 20px;
+    float: right;
+    border: 1px solid black;
+  }
+
 </style>