Composer Desktop

WhenHub Composer

WhenHub Composer is designed to make it easy for developers to build, preview and publish visualizations for the WhenHub platform.

Learn more about WhenHub

To get started with Composer, Login with GitHub

Composer Desktop WhenHub Composer

1

Setup
Repository

  • Setup the mycomposer repository with a sample visualization and Node.js-based web server in your GitHub account.

More...

2

Clone &
Launch

  • Clone the mycomposer repository to your desktop, then launch the built-in web server.

More...

3

Compose Visualization

  • Get started building and composing your own visualization.

More...

4

Publish Visualization

  • Finished? Publish your work and make it accessible on the web.

More...

Setup Repository

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.

Sit tight...this will take a minute or two...

Pre-requisites

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:

Clone & Launch

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
cd mycomposer
npm install
npm start

If everything worked as planned, you will see "WhenHub My Composer started on port 8000."

On to Step 3...

Compose Visualization

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.

To learn more about composing visualizations, refer to the Documentation

Publish Visualization

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.

Visualization Explorer

The tools on this website help you create visualizations like the ones below using HTML, Javascript, CSS and your creativity.