Use kinectron skeletal tracking data to drive music synthesis in the browser using Fable, P5, and Gibber
Switch branches/tags
Clone or download

README.md

fable-p5-gibber-kinectronclient

Use kinectron skeletal tracking data or mouse input to drive music synthesis in the browser using Fable, P5, and Gibber.

For more information on the development and how to use see this post.

Template

This project was based on a template. This template can be used to generate a simple web app with Fable and Elmish. You can find more templates by searching Fable.Template packages in Nuget.

Requirements

Although is not a Fable requirement, on macOS and Linux you'll need Mono for other F# tooling like Paket or editor support.

Editor

The project can be used by editors compatible with the new .fsproj format, like VS Code + Ionide, Emacs with fsharp-mode or Rider. Visual Studio for Mac is also compatible but in the current version the package auto-restore function conflicts with Paket so you need to disable it: Preferences > Nuget > General.

Building and running the app

  • Install JS dependencies: yarn
  • Change dir with cd src
  • Start Fable daemon and Webpack dev server: dotnet fable yarn-start
  • In your browser, open: http://0.0.0.0:8080/

If you are using VS Code + Ionide, you can also use the key combination: Ctrl+Shift+B (Cmd+Shift+B on macOS) instead of typing the dotnet fable yarn-start command. This also has the advantage that Fable-specific errors will be highlighted in the editor along with other F# errors.

Any modification you do to the F# code will be reflected in the web page after saving. When you want to output the JS code to disk, run dotnet fable yarn-build and you'll get a minified JS bundle in the public folder.

To publish the web pages into gh-pages branch, run npm run publish.

Debugging in VS Code

  • Install Debugger For Chrome in vscode
  • Press F5 in vscode
  • After all the .fs files are compiled, the browser will be launched
  • Set a breakpoint in F#
  • Restart with Ctrl+Shift+F5 (Cmd+Shift+F5 on macOS)
  • The breakpoint will be caught in vscode

NOTE: debugging directly in Chrome F12 seems more reliable

Project structure

Paket

Paket is the package manager used for F# dependencies. It doesn't need a global installation, the binary is included in the .paket folder. Other Paket related files are:

  • paket.dependencies: contains all the dependencies in the repository.
  • paket.references: there should be one such a file next to each .fsproj file.
  • paket.lock: automatically generated, but should committed to source control, see why.
  • Nuget.Config: prevents conflicts with Paket in machines with some Nuget configuration.

Paket dependencies will be installed in the packages directory. See Paket website for more info.

If you wipe out the paket.lock, you probably need to run .paket/paket.exe install to fix the project

npm/yarn

  • package.json: contains the JS dependencies together with other info, like development scripts.
  • package-lock.json: is the lock file created by npm5.

JS dependencies will be installed in node_modules. See npm website for more info.

Webpack

Webpack is a bundler, which links different JS sources into a single file making deployment much easier. It also offers other features, like a static dev server that can automatically refresh the browser upon changes in your code or a minifier for production release. Fable interacts with Webpack through the fable-loader.

  • webpack.config.js: is the configuration file for Webpack. It allows you to set many things: like the path of the bundle, the port for the development server or Babel options. See Webpack website for more info.

F# source files

The template only contains two F# source files: the project (.fsproj) and a source file (.fs) in src folder.