Enabling live preview on a blueprint

Last updated: 1/8/2016

This page will guide you through the process of how to enable an existing blueprint to be compatible with Autotune's live preview feature.

Prerequisite: Working knowledge of how to create blueprints.

How it works

This is essentially a duplicate of the blueprint, but leverages additional pym listeners and callback functions to push data back and forth between the project instance and the project input data coming from Autotune.

1. Javascript refactor

The blueprint must be written entirely in javascript - or there must at least be a version of the blueprint that is solely in javascript (see edit_project.js below). Depending on how the blueprint was originally written, this may require a decent bit of retrofitting.

2. Add files

You'll need to add these two files:

• edit_project.js (e.g. /source/javascripts/edit_project.js)
• preview.html.erb (e.g. /source/preview.html.erb)

####edit_project.js This should be a copy of the master javascript file referenced in the blueprint's index.html.erb, but also needs to include any additional javascript needed for interacting with Autotune's live preview capabilities. This version of the blueprint must:

• send a message to Autotune when its ready
  • Autotune will only send data to the project once it receives a pym message saying that the project is ready to accept the data, pymChild.sendMessage('childLoaded', 'ready');. Here's an example of this in practice.
• be able to accept messages that it receives from Autotune

  • The blueprint should include a pym listener that is waiting to hear back from Autotune about updated data.

     pymChild.onMessage('updateData', function(data) {
       data = JSON.parse(data);
       loadGraphic(data);
     })
    

    You can see an example of this here.

• include any changes necessary to re-render or update the preview so that it displays the most current data to the user
  • It's up to you how you want to do this. Potential options include deleting elements from the page and basically starting afresh every time the user makes a change, detecting what has changed and choosing to only update those specific elements, etc.

####preview.html.erb This file should be a near duplicate of index.html.erb, but should reference edit_project.js (that has all of the extra goodies) instead of the master javascript file referenced in the blueprint's index.html.erb.

3. Update autotune-config.json

Two key value pairs need to be added to the blueprint's autotune-config.json file in order for Autotune to recognize it as a live previewable blueprint.

"preview_type": "live",
"sample_data": "data/autotune.json"

The data included in your dummy autotune.json file will provide the initial sample data Autotune sends to the project preview when a new project of this blueprint type is created.