Merge branch 'tweak-property-controls' into 'v3'

Improve property control UI

Closes #456

See merge request openflexure/openflexure-microscope-server!383

webapp/src/components/labThingsComponents/inputFromSchema.vue

@@ -6,14 +6,14 @@
         <input
           v-model="internalValue"
           class="uk-form-small numeric-setting-line-input"
+          :class="{ edited: isEdited, flash: animateUpdate }"
           type="number"
           @focusin="focusIn"
           @focusout="focusOut"
           @keydown="keyDown"
+          @animationend="animationEnd"
         />
-        <a class="button-next-to-input" @click="requestUpdate">
+        <sync-property-button @click="requestUpdate" />
-          <span class="material-symbols-outlined">refresh</span>
-        </a>
       </div>
     </label>
     <div v-if="dataType == 'boolean'" class="input-and-buttons-container">
@@ -27,9 +27,7 @@
         />
         {{ label }}
       </label>
-      <a class="button-next-to-input" @click="requestUpdate">
+      <sync-property-button @click="requestUpdate" />
-        <span class="material-symbols-outlined">refresh</span>
-      </a>
     </div>
     <label v-if="dataType == 'number_array'" class="uk-form-label"
       >{{ label }}
@@ -39,14 +37,15 @@
           :key="i"
           v-model="internalValue[i - 1]"
           class="uk-form-small numeric-setting-line-input"
+          :class="{ edited: isEdited, flash: animateUpdate }"
           type="number"
+          @input="updateIsEdited"
           @focusin="focusIn"
           @focusout="focusOut"
           @keydown="keyDown"
+          @animationend="animationEnd"
         />
-        <a class="button-next-to-input" @click="requestUpdate">
+        <sync-property-button @click="requestUpdate" />
-          <span class="material-symbols-outlined">refresh</span>
-        </a>
       </div>
     </label>
     <label v-if="dataType == 'number_object'" class="uk-form-label"
@@ -57,14 +56,15 @@
           <input
             v-model="internalValue[key]"
             class="uk-form-small numeric-setting-line-input"
+            :class="{ edited: isEdited, flash: animateUpdate }"
             type="number"
+            @input="updateIsEdited"
             @focusin="focusIn"
             @focusout="focusOut"
             @keydown="keyDown"
+            @animationend="animationEnd"
           />
-          <a class="button-next-to-input" @click="requestUpdate">
+          <sync-property-button @click="requestUpdate" />
-            <span class="material-symbols-outlined">refresh</span>
-          </a>
         </div>
       </div>
     </label>
@@ -83,9 +83,15 @@
 </template>
 
 <script>
+import syncPropertyButton from "./syncPropertyButton.vue";
+
 export default {
   name: "InputFromSchema",
 
+  components: {
+    syncPropertyButton
+  },
+
   props: {
     dataSchema: {
       type: Object
@@ -97,19 +103,49 @@ export default {
       type: String,
       default: ""
     },
+    animate: {
+      type: Boolean,
+      default: false
+    }
   },
 
   data() {
     return {
-      internalValue: this.value,
+      // Initialise with a copy to try to prevent the this.value prop being mutated if
-      valueOnEnter: undefined,
+      // the value is an array or object. For future updates we stringify and parse
-      focused: false
+      // (see resetInternalValue). If we do this here there is a chance we get errors
+      // as internalValue is still null when rendering starts.
+      internalValue: Array.isArray(this.value)
+          ? [...this.value]
+          : typeof this.value === 'object'
+            ? { ...this.value }
+            : this.value,
+      // Is edited can't be computed as we mutate internalValue
+      isEdited: false,
+      animateUpdate: false,
     };
   },
 
+  mounted() {
+  if (this.value !== undefined) {
+      this.resetInternalValue();
+    }
+  },
+
   watch: {
-    value(newValue) {
+    value() {
-      this.internalValue = newValue;
+      // Fire updateIsEdited on both value and internal value change,
+      // as change in value may not causse internalValue to change.
+      this.updateIsEdited();
+      this.resetInternalValue();
+    },
+    internalValue() {
+      this.updateIsEdited();
+    },
+    animate(updated) {
+      if (updated) {
+        this.animateUpdate = true;
+      }
     }
   },
   computed: {
@@ -172,6 +208,12 @@ export default {
   },
 
   methods: {
+    resetInternalValue: function() {
+      // Whenever updatirng th internal value stringify and parse as a form of deepcopy.
+      // This ensure that the this.value prop is not mutated for when elements of arrays
+      // or objects are updated.
+      this.internalValue = JSON.parse(JSON.stringify(this.value));
+    },
     requestUpdate: async function() {
       this.$emit("requestUpdate")
     },
@@ -197,7 +239,32 @@ export default {
       if (event.keyCode == 13) {
         this.sendValue();
       }
+    },
+    updateIsEdited: function() {
+      this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value);
+    },
+    animationEnd: function() {
+      this.animateUpdate = false;
+      this.$emit('animationShown');
+    },
+    deepStringify: function(val) {
+      // Create a json string where all internal numbers are also JSON strings. This is
+      // needed to robustly check if the value is updated because the raw value may be a
+      // number but anything typed in the input is a string. In the case of arrays or
+      // objects even with JSON.stringify we end up comparing ["1", 3] with [1, 3] and
+      // find them as not equal.
+      if (Array.isArray(val)) {
+        return JSON.stringify(val.map(String));
+      }
+      if (val && typeof val === 'object') {
+        const normalized = Object.fromEntries(
+          Object.entries(val).map(([k, v]) => [k, String(v)])
+        );
+        return JSON.stringify(normalized);
+      }
+      return JSON.stringify(String(val));
     }
+
   }
 };
 </script>
@@ -217,11 +284,16 @@ export default {
   margin-right: 5px;
   width: 6em;
 }
-.button-next-to-input {
+.edited {
-  flex-grow: 0;
+  background-color: #fff3cd;
-  padding-left: 5px;
+}
-  padding-right: 5px;
+@keyframes green-flash {
-  vertical-align: middle;
+  0%   { background-color: #3fda63; }
-  cursor: pointer;
+  100% { background-color: white; }
+}
+.flash {
+  animation: green-flash 0.7s ease;
+  /*Without this background-colour chrome will ignore the animation colour.*/
+  background-color: white;
 }
 </style>

webapp/src/components/labThingsComponents/propertyControl.vue

@@ -3,8 +3,10 @@
     v-model="value"
     :data-schema="propertyDescription"
     :label="label"
+    :animate="animate"
     @requestUpdate="readProperty"
     @sendValue="writeProperty"
+    @animationShown="resetAnimate"
   />
 </template>
 
@@ -45,7 +47,8 @@ export default {
 
   data() {
     return {
-      value: undefined
+      value: undefined,
+      animate: false
     };
   },
 
@@ -98,18 +101,25 @@ export default {
           await new Promise(r => setTimeout(r, this.readBackDelay));
           let newVal = await this.readProperty();
           if (newVal == requestedValue) {
-            await this.modalNotify(`Set ${this.label} to ${newVal}.`);
+            this.animate = true;
           } else {
+            this.animate = true;
             await this.modalNotify(
-              `Set ${this.label} to ${newVal} (requested ${requestedValue}).`
+              `Set ${this.label} to ${newVal} (closest valid value to requested ${requestedValue}).`
             );
           }
         } else {
-          await this.modalNotify(`Set ${this.label} to ${this.value}.`);
+          this.animate = true;
         }
       } catch (error) {
-        this.modalError(error); // Let mixin handle error
+        // Use mixin to display error
+        this.modalError(error);
+        // Re-read property to try to update to server value
+        this.readProperty();
       }
+    },
+    resetAnimate: function() {
+        this.animate = false;
     }
   }
 };

webapp/src/components/labThingsComponents/syncPropertyButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <a class="sync-button">
+    <span
+      class="material-symbols-outlined sync-icon"
+      title="Reread value from microscope. Required if microscope is updated externally"
+    >
+      sync
+    </span>
+  </a>
+</template>
+
+<script>
+export default {
+  name: "syncPropertyButton"
+};
+</script>
+
+<style scoped>
+.sync-button {
+  flex-grow: 0;
+  padding-left: 5px;
+  padding-right: 5px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.material-symbols-outlined.sync-icon{
+  color: #888;
+  transition: transform 0.3s ease, color 0.3s ease;
+}
+
+.material-symbols-outlined.sync-icon:hover{
+  transform: rotate(-90deg);
+  color: #c5247f;
+}
+
+</style>

webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue

@@ -10,8 +10,10 @@
               v-model="backgroundDetectorStatus.settings"
               :data-schema="backgroundDetectorStatus.settings_schema"
               label=""
+              :animate="animate"
               @requestUpdate="readSettings"
               @sendValue="writeSettings"
+              @animationShown="resetAnimate"
             />
           </div>
         </li>
@@ -57,6 +59,7 @@ export default {
   data() {
     return {
       backgroundDetectorStatus: undefined,
+      animate: false
     };
   },
 
@@ -87,6 +90,11 @@ export default {
         "update_detector_settings",
         {"data": requestedValue}
       );
+      this.animate = true;
+      this.readSettings();
+    },
+    resetAnimate: function() {
+        this.animate = false;
     }
   },
   async created() {

webapp/src/components/tabContentComponents/controlComponents/paneControl.vue

@@ -85,9 +85,7 @@
                   type="number"
                   @keyup.enter="startMoveTask"
                 />
-                <a class="button-next-to-input" @click="updatePosition">
+                <sync-property-button @click="updatePosition" />
-                  <span class="material-symbols-outlined">refresh</span>
-                </a>
               </div>
               <p>
                 <action-button
@@ -177,13 +175,15 @@
 <script>
 import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
+import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue";
 
 // Export main app
 export default {
   name: "PaneControl",
 
   components: {
-    ActionButton
+    ActionButton,
+    syncPropertyButton
   },
 
   data: function() {
@@ -375,11 +375,4 @@ export default {
   -webkit-appearance: none;
   margin: 0;
 }
-.button-next-to-input {
-  flex-grow: 0;
-  padding-left: 5px;
-  padding-right: 5px;
-  vertical-align: middle;
-  cursor: pointer;
-}
 </style>