Started drafting medscan extension

openflexure_microscope/api/extra_extensions/medscan/__init__.py

@@ -0,0 +1,62 @@
+from labthings.server.extensions import BaseExtension
+from labthings.server.view import View
+from labthings.server.decorators import ThingProperty, PropertySchema, use_args
+from labthings.server import fields
+from labthings.server.find import find_component
+from labthings.core.utilities import path_relative_to
+
+from openflexure_microscope.paths import settings_file_path, check_rw
+from openflexure_microscope.config import OpenflexureSettingsFile
+from openflexure_microscope.camera.base import BASE_CAPTURE_PATH
+from openflexure_microscope.camera.capture import build_captures_from_exif
+
+from openflexure_microscope.api.utilities.gui import build_gui
+
+from flask import abort, url_for
+import logging
+import os
+import psutil
+
+from sys import platform
+
+
+class CustomElementExtension(BaseExtension):
+    def __init__(self):
+        BaseExtension.__init__(
+            self,
+            "org.openflexure.customelement",
+            description="Testing HTML components in an extension",
+            static_folder=path_relative_to(__file__, "static", "dist"),
+        )
+
+        # Register the on_microscope function to run when the microscope is attached
+        self.on_component("org.openflexure.microscope", self.on_microscope)
+
+    def on_microscope(self, microscope_obj):
+        """Function to automatically call when the parent LabThing has a microscope attached."""
+        logging.debug(f"CustomElementExtension found microscope {microscope_obj}")
+
+
+customelement_extension_v2 = CustomElementExtension()
+
+
+def wc_func():
+    return {
+        "href": customelement_extension_v2.static_file_url("my-custom-element.min.js"),
+        "name": "my-custom-element",
+    }
+
+
+def gui_func():
+    return {
+        "icon": "grid_on",
+        "title": "Med Scan",
+        "viewPanel": "stream",
+        "wc": wc_func(),
+    }
+
+
+customelement_extension_v2.add_meta("wc", wc_func)
+customelement_extension_v2.add_meta(
+    "gui", build_gui(gui_func, customelement_extension_v2)
+)

openflexure_microscope/api/extra_extensions/medscan/static/.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

openflexure_microscope/api/extra_extensions/medscan/static/.gitattributes

@@ -0,0 +1 @@
+dist/* filter=lfs diff=lfs merge=lfs -text

openflexure_microscope/api/extra_extensions/medscan/static/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Override and include dist
+!/dist

openflexure_microscope/api/extra_extensions/medscan/static/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

openflexure_microscope/api/extra_extensions/medscan/static/dist/demo.html

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1ca0e299d383dac9c5ebb630f31c45279a5558c21f44dbb7e803ae0a726526b3
+size 237

openflexure_microscope/api/extra_extensions/medscan/static/dist/openflexure-medscan-element.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4223dafbec3774d4c7a8421c6156f7f4d3c4fbf43b6ba7bb9c3922d11e41471
+size 288126

openflexure_microscope/api/extra_extensions/medscan/static/dist/openflexure-medscan-element.min.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc9afdd76929fb15b40c1f40d9dc64aca8f7243727471b4125a24c057f92bd6e
+size 92085

openflexure_microscope/api/extra_extensions/medscan/static/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "openflexure-medscan-element",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "cross-var vue-cli-service build --target wc --inline-vue --name $npm_package_name ./src/components/VueWebComponent.vue"
+  },
+  "dependencies": {
+    "axios": "^0.19.2",
+    "core-js": "^3.4.4",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.1.0",
+    "@vue/cli-service": "^4.1.0",
+    "cross-var": "^1.1.0",
+    "vue-template-compiler": "^2.6.10"
+  }
+}

openflexure_microscope/api/extra_extensions/medscan/static/src/App.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="app">
+    <VueWebComponent/>
+  </div>
+</template>
+
+<script>
+import VueWebComponent from './components/VueWebComponent.vue'
+export default {
+  name: 'app',
+  components: {
+    VueWebComponent
+  }
+}
+</script>
+
+<style>
+</style>

openflexure_microscope/api/extra_extensions/medscan/static/src/components/VueWebComponent.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="medscan-component-class">
+    <h1>Sample Scan Wizard</h1>
+    <div>Base URL: {{ componentBaseURL }}</div>
+    <p>Host microscope name: {{ hostDeviceName }}</p>
+    <p>{{ message }}</p>
+    <br />
+    <p>This cheeky little counter has all of its logic contained in a server-side component:</p>
+    <button type="button" v-on:click="decrement()">-</button>
+    <span>{{ value }}</span>
+    <button type="button" v-on:click="increment()">+</button>
+
+    <hr />
+
+    <form v-on:submit.prevent>
+      <label for="username">Your name:</label>
+      <input type="text" id="username" name="username" required />
+      <br />
+      <label for="patientID">Patient ID:</label>
+      <input type="text" id="patientID" name="patientID" required />
+      <br />
+      <label for="currentTime">Current time (check this is correct):</label>
+      <input type="datetime-local" id="currentTime" name="currentTime" v-model="currentTimeForm" />
+    </form>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  props: {
+    componentBaseURL: {
+      required: false,
+      default: "http://localhost:5000/api/v2",
+      type: String
+    }
+  },
+
+  data: function() {
+    return {
+      value: 0,
+      message: "",
+      hostDeviceName: null,
+      currentTime: this.getLocalDatetimeString()
+    };
+  },
+
+  mounted: function() {
+    if (this.componentBaseURL) {
+      axios
+        .get(`${this.componentBaseURL}`)
+        .then(response => {
+          console.log(response.data);
+          this.hostDeviceName = response.data.title;
+        })
+        .catch(function(error) {
+          console.log(
+            "Error reading test json, probabl because of cors or something"
+          );
+        });
+    } else {
+      this.message = "No componentBaseURL given";
+    }
+  },
+
+  methods: {
+    decrement: function() {
+      this.value = this.value - 1;
+    },
+
+    increment: function() {
+      this.value = this.value + 1;
+    },
+
+    getLocalDatetimeString: function() {
+      var dt = new Date();
+      var tzo = -dt.getTimezoneOffset(),
+        dif = tzo >= 0 ? "+" : "-",
+        pad = function(num) {
+          var norm = Math.floor(Math.abs(num));
+          return (norm < 10 ? "0" : "") + norm;
+        };
+      return (
+        dt.getFullYear() +
+        "-" +
+        pad(dt.getMonth() + 1) +
+        "-" +
+        pad(dt.getDate()) +
+        "T" +
+        pad(dt.getHours()) +
+        ":" +
+        pad(dt.getMinutes()) +
+        ":" +
+        pad(dt.getSeconds()) +
+        dif +
+        pad(tzo / 60) +
+        ":" +
+        pad(tzo % 60)
+      );
+    }
+  },
+
+  computed: {
+    currentTimeForm: {
+      get() {
+        // Chop the timezone information from the end
+        return this.currentTime.substr(0, 19);
+      },
+      set(val) {
+        console.log(val)
+        // Get timezone
+        var dt = new Date();
+        var tzo = -dt.getTimezoneOffset(),
+          dif = tzo >= 0 ? "+" : "-",
+          pad = function(num) {
+            var norm = Math.floor(Math.abs(num));
+            return (norm < 10 ? "0" : "") + norm;
+          };
+        // Stick to the end of the new timestring from the form
+        this.currentTime =
+          val + dif + pad(tzo / 60) + ":" + pad(tzo % 60);
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.medscan-component-class {
+  text-align: left;
+}
+</style>

openflexure_microscope/api/extra_extensions/medscan/static/src/main.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

openflexure_microscope/api/extra_extensions/medscan/static/vue.config.js

@@ -0,0 +1,4 @@
+process.env.VUE_APP_NAME = require('./package.json').name
+module.exports = {
+  productionSourceMap: false
+};