[DevLog] Building Show Notes 2

Cantabile
1

Hey All,

I’ve finally settled on an approach for a new version of Cantabile’s Show Notes and rather than develop it in the dark, I thought I’d post progress updates here for anyone interested in following along.

I’ve put this off for a long time because the requirements have be pretty wide and varied but the time has come to start work on this… and the experiments with cantabile-media-server, especially the PDF support has solidified the approach I want to take with this - which is to build it using web technologies (nodejs, browser, html, javascript, markdown, WebSockets, etc…)

In case you’re worried: this new approach won’t be replacing the existing show notes anytime soon - the intention is to allow both the old and new approaches to be available for at least a considerable transition period (if not indefinitely).

These posts will be a bit of a technical discussion, but not so much that you shouldn’t be able to get the general of idea of where this is going.

As always, comments and feedback welcome.

Brad

2 Likes
2

I’m looking forward to the new version. Thanks for letting us in on it!

1 Like
3

Background

See these posts for some background thoughts, suggestions, ideas etc…

Requirements

Distilling all of the above down, this is what I’m aiming for as the main requirements:

  • Improved text formatting (eg: ability to color individual words, in paragraph formatting etc…)
  • Integration with Cantabile’s states (eg: show/hide sections based on state, auto scroll to state marker)
  • Ability to embed cantabile $(Variables) in notes.
  • Support for images
  • Support for PDF files (or parts thereof)
  • Support for multi-column layout and/or tables
  • Other formatting features like bullet lists, numbered lists, quotations etc…
  • Ability to view notes both within Cantabile and remotely via Web-UI. (eg: viewing notes on a tablet)
  • Ability to deliver different notes to different band members
  • Support for ChordPro display
  • Support for auto-scrolling based on song timing and/or bindings
  • Support for manual scrolling via MIDI control
  • Ability to convert old show notes to new system

Basic Approach

Here’s initial approach I’ll be taking with this:

  • Show notes will become a plain text file format
  • The notes will be stored as a separate file next to the associated song file. (eg: MySong.cantabileSong and MySong.cantabileNotes live together)
  • Editing will be done using an external text editor of your choice
  • The format will be markdown, with embedded directives for additional control and markup
  • The notes will be displayed in a separate web browser
  • Integration with Cantabile will be via the Cantabile Network API.
  • PDF rendering using Ghostscript

Later:

  • Support for storing the notes content embedded in Cantabile (rather than as a separate file)
  • Support for editing the notes directly in Cantabile (rather than with a separate editor)
  • Embed a web browser in Cantabile so notes can be viewed in-place without requiring a separate window.
  • Direct integration between the embedded browser and Cantabile (rather than via the network API).
4

Proof of Concept

Over the last couple of weeks, cantabile-media-server has proved to be a good proof of concept for this approach:

  • Works as a media server
  • MIDI controllable from Cantabile
  • WebSocket support lets Cantabile control playback and scrolling within the browser.

Given the additional text formatting requirements for show notes I think doing it in HTML/JavaScript and rendering in a browser is a good approach - there’s just one problem: many users don’t want their show notes in a separate browser window and would prefer them displaying inside Cantabile.

There’s two solutions to this:

  1. Build it twice, once embedded in Cantabile and once in a browser.
  2. Embed a browser directly inside Cantabile and build it just once.

I really don’t want to build this twice, so today’s job was to see if a browser can be easily embedded in Cantabile. Turns out it can - see here. (ignore the “Browser” tab that’s just a placeholder for this test).

That was the final piece in deciding on this approach. The following posts will be focused on the show notes format and will be demoed in an external browser - just remember the idea is to eventually move this so it can all run inside Cantabile.

Next job - start implementing the show notes Markdown + directives file format and get it appearing in a browser.