The WhenHub Composer allows you to easily get started with creating new visualizations. Following these simple steps will get you up and running quickly!

Composer Requirements

• Git - download here: https://git-scm.com/downloads
• NodeJS - If you do not have NodeJS already installed, you can install it here: https://nodejs.org
• Your favorite IDE aka Code Editor - Here are a few of our favorites
  • Visual Studio Code
  • Atom

Step 1. Connect Composer to GitHub & Setup Repository

Navigate to the Composer website and connect your GitHub account to WhenHub Composer, by logging in to GitHub using the provided link in the header. A GitHub account is required to use the Composer. If you do not have a GitHub account, you can create a free account.

Once you have connected to GitHub, you will need to setup the mycomposer repository with a sample visualization and Node.js-based web server in your GitHub account. To do this Click the Setup mycomposer Repository button.

Step 2. Clone & Launch Repository

Clone your newly created mycomposer repository to your desktop or preferred location on your local machine for development.

Step 3. Run Whencaster

With the web server up and running, let's test if it's serving up the sample visualization correctly. Launch Whencaster in a new browser tab, then do the following:

• Select Schedules > Featured > Best Picture Winners
• Select Visualizations > My > Simple List
  You will see the Whencast Player with the selected Schedule and Visualization. To get familiar with Whencaster, try choosing different combinations of Schedules and Visualizations.

With your dev environment setup and the sample visualization viewable in Whencaster, it's time to crack open the cloned "mycomposer" folder in your favorite code editor. Open visualizations > [github username] > list > 1.0.0 > simple > view.html in the editor and change the <h2> tag to <h1>. Switch to Whencaster and select Visualizations > My > Simple List. You should see larger titles, confirming that your change worked.

Restarting the Whencaster

To return to working on your visualization, the small node server that was installed during setup will need to be restarted. To restart the server, navigate to the location of the local repository and open command prompt. (Shift + right-click -> select Open Command Window here). Type ‘npm start’. Go to Whencaster page on Composer website.

Select a schedule from “Featured Schedules”, or, if you already have some schedules associated with your account, chose a schedule from “My Schedules”. Then select the List visualization from “My” visualizations.

To refresh the composer at any time to see your changes, you can click the refresh icon locatoin on the top right.

Step 4. Publish Changes

Users can choose from a gallery of visualizations for their Whencasts in WhenHub Studio. Currently, we do not support third-party visualizations within the gallery. However, this capability will be available in the near future. Until then, you can publish your visualization on a standalone page for sharing on the web.

To publish your visualization, see the "Publish Options" panel in Whencaster.