Move Vue app to a js directory

js/public/ListServices.imjoy.html

@@ -0,0 +1,43 @@
+<docs>
+[TODO: write documentation for this plugin.]
+</docs>
+
+<config lang="json">
+{
+    "name": "List services",
+    "type": "web-worker",
+    "tags": [],
+    "ui": "",
+    "version": "0.1.0",
+    "cover": "",
+    "description": "List the available ImJoy services in the console",
+    "icon": "extension",
+    "inputs": null,
+    "outputs": null,
+    "api_version": "0.1.8",
+    "env": "",
+    "permissions": [],
+    "requirements": [],
+    "dependencies": []
+}
+</config>
+
+<script lang="javascript">
+class ImJoyPlugin {
+    async setup() {
+        api.log('initialized')
+    }
+
+    async run(ctx) {
+        // get a list of service
+        const services = await api.getServices({name: "OpenFlexure"});
+        console.log("OpenFlexure services:");
+        console.log(services);
+        const allservices = await api.getServices();
+        console.log("All services:");
+        console.log(allservices);
+    }
+}
+
+api.export(new ImJoyPlugin())
+</script>

js/public/OpenFlexureScriptEditor.imjoy.html

@@ -0,0 +1,131 @@
+<config lang="json">
+{
+  "name": "Script Editor",
+  "type": "web-worker",
+  "tags": [],
+  "ui": "",
+  "version": "0.1.0",
+  "cover": "",
+  "description": "A Script Editor for Controlling OpenFlexure Microscope with ImJoy",
+  "icon": "extension",
+  "inputs": null,
+  "outputs": null,
+  "api_version": "0.1.8",
+  "env": "",
+  "permissions": [],
+  "requirements": [],
+  "dependencies": []
+}
+</config>
+
+<script lang="javascript">
+class ImJoyPlugin {
+  async setup() {
+    api.log('initialized')
+  }
+
+  async run(ctx) {
+    let pluginInEditor, stopped, editorWindow;
+    const config = {lang: 'javascript'}
+    config.templates = [
+        {
+          name: "New",
+          url: null,
+          lang: 'javascript',
+        },
+        {
+          name: "Snap Image Template",
+          url: "./OpenFlexureSnapImageTemplate.imjoy.html",
+          lang: "html",
+        }
+      ]
+    config.ui_elements = {
+      save: {
+          _rintf: true,
+          type: 'button',
+          label: "Save",
+          visible: false,
+          icon: "content-save",
+          callback(content) {
+              console.log(content)
+          }
+      },
+      run: {
+          _rintf: true,
+          type: 'button',
+          label: "Run",
+          icon: "play",
+          visible: true,
+          shortcut: 'Shift-Enter',
+          async callback(content) {
+              try {
+                  editorWindow.setLoader(true);
+                  editorWindow.updateUIElement('stop', {
+                      visible: true
+                  })
+                  api.showProgress(0);
+                  pluginInEditor = await api.getPlugin({src: content, hot_reloading: true})
+             
+                  if (stopped) {
+                      pluginInEditor = null;
+                      return;
+                  }
+                  if (pluginInEditor && pluginInEditor.run) {
+                      return await pluginInEditor.run({
+                          config: {},
+                          data: {}
+                      });
+                  }
+                  if (stopped) {
+                      pluginInEditor = null;
+                      return;
+                  }
+              } catch (e) {
+                  api.showMessage("Failed to load plugin, error: " + e.toString());
+              } finally {
+                  editorWindow.updateUIElement('stop', {
+                      visible: false
+                  })
+                  editorWindow.setLoader(false);
+                  api.showProgress(100);
+              }
+          }
+      },
+      stop: {
+          _rintf: true,
+          type: 'button',
+          label: "Stop",
+          style: "color: #ff0080cf;",
+          icon: "stop",
+          visible: false,
+          async callback() {
+              stopped = true;
+              await editorWindow.setLoader(false);
+              await editorWindow.updateUIElement('stop', {
+                  visible: false
+              })
+          }
+      },
+      export: {
+          _rintf: true,
+          type: 'button',
+          label: "Export",
+          icon: "file-download-outline",
+          visible: true,
+          async callback(content) {
+            const fileName = (pluginInEditor && pluginInEditor.config.name && pluginInEditor.config.name + '.imjoy.html') || config.name + '.imjoy.html' || "myPlugin.imjoy.html";
+            await api.exportFile(content, fileName);
+          }
+      }
+    }
+    editorWindow = await api.createWindow({
+        src: 'https://if.imjoy.io',
+        name: (ctx && ctx.data && ctx.data.name) ||'OpenFlexure Script Editor',
+        config,
+        data: {code: ctx && ctx.data && ctx.data.code}
+    })
+  }
+}
+
+api.export(new ImJoyPlugin())
+</script>

js/public/OpenFlexureSnapImageTemplate.imjoy.html

@@ -0,0 +1,43 @@
+<docs>
+[TODO: write documentation for this plugin.]
+</docs>
+
+<config lang="json">
+{
+  "name": "OpenFlexureSnapImageTemplate",
+  "type": "web-worker",
+  "tags": [],
+  "ui": "",
+  "version": "0.1.0",
+  "cover": "",
+  "description": "[TODO: describe this plugin with one sentence.]",
+  "icon": "extension",
+  "inputs": null,
+  "outputs": null,
+  "api_version": "0.1.8",
+  "env": "",
+  "permissions": [],
+  "requirements": [],
+  "dependencies": []
+}
+</config>
+
+<script lang="javascript">
+class ImJoyPlugin {
+  async setup() {
+    api.log('initialized')
+  }
+
+  async run(ctx) {
+    // get a list of service
+    const services = await api.getServices({name: "OpenFlexure"});
+    // get the first service
+    const ofm = services[0];
+    // snap an image
+    await ofm.snapImage();
+    console.log("snapped an image");
+  }
+}
+
+api.export(new ImJoyPlugin())
+</script>

js/public/OpenFlexureTestMoveStage.imjoy.html

@@ -0,0 +1,50 @@
+<docs>
+[TODO: write documentation for this plugin.]
+</docs>
+
+<config lang="json">
+{
+    "name": "Test OFM Stage",
+    "type": "web-worker",
+    "tags": [],
+    "ui": "",
+    "version": "0.1.0",
+    "cover": "",
+    "description": "Move the OFM stage to test the API works",
+    "icon": "extension",
+    "inputs": null,
+    "outputs": null,
+    "api_version": "0.1.8",
+    "env": "",
+    "permissions": [],
+    "requirements": [],
+    "dependencies": []
+}
+</config>
+
+<script lang="javascript">
+class ImJoyPlugin {
+    async setup() {
+    api.log('initialized')
+    }
+
+    async run(ctx) {
+    // get a list of service
+    const services = await api.getServices({name: "OpenFlexure"});
+    // get the first service
+    const ofm = services[0];
+    // snap an image
+    const start = await ofm.getXYZPosition();
+    console.log(`Starting position: ${start}`);
+    // move the Z axis up and down
+    await ofm.setPosition(start[2] + 100);
+    console.log(`Moved Z to ${await ofm.getPosition()}`);
+    await ofm.setPosition(start[2]);
+    console.log(`Moved Z to ${await ofm.getPosition()}`);
+    await ofm.fullFocus();
+    console.log("Ran a full autofocus");
+    }
+}
+
+api.export(new ImJoyPlugin())
+</script>

js/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>OpenFlexure Microscope</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

js/public/titleicon.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 90 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;">
+    <g transform="matrix(1,0,0,1,-30.245,-47.0254)">
+        <g id="path3773" transform="matrix(0.12596,0,0,0.12596,28.1368,19.1335)">
+            <path d="M212.85,344.652C234.052,276.913 297.347,227.702 372.047,227.702C446.747,227.702 510.042,276.913 531.245,344.652L531.245,344.652L531.246,344.656C531.789,346.391 532.304,348.138 532.791,349.896C556.452,421.618 655.593,393.868 655.593,393.868L721.09,563.056L472.356,659.347L430.306,550.728L430.129,550.794L406.853,490.142C408.621,489.464 410.361,488.736 412.072,487.962C419.736,484.232 426.404,480.109 432.198,475.703C447.995,463.209 459.586,446.041 465.257,426.69C473.38,395.32 463.384,366.691 463.101,365.891C449.309,328.959 413.54,302.366 372.047,302.366C330.554,302.366 294.785,328.959 280.994,365.891C280.711,366.689 270.714,395.319 278.838,426.69C284.509,446.041 296.099,463.209 311.897,475.703C317.69,480.109 324.359,484.232 332.023,487.962C333.734,488.736 335.474,489.464 337.242,490.142L337.166,490.34C337.166,490.34 313.965,550.794 313.965,550.794L313.788,550.728L271.739,659.347L23.004,563.056L88.501,393.868C88.501,393.868 187.642,421.618 211.303,349.896C211.79,348.138 212.306,346.391 212.849,344.656L212.85,344.652L212.85,344.652Z" style="fill:white;fill-rule:nonzero;stroke:white;stroke-width:12.54px;"/>
+        </g>
+    </g>
+</svg>