Developing visualizations is easiest if you have a sample to get you started. But having the code is not enough -- you still need a way to get the visualization into the WhenHub player and to connect with Schedules and Streams from WhenHub Studio.
This is where mycomposer comes in. It combines a sample visualization along with a basic Node.js-based web server and integrates seamlessly with Whencaster so you can develop and preview your visualizations easily.
Setup MyComposer Repository Click "Setup Repository" to create a customized fork of the mycomposer repository to your GitHub account. In Step 2, you will clone this repository to your desktop.
Verify that the mycomposer repository was properly created in your GitHub account in Step #1. Verify: GitHub "mycomposer"
Also, ensure that the following software is installed:
Next, open a terminal window (or command prompt) and type the following:
git clone https://github.com//mycomposer.git mycomposer
git clone https://github.com/[github username]/mycomposer.git mycomposer
If everything worked as planned, you will see "WhenHub My Composer started on port 8000."
On to Step 3...
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:
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.
To learn more about composing visualizations, refer to the Documentation
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.