Added libraries for the demo app

nicolas-van · Sep 1, 2020 · 01b23b9 · 01b23b9
1 parent af14a7b
commit 01b23b9
Show file tree

Hide file tree

Showing 9 changed files with 852 additions and 37 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
diff --git a/demo/index.html b/demo/index.html
@@ -1,11 +1,19 @@
-<!doctype html>
-
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script src="./index.js"></script>
-</head>
-<body>
-  Play with a midi keyboard now!
-</body>
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>sai-experiment</title>
+
+    <link rel="stylesheet" href="./src/scss/index.scss">
+
+  </head>
+  <body>
+    <p>
+      Play with a midi keyboard now!
+    </p>
+    <script src="./index.js"></script>
+  </body>
+</html>
+
diff --git a/demo/index.js b/demo/index.js
@@ -1,6 +1,8 @@
 
 import * as sai from '../src/sai-experiment'
 
+console.log('loading track')
+
 const audioCtx = new AudioContext()
 const instrument = {
   oscillators: [

diff --git a/demo/src/index.js b/demo/src/index.js
@@ -0,0 +1,66 @@
+
+// import some polyfill to ensure everything works OK
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
+// import bootstrap's javascript part
+import 'bootstrap'
+
+// import font awesome fonts
+import '@fortawesome/fontawesome-free/css/all.css'
+
+import * as sai from '../src/sai-experiment'
+
+console.log('loading track')
+
+const audioCtx = new AudioContext()
+const instrument = {
+  oscillators: [
+    {
+      type: 'sine',
+      gain: 1,
+      freqOsc: {
+        type: 'sine',
+        amount: 0,
+        frequency: 10
+      }
+    }
+  ],
+  filters: [
+    {
+      type: 'highpass',
+      frequency: 0,
+      gain: 0,
+      q: 1000
+    }
+  ],
+  attack: 0.05,
+  decay: 0.05,
+  sustainLevel: 0.5,
+  sustainTime: 0.2,
+  release: 0.1,
+  gain: 0.2,
+
+  noise: 0,
+  delay: 0,
+  delayTime: 0.3,
+  panAmount: 0,
+  panFrequency: 2
+}
+const t = new sai.Track(audioCtx, instrument)
+t.output.connect(audioCtx.destination)
+
+console.log('trying to get midi access')
+window.navigator.requestMIDIAccess().then(function (midiAccess) {
+  console.log('midi access granted')
+  const inputs = midiAccess.inputs.values()
+  for (let input = inputs.next(); input && !input.done; input = inputs.next()) {
+    input.value.onmidimessage = receiveMessage
+  }
+})
+
+const receiveMessage = function (mm) {
+  const message = new sai.MidiMessage(mm.data)
+  console.log(message)
+  t.midiMessage(message)
+}
diff --git a/demo/src/scss/_bootswatch.scss b/demo/src/scss/_bootswatch.scss
@@ -0,0 +1,103 @@
+// Cerulean 4.3.1
+// Bootswatch
+
+
+@mixin btn-shadow($color){
+  @include gradient-y-three-colors(lighten($color, 8%), $color, 60%, darken($color, 4%));
+}
+
+$text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) !default;
+
+// Navbar ======================================================================
+
+.bg-primary {
+  @include btn-shadow($primary);
+}
+
+.bg-dark {
+  @include btn-shadow($blue);
+}
+
+.bg-light {
+  @include gradient-y-three-colors(lighten($gray-200, 8%), $gray-200, 60%, darken($gray-200, 2%));
+}
+
+.navbar-brand,
+.nav-link {
+  text-shadow: $text-shadow
+}
+
+// Buttons =====================================================================
+
+.btn {
+  text-shadow: $text-shadow
+}
+
+.btn-primary {
+  @include btn-shadow($primary);
+}
+
+.btn-secondary {
+  @include btn-shadow($secondary);
+  color: $gray-700;
+}
+
+.btn-success {
+  @include btn-shadow($success);
+}
+
+.btn-info {
+  @include btn-shadow($info);
+}
+
+.btn-warning {
+  @include btn-shadow($warning);
+}
+
+.btn-danger {
+  @include btn-shadow($danger);
+}
+
+.btn-light {
+  @include btn-shadow($light);
+}
+
+.btn-dark {
+  @include btn-shadow($dark);
+}
+
+
+// Typography ==================================================================
+
+.text-secondary {
+  color: $gray-500 !important;
+}
+
+.bg-primary,
+.bg-success,
+.bg-info,
+.bg-warning,
+.bg-danger,
+.bg-dark {
+  h1, h2, h3, h4, h5, h6 {
+    color: $white;
+  }
+}
+
+// Tables ======================================================================
+
+// Forms =======================================================================
+
+// Navs ========================================================================
+
+.dropdown-menu {
+  .dropdown-header {
+    color: $gray-600;
+  }
+}
+
+// Indicators ==================================================================
+
+// Progress bars ===============================================================
+
+// Containers ==================================================================
diff --git a/demo/src/scss/_variables.scss b/demo/src/scss/_variables.scss
@@ -0,0 +1,57 @@
+// Cerulean 4.3.1
+// Bootswatch
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$blue:    #033C73 !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #C71C22 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #DD5600 !default;
+$green:   #73A839 !default;
+$teal:    #20c997 !default;
+$cyan:    #2FA4E7 !default;
+
+$primary:       $cyan !default;
+$secondary:     $gray-200 !default;
+$success:       $green !default;
+$info:          $blue !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+// Body
+
+$body-color:    $gray-700 !default;
+
+// Fonts
+
+$headings-color:         $cyan !default;
+
+// Dropdowns
+
+$dropdown-link-color:            $body-color !default;
+$dropdown-link-hover-color:      $white !default;
+$dropdown-link-hover-bg:         $primary !default;
+
+// Navbar
+
+$navbar-dark-color:                 rgba($white,.8) !default;
+$navbar-dark-hover-color:           $white !default;
diff --git a/demo/src/scss/index.scss b/demo/src/scss/index.scss
@@ -0,0 +1,4 @@
+
+@import "./variables.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+@import "./bootswatch.scss";