Merge pull request #2 from lazzarello/include-nexus-tutorial

[Nexus UI Tutorial](https://nexus-js.github.io/ui/api/#intro), but for Vue.js with [async components](https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components) loading to enable the web audio context. The async stuff might not be needed when the [relevant PR is merged](nexus-js/ui#190).

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "nexusui": "^2.0.13"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.4.0",

src/components/Scarlett.vue

@@ -9,6 +9,7 @@
       <div v-else>
         <h1>Scarlett 18i8 Mixer</h1>
         <p>Found Device: <tt>{{ info | findScarlett }}</tt></p>
+        <ScarlettMixer />
       </div>
     </section> 
   </div>
@@ -38,7 +39,7 @@
           }
         })
         if ( found ) {
-          return outInfo.info
+          return outInfo.name
         } else {
           outInfo = {"error": "No Scarlett device found"}
           return outInfo
@@ -55,6 +56,9 @@
         })
         .finally(() => this.loading = false)
     },
-    name: 'Scarlett'
+    name: 'Scarlett',
+    components: {
+      'ScarlettMixer': () => import('./ScarlettMixer.vue')
+    }
   }
 </script>

src/components/ScarlettMixer.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="mixer">
+    <button v-on:click="pan1()">Load Mixer Controls</button>
+    <h1>I'm a ScarlettMixer!</h1>
+    <div id="channel">
+      <div id="pan"></div>
+      <div id="volume"></div>
+      <div id="outbus"></div>
+    </div>
+    <div id="debug">
+      <hr />
+      <h3>Debugging</h3>
+      <tt>{{ controls.data }}</tt>
+    </div>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+  var apiURL = 'http://localhost:1234/jsonapi?request=';
+  // https://nexus-js.github.io/ui/api/#intro
+  import Nexus from 'nexusui'
+  //we gotta seperate the actual rendering of NexusUI elements before the context is started
+  function loadAudio() {
+    Nexus.context.resume();
+
+    var pan = new Nexus.Pan('#pan');
+    var volume = new Nexus.Slider("#volume", {
+      'size': [20,200]
+    });
+    var outbus = new Nexus.Toggle('#outbus');
+
+    var channel = [pan, volume, outbus];
+    pan.on('change', function(v) {
+      console.log('Pan ' + v.value);
+    })
+
+    volume.on('change', function(v) {
+      console.log('Volume ' + v);
+    })
+
+    outbus.on('change', function(v) {
+      console.log('Channel ' + v);
+    })
+    return channel;
+  }
+
+  export default {
+    data () {
+      return {
+        controls: null,
+        loading: true,
+        errored: false,
+        pan1: loadAudio,
+        context: Nexus.context
+      }
+    },
+    mounted () {
+      // There can be more than one device named hw:USB
+      // I'll have to pass in cardid from a value from the Scarlett component
+      axios
+        .get(apiURL + 'ctrl-get-all' + '&cardid=hw:USB')
+        .then(response => (this.controls = response.data))
+        .catch(error => {
+          console.log(error)
+          this.errored = true
+        })
+        .finally(() => this.loading = false)
+    },
+    name: 'ScarlettMixer'
+  }
+</script>

src/main.js

@@ -1,10 +1,16 @@
 import Vue from 'vue'
 import './plugins/axios'
-import App from './App.vue' // no data because we're not importing it?
-// commenting this out removes the default template, which is a bit weird.
+import App from './App.vue' 
+// eslint-disable-next-line no-unused-vars
+import Nexus from 'nexusui'
 
 Vue.config.productionTip = false;
-//Vue.config.runtimeCompiler = true;
+// Vue.config.runtimeCompiler = true;
+
+// https://nexus-js.github.io/ui/api/#intro
+// the following is a convention for defaults of Vue
+// eslint-disable-next-line no-unused-vars
+//var dial = new Nexus.Dial('#dial')
 
 new Vue({
   render: h => h(App),