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:

• Investigate possible web servers/frameworks
• Add support for serving static pages
  • inets httpd - Add an inets httpd service #97
  • create mockup - Create HTML mockup #100
• Create quick-and-dirty long-polling solution
  • create a web API module
  • return sample JSON
  • using XHR in the browser, hit ESI resource for JSON
  • populate DOM with JSON data
• Get backend data into undertone ...
  • send parsable data from Extempore to LFE
  • write parser/regex for data passed via Erlang Port stdout
  • create utility functions for converting Extempore format into LFE format
    • tempo
    • chord pitch and type
    • beat
    • beats per note
    • note
    • note duration
  • 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? -- Publish Extempore sequence / progression data to queue #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