Provide UI for improvisational assistance

[oubiwann]

When undertone is being used for generative or improvisational work, a randomly generated stream of chord / mode / key transitions is played, with no real ability to see these ahead of time, nothing that allows the user to prepare for the changes and properly improvise accordingly.

We need a solution for this. And since a terminal is really too small to be looking at from across the room when playing an instrument other than undertone at the laptop/workstation, we need something which can be displayed on on a large screen/monitor. A dynamic web page (JS-powered) would be ideal for this.

Ideas in support of and related to this include:

• a chord view that displays the upcoming chord transition
• a view of the total beats for the chord and the current beat being played
• the view of the current beats should be animated
• display of volume/velocity
• current/next key
• current tempo
• system (OS) info
• backend info (Extempore/Bevin)
• Erlang node info (monitoring data)

Tasks:

• [x] Investigate possible web servers/frameworks
• [x] Add support for serving static pages
  • [x] inets httpd - #97
  • [x] create mockup - #100
• [x] Create quick-and-dirty long-polling solution
  • [x] create a web API module
  • [x] return sample JSON
  • [x] using XHR in the browser, hit ESI resource for JSON
  • [x] populate DOM with JSON data
• [ ] Get backend data into undertone ...
  • [x] send parsable data from Extempore to LFE
  • [x] write parser/regex for data passed via Erlang Port stdout
  • [ ] create utility functions for converting Extempore format into LFE format
    • [x] tempo
    • [x] chord pitch and type
    • [ ] beat
    • [x] beats per note
    • [x] note
    • [ ] note duration
  • [x] explore how to best capture current / changed chord sequence or progression data
    • write this data to current phrase ETS table?
    • save it to a gen_servers state?
    • publish to a gen_server's inbox? -- #104
  • [ ] update the ESI function to query the source of truth
  • [ ] format the queried data for consumption by the browser
  • [ ] create a gen_server for maintaining sequence / progression updates
  • [ ] add a function for writing to the state
  • [ ] add a function for reading the state data
  • [ ] update the ESI function to call the gen_server's read function
• [ ] Pull data from sequence / progression gen_server into UI
  • [ ] ensure data is converted properly for use on a web page / in JS
  • [ ] update progress bar based upon current beat
• [ ] Convert gen_server state data to ETS table
  • [ ] write this data to current phrase ETS table
  • [ ] update the ESI function to query the ETS table
• [ ] Make HTTP servers configurable / swappable
• [ ] Convert long-polling solution to WebSocket
  • [ ] add elli dep - https://github.com/elli-lib/elli
  • [ ] add web socket plugin - https://github.com/elli-lib/elli_websocket
• [ ] Codify in LFE
  • [ ] create LFE wrappers for sequencer functions
  • [ ] including the formatting/writing of data to the Erlang Port for parsing by LFE

[oubiwann]

This was really helpful to get ESI working: https://stackoverflow.com/questions/49024122/inets-httpd-cant-get-simple-esi-script-to-work