├── .gitattributes
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── README.md
├── build
    ├── icon.icns
    ├── icon.ico
    └── install-spinner.gif
├── docs
    ├── .gitattributes
    ├── .gitignore
    ├── .npmignore
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    │   ├── draft.md
    │   ├── page.md
    │   └── post.md
    ├── source
    │   ├── api-reference
    │   │   └── index.md
    │   ├── developer-guide-getting-started
    │   │   └── index.md
    │   ├── getting-started
    │   │   └── index.md
    │   ├── how-to
    │   │   └── index.md
    │   ├── index.md
    │   ├── parameters
    │   │   └── index.md
    │   ├── skqw-core-module
    │   │   └── index.md
    │   └── using-three-js
    │   │   └── index.md
    └── themes
    │   └── skqw
    │       ├── .gitignore
    │       ├── README.md
    │       ├── _config.yml
    │       ├── languages
    │           └── en.yml
    │       ├── layout
    │           ├── _partials
    │           │   ├── article.ejs
    │           │   ├── footer.ejs
    │           │   ├── google-analytics.ejs
    │           │   ├── head.ejs
    │           │   ├── logo.ejs
    │           │   ├── mobile-header.ejs
    │           │   ├── pagination.ejs
    │           │   ├── photoswipe.ejs
    │           │   ├── post-list.ejs
    │           │   ├── post
    │           │   │   ├── category.ejs
    │           │   │   ├── cc.ejs
    │           │   │   ├── date.ejs
    │           │   │   ├── disqus.ejs
    │           │   │   ├── duoshuo.ejs
    │           │   │   ├── gallery.ejs
    │           │   │   ├── tag.ejs
    │           │   │   └── title.ejs
    │           │   └── sidebar.ejs
    │           ├── archive.ejs
    │           ├── category.ejs
    │           ├── index.ejs
    │           ├── layout.ejs
    │           ├── post.ejs
    │           └── tag.ejs
    │       ├── package.json
    │       └── source
    │           ├── images
    │               ├── apple.svg
    │               ├── favicon.ico
    │               ├── github.svg
    │               ├── how-to-enable-stereo-mix-windows.gif
    │               ├── logo-line.svg
    │               ├── screenshot-01.jpg
    │               └── windows8.svg
    │           ├── scripts
    │               └── main.js
    │           └── styles
    │               ├── archive.styl
    │               ├── article.styl
    │               ├── footer.styl
    │               ├── highlight.styl
    │               ├── index.styl
    │               ├── layout.styl
    │               ├── libs
    │                   └── normalize.styl
    │               ├── main.styl
    │               ├── mobile-header.styl
    │               ├── monochrome.styl
    │               ├── pagination.styl
    │               ├── post-list.styl
    │               ├── sidebar.styl
    │               ├── third-party.styl
    │               └── variables.styl
├── package.json
├── src
    ├── assets
    │   ├── icons
    │   │   └── MaterialIcons-Regular.woff2
    │   └── images
    │   │   ├── icon.ico
    │   │   ├── icon.svg
    │   │   ├── logo-black.svg
    │   │   ├── logo-ideas.svg
    │   │   ├── logo.png
    │   │   └── logo.svg
    ├── common
    │   ├── constants.ts
    │   └── models.ts
    ├── index.html
    ├── library
    │   ├── bars
    │   │   └── index.js
    │   ├── eclipse
    │   │   └── index.js
    │   ├── hyperwave
    │   │   └── index.js
    │   └── resistance
    │   │   ├── index.js
    │   │   ├── polygon.js
    │   │   └── star.js
    ├── main
    │   ├── analyzer.ts
    │   └── index.ts
    ├── package.json
    ├── remote-control
    │   ├── bootstrap.ts
    │   ├── index.html
    │   ├── remote-control.component.html
    │   ├── remote-control.component.ts
    │   ├── remote-control.module.ts
    │   └── remote-control.scss
    └── render
    │   ├── app.component.html
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── bootstrap.ts
    │   ├── components
    │       ├── gain-selector
    │       │   ├── gain-selector.component.html
    │       │   ├── gain-selector.component.ts
    │       │   └── gain-selector.scss
    │       ├── input-selector
    │       │   ├── input-selector.component.html
    │       │   ├── input-selector.component.ts
    │       │   └── input-selector.scss
    │       ├── notification
    │       │   ├── notification.component.ts
    │       │   └── notification.scss
    │       ├── parameter-controls
    │       │   ├── parameter-controls.component.html
    │       │   ├── parameter-controls.component.ts
    │       │   └── parameter-controls.scss
    │       ├── settings-group
    │       │   ├── settings-group.component.html
    │       │   ├── settings-group.component.ts
    │       │   └── settings-group.scss
    │       ├── settings-panel
    │       │   ├── settings-panel.component.html
    │       │   ├── settings-panel.component.ts
    │       │   └── settings-panel.scss
    │       ├── v-selector
    │       │   ├── v-selector.component.html
    │       │   ├── v-selector.component.ts
    │       │   └── v-selector.scss
    │       └── visualizer
    │       │   ├── defaultVisualization.ts
    │       │   ├── visualizer.component.ts
    │       │   └── visualizer.scss
    │   ├── main.aot.ts
    │   ├── modules
    │       ├── beat-detector.ts
    │       ├── exponential-smoother.ts
    │       ├── skqw-core.ts
    │       └── skqw-utils.ts
    │   ├── polyfills.ts
    │   ├── providers
    │       ├── canvas.service.ts
    │       ├── library.service.ts
    │       ├── loader.service.ts
    │       ├── notification.service.ts
    │       ├── state.service..ts
    │       └── visualization.service.ts
    │   └── styles
    │       ├── _form-inputs.scss
    │       ├── _icons.scss
    │       ├── _material.scss
    │       ├── _scrollbars.scss
    │       ├── _variables.scss
    │       └── app.scss
├── tsconfig.json
├── webpack.common.js
├── webpack.config.js
├── webpack.main.js
├── webpack.remote-control.js
└── webpack.render.js


/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | app
 3 | dist
 4 | typings
 5 | .idea
 6 | db.json
 7 | docs/public
 8 | docs/.deploy_git
 9 | ngfactory
10 | 
11 | # Windows image file caches
12 | Thumbs.db
13 | ehthumbs.db
14 | 
15 | # Folder config file
16 | Desktop.ini
17 | 
18 | # Recycle Bin used on file shares
19 | $RECYCLE.BIN/
20 | 
21 | # Windows Installer files
22 | *.cab
23 | *.msi
24 | *.msm
25 | *.msp
26 | 
27 | # Windows shortcuts
28 | *.lnk
29 | 
30 | # =========================
31 | # Operating System Files
32 | # =========================
33 | 
34 | # OSX
35 | # =========================
36 | 
37 | .DS_Store
38 | .AppleDouble
39 | .LSOverride
40 | 
41 | # Thumbnails
42 | ._*
43 | 
44 | # Files that might appear on external disk
45 | .Spotlight-V100
46 | .Trashes
47 | 
48 | # Directories potentially created on remote AFP share
49 | .AppleDB
50 | .AppleDesktop
51 | Network Trash Folder
52 | Temporary Items
53 | .apdisk
54 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | osx_image: xcode7.3
 2 | sudo: required
 3 | dist: trusty
 4 | language: c
 5 | os:
 6 | - osx
 7 | env:
 8 | - CSC_IDENTITY_AUTO_DISCOVERY=false
 9 | cache:
10 |   directories:
11 |   - node_modules
12 |   - app/node_modules
13 |   - $HOME/.electron
14 |   - $HOME/.cache
15 | install:
16 | - nvm install 7
17 | - npm install -g node-gyp
18 | - npm install
19 | - npm prune
20 | - cd src
21 | - npm install
22 | - cd ..
23 | script:
24 | - npm run electron:rebuild
25 | - npm run app:build
26 | - cd app/node_modules/node-core-audio
27 | - node-gyp rebuild --target=1.6.0 --arch=x64 --dist-url=https://atom.io/download/atom-shell
28 | - cd ..
29 | - cd ..
30 | - cd ..
31 | - npm run dist:osx
32 | 
33 | # fix for "shell_session_update: command not found" error - see https://github.com/direnv/direnv/issues/210#issuecomment-271272371
34 | after_script: set +e
35 | 
36 | deploy:
37 |   provider: s3
38 |   access_key_id: AKIAJD3PNC3PV7HMXRIQ
39 |   secret_access_key:
40 |     secure: DvplEJFlj+Dx5i9Xhl6S2MwIQiAc1nqKqY32gTNBIoNh/7iw65YiwAewTK559YzojUwNWzjeCKjjXdzCXM8HO+4DkBUW9/5+BrWHJU5hsIgk0aQNz0uRPvNDffSaG5J9lfCO+t6FxZbq3Qkktyr1Fuxu5lZmNflhJmgKtJgrwD117/9kIr11Ir4gAuyIANKqQGPUm+z5f1pUEkE7KvH4badmwktIPAcy9KHPZUK9/9EzSy5l3SEaADcSeIUts10n0y4mFHSwnJ5axDzzSqXWIo4itOTqMlVGAbEItwvUkrMFL6g7SiDgQ9KiqrXnykG/wLtHcRBKRJtOYVuLiGyN6ul0KjRVVwTPr46IXbFk3q+wFFvN8RoE5IWZHU6vpngcQ5suf+BMZkEv7LjjxxNYYgyweiigX0NyNi5/mJd/ZfI5XhXaYdQLT7Xr1T2ZLOsGIbt/zpVI1e79hpa5sg1Nf9izbnkvdD214E0TFm0xK3ZKH51Zy3dWe7TI1q8FbIF6kJkNBPEcbXUon4kiSMqkFChIPWenXzC3nFKVib0kzYJg3aH2foEROOBoDmaqruZiJj+j1x27yj7QBCHeI7SmrTrZDjYybBN2+Dg5QE88RnqJJUmLQVniTMe/YzJR6U3Nz35sLdiopOdzvBNRCWluV0jWDMO4sqymap1FOJah2h4=
41 |   bucket: skqw-build-artifacts
42 |   skip_cleanup: true
43 |   local-dir: dist
44 |   acl: 'public_read'
45 |   on:
46 |     repo: michaelbromley/skqw
47 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ### v1.0.0-beta.3 (in progress)
 2 | 
 3 | #### Features
 4 | * Add remote control
 5 | * Update to Electron 1.6.7
 6 | * Update to Angular 4 & Angular Material 2.0.0-beta.3
 7 | * [Windows] Use the nsis installer rather than Squirrel (Setup exe about 20MB smaller)
 8 | * Display Three.js version in UI
 9 | * Persist param settings when reloading a visualization
10 | 
11 | #### Fixes
12 | * Fixed closed app process persisting in background
13 | 
14 | 
15 | ### v1.0.0-beta.2 (2017-01-30)
16 | #### Features
17 | * Breaking API change: the skqw onject is no longer passed to lifecycle methods. Use `require('skqw-core')` instead
18 | * Only load scripts on demand, rather than keeping whole library in memory
19 | * Error messages in console when visualizations fail to load
20 | * Automatic updating of parameters when no callback exported
21 | * Bundle `skqw-utils` module, currently featuring an exponential smoothing implementation and crappy beat detector
22 | * Bundle a set of default visualizations with the app
23 | * Updated UI
24 | 
25 | ### v1.0.0-beta.1 (2016-10-10)
26 | #### Features
27 | * OSX build now available thanks to Travis CI.
28 | * Configurable sample rate
29 | * Styling improvements
30 | 
31 | #### Fixes
32 | * Gain setting is correctly persisted
33 | * Prevent resize immediately after init call
34 | 
35 | ### v1.0.0-alpha.3 (2016-08-18)
36 | #### Features
37 | * Improvements to default visualization
38 | * Update Electron version to 1.3.2
39 | 
40 | #### Fixes
41 | * Coerce param value into correct type before passing to pparamChange()
42 | * Add try/catch around external file operations.
43 | 
44 | ### v1.0.0-alpha.2 (2016-07-31)
45 | 
46 | #### Features
47 | * Pass the skqw object to paramChange function as first argument.
48 | 
49 | #### Fixes
50 | * Fix devtools opening when using full-screen shortcut.
51 | * Disable text selection in settings menu.
52 | * Fix canvas positioning to allow laying multiple canvases.
53 | * Add try/catch blocks around lifecycle calls.
54 | 
55 | 
56 | ### v1.0.0-alpha.1 (2016-07-25)
57 | 
58 | First pre-release!


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![SKQW Logo](src/assets/images/logo.png)
 2 | 
 3 | #### A native desktop audio visualizer, built with Electron and Angular.
 4 | 
 5 | SKQW (pronounced "skew") allows you to visualize the audio output of you computer's sound card. It is inspired by my love of the old Winamp plugins like [Milkdrop](https://www.google.com/search?tbm=isch&q=milkdrop+plugin+visualization) and [Geiss](https://www.google.com/search?q=geiss+plugin+visualization&tbm=isch). Visualizations are written in JavaScript and use HTML Canvas (2d or 3d) to render.
 6 | 
 7 | For installation, build, and development guides, see https://michaelbromley.github.io/skqw
 8 | 
 9 | ## Guide to This Repo
10 | 
11 | Since this is an Electron app, you'll find the meat of the code split between the `src/main` folder for the main process code, and `src/render` for the render process (browser app) code.
12 | 
13 | The docs are generated from markdown files in the `docs/source` folder.
14 | 
15 | ## Building From Source (Windows / OS X / Linux)
16 | 
17 | I develop SKQW on a Windows machine, so I can only provide exact instructions for building on Windows for now. Since SKQW makes use of a natively-compiled node addon for sound card access, it needs to be compiled on the target platform.
18 | 
19 | Those who are familiar with compiling electron apps and native node modules on OSX / Linux may be able to follow along with these instructions and modify the platform-specific parts. If you succeed, please let me know how you did it, so I can add instructions for those platforms.
20 | 
21 | ### Requirements
22 | 
23 | - [**All platforms**] [Python 2.7](https://www.python.org/downloads/) is required for [node-gyp](https://github.com/nodejs/node-gyp) to build the native addon.
24 | - [**Windows**] Visual Studio 2015 for compiling the native node addon. You can download the [community edition](https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx) for free. VS 2017 is currently not well supported by node-gyp. Alternatively, install the [windows-build-tools](https://github.com/felixrieseberg/windows-build-tools) package.
25 | - [**OS X / Linux**] See the [node-gyp docs](https://github.com/nodejs/node-gyp#installation) for requirements for compiling native addons.
26 | - [**Windows 7 only**] [Windows SDK version 8.1](https://developer.microsoft.com/en-us/windows/downloads/windows-8-1-sdk) or above - only applicable if you are on Windows 7 or below.
27 | - [Node](https://nodejs.org/en/). Make sure the node version is 64-bit for building for x64 versions of Windows, and vice-versa.
28 | - [**Windows**] If you have Visual Studio 2015 update 3+, make sure your npm version is > 3.10.5, otherwise you will get an error when trying to run `dist:win64`
29 | 
30 | ### Steps to Build
31 | 
32 | 1. `git clone https://github.com/michaelbromley/skqw.git`
33 | 2. `npm install` - installs the dev dependencies
34 | 3. `cd src`
35 | 4. `npm install` - installs the runtime dependencies (native node addons)
36 | 5. `cd ..`
37 | 6. `npm run electron:rebuild` - rebuild the native modules for electron
38 | 7. `npm run app:build` - build the app
39 | 8. `npm run electron:start` - test the app in dev mode
40 | 9. `npm run dist:win64` - create a Windows 64-bit binary. Will be created in the `dist` folder.
41 | 
42 | ##### Build issue with Node 6.4.0 / Windows
43 | 
44 | I just upgraded to Node 6.4.0. This caused some problems with incompatible dependencies which have not upgraded some of their own dependencies to newer versions. Here's what I needed to do to get the build to work:
45 | 
46 | 1. Update the npm version inside electron-rebuild to the latest version, so that we get a newer node-gyp which does not break with VS2015 update 3.
47 | 
48 | 
49 | ## Building The Docs
50 | 
51 | The docs are build with Hexo. In development, go to the `/docs` folder and run `hexo serve`
52 | 
53 | To deploy, run `hexo generate --deploy`
54 | 
55 | ## Troubleshooting (Windows)
56 | 
57 | #### Visualizations don't react to audio
58 | In the Windows "sound" dialog (right click icon in system tray), go to "recording devices" tab and make sure "stereo mix" is enabled and not muted.
59 | 
60 | ## Credits
61 | 
62 | SKQW is built on top of the following open source projects:
63 | 
64 | * [node-core-audio](https://github.com/ZECTBynmo/node-core-audio) (using a custom fork)
65 | * [Electron](http://electron.atom.io/)
66 | * [Angular](http://angular.io/)
67 | * [TypeScript](http://www.typescriptlang.org/)
68 | * [Webpack](https://webpack.github.io/)
69 | * [Hexo](https://hexo.io/) (for documentation site)
70 | 


--------------------------------------------------------------------------------
/build/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/build/icon.icns


--------------------------------------------------------------------------------
/build/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/build/icon.ico


--------------------------------------------------------------------------------
/build/install-spinner.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/build/install-spinner.gif


--------------------------------------------------------------------------------
/docs/.gitattributes:
--------------------------------------------------------------------------------
 1 | # Auto detect text files and perform LF normalization
 2 | * text=auto
 3 | 
 4 | # Custom for Visual Studio
 5 | *.cs     diff=csharp
 6 | 
 7 | # Standard to msysgit
 8 | *.doc	 diff=astextplain
 9 | *.DOC	 diff=astextplain
10 | *.docx diff=astextplain
11 | *.DOCX diff=astextplain
12 | *.dot  diff=astextplain
13 | *.DOT  diff=astextplain
14 | *.pdf  diff=astextplain
15 | *.PDF	 diff=astextplain
16 | *.rtf	 diff=astextplain
17 | *.RTF	 diff=astextplain
18 | 


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
 1 | /.idea
 2 | /node_modules
 3 | /app
 4 | /src
 5 | db.json
 6 | 
 7 | # Windows image file caches
 8 | Thumbs.db
 9 | ehthumbs.db
10 | 
11 | # Folder config file
12 | Desktop.ini
13 | 
14 | # Recycle Bin used on file shares
15 | $RECYCLE.BIN/
16 | 
17 | # Windows Installer files
18 | *.cab
19 | *.msi
20 | *.msm
21 | *.msp
22 | 
23 | # Windows shortcuts
24 | *.lnk
25 | 
26 | # =========================
27 | # Operating System Files
28 | # =========================
29 | 
30 | # OSX
31 | # =========================
32 | 
33 | .DS_Store
34 | .AppleDouble
35 | .LSOverride
36 | 
37 | # Thumbnails
38 | ._*
39 | 
40 | # Files that might appear in the root of a volume
41 | .DocumentRevisions-V100
42 | .fseventsd
43 | .Spotlight-V100
44 | .TemporaryItems
45 | .Trashes
46 | .VolumeIcon.icns
47 | 
48 | # Directories potentially created on remote AFP share
49 | .AppleDB
50 | .AppleDesktop
51 | Network Trash Folder
52 | Temporary Items
53 | .apdisk
54 | 


--------------------------------------------------------------------------------
/docs/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | Thumbs.db
3 | db.json
4 | *.log
5 | node_modules/
6 | public/
7 | .deploy*/


--------------------------------------------------------------------------------
/docs/_config.yml:
--------------------------------------------------------------------------------
 1 | # Hexo Configuration
 2 | ## Docs: https://hexo.io/docs/configuration.html
 3 | ## Source: https://github.com/hexojs/hexo/
 4 | 
 5 | # Site
 6 | title: SKQW
 7 | subtitle: A hackable audio visualizer
 8 | description:
 9 | author: Michael Bromley
10 | language:
11 | timezone:
12 | 
13 | # URL
14 | ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
15 | url: "http://michaelbromley.github.io/skqw"
16 | root: /skqw/
17 | permalink: :year/:month/:day/:title/
18 | permalink_defaults:
19 | 
20 | # Directory
21 | source_dir: source
22 | public_dir: public
23 | tag_dir: tags
24 | archive_dir: archives
25 | category_dir: categories
26 | code_dir: downloads/code
27 | i18n_dir: :lang
28 | skip_render:
29 | 
30 | # Writing
31 | new_post_name: :title.md # File name of new posts
32 | default_layout: post
33 | titlecase: false # Transform title into titlecase
34 | external_link: true # Open external links in new tab
35 | filename_case: 0
36 | render_drafts: false
37 | post_asset_folder: false
38 | relative_link: false
39 | future: true
40 | highlight:
41 |   enable: true
42 |   line_number: true
43 |   auto_detect: false
44 |   tab_replace:
45 | 
46 | # Category & Tag
47 | default_category: uncategorized
48 | category_map:
49 | tag_map:
50 | 
51 | # Date / Time format
52 | ## Hexo uses Moment.js to parse and display date
53 | ## You can customize the date format as defined in
54 | ## http://momentjs.com/docs/#/displaying/format/
55 | date_format: YYYY-MM-DD
56 | time_format: HH:mm:ss
57 | 
58 | # Pagination
59 | ## Set per_page to 0 to disable pagination
60 | per_page: 10
61 | pagination_dir: page
62 | 
63 | # Extensions
64 | ## Plugins: https://hexo.io/plugins/
65 | ## Themes: https://hexo.io/themes/
66 | theme: skqw
67 | 
68 | # Deployment
69 | ## Docs: https://hexo.io/docs/deployment.html
70 | deploy:
71 |   type: git
72 |   repo: "git@github.com:michaelbromley/skqw.git"
73 |   branch: gh-pages
74 |   message: "Docs updated: {{ now('YYYY-MM-DD HH:mm:ss') }})"
75 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hexo-site",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "hexo": {
 6 |     "version": "3.2.2"
 7 |   },
 8 |   "dependencies": {
 9 |     "hexo": "^3.2.0",
10 |     "hexo-deployer-git": "^0.2.0",
11 |     "hexo-generator-archive": "^0.1.4",
12 |     "hexo-generator-category": "^0.1.3",
13 |     "hexo-generator-index": "^0.2.0",
14 |     "hexo-generator-tag": "^0.2.0",
15 |     "hexo-renderer-ejs": "^0.2.0",
16 |     "hexo-renderer-marked": "^0.2.10",
17 |     "hexo-renderer-stylus": "^0.3.1",
18 |     "hexo-server": "^0.2.0"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/docs/scaffolds/draft.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: {{ title }}
3 | tags:
4 | ---
5 | 


--------------------------------------------------------------------------------
/docs/scaffolds/page.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: {{ title }}
3 | date: {{ date }}
4 | ---
5 | 


--------------------------------------------------------------------------------
/docs/scaffolds/post.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: {{ title }}
3 | date: {{ date }}
4 | tags:
5 | ---
6 | 


--------------------------------------------------------------------------------
/docs/source/api-reference/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: API Reference
 3 | ---
 4 | 
 5 | This is a description of the APIs for authoring visualizations in SKQW. For a general overview, see the [dev guide](../developer-guide-getting-started).
 6 | 
 7 | ## Visualization Interfaces
 8 | 
 9 | ```TypeScript
10 | interface Visualization {
11 |     name: string;
12 |     init: () => void;
13 |     tick: (timestamp: number) => void;
14 |     resize?: () => void;
15 |     destroy?: () => void;
16 |     paramChange?: (change: ParamUpdate) => void;
17 |     params?: { [name: string]: Parameter }
18 | }
19 | 
20 | interface Parameter {
21 |     value: number | boolean;
22 |     type: 'range' | 'boolean';
23 |     label: string;
24 |     min?: number;
25 |     max?: number;
26 |     step?: number;
27 | }
28 | 
29 | interface ParamUpdate {
30 |     paramKey: string;
31 |     newValue: number | boolean;
32 | }
33 | ```
34 | 
35 | ### `visualization.name`
36 | 
37 | The name which will be displayed in the app UI.
38 | 
39 | ### `visualization.init()`
40 | 
41 | Called once when the visualization is selected in the UI. Normally used to create one or more canvases. 
42 | 
43 | **Important note:** it is not advisable to set the properties of a canvas context in the `init()` function, because in accordance with the [Canvas spec](https://dev.w3.org/html5/spec-preview/the-canvas-element.html), the context gets reset any time the canvas is resized. Therefore it is better to make changes to the context in either the `tick()` or the `resize()` functions.
44 | 
45 | ### `visualization.tick(timestamp)`
46 | 
47 | Called for each frame of the visualization animation, roughly 60 times per second. The `timestamp` is a [DOMHighResTimeStamp](https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp) provided by the [requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) method which is used internally.
48 | 
49 | ### `visualization.resize()`
50 | 
51 | Called whenever the app window is resized.
52 | 
53 | ### `visualization.destroy()`
54 | 
55 | Called just before unloading the visualization, as when a different visualization is selected in the UI.
56 | 
57 | ### `visualization.paramChange(change)`
58 | 
59 | Called whenever the user changes a param in the UI. If omitted, SKQW will automatically update any parameter values changed.
60 | 
61 | ### `visualization.params`
62 | 
63 | An object describing the user-configurable parameters which may be changed at run time to alter the way the visualization renders.
64 | 


--------------------------------------------------------------------------------
/docs/source/developer-guide-getting-started/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Developer Guide: Getting Started"
 3 | date: 2016-08-19 15:36:33
 4 | ---
 5 | 
 6 | A visualization in SKQW is a JavaScript module in the commonjs format. Since SKQW is implemented on top of the Electron platform, which uses recent versions of Node and Chrome, you are free to use (most) ES2015 language features. One notable exception is that module imports and exports must be in the [Node commonjs](https://nodejs.org/docs/latest/api/modules.html) (`module.exports` and `require()`) format.
 7 | 
 8 | ## File Location & Naming
 9 | 
10 | A visualization main file must be located in a subdirectory of the "library path" (as set in the UI), and must be named "index.js":
11 | 
12 | ```
13 | // "visualizations" is set as the library path in the app.
14 | 
15 | - visualizations/
16 |     |
17 |     |- myVis/
18 |     |   |- index.js
19 |     |
20 | ```
21 | 
22 | ## Basic Example
23 | 
24 | Here is a bare-bones visualization:
25 | 
26 | ```JavaScript
27 | const {createCanvas, getSample, getDimensions} = require('skqw-core');
28 | 
29 | // canvas context.
30 | let ctx;
31 | 
32 | function init() {
33 |     ctx = createCanvas().getContext('2d');
34 | }
35 | 
36 | function tick() {
37 |     const { width, height } = getDimensions();
38 |     const { ft } = getSample();
39 | 
40 |     // clear the canvas.
41 |     ctx.fillStyle = 'rgba(0, 0, 0, 1)';
42 |     ctx.fillRect(0, 0, width, height);
43 |     
44 |     // draw the visualization frame
45 |     drawBars(width, height, ft);
46 | }
47 | 
48 | function drawBars(w, h, ft) {
49 |     const length = ft.length;
50 |     const width = w / length;
51 |     
52 |     // The bars will be red
53 |     ctx.fillStyle = `hsla(0, 50%, 50%, 0.8)`;
54 |     for(let i = 0; i < ft.length; i++) {
55 |         const height = ft[i] * 250;
56 |         const x = i * width;
57 |         const y = h - height;
58 |         ctx.fillRect(x, y, width - 2, height);
59 |     }
60 | }
61 | 
62 | module.exports = {
63 |     name: 'Simple Example',
64 |     init,
65 |     tick
66 | };
67 | ```
68 | 
69 | The code above will display a simple frequency spectrum of red bars. Let's take a look at each of the basic parts:
70 | 
71 | #### Importing from `skqw-core`
72 | 
73 | The `skqw-core` module exports a few functions that you'll need for your visualization. Note - you don't need to "install" `skqw-core`, it is provided by SKQW itself. See the [skqw-core module documentation](../skqw-core-module) for a description of the exported functions.
74 | 
75 | #### `init()` function
76 | Every visualization *must* export an `init()` function. This function will be called once each time the visualization is selected in SKQW. It is used to set up the canvas as well as any other set-up your code may require. In this case we use `createCanvas()` to create a new canvas for us to draw to, and save a reference to the canvas' [context object](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D).
77 | 
78 | #### `tick()` function
79 | This is a required function which will be called every time a new audio sample arrives from the sound card, roughly 60 times per second. This is 
80 | where the magic happens! The `tick` function is responsible for rendering each individual frame of your visualization.
81 | 
82 | In our example, we first clear the canvas by drawing a big black rectangle over whatever was there before, and then we call a function which will
83 | iterate over each value in the `getSample().ft` array (which is the frequency spectrum), and represent it as a red bar whose height is proportional to the value of that frequency.
84 | 
85 | #### `module.exports` 
86 | Finally, we export the required information as a [Node commonjs](https://nodejs.org/docs/latest/api/modules.html) module. There are more functions and properties which SKQW can read (see the [API docs](../api-reference)), which lets us write richer visualizations, but the three shown are the bare minimum required for things to work.
87 | 
88 | ## Next Steps
89 | 
90 | Now you should know enough to start playing around with SKQW visualizations and creating some cool visuals!
91 | 
92 | There are a few more parts of the API not covered above. For a full rundown of all APIs, see the [API Reference](../api-reference).
93 | 
94 | Another way to learn is to take a look at the [source code of the standard library of visualizations](https://github.com/michaelbromley/skqw-library). 
95 | 


--------------------------------------------------------------------------------
/docs/source/getting-started/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Getting Started
 3 | date: 2016-08-20 06:48:50
 4 | ---
 5 | 
 6 | ## Installation (Windows / Mac)
 7 | 
 8 | 1. Go to the [releases page](https://github.com/michaelbromley/skqw/releases) to get the latest installer binary for your platform. On Windows, the app will be installed to `Users/<username>/AppData/Local/SKQW`, but should automatically create a shortcut on the desktop.
 9 | 2. SKQW will open with the default visualization library enabled.
10 | 3. If the app does not seem to start, ensure you have at least one audio recording source enabled in your sound card settings.
11 | 
12 | #### Notes:
13 | * The installer is not signed. This means Windows will warn you that it is not trusted and you shouldn't install it. If you trust me, you can disregard this warning ;) If there is enough interest I will consider purchasing a code-signing certificate to make such warnings go away.
14 | * This is beta software. It is likely you will encounter bugs. Please open issues in this repo (if you know how) so I can fix them for the next release.
15 | 


--------------------------------------------------------------------------------
/docs/source/how-to/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "How To Guides"
 3 | date: 2016-08-26 10:15:33
 4 | ---
 5 | 
 6 | ## (Windows) Enable Stereo Mix
 7 | 
 8 | SKQW will pick up whatever recording device is configured for your sound card. On your computer, this may be the microphone. To visualize music playing on your system, you'll need to set the recording device to "stereo mix" on Windows. Here is a gif demonstrating how to do it on Windows 10.
 9 | 
10 | ![Enabling Stereo Mix](../images/how-to-enable-stereo-mix-windows.gif)
11 | 


--------------------------------------------------------------------------------
/docs/source/index.md:
--------------------------------------------------------------------------------
1 | layout: index
2 | ---
3 | 
4 | # An audio visualizer built with Electron and Angular 2. Write visualizations in JavaScript!


--------------------------------------------------------------------------------
/docs/source/parameters/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Developer Guide: Parameters"
 3 | date: 2016-08-26 08:57:33
 4 | ---
 5 | 
 6 | It is possible to make certain aspects of a visualization configurable at run-time by the user. To do this we need to use parameters.
 7 | 
 8 | Here's an example:
 9 | 
10 | ```JavaScript
11 | let params = {
12 |     hue: {
13 |         value: 120,
14 |         type: 'range',
15 |         label: 'Hue',
16 |         min: 0,
17 |         max: 360
18 |     }
19 | };
20 | 
21 | // ... init() function omitted
22 | 
23 | function tick() {
24 |     // ... code omitted
25 |     ctx.fillStyle = `hsl(${params.hue.value}, 50%, 50%)`;
26 |     // draw some stuff with the given hue.
27 | }
28 | 
29 | function paramChange(change) {
30 |     // this is optional, see explanation below
31 |     params[change.paramKey].value = change.newValue;
32 | }
33 | 
34 | module.exports = {
35 |     name: 'Params Example',
36 |     init,
37 |     tick,
38 |     paramChange,
39 |     params
40 | };
41 | ```
42 | 
43 | Let's walk through each of the new concepts introduced here:
44 | 
45 | #### `params` object
46 | The `params` object is where we define our user-configurable parameters. Each object will be represented by a UI control in the settings panel of the SKQW user interface. In this example, we want to enable the user to set the hue (colour) of some element in our visualization.
47 |  
48 | The `value`, `type`, and `label` properties are required:
49 | 
50 | - `value` is the actual value of the parameter.
51 | - `type` determines the type of UI control that will be rendered to control this param. Currently only "range" and "boolean" are supported, which will render a slider or a checkbox respectively.
52 | - `label` is the label associated with the control in the UI. This is what the user sees.
53 | 
54 | Additionally, with a "range" type, we may also specify optional `min`, `max`, and `step` properties which control the behaviour of the slider control.
55 | 
56 | #### `paramChange()` function (optional)
57 | This function is called every time the user changes the value of a param in the UI. The argument is an object consisting of two properties:
58 | 
59 | - `paramKey` is the key of the param that was changed. In this case it would be "hue". 
60 | - `newValue` is the new value assigned by the user.
61 | 
62 | In fact, this function is optional. If it is omitted, SKQW will automatically apply the same function as shown above to update the parameter values. It is only necessary to define this function if additional processing is required when a parameter changes.
63 | 
64 | Finally, we need to ensure we export `params` and `paramChange` so that SKQW knows about them.
65 | 


--------------------------------------------------------------------------------
/docs/source/skqw-core-module/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "The skqw-core Module"
 3 | date: 2016-12-12 15:36:33
 4 | ---
 5 | 
 6 | The `skqw-core` module is provided by SKQW and exposes some key functions which are required to create a visualization.
 7 | 
 8 | ## `createCanvas()`
 9 | 
10 | Creates an HTML Canvas element which can then be drawn to - either directly by using `.getContext()`, or by passing it to a graphics library such as Three.js.
11 | 
12 | ```JavaScript
13 | // A simple 2d canvas example
14 | let ctx = createCanvas().getContext('2d');
15 | ctx.strokeStyle = 'red';
16 | ctx.beginPath();
17 | ctx.moveTo(100, 150);
18 | ctx.lineTo(450, 50);
19 | ctx.stroke();
20 | 
21 | // An example using Three.js
22 | let canvas = createCanvas();
23 | let renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
24 | // .. snip
25 | renderer.render(scene, camera);
26 | ```
27 | 
28 | ## `getDimensions()`
29 | 
30 | Returns an object describing the dimensions of the SKQW window.
31 | 
32 | ```JavaScript
33 | const { width, height } = getDimensions();
34 | ```
35 | 
36 | ## `getSample()`
37 | 
38 | Returns an object containing two arrays which represent the latest audio sample from the sound card:
39 | 
40 | * `ts` is the "time series" or waveform of the current audio sample. It consists of 256 numbers.
41 | * `ft` is the "fourier transform" or frequency spectrum of the current audio sample. It consists of 128 numbers.
42 | 
43 | The two arrays provided by `sample` provide the raw information that you will use to form the basis of your visualizations.
44 | 
45 | ```JavaScript
46 | const { ts, ft } = getSample();
47 | 
48 | drawWaveform(ts);
49 | drawFrequencySpectrum(ft);
50 | ```
51 | 
52 | ## `loadScript()`
53 | 
54 | This function is used to load JavaScript files which are *not* CommonJS modules. A typical example is a Three.js shader file.
55 | Scripts loaded with `loadScript()` will be executed in the global scope, and any global variables created within them will thus be available for use in your visualization.
56 | 
57 | ```JavaScript
58 | // CopyShader.js
59 | THREE.CopyShader = {
60 | 
61 | 	// ... shader code snipped
62 | };
63 | ```
64 | .
65 | 
66 | ```JavaScript
67 | // myVisualization.js
68 | 
69 | // assuming Three.js has been loaded and a global `THREE` object has been created.
70 | 
71 | loadScript('./CopyShader.js');
72 | ```


--------------------------------------------------------------------------------
/docs/source/using-three-js/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "Developer Guide: Using Three.js"
 3 | date: 2016-08-26 08:59:02
 4 | ---
 5 | 
 6 | SKQW supports both the 2d and 3d contexts of the HTML Canvas. For working with 3d, it is common to use a library to abstract over the low-level WebGL APIs. One popular 3d library is [Three.js](http://threejs.org/).
 7 | 
 8 | Here is a complete example which recreates the ["creating a scene" tutorial example](http://threejs.org/docs/index.html#Manual/Introduction/Creating_a_scene) from the Three documentation as a SKQW visualization:
 9 | 
10 | ```JavaScript
11 | const {createCanvas, getSample, getDimensions} = require('skqw-core');
12 | // The Three library can be downloaded and saved in the same folder as the visualization script.
13 | const THREE = require('./three');
14 | 
15 | let scene;
16 | let camera;
17 | let renderer;
18 | let cube;
19 | 
20 | function init() {
21 |     const { width, height } = getDimensions();
22 |     scene = new THREE.Scene();
23 |     camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
24 | 
25 |     // create a canvas
26 |     let canvas = createCanvas();
27 |     // and pass it to Three, so Three can use it to render onto
28 |     renderer = new THREE.WebGLRenderer({ canvas });
29 | 
30 |     renderer.setSize( width, height );
31 | 
32 |     let geometry = new THREE.BoxGeometry( 1, 1, 1 );
33 |     let material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
34 |     cube = new THREE.Mesh( geometry, material );
35 |     scene.add( cube );
36 | 
37 |     camera.position.z = 5;
38 | }
39 | 
40 | function tick() {
41 |     cube.rotation.x += 0.01;
42 |     cube.rotation.y += 0.01;
43 |     renderer.render( scene, camera );
44 | }
45 | 
46 | module.exports = {
47 |     name: 'Three.js Demo',
48 |     init,
49 |     tick
50 | };
51 | ```
52 | 
53 | ## Loading External Scripts
54 | 
55 | For more advanced results, you will likely want to load external JavaScript files for things like shaders or effect composers.
56 | 
57 | To do this, you should use the `loadScript()` function from the `skqw-core` module.
58 | 
59 | ```JavaScript
60 | const {createCanvas, getSample, getDimensions, loadScript} = require('skqw-core');
61 | 
62 | // Using loadScript() rather than require() will automatically create the global THREE object.
63 | loadScript('./three.js');
64 | 
65 | // Some external scripts we need for our fancy 3d visualization.
66 | // Saved locally in the same folder as the visualization.
67 | loadScript('./CopyShader.js');
68 | loadScript('./EffectComposer.js');
69 | loadScript('./RGBShiftShader.js');
70 | loadScript('./RenderPass.js');
71 | loadScript('./ShaderPass.js');
72 | 
73 | // ... skip some variable declarations
74 | 
75 | function init() {
76 |     const { width, height } = getDimensions();
77 |     const { ft } = getSample();;
78 | 
79 |     scene = new THREE.Scene();
80 |     camera = new THREE.PerspectiveCamera(100, width / height, 10, 5000);
81 |     camera.position.set(0, 100, 10);
82 |     camera.lookAt(new THREE.Vector3(0, 10, -100));
83 |     let canvas = createCanvas();
84 |     renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
85 |     renderer.setSize(width, height);
86 | 
87 |     scene = new THREE.Scene();
88 | 
89 |     // postprocessing
90 |     composer = new THREE.EffectComposer(renderer);
91 |     composer.addPass(new THREE.RenderPass(scene, camera));
92 | 
93 |     rgbEffect = new THREE.ShaderPass(THREE.RGBShiftShader);
94 |     rgbEffect.uniforms['amount'].value = 0.0015;
95 |     rgbEffect.renderToScreen = true;
96 |     composer.addPass(rgbEffect);
97 | }
98 | ```


--------------------------------------------------------------------------------
/docs/themes/skqw/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/README.md:
--------------------------------------------------------------------------------
 1 | # hexo-theme-chan
 2 | A super simple and elegant theme for [hexo](http://hexo.io). Chan is '禪' in Chinese, which means a lot but presents simply. Less is more. [Preview](http://denjones.github.io/hexo-theme-chan/archives/)
 3 | 
 4 | ## Screenshot
 5 | 
 6 | ![Desktop Screenshot](screenshot.png)
 7 | 
 8 | ![Mobile Screenshot](screenshot.gif)
 9 | 
10 | ## Usage
11 | 
12 | ``` shell
13 | git clone https://github.com/denjones/hexo-theme-chan.git themes/chan
14 | ```
15 | 
16 | And set your theme to `chan` in your site `_config.yml` file.
17 | 
18 | Before deploying your site, you may need to run `hexo clean` to clean the cache:
19 | 
20 | ``` shell
21 | hexo clean
22 | hexo deploy
23 | ```
24 | 
25 | ## Browser
26 | Only support the latest browsers. May work in the older ones but never tested.
27 | 
28 | ## Features
29 | 
30 | feature list:
31 |  - grayscale style
32 |  - responsive design
33 |  - inline gallery photos
34 |  - photoswipe gallery
35 |  - creative commons 4.0 supports
36 |  - customizable sidebar link
37 |  - duoshuo, disqus, jiathis supports
38 |  - languages: en, zh-CN, zh-TW
39 | 
40 | ### Monochrome
41 | 
42 | We use a grayscale style to present photos and articles in desktop view. If you don't like it, you can disable it in the theme [_config.yml](_config.yml) file.
43 | 
44 | ### FancyBox / PhotoSwipe
45 | 
46 | Many people use [FancyBox](https://github.com/fancyapps/fancyBox) in their hexo sites, but the FancyBox project is no longer maintained since 2013. In this theme we use [PhotoSwipe](http://photoswipe.com/) instead of FancyBox, and keep FancyBox tag usable (Did some tricks to the FancyBox tag to use PhotoSwipe), so you don't have to modify your post :).
47 | 
48 | ``` md
49 | {% photoswipe /path/to/image [/path/to/thumbnail] [title] [width] [height] %}
50 | {% fancybox /path/to/image [/path/to/thumbnail] [title] [width] [height] %}
51 | ```
52 | 
53 | To use PhotoSwipe with gallery post, you may also set the caption and the dimension of a photo in the front matter with a `photoInfos` property which is a list of info with the same order as the corresponding photo:
54 | 
55 | ``` yml
56 | title: Gallery Post
57 | date: 2013-12-25 00:16:18
58 | photos:
59 | - /assets/wallpaper-2572384.jpg
60 | - /assets/wallpaper-2311325.jpg
61 | - /assets/wallpaper-878514.jpg
62 | photoInfos:
63 | -
64 |   caption: A Cat
65 |   width: 1920
66 |   height: 1200
67 | -
68 |   caption: A Girl
69 | -
70 |   caption: A City with Long Caption Like This
71 | ```
72 | 
73 | ### Creative Commons
74 | We suggest using [Creative Commons 4.0 International](https://creativecommons.org) to protect your works. Once a cc front matter is set, a CC hint would be shown after the post:
75 | 
76 | ![Creative Commons](cc.png)
77 | 
78 | Take a look at the theme [_config.yml](_config.yml) for more details.
79 | 
80 | ### Language
81 | Currently we support the following languages:
82 |  - en
83 |  - zh-CN
84 |  - zh-TW
85 | 
86 | According to a default language selecting bug in hexo [#1125](https://github.com/hexojs/hexo/issues/1125), you should set an exact language in the site `_config.yml` file rather than leaving it blank, or there may be inconsistence in languages in the view.
87 | 
88 | ## Settings
89 | 
90 | All settings are well documented in the [_config.yml](_config.yml) file, please check it out.
91 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/_config.yml:
--------------------------------------------------------------------------------
  1 | # skqw theme configuration
  2 | 
  3 | # site setting
  4 | rss: /atom.xml
  5 | favicon: "images/favicon.ico"
  6 | 
  7 | # style setting
  8 | monochrome: true
  9 | 
 10 | # view setting
 11 | avatar: https://cn.gravatar.com/avatar/35fef74d731255cd569c2c2b0b9e87e4?s=200
 12 | avatarLink: /about
 13 | maxContentWidth: 800px # set the main content column's max-width property. keep it blank to unlimited the width
 14 | copyright: 'Michael Bromley' # the copyright text in the footer, could be richtext
 15 | 
 16 | # sidebar navigator structure
 17 | # It's a list with item that is also list.
 18 | # The item of first level list means a group of links,
 19 | # and the item of the second level list means exactly a link.
 20 | # A link item is an object whit two properties: 'name' for displaying and 'link' for redirecting.
 21 | # A link starts with http/https would be rendered as a tag with 'target="_blank"' .
 22 | # There are also some special link items representing in string: 'categories', 'tags' and 'archives'
 23 | nav:
 24 |   -
 25 |     -
 26 |       name: 'User Guide'
 27 |     -
 28 |       name: 'Getting Started'
 29 |       url: '/getting-started'
 30 |     -
 31 |       name: 'How To Guides'
 32 |       url: '/how-to'
 33 |   -
 34 |     -
 35 |       name: 'Developer Guide'
 36 |     -
 37 |       name: 'Getting Started'
 38 |       url: '/developer-guide-getting-started'
 39 |     -
 40 |       name: 'Parameters'
 41 |       url: '/parameters'
 42 |     -
 43 |       name: 'Using Three.js'
 44 |       url: '/using-three-js'
 45 |     -
 46 |       name: 'API Reference'
 47 |       url: '/api-reference'
 48 |     -
 49 |       name: 'skqw-core'
 50 |       url: '/skqw-core-module'
 51 |   -
 52 |     -
 53 |       name: 'Links'
 54 |     -
 55 |       name: 'SKQW on Github'
 56 |       url: 'https://github.com/michaelbromley/skqw'
 57 |     -
 58 |       name: '@michlbrmly'
 59 |       url: 'https://twitter.com/michlbrmly'
 60 | 
 61 | 
 62 | # duoshuo shortname
 63 | # refer to http://duoshuo.com
 64 | # If you use disqus then you should set disqus_shortname in your site config and disable duoshuo here.
 65 | # You also need to set 'comments' to true in the front-matter
 66 | #duoshuo: sprabbit
 67 | 
 68 | # jiathis share id
 69 | # refer to http://jiathis.com
 70 | #jiathis: 1589291
 71 | 
 72 | # open graph
 73 | twitter: "@michlbrmly"
 74 | google_plus:
 75 | fb_admins:
 76 | fb_app_id:
 77 | 
 78 | # analytics ids
 79 | google_analytics:
 80 | baidu_statistics:
 81 | 
 82 | # default creative commons
 83 | # There are 6 kinds of combination and place 'none' to disable.
 84 | # - by
 85 | # - by-sa
 86 | # - by-nd
 87 | # - by-nc
 88 | # - by-nc-sa
 89 | # - by-nc-nd
 90 | # - none
 91 | # This setting could be overwritten in the front matter of a post.
 92 | # More details in https://creativecommons.org
 93 | cc: by-sa
 94 | 
 95 | # FancyBox / PhotoSwipe
 96 | # Although it is called fancybox, we use PhotoSwipe instead.
 97 | # Check http://photoswipe.com
 98 | fancybox: true    # enable fancybox/photoswipe rendering
 99 | # photoswipe: true  # the same
100 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/languages/en.yml:
--------------------------------------------------------------------------------
 1 | more: Read More
 2 | category: Category
 3 | tag: Tag
 4 | archive: Archive
 5 | prev: Prev
 6 | next: Next
 7 | cc:
 8 |   hint: This work is licensed under a Creative Commons %s 4.0 International License.
 9 |   by: Attribution
10 |   by-sa: Attribution-ShareAlike
11 |   by-nd: Attribution-NoDerivatives
12 |   by-nc: Attribution-NonCommercial
13 |   by-nc-sa: Attribution-NonCommercial-ShareAlike
14 |   by-nc-nd: Attribution-NonCommercial-NoDerivatives
15 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/article.ejs:
--------------------------------------------------------------------------------
 1 | <article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>">
 2 |   <% if (post.link || post.title){ %>
 3 |     <h1 class="article-header">
 4 |       <%- post.title %>
 5 |     </h1>
 6 |   <% } %>
 7 |   <%- partial('post/gallery') %>
 8 |   <div class="article-info">
 9 |     <%- partial('post/date') %>
10 |     <%- partial('post/category') %>
11 |     <%- partial('post/tag') %>
12 |   </div>
13 |   <div class="article-entry">
14 |     <%- post.content %>
15 |   </div>
16 |   <footer class="article-footer">
17 | 
18 |   </footer>
19 | </article>
20 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/footer.ejs:
--------------------------------------------------------------------------------
1 | <div class="main-footer">
2 |     © <%= new Date().getFullYear() %> <%= theme.copyright %> - Powered by <a href="http://hexo.io" target="_blank">Hexo</a>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/google-analytics.ejs:
--------------------------------------------------------------------------------
 1 | <% if (theme.google_analytics){ %>
 2 |   <!-- Google Analytics -->
 3 |   <script type="text/javascript">
 4 |     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 5 |     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 6 |     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 7 |     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 8 | 
 9 |     ga('create', '<%= theme.google_analytics %>', 'auto');
10 |     ga('send', 'pageview');
11 | 
12 |   </script>
13 |   <!-- End Google Analytics -->
14 | <% } %>
15 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/head.ejs:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 3 | 
 4 | <%
 5 |   var title = page.title;
 6 |   if (is_archive()){
 7 |     title = __('archive');
 8 |     if (is_month()){
 9 |       title += ': ' + page.year + '/' + page.month;
10 |     } else if (is_year()){
11 |       title += ': ' + page.year;
12 |     }
13 |   } else if (is_category()){
14 |     title = __('category') + ': ' + page.category;
15 |   } else if (is_tag()){
16 |     title = __('tag') + ': ' + page.tag;
17 |   }
18 | %>
19 | 
20 | <title>
21 |   <% if (title){ %>
22 |     <%= title %>
23 |   <% } else { %>
24 |     <%= config.title %>
25 |   <% } %>
26 | </title>
27 | 
28 | <%- open_graph({
29 |   image: 'images/screenshot-01.jpg',
30 |   twitter_id: theme.twitter,
31 |   google_plus: theme.google_plus,
32 |   fb_admins: theme.fb_admins,
33 |   fb_app_id: theme.fb_app_id
34 | }) %>
35 | 
36 | <% if (theme.rss){ %>
37 |   <link rel="alternative" href="<%- theme.rss %>" title="<%= config.title %>" type="application/atom+xml">
38 | <% } %>
39 | 
40 | <% if (theme.favicon){ %>
41 |   <link rel="icon" href="<%- theme.favicon %>">
42 | <% } %>
43 | 
44 | <%- css('styles/main') %>
45 | 
46 | <%- partial('google-analytics', {}, {cache: true}) %>
47 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/logo.ejs:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="597" height="197" class="logo" viewBox="0 0 597 197" preserveAspectRatio="xMidYMid meet">
 2 |   <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
 3 |     <g transform="translate(-96.146 -485.097)"  stroke="#4fd6cb" fill="none">
 4 |         <path d="M511.482 492.87v159.604l90.712-159.464z"  />
 5 |         <path d="M590.703 522.98l16-29.564h76.566l-33.485 57.994-58.624 101.54z"  />
 6 |         <path d="M383.643 644.29l87.6-151.727H395.07l-11.116 19.256z"  />
 7 |         <path d="M476.5 620.352l-27.972 48.45h28.686z"  />
 8 |         <path d="M249.643 644.29l87.6-151.727h-87.6z"  />
 9 |         <path d="M250 653.22l52.28-90.554 48.023 89.91z"  />
10 |         <path d="M140.36 601.368l-34.84-60.34 27.974-48.45h68.76z"  stroke-width="1.013" />
11 |         <path d="M384.357 653.22l92.26-159.798v103.012L443.783 653.3z"  />
12 |         <path d="M178.854 543.765l34.838 60.34-27.973 48.45h-68.76z"  stroke-width="1.013" />
13 |     </g>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/mobile-header.ejs:
--------------------------------------------------------------------------------
 1 | <div class="mobile-header">
 2 |   <button class="sidebar-toggle" type="button">
 3 |     <span class="icon-bar"></span>
 4 |     <span class="icon-bar"></span>
 5 |     <span class="icon-bar"></span>
 6 |   </button>
 7 |   <a class="title" href="<%- url_for('/') %>">
 8 |     <%- image_tag('images/logo-line.svg', { 'class': 'mobile-header-logo' }) %>
 9 |   </a>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/pagination.ejs:
--------------------------------------------------------------------------------
1 | <% if (page.total > 1) { %>
2 |   <div class="pagination">
3 |     <%- paginator({
4 |       prev_text: __('prev'),
5 |       next_text: __('next')
6 |     }) %>
7 |   </div>
8 | <% } %>
9 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/photoswipe.ejs:
--------------------------------------------------------------------------------
 1 | <% if (theme.fancybox || theme.photoswipe) { %>
 2 |   <%- css('/PhotoSwipe/photoswipe') %>
 3 |   <%- css('/PhotoSwipe/default-skin/default-skin') %>
 4 | 
 5 |   <!-- Root element of PhotoSwipe. Must have class pswp. -->
 6 |   <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
 7 | 
 8 |     <!-- Background of PhotoSwipe.
 9 |              It's a separate element as animating opacity is faster than rgba(). -->
10 |     <div class="pswp__bg"></div>
11 | 
12 |     <!-- Slides wrapper with overflow:hidden. -->
13 |     <div class="pswp__scroll-wrap">
14 | 
15 |       <!-- Container that holds slides.
16 |                 PhotoSwipe keeps only 3 of them in the DOM to save memory.
17 |                 Don't modify these 3 pswp__item elements, data is added later on. -->
18 |       <div class="pswp__container">
19 |         <div class="pswp__item"></div>
20 |         <div class="pswp__item"></div>
21 |         <div class="pswp__item"></div>
22 |       </div>
23 | 
24 |       <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
25 |       <div class="pswp__ui pswp__ui--hidden">
26 | 
27 |         <div class="pswp__top-bar">
28 | 
29 |           <!--  Controls are self-explanatory. Order can be changed. -->
30 | 
31 |           <div class="pswp__counter"></div>
32 | 
33 |           <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
34 | 
35 |           <button class="pswp__button pswp__button--share" title="Share"></button>
36 | 
37 |           <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
38 | 
39 |           <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
40 | 
41 |           <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
42 |           <!-- element will get class pswp__preloader--active when preloader is running -->
43 |           <div class="pswp__preloader">
44 |             <div class="pswp__preloader__icn">
45 |               <div class="pswp__preloader__cut">
46 |                 <div class="pswp__preloader__donut"></div>
47 |               </div>
48 |             </div>
49 |           </div>
50 |         </div>
51 | 
52 |         <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
53 |           <div class="pswp__share-tooltip"></div>
54 |         </div>
55 | 
56 |         <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
57 | 
58 |         <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
59 | 
60 |         <div class="pswp__caption">
61 |           <div class="pswp__caption__center"></div>
62 |         </div>
63 |       </div>
64 |     </div>
65 |   </div>
66 | 
67 |   <%- js('/PhotoSwipe/photoswipe') %>
68 |   <%- js('/PhotoSwipe/photoswipe-ui-default') %>
69 | <% } %>
70 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post-list.ejs:
--------------------------------------------------------------------------------
 1 | <% var last; %>
 2 | <% page.posts.each(function(post){ %>
 3 |   <% var year = post.date.year(); %>
 4 |   <% if (is_archive()) { %>
 5 |     <% if (last != year){ %>
 6 |       <% if (last != null){ %>
 7 |         </div></section>
 8 |       <% } %>
 9 |       <% last = year; %>
10 |       <section class="archives-wrap">
11 |         <div class="archive-year-wrap">
12 |           <h1><a href="<%- url_for('archives/' + year) %>" class="archive-year"><%= year %></a></h1>
13 |         </div>
14 |         <div class="post-list">
15 |     <% } %>
16 |   <% } else { %>
17 |     <div class="post-list">
18 |   <% } %>
19 | 
20 |     <div class="post-list-item article">
21 |       <h3 class="article-header">
22 |         <%- partial('_partials/post/title', {post: post}) %>
23 |       </h3>
24 |       <%- partial('post/gallery', {post: post}) %>
25 |       <div class="article-info">
26 |         <a href="<%- url_for(post.path) %>"><%- partial('_partials/post/date', {post: post}) %></a>
27 |         <%- partial('_partials/post/category', {post: post}) %>
28 |         <%- partial('_partials/post/tag', {post: post}) %>
29 |       </div>
30 |       <div class="article-entry">
31 |         <% if (post.excerpt) { %>
32 |           <%- post.excerpt %>
33 |           <p>
34 |             <a href="<%- url_for(post.path) %>">
35 |               <%= __('more') %>
36 |             </a>
37 |           </p>
38 |         <% } else { %>
39 |           <%- post.content %>
40 |         <% } %>
41 |       </div>
42 |     </div>
43 | 
44 |   <% if (!is_archive()) { %>
45 |     </div>
46 |   <% } %>
47 | <% }) %>
48 | 
49 | <%- partial('_partials/pagination') %>
50 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post/category.ejs:
--------------------------------------------------------------------------------
1 | <% if (post.categories && post.categories.length){ %>
2 | 	<span class="article-category tagcloud">
3 | 	<%- list_categories(post.categories, {
4 | 	  show_count: false,
5 | 	  class: 'article-category'
6 | 	}) %>
7 | 	</span>
8 | <% } %>
9 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post/cc.ejs:
--------------------------------------------------------------------------------
 1 | <%
 2 |   var cc = post.cc || theme.cc;
 3 |   var language = config.language;
 4 |   language = language && language.length ? language[0] : language;
 5 |   if (cc && cc !== 'none') {
 6 |     var ccList = cc.split('-');
 7 | %>
 8 |   <div class="cc">
 9 |     <a href="http://creativecommons.org/licenses/<%= cc %>/4.0/deed.<%= language && language.replace('-', '_') || 'en' %>" target="_blank" title="<%- __('cc.' + cc) %>">
10 |       <img src="<%- url_for('/images/cc/cc.png') %>">
11 |       <%
12 |         ccList.forEach(function(item) {
13 |           item = item.toLowerCase();
14 |           if (item === 'by') {
15 |       %>
16 |           <img src="<%- url_for('/images/cc/by.png') %>">
17 |         <% } else if (item === 'nc') { %>
18 |           <img src="<%- url_for('/images/cc/nc.png') %>">
19 |         <% } else if (item === 'nd') { %>
20 |           <img src="<%- url_for('/images/cc/nd.png') %>">
21 |         <% } else if (item === 'sa') { %>
22 |           <img src="<%- url_for('/images/cc/sa.png') %>">
23 |       <% }}); %>
24 |       <span>
25 |         <%- _p('cc.hint', __('cc.' + cc)) %>
26 |       </span>
27 |     </a>
28 |   </div>
29 | <% } %>
30 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post/date.ejs:
--------------------------------------------------------------------------------
1 | <span class="article-date">
2 |   Updated: <%= date(post.updated, config.date_format) %>
3 | </span>
4 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post/disqus.ejs:
--------------------------------------------------------------------------------
 1 | <% if (post.comments && config.disqus_shortname){ %>
 2 | <section id="comments">
 3 |   <div id="disqus_thread"></div>
 4 |     <script type="text/javascript">
 5 |     /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
 6 |     var disqus_shortname = '<%= config.disqus_shortname %>'; // required: replace example with your forum shortname
 7 | 
 8 |     /* * * DON'T EDIT BELOW THIS LINE * * */
 9 |     (function() {
10 |       var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
11 |       dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
12 |       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
13 |     })();
14 |   </script>
15 |   <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
16 | </section>
17 | <% } %>
18 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post/duoshuo.ejs:
--------------------------------------------------------------------------------
 1 | <% if (theme.duoshuo && post.comments) { %>
 2 |   <%- css('http://static.duoshuo.com/styles/embed.default.css?349d9313.css') %>
 3 |   <!-- 多说评论框 start -->
 4 |   <div class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= url_for(post.path) %>"></div>
 5 |   <!-- 多说评论框 end -->
 6 |   <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
 7 |   <script type="text/javascript">
 8 |     var duoshuoQuery = {
 9 |       short_name: "<%= theme.duoshuo %>"
10 |     };
11 |     (function() {
12 |       var ds = document.createElement('script');
13 |       ds.type = 'text/javascript';
14 |       ds.async = true;
15 |       ds.src = (document.location.protocol == 'https:'
16 |         ? 'https:'
17 |         : 'http:') + '//static.duoshuo.com/embed.js';
18 |       ds.charset = 'UTF-8';
19 |       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
20 |     })();
21 |   </script>
22 |   <!-- 多说公共JS代码 end -->
23 | <% } %>
24 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post/gallery.ejs:
--------------------------------------------------------------------------------
 1 | <% if (post.photos && post.photos.length){ %>
 2 |   <div class="article-gallery article-gallery-photos" itemscope itemtype="http://schema.org/ImageGallery">
 3 |     <% post.photos.forEach(function(photo, i){
 4 |         var photoInfo = post.photoInfos && post.photoInfos[i];
 5 |       %>
 6 |       <figure class="article-gallery-img" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
 7 |         <a href="<%- url_for(photo) %>"
 8 |           itemprop="contentUrl"
 9 |           rel="gallery_<%= post._id %>"
10 |           title="<%= photoInfo ? photoInfo.caption : '' %>"
11 |           <% if (photoInfo && photoInfo.width && photoInfo.height) { %>
12 |             data-size="<%= photoInfo.width + 'x' + photoInfo.height %>"
13 |           <% } %>
14 |           style="background-image: url(<%- url_for(photo) %>)">
15 |           <img src="<%- url_for(photo) %>" itemprop="thumbnail" alt="<%= photoInfo ? photoInfo.caption : '' %>"/>
16 |         </a>
17 |         <figcaption itemprop="caption description"><%= photoInfo ? photoInfo.caption : '' %></figcaption>
18 |       </figure>
19 |     <% }) %>
20 |   </div>
21 | <% } %>
22 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post/tag.ejs:
--------------------------------------------------------------------------------
1 | <% if (post.tags && post.tags.length) { %>
2 | 	<span class="article-tag tagcloud">
3 | 		<%- list_tags(post.tags, {
4 | 		    show_count: false,
5 | 		    class: 'article-tag'
6 | 		  }) %>
7 | 	</span>
8 | <% } %>
9 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/post/title.ejs:
--------------------------------------------------------------------------------
1 | <a href="<%- url_for(post.link || post.path) %>" <%= post.link ? 'target="_blank"' : '' %>>
2 |   <%= post.title %>
3 | </a>
4 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/_partials/sidebar.ejs:
--------------------------------------------------------------------------------
 1 | <div class="sidebar">
 2 |   <div class="header">
 3 |     <a href="<%- url_for('/') %>">
 4 |       <%- partial('_partials/logo', {}, {cache: true}) %>
 5 |     </a>
 6 |     <div class="info">
 7 |       <div class="content">
 8 |         <% if (config.description) { %>
 9 |         <div class="description"><%= config.description %></div>
10 |         <% } %>
11 |       </div>
12 |     </div>
13 |   </div>
14 |   <div class="body">
15 |     <% if (theme.nav && theme.nav.length) { %>
16 |     <% theme.nav.forEach(function(list) { %>
17 |     <ul class="nav">
18 |       <% list.forEach(function(item){ %>
19 |       <% if (item === 'categories') { %>
20 |       <li class="category-list-container">
21 |         <a href="javascript:;"><%- __('category') %></a>
22 |         <%- list_categories({depth: -1}) %>
23 |       </li>
24 |       <% } else if (item === 'tags') { %>
25 |       <li class="tag-list-container">
26 |         <a href="javascript:;"><%- __('tag') %></a>
27 |         <%- list_tags({}) %>
28 |       </li>
29 |       <% } else if (item === 'archives') { %>
30 |       <li class="archive-list-container">
31 |         <a href="javascript:;"><%- __('archive') %></a>
32 |         <%- list_archives({type: 'yearly'}) %>
33 |       </li>
34 |       <% } else { %>
35 | 
36 |       <% if (item.hasOwnProperty('url')) { %>
37 |       <li>
38 |         <%- link_to(item.url, item.name, {external: item.url.indexOf('http') === 0}) %>
39 |       </li>
40 |       <% } else { %>
41 |       <li class="section-title">
42 |         <span><%- item.name %></span>
43 |       </li>
44 |       <% } %>
45 |       <% } %>
46 |       <% }) %>
47 |     </ul>
48 |     <% }); %>
49 |     <% } %>
50 |   </div>
51 | </div>
52 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/archive.ejs:
--------------------------------------------------------------------------------
1 | <%- partial('_partials/post-list') %>
2 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/category.ejs:
--------------------------------------------------------------------------------
1 | <h1><%= page.category %></h1>
2 | <%- partial('_partials/post-list') %>
3 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/index.ejs:
--------------------------------------------------------------------------------
 1 | <div class="header-logo">
 2 |   <%- partial('_partials/logo', {}, {cache: true}) %>
 3 |   <div class="version">beta</div>
 4 | </div>
 5 | <div class="hero">
 6 |   <h3>A cross-platform audio visualizer built on Electron</h3>
 7 |   <a class="download-button" href="https://github.com/michaelbromley/skqw/releases">
 8 |     <%- image_tag('images/windows8.svg') %>
 9 |     <%- image_tag('images/apple.svg') %>
10 |     Download for Windows & macOS
11 |   </a>
12 | </div>
13 | 
14 | <div class="yt-video">
15 | <iframe width="640" height="380" src="https://www.youtube-nocookie.com/embed/eqAiEReB2Kc?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
16 | </div>
17 | 
18 | <p>SKQW (pronounced "skew") allows you to visualize the audio output of you computer's sound card.
19 | It is inspired by my love of the old Winamp plugins like Milkdrop and Geiss.
20 | Visualizations are written in JavaScript / GLSL and are rendered with HTML Canvas.</p>
21 | 
22 | <h3>Blog post: <a href="http://www.michaelbromley.co.uk/blog/541/an-early-look-at-skqw-javascript-audio-visualizer">An Early Look at SKQW: JavaScript Audio Visualizer</a></h3>
23 | 
24 | <div class="yt-video">
25 | <iframe width="640" height="380" src="https://www.youtube-nocookie.com/embed/OD636XmkRQ4?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
26 | </div>
27 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/layout.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <%- partial('_partials/head') %>
 5 | </head>
 6 | <body
 7 |         <% if (theme.monochrome) { %>
 8 |         class="monochrome"
 9 |         <% } %>
10 | >
11 | <%- partial('_partials/mobile-header', {}, {cache: true}) %>
12 | <div class="main-container">
13 |   <%- partial('_partials/sidebar', {}, {cache: true}) %>
14 |   <div class="main-content">
15 |     <% if (theme.maxContentWidth) { %>
16 |     <div style="max-width: <%= theme.maxContentWidth %>">
17 |       <% } %>
18 |       <%- body %>
19 |       <%- partial('_partials/footer', {}, {cache: true}) %>
20 |       <% if (theme.maxContentWidth) { %>
21 |     </div>
22 |     <% } %>
23 |   </div>
24 | </div>
25 | <%- js('scripts/main') %>
26 | </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/post.ejs:
--------------------------------------------------------------------------------
1 | <%- partial('_partials/article', {post: page}) %>
2 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/layout/tag.ejs:
--------------------------------------------------------------------------------
1 | <h1><%= page.tag %></h1>
2 | <%- partial('_partials/post-list') %>
3 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hexo-theme-chan",
 3 |   "version": "0.1.3",
 4 |   "description": "A simple theme for hexo",
 5 |   "license": "MIT",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/denjones/hexo-theme-chan.git"
 9 |   },
10 |   "devDependencies": {},
11 |   "dependencies": {}
12 | }
13 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/images/apple.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generated by IcoMoon.io -->
3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
5 | <path fill="#000" d="M24.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM20.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z"></path>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/docs/themes/skqw/source/images/favicon.ico


--------------------------------------------------------------------------------
/docs/themes/skqw/source/images/github.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generated by IcoMoon.io -->
3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
5 | <path fill="#000" d="M16 0.395c-8.836 0-16 7.163-16 16 0 7.069 4.585 13.067 10.942 15.182 0.8 0.148 1.094-0.347 1.094-0.77 0-0.381-0.015-1.642-0.022-2.979-4.452 0.968-5.391-1.888-5.391-1.888-0.728-1.849-1.776-2.341-1.776-2.341-1.452-0.993 0.11-0.973 0.11-0.973 1.606 0.113 2.452 1.649 2.452 1.649 1.427 2.446 3.743 1.739 4.656 1.33 0.143-1.034 0.558-1.74 1.016-2.14-3.554-0.404-7.29-1.777-7.29-7.907 0-1.747 0.625-3.174 1.649-4.295-0.166-0.403-0.714-2.030 0.155-4.234 0 0 1.344-0.43 4.401 1.64 1.276-0.355 2.645-0.532 4.005-0.539 1.359 0.006 2.729 0.184 4.008 0.539 3.054-2.070 4.395-1.64 4.395-1.64 0.871 2.204 0.323 3.831 0.157 4.234 1.026 1.12 1.647 2.548 1.647 4.295 0 6.145-3.743 7.498-7.306 7.895 0.574 0.497 1.085 1.47 1.085 2.963 0 2.141-0.019 3.864-0.019 4.391 0 0.426 0.288 0.925 1.099 0.768 6.354-2.118 10.933-8.113 10.933-15.18 0-8.837-7.164-16-16-16z"></path>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/images/how-to-enable-stereo-mix-windows.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/docs/themes/skqw/source/images/how-to-enable-stereo-mix-windows.gif


--------------------------------------------------------------------------------
/docs/themes/skqw/source/images/logo-line.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="597" height="197"><rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
 2 |     <g transform="translate(-96.146 -485.097)"  stroke="#4fd6cb" fill="none">
 3 |         <path d="M511.482 492.87v159.604l90.712-159.464z"  />
 4 |         <path d="M590.703 522.98l16-29.564h76.566l-33.485 57.994-58.624 101.54z"  />
 5 |         <path d="M383.643 644.29l87.6-151.727H395.07l-11.116 19.256z"  />
 6 |         <path d="M476.5 620.352l-27.972 48.45h28.686z"  />
 7 |         <path d="M249.643 644.29l87.6-151.727h-87.6z"  />
 8 |         <path d="M250 653.22l52.28-90.554 48.023 89.91z"  />
 9 |         <path d="M140.36 601.368l-34.84-60.34 27.974-48.45h68.76z"  stroke-width="1.013" />
10 |         <path d="M384.357 653.22l92.26-159.798v103.012L443.783 653.3z"  />
11 |         <path d="M178.854 543.765l34.838 60.34-27.973 48.45h-68.76z"  stroke-width="1.013" />
12 |     </g>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/images/screenshot-01.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/docs/themes/skqw/source/images/screenshot-01.jpg


--------------------------------------------------------------------------------
/docs/themes/skqw/source/images/windows8.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generated by IcoMoon.io -->
3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32">
5 | <path fill="#000" d="M0.011 16l-0.011-9.752 12-1.63v11.382zM14 4.328l15.996-2.328v14h-15.996zM30 18l-0.004 14-15.996-2.25v-11.75zM12 29.495l-11.99-1.644-0.001-9.851h11.991z"></path>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/scripts/main.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Toggle sidebar on mobile
 3 |  */
 4 | document.querySelector('.sidebar-toggle').addEventListener('click', function() {
 5 |     var sidebar = document.querySelector('.sidebar');
 6 |     if (sidebar.classList.contains('in')) {
 7 |         sidebar.classList.remove('in');
 8 |     } else {
 9 |         sidebar.classList.add('in');
10 |     }
11 | });


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/archive.styl:
--------------------------------------------------------------------------------
1 | .archives-wrap {
2 |   a.archive-year {
3 |     color: color-default;
4 |     &:hover {
5 |       color: gray;
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/article.styl:
--------------------------------------------------------------------------------
  1 | .article {
  2 |   .article-header {
  3 |     margin-bottom: 10px;
  4 |     a {
  5 |       color: #30634C;
  6 |       &:hover {
  7 |         color: #388151;
  8 |       }
  9 |     }
 10 |   }
 11 |   .article-info {
 12 |     font-size: 14px;
 13 |     color: gray;
 14 |     margin-bottom: 1em;
 15 |     .article-date {
 16 |       margin-right: 0.5em;
 17 |       color: gray;
 18 |     }
 19 |     .article-tag,
 20 |     .article-category {
 21 |       ul {
 22 |         display: inline;
 23 |         padding: 0;
 24 |         margin: 0 -1px;
 25 |       }
 26 |       li {
 27 |         display: inline;
 28 |         padding: 0;
 29 |       }
 30 |       a {
 31 |         margin: 0 3px;
 32 |       }
 33 |       .article-tag-list-item a {
 34 |         color: gray;
 35 |         &:hover {
 36 |           color: color-link-hover;
 37 |         }
 38 |       }
 39 |     }
 40 |   }
 41 |   .article-entry {
 42 |     font-size: 16px;
 43 |     line-height: line-height;
 44 |     text-align: justify;
 45 | 
 46 |     h2 {
 47 |       border-bottom: 1px solid #c0e2c0;
 48 |       margin-top: 50px;
 49 |       padding-bottom: 12px;
 50 |     }
 51 | 
 52 |     code {
 53 |       background-color: #f1f1f1;
 54 |       border-radius: 2px;
 55 |     }
 56 | 
 57 |     blockquote {
 58 |       background:#f9f9f9;
 59 |       border-left: 5px solid lightgray;
 60 |       margin: 0 0 1.5em 0px;
 61 |       padding: .5em 2em;
 62 |       font-family: font-serif;
 63 |       font-size: 0.9em;
 64 |       &.left {
 65 |         float: left;
 66 |         margin-right: 1.5em;
 67 |       }
 68 |       &.right {
 69 |         float: right;
 70 |         margin-left: 1.5em;
 71 |       }
 72 |       cite {
 73 |         margin-left: 0.5em;
 74 |       }
 75 |     }
 76 |     & > table {
 77 |       display: block;
 78 |       max-width: 100%;
 79 |       overflow-x: auto;
 80 |       thead > tr > th,
 81 |       tbody > tr > th,
 82 |       tfoot > tr > th,
 83 |       thead > tr > td,
 84 |       tbody > tr > td,
 85 |       tfoot > tr > td {
 86 |         white-space: nowrap;
 87 |         padding: 0.4em 0.8em;
 88 |         border-bottom: lightgray solid 1px;
 89 |       }
 90 |     }
 91 | 
 92 |     figure.article-gallery-img {
 93 |       margin-left: 0;
 94 |       margin-right: 0;
 95 |       a {
 96 |         display: inline-block;
 97 |       }
 98 |       figcaption {
 99 |         display: none;
100 |       }
101 |     }
102 |   }
103 | 
104 |   img {
105 |     max-width: 100%;
106 |   }
107 | 
108 |   .article-gallery {
109 |     figure.article-gallery-img {
110 |       margin-left: 0;
111 |       margin-right: 0;
112 |       display: inline-block;
113 |       vertical-align: top;
114 |       overflow: hidden;
115 |       width: 160px;
116 |       a {
117 |         text-align: center;
118 |         display: block;
119 |         width: 160px;
120 |         height: 160px;
121 |         overflow: hidden;
122 |         background-size: cover;
123 |         background-position: center;
124 |         img {
125 |           visibility: hidden;
126 |           max-width: 160px;
127 |           max-height: 160px;
128 |         }
129 |       }
130 |       figcaption {
131 |         word-wrap: normal;
132 |         word-break: keep-all;
133 |         white-space: nowrap;
134 |         text-overflow: ellipsis;
135 |         overflow: hidden;
136 |       }
137 |     }
138 |   }
139 | 
140 |   .article-footer {
141 |     margin-top: 30px;
142 |     .cc {
143 |       margin-bottom: 20px;
144 |       img {
145 |         display: inline-block;
146 |         height: 1em;
147 |         vertical-align: bottom;
148 |       }
149 |       span {
150 |         color: gray;
151 |         font-size: 0.8em;
152 |         margin-left: 0.5em;
153 |         vertical-align: bottom;
154 |       }
155 |     }
156 |   }
157 | }
158 | 
159 | @media mq-mobile {
160 |   .article {
161 |     .article-entry {
162 |       .highlight,
163 |       .gist {
164 |         max-width: 100%;
165 |         margin: 0 !important;
166 |       }
167 |     }
168 |     .article-gallery {
169 |       margin-bottom: 10px;
170 |       figure.article-gallery-img {
171 |         margin-bottom: 0.2em;
172 |         margin-top: 0.2em;
173 |         width: 120px;
174 |         a {
175 |           width: 120px;
176 |           height: 120px;
177 |           img {
178 |             max-width: 120px;
179 |             max-height: 120px;
180 |           }
181 |         }
182 |         figcaption {
183 |           display: none;
184 |         }
185 |       }
186 |     }
187 |   }
188 | }
189 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/footer.styl:
--------------------------------------------------------------------------------
1 | .main-footer {
2 |   font-size: 13px;
3 |   color: gray;
4 | }
5 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/highlight.styl:
--------------------------------------------------------------------------------
  1 | // https://github.com/chriskempson/tomorrow-theme
  2 | highlight-background = #f5f5f5
  3 | highlight-current-line = #efefef
  4 | highlight-selection = #d6d6d6
  5 | highlight-foreground = #4d4d4c
  6 | highlight-comment = #8e908c
  7 | highlight-red = #c82829
  8 | highlight-orange = #f5871f
  9 | highlight-yellow = #eab700
 10 | highlight-green = #718c00
 11 | highlight-aqua = #3e999f
 12 | highlight-blue = #4271ae
 13 | highlight-purple = #8959a8
 14 | 
 15 | $code-block
 16 |   background: highlight-background
 17 |   margin: 0 article-padding * 2 * -1
 18 |   padding: 15px article-padding
 19 |   border-style: solid
 20 |   border-color: color-border
 21 |   border-width: 0
 22 |   overflow: auto
 23 |   color: highlight-foreground
 24 |   line-height: font-size * line-height
 25 | 
 26 | $line-numbers
 27 |   color: #666
 28 |   font-size: 0.85em
 29 | 
 30 | .article-entry
 31 |   pre, code
 32 |     font-family: font-mono
 33 |   code
 34 |     background: color-background
 35 |     text-shadow: 0 1px #fff
 36 |     padding: 0 0.3em
 37 |   pre
 38 |     @extend $code-block
 39 |     code
 40 |       background: none
 41 |       text-shadow: none
 42 |       padding: 0
 43 |   .highlight
 44 |     @extend $code-block
 45 |     pre
 46 |       border: none
 47 |       margin: 0
 48 |       padding: 0
 49 |     table
 50 |       margin: 0
 51 |       width: auto
 52 |     td
 53 |       border: none
 54 |       padding: 0
 55 |     figcaption
 56 |       clearfix()
 57 |       font-size: 0.85em
 58 |       color: highlight-comment
 59 |       line-height: 1em
 60 |       margin-bottom: 1em
 61 |       a
 62 |         float: right
 63 |     .gutter pre
 64 |       @extend $line-numbers
 65 |       text-align: right
 66 |       padding-right: 20px
 67 |     .line
 68 |       height: font-size * line-height
 69 |   .gist
 70 |     margin: 0 article-padding * -1
 71 |     border-style: solid
 72 |     border-color: color-border
 73 |     border-width: 1px 0
 74 |     background: highlight-background
 75 |     padding: 15px article-padding 15px 0
 76 |     .gist-file
 77 |       border: none
 78 |       font-family: font-mono
 79 |       margin: 0
 80 |       .gist-data
 81 |         background: none
 82 |         border: none
 83 |         .line-numbers
 84 |           @extend $line-numbers
 85 |           background: none
 86 |           border: none
 87 |           padding: 0 20px 0 0
 88 |         .line-data
 89 |           padding: 0 !important
 90 |       .highlight
 91 |         margin: 0
 92 |         padding: 0
 93 |         border: none
 94 |       .gist-meta
 95 |         background: highlight-background
 96 |         color: highlight-comment
 97 |         font: 0.85em font-sans
 98 |         text-shadow: 0 0
 99 |         padding: 0
100 |         margin-top: 1em
101 |         margin-left: article-padding
102 |         a
103 |           color: color-link
104 |           font-weight: normal
105 |           &:hover
106 |             text-decoration: underline
107 | 
108 | pre
109 |   .comment
110 |   .title
111 |     color: highlight-comment
112 |   .variable
113 |   .attribute
114 |   .tag
115 |   .regexp
116 |   .ruby .constant
117 |   .xml .tag .title
118 |   .xml .pi
119 |   .xml .doctype
120 |   .html .doctype
121 |   .css .id
122 |   .css .class
123 |   .css .pseudo
124 |     color: highlight-red
125 |   .number
126 |   .preprocessor
127 |   .built_in
128 |   .literal
129 |   .params
130 |   .constant
131 |     color: highlight-orange
132 |   .class
133 |   .ruby .class .title
134 |   .css .rules .attribute
135 |     color: highlight-green
136 |   .string
137 |   .value
138 |   .inheritance
139 |   .header
140 |   .ruby .symbol
141 |   .xml .cdata
142 |     color: highlight-green
143 |   .css .hexcolor
144 |     color: highlight-aqua
145 |   .function
146 |   .python .decorator
147 |   .python .title
148 |   .ruby .function .title
149 |   .ruby .title .keyword
150 |   .perl .sub
151 |   .javascript .title
152 |   .coffeescript .title
153 |     color: highlight-blue
154 |   .keyword
155 |   .javascript .function
156 |     color: highlight-purple
157 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/index.styl:
--------------------------------------------------------------------------------
 1 | 
 2 | .header-logo {
 3 |   text-align: center;
 4 |   svg {
 5 |     width: 100%;
 6 |     height auto;
 7 |     max-width: 600px;
 8 |     delay = 0s;
 9 |     for i in (1..9) {
10 |       path:nth-child({i}) {
11 |         animation-delay: delay;
12 |         animation-duration: 3s;
13 |         animation-name: cycle;
14 |         animation-iteration-count: infinite;
15 |         animation-direction: alternate;
16 |         animation-fill-mode: both;
17 |       }
18 |       delay += .2;
19 |     }
20 |   }
21 |   .version {
22 |     font-size: 24px;
23 |     text-transform: uppercase;
24 |     color: #96cada;
25 |     margin-top: -30px;
26 |     text-align: center;
27 |     letter-spacing: 1.5em;
28 |   }
29 | }
30 | 
31 | .hero {
32 |   text-align center;
33 |   padding-bottom 50px
34 |   padding-bottom 50px
35 |   margin-bottom: 50px;
36 |   color: #19653d;
37 |   border-bottom 1px solid #a5ffc7
38 | 
39 | 
40 |   h3 {
41 |     font-weight: normal;
42 |     letter-spacing: 0.05em;
43 |     font-size: 1.5em;
44 |   }
45 | 
46 |   .download-button {
47 |     display: inline-flex;
48 |     align-items: center;
49 |     cursor: pointer;
50 |     color: #19653d;
51 |     background-color: #b3f7ff;
52 |     box-shadow: 0px 1px 5px -1px rgba(0,0,0,0.44);
53 |     border-radius: 3px;
54 |     padding: 10px 20px;
55 |     transition: background 0.3s;
56 |     &:hover {
57 |       background-color: #e0f6ff;
58 |     }
59 |     > * {
60 |       margin: 0 5px;
61 |     }
62 |       > img {
63 |         opacity: 0.1;
64 |       }
65 |   }
66 | }
67 | 
68 | .yt-video {
69 |   text-align center;
70 | }
71 | 
72 | @keyframes cycle {
73 |   0% {
74 |     fill: rgba(62, 231, 191, 0.3);
75 |   }
76 |   50% {
77 |     fill: rgba(62, 231, 255, 0.3);
78 |   }
79 |   100% {
80 |     fill: rgba(0, 169, 255, 0.3);
81 |   }
82 | }


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/layout.styl:
--------------------------------------------------------------------------------
 1 | // main layout
 2 | 
 3 | html, body {
 4 |   position: absolute;
 5 |   width: 100%;
 6 |   height: 100%;
 7 |   font-family: font-sans;
 8 |   color: #333;
 9 | }
10 | 
11 | .main-container {
12 |   position: absolute;
13 |   top: 0;
14 |   bottom: 0;
15 |   left: 0;
16 |   right: 0;
17 |   width: 100%;
18 |   height: 100%;
19 | }
20 | 
21 | .main-content {
22 |   position: absolute;
23 |   top: 0;
24 |   right: 0;
25 |   left: 400px;
26 |   bottom: 0;
27 |   height: 100%;
28 |   padding: 20px 40px 0;
29 |   overflow: auto;
30 |   word-wrap: break-word;
31 |   //word-break: break-all;
32 | }
33 | 
34 | .main-footer {
35 |   padding: 20px 0;
36 | }
37 | 
38 | @media mq-mobile {
39 |   .main-container {
40 |     top: 45px;
41 |     left: 0px;
42 |     bottom: 0;
43 |     height: auto;
44 |   }
45 |   .main-content {
46 |     left: 0;
47 |     bottom: 0;
48 |     height: auto;
49 |     padding: 10px 10px;
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/main.styl:
--------------------------------------------------------------------------------
 1 | @import "libs/normalize";
 2 | @import "variables";
 3 | 
 4 | * {
 5 |   box-sizing: border-box;
 6 | }
 7 | 
 8 | a {
 9 |   color: #07c886;
10 |   text-decoration: none;
11 |   transition-duration: 0.2s;
12 |   transition-timing-function: ease-in-out;
13 |   &:hover {
14 |     color: #38d43e;
15 |   }
16 | }
17 | 
18 | @import "layout";
19 | @import "index";
20 | @import "footer";
21 | @import "sidebar";
22 | @import "article";
23 | @import "post-list";
24 | @import "monochrome";
25 | @import "highlight";
26 | @import "pagination";
27 | @import "archive";
28 | @import "mobile-header";
29 | @import "third-party";
30 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/mobile-header.styl:
--------------------------------------------------------------------------------
 1 | .mobile-header {
 2 |   display: none;
 3 | }
 4 | 
 5 | .mobile-header-logo {
 6 |   max-height: 38px;
 7 | }
 8 | 
 9 | @media mq-mobile {
10 |   .mobile-header {
11 |     display: block;
12 |     height: 45px;
13 |     color: white;
14 |     text-align: right;
15 |     background-color: color-default;
16 |     padding: 5px 10px;
17 |     .title {
18 |       font-size: 32px;
19 |       line-height: 32px;
20 |       vertical-align: middle;
21 |       color: white;
22 |       &:hover {
23 |         color: color-link-sidebar;
24 |       }
25 |     }
26 | 
27 |     .sidebar-toggle {
28 |     	position: relative;
29 |     	float: left;
30 |     	padding: 9px 5px;
31 |     	margin-top: 0px;
32 |     	margin-right: 15px;
33 |     	margin-bottom: 0px;
34 |     	background-color: transparent;
35 |     	background-image: none;
36 |     	border: 1px solid transparent;
37 |     	border-radius: 4px;
38 |     }
39 |     .sidebar-toggle:focus {
40 |     	outline:0;
41 |     }
42 |     .sidebar-toggle .icon-bar {
43 |     	display: block;
44 |     	width: 22px;
45 |     	height: 2px;
46 |     	border-radius: 1px;
47 |       background-color: white;
48 |     }
49 |     .sidebar-toggle .icon-bar+.icon-bar {
50 |     	margin-top:4px;
51 |     }
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/monochrome.styl:
--------------------------------------------------------------------------------
 1 | // only work with wide screen
 2 | 
 3 | @media mq-normal {
 4 |   body.monochrome .main-container {
 5 |     .article,
 6 |     .sidebar img {
 7 |      /* -webkit-filter: grayscale(60%);
 8 |       -moz-filter: grayscale(60%);
 9 |       -ms-filter: grayscale(60%);
10 |       -o-filter: grayscale(60%);
11 |       filter: grayscale(60%);
12 |       transition-duration: 0.4s;
13 |       transition-property: filter, -webkit-filter, -moz-filter, -ms-filter, -o-filter;
14 | 
15 |       &:hover {
16 |         -webkit-filter: grayscale(0%);
17 |         -moz-filter: grayscale(0%);
18 |         -ms-filter: grayscale(0%);
19 |         -o-filter: grayscale(0%);
20 |         filter: grayscale(0%);
21 |       }*/
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/pagination.styl:
--------------------------------------------------------------------------------
1 | .pagination {
2 |   margin-bottom: 20px;
3 |   & > * {
4 |     margin: 0 5px;
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/post-list.styl:
--------------------------------------------------------------------------------
 1 | .post-list {
 2 |   position: relative;
 3 |   padding-left: 0;
 4 |   .post-list-item {
 5 |     padding-left: 20px;
 6 |     margin-bottom: 40px;
 7 |     list-style: none;
 8 |     border-left: 5px solid lightgray;
 9 |   }
10 |   .article-info {
11 |     font-size: 13px;
12 |   }
13 |   .article-entry {
14 |     font-size: 14px;
15 |   }
16 | }
17 | 
18 | @media mq-mobile {
19 |   .post-list {
20 |     .post-list-item {
21 |       padding-left: 8px;
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/sidebar.styl:
--------------------------------------------------------------------------------
  1 | .sidebar {
  2 |   position: absolute;
  3 |   top: 0;
  4 |   left: 0;
  5 |   bottom: 0;
  6 |   width: 400px;
  7 |   height: 100%;
  8 |   overflow: hidden;
  9 |   background-color: #333;
 10 |   color: white;
 11 |   text-align: right;
 12 | 
 13 |   svg.logo {
 14 |     width: 200px;
 15 |     height 65px;
 16 |     margin: 20px 20px 0 0;
 17 |     path {
 18 |       fill: rgba(0,0,0,0);
 19 |       stroke: #46beb4;
 20 |       transition: fill 1.2s, stroke 0.5s;
 21 |     }
 22 |     &:hover path {
 23 |       fill: rgba(65, 238, 155, 0.1);
 24 |       stroke: #00fff3;
 25 |     }
 26 |   }
 27 | 
 28 |   .title {
 29 |     margin-bottom: 0px;
 30 |     a {
 31 |       color: white;
 32 |       &:hover {
 33 |         color: color-link-sidebar;
 34 |       }
 35 |     }
 36 |   }
 37 | 
 38 |   .subtitle {
 39 |     font-size: 14px;
 40 |     margin-top: 5px
 41 |     margin-bottom: 10px;
 42 |   }
 43 | 
 44 |   .info {
 45 |     display: table;
 46 |     width: 100%;
 47 |     margin-top: 20px;
 48 |     & > * {
 49 |       display: table-cell;
 50 |       vertical-align: bottom;
 51 |     }
 52 |     .content {
 53 |       padding-left: 10px;
 54 |     }
 55 |   }
 56 | 
 57 |   .author {
 58 |     margin-top: 0.5em;
 59 |   }
 60 | 
 61 |   .description {
 62 |     font-size: 14px;
 63 |   }
 64 | 
 65 |   .nav {
 66 |     padding-left: 0;
 67 |     & > li {
 68 |       list-style: square;
 69 |       margin-left: 0;
 70 |       & > a {
 71 |         display: block;
 72 |         padding: 5px 25px;
 73 |         color: color-link-sidebar;
 74 |         border-right: 5px solid transparent;
 75 |         &:hover {
 76 |           color: #07c886;
 77 |         }
 78 |       }
 79 | 
 80 |       &.section-title {
 81 |         padding: 9px 25px;
 82 |         color: dimgrey;
 83 |       }
 84 |     }
 85 |   }
 86 | 
 87 |   .category-list,
 88 |   .tag-list,
 89 |   .archive-list {
 90 |     padding-right: 30px;
 91 |     padding-left: 0;
 92 |     display: none;
 93 |     &.collapsed {
 94 |       height: 0;
 95 |       overflow: hidden;
 96 |     }
 97 |     .category-list-item,
 98 |     .tag-list-item,
 99 |     .archive-list-item {
100 |       vertical-align: top;
101 |       display: inline-block;
102 |       width: 45%;
103 |       font-size: 13px;
104 |       a {
105 |         width: 80%;
106 |         display: inline-block;
107 |         color: rgb(134, 168, 127);
108 |         &:hover {
109 |           color: white;
110 |         }
111 |       }
112 |       .tag-list-count,
113 |       .category-list-count,
114 |       .archive-list-count {
115 |         display: inline-block;
116 |         width: 20%;
117 |         font-size: 12px;
118 |         color: #838383;
119 |         vertical-align: top;
120 |       }
121 |     }
122 |   }
123 | }
124 | 
125 | @media mq-mobile {
126 |   .sidebar {
127 |     left: -400px;
128 |     width: 300px;
129 |     max-width: 100%;
130 |     z-index: 9999999;
131 |     transition-duration: 0.3s;
132 | 
133 |     &.in {
134 |       left: 0;
135 |     }
136 | 
137 |     .header {
138 |       padding-right: 15px;
139 |     }
140 | 
141 |     .title {
142 |       display: none;
143 |     }
144 | 
145 |     .nav {
146 |       & > li {
147 |         & > a {
148 |           padding: 5px 10px;
149 |         }
150 |       }
151 |     }
152 |   }
153 | }
154 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/third-party.styl:
--------------------------------------------------------------------------------
 1 | #ds-waiting {
 2 |   margin: auto !important;
 3 |   margin-top: 50px !important;
 4 | }
 5 | 
 6 | .jiathis_style_32x32 {
 7 |   height: 32px;
 8 |   -webkit-filter: grayscale(60%);
 9 |   -moz-filter: grayscale(60%);
10 |   -ms-filter: grayscale(60%);
11 |   -o-filter: grayscale(60%);
12 |   filter: grayscale(60%);
13 |   transition-duration: 0.5s;
14 |   transition-property: filter, -webkit-filter, -moz-filter, -ms-filter, -o-filter;
15 |   &:hover {
16 |     -webkit-filter: grayscale(0%);
17 |     -moz-filter: grayscale(0%);
18 |     -ms-filter: grayscale(0%);
19 |     -o-filter: grayscale(0%);
20 |     filter: grayscale(0%);
21 |   }
22 | }
23 | 
24 | .jiathis_style > div {
25 |   border: none !important;
26 | }
27 | 
28 | .main-content .jiathis_style_32x32 .jtico {
29 |   display: inline-block !important;
30 | }
31 | 
32 | .jiathis_style .ckepopBottom {
33 |     padding: 5px;
34 | }
35 | 


--------------------------------------------------------------------------------
/docs/themes/skqw/source/styles/variables.styl:
--------------------------------------------------------------------------------
 1 | // Colors
 2 | color-default = #333
 3 | color-grey = #999
 4 | color-border = #ddd
 5 | color-link = #19734b
 6 | color-link-hover = #2ca831
 7 | color-link-sidebar = #cfe3cb;
 8 | 
 9 | // Fonts
10 | font-sans = "微软雅黑", "黑体", "Helvetica Neue", Helvetica, Arial, sans-serif
11 | font-serif = "宋体", Georgia, "Times New Roman", serif
12 | font-mono = "新宋","Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace
13 | font-size = 14px
14 | line-height = 1.6em
15 | 
16 | // Layout
17 | article-padding = 20px
18 | 
19 | // Media queries
20 | mq-mobile = "screen and (max-width: 768px)"
21 | mq-normal = "screen and (min-width: 769px)"
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "SKQW",
 3 |   "version": "1.0.0-beta.2",
 4 |   "description": "Audio visualizations in JavaScript",
 5 |   "homepage": "https://github.com/michaelbromley/skqw",
 6 |   "main": "app/index.js",
 7 |   "scripts": {
 8 |     "electron:rebuild": "electron-rebuild -m src/",
 9 |     "app:watch": "webpack --watch --progress --profile",
10 |     "app:build": "rimraf app && webpack --progress --profile",
11 |     "app:build-aot": "rimraf app && webpack --progress --profile --env aot",
12 |     "electron:start": ".\\node_modules\\electron\\dist\\electron.exe ./app/index.js",
13 |     "dist:win64": "build --platform win32 --arch x64",
14 |     "dist:osx": "build --osx"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "http://github.com/michaelbromley/skqw"
19 |   },
20 |   "bugs": {
21 |     "url": "https://github.com/michaelbromley/skqw/issues"
22 |   },
23 |   "devDependencies": {
24 |     "@angular/animations": "^4.0.2",
25 |     "@angular/common": "^4.0.2",
26 |     "@angular/compiler": "^4.0.2",
27 |     "@angular/compiler-cli": "^4.0.2",
28 |     "@angular/core": "^4.0.2",
29 |     "@angular/forms": "^4.0.2",
30 |     "@angular/http": "^4.0.2",
31 |     "@angular/material": "2.0.0-beta.3",
32 |     "@angular/platform-browser": "^4.0.2",
33 |     "@angular/platform-browser-dynamic": "^4.0.2",
34 |     "@angular/platform-server": "^4.0.2",
35 |     "@types/node": "^7.0.12",
36 |     "angular2-template-loader": "^0.6.0",
37 |     "copy-webpack-plugin": "^3.0.1",
38 |     "css-loader": "^0.23.1",
39 |     "electron": "^1.6.6",
40 |     "electron-builder": "17.8.0",
41 |     "electron-debug": "^1.0.1",
42 |     "electron-rebuild": "1.5.11",
43 |     "es6-shim": "^0.35.0",
44 |     "file-loader": "^0.8.5",
45 |     "fourier-transform": "^1.0.1",
46 |     "hammerjs": "^2.0.8",
47 |     "html-loader": "^0.4.3",
48 |     "html-webpack-plugin": "^2.22.0",
49 |     "lowdb": "^0.14.0",
50 |     "node-sass": "^3.7.0",
51 |     "perfect-scrollbar": "^0.6.16",
52 |     "raw-loader": "^0.5.1",
53 |     "reflect-metadata": "0.1.9",
54 |     "rimraf": "^2.5.2",
55 |     "rxjs": "5.0.3",
56 |     "sass-loader": "^3.2.0",
57 |     "style-loader": "^0.13.1",
58 |     "svg-inline-loader": "^0.4.1",
59 |     "three": "^0.83.0",
60 |     "ts-loader": "0.9.1",
61 |     "typescript": "2.1.4",
62 |     "webpack": "^2.3.3",
63 |     "zone.js": "^0.8.4"
64 |   },
65 |   "build": {
66 |     "appId": "skqw.skqw",
67 |     "files": [
68 |       "**/*",
69 |       "../visualizations/**/*"
70 |     ],
71 |     "asar": false,
72 |     "mac": {
73 |       "category": "public.app-category.entertainment"
74 |     },
75 |     "win": {
76 |       "target": "nsis",
77 |       "icon": "build/icon.ico"
78 |     },
79 |     "nodeGypRebuild": false
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/src/assets/icons/MaterialIcons-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/src/assets/icons/MaterialIcons-Regular.woff2


--------------------------------------------------------------------------------
/src/assets/images/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/src/assets/images/icon.ico


--------------------------------------------------------------------------------
/src/assets/images/icon.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2 | <!-- Created with Inkscape (http://www.inkscape.org/) -->
  3 | 
  4 | <svg
  5 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
  6 |    xmlns:cc="http://creativecommons.org/ns#"
  7 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  8 |    xmlns:svg="http://www.w3.org/2000/svg"
  9 |    xmlns="http://www.w3.org/2000/svg"
 10 |    xmlns:xlink="http://www.w3.org/1999/xlink"
 11 |    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
 12 |    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 13 |    width="256"
 14 |    height="256"
 15 |    viewBox="0 0 256 256"
 16 |    id="svg4243"
 17 |    version="1.1"
 18 |    inkscape:version="0.91 r13725"
 19 |    sodipodi:docname="icon.svg">
 20 |   <defs
 21 |      id="defs4245">
 22 |     <linearGradient
 23 |        id="linearGradient6395"
 24 |        inkscape:collect="always">
 25 |       <stop
 26 |          id="stop6397"
 27 |          offset="0"
 28 |          style="stop-color:#64f7e4;stop-opacity:1" />
 29 |       <stop
 30 |          id="stop6399"
 31 |          offset="1"
 32 |          style="stop-color:#69b2eb;stop-opacity:0.98431373" />
 33 |     </linearGradient>
 34 |     <filter
 35 |        style="color-interpolation-filters:sRGB"
 36 |        inkscape:label="Drop Shadow"
 37 |        id="filter11399">
 38 |       <feFlood
 39 |          flood-opacity="0.262745"
 40 |          flood-color="rgb(0,0,0)"
 41 |          result="flood"
 42 |          id="feFlood11401" />
 43 |       <feComposite
 44 |          in="flood"
 45 |          in2="SourceGraphic"
 46 |          operator="in"
 47 |          result="composite1"
 48 |          id="feComposite11403" />
 49 |       <feGaussianBlur
 50 |          in="composite1"
 51 |          stdDeviation="5.2"
 52 |          result="blur"
 53 |          id="feGaussianBlur11405" />
 54 |       <feOffset
 55 |          dx="4.16667"
 56 |          dy="6"
 57 |          result="offset"
 58 |          id="feOffset11407" />
 59 |       <feComposite
 60 |          in="SourceGraphic"
 61 |          in2="offset"
 62 |          operator="over"
 63 |          result="composite2"
 64 |          id="feComposite11409" />
 65 |     </filter>
 66 |     <filter
 67 |        style="color-interpolation-filters:sRGB"
 68 |        inkscape:label="Drop Shadow"
 69 |        id="filter11387">
 70 |       <feFlood
 71 |          flood-opacity="0.262745"
 72 |          flood-color="rgb(0,0,0)"
 73 |          result="flood"
 74 |          id="feFlood11389" />
 75 |       <feComposite
 76 |          in="flood"
 77 |          in2="SourceGraphic"
 78 |          operator="in"
 79 |          result="composite1"
 80 |          id="feComposite11391" />
 81 |       <feGaussianBlur
 82 |          in="composite1"
 83 |          stdDeviation="5.2"
 84 |          result="blur"
 85 |          id="feGaussianBlur11393" />
 86 |       <feOffset
 87 |          dx="4.16667"
 88 |          dy="6"
 89 |          result="offset"
 90 |          id="feOffset11395" />
 91 |       <feComposite
 92 |          in="SourceGraphic"
 93 |          in2="offset"
 94 |          operator="over"
 95 |          result="composite2"
 96 |          id="feComposite11397" />
 97 |     </filter>
 98 |     <linearGradient
 99 |        inkscape:collect="always"
100 |        xlink:href="#linearGradient6395"
101 |        id="linearGradient6391"
102 |        x1="130.52719"
103 |        y1="378.19736"
104 |        x2="246.60632"
105 |        y2="378.19736"
106 |        gradientUnits="userSpaceOnUse" />
107 |     <linearGradient
108 |        inkscape:collect="always"
109 |        xlink:href="#linearGradient6395"
110 |        id="linearGradient6393"
111 |        x1="141.9651"
112 |        y1="429.38419"
113 |        x2="258.04424"
114 |        y2="429.38419"
115 |        gradientUnits="userSpaceOnUse" />
116 |   </defs>
117 |   <sodipodi:namedview
118 |      id="base"
119 |      pagecolor="#ffffff"
120 |      bordercolor="#666666"
121 |      borderopacity="1.0"
122 |      inkscape:pageopacity="0.0"
123 |      inkscape:pageshadow="2"
124 |      inkscape:zoom="2.6171875"
125 |      inkscape:cx="103.73731"
126 |      inkscape:cy="128"
127 |      inkscape:document-units="px"
128 |      inkscape:current-layer="layer1"
129 |      showgrid="false"
130 |      units="px"
131 |      inkscape:window-width="1600"
132 |      inkscape:window-height="837"
133 |      inkscape:window-x="-8"
134 |      inkscape:window-y="-8"
135 |      inkscape:window-maximized="1" />
136 |   <metadata
137 |      id="metadata4248">
138 |     <rdf:RDF>
139 |       <cc:Work
140 |          rdf:about="">
141 |         <dc:format>image/svg+xml</dc:format>
142 |         <dc:type
143 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
144 |         <dc:title></dc:title>
145 |       </cc:Work>
146 |     </rdf:RDF>
147 |   </metadata>
148 |   <g
149 |      inkscape:label="Layer 1"
150 |      inkscape:groupmode="layer"
151 |      id="layer1"
152 |      transform="translate(0,-796.36216)"
153 |      style="display:inline">
154 |     <path
155 |        sodipodi:nodetypes="ccccc"
156 |        inkscape:connector-curvature="0"
157 |        id="path5109"
158 |        d="m 175.03777,432.59233 -34.83732,-60.34 27.97259,-48.44995 68.76002,0 z"
159 |        style="fill:url(#linearGradient6391);fill-opacity:1;fill-rule:nonzero;stroke:#4fd6cb;stroke-width:1.33197331;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter11387)"
160 |        transform="matrix(1.4206237,0,0,1.4206237,-147.8282,346.04353)" />
161 |     <path
162 |        style="fill:url(#linearGradient6393);fill-opacity:1;fill-rule:nonzero;stroke:#4fd6cb;stroke-width:1.33197331;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter11399)"
163 |        d="m 213.53364,374.98921 34.83733,60.34 -27.97259,48.44995 -68.76002,0 z"
164 |        id="path5107"
165 |        inkscape:connector-curvature="0"
166 |        sodipodi:nodetypes="ccccc"
167 |        transform="matrix(1.4206237,0,0,1.4206237,-147.8282,346.04353)" />
168 |   </g>
169 | </svg>
170 | 


--------------------------------------------------------------------------------
/src/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/michaelbromley/skqw/115ce18af01dc7af23d05fc843a67828206ad2a2/src/assets/images/logo.png


--------------------------------------------------------------------------------
/src/common/constants.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Electron ipc message channels.
 3 |  */
 4 | export const SAMPLE = 'SAMPLE';
 5 | export const START_ANALYZER = 'START_ANALYZER';
 6 | export const STOP_ANALYZER = 'STOP_ANALYZER';
 7 | export const REQUEST_DEVICE_LIST = 'REQUEST_DEVICE_LIST';
 8 | export const RECEIVE_DEVICE_LIST = 'RECEIVE_DEVICE_LIST';
 9 | export const SET_INPUT_DEVICE_ID = 'SET_INPUT_DEVICE_ID';
10 | export const SET_GAIN = 'SET_GAIN';
11 | export const SET_SAMPLE_RATE = 'SET_SAMPLE_RATE';
12 | export const TOGGLE_NORMALIZATION = 'TOGGLE_NORMALIZATION';
13 | export const TOGGLE_FULLSCREEN = 'TOGGLE_FULLSCREEN';
14 | export const TOGGLE_DEVTOOLS = 'TOGGLE_DEVTOOLS';
15 | export const OPEN_DEVTOOLS = 'OPEN_DEVTOOLS';
16 | export const CLOSE_DEVTOOLS = 'CLOSE_DEVTOOLS';
17 | export const OPEN_REMOTE_CONTROL = 'OPEN_REMOTE_CONTROL';
18 | export const CLOSE_REMOTE_CONTROL = 'CLOSE_REMOTE_CONTROL';
19 | export const STATE_CHANGE = 'STATE_CHANGE';
20 | 
21 | /**
22 |  * App settings
23 |  */
24 | export const MAX_GAIN = 500;
25 | export const MIN_GAIN = 0;
26 | export const MIN_SAMPLE_RATE = 10;
27 | export const MAX_SAMPLE_RATE = 60;
28 | export const SKQW_UTILS_MODULE_NAME = 'skqw-utils';
29 | export const SKQW_CORE_MODULE_NAME = 'skqw-core';
30 | export const RESET_TOKEN = 'visualization:reset';
31 | 
32 | /**
33 |  * Keycodes
34 |  */
35 | export const KEYCODE_RIGHT_ARROW = 39;
36 | export const KEYCODE_LEFT_ARROW = 37;
37 | export const KEYCODE_UP_ARROW = 38;
38 | export const KEYCODE_DOWN_ARROW = 40;
39 | 


--------------------------------------------------------------------------------
/src/common/models.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | /**
 3 |  * A sample is a single frame of the audio buffer.
 4 |  * { ft: fourier transform array, ts: time series array }
 5 |  */
 6 | export interface Sample {
 7 |     ft: number[];
 8 |     ts: number[];
 9 | }
10 | 
11 | export interface Dimensions {
12 |     width: number;
13 |     height: number;
14 | }
15 | 
16 | export interface Parameter {
17 |     value: number | boolean;
18 |     type: 'range' | 'boolean';
19 |     label: string;
20 |     min?: number;
21 |     max?: number;
22 |     step?: number;
23 | }
24 | 
25 | export interface LibraryEntry {
26 |     id: string;
27 |     name: string;
28 |     path: string;
29 |     error: boolean;
30 | }
31 | 
32 | export interface Preset {
33 |     name: string;
34 |     entryId: string;
35 |     params: { [key: string]: any };
36 | }
37 | 
38 | /** 
39 |  * A visualization object
40 |  */
41 | export interface Visualization {
42 |     name: string;
43 |     init: () => void;
44 |     tick: (timestamp: number) => void;
45 |     resize?: () => void;
46 |     destroy?: () => void;
47 |     paramChange?: (change: ParamUpdate) => void;
48 |     params?: { [name: string]: Parameter }
49 | }
50 | 
51 | export interface ParamUpdate {
52 |     paramKey: string;
53 |     newValue: number | boolean;
54 | }


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>SKQW</title>
 6 |     <style>
 7 |         .placeholder {
 8 |             background: #15181d;
 9 |             width: 100vw;
10 |             height: 100vh;
11 |             position: absolute;
12 |             top: 0;
13 |             left: 0;
14 |             display: flex;
15 |             align-items: center;
16 |         }
17 |         .placeholder img {
18 |             width: 100vw;
19 |         }
20 |     </style>
21 | </head>
22 | <body>
23 | <div class="placeholder">
24 |     <img src="assets/images/logo-black.svg">
25 | </div>
26 | <app></app>
27 | </body>
28 | </html>


--------------------------------------------------------------------------------
/src/library/bars/index.js:
--------------------------------------------------------------------------------
  1 | const { ExponentialSmoother } = require('skqw-utils');
  2 | const { createCanvas, getSample, getDimensions } = require('skqw-core');
  3 | 
  4 | /**
  5 |  * A pretty simple visualization.
  6 |  *
  7 |  * Author: Michael Bromley
  8 |  * Version: 1
  9 |  */
 10 | let ctx;
 11 | let params = {
 12 |     hue: {
 13 |         value: 120,
 14 |         type: 'range',
 15 |         label: 'hue',
 16 |         min: 0,
 17 |         max: 360
 18 |     },
 19 |     waveHeight: {
 20 |         value: 3,
 21 |         type: 'range',
 22 |         label: 'Wave Height',
 23 |         min: 1,
 24 |         max: 10
 25 |     },
 26 | };
 27 | 
 28 | const smoothFt = new ExponentialSmoother(0.3);
 29 | const smoothTs = new ExponentialSmoother(0.8);
 30 | const smoothVol = new ExponentialSmoother(0.1);
 31 | 
 32 | function init() {
 33 |     ctx = createCanvas().getContext('2d');
 34 | 
 35 | }
 36 | 
 37 | function tick(skqw) {
 38 |     const { width, height } = getDimensions();
 39 |     const { ft, ts } = getSample();
 40 | 
 41 |     ctx.globalCompositeOperation = 'source-over';
 42 |     drawBg(width, height, ft);
 43 | 
 44 |     ctx.globalCompositeOperation = 'screen';
 45 |     drawBars(width, height, ft);
 46 |     ctx.globalCompositeOperation = 'source-over';
 47 |     drawWave(width, height, ts);
 48 | }
 49 | 
 50 | function drawBg(w, h, ft) {
 51 |     let vol = smoothVol.sumAndProcess(ft);
 52 |     const gradient = ctx.createLinearGradient(0, 0, 0, h);
 53 |     gradient.addColorStop(0, `hsla(${params.hue.value + 50}, 50%, 5%, 0.3)`);
 54 |     gradient.addColorStop(1, `hsla(${params.hue.value + 50}, 100%, ${Math.log10(vol / 2 + 2) * 10}%, 0.8)`);
 55 |     ctx.fillStyle = gradient;
 56 |     ctx.fillRect(0, 0, w, h);
 57 | }
 58 | 
 59 | function drawWave(w, h, ts) {
 60 |     const length = ts.length;
 61 |     const interval = w / length;
 62 | 
 63 |     ctx.lineCap = 'round';
 64 |     ctx.strokeStyle = `hsla(${params.hue.value + 40}, 100%, 60%, 0.7)`;
 65 |     ctx.lineWidth = h / 250;
 66 | 
 67 |     let p1;
 68 |     let p2;
 69 |     let mid;
 70 |     let bins = smoothTs.process(ts);
 71 | 
 72 |     for(let i = 0; i < bins.length; i++) {
 73 |         const val = bins[i] * params.waveHeight.value * h / 800;
 74 |         p1 = linePoint(i, interval, val, h);
 75 |         p2 = linePoint(i + 1, interval, val, h);
 76 |         if (i === 0) {
 77 |             ctx.beginPath();
 78 |             ctx.moveTo(p1.x, p1.y);
 79 |         } else {
 80 |             mid = midPoint(p1, p2);
 81 |             ctx.quadraticCurveTo(p1.x, p1.y, mid.x, mid.y);
 82 |         }
 83 |     }
 84 |     ctx.stroke();
 85 | }
 86 | 
 87 | function linePoint(i, interval, val, height) {
 88 |     return {
 89 |         x: i * interval,
 90 |         y: height / 2 + val * 100
 91 |     };
 92 | }
 93 | 
 94 | function midPoint(p1, p2) {
 95 |     return {
 96 |         x: p1.x + (p2.x - p1.x) / 2,
 97 |         y: p1.y + (p2.y - p1.y) / 2
 98 |     };
 99 | }
100 | 
101 | 
102 | function drawBars(w, h, ft) {
103 |     const length = ft.length;
104 |     const barWidth = w / length;
105 | 
106 |     let bins = smoothFt.process(ft);
107 | 
108 |     for(let i = 0; i < bins.length; i++) {
109 |         const val = bins[i];
110 |         const x = i * barWidth;
111 |         const height = Math.log10(val + 1) * h;
112 | 
113 |         const y = h - height;
114 |         const saturation = Math.log2(1 + height) * 40;
115 |         ctx.fillStyle = `hsla(${params.hue.value + saturation}, 50%, 50%, 0.8)`;
116 | 
117 |         ctx.fillRect(x, y, barWidth - 1, height);
118 |     }
119 | }
120 | 
121 | module.exports = {
122 |     name: 'Bars',
123 |     init,
124 |     tick,
125 |     params
126 | };
127 | 


--------------------------------------------------------------------------------
/src/library/eclipse/index.js:
--------------------------------------------------------------------------------
  1 | const { ExponentialSmoother } = require('skqw-utils');
  2 | const { createCanvas, getSample, getDimensions } = require('skqw-core');
  3 | 
  4 | /**
  5 |  * Author: Michael Bromley
  6 |  */
  7 | let ctx;
  8 | let ctxBuffer;
  9 | let params = {
 10 |     sensitivity: {
 11 |         value: 50,
 12 |         type: 'range',
 13 |         label: 'Sensitivity',
 14 |         min: 1,
 15 |         max: 100
 16 |     },
 17 |     blur: {
 18 |         value: 10,
 19 |         type: 'range',
 20 |         label: 'Blur',
 21 |         min: 0,
 22 |         max: 20
 23 |     },
 24 |     hue: {
 25 |         value: 160,
 26 |         type: 'range',
 27 |         label: 'Hue',
 28 |         min: 1,
 29 |         max: 360
 30 |     },
 31 | };
 32 | let minDimension = 0;
 33 | let smoothVol = new ExponentialSmoother(0.5);
 34 | let counter = 0;
 35 | const DELAY = 1;
 36 | const buffer = [];
 37 | 
 38 | function init() {
 39 |     ctx = createCanvas().getContext('2d');
 40 |     ctxBuffer = document.createElement('canvas').getContext('2d');
 41 |     resize();
 42 | }
 43 | 
 44 | function tick(skqw) {
 45 |     const { width, height } = getDimensions();
 46 |     const { ft, ts } = getSample();
 47 | 
 48 |     buffer.unshift(ts);
 49 |     if (DELAY * 2 + 2 < buffer.length) {
 50 |         buffer.pop();
 51 |     }
 52 |     let vol = smoothVol.sumAndProcess(ft);
 53 | 
 54 |     let saturation = Math.min(90, vol / 2);
 55 | 
 56 | 
 57 |     ctxBuffer.save();
 58 |     ctxBuffer.clearRect(-width / 2, -height / 2, width, height);
 59 |     ctxBuffer.globalAlpha = 0.79 + params.blur.value / 100;
 60 |     ctxBuffer.scale(1.01, 1.01);
 61 |     ctxBuffer.drawImage(ctx.canvas, -width / 2, -height / 2);
 62 |     ctx.clearRect(-width / 2, -height / 2, width, height);
 63 |     ctx.drawImage(ctxBuffer.canvas, -width / 2, -height / 2);
 64 |     ctxBuffer.restore();
 65 | 
 66 |     drawBars(height, ft, vol);
 67 | 
 68 |     ctx.strokeStyle = `hsla(${params.hue.value}, ${saturation}%, 50%, 1)`;
 69 |     drawCircle(height, buffer[0], vol);
 70 | 
 71 |     ctx.strokeStyle = `hsla(${vol / 8 + params.hue.value}, ${saturation}%, 50%, 1)`;
 72 |     drawCircle(height, buffer[DELAY + 1], vol);
 73 | 
 74 |     ctx.strokeStyle = `hsla(${vol / 5 + params.hue.value}, ${saturation}%, 50%, 1)`;
 75 |     drawCircle(height, buffer[DELAY * 2 + 1], vol);
 76 | 
 77 |     counter ++;
 78 | }
 79 | 
 80 | function drawCircle(h, ts, volume) {
 81 |     if (!ts) {
 82 |         return;
 83 |     }
 84 |     const r = minDimension / 2 * 0.6;
 85 |     const length = ts.length;
 86 |     let p1 = circlePoint(ts, length - 2, r, volume);
 87 |     let p2 = circlePoint(ts, length - 1, r, volume);
 88 |     let mid = midPoint(p1, p2);
 89 |     const start = midPoint(p1, p2);
 90 |     ctx.beginPath();
 91 |     ctx.moveTo(start.x, start.y);
 92 | 
 93 |     for(let i = 2; i < length; i++) {
 94 |         mid = midPoint(p1, p2);
 95 |         ctx.quadraticCurveTo(p1.x, p1.y, mid.x, mid.y);
 96 |         p1 = circlePoint(ts, i, r, volume);
 97 |         p2 = circlePoint(ts, (i + 1), r, volume);
 98 |     }
 99 |     ctx.quadraticCurveTo(p1.x, p2.y, start.x, start.y);
100 |     ctx.stroke();
101 | }
102 | 
103 | function circlePoint(ts, i, r, volume) {
104 |     const length = ts.length;
105 |     const radialOffset = Math.PI / 2;
106 |     const adjustedR = r + ts[i] * params.sensitivity.value * 5 + volume / 2;
107 |     const x = adjustedR * Math.cos(2 * Math.PI * i / length + radialOffset);
108 |     const y = adjustedR * Math.sin(2 * Math.PI * i / length + radialOffset);
109 |     return { x, y };
110 | }
111 | 
112 | function midPoint(p1, p2) {
113 |     return {
114 |         x: p1.x + (p2.x - p1.x) / 2,
115 |         y: p1.y + (p2.y - p1.y) / 2
116 |     };
117 | }
118 | 
119 | function drawBars(h, ft, volume) {
120 |     if (!ft) {
121 |         return;
122 |     }
123 |     const r = h / 2 * 0.8;
124 | 
125 |     ctx.strokeWidth = minDimension / 200;
126 |     const length = ft.length;
127 |     for(var i = 0; i < length; i++) {
128 |         ctx.strokeStyle = `hsla(${params.hue.value + 60 + ft[i] * 10}, 50%, 50%, ${Math.min(volume / 200, 0.3)})`;
129 |         const adjustedR = r + ft[i] * params.sensitivity.value + volume;
130 |         const delta = adjustedR - r;
131 |         let p1 = barPoint(length, i, r - delta * 0.2);
132 |         let p2 = barPoint(length, i, r + delta * 0.8);
133 |         ctx.beginPath();
134 |         ctx.moveTo(p1.x, p1.y);
135 |         ctx.lineTo(p2.x, p2.y);
136 |         ctx.stroke();
137 |     }
138 | }
139 | 
140 | function barPoint(length, i, r) {
141 |     i -= Math.round(counter / 20);
142 |     const x = r * Math.cos(2 * Math.PI * i / length);
143 |     const y = r * Math.sin(2 * Math.PI * i / length);
144 |     return { x, y };
145 | }
146 | 
147 | function resize() {
148 |     if (ctx) {
149 |         let {width, height} = getDimensions();
150 |         ctx.lineCap = 'round';
151 |         ctxBuffer.canvas.width = width;
152 |         ctxBuffer.canvas.height = height;
153 |         ctxBuffer.translate(width/2, height/2);
154 |         ctx.lineWidth = width / 600;
155 |         ctx.translate(width/2, height/2);
156 |         minDimension = Math.min(width, height);
157 |     }
158 | }
159 | 
160 | module.exports = {
161 |     name: 'Eclipse',
162 |     init,
163 |     tick,
164 |     resize,
165 |     params
166 | };
167 | 


--------------------------------------------------------------------------------
/src/library/hyperwave/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Author: Michael Bromley
  3 |  */
  4 | const {createCanvas, getSample, getDimensions} = require('skqw-core');
  5 |  
  6 |  
  7 | let ctx;
  8 | let params = {
  9 |     smoothing: {
 10 |         value: 5,
 11 |         type: 'range',
 12 |         label: 'Smoothing',
 13 |         min: 1,
 14 |         max: 10
 15 |     },
 16 |     hue: {
 17 |         value: 174,
 18 |         type: 'range',
 19 |         label: 'Hue',
 20 |         min: 0,
 21 |         max: 359
 22 |     },
 23 |     spread: {
 24 |         value: 15,
 25 |         type: 'range',
 26 |         label: 'Spread',
 27 |         min: 0,
 28 |         max: 100,
 29 |         step: 5
 30 |     },
 31 | };
 32 | let minDimension = 0;
 33 | let acc = 0;
 34 | let counter = 0;
 35 | let ctxBuffer;
 36 | 
 37 | function init() {
 38 |     ctx = createCanvas().getContext('2d');
 39 |     ctxBuffer = document.createElement('canvas').getContext('2d');
 40 |     resize();
 41 | }
 42 | 
 43 | function tick() {
 44 |     const { width, height } = getDimensions();
 45 |     const { ft, ts } = getSample();
 46 | 
 47 |     let volume = 0;
 48 |     for (let i = 0; i < ft.length; i ++) {
 49 |         volume += ft[i];
 50 |     }
 51 |     let delta = volume - acc;
 52 |     acc += delta / 50;
 53 | 
 54 |     ctxBuffer.save();
 55 |     ctxBuffer.clearRect(-width / 2, -height / 2, width, height);
 56 |     ctxBuffer.globalAlpha = 0.99;
 57 |     ctxBuffer.scale(0.99, 0.99);
 58 |     ctxBuffer.drawImage(ctx.canvas, -width / 2, -height / 2);
 59 |     ctx.clearRect(-width / 2, -height / 2, width, height);
 60 |     ctx.drawImage(ctxBuffer.canvas, -width / 2, -height / 2);
 61 |     ctxBuffer.restore();
 62 | 
 63 |     ctx.fillStyle = `hsla(0, 0%, 0%, 0.01)`;
 64 |     ctx.fillRect(-width / 2, -height / 2, width, height);
 65 |     pattern(acc, ft);
 66 |     counter ++;
 67 | }
 68 | 
 69 | function pattern(volume, ts) {
 70 |     let b = Math.sin(counter / 1000) * 5 + 10 + Math.log2(volume / 500 + 0.5);
 71 |     const f = x => 6 * Math.cos(x);
 72 |     const g = x => Math.sin(b * x) + Math.sin(volume / 10);
 73 |     const radius = minDimension / 8;
 74 |     const increment = 1 / (params.smoothing.value * 5);
 75 | 
 76 |     for (let a = 0, i = 0; a <= Math.PI * 2; a += Math.PI /  (2 + (volume / 100)), i++) {
 77 |         const h = params.hue.value + i * params.spread.value;
 78 |         ctx.beginPath();
 79 |         ctx.strokeStyle = `hsla(${h}, 50%, 50%, 0.3)`;
 80 |         for (let t = 0; t <= 6.29; t += increment) {
 81 |             let x = (f(t) * Math.cos(a) - g(t) * Math.sin(a)) * radius;
 82 |             let y = (f(t) * Math.sin(a) + g(t) * Math.cos(a)) * radius;
 83 |             if (t === 0) {
 84 |                 ctx.moveTo(x, y);
 85 |             } else {
 86 |                 ctx.lineTo(x, y);
 87 |             }
 88 |         }
 89 | 
 90 |         ctx.stroke();
 91 |     }
 92 | }
 93 | 
 94 | function resize() {
 95 |     if (ctx) {
 96 |         let {width, height} = getDimensions();
 97 |         ctx.lineCap = 'round';
 98 |         ctxBuffer.canvas.width = width;
 99 |         ctxBuffer.canvas.height = height;
100 |         ctxBuffer.translate(width/2, height/2);
101 |         ctx.lineWidth = width / 600;
102 |         ctx.translate(width/2, height/2);
103 |         minDimension = Math.min(width, height);
104 |     }
105 | }
106 | 
107 | module.exports = {
108 |     name: 'Hyperwave',
109 |     init,
110 |     tick,
111 |     resize,
112 |     params
113 | };
114 | 


--------------------------------------------------------------------------------
/src/library/resistance/polygon.js:
--------------------------------------------------------------------------------
  1 | const ROTATION_STEP = 0.001;
  2 | 
  3 | class Polygon {
  4 | 
  5 |     constructor(sides, x, y, tileSize, ctx, num) {
  6 |         this.sides = sides;
  7 |         this.tileSize = tileSize;
  8 |         this.ctx = ctx;
  9 |         this.num = num; // the number of the tile, starting at 0
 10 |         this.radius = 0; // the highest colour value, which then fades out
 11 |         this.decay = this.num > 62 ? 2 : 3; // increase this value to fade out faster.
 12 |         this.highlight = 0; // for highlighted stroke effect;
 13 |         this.acc = 0; // the smoothed volume value
 14 | 
 15 |         // figure out the x and y coordinates of the center of the polygon based on the
 16 |         // 60 degree XY axis coordinates passed in
 17 |         let step = Math.round(Math.cos(Math.PI / 6) * tileSize * 2);
 18 |         this.y = Math.round(step * Math.sin(Math.PI / 3) * -y);
 19 |         this.x = Math.round((x * step) + (y * step / 2));
 20 | 
 21 |         // calculate the vertices of the polygon
 22 |         this.vertices = [];
 23 |         for (let i = 1; i <= this.sides;i += 1) {
 24 |             let _x = this.x + this.tileSize * Math.cos(i * 2 * Math.PI / this.sides + Math.PI/6);
 25 |             let _y = this.y + this.tileSize * Math.sin(i * 2 * Math.PI / this.sides + Math.PI/6);
 26 |             this.vertices.push([_x, _y]);
 27 |         }
 28 |     }
 29 | 
 30 |     /**
 31 |      * Rotate all the vertices to achieve the overall rotational effect
 32 |      */
 33 |     rotateVertices(volume) {
 34 |         let rotation = this.invert(volume) * ROTATION_STEP;
 35 |         for (let i = 0; i <= this.sides-1;i += 1) {
 36 |             this.vertices[i][0] = this.vertices[i][0] -  this.vertices[i][1] * Math.sin(rotation);
 37 |             this.vertices[i][1] = this.vertices[i][1] +  this.vertices[i][0] * Math.sin(rotation);
 38 |         }
 39 |     }
 40 | 
 41 |     calculateOffset(coords, volume, params) {
 42 |         let angle = Math.atan(coords[1]/coords[0]);
 43 |         let distance = Math.sqrt(Math.pow(coords[0], 2) + Math.pow(coords[1], 2)); // a bit of pythagoras
 44 |         let inversion = params.invert.value ? -1 : 1;
 45 |         let offsetFactor = Math.pow(distance / 2, 1.7) * (Math.log2(volume + 0.5) * params.depth.value / 100) * (Math.log2(this.radius / 100 + 1) / 10) * inversion;
 46 |         let offsetX = Math.cos(angle) * offsetFactor;
 47 |         let offsetY = Math.sin(angle) * offsetFactor;
 48 |         offsetX *= (coords[0] < 0) ? -1 : 1;
 49 |         offsetY *= (coords[0] < 0) ? -1 : 1;
 50 |         return [offsetX, offsetY];
 51 |     };
 52 | 
 53 |     render(ft, volume, tileCount, params, acc) {
 54 |         let bucket = Math.ceil(ft.length / tileCount * this.num);
 55 |         let val = ft[bucket] * params.sensitivity.value;
 56 |         let delta = val - this.acc;
 57 |         this.acc += delta / 10;
 58 | 
 59 |         // establish the value for this tile
 60 |         if (val > this.radius) {
 61 |             this.radius = val;
 62 |         } else {
 63 |             this.radius -= this.decay;
 64 |             val = this.radius;
 65 |         }
 66 | 
 67 |         if (val > 0) {
 68 |             this.ctx.beginPath();
 69 |             let offset = this.calculateOffset(this.vertices[0], volume, params);
 70 |             this.ctx.moveTo(this.vertices[0][0] + offset[0], this.vertices[0][1] + offset[1]);
 71 |             // draw the polygon
 72 |             for (let i = 1; i <= this.sides-1;i += 1) {
 73 |                 offset = this.calculateOffset(this.vertices[i], volume, params);
 74 |                 this.ctx.lineTo (this.vertices[i][0] + offset[0], this.vertices[i][1] + offset[1]);
 75 |             }
 76 |             this.ctx.closePath();
 77 | 
 78 | 
 79 |             if (val > 100) {
 80 |                 this.highlight = 100; // add the highlight effect if it's pretty loud
 81 |             }
 82 |             let h = -10 + this.acc + params.hue.value;
 83 |             let a = Math.min(Math.log2(this.acc + 0.5) / 10, 1);
 84 |             this.ctx.fillStyle = `hsla(${h}, 50%, ${50}%, ${a}`;
 85 |             this.ctx.fill();
 86 |             // stroke
 87 |             if (val > 20) {
 88 |                 let strokeVal = 20;
 89 |                 this.ctx.strokeStyle =  "rgba(" + strokeVal + ", " + strokeVal + ", " + strokeVal + ", 0.5)";
 90 |                 this.ctx.lineWidth = 1;
 91 |                 this.ctx.stroke();
 92 |             }
 93 |         }
 94 |     }
 95 | 
 96 |     drawHighlight(volume, params, acc) {
 97 |         this.ctx.beginPath();
 98 |         // draw the highlight
 99 |         let offset = this.calculateOffset(this.vertices[0], volume, params);
100 |         this.ctx.moveTo(this.vertices[0][0] + offset[0], this.vertices[0][1] + offset[1]);
101 |         // draw the polygon
102 |         for (let i = 0; i <= this.sides-1;i += 1) {
103 |             offset = this.calculateOffset(this.vertices[i], volume, params);
104 |             this.ctx.lineTo (this.vertices[i][0] + offset[0], this.vertices[i][1] + offset[1]);
105 |         }
106 |         this.ctx.closePath();
107 |         let a = this.highlight/100;
108 |         this.ctx.strokeStyle =  "rgba(255, 255, 255, " + a + ")";
109 |         this.ctx.lineWidth = 1;
110 |         this.ctx.stroke();
111 |         this.highlight -= 0.5;
112 |     }
113 | 
114 |     /**
115 |      * Returns true is volume is above a certain threshold, which causes
116 |      * depth and rotation to invert.
117 |      * @param volume
118 |      * @returns {number}
119 |      */
120 | 
121 |     invert(volume) {
122 |         let invert = Math.sin(Math.log2(volume / 100 + 1));
123 |         counter ++;
124 |         return invert;
125 |     }
126 | }
127 | 
128 | let counter = 0;
129 | 
130 | module.exports = Polygon;
131 | 


--------------------------------------------------------------------------------
/src/library/resistance/star.js:
--------------------------------------------------------------------------------
 1 | class Star {
 2 | 
 3 |     constructor(x, y, starSize, ctx) {
 4 |         this.x = x;
 5 |         this.y = y;
 6 |         this.ctx = ctx;
 7 |         this.angle = Math.atan(Math.abs(y)/Math.abs(x));
 8 |         this.starSize = starSize;
 9 |         this.high = 0;
10 |     }
11 | 
12 |     drawStar(volume, framesElapsed) {
13 |         var distanceFromCentre = Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
14 | 
15 |         // stars as lines
16 |         var brightness = 200 + Math.min(Math.round(this.high * 5), 55);
17 |         this.ctx.fillStyle= `rgba(${brightness}, ${brightness}, ${brightness}, ${Math.min(distanceFromCentre / this.ctx.canvas.width, 1)})`;
18 |         this.ctx.beginPath();
19 |         this.ctx.arc(this.x, this.y, distanceFromCentre / 100, 0, 2 * Math.PI);
20 |         this.ctx.fill();
21 |         this.ctx.closePath();
22 | 
23 |         // starfield movement coming towards the camera
24 |         this.high -= Math.max(this.high - 0.00000001, 0);
25 |         if (this.high < volume / 50) {
26 |             this.high = volume / 50;
27 |         }
28 |         const speed = Math.pow(distanceFromCentre, 1.5) / 30000 * this.starSize * framesElapsed;
29 |         var dX = Math.cos(this.angle) * speed;
30 |         var dY = Math.sin(this.angle) * speed;
31 |         this.x += this.x > 0 ? dX : -dX;
32 |         this.y += this.y > 0 ? dY : -dY;
33 | 
34 |         var limitY = this.ctx.canvas.height/2 + 500;
35 |         var limitX = this.ctx.canvas.width/2 + 500;
36 |         if ((this.y > limitY || this.y < -limitY) || (this.x > limitX || this.x < -limitX)) {
37 |             // it has gone off the edge so respawn it somewhere near the middle.
38 |             this.x = (Math.random() - 0.5) * this.ctx.canvas.width/3;
39 |             this.y = (Math.random() - 0.5) * this.ctx.canvas.height/3;
40 |             this.angle = Math.atan(Math.abs(this.y)/Math.abs(this.x));
41 |         }
42 |     }
43 | }
44 | 
45 | module.exports = Star;
46 | 


--------------------------------------------------------------------------------
/src/main/analyzer.ts:
--------------------------------------------------------------------------------
  1 | import {Subject} from 'rxjs/Subject';
  2 | import {Sample} from '../common/models';
  3 | const coreAudio = require('node-core-audio');
  4 | const fourierTransform = require('fourier-transform');
  5 | const engine: any = coreAudio.createNewAudioEngine();
  6 | const BUFFER_SIZE = 256;
  7 | const DEFAULT_OPTIONS = {
  8 |     framesPerBuffer: BUFFER_SIZE,
  9 |     inputDevice: 0,
 10 |     interleaved: false,
 11 |     sampleRate: 8000
 12 | };
 13 | engine.setOptions(DEFAULT_OPTIONS);
 14 | engine.setSampleRate(60);
 15 | 
 16 | /**
 17 |  * Low-level interface to the hardware sound device using node-core-audio.
 18 |  * Supplies a stream of ISample object which can then be passed to a
 19 |  * visualization script for rendering to canvas.
 20 |  */
 21 | export class Analyzer {
 22 |     sample$ = new Subject<Sample>();
 23 |     fps: number = 0;
 24 | 
 25 |     private isActive: boolean = false;
 26 |     private inputBuffer: number[][];
 27 |     private fpsFilter: number = 50;
 28 |     private now: number;
 29 |     private lastUpdate: number;
 30 |     private devices: { [id: number]: string } = {};
 31 |     private gain: number = 100;
 32 |     private normalizationEnabled: boolean = true;
 33 | 
 34 |     constructor() {
 35 |         // TODO: try / catch for errors when no input device enabled?
 36 |         engine.addAudioCallback(this.processAudio.bind(this));
 37 |         this.lastUpdate = +new Date() * 1;
 38 | 
 39 |         let numDevices = engine.getNumDevices();
 40 |         for (let i = 0; i < numDevices; i ++) {
 41 |             let name = engine.getDeviceName(i).trim();
 42 |             if (name && name !== '') {
 43 |                 this.devices[i] = name;
 44 |             }
 45 |         }
 46 |     }
 47 | 
 48 |     /**
 49 |      * Set the options of the audio engine.
 50 |      */
 51 |     setOptions(options) {
 52 |         let merged = Object.assign({}, DEFAULT_OPTIONS, options);
 53 |         try {
 54 |             engine.setOptions(merged);
 55 |         } catch (ex) {
 56 |             // log it?
 57 |         }
 58 |     }
 59 | 
 60 |     setGain(val: number) {
 61 |         this.gain = val;
 62 |     }
 63 | 
 64 |     /**
 65 |      * Set the sample rate of the audio sampler
 66 |      */
 67 |     setSampleRate(frequencyInHerz: number) {
 68 |         engine.setSampleRate(+frequencyInHerz);
 69 |     }
 70 | 
 71 |     toggleNormalization(val: boolean) {
 72 |         this.normalizationEnabled = val;
 73 |     }
 74 | 
 75 |     /**
 76 |      * Start processing audio
 77 |      */
 78 |     start() {
 79 |         this.isActive = true;
 80 |     }
 81 | 
 82 |     /**
 83 |      * Stop processing audio
 84 |      */
 85 |     stop() {
 86 |         this.isActive = false;
 87 |     }
 88 | 
 89 |     listAudioDevices(): any {
 90 |         return this.devices;
 91 |     }
 92 | 
 93 |     /**
 94 |      * Apply a Fast Fourier Transform (fft) to the time series data provided
 95 |      * by the core-audio module
 96 |      */
 97 |     private sendSample() {
 98 |         let ts = this.normalizeTs(this.inputBuffer[0]);
 99 |         let ft = fourierTransform(ts);
100 |         this.normalize(ft);
101 |         this.sample$.next({ft, ts});
102 |     }
103 | 
104 |     private normalizeTs(ts: number[]): number[] {
105 |         for (let i = 0; i < ts.length; i++) {
106 |             ts[i] = ts[i] / 100 * this.gain;
107 |         }
108 |         return ts;
109 |     }
110 | 
111 |     /**
112 |      * Normalize the fourier transform array by reducing the peaks in proportion to
113 |      * how far beyond the mean they are.
114 |      */
115 |     private normalize(ft: number[]): void {
116 |         let mean = this.mean(ft);
117 | 
118 |         for (let i = 0; i < ft.length; i++) {
119 |             let normalization = 0;
120 |             if (this.normalizationEnabled) {
121 |                 let multiples = ft[i] / mean;
122 |                 if (7 < multiples) {
123 |                     normalization = ft[i] / 1.4;
124 |                 } else if (6 < multiples) {
125 |                     normalization = ft[i] / 1.8;
126 |                 } else if (5 < multiples) {
127 |                     normalization = ft[i] / 2;
128 |                 } else if (4 < multiples) {
129 |                     normalization = ft[i] / 3;
130 |                 } else if (3 < multiples) {
131 |                     normalization = ft[i] / 4;
132 |                 } else if (2 < multiples) {
133 |                     normalization = ft[i] / 5;
134 |                 } else if (1 < multiples) { 
135 |                     normalization = ft[i] / 7;
136 |                 }
137 |             }
138 |             ft[i] = (ft[i] - normalization) * this.gain;
139 |         }
140 |     }
141 |   
142 |     private mean(arr: number[]): number {
143 |         let sum = 0;
144 |         for (let i = 0; i < arr.length; i++) {
145 |             sum += arr[i];
146 |         }
147 |         return sum / arr.length;
148 |     }
149 | 
150 |     private processAudio(_inputBuffer) {
151 |         if (!this.isActive) {
152 |             return;
153 |         }
154 | 
155 |         this.inputBuffer = _inputBuffer;
156 |         this.sendSample();
157 |         this.updateFPS();
158 |     }
159 | 
160 |     /**
161 |      * Update the fps value, which can be used for performance analysis.
162 |      */
163 |     private updateFPS() {
164 |         let thisFrameFPS = 1000 / ((this.now = +new Date * 1) - this.lastUpdate);
165 |         if (this.now != this.lastUpdate) {
166 |             this.fps += (thisFrameFPS - this.fps) / this.fpsFilter;
167 |             this.lastUpdate = this.now;
168 |         }
169 |     }
170 | }
171 | 


--------------------------------------------------------------------------------
/src/main/index.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |     CLOSE_DEVTOOLS,
  3 |     CLOSE_REMOTE_CONTROL,
  4 |     OPEN_DEVTOOLS,
  5 |     OPEN_REMOTE_CONTROL,
  6 |     RECEIVE_DEVICE_LIST,
  7 |     REQUEST_DEVICE_LIST,
  8 |     SAMPLE,
  9 |     SET_GAIN,
 10 |     SET_INPUT_DEVICE_ID,
 11 |     SET_SAMPLE_RATE,
 12 |     START_ANALYZER,
 13 |     STATE_CHANGE,
 14 |     TOGGLE_DEVTOOLS,
 15 |     TOGGLE_FULLSCREEN,
 16 |     TOGGLE_NORMALIZATION
 17 | } from '../common/constants';
 18 | import {Analyzer} from './analyzer';
 19 | const {app, BrowserWindow, ipcMain, shell} = require('electron');
 20 | require('electron-debug')();
 21 | 
 22 | let mainWindow = null;
 23 | let remoteWindow = null;
 24 | let analyzer = new Analyzer();
 25 | let fullscreen = false;
 26 | 
 27 | app.on('ready', () => {
 28 |     mainWindow = new BrowserWindow({
 29 |         height: 600,
 30 |         width: 800,
 31 |         minWidth: 600,
 32 |         minHeight: 400,
 33 |         backgroundColor: '#000'
 34 |     });
 35 |     mainWindow.loadURL('file://' + __dirname + '/index.html');
 36 |     mainWindow.setMenu(null);
 37 | 
 38 |     // open external (target="_blank") links in browser.
 39 |     mainWindow.webContents.on('new-window', (e, url) => {
 40 |         e.preventDefault();
 41 |         shell.openExternal(url);
 42 |     });
 43 | 
 44 |     mainWindow.webContents.on('devtools-opened', () => {
 45 |         mainWindow.webContents.send(OPEN_DEVTOOLS);
 46 |     });
 47 | 
 48 |     mainWindow.webContents.on('devtools-closed', () => {
 49 |         mainWindow.webContents.send(CLOSE_DEVTOOLS);
 50 |     });
 51 | 
 52 |     mainWindow.on('close', () => {
 53 |         sampleSubscription.unsubscribe();
 54 |         if (remoteWindow && !remoteWindow.isDestroyed()) {
 55 |             remoteWindow.close();
 56 |         }
 57 |     });
 58 | });
 59 | 
 60 | app.on('window-all-closed', function() {
 61 |     app.quit();
 62 | });
 63 | 
 64 | let sampleSubscription = analyzer.sample$.subscribe(sample => {
 65 |     if (mainWindow) {
 66 |         mainWindow.send(SAMPLE, sample);
 67 |     }
 68 | });
 69 | 
 70 | ipcMain.on(OPEN_REMOTE_CONTROL, () => {
 71 |     if (remoteWindow && !remoteWindow.isDestroyed()) {
 72 |         return;
 73 |     }
 74 |     remoteWindow = new BrowserWindow({
 75 |         height: 600,
 76 |         width: 400,
 77 |         minWidth: 300,
 78 |         minHeight: 200,
 79 |         backgroundColor: '#222',
 80 |         show: false,
 81 |         frame: true
 82 |     });
 83 |     remoteWindow.loadURL('file://' + __dirname + '/remote-control/index.html');
 84 |     remoteWindow.setMenu(null);
 85 |     remoteWindow.once('ready-to-show', () => {
 86 |         remoteWindow.show();
 87 |     });
 88 | });
 89 | 
 90 | ipcMain.on(CLOSE_REMOTE_CONTROL, () => {
 91 |     remoteWindow.close();
 92 |     remoteWindow = null;
 93 | });
 94 | 
 95 | ipcMain.on(START_ANALYZER, () => {
 96 |     analyzer.start();
 97 | });
 98 | 
 99 | ipcMain.on(STATE_CHANGE, (event, change) => {
100 |     mainWindow.webContents.send(STATE_CHANGE, change);
101 |     try {
102 |         if (remoteWindow && !remoteWindow.isDestroyed()) {
103 |             remoteWindow.webContents.send(STATE_CHANGE, change);
104 |         }
105 |     } catch (e) {
106 |         throw new Error('sod it all');
107 |     }
108 | })
109 | 
110 | ipcMain.on(REQUEST_DEVICE_LIST, (event) => {
111 |     event.sender.send(RECEIVE_DEVICE_LIST, analyzer.listAudioDevices());
112 | });
113 | 
114 | ipcMain.on(SET_INPUT_DEVICE_ID, (event, id) => {
115 |     analyzer.setOptions({ inputDevice: id });
116 | });
117 | 
118 | ipcMain.on(SET_GAIN, (event, val) => {
119 |     analyzer.setGain(val);
120 | });
121 | 
122 | ipcMain.on(SET_SAMPLE_RATE, (event, val) => {
123 |     analyzer.setSampleRate(val);
124 | });
125 | 
126 | ipcMain.on(TOGGLE_NORMALIZATION, (event, val) => {
127 |     analyzer.toggleNormalization(val);
128 | });
129 | 
130 | ipcMain.on(TOGGLE_FULLSCREEN, () => {
131 |     fullscreen = !fullscreen;
132 |     mainWindow.setFullScreen(fullscreen);
133 | });
134 | 
135 | ipcMain.on(TOGGLE_DEVTOOLS, () => {
136 |     mainWindow.webContents.toggleDevTools();
137 | });
138 | 


--------------------------------------------------------------------------------
/src/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "SKQW",
 3 |   "version": "1.0.0-beta.2",
 4 |   "description": "Audio Visualizer",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "Michael Bromley <michael@michaelbromley.co.uk>",
10 |   "license": "MIT",
11 |   "homepage": "https://github.com/michaelbromley/skqw",
12 |   "dependencies": {
13 |     "node-core-audio": "github:michaelbromley/node-core-audio"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/remote-control/bootstrap.ts:
--------------------------------------------------------------------------------
 1 | import 'reflect-metadata';
 2 | import 'zone.js';
 3 | 
 4 | import {enableProdMode} from '@angular/core';
 5 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 6 | import {RemoveControlModule} from './remote-control.module';
 7 | 
 8 | enableProdMode();
 9 | platformBrowserDynamic().bootstrapModule(RemoveControlModule);
10 | 


--------------------------------------------------------------------------------
/src/remote-control/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>SKQW Remote Control</title>
 6 |     <style>
 7 |         .placeholder {
 8 |             background: #15181d;
 9 |             width: 100vw;
10 |             height: 100vh;
11 |             position: absolute;
12 |             top: 0;
13 |             left: 0;
14 |             display: flex;
15 |             align-items: center;
16 |         }
17 |         .placeholder img {
18 |             width: 100vw;
19 |         }
20 |     </style>
21 | </head>
22 | <body>
23 | <div class="placeholder">
24 |     <img src="../assets/images/logo-black.svg">
25 | </div>
26 | <remote-control></remote-control>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/src/remote-control/remote-control.component.html:
--------------------------------------------------------------------------------
 1 | <v-selector></v-selector>
 2 | 
 3 | <parameter-controls [params]="(visualization.current$ | async)?.params"
 4 |                     [paramSettings]="state.paramSettings | async"
 5 |                     (updateParam)="updateParamValue($event)"></parameter-controls>
 6 | 
 7 | <settings-group groupTitle="Audio Source" (toggle)="onSettingsGroupToggle($event)">
 8 |     <input-selector [inputs]="state.inputDevices | async"
 9 |                     [selectedId]="state.selectedInputId | async"
10 |                     (inputChange)="setInputDeviceId($event)"></input-selector>
11 | 
12 |     <div class="sample-rate">
13 |         <label>Sample Rate (Hz): <span class="value">{{ state.sampleRate | async  }}</span></label>
14 |         <md-slider [value]="state.sampleRate | async"
15 |                    (change)="setSampleRate($event.value)"
16 |                    [min]="minSampleRate"
17 |                    [max]="maxSampleRate"></md-slider>
18 |     </div>
19 | 
20 | </settings-group>
21 | 


--------------------------------------------------------------------------------
/src/remote-control/remote-control.component.ts:
--------------------------------------------------------------------------------
 1 | import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, ViewEncapsulation} from '@angular/core';
 2 | import {State} from '../render/providers/state.service.';
 3 | import {MAX_SAMPLE_RATE, MIN_SAMPLE_RATE, SET_INPUT_DEVICE_ID, SET_SAMPLE_RATE} from '../common/constants';
 4 | import {ParamUpdate, Visualization} from '../common/models';
 5 | import {Observable} from 'rxjs/Observable';
 6 | import {VisualizationService} from '../render/providers/visualization.service';
 7 | import * as Ps from 'perfect-scrollbar';
 8 | const {ipcRenderer} = require('electron');
 9 | 
10 | 
11 | require('style-loader!../render/styles/app.scss');
12 | 
13 | @Component({
14 |     selector: 'remote-control',
15 |     templateUrl: './remote-control.component.html',
16 |     encapsulation: ViewEncapsulation.None,
17 |     changeDetection: ChangeDetectionStrategy.Default,
18 |     styleUrls: ['./remote-control.scss']
19 | })
20 | export class RemoteControlComponent {
21 |     minSampleRate = MIN_SAMPLE_RATE;
22 |     maxSampleRate = MAX_SAMPLE_RATE;
23 |     visualization$: Observable<Visualization>;
24 | 
25 |     constructor(public state: State,
26 |                 public visualization: VisualizationService,
27 |                 private changeDetector: ChangeDetectorRef,
28 |                 private elementRef: ElementRef) {
29 |     }
30 | 
31 |     ngAfterViewInit(): void {
32 |         const container = this.elementRef.nativeElement;
33 |         Ps.initialize(container);
34 |     }
35 | 
36 |     setSampleRate(val: number) {
37 |         if (MIN_SAMPLE_RATE <= val && val <= MAX_SAMPLE_RATE) {
38 |             this.state.update('sampleRate', val);
39 |             ipcRenderer.send(SET_SAMPLE_RATE, val);
40 |         }
41 |     }
42 | 
43 |     setInputDeviceId(id: number): void {
44 |         this.state.update('selectedInputId', id);
45 |         ipcRenderer.send(SET_INPUT_DEVICE_ID, id);
46 |     }
47 | 
48 |     onSettingsGroupToggle(): void {
49 |         const container = this.elementRef.nativeElement;
50 |         setTimeout(() => {
51 |             Ps.update(container);
52 |         }, 300);
53 |         this.changeDetector.detectChanges();
54 |     }
55 | 
56 |     updateParamValue(update: ParamUpdate): void {
57 |         this.visualization.updateParam(update);
58 |     }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/remote-control/remote-control.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {RemoteControlComponent} from './remote-control.component';
 4 | import {
 5 |     MdButtonModule, MdIconModule, MdListModule, MdMenuModule, MdSelectModule, MdSliderModule,
 6 |     MdSlideToggleModule
 7 | } from '@angular/material';
 8 | import {ReactiveFormsModule} from '@angular/forms';
 9 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
10 | import {VSelector} from '../render/components/v-selector/v-selector.component';
11 | import {ParameterControls} from '../render/components/parameter-controls/parameter-controls.component';
12 | import {SettingsGroup} from '../render/components/settings-group/settings-group.component';
13 | import {InputSelector} from '../render/components/input-selector/input-selector.component';
14 | import {State} from '../render/providers/state.service.';
15 | import {Loader} from '../render/providers/loader.service';
16 | import {CanvasService} from '../render/providers/canvas.service';
17 | import {LibraryService} from '../render/providers/library.service';
18 | import {NotificationService} from '../render/providers/notification.service';
19 | import {VisualizationService} from '../render/providers/visualization.service';
20 | import 'hammerjs';
21 | 
22 | @NgModule({
23 |     imports: [
24 |         BrowserModule,
25 |         BrowserAnimationsModule,
26 |         ReactiveFormsModule,
27 |         MdSliderModule,
28 |         MdButtonModule,
29 |         MdSelectModule,
30 |         MdListModule,
31 |         MdIconModule,
32 |         MdSlideToggleModule,
33 |         MdMenuModule
34 |     ],
35 |     declarations: [
36 |         RemoteControlComponent,
37 |         VSelector,
38 |         ParameterControls,
39 |         SettingsGroup,
40 |         InputSelector
41 |     ],
42 |     providers: [State, Loader, CanvasService, LibraryService, NotificationService, VisualizationService],
43 |     bootstrap: [RemoteControlComponent]
44 | })
45 | export class RemoveControlModule {}
46 | 


--------------------------------------------------------------------------------
/src/remote-control/remote-control.scss:
--------------------------------------------------------------------------------
 1 | @import "scrollbars";
 2 | 
 3 | html, body {
 4 |   margin: 0;
 5 |   padding: 0;
 6 | }
 7 | 
 8 | remote-control {
 9 |   background: linear-gradient(to bottom, rgba(15, 15, 25, 0.8) 0%, rgba(25, 25, 40, 0.8) 100%);
10 |   height: calc(100vh - 40px);
11 |   display: block;
12 |   position: relative;
13 |   padding: 20px;
14 | 
15 |   @include scrollbar-styles();
16 | }
17 | 


--------------------------------------------------------------------------------
/src/render/app.component.html:
--------------------------------------------------------------------------------
 1 | <visualizer [sample]="sample" [visualization]="visualization.current$ | async"></visualizer>
 2 | 
 3 | <gain-selector [gain]="state.gain | async"
 4 |                (setGain)="setGain($event)"></gain-selector>
 5 | 
 6 | <notification></notification>
 7 | 
 8 | <settings-panel (changeInputDeviceId)="setInputDeviceId($event)"
 9 |                 [current]="visualization.current$ | async"
10 |                 (setSampleRate)="setSampleRate($event)"
11 |                 (updateParam)="updateParamValue($event)"></settings-panel>
12 | 


--------------------------------------------------------------------------------
/src/render/app.component.ts:
--------------------------------------------------------------------------------
  1 | import {Component, HostListener, ViewChild, ViewEncapsulation} from '@angular/core';
  2 | import 'rxjs/observable/combineLatest';
  3 | import 'rxjs/add/operator/map';
  4 | import 'rxjs/add/operator/distinctUntilChanged';
  5 | import 'rxjs/add/operator/filter';
  6 | import 'rxjs/add/operator/take';
  7 | import 'rxjs/add/operator/merge';
  8 | import 'rxjs/add/operator/share';
  9 | import 'rxjs/add/operator/withLatestFrom';
 10 | import 'rxjs/add/operator/delay';
 11 | import 'rxjs/add/operator/skip';
 12 | import 'rxjs/add/operator/publishReplay';
 13 | import 'rxjs/observable/ConnectableObservable';
 14 | import {
 15 |     CLOSE_DEVTOOLS,
 16 |     MAX_GAIN,
 17 |     MAX_SAMPLE_RATE,
 18 |     MIN_GAIN,
 19 |     MIN_SAMPLE_RATE,
 20 |     OPEN_DEVTOOLS,
 21 |     RECEIVE_DEVICE_LIST,
 22 |     REQUEST_DEVICE_LIST,
 23 |     SAMPLE,
 24 |     SET_GAIN,
 25 |     SET_INPUT_DEVICE_ID,
 26 |     SET_SAMPLE_RATE,
 27 |     START_ANALYZER,
 28 |     TOGGLE_DEVTOOLS,
 29 |     TOGGLE_FULLSCREEN,
 30 |     TOGGLE_NORMALIZATION
 31 | } from '../common/constants';
 32 | import {Visualizer} from './components/visualizer/visualizer.component';
 33 | import {Loader} from './providers/loader.service';
 34 | import {ParamUpdate, Sample} from '../common/models';
 35 | import {State} from './providers/state.service.';
 36 | import {NotificationService} from './providers/notification.service';
 37 | import {LibraryService} from './providers/library.service';
 38 | import {VisualizationService} from './providers/visualization.service';
 39 | const {ipcRenderer} = require('electron');
 40 | const {app} = require('electron').remote;
 41 | const path = require('path');
 42 | 
 43 | require('style-loader!./styles/app.scss');
 44 | 
 45 | @Component({
 46 |     selector: 'app',
 47 |     templateUrl: './app.component.html',
 48 |     encapsulation: ViewEncapsulation.None
 49 | })
 50 | export class App {
 51 | 
 52 |     @ViewChild(Visualizer) visualizer: Visualizer;
 53 |     sample: Sample = { ft: [], ts: [] };
 54 | 
 55 |     constructor(public state: State,
 56 |                 public visualization: VisualizationService,
 57 |                 private loader: Loader,
 58 |                 private libraryService: LibraryService,
 59 |                 private notification: NotificationService) {
 60 | 
 61 |         let normalizeFt = true;
 62 |         (<any> window).skqw_toggleNormalization = () => {
 63 |             normalizeFt = !normalizeFt;
 64 |             console.log('Normalization set to ', normalizeFt);
 65 |             ipcRenderer.send(TOGGLE_NORMALIZATION, normalizeFt);
 66 |         };
 67 |     }
 68 | 
 69 |     ngOnInit(): void {
 70 |         ipcRenderer.send(REQUEST_DEVICE_LIST);
 71 |         ipcRenderer.on(RECEIVE_DEVICE_LIST, (event, list) => {
 72 |             this.state.update('inputDevices', list);
 73 |         });
 74 | 
 75 |         ipcRenderer.on(SAMPLE, (event, sample: Sample) => {
 76 |             this.sample = sample;
 77 |         });
 78 | 
 79 |         ipcRenderer.send(START_ANALYZER);
 80 | 
 81 |         ipcRenderer.on(OPEN_DEVTOOLS, () => {
 82 |             this.visualization.setDebugMode(true);
 83 |             this.notification.notify(`Debug mode enabled`);
 84 |         });
 85 |         ipcRenderer.on(CLOSE_DEVTOOLS, () => {
 86 |             this.visualization.setDebugMode(false);
 87 |             this.notification.notify(`Debug mode disabled`);
 88 |         });
 89 |     }
 90 | 
 91 |     /**
 92 |      * Handler for keyboard shortcuts
 93 |      */
 94 |     @HostListener('document:keydown', ['$event'])
 95 |     onKeydown(e: KeyboardEvent): void {
 96 |         if ((e.target as HTMLElement).tagName === 'INPUT') {
 97 |             return;
 98 |         }
 99 |         if (e.altKey === true && e.which === 82) {
100 |             // Handle alt + R - reload current visualization.
101 |             this.visualization.reload();
102 |             this.notification.notify(`Reloaded visualization`);
103 |         }
104 |         if (e.altKey === true && e.which === 70) {
105 |             // Handle alt + F - toggle fullscreen.
106 |             ipcRenderer.send(TOGGLE_FULLSCREEN);
107 |         }
108 |         if (e.ctrlKey=== true && e.shiftKey && e.which === 73) {
109 |             // Handle ctrl + shift + i - toggle devtools.
110 |             ipcRenderer.send(TOGGLE_DEVTOOLS);
111 |             this.visualization.reload();
112 |         }
113 |         if (e.which === 38) {
114 |             // increase the gain
115 |             const newValue = this.state.getValue().gain + 5;
116 |             this.setGain(newValue);
117 |         }
118 |         if (e.which === 40) {
119 |             // decrease the gain
120 |             const newValue = this.state.getValue().gain - 5;
121 |             this.setGain(newValue);
122 |         }
123 |     }
124 | 
125 |     setInputDeviceId(id: number): void {
126 |         this.state.update('selectedInputId', id);
127 |         ipcRenderer.send(SET_INPUT_DEVICE_ID, id);
128 |     }
129 | 
130 |     updateParamValue(update: ParamUpdate): void {
131 |         this.visualization.updateParam(update);
132 |     }
133 | 
134 |     setGain(val: number) {
135 |         if (MIN_GAIN <= val && val <= MAX_GAIN) {
136 |             this.state.update('gain', val);
137 |             ipcRenderer.send(SET_GAIN, val);
138 |         }
139 |     }
140 | 
141 |     setSampleRate(val: number) {
142 |         if (MIN_SAMPLE_RATE <= val && val <= MAX_SAMPLE_RATE) {
143 |             this.state.update('sampleRate', val);
144 |             ipcRenderer.send(SET_SAMPLE_RATE, val);
145 |         }
146 |     }
147 | }
148 | 


--------------------------------------------------------------------------------
/src/render/app.module.ts:
--------------------------------------------------------------------------------
 1 | import {NgModule} from '@angular/core';
 2 | import {BrowserModule} from '@angular/platform-browser';
 3 | import {ReactiveFormsModule} from '@angular/forms';
 4 | import {
 5 |     MdSliderModule, MdButtonModule, MdSelectModule, MdListModule, MdIconModule,
 6 |     MdSlideToggleModule, MdMenuModule
 7 | } from '@angular/material';
 8 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 9 | import 'hammerjs';
10 | 
11 | import {GainSelector} from './components/gain-selector/gain-selector.component';
12 | import {InputSelector} from './components/input-selector/input-selector.component';
13 | import {Notification} from './components/notification/notification.component';
14 | import {ParameterControls} from './components/parameter-controls/parameter-controls.component';
15 | import {SettingsGroup} from './components/settings-group/settings-group.component';
16 | import {SettingsPanel} from './components/settings-panel/settings-panel.component';
17 | import {VSelector} from './components/v-selector/v-selector.component';
18 | import {Visualizer} from './components/visualizer/visualizer.component';
19 | import {App} from './app.component';
20 | import {NotificationService} from './providers/notification.service';
21 | import {State} from './providers/state.service.';
22 | import {Loader} from './providers/loader.service';
23 | import {CanvasService} from './providers/canvas.service';
24 | import {LibraryService} from './providers/library.service';
25 | import {VisualizationService} from './providers/visualization.service';
26 | 
27 | @NgModule({
28 |     imports: [
29 |         BrowserModule,
30 |         BrowserAnimationsModule,
31 |         ReactiveFormsModule,
32 |         MdSliderModule,
33 |         MdButtonModule,
34 |         MdSelectModule,
35 |         MdListModule,
36 |         MdIconModule,
37 |         MdSlideToggleModule,
38 |         MdMenuModule
39 |     ],
40 |     declarations: [
41 |         App,
42 |         GainSelector,
43 |         InputSelector,
44 |         Notification,
45 |         ParameterControls,
46 |         SettingsGroup,
47 |         SettingsPanel,
48 |         VSelector,
49 |         Visualizer,
50 |     ],
51 |     providers: [
52 |         Loader,
53 |         LibraryService,
54 |         State,
55 |         NotificationService,
56 |         CanvasService,
57 |         VisualizationService
58 |     ],
59 |     bootstrap: [App]
60 | })
61 | export class AppModule {}
62 | 


--------------------------------------------------------------------------------
/src/render/bootstrap.ts:
--------------------------------------------------------------------------------
 1 | import 'reflect-metadata';
 2 | import 'zone.js';
 3 | 
 4 | import {enableProdMode} from '@angular/core';
 5 | import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 6 | import {AppModule} from './app.module';
 7 | 
 8 | enableProdMode();
 9 | platformBrowserDynamic().bootstrapModule(AppModule);
10 | 


--------------------------------------------------------------------------------
/src/render/components/gain-selector/gain-selector.component.html:
--------------------------------------------------------------------------------
 1 | <div class="gain-selector-container" [class.active]="active">
 2 |     <md-slider vertical
 3 |                [value]="gain"
 4 |                (change)="setGain.emit($event.value)"
 5 |                [min]="minGain"
 6 |                [max]="maxGain"></md-slider>
 7 | 
 8 |     <div class="label">Gain: <span class="value">{{ gain }}</span></div>
 9 | 
10 |     <!--<div class="skqw-control">
11 |         <label>Sample Rate (Hz): {{ state.sampleRate | async }}</label>
12 |         <input type="range"
13 |                class="dark"
14 |                (input)="setSampleRate.emit($event.target.value)"
15 |                [value]="state.sampleRate"
16 |                [min]="minSampleRate"
17 |                [max]="maxSampleRate"
18 |                step="10">
19 |     </div>-->
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/render/components/gain-selector/gain-selector.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input, Output, EventEmitter, HostListener, SimpleChanges} from '@angular/core';
 2 | import {AppState} from '../../providers/state.service.';
 3 | import {MAX_GAIN, MIN_GAIN, MIN_SAMPLE_RATE, MAX_SAMPLE_RATE} from '../../../common/constants';
 4 | 
 5 | @Component({
 6 |     selector: 'gain-selector',
 7 |     templateUrl: './gain-selector.component.html',
 8 |     styleUrls: ['./gain-selector.scss']
 9 | })
10 | export class GainSelector {
11 |     @Input() gain: number;
12 |     @Output() setGain = new EventEmitter<number>();
13 |     maxGain = MAX_GAIN;
14 |     minGain = MIN_GAIN;
15 |     active: boolean = false;
16 |     hoverTimer: any;
17 | 
18 |     ngOnChanges(changes: SimpleChanges): void {
19 |         this.displayUiElements();
20 |     }
21 | 
22 |     @HostListener('document:mouseenter')
23 |     onMouseOver(): void {
24 |         this.displayUiElements();
25 |     }
26 | 
27 |     @HostListener('document:mousemove')
28 |     onMouseMove(): void {
29 |         this.displayUiElements();
30 |     }
31 | 
32 |     @HostListener('document:mouseleave')
33 |     onMouseOut(): void {
34 |         this.active = false;
35 |     }
36 | 
37 |     displayUiElements(): void {
38 |         this.active = true;
39 | 
40 |         clearTimeout(this.hoverTimer);
41 |         this.hoverTimer = setTimeout(() => {
42 |             this.active = false;
43 |         }, 3000);
44 |     }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/render/components/gain-selector/gain-selector.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 |   position: absolute;
 4 |   left: 20px;
 5 |   bottom: 20px;
 6 | 
 7 |   .gain-selector-container {
 8 |     padding: 10px;
 9 |     opacity: 0;
10 |     transition: opacity 0.8s;
11 |     display: flex;
12 |     flex-direction: column;
13 | 
14 |     &.active {
15 |       opacity: 1;
16 |     }
17 | 
18 |     /deep/ .md-slider-track {
19 |       background-color: #bbb;
20 |     }
21 | 
22 | 
23 |     .label {
24 |       color: rgba(230, 230, 230, 0.8);
25 |       min-width: 100px;
26 |       text-transform: uppercase;
27 |       font-size: 14px;
28 |       .value {
29 |         font-weight: bold;
30 |       }
31 |     }
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/render/components/input-selector/input-selector.component.html:
--------------------------------------------------------------------------------
 1 | <div class="control">
 2 |     <div class="select">
 3 |         <md-select *ngIf="inputArray && inputArray.length"
 4 |                    placeholder="Audio Source"
 5 |                    [formControl]="selectControl">
 6 |             <md-option *ngFor="let input of inputArray"
 7 |                        [value]="input.id">{{ input.name }}</md-option>
 8 |         </md-select>
 9 |     </div>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/src/render/components/input-selector/input-selector.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, EventEmitter, Input, Output} from '@angular/core';
 2 | import {FormControl} from '@angular/forms';
 3 | import {Subscription} from 'rxjs/Subscription';
 4 | 
 5 | @Component({
 6 |     selector: 'input-selector',
 7 |     templateUrl: './input-selector.component.html',
 8 |     styleUrls: ['./input-selector.scss']
 9 | })
10 | export class InputSelector {
11 | 
12 |     @Input() inputs: { [id: number]: string }; 
13 |     @Input() selectedId: number;
14 |     @Output() inputChange = new EventEmitter<number>(); 
15 |     inputArray: { id: string; name: string; }[] = [];
16 |     selectControl = new FormControl();
17 |     subscription: Subscription;
18 | 
19 |     ngOnInit(): void {
20 |         this.subscription = this.selectControl.valueChanges
21 |             .subscribe(value => {
22 |                 this.inputChange.emit(Number(value));
23 |             })
24 |     }
25 | 
26 |     ngOnChanges(changes: any): void {
27 |         if (this.inputArray.length === 0) {
28 |             for (let id in this.inputs) {
29 |                 let name = this.inputs[id];
30 |                 this.inputArray.push({ id, name });
31 |             }
32 |             this.selectControl.setValue(this.selectedId.toString());
33 |         }
34 |     }
35 | 
36 |     ngOnDestroy(): void {
37 |         this.subscription.unsubscribe();
38 |     }
39 | 
40 | }
41 | 


--------------------------------------------------------------------------------
/src/render/components/input-selector/input-selector.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: block;
 3 |   margin: 20px 0 10px;
 4 | }
 5 | 
 6 | /deep/ md-select {
 7 |   width: 100%;
 8 |   color: #888;
 9 | }
10 | 
11 | /deep/ .mat-select-arrow {
12 |   color: #888;
13 | }
14 | 
15 | /deep/ .mat-select-value {
16 |   color: #ccc;
17 | }
18 | 
19 | /deep/ .mat-select-trigger {
20 |   color: #aaa;
21 |   border-bottom: 1px solid #888;
22 | }


--------------------------------------------------------------------------------
/src/render/components/notification/notification.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from '@angular/core';
 2 | import {Subscription} from 'rxjs/Subscription';
 3 | import {NotificationService} from '../../providers/notification.service';
 4 | 
 5 | @Component({
 6 |     selector: 'notification',
 7 |     template: `<div class="notification-message" [class.visible]="visible">{{ message }}</div>`,
 8 |     styleUrls: ['./notification.scss']
 9 | })
10 | export class Notification {
11 |     visible: boolean = false;
12 |     message: string = '';
13 |     private sub: Subscription;
14 |     private timer: any;
15 | 
16 |     constructor(private notificationService: NotificationService) {}
17 | 
18 |     ngOnInit(): void {
19 |         this.sub = this.notificationService.messages$
20 |             .subscribe((message: string) => {
21 |                 this.message = message;
22 |                 this.visible = true;
23 |                 clearTimeout(this.timer);
24 |                 this.timer = setTimeout(() => this.visible = false, 4000);
25 |             });
26 |     }
27 | 
28 |     ngOnDestroy(): void {
29 |         this.sub.unsubscribe();
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/render/components/notification/notification.scss:
--------------------------------------------------------------------------------
 1 | .notification-message {
 2 |   position: absolute;
 3 |   // text-transform: uppercase;
 4 |   text-shadow: 0px 0px 9px rgba(0, 163, 147, 1);
 5 |   width: 100%;
 6 |   bottom: 0;
 7 |   padding: 20px;
 8 |   text-align: center;
 9 |   font-size: 24px;
10 |   color: #999;
11 |   background-color: transparent;
12 |   opacity: 0;
13 |   transition: opacity 0.8s;
14 |   &.visible {
15 |     opacity: 0.8;
16 |     transition: opacity 0.3s;
17 |   }
18 | }


--------------------------------------------------------------------------------
/src/render/components/parameter-controls/parameter-controls.component.html:
--------------------------------------------------------------------------------
 1 | <div class="parameter-controls">
 2 | 
 3 |     <div class="parameter" *ngFor="let item of paramsArray">
 4 |         <div *ngIf="item.param.type === 'range'" class="skqw-control">
 5 |             <label>{{ item.param.label }}
 6 |                 <span class="value">{{ (paramSettings[item.key] || item.param.value) | number: '1.0-3' }}</span>
 7 |             </label>
 8 |             <md-slider  [value]="paramSettings[item.key] || item.param.value"
 9 |                         [min]="item.param.min"
10 |                         [step]="item.param.step"
11 |                         [max]="item.param.max"
12 |                         (change)="updateValue(item.key, $event.value)">yolo</md-slider>
13 |         </div>
14 | 
15 |         <div *ngIf="item.param.type === 'boolean'" class="skqw-control">
16 |             <md-slide-toggle (change)="updateValue(item.key, $event.checked)"
17 |                              [checked]="paramSettings[item.key] || item.param.value"> {{ item.param.label }}</md-slide-toggle>
18 |         </div>
19 |     </div>
20 | 
21 | </div>


--------------------------------------------------------------------------------
/src/render/components/parameter-controls/parameter-controls.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, Input, EventEmitter, Output, SimpleChange} from '@angular/core';
 2 | import {Parameter, ParamUpdate} from '../../../common/models';
 3 | import {ParamSettingsMap} from '../../providers/state.service.';
 4 | 
 5 | @Component({
 6 |     selector: 'parameter-controls',
 7 |     templateUrl: './parameter-controls.component.html',
 8 |     styleUrls: ['./parameter-controls.scss']
 9 | }) 
10 | export class ParameterControls {
11 |     @Input() params: { [name: string]: Parameter };
12 |     @Input() paramSettings: ParamSettingsMap;
13 |     @Output() updateParam = new EventEmitter<ParamUpdate>();
14 |     paramsArray: { key: string; param: Parameter }[] = [];
15 | 
16 |     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
17 |         let newParams = changes['params'] && changes['params'].currentValue;
18 |         if (newParams) {
19 |             let keys = Object.keys(newParams);
20 |             this.paramsArray = keys.map(key => ({key, param: newParams[key]}));
21 |             this.paramSettings = Object.keys(newParams).reduce((settings, key) => {
22 |                 settings[key] = newParams[key].value;
23 |                 return settings;
24 |             }, {});
25 |         } else if (!this.params) {
26 |             this.paramsArray = [];
27 |         }
28 |     }
29 | 
30 |     updateValue(paramKey: string, newValue: number | boolean): void {
31 |         // coerce the value into the correct type
32 |         let coercedValue;
33 |         switch (this.params[paramKey].type) {
34 |             case 'range':
35 |                 coercedValue = +newValue;
36 |                 break;
37 |             case 'boolean':
38 |                 coercedValue = !!newValue;
39 |                 break;
40 |             default:
41 |                 coercedValue = newValue;
42 |         }
43 |         this.updateParam.emit({paramKey, newValue: coercedValue});
44 |     }
45 | }
46 |  


--------------------------------------------------------------------------------
/src/render/components/parameter-controls/parameter-controls.scss:
--------------------------------------------------------------------------------
 1 | @import "variables";
 2 | 
 3 | :host {
 4 |   display: block;
 5 |   margin: 10px 0 30px;
 6 | }
 7 | 
 8 | .parameter-controls {
 9 |   color: #bbb;
10 | 
11 |   /deep/ .md-slider-track {
12 |     background-color: #bbb;
13 |   }
14 | 
15 |   .skqw-control {
16 |     @include inline-slider(65%);
17 |   }
18 | }


--------------------------------------------------------------------------------
/src/render/components/settings-group/settings-group.component.html:
--------------------------------------------------------------------------------
 1 | <div class="settings-group-container" [ngClass]="{ visible: visible }">
 2 |     <div class="group-title" (click)="onToggle()">
 3 |         <div class="name">{{ groupTitle }}</div>
 4 |         <div class="toggle-icon">
 5 |            <md-icon>keyboard_arrow_right</md-icon>
 6 |        </div>
 7 |     </div>
 8 | 
 9 |     <div class="group-content">
10 |         <div class="content-wrapper" #wrapper>
11 |             <ng-content></ng-content>
12 |         </div>
13 |     </div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/src/render/components/settings-group/settings-group.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, ElementRef, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 2 | 
 3 | @Component({
 4 |     selector: 'settings-group',
 5 |     templateUrl: './settings-group.component.html',
 6 |     styleUrls: ['./settings-group.scss']
 7 | })
 8 | export class SettingsGroup {
 9 |     @Input() groupTitle: string;
10 |     @Input() visible: boolean = false;
11 |     @Output() toggle = new EventEmitter<boolean>();
12 |     @ViewChild('wrapper') wrapper: ElementRef;
13 | 
14 |     onToggle(): void {
15 |         this.visible = !this.visible;
16 |         this.toggle.emit(this.visible);
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/render/components/settings-group/settings-group.scss:
--------------------------------------------------------------------------------
 1 | @import "variables";
 2 | 
 3 | .settings-group-container {
 4 |   margin-bottom: 20px;
 5 |   color: #afafaf;
 6 | 
 7 |   .group-title {
 8 |     cursor: pointer;
 9 |     display: flex;
10 |     align-items: center;
11 |     font-size: 14px;
12 |     letter-spacing: 2px;
13 |     word-spacing: 3px;
14 |     text-transform: uppercase;
15 |     background-color: rgba(0, 0, 0, 0.4);
16 |     color: $primary-color;
17 |     padding: 2px 8px 0;
18 |   }
19 | 
20 |   .name {
21 |     height: 20px;
22 |   }
23 | 
24 |   .toggle-icon {
25 |     transform: rotateZ(0deg);
26 |     transition: transform 0.2s;
27 |   }
28 | 
29 |   &.visible {
30 |     .toggle-icon {
31 |       transform: rotateZ(90deg);
32 |     }
33 |   }
34 | 
35 |   &.visible .group-content {
36 |     max-height: 500px;
37 |     opacity: 1;
38 |   }
39 | 
40 |   > .group-content {
41 |     opacity: 0;
42 |     max-height: 0;
43 |     overflow: hidden;
44 |     padding-top: 10px;
45 |     transition: max-height 0.2s, opacity 0.4s;
46 |     will-change: max-height, opacity;
47 | 
48 |     .content-wrapper {
49 |       // required so that collapsed margins in child elements
50 |       // get measured when getting the wrapper's height.
51 |       border: 1px solid transparent;
52 |       padding-left: 5px;
53 |     }
54 |   }
55 | }


--------------------------------------------------------------------------------
/src/render/components/settings-panel/settings-panel.component.html:
--------------------------------------------------------------------------------
 1 | <div class="panel-container" [ngClass]="{ visible: iconVisible, expanded: expanded }">
 2 |     <div class="toggle-icon" (click)="expanded = !expanded">
 3 |         <button md-fab><md-icon>
 4 |             <span *ngIf="!expanded">settings</span>
 5 |             <span *ngIf="expanded">close</span>
 6 |         </md-icon></button>
 7 |     </div>
 8 | 
 9 |     <div class="panel-body">
10 | 
11 |         <div class="remote-toggle" title="Open remote controls" (click)="openRemoteControls()">
12 |             <md-icon>open_in_new</md-icon>
13 |         </div>
14 | 
15 |         <v-selector></v-selector>
16 | 
17 |         <parameter-controls [params]="current?.params"
18 |                             [paramSettings]="state.paramSettings | async"
19 |                             (updateParam)="updateParam.emit($event)"></parameter-controls>
20 | 
21 |         <settings-group groupTitle="Audio Source" (toggle)="onSettingsGroupToggle($event)">
22 |             <input-selector [inputs]="state.inputDevices | async"
23 |                             [selectedId]="state.selectedInputId | async"
24 |                             (inputChange)="changeInputDeviceId.emit($event)"></input-selector>
25 | 
26 |             <div class="sample-rate">
27 |                 <label>Sample Rate (Hz): <span class="value">{{ state.sampleRate | async  }}</span></label>
28 |                 <md-slider [value]="state.sampleRate | async"
29 |                            (change)="setSampleRate.emit($event.value)"
30 |                            [min]="minSampleRate"
31 |                            [max]="maxSampleRate"></md-slider>
32 |             </div>
33 | 
34 |         </settings-group>
35 | 
36 |         <settings-group groupTitle="Keyboard Shortcuts" (toggle)="onSettingsGroupToggle($event)">
37 |             <ul class="shortcuts">
38 |                 <li><code>▲</code> <span class="key">Increase gain</span></li>
39 |                 <li><code>▼</code> <span class="key">Decrease gain</span></li>
40 |                 <li><code>alt</code> + <code>r</code> <span class="key">Reload current visualization</span></li>
41 |                 <li><code>alt</code> + <code>f</code> <span class="key">Toggle full screen mode</span></li>
42 |                 <li><code>ctrl</code> + <code>shift</code> + <code>i</code> <span class="key">Toggle developer tools</span></li>
43 |             </ul>
44 |         </settings-group>
45 | 
46 |         <settings-group groupTitle="About" (toggle)="onSettingsGroupToggle($event)">
47 |             <div class="about">
48 |                 <img src="../../../assets/images/logo.svg">
49 |                 <div class="version">SKQW v{{ version }}</div>
50 |                 <div class="version vendor">Three.js r{{ threeVersion }}</div>
51 |                 <a href="http://michaelbromley.github.io/skqw/" target="_blank" md-button>
52 |                     <md-icon>open_in_browser</md-icon> Documentation
53 |                 </a>
54 |             </div>
55 |         </settings-group>
56 |     </div>
57 | </div>
58 | 


--------------------------------------------------------------------------------
/src/render/components/settings-panel/settings-panel.component.ts:
--------------------------------------------------------------------------------
 1 | import {Component, ElementRef, HostListener, Input, EventEmitter, Output} from '@angular/core';
 2 | import {Observable} from 'rxjs';
 3 | import {State} from '../../providers/state.service.';
 4 | import {ParamUpdate, Visualization} from '../../../common/models';
 5 | import {MIN_SAMPLE_RATE, MAX_SAMPLE_RATE, OPEN_REMOTE_CONTROL} from '../../../common/constants';
 6 | import * as Ps from 'perfect-scrollbar'
 7 | import * as path from 'path';
 8 | const {ipcRenderer} = require('electron');
 9 | 
10 | declare const VERSION: string;
11 | const THREE = (global as any).require(path.join(__dirname, 'vendor/three/three'));
12 | 
13 | @Component({
14 |     selector: 'settings-panel',
15 |     templateUrl: './settings-panel.component.html',
16 |     styleUrls: ['./settings-panel.scss']
17 | })
18 | export class SettingsPanel {
19 |     @Input() current: Visualization;
20 |     @Output() changeInputDeviceId = new EventEmitter<number>();
21 |     @Output() setSampleRate = new EventEmitter<number>();
22 |     @Output() updateParam = new EventEmitter<ParamUpdate>();
23 |     params$: Observable<any>;
24 |     minSampleRate = MIN_SAMPLE_RATE;
25 |     maxSampleRate = MAX_SAMPLE_RATE;
26 |     iconVisible: boolean = false;
27 |     expanded: boolean = false;
28 |     version: string = VERSION;
29 |     threeVersion: string = THREE.REVISION;
30 |     private hoverTimer: any;
31 | 
32 |     constructor(public state: State,
33 |                 private elementRef: ElementRef) {
34 |     }
35 | 
36 |     ngOnDestroy(): void {
37 |         clearTimeout(this.hoverTimer);
38 |     }
39 | 
40 |     ngAfterViewInit(): void {
41 |         const container = this.elementRef.nativeElement.querySelector('.panel-body');
42 |         Ps.initialize(container);
43 |     }
44 | 
45 |     @HostListener('document:mouseenter')
46 |     onMouseOver(): void {
47 |         this.displayUiElements();
48 |     }
49 | 
50 |     @HostListener('document:mousemove')
51 |     onMouseMove(): void {
52 |         this.displayUiElements();
53 |     }
54 | 
55 |     @HostListener('document:mouseleave')
56 |     onMouseOut(): void {
57 |         this.iconVisible = false;
58 |     }
59 | 
60 |     onSettingsGroupToggle(): void {
61 |         const container = this.elementRef.nativeElement.querySelector('.panel-body');
62 |         setTimeout(() => {
63 |             Ps.update(container);
64 |         }, 300);
65 |     }
66 | 
67 |     /**
68 |      * Display the UI controls (visualization selector, settings icons) and set a timeout
69 |      * to hide them again after a delay.
70 |      */
71 |     displayUiElements(): void {
72 |         this.iconVisible = true;
73 | 
74 |         clearTimeout(this.hoverTimer);
75 |         this.hoverTimer = setTimeout(() => {
76 |             if (!this.expanded) {
77 |                 this.iconVisible = false;
78 |             }
79 |         }, 3000);
80 |     }
81 | 
82 |     openRemoteControls(): void {
83 |         ipcRenderer.send(OPEN_REMOTE_CONTROL);
84 |         this.expanded = false;
85 |     }
86 | } 
87 | 


--------------------------------------------------------------------------------
/src/render/components/settings-panel/settings-panel.scss:
--------------------------------------------------------------------------------
  1 | @import "variables";
  2 | @import '~@angular/material/theming';
  3 | @import "scrollbars";
  4 | 
  5 | @include scrollbar-styles();
  6 | 
  7 | .panel-container {
  8 |   position: absolute;
  9 |   top: 0;
 10 |   bottom: 0;
 11 |   right: 0;
 12 |   display: block;
 13 |   width: 500px;
 14 |   max-width: 90vw;
 15 |   transform: translateX(450px);
 16 |   z-index: 10;
 17 |   transition: transform 0.2s;
 18 |   transition-timing-function: cubic-bezier(.82,.11,.68,.99);
 19 |   background-color: rgba(50, 50, 50, 0);
 20 | 
 21 |   .panel-body {
 22 |     opacity: 0;
 23 |     transition: opacity 0.4s;
 24 |   }
 25 | 
 26 |   &.expanded {
 27 |     background-color: rgba(20, 20, 30, 0.85);
 28 |     border-left: 1px solid #252525;
 29 |     transform: translateX(0px);
 30 | 
 31 |     .panel-body {
 32 |       opacity: 1;
 33 |     }
 34 |   }
 35 | 
 36 |   &.visible {
 37 |     .toggle-icon {
 38 |       opacity: 1;
 39 |     }
 40 |   }
 41 | 
 42 |   .toggle-icon {
 43 |     position: absolute;
 44 |     z-index: 10;
 45 |     left: -15px;
 46 |     top: 10px;
 47 |     color: rgba(0, 0, 0, 0.89);
 48 |     transition: color 0.2s, opacity 0.8s, left 0.5s;
 49 |     cursor: pointer;
 50 |     will-change: left;
 51 |     opacity: 0;
 52 |     &:hover {
 53 |       color: rgba(33, 33, 33, 0.9);
 54 |     }
 55 |   }
 56 | 
 57 |   .panel-body {
 58 |     margin-left: 50px;
 59 |     padding: 0 20px 0 10px;
 60 |     position: relative;
 61 |     height: 100%;
 62 |     overflow: hidden;
 63 | 
 64 |     .remote-toggle {
 65 |       position: absolute;
 66 |       z-index: 11;
 67 |       top: 15px;
 68 |       right: 18px;
 69 |       color: #aeaeae;
 70 |       cursor: pointer;
 71 |       transition: color 0.2s;
 72 |       &:hover {
 73 |         color: map-get($mat-cyan, A200);
 74 |       }
 75 |     }
 76 |   }
 77 | }
 78 | 
 79 | v-selector {
 80 |   margin-top: 50px;
 81 | }
 82 | 
 83 | .sample-rate {
 84 |   @include inline-slider(55%);
 85 | }
 86 | 
 87 | ul.shortcuts {
 88 |   list-style-type: none;
 89 |   margin: 0;
 90 | 
 91 |   li {
 92 |     margin-top: 8px;
 93 |   }
 94 | 
 95 |   code {
 96 |     color: #333;
 97 |     padding: 2px 6px;
 98 |     background-color: rgba(150, 150, 150, 0.8);
 99 |     border-radius: 2px;
100 |     border: 1px solid rgb(100, 100, 100);
101 |     font-weight: bold;
102 |   }
103 | 
104 |   .key {
105 |     margin-left: 15px;
106 |   }
107 | }
108 | 
109 | .about {
110 |   text-align: center;
111 |   position: relative;
112 |   img {
113 |     width: 100%;
114 |   }
115 |   .version {
116 |     font-size: 14px;
117 |     margin-bottom: 10px;
118 |     &.vendor {
119 |       color: #888;
120 |     }
121 |   }
122 | }


--------------------------------------------------------------------------------
/src/render/components/v-selector/v-selector.component.html:
--------------------------------------------------------------------------------
 1 | <div class="v-selector-container">
 2 |     <div class="title">Visualization Library</div>
 3 |     <md-nav-list class="ps-child">
 4 |         <md-list-item *ngFor="let entry of state.library | async"
 5 |                       [class.selected]="(current$ | async)?.id === entry.id"
 6 |                       (click)="select(entry)">
 7 |             <h4 md-line class="name">{{ entry.name }}</h4>
 8 |             <p md-line class="path" [title]="entry.path"> {{ entry.path }} </p>
 9 |             <button md-icon-button [mdMenuTriggerFor]="menu" (click)="menuClick($event)">
10 |                 <md-icon>more_vert</md-icon>
11 |             </button>
12 |             <md-menu #menu="mdMenu">
13 |                 <button md-menu-item (click)="remove(entry, $event)">
14 |                     <md-icon>delete</md-icon>
15 |                     <span>Remove</span>
16 |                 </button>
17 |             </md-menu>
18 |         </md-list-item>
19 |     </md-nav-list>
20 |     <div class="empty-placeholder" *ngIf="(state.library | async).length === 0">
21 |         Library is empty!
22 |     </div>
23 |     <div class="add-button">
24 |         <button md-icon-button
25 |                 title="Add a visualization"
26 |                 color="primary"
27 |                 (click)="add()"><md-icon>add</md-icon></button>
28 |     </div>
29 | </div>
30 | 


--------------------------------------------------------------------------------
/src/render/components/v-selector/v-selector.component.ts:
--------------------------------------------------------------------------------
  1 | import {Component, ElementRef} from '@angular/core';
  2 | import {Observable} from 'rxjs/Observable';
  3 | import 'rxjs/add/operator/map';
  4 | import 'rxjs/add/operator/take';
  5 | import {LibraryEntry} from '../../../common/models';
  6 | import {State} from '../../providers/state.service.';
  7 | import {NotificationService} from '../../providers/notification.service';
  8 | import {LibraryService} from '../../providers/library.service';
  9 | import {Loader} from '../../providers/loader.service';
 10 | import {RESET_TOKEN} from '../../../common/constants';
 11 | import * as Ps from 'perfect-scrollbar'
 12 | const {dialog} = require('electron').remote;
 13 | const path = require('path');
 14 | const fs = require('fs');
 15 | 
 16 | 
 17 | const DEFAULT_LIBRARY_PATH = path.join(__dirname, 'library');
 18 | 
 19 | @Component({
 20 |     selector: 'v-selector',
 21 |     templateUrl: './v-selector.component.html',
 22 |     styleUrls: ['./v-selector.scss']
 23 | })
 24 | export class VSelector {
 25 | 
 26 |     current$: Observable<LibraryEntry>;
 27 |     activeId: string;
 28 | 
 29 |     constructor(private notificationService: NotificationService,
 30 |                 private state: State,
 31 |                 private libraryService: LibraryService,
 32 |                 private elementRef: ElementRef,
 33 |                 private loader: Loader) {
 34 |         this.current$ = state.activeId.map(id => this.libraryService.getEntry(id));
 35 |     }
 36 | 
 37 |     ngAfterViewInit(): void {
 38 |         const container = this.elementRef.nativeElement.querySelector('md-nav-list');
 39 |         Ps.initialize(container, { suppressScrollX: true });
 40 | 
 41 |         this.state.library.take(1)
 42 |             .subscribe(library => {
 43 |                 if (library.length === 0) {
 44 |                     this.loadDefaultLibrary();
 45 |                 }
 46 |             });
 47 |     }
 48 | 
 49 |     /**
 50 |      * Display a dialog for selecting the library dir.
 51 |      */
 52 |     add() {
 53 |         dialog.showOpenDialog({
 54 |             title: 'Select Visualization Folder(s)',
 55 |             defaultPath: this.state.lastPath.value || DEFAULT_LIBRARY_PATH,
 56 |             properties: ['openDirectory', 'multiSelections']
 57 |         }, (paths: string[]) => {
 58 |             const entries = this.loadFromPaths(paths);
 59 |             if (0 < entries.length) {
 60 |                 this.state.update('activeId', entries[0].id);
 61 |             }
 62 |         });
 63 |     }
 64 | 
 65 |     select(entry: LibraryEntry): void {
 66 |         this.state.update('activeId', entry.id);
 67 |     }
 68 | 
 69 |     menuClick(e: Event): void {
 70 |         e.preventDefault();
 71 |         e.stopPropagation();
 72 |     }
 73 | 
 74 |     remove(entry: LibraryEntry, e: MouseEvent): void {
 75 |         this.libraryService.removeEntry(entry.id);
 76 |         // load the first entry in the library
 77 |         const library = this.libraryService.getLibrary();
 78 |         if (0 < library.length) {
 79 |             this.state.update('activeId', library[0].id);
 80 |         } else {
 81 |             this.state.update('activeId', RESET_TOKEN);
 82 |         }
 83 |         e.stopPropagation();
 84 |         this.updateScrollbar();
 85 |     }
 86 | 
 87 |     private loadDefaultLibrary(): void {
 88 |         fs.readdir(DEFAULT_LIBRARY_PATH, (err, paths) => {
 89 |            if (err) {
 90 |                this.notificationService.notify(`Could not load default library: ${err.message}`);
 91 |            } else {
 92 |                const fullPaths = paths.map(p => path.join(DEFAULT_LIBRARY_PATH, p));
 93 |                const entries = this.loadFromPaths(fullPaths);
 94 |                if (0 < entries.length) {
 95 |                    this.state.update('activeId', entries[0].id);
 96 |                }
 97 |                this.updateScrollbar();
 98 |            }
 99 |         });
100 |     }
101 | 
102 |     private loadFromPaths(paths: string[]): LibraryEntry[] {
103 |         let entries: LibraryEntry[] = [];
104 | 
105 |         if (paths && 0 < paths.length) {
106 |             this.state.update('lastPath', path.join(paths[0], '..'));
107 |             paths.forEach(pathToScript => {
108 |                 try {
109 |                     const vis = this.loader.loadFromPath(pathToScript);
110 |                     if (vis) {
111 |                         entries.push(this.libraryService.addEntry(pathToScript, vis));
112 |                     }
113 |                 } catch (e) {
114 |                     let message: string;
115 |                     if (e.code === "ENOENT") {
116 |                         message = `File not found: "${path.join(pathToScript, 'index.js')}"`
117 |                     } else {
118 |                         message = e.toString();
119 |                     }
120 |                     this.notificationService.notify(message);
121 |                 }
122 |             });
123 |         }
124 |         return entries;
125 |     }
126 | 
127 |     private updateScrollbar(): void {
128 |         const container = this.elementRef.nativeElement.querySelector('md-nav-list');
129 |         Ps.update(container);
130 |     }
131 | }
132 | 


--------------------------------------------------------------------------------
/src/render/components/v-selector/v-selector.scss:
--------------------------------------------------------------------------------
 1 | @import "variables";
 2 | 
 3 | :host {
 4 |   display: block;
 5 |   color: #bbb;
 6 | 
 7 |   /deep/ .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
 8 |     background-color: $primary-color;
 9 |   }
10 |   /deep/ .ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
11 |     background-color: $primary-color;
12 |   }
13 |   /deep/ .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
14 |     background-color: #00BBFF;
15 |   }
16 | 
17 |   .v-selector-container {
18 |   }
19 | 
20 |   .title {
21 |     text-transform: uppercase;
22 |     font-size: 14px;
23 |     background-color: rgba(0, 0, 0, 0.4);
24 |     color: $primary-color;
25 |     letter-spacing: 2px;
26 |     padding: 8px;
27 |   }
28 | 
29 |   .empty-placeholder {
30 |     color: rgba(136, 136, 136, 0.78);
31 |     text-align: center;
32 |     margin: 20px;
33 |   }
34 | 
35 |   md-nav-list {
36 |     position: relative;
37 |     max-height: 300px;
38 |   }
39 | 
40 |   md-list-item {
41 |     color: #bbb;
42 |     border-bottom: 1px solid rgba(150, 150, 150, 0.2);
43 |     &.selected {
44 |       background-color: rgba(100, 100, 100, 0.34);
45 |     }
46 |   }
47 | 
48 |   .path {
49 |     font-size: 12px;
50 |     opacity: 0.5;
51 |   }
52 | 
53 |   .add-button {
54 |     margin-top: 10px;
55 |     display: flex;
56 |     justify-content: flex-end;
57 | 
58 |   }
59 | }


--------------------------------------------------------------------------------
/src/render/components/visualizer/defaultVisualization.ts:
--------------------------------------------------------------------------------
  1 | const {createCanvas, getSample, getDimensions} = require('skqw-core');
  2 | 
  3 | const SVG_PATHS = [
  4 |     ['m', [415.33604,13.13485], [0,159.60405], [90.71168,-159.46391], 'z'],
  5 |     ['m', [494.55651,43.24509], [16.00134,-29.56405], [76.56504,0], [-33.48324,57.99467], [-58.62437,101.54039], 'z'],
  6 |     ['m', [287.49653,164.556], [87.60014,-151.7279], [-76.17157,0], [-11.11771,19.25643], 'z'],
  7 |     ['m', [380.35367,140.61696], [-27.97241,48.44964], [28.6867,0], 'z'],
  8 |     ['m', [153.49653,164.556], [87.60014,-151.7279], [-87.60014,0], 'z'],
  9 |     ['M', [153.85367,173.4846], [206.1348,82.931], [254.15677,173.4846], 'Z'],
 10 |     ['m', [44.212271,121.6329], [-34.83732,-60.34], [27.97259,-48.44995], [68.760019,0], 'z'],
 11 |     ['m', [288.21081,173.4846], [92.2588,-159.79695], [0,103.0112], [-32.83221,56.86705], 'z'],
 12 |     ['m', [82.708141,64.02978], [34.837329,60.34], [-27.972589,48.44992], [-68.76002,0], 'z'],
 13 | ];
 14 | const ORIGINAL_WIDTH = 600;
 15 | const ORIGINAL_HEIGHT = 200;
 16 | const VOLUME_GAIN = 1.8;
 17 | 
 18 | let ctx: CanvasRenderingContext2D;
 19 | let ctxBuffer: CanvasRenderingContext2D;
 20 | let acc: number = 0;
 21 | 
 22 | function init() {
 23 |     const { width, height } = getDimensions();
 24 |     ctx = createCanvas().getContext('2d');
 25 |     ctxBuffer = document.createElement('canvas').getContext('2d');
 26 |     ctxBuffer.canvas.width = width;
 27 |     ctxBuffer.canvas.height = height;
 28 | }
 29 | 
 30 | declare var Path2D: any;
 31 | 
 32 | function tick() {
 33 |     const { width, height } = getDimensions();
 34 |     const { ft }  = getSample();
 35 | 
 36 |     let baseScale = width / (ORIGINAL_WIDTH + 600);
 37 |     let volume = 0;
 38 |     for (let i = 0; i < ft.length; i ++) {
 39 |         volume += ft[i];
 40 |     }
 41 |     // arbitrary adjustment.
 42 |     volume *= VOLUME_GAIN;
 43 |     const delta = volume - acc;
 44 |     acc += delta / 10;
 45 | 
 46 |     // center the path
 47 |     let imageWidth = ORIGINAL_WIDTH * baseScale;
 48 |     let imageHeight = ORIGINAL_HEIGHT * baseScale;
 49 |     let offsetX = (width - imageWidth) / 2;
 50 |     let offsetY = (height - imageHeight) / 2;
 51 | 
 52 |     let volumeScale = Math.log10(10 + acc) * 0.8;
 53 |     let widthDelta = imageWidth * volumeScale - imageWidth;
 54 |     let heightDelta = imageHeight * volumeScale - imageHeight;
 55 | 
 56 |     const zoom = 1.005;
 57 |     ctxBuffer.save();
 58 |     ctxBuffer.clearRect(0, 0, width, height);
 59 |     ctxBuffer.globalAlpha = Math.min(0.95 + acc / 100, 0.99);
 60 |     ctxBuffer.transform(1, 0, 0, 1, 0, -height * (zoom - 1) / 2 + (1.5 + acc / 10));
 61 |     ctxBuffer.drawImage(ctx.canvas, 0, 0);
 62 |     ctx.clearRect(0, 0, width, height);
 63 |     ctx.drawImage(ctxBuffer.canvas, 0, 0);
 64 |     ctxBuffer.restore();
 65 | 
 66 |     let bgAlpha = 1 / (volumeScale * 10);
 67 |     ctx.fillStyle = `hsla(0, 0%, 0%, ${bgAlpha})`;
 68 |     ctx.fillRect(0, 0, width, height);
 69 |     ctx.strokeStyle = `hsla(${160 + volume * 0.5}, 50%, 50%, ${0.2 + Math.min(volume / 100, 0.8)})`;
 70 | 
 71 |     ctx.save();
 72 | 
 73 |     ctx.setTransform(volumeScale, 0, 0, volumeScale, offsetX - widthDelta / 2, offsetY - heightDelta / 2 - acc / 5);
 74 | 
 75 |     ctx.lineWidth = baseScale;
 76 | 
 77 |     drawPath(ft, baseScale);
 78 | 
 79 |     ctx.restore();
 80 | }
 81 | 
 82 | function drawPath(ft, baseScale) {
 83 |     SVG_PATHS.forEach(path => {
 84 |         let svgPath = path.reduce((str: string, item: any, i: number) => {
 85 |             if (typeof item === 'string') {
 86 |                 return str + item;
 87 |             } else {
 88 |                 let sign = Math.sin(ft[i] / 30);
 89 |                 let skew = Math.pow(ft[i], 1.5) * sign;
 90 |                 return str + `${item[0] * baseScale + skew}, ${item[1] * baseScale + skew} `;
 91 |             }
 92 |         }, '');
 93 | 
 94 |         let newPath = new Path2D(svgPath);
 95 | 
 96 |         ctx.fillStyle = `hsla(${240 - acc / 2}, 50%, ${50 + Math.min(acc / 6, 40)}%, ${Math.min(acc / 500, 0.2)})`;
 97 |         ctx.fill(newPath);
 98 | 
 99 |         // the TS lib does not know about Path2D.
100 |         (<any> ctx).stroke(newPath);
101 |     });
102 | }
103 | 
104 | function resize() {
105 |     const { width, height } = getDimensions();
106 |     ctxBuffer.canvas.width = width;
107 |     ctxBuffer.canvas.height = height;
108 | }
109 | 
110 | export const defaultVis = {
111 |     name: 'SKQW',
112 |     init,
113 |     tick,
114 |     resize
115 | };
116 | 


--------------------------------------------------------------------------------
/src/render/components/visualizer/visualizer.component.ts:
--------------------------------------------------------------------------------
  1 | import {Component, ElementRef, HostBinding, Input, SimpleChange} from '@angular/core';
  2 | import {Visualization, Sample, ParamUpdate} from '../../../common/models';
  3 | import {CanvasService} from '../../providers/canvas.service';
  4 | import {NotificationService} from '../../providers/notification.service';
  5 | import {State} from '../../providers/state.service.';
  6 | 
  7 | const MAX_ERRORS = 10;
  8 | 
  9 | @Component({
 10 |     selector: 'visualizer',
 11 |     template: ``,
 12 |     styleUrls: ['./visualizer.scss']
 13 | })
 14 | export class Visualizer {
 15 | 
 16 |     @Input() sample: Sample;
 17 |     @Input() visualization: Visualization;
 18 |     @HostBinding('class.running')
 19 |     isRunning: boolean = false;
 20 |     private resizeTimer: any;
 21 |     private onResizeFn: Function;
 22 |     private rafId: any;
 23 |     private errorCount = 0;
 24 | 
 25 |     private tick = (timestamp) => {
 26 |         if (this.isRunning && this.visualization.tick) {
 27 |             try {
 28 |                 this.visualization.tick(timestamp);
 29 |             } catch (e) {
 30 |                     this.errorCount++;
 31 |                     console.error(e);
 32 |             }
 33 |             if (this.errorCount < MAX_ERRORS) {
 34 |                 this.rafId = requestAnimationFrame(this.tick);
 35 |             } else {
 36 |                 this.notification.notify(`Halting visualization: too many errors!`);
 37 |                 this.stop();
 38 |             }
 39 |         }
 40 |     };
 41 | 
 42 |     constructor(private elementRef: ElementRef,
 43 |                 private state: State,
 44 |                 private notification: NotificationService,
 45 |                 private canvasService: CanvasService) {
 46 |         canvasService.registerHostElement(elementRef);
 47 |     }
 48 | 
 49 |     ngOnInit(): void {
 50 |         window.addEventListener('resize', this.resizeHandler.bind(this));
 51 |         this.resizeHandler();
 52 |     }
 53 | 
 54 |     ngOnChanges(changes: {[key: string]: SimpleChange}): void {
 55 |         if (changes['visualization']) {
 56 |             this.stop(changes['visualization'].previousValue);
 57 |             if (this.visualization && this.visualization.init) {
 58 |                 try {
 59 |                     this.visualization.init();
 60 |                 } catch (e) {
 61 |                     console.log(e);
 62 |                 }
 63 |                 this.start();
 64 |             }
 65 |         }
 66 |     }
 67 | 
 68 |     start() {
 69 |         this.errorCount = 0;
 70 |         this.isRunning = true;
 71 |         this.rafId = requestAnimationFrame(this.tick);
 72 |     }
 73 | 
 74 |     stop(visualization?: Visualization) {
 75 |         if (this.rafId) {
 76 |             cancelAnimationFrame(this.rafId);
 77 |         }
 78 |         if (visualization && typeof visualization.destroy === 'function') {
 79 |             try {
 80 |                 visualization.destroy();
 81 |             } catch (e) {
 82 |                 console.log(e);
 83 |             }
 84 |         }
 85 |         this.isRunning = false;
 86 |         this.canvasService.destroyCanvases();
 87 |         this.onResizeFn = null;
 88 |     }
 89 | 
 90 |     /**
 91 |      * Debounce the resize handler since the resize even gets fired rapidly in
 92 |      * succession as the user resizes.
 93 |      */
 94 |     resizeHandler() {
 95 |         clearTimeout(this.resizeTimer);
 96 |         this.resizeTimer = setTimeout(() => {
 97 |             this.canvasService.updateDimensions();
 98 |             if (this.visualization && typeof this.visualization.resize === 'function') {
 99 |                 try {
100 |                     this.visualization.resize();
101 |                 } catch (e) {
102 |                     console.log(e);
103 |                 }
104 |             }
105 |         }, 100);
106 |     }
107 | }
108 | 


--------------------------------------------------------------------------------
/src/render/components/visualizer/visualizer.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   position: absolute;
 3 |   top: 0;
 4 |   left: 0;
 5 |   right: 0;
 6 |   bottom: 0;
 7 | 
 8 |   &.running {
 9 |     background: #000;
10 |   }
11 | 
12 |   /deep/ canvas {
13 |     position: absolute;
14 |     top: 0;
15 |     left: 0;
16 |     right: 0;
17 |     bottom: 0;
18 |   }
19 | }
20 | 
21 | 
22 | 


--------------------------------------------------------------------------------
/src/render/main.aot.ts:
--------------------------------------------------------------------------------
1 | import 'reflect-metadata';
2 | import 'zone.js';
3 | import {enableProdMode} from '@angular/core';
4 | import {platformBrowser} from '@angular/platform-browser';
5 | import {AppModuleNgFactory} from './ngfactory/src/render/app.module.ngfactory';
6 | 
7 | enableProdMode();
8 | platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
9 | 


--------------------------------------------------------------------------------
/src/render/modules/beat-detector.ts:
--------------------------------------------------------------------------------
 1 | import {getSample} from './skqw-core';
 2 | import {ExponentialSmoother} from './exponential-smoother';
 3 | 
 4 | function sum(a, b) { return a + b }
 5 | 
 6 | // Let's assume that the maximum BPM we can detect is 180.
 7 | // So we can set a minimum interval in milliseconds.
 8 | const MIN_INTERVAL = 60 / 180 * 1000;
 9 | 
10 | /**
11 |  * Does what it says on the tin. Experimental and a rather naive implementation at the moment.
12 |  */
13 | export class BeatDetector {
14 | 
15 |     peak: number = 0;
16 |     lastBeatTimestamp: number;
17 |     intervalBuffer = [];
18 |     valueBuffer = [];
19 |     bufferSize = 30;
20 |     smoothedKick = new ExponentialSmoother(0.1);
21 | 
22 |     constructor(private decay: number = 0.5, private threshold: number = 0.1) {}
23 | 
24 |     /**
25 |      * Checks for the presence of a beat, and returns a 1 or a 0.
26 |      * 1 = beat
27 |      * 0 = no beat
28 |      */
29 |     checkForBeat(timestamp: number): number {
30 |         if (typeof timestamp !== 'number') {
31 |             throw new Error(`timestamp argument must be a number, got [${typeof timestamp}]`);
32 |         }
33 |         // Since analyzer.js uses a sample rate of 8000, and the sample size is 256, we have 128 bin in our FFT.
34 |         // So to calculate the frequency represented by a bin i, we use 8000 / 128 * i.
35 |         // We will focus on bins 2 and 3 only, which should cover 62.5 to 187.5 hz.
36 |         let ft = getSample().ft;
37 |         let beatVal = 0;
38 | 
39 |         let currentVal = this.smoothedKick.sumAndProcess([ft[1], ft[2]]);
40 |         let mean = this.meanValue() || 0.5;
41 |         let normalizedCurrentValue = currentVal / mean;
42 |         let normalizedPeak = this.peak / mean;
43 |         let normalizedDelta = normalizedCurrentValue - normalizedPeak;
44 |         if (this.threshold < normalizedDelta) {
45 |             this.peak = currentVal;
46 |             let interval: number;
47 |             if (!this.lastBeatTimestamp) {
48 |                 interval = 0;
49 |             } else {
50 |                 interval = timestamp - this.lastBeatTimestamp;
51 |             }
52 |             if (interval === 0 || MIN_INTERVAL < interval) {
53 |                 beatVal = 1;
54 |                 this.lastBeatTimestamp = timestamp;
55 |                 this.intervalBuffer.push(interval);
56 |                 if (this.bufferSize <= this.intervalBuffer.length) {
57 |                     this.intervalBuffer.shift();
58 |                 }
59 |                 this.valueBuffer.push(currentVal);
60 |                 if (this.bufferSize <= this.valueBuffer.length) {
61 |                     this.valueBuffer.shift();
62 |                 }
63 |             }
64 |         }
65 | 
66 |         if (this.decay < this.peak) {
67 |             this.peak -= this.decay;
68 |         }
69 | 
70 |         return beatVal;
71 |     }
72 | 
73 |     /**
74 |      * Not sure what use it is to give the BPM, and currently this is rather inaccurate. A better
75 |      * approach is using a histogram as outlined here: https://github.com/JMPerez/beats-audio-api/
76 |      */
77 |     getBpm(): number {
78 |         if (0 < this.intervalBuffer.length) {
79 |             let meanInterval = this.intervalBuffer.reduce(sum) / this.intervalBuffer.length;
80 |             return 60000 / meanInterval;
81 |         } else {
82 |             return 0;
83 |         }
84 |     }
85 | 
86 |     private meanValue(): number {
87 |         if (0 < this.valueBuffer.length) {
88 |             return this.valueBuffer.reduce(sum) / this.valueBuffer.length
89 |         } else {
90 |             return 0;
91 |         }
92 |     }
93 | 
94 | }


--------------------------------------------------------------------------------
/src/render/modules/exponential-smoother.ts:
--------------------------------------------------------------------------------
 1 | function sum(a, b) { return a + b }
 2 | 
 3 | /**
 4 |  * An implementation of an exponential smoothing filter (https://en.wikipedia.org/wiki/Exponential_smoothing)
 5 |  * The purpose is to reduce the inherent noise in the audio signal to produce a smoother, more even output.
 6 |  */
 7 | export class ExponentialSmoother {
 8 | 
 9 |     set smoothingFactor(val: any) {
10 |         if (typeof val !== 'number') {
11 |             val = parseFloat(val);
12 |         }
13 |         if (val < 0 || 1 < val) {
14 |             throw new Error(`The smoothingFactor must be a number between 0 and 1. Got ${val}`);
15 |         }
16 |         this.alpha = val;
17 |     }
18 |     private alpha: number;
19 | 
20 |     private outputArray: number[] = [];
21 |     private outputSum: number = 0;
22 | 
23 |     constructor(smoothingFactor: number) {
24 |         this.smoothingFactor = smoothingFactor;
25 |     }
26 | 
27 |     process(input: number[]): number[] {
28 |         let length = input.length;
29 |         if (this.outputArray.length !== length) {
30 |             // initialize the output array to the correct length
31 |             this.outputArray = Array.from({ length }, () => 0);
32 |         }
33 | 
34 |         for (let i = 0; i < length; i++) {
35 |             let delta = input[i] - this.outputArray[i];
36 |             this.outputArray[i] += delta * this.alpha;
37 |         }
38 | 
39 |         return this.outputArray;
40 |     }
41 | 
42 |     sumAndProcess(input: number[]): number {
43 |         let inputSum = input.reduce(sum);
44 |         let delta = inputSum - this.outputSum;
45 |         this.outputSum += delta * this.alpha;
46 |         return this.outputSum;
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/render/modules/skqw-core.ts:
--------------------------------------------------------------------------------
 1 | import {CanvasService} from '../providers/canvas.service';
 2 | import {Sample} from '../../common/models';
 3 | import {SAMPLE} from '../../common/constants';
 4 | import {Context} from 'vm';
 5 | const ipcRenderer = require('electron').ipcRenderer;
 6 | const path = require('path');
 7 | const fs = require('fs');
 8 | const vm = require('vm');
 9 | 
10 | let lastSample: Sample;
11 | ipcRenderer.on(SAMPLE, (event, sample: Sample) => {
12 |     lastSample = sample;
13 | });
14 | 
15 | /**
16 |  * For use by other internal modules.
17 |  */
18 | export function getSample(): Sample {
19 |     return lastSample;
20 | }
21 | 
22 | /**
23 |  * Creates the module that is returned by calling `require('skqw-core')`. Provides the core API for
24 |  * building a visualization.
25 |  */
26 | export function createCoreModule(canvasService: CanvasService, visPath: string, sandbox?: Context) {
27 |     return {
28 |         createCanvas(): HTMLCanvasElement {
29 |             return canvasService.create();
30 |         },
31 |         getSample(): Sample {
32 |             return lastSample
33 |         },
34 |         getDimensions() {
35 |             return canvasService.getDimensions();
36 |         },
37 |         loadScript: function loadScript(filename: string) {
38 |             let fullPath = path.join(visPath, filename);
39 |             let data = fs.readFileSync(fullPath);
40 |             // TODO: try to enable this again once https://github.com/electron/electron/pull/7909 is merged
41 |            /* if (vm.isContext(sandbox)) {
42 |                 vm.runInContext(data, sandbox, { filename });
43 |             } else {*/
44 |                 vm.runInThisContext(data, {filename});
45 |            // }
46 |         }
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/render/modules/skqw-utils.ts:
--------------------------------------------------------------------------------
1 | import {ExponentialSmoother} from './exponential-smoother';
2 | import {BeatDetector} from './beat-detector';
3 | 
4 | export const skqwUtils = {
5 |     ExponentialSmoother,
6 |     BeatDetector
7 | };
8 | 


--------------------------------------------------------------------------------
/src/render/polyfills.ts:
--------------------------------------------------------------------------------
1 | require('es6-shim');
2 | require('reflect-metadata');
3 | require('zone.js/dist/zone');
4 |  


--------------------------------------------------------------------------------
/src/render/providers/canvas.service.ts:
--------------------------------------------------------------------------------
 1 | import {ElementRef, Injectable} from '@angular/core';
 2 | import {Dimensions} from '../../common/models';
 3 | 
 4 | /**
 5 |  * Manages creating and destroying canvases for use by visualization scripts.
 6 |  */
 7 | @Injectable()
 8 | export class CanvasService {
 9 | 
10 |     private host: ElementRef;
11 |     private canvases: HTMLCanvasElement[] = [];
12 |     private dimensions: Dimensions = { width: 0, height: 0 };
13 | 
14 |     constructor() { }
15 | 
16 |     registerHostElement(host: ElementRef): void {
17 |         this.host = host;
18 |     }
19 | 
20 |     create(): HTMLCanvasElement {
21 |         let canvas = document.createElement('canvas');
22 |         let container = this.host.nativeElement;
23 |         container.appendChild(canvas);
24 |         canvas.width = container.offsetWidth;
25 |         canvas.height = container.offsetHeight;
26 |         this.canvases.push(canvas);
27 |         return canvas;
28 |     }
29 | 
30 |     destroyCanvases(): void {
31 |         this.canvases.forEach(c => {
32 |             if (c.parentNode) {
33 |                 c.parentNode.removeChild(c);
34 |             }
35 |         });
36 |         this.canvases = [];
37 |     }
38 | 
39 |     getDimensions(): Dimensions {
40 |         return this.dimensions;
41 |     }
42 | 
43 |     /**
44 |      * Update the w & h dimensions and set the canvas dimensions.
45 |      */
46 |     updateDimensions() {
47 |         this.dimensions.width = this.host.nativeElement.offsetWidth;
48 |         this.dimensions.height = this.host.nativeElement.offsetHeight;
49 | 
50 |         this.canvases.forEach((c: HTMLCanvasElement) => {
51 |             c.width = this.dimensions.width;
52 |             c.height = this.dimensions.height;
53 |         });
54 |     }
55 | 
56 | }


--------------------------------------------------------------------------------
/src/render/providers/library.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import {State} from './state.service.';
 3 | import {Visualization, LibraryEntry} from '../../common/models';
 4 | 
 5 | /**
 6 |  * This service manages the paths to the visualization scripts.
 7 |  */
 8 | @Injectable()
 9 | export class LibraryService {
10 | 
11 |     constructor(private state: State) { }
12 | 
13 |     /**
14 |      * Get all library entries.
15 |      */
16 |     getLibrary(): LibraryEntry[] {
17 |         return this.state.library.value;
18 |     }
19 | 
20 |     /**
21 |      * Get the active visualization entry
22 |      */
23 |     getActive(): LibraryEntry {
24 |         const currentId = this.state.activeId.value;
25 |         if (currentId) {
26 |             return this.getEntry(currentId);
27 |         }
28 |     }
29 | 
30 |     /**
31 |      * Get a single entry by id.
32 |      */
33 |     getEntry(id: string): LibraryEntry {
34 |         const matches = this.getLibrary().filter(e => e.id === id);
35 |         if (matches.length === 1) {
36 |             return matches[0];
37 |         }
38 |     }
39 | 
40 |     /**
41 |      * Mark the entry as having an error.
42 |      */
43 |     setError(id: string): void {
44 |         const library = this.getLibrary();
45 |         const index = library.findIndex(entry => entry.id === id);
46 |         library[index].error = true;
47 |         this.state.update('library', library);
48 |     }
49 | 
50 |     /**
51 |      * Add a path to the library
52 |      */
53 |     addEntry(path: string, visualization: Visualization): LibraryEntry {
54 |         const library = this.getLibrary();
55 |         const entry = this.generateLibraryEntry(path, visualization);
56 |         if (library.map(e => e.id).indexOf(entry.id) === -1) {
57 |             library.push(entry);
58 |             this.state.update('library', library);
59 |         }
60 |         return entry;
61 |     }
62 | 
63 |     /**
64 |      * Remove a path from the library.
65 |      */
66 |     removeEntry(id: string): void {
67 |         const library = this.getLibrary().filter(e => e.id !== id);
68 |         this.state.update('library', library);
69 |     }
70 | 
71 |     private generateLibraryEntry(path: string, visualization: Visualization): LibraryEntry {
72 |         const name = visualization.name;
73 |         const id = this.hashCode(name + JSON.stringify(visualization.params));
74 |         return {
75 |             id,
76 |             name,
77 |             path,
78 |             error: false
79 |         };
80 |     }
81 | 
82 |     /**
83 |      * Generate a hash from the string input. Based on http://stackoverflow.com/a/8831937/772859
84 |      */
85 |     private hashCode(input: string): string {
86 |     	let hash = 0;
87 |     	if (input.length == 0) {
88 |     	    return '0';
89 |         }
90 |     	for (let i = 0; i < input.length; i++) {
91 |     		let char = input.charCodeAt(i);
92 |     		hash = ((hash<<5)-hash)+char;
93 |     		hash &= hash; // Convert to 32bit integer
94 |     	}
95 |     	return Math.abs(hash).toString(36);
96 |     }
97 | 
98 | }
99 | 


--------------------------------------------------------------------------------
/src/render/providers/notification.service.ts:
--------------------------------------------------------------------------------
 1 | import {Injectable} from '@angular/core';
 2 | import {Subject} from 'rxjs/Subject';
 3 | 
 4 | /**
 5 |  * Service for displaying transient messages to the user.
 6 |  */
 7 | @Injectable()
 8 | export class NotificationService {
 9 | 
10 |     messages$ = new Subject<string>();
11 | 
12 |     notify(message: string): void {
13 |         this.messages$.next(message);
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/render/providers/state.service..ts:
--------------------------------------------------------------------------------
  1 | import {Injectable} from '@angular/core';
  2 | import {BehaviorSubject} from 'rxjs/BehaviorSubject';
  3 | import 'rxjs/add/operator/do';
  4 | import {LibraryEntry} from '../../common/models';
  5 | import * as low from 'lowdb';
  6 | import {STATE_CHANGE} from '../../common/constants';
  7 | const {ipcRenderer} = require('electron');
  8 | 
  9 | const db = new low('db.json');
 10 | 
 11 | const APP_STATE_KEY = 'SKQW_app_state';
 12 | 
 13 | export type ParamSettingsMap = { [name: string]: number | boolean };
 14 | 
 15 | export interface AppState {
 16 |     library: LibraryEntry[];
 17 |     lastPath: string;
 18 |     activeId: string;
 19 |     paramSettings: ParamSettingsMap;
 20 |     inputDevices: { [id: number]: string };
 21 |     selectedInputId: number;
 22 |     gain: number;
 23 |     sampleRate: number;
 24 | }
 25 | 
 26 | const initialState: AppState = {
 27 |     library: [],
 28 |     lastPath: '',
 29 |     activeId: '',
 30 |     paramSettings: {},
 31 |     inputDevices: {},
 32 |     selectedInputId: 0,
 33 |     gain: 100,
 34 |     sampleRate: 60
 35 | };
 36 | 
 37 | // A type which turns an interface into a version where each type is a BehaviorSubject wrapping that type.
 38 | type BehaviorSubjectify<T> = {
 39 |     [P in keyof T]: BehaviorSubject<T[P]>;
 40 | }
 41 | 
 42 | if (db.has(APP_STATE_KEY).value() === false) {
 43 |     // initialize the db with default values
 44 |     db.setState({
 45 |         [APP_STATE_KEY]: Object.keys(initialState).map(key => {
 46 |             const value = initialState[key];
 47 |             return {key, value};
 48 |         })
 49 |     });
 50 | }
 51 | 
 52 | /**
 53 |  * A state container for the entire app state, which exposes an
 54 |  * observable which emits the state on each change. State can only be changed
 55 |  * by explicitly changing the value with a setter.
 56 |  */
 57 | @Injectable()
 58 | export class State {
 59 | 
 60 |     private _state = {} as BehaviorSubjectify<AppState>;
 61 |     private id: string = Math.random().toString(36).substring(3);
 62 | 
 63 |     constructor() {
 64 |         // construct the state observables
 65 |         for (let key in initialState) {
 66 |             const storedValue = db.get(APP_STATE_KEY).find({ key }).value<{ key: string; value: any; }>().value;
 67 |             this._state[key] = new BehaviorSubject(storedValue || initialState[key]);
 68 |         }
 69 | 
 70 |         // listen to state updates from a remote instance of this StateService
 71 |         ipcRenderer.on(STATE_CHANGE, (event, change) => {
 72 |             if (change.id !== this.id) {
 73 |                 this.setValue(change.key, change.value);
 74 |             }
 75 |         });
 76 |     }
 77 | 
 78 |     get library(): BehaviorSubject<LibraryEntry[]> { return this._state.library; }
 79 |     get lastPath(): BehaviorSubject<string> { return this._state.lastPath; }
 80 |     get activeId(): BehaviorSubject<string> { return this._state.activeId; }
 81 |     get paramSettings(): BehaviorSubject<ParamSettingsMap> { return this._state.paramSettings; }
 82 |     get gain(): BehaviorSubject<number> { return this._state.gain; }
 83 |     get inputDevices(): BehaviorSubject<{ [id: number]: string }> { return this._state.inputDevices; }
 84 |     get selectedInputId(): BehaviorSubject<number> { return this._state.selectedInputId; }
 85 |     get sampleRate(): BehaviorSubject<number> { return this._state.sampleRate; }
 86 | 
 87 | 
 88 |     /**
 89 |      * Update a state value.
 90 |      */
 91 |     update(key: 'library', value: LibraryEntry[]): void;
 92 |     update(key: 'lastPath', value: string): void;
 93 |     update(key: 'activeId', value: string): void;
 94 |     update(key: 'paramSettings', value: ParamSettingsMap): void;
 95 |     update(key: 'gain', value: number): void;
 96 |     update(key: 'inputDevices', value: { [id: number]: string }): void;
 97 |     update(key: 'selectedInputId', value: number): void;
 98 |     update(key: 'sampleRate', value: number): void;
 99 |     update(key: keyof AppState, value: any): void;
100 |     update(key: keyof AppState, value: any): void {
101 |         const forceNumeric = ['gain', 'sampleRate', 'selectedInputId'];
102 |         if (-1 < forceNumeric.indexOf(key)) {
103 |             value = +value;
104 |         }
105 |         // set and emit the value internally
106 |         this.setValue(key as keyof AppState, value);
107 |         // persist the value to the db
108 |         db.get(APP_STATE_KEY).find({ key }).assign({ value }).value();
109 |         // emit a state change event
110 |         ipcRenderer.send(STATE_CHANGE, { id: this.id, key, value });
111 |     }
112 | 
113 |     /**
114 |      * Returns the complete app state value.
115 |      */
116 |     getValue(): AppState {
117 |         let plainState = {} as AppState;
118 |         for (let key in this._state) {
119 |             plainState[key] = this._state[key].getValue();
120 |         }
121 |         return plainState;
122 |     }
123 | 
124 |     ngOnDestroy(): void {
125 |         ipcRenderer.removeAllListeners();
126 |     }
127 | 
128 |     /**
129 |      * Emit the next value on the corresponding key, if it exists.
130 |      */
131 |     private setValue(key: keyof AppState, value: any): void {
132 |         if (this._state[key]) {
133 |             (this._state[key] as BehaviorSubject<any>).next(this.clone(value));
134 |         }
135 |     }
136 | 
137 |     /**
138 |      * Returns a new version of the passed value, i.e. complex objects are cloned,
139 |      * primitives are passed through.
140 |      */
141 |     private clone(obj: any[] | any): any {
142 |         if (typeof obj === 'string' || typeof obj === 'number') {
143 |             return obj;
144 |         } else if (Array.isArray(obj)) {
145 |             return obj.slice(0);
146 |         } else {
147 |             return Object.assign({}, obj);
148 |         }
149 |     }
150 | }
151 | 


--------------------------------------------------------------------------------
/src/render/providers/visualization.service.ts:
--------------------------------------------------------------------------------
  1 | import {Injectable} from '@angular/core';
  2 | import {ParamSettingsMap, State} from './state.service.';
  3 | import {ParamUpdate, Visualization} from '../../common/models';
  4 | import {Observable, Subject, Subscription} from 'rxjs';
  5 | import {RESET_TOKEN} from '../../common/constants';
  6 | import {Loader} from './loader.service';
  7 | import {LibraryService} from './library.service';
  8 | 
  9 | /**
 10 |  * Responsible for holding a reference to the currently-loaded visualization, and updating its parameters.
 11 |  */
 12 | @Injectable()
 13 | export class VisualizationService {
 14 | 
 15 |     current$: Observable<Visualization>;
 16 |     private debugMode: boolean = false;
 17 |     private reload$ = new Subject<string>();
 18 |     private subscriptions: Subscription[] = [];
 19 |     private visualization: Visualization;
 20 | 
 21 |     constructor(private state: State,
 22 |                 private libraryService: LibraryService,
 23 |                 private loader: Loader) {
 24 | 
 25 |         function isVis(input: any): input is Visualization {
 26 |             return input.hasOwnProperty('init');
 27 |         }
 28 | 
 29 |         this.current$ = this.state.activeId
 30 |             .map(id => id.toString())
 31 |             .filter(id => !!id)
 32 |             .distinctUntilChanged()
 33 |             .merge(this.reload$)
 34 |             .map(id => {
 35 |                 if (id === RESET_TOKEN) {
 36 |                     return {};
 37 |                 } else {
 38 |                     return this.loader.loadLibraryEntry(id, this.debugMode)
 39 |                 }
 40 |             })
 41 |             .filter(vis => !!vis)
 42 |             .do(vis => {
 43 |                 if (isVis(vis)) {
 44 |                     this.visualization = vis;
 45 |                 }
 46 |             })
 47 |             .publishReplay(1)
 48 |             .refCount();
 49 | 
 50 |         this.subscriptions.push(
 51 |             this.state.paramSettings
 52 |                 .startWith(this.state.paramSettings.getValue())
 53 |                 .pairwise()
 54 |                 .subscribe(([lastVal, val]) => {
 55 |                     this.updateChangedParams(lastVal, val)
 56 |                 })
 57 |         );
 58 | 
 59 |         // Restore the save param settings, ensure enough time to the visialization to load and init.
 60 |         this.subscriptions.push(
 61 |             this.state.activeId
 62 |                 .take(1)
 63 |                 .delay(500)
 64 |                 .subscribe(vis => this.restoreSaveParams())
 65 |         );
 66 | 
 67 |         // Restore the saved params when reloading a visualization.
 68 |         this.subscriptions.push(
 69 |             this.reload$
 70 |                 .delay(200)
 71 |                 .subscribe(vis => this.restoreSaveParams())
 72 |         );
 73 |     }
 74 | 
 75 |     ngOnDestroy(): void {
 76 |         this.subscriptions.forEach(subscription => subscription.unsubscribe());
 77 |     }
 78 | 
 79 |     setDebugMode(value: boolean): void {
 80 |         this.debugMode = value;
 81 |     }
 82 | 
 83 |     reload(): void {
 84 |         const activeEntry = this.libraryService.getActive();
 85 |         if (activeEntry) {
 86 |             this.reload$.next(RESET_TOKEN);
 87 |             this.reload$.next(this.state.activeId.value);
 88 |         }
 89 |     }
 90 | 
 91 |     updateParam(paramUpdate: ParamUpdate): void {
 92 |         if (this.visualization && this.visualization.params) {
 93 |             let paramSettings = {};
 94 |             for (let name in this.visualization.params) {
 95 |                 const currentValue = this.visualization.params[name].value;
 96 |                 const value = (name === paramUpdate.paramKey) ? paramUpdate.newValue : currentValue;
 97 |                 paramSettings[name] = value;
 98 |             }
 99 |             this.state.update('paramSettings', paramSettings);
100 |         }
101 |     }
102 | 
103 |     /**
104 |      * Given the last two parameter maps, perform a diff over each key and update any which have changed.
105 |      */
106 |     private updateChangedParams(lastVal: ParamSettingsMap, val: ParamSettingsMap): void {
107 |         if (this.visualization && this.visualization.params) {
108 |             Object.keys(this.visualization.params).forEach(key => {
109 |                 if (val[key] === lastVal[key]) {
110 |                     return;
111 |                 }
112 |                 const paramUpdate: ParamUpdate = {
113 |                     paramKey: key,
114 |                     newValue: val[key]
115 |                 };
116 |                 if (!this.visualization.params.hasOwnProperty(paramUpdate.paramKey)) {
117 |                     return;
118 |                 }
119 |                 if (typeof this.visualization.paramChange === 'function') {
120 |                     try {
121 |                         this.visualization.paramChange(paramUpdate);
122 |                     } catch (e) {
123 |                         console.log(e);
124 |                     }
125 |                 } else {
126 |                     // if the paramChange hook is not defined, automatically update the parameter.
127 |                     this.visualization.params[paramUpdate.paramKey].value = paramUpdate.newValue;
128 |                 }
129 |             });
130 |         }
131 |     }
132 | 
133 |     private restoreSaveParams(): void {
134 |         const paramSettings = this.state.paramSettings.value;
135 |         for (let paramKey in paramSettings) {
136 |             if (paramSettings.hasOwnProperty(paramKey)) {
137 |                 const newValue = paramSettings[paramKey];
138 |                 this.updateParam({paramKey, newValue});
139 |             }
140 |         }
141 |     }
142 | }


--------------------------------------------------------------------------------
/src/render/styles/_form-inputs.scss:
--------------------------------------------------------------------------------
 1 | $input-color: #3b56da;
 2 | 
 3 | input[type=range]{
 4 |   -webkit-appearance: none;
 5 | 
 6 |   &::-webkit-slider-runnable-track {
 7 |     width: 300px;
 8 |     height: 16px;
 9 |     background: #ccc;
10 |     border: none;
11 |     border-radius: 3px;
12 |   }
13 | 
14 |   &::-webkit-slider-thumb {
15 |     -webkit-appearance: none;
16 |     border: none;
17 |     height: 16px;
18 |     width: 16px;
19 |     border-radius: 0;
20 |     background: $input-color;
21 |   }
22 | 
23 |   &:focus {
24 |     outline: none;
25 |   }
26 | 
27 |   &:focus::-webkit-slider-runnable-track {
28 |     background: #ccf;
29 |   }
30 | 
31 |   &.dark {
32 |     &::-webkit-slider-runnable-track {
33 |       background: #333;
34 |     }
35 |     &:focus::-webkit-slider-runnable-track {
36 |       background: #335;
37 |     }
38 |   }
39 | }
40 | 
41 | input[type="checkbox"] {
42 |   width: 0;
43 |   height: 0;
44 | }
45 | 
46 | input[type="checkbox"]:before {
47 |   cursor: pointer;
48 |   content: '';
49 |   background: #fff;
50 |   border: 2px solid #ddd;
51 |   display: inline-block;
52 |   vertical-align: middle;
53 |   width: 20px;
54 |   height: 20px;
55 |   padding: 2px;
56 |   margin-right: 10px;
57 |   text-align: center;
58 | }
59 | 
60 | input[type="checkbox"]:checked:before {
61 |   background: $input-color;
62 | }
63 | 


--------------------------------------------------------------------------------
/src/render/styles/_icons.scss:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'Material Icons';
 3 |   font-style: normal;
 4 |   font-weight: 400;
 5 |   src: local('Material Icons'),
 6 |        local('MaterialIcons-Regular'),
 7 |        url(assets/icons/MaterialIcons-Regular.woff2) format('woff2'),
 8 |        url(../assets/icons/MaterialIcons-Regular.woff2) format('woff2');
 9 | }
10 | 
11 | .material-icons {
12 |   font-family: 'Material Icons';
13 |   font-weight: normal;
14 |   font-style: normal;
15 |   font-size: 24px;  /* Preferred icon size */
16 |   display: inline-block;
17 |   line-height: 1;
18 |   text-transform: none;
19 |   letter-spacing: normal;
20 |   word-wrap: normal;
21 |   white-space: nowrap;
22 |   direction: ltr;
23 | 
24 |   /* Support for all WebKit browsers. */
25 |   -webkit-font-smoothing: antialiased;
26 |   /* Support for Safari and Chrome. */
27 |   text-rendering: optimizeLegibility;
28 | 
29 |   /* Support for Firefox. */
30 |   -moz-osx-font-smoothing: grayscale;
31 | 
32 |   /* Support for IE. */
33 |   font-feature-settings: 'liga';
34 | }


--------------------------------------------------------------------------------
/src/render/styles/_material.scss:
--------------------------------------------------------------------------------
 1 | @import '~@angular/material/theming';
 2 | // Plus imports for other components in your app.
 3 | 
 4 | // Include the base styles for Angular Material core. We include this here so that you only
 5 | // have to load a single css file for Angular Material in your app.
 6 | @include mat-core();
 7 | 
 8 | // Define the palettes for your theme using the Material Design palettes available in palette.scss
 9 | // (imported above). For each palette, you can optionally specify a default, lighter, and darker
10 | // hue.
11 | $candy-app-primary: mat-palette($mat-light-blue);
12 | $candy-app-accent:  mat-palette($mat-cyan, A200, A100, A400);
13 | 
14 | // The warn palette is optional (defaults to red).
15 | $candy-app-warn:    mat-palette($mat-red);
16 | 
17 | // Create the theme object (a Sass map containing all of the palettes).
18 | $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
19 | 
20 | // Include theme styles for core and each component used in your app.
21 | // Alternatively, you can import and @include the theme mixins for each component
22 | // that you are using.
23 | @include angular-material-theme($candy-app-theme);
24 | 


--------------------------------------------------------------------------------
/src/render/styles/_scrollbars.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | @mixin scrollbar-styles() {
 3 |   /deep/ .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
 4 |     background-color: rgba(150, 150, 150, 0.7);
 5 |   }
 6 | 
 7 |   /deep/ .ps-container:hover > .ps-scrollbar-y-rail:hover {
 8 |     background-color: rgba(85, 85, 85, 0.67);
 9 |   }
10 | 
11 |   /deep/ .ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
12 |     background-color: rgba(119, 119, 119, 0.67);
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/render/styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | $primary-color: #6BBBD4;
 2 | 
 3 | @mixin inline-slider($slider-width) {
 4 |   display: flex;
 5 |   align-items: center;
 6 |   text-transform: uppercase;
 7 | 
 8 |   label {
 9 |     flex-grow: 1;
10 |     font-size: 14px;
11 |     .value {
12 |       margin-left: 8px;
13 |       font-weight: bold;
14 |     }
15 |   }
16 |   md-slider {
17 |     width: $slider-width;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/render/styles/app.scss:
--------------------------------------------------------------------------------
 1 | @import "~perfect-scrollbar/src/css/main";
 2 | @import "material";
 3 | @import "icons";
 4 | 
 5 | html {
 6 |   overflow: hidden;
 7 |   background-color: black;
 8 |   -webkit-user-select: none;
 9 |   user-select: none;
10 |   font-family: Roboto,"Helvetica Neue",sans-serif;
11 | }
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES5",
 4 |     "module": "commonjs",
 5 |     "lib": ["es2015", "dom"],
 6 |     "emitDecoratorMetadata": true,
 7 |     "experimentalDecorators": true,
 8 |     "sourceMap": true,
 9 |     "types": ["node"]
10 |   },
11 |   "exclude": [
12 |     "node_modules",
13 |     "src/render/main.aot.ts"
14 |   ],
15 |   "compileOnSave": false,
16 |   "buildOnSave": false,
17 |   "angularCompilerOptions": {
18 |     "genDir": "./src/render/ngfactory",
19 |     "entryModule": "./src/render/app.module#AppModule"
20 |   }
21 | }


--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
  1 | const path = require('path');
  2 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  3 | const webpack = require('webpack');
  4 | 
  5 | const externalsFn =  (function () {
  6 |     const IGNORES = [
  7 |         'node-core-audio',
  8 |         'electron'
  9 |     ];
 10 |     return function (context, request, callback) {
 11 |         if (IGNORES.indexOf(request) >= 0) {
 12 |             return callback(null, "require('" + request + "')");
 13 |         }
 14 |         return callback();
 15 |     };
 16 | })();
 17 | 
 18 | function root(args) {
 19 |     args = Array.prototype.slice.call(arguments, 0);
 20 |     return path.join.apply(path, [__dirname].concat(args));
 21 | }
 22 | 
 23 | function makeRenderConfig(name, entryFile, indexHtml, prodMode) {
 24 |     let config = {};
 25 | 
 26 |     config.name = name;
 27 |     if (prodMode) {
 28 |         config.devtool = 'eval';
 29 |     } else {
 30 |         config.devtool = 'eval-source-map';
 31 |     }
 32 |     config.node = {
 33 |         __dirname: false,
 34 |         __filename: false
 35 |     };
 36 |     config.target = 'electron-renderer';
 37 | 
 38 |     config.entry = {
 39 |         [name]: entryFile
 40 |     };
 41 | 
 42 |     config.output = {
 43 |         path: root('app'),
 44 |         filename: '[name].js'
 45 |     };
 46 | 
 47 |     config.resolve = {
 48 |         // only discover files that have those extensions
 49 |         extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
 50 |     };
 51 | 
 52 |     config.module = {
 53 |         loaders: [
 54 |             {
 55 |                 test: /\.ts$/,
 56 |                 loaders: /*aotMode ? ['@ngtools/webpack'] :*/ ['ts-loader', 'angular2-template-loader']
 57 |             },
 58 |             {test: /\.(svg|png|jpe?g|gif|woff|woff2|ttf|eot|ico)$/, loader: 'file-loader?name=assets/[name].[ext]?'},
 59 |             {test: /\.css$/, loader: 'raw-loader'},
 60 |             {test: /\.s[ac]ss$/, loader: 'raw-loader!sass-loader'},
 61 |             {test: /\.html$/, loader: 'html-loader'}
 62 |         ],
 63 |         noParse: [
 64 |             /.+zone\.js\/dist\/.+/,
 65 |             /.+angular2\/bundles\/.+/,
 66 |             /angular2-polyfills\.js/,
 67 |             /node_modules\/json-schema\/lib\/validate\.js/
 68 |         ]
 69 |     };
 70 | 
 71 |     config.plugins = [
 72 |         new HtmlWebpackPlugin({
 73 |             inject: true,
 74 |             template: indexHtml
 75 |         }),
 76 |         new webpack.DefinePlugin({
 77 |             VERSION: JSON.stringify(require('./package.json').version)
 78 |         }),
 79 | 
 80 |         new webpack.LoaderOptionsPlugin({
 81 |             options: {
 82 |                 context: __dirname,
 83 |                 sassLoader: {
 84 |                     includePaths: [path.resolve(__dirname, "./src/render/styles/")]
 85 |                 },
 86 |                 resolve: {
 87 |                     extensions: ['.ts', '.tsx', '.js']
 88 |                 }
 89 |             }
 90 |         })
 91 |     ];
 92 | 
 93 |     if (prodMode) {
 94 |         config.plugins.push(
 95 |             new webpack.optimize.UglifyJsPlugin({
 96 |                 compress: {
 97 |                     warnings: false,
 98 |                 },
 99 |                 output: {
100 |                     comments: false,
101 |                 }
102 |             })
103 |         );
104 |     }
105 |     config.externals = [externalsFn];
106 | 
107 |     return config;
108 | }
109 | 
110 | module.exports = {
111 |     externalsFn,
112 |     root,
113 |     makeRenderConfig
114 | };
115 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | const webpack = require('webpack');
 3 | const webpackMainConfig = require('./webpack.main');
 4 | const webpackRenderConfig = require('./webpack.render');
 5 | const webpackRemoteControlConfig = require('./webpack.remote-control');
 6 | 
 7 | // Get npm lifecycle event to identify the environment
 8 | const ENV = process.env.npm_lifecycle_event;
 9 | const prodMode = ENV === 'app:build' || ENV === 'app:build-aot';
10 | 
11 | module.exports = function (env) {
12 | 
13 |     const aotMode = env === 'aot';
14 |     console.log(`building in ${aotMode ? 'aot' : 'jit'} mode...`);
15 | 
16 |     return [
17 |         webpackRenderConfig(prodMode),
18 |         webpackRemoteControlConfig(prodMode),
19 |         webpackMainConfig
20 |     ];
21 | };


--------------------------------------------------------------------------------
/webpack.main.js:
--------------------------------------------------------------------------------
 1 | const {externalsFn, root} = require('./webpack.common');
 2 | 
 3 | /**
 4 |  * Webpack config for the "main" electron process.
 5 |  */
 6 | module.exports = {
 7 |     name: 'main',
 8 |     target: 'node',
 9 |     node: {
10 |         __dirname: false,
11 |         __filename: false
12 |     },
13 |     resolve: {
14 |         extensions: ['.ts', '.js', '.json']
15 |     },
16 |     entry: {
17 |         'main': './src/main/index.ts'
18 |     },
19 |     output: {
20 |         path: root('app'),
21 |         filename: 'index.js'
22 |     },
23 |     module: {
24 |         loaders: [
25 |             { test: /\.ts$/, loader: 'ts-loader' }
26 |         ]
27 |     },
28 |     externals: [externalsFn]
29 | };
30 | 


--------------------------------------------------------------------------------
/webpack.remote-control.js:
--------------------------------------------------------------------------------
 1 | const {root, makeRenderConfig} = require('./webpack.common');
 2 | const path = require('path');
 3 | 
 4 | // Render process app
 5 | module.exports = function makeWebpackConfig(prodMode) {
 6 |     const entryFile = path.resolve(__dirname, './src/remote-control/bootstrap.ts');
 7 |     const indexHtml = 'src/remote-control/index.html';
 8 |     let config = makeRenderConfig('remote-control', entryFile, indexHtml, prodMode);
 9 | 
10 |     config.output = {
11 |         path: root('app', 'remote-control'),
12 |         filename: '[name].js'
13 |     };
14 | 
15 |     return config;
16 | };
17 | 


--------------------------------------------------------------------------------
/webpack.render.js:
--------------------------------------------------------------------------------
 1 | const {makeRenderConfig, root} = require('./webpack.common');
 2 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 3 | const webpack = require('webpack');
 4 | const path = require('path');
 5 | 
 6 | // Render process app
 7 | module.exports = function makeWebpackConfig(prodMode) {
 8 |     const entryFile = path.resolve(__dirname, './src/render/bootstrap.ts');
 9 |     const indexHtml = 'src/index.html';
10 |     let config = makeRenderConfig('render', entryFile, indexHtml, prodMode);
11 | 
12 |     config.plugins.push(
13 |         new CopyWebpackPlugin([
14 |             {
15 |                 from: root('src/package.json')
16 |             },
17 |             {
18 |                 context: './src',
19 |                 from: 'assets/icons*/*.woff2',
20 |                 to: ''
21 |             },
22 |             {
23 |                 context: './src',
24 |                 from: 'node_modules/**/*',
25 |                 to: ''
26 |             },
27 |             {
28 |                 context: './node_modules/three/build',
29 |                 from: '*.js',
30 |                 to: 'vendor/three'
31 |             },
32 |             {
33 |                 context: './src/library',
34 |                 from: '**/*',
35 |                 to: 'library'
36 |             }
37 |         ])
38 |     );
39 | 
40 |     return config;
41 | };
42 | 
43 | function packageSort(packages) {
44 |     var len = packages.length - 1;
45 |     var first = packages[0];
46 |     var last = packages[len];
47 |     return function sort(a, b) {
48 |         // polyfills always first
49 |         if (a.names[0] === first) {
50 |             return -1;
51 |         }
52 |         // main always last
53 |         if (a.names[0] === last) {
54 |             return 1;
55 |         }
56 |         // vendor before app
57 |         if (a.names[0] !== first && b.names[0] === last) {
58 |             return -1;
59 |         } else {
60 |             return 1;
61 |         }
62 |     }
63 | }
64 | 


--------------------------------------------------------------------------------