wcPlay (Web Cabin Play) is a node based visual scripting tool for the web! Allow users to script their own content for your application in a way that does not require them to code! Users place nodes into their script and then visually connect them together. wcPlay also comes with a built in live debugger allowing users to visually inspect and change their scripts while it is running!

• wcPlay is developed and maintained by Jeff Houde (lochemage@webcabin.org).

Dependencies

Begin by including the necessary dependencies (only if using the editor tool):

• JQuery Library version 1.11.1 http://jquery.com/
• Font-Awesome http://fortawesome.github.io/Font-Awesome/
• wcMenu https://github.com/WebCabin/wcMenu - File menu and toolbar.

Optional Dependencies

You can also include these optional dependencies for added features:

• wcUndoManager https://github.com/WebCabin/wcUndoManager - Full undo/redo support while using the editor.
• FileSaver.js https://github.com/eligrey/FileSaver.js/ - Helper for saving scripts as a download file.

Installation

Bower

You can use bower for easy installation using the Node Package Manager

{@lang bash}bower install wcPlay

Node.js

The appropriate library files can now be installed via the Node Package Manager (npm).

{@lang bash}npm install --save webcabin-play

Once installed, all of the source files will be located in either the bower_components or node_modules folder and ready to link into your project.

Download

You can also download the source files and link them directly.

Basic Implementation

{@lang xml}<!-- Include external dependencies -->
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/wcMenu/Build/wcMenu.min.css"/>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/FileSaver/FileSaver.min.js"></script>
<script src="bower_components/wcUndoManager/wcUndoManager.js"></script>
<script src="bower_components/wcMenu/Build/wcMenu.min.js"></script>

<!-- Include the Core wcPlay Engine -->
<script src="bower_components/wcPlay/Build/wcPlay.min.js"></script>

<!-- Include the optional set of common generic node types -->
<script src="bower_components/wcPlay/Build/wcPlayNodes.min.js"></script>

<!-- Include wcPlay editor tools -->
<link rel="stylesheet" type="text/css" href="bower_components/wcPlay/Build/wcPlayEditor.min.css"/>
<script src="bower_components/wcPlay/Build/wcPlayEditor.min.js"></script>

Once the proper files have been included, you can create as many instances of the wcPlay engine as you need. Each one can be loaded with their own script:

var myScript = new wcPlay();

var myScriptFileData = '...'; // Fill this with the string contents of a previously saved script.
myScript.load(myScriptFileData);

myScript.start();

By itself, the wcPlay engine has no visual component for the user to view or edit the script with. To open a wcPlay script in the editor tool, simply create an instance of the editor tool and attach it to the DOM element container where your editor will be shown:

var myEditor = new wcPlayEditor(domElem);

Once you have an editor, you will need to tie it to an instance of wcPlay so you can edit its script:

myEditor.engine(myScript);

Continue to the Node Anatomy tutorial.