Display the microscope's hostname in the interface

webapp/src/App.vue

@@ -321,6 +321,13 @@ export default {
             );
           }
         }
+        try {
+          let hostname = await this.readThingProperty("settings", "hostname");
+          this.$store.commit("changeMicroscopeHostname", hostname);
+          document.title = `OpenFlexure Microscope: ${hostname}`;
+        } catch {
+          this.$store.commit("changeMicroscopeHostname", null);
+        }
         this.$store.commit("setConnected");
         this.$store.commit("setErrorMessage", null);
       } catch (error) {

webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue

@@ -2,6 +2,11 @@
   <div class="host-input">
     <div v-if="$store.state.available">
       <div>
+        <div class="uk-margin-small-bottom">
+          <b>Microscope hostname:</b>
+          <br />
+          {{ $store.state.microscopeHostname }}
+        </div>
         <div class="uk-margin-small-bottom">
           <b>API origin:</b>
           <br />

webapp/src/store.js

@@ -91,7 +91,8 @@ export default new Vuex.Store({
     imjoyEnabled: false,
     galleryEnabled: true,
     appTheme: "system",
-    activeStreams: {}
+    activeStreams: {},
+    microscopeHostname: ""
   },
 
   mutations: {
@@ -144,6 +145,9 @@ export default new Vuex.Store({
     },
     removeStream(state, id) {
       state.activeStreams[id] = false;
+    },
+    changeMicroscopeHostname(state, value) {
+      state.microscopeHostname = value;
     }
   },