Added web component example source

openflexure_microscope/api/example_extensions/custom_element/__init__.py

@@ -26,7 +26,7 @@ class CustomElementExtension(BaseExtension):
             self,
             "org.openflexure.customelement",
             description="Testing HTML components in an extension",
-            static_folder=path_relative_to(__file__, "static"),
+            static_folder=path_relative_to(__file__, "static", "dist"),
         )
 
         # Register the on_microscope function to run when the microscope is attached

openflexure_microscope/api/example_extensions/custom_element/static/.browserslistrc

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

openflexure_microscope/api/example_extensions/custom_element/static/.gitattributes

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

openflexure_microscope/api/example_extensions/custom_element/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/example_extensions/custom_element/static/babel.config.js

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

openflexure_microscope/api/example_extensions/custom_element/static/dist/demo.html

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

openflexure_microscope/api/example_extensions/custom_element/static/dist/my-custom-element.js

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

openflexure_microscope/api/example_extensions/custom_element/static/dist/my-custom-element.min.js

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

openflexure_microscope/api/example_extensions/custom_element/static/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "vue-web-component-project",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "vue-cli-service build --target wc --inline-vue --name my-custom-element ./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",
+    "vue-template-compiler": "^2.6.10"
+  }
+}

openflexure_microscope/api/example_extensions/custom_element/static/src/components/VueWebComponent.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="my-component-class">
+    <h1>My Vue Web Component</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>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+
+  props: {
+    'componentBaseURL': {
+      required: false,
+      default: null,
+      type: String
+    }
+  },
+
+  data: function() {
+    return {
+      value: 0,
+      message: "",
+      hostDeviceName: null
+    };
+  },
+
+  mounted () {
+    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
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+  .my-component-class {
+    text-align: center;
+  }
+</style>

openflexure_microscope/api/example_extensions/custom_element/static/src/main.js

@@ -0,0 +1,7 @@
+import Vue from 'vue';
+import wrap from '@vue/web-component-wrapper';
+import VueWebComponent from './components/VueWebComponent';
+
+const CustomElement = wrap(Vue, VueWebComponent);
+
+window.customElements.define('my-custom-element', CustomElement);

openflexure_microscope/api/example_extensions/custom_element/static/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    productionSourceMap: false
+};