-
Notifications
You must be signed in to change notification settings - Fork 33
Enabling live preview on a blueprint
Last updated: 4/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.
This is essentially a duplicate of the blueprint's main index.html, but leverages additional pym.js listeners and callback functions to push data back and forth between the project instance and the project input data coming from Autotune.
The content of the preview needs to be updatable via javascript. It's better if most of the blueprint is written in front-end javascript, but not entirely necessary. It's good to keep the live preview aspect in mind when creating new blueprints in order to minimize repetition between code for the preview and code for the final version.
Your blueprint will need to generate a new output file preview/index.html. This file will be loaded via pym.js into the project editing interface. This file should be a near duplicate of your main index.html, but should include the additional javascript needed to communicate with Autotune via pym.js and update the page.
The additional aforementioned javascript needs to include a way for the updated data to be passed to the preview. For example:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pym/0.4.5/pym.min.js"></script>
<script>
pymChild = pymChild || new pym.Child();
pymChild.onMessage('updateData', function(data) {
data = JSON.parse(data);
window.functionName.reload(data);
});
</script>Autotune will wait until the preview is completely loaded (on window.load) before sending the data. So you need to make sure the onMessage callback is registered before the page is finished loading. The best way to insure this is to put the example code above in the <head> tag.
In Ruby Middleman blueprints
You'll need to add preview.html.erb (e.g. /source/preview.html.erb). When the blueprint is built, Middleman will output this file to preview/index.html where Autotune will load it.
This file should be a near duplicate of index.html.erb, but should include the additional javascript needed for live preview or reference a javascript file that contains this additional code.
When using Vox Media's Middleman rig, you should put your pymChild.onMessage at the top of your preview.html.erb file. The pym.js script will already be loaded and initialized for you.
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.