Slatebox Application Library
The Slatebox API is in ALPHA. It is not yet suitable for production use. Details are below.
Otherwise, the site is powered using the excellent new asp.net mvc framework.
The below example shows the creation of one slate and two nodes.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slatebox :: Hello World Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects,builder,slider,controls,dragdrop"
type="text/javascript"></script>
<script src="http://www.slatebox.com/Content/sbd1.0.min.js"></script>
<script src="http://www.slatebox.com/Content/core.min.css"></script>
<script type="text/javascript" src="http://sync.frozenmountain.com/client.js?v=2.4.3"></script>
<script type="text/javascript">
document.observe("dom:loaded", function() {
var firstSlate = new Slate($('firstSlate'), {
name: 'my first slate name',
showTemplatePanel: false,
dropNodePanelHeight: 300,
dropNodePanelWidth: 600,
viewPortWidth: 600,
viewPortHeight: 600,
dropNodePanelViewPortTop: 0,
dropNodePanelViewPortLeft: 0,
requiresLoginForCollaboration: false,
updateDatasourceOnChange: false,
allowCollaboration: false,
showBirdsEye: false
});
var node1 = new SlateNode({
containerIndex: firstSlate.options.containerIndex
, containerInstance: firstSlate.options.containerInstance
, hasVector: true
, vectorPath: 'roundedrectangle'
, backgroundColor: 'CCC'
, isOffline: true
, lineType: '46'
, lineWidth: 3
, lineColor: '990000'
, height: 30
, width: 60
, name: 'Hello...'
, xPos: 10
, yPos: 40
});
var node2 = new SlateNode({
containerIndex: firstSlate.options.containerIndex
, containerInstance: firstSlate.options.containerInstance
, hasVector: true
, vectorPath: 'ellipse'
, backgroundColor: '333'
, foregroundColor: 'FFF'
, isOffline: true
, lineType: '46'
, lineWidth: 3
, lineColor: '990000'
, height: 40
, width: 70
, name: '...World'
, xPos: 500
, yPos: 150
});
firstSlate.addNode(node1);
firstSlate.addNode(node2);
node1.updateOptions(false, true);
node2.updateOptions(false, true);
node1.addNode(node2);
node2.moveNode(-100, -100, 1);
node1.moveNode(50, 160, 2);
});
</script>
</head>
<body>
<div id="firstSlate">
</div>
</body>
</html>
The below code demonstrates how to save a slate and optionally start collaboration.
var slateName = 'Hello World!';
var allowDraggableCanvas = false;
var firstSlate = null;
var rootUrl = 'http://www.slatebox.com';
var aToken = '';
document.observe("dom:loaded", function() {
$('btnCollab').disabled = true;
firstSlate = new Slate($('firstSlate'), {
name: 'my first slate name',
imageFolder: rootUrl + '/Content/images/',
showTemplatePanel: false,
dropNodePanelHeight: 300,
dropNodePanelWidth: 600,
viewPortWidth: 600,
viewPortHeight: 600,
dropNodePanelViewPortTop: 0,
dropNodePanelViewPortLeft: 0,
apiKey: 'your_api_key_goes_here',
secretKey: 'your_secret_key_goes_here',
showBirdsEye: false,
onSaved: function() {
$('btnSave').disabled = false;
$('btnSave').setValue('save');
$('btnCollab').disabled = false;
$('slateDetails').update('Slate Index: ' + firstSlate.options.containerIndex);
}
});
var node1 = new SlateNode({
containerIndex: firstSlate.options.containerIndex
, containerInstance: firstSlate.options.containerInstance
, hasVector: true
, vectorPath: 'roundedrectangle'
, name: 'Hello...'
, height: 30
, width: 60
, xPos: 10
, yPos: 10
, backgroundColor: 'fff'
, border: '1px solid #000'
, xPos: 10
, yPos: 40
});
var node2 = new SlateNode({
containerIndex: firstSlate.options.containerIndex
, containerInstance: firstSlate.options.containerInstance
, hasVector: true
, vectorPath: 'roundedrectangle'
, name: '...World'
, height: 30
, width: 60
, xPos: 10
, yPos: 10
, backgroundColor: 'fff'
, border: '1px solid #000'
, xPos: 500
, yPos: 150
});
firstSlate.addNode(node1);
firstSlate.addNode(node2);
node1.updateOptions(false, true);
node2.updateOptions(false, true);
node1.addNode(node2);
node2.moveNode(3, 3, .25);
$('btnSave').observe('click', function(e) {
$('btnSave').disabled = true;
if (!firstSlate.isAuth()) {
$('btnSave').setValue('authenticating...');
firstSlate.auth();
firstSlate.options.onAuthenticated = saveSlate;
} else {
saveSlate();
}
});
$('btnCollab').observe('click', function(e) {
switch ($('btnCollab').getValue()) {
case 'start collaboration':
firstSlate.startCollaboration();
$('btnCollab').setValue('end collaboration');
break;
case 'end collaboration':
firstSlate.endCollaboration();
$('btnCollab').setValue('start collaboration');
break;
}
});
$('btnDebug').observe('click', function() {
firstSlate.debug();
});
});
saveSlate = function() {
$('btnSave').setValue('saving...');
firstSlate.save();
};
<body>
<div id="firstSlate">
</div>
<div style="clear: both; margin-top: 30px; height: 25px;" id="slateDetails">
</div>
<div style="padding: 10px; height: 25px;">
<input type="button" id="btnSave" value="save" />
<input type="button" id="btnCollab" value="start collaboration" />
<input type="button" id="btnDebug" value="emit debug info" />
</div>
</body>
The below code demonstrates how to load an existing slate. The containerIndex specified must belong to the user whose api key you're using.
$('btnLoad').observe('click', function(e) {
$('btnLoad').disabled = true;
$('btnLoad').setValue('loading...');
slateBoxIsWired = true;
if ($('txtContainerIndex').getValue() != '') {
var firstSlate = new Slate($('firstSlate'), {
containerIndex: parseInt($('txtContainerIndex').getValue()),
apiKey: 'your_api_key_goes_here',
secretKey: 'your_secret_key_goes_here',
onContainerLoaded: function() {
//slateBoxIsWired = true;
$('btnLoad').disabled = false;
$('btnLoad').setValue('load');
}
});
}
});
<div style="padding:3px;border:1px solid black;">
<input type="text" id="txtContainerIndex"/> <input type='button' id="btnLoad" value="load" />
</div>
<div id="firstSlate">
</div>
| Global Operators | |
| Option Name | Usage |
|---|---|
| isSlateBoxWired |
This is a global variable that defines whether "auto saving" is turned on. This must be set to true if collaboration is enabled.
isSlateBoxWired = true;
|
| SlateMap |
Contains a globally accessible key->value pair hash of all the Slates on the given page.
SlateMap.get('containerInstance')
|
| Slate Options | ||
| Option Name | Usage | Default |
|---|---|---|
| allowCollaboration |
Allow collaboration on this slate.
slateInstance.options.allowCollaboration = true;
|
true |
| allowRelationshipBuilding |
Should collaborators of this slate be allowed to create relationships between nodes?
slateInstance.options.allowRelationshipBuilding = true;
|
true |
| allowViewPortDrag |
Allows the slate viewport to be draggable.
slateInstance.options.allowViewPortDrag = true;
|
true |
| anonymousDisplayName |
The name displayed when collaborative updates are shown in the status panel for anonymous users.
slateInstance.options.anonymousDisplayName = 'Bill';
|
[empty] |
| apiKey |
|
[empty] |
| authToken |
|
[empty] |
| categoryName |
|
[empty] |
| containerIndex |
|
[internal use only] |
| containerInstance |
|
[internal use only] |
| description |
|
[empty] |
| dropNodePanelBackgroundColor |
The color of your slate
slateInstance.options.dropNodePanelBackgroundColor = 'ffff99';
no # sign in color
|
[empty] |
| dropNodePanelBackgroundImage |
What background image should appear in the drop node panel?
slateInstance.options.dropNodePanelBackgroundImage = 'url_to_image';
|
[empty] |
| dropNodePanelBackgroundImageHeight |
The height in pixels of the background image.
slateInstance.options.dropNodePanelBackgroundImageHeight = 125;
optional, in pixels
|
0 |
| dropNodePanelBackgroundImageIsStatic |
Should the background image be statically positioned?
slateInstance.options.dropNodePanelBackgroundImageIsStatic = true;
|
true |
| dropNodePanelBackgroundImageIsTiled |
Should the background image be tiled?
slateInstance.options.dropNodePanelBackgroundImageIsTiled = true;
|
false |
| dropNodePanelBackgroundImageWidth |
The width in pixels of the background image.
slateInstance.options.dropNodePanelBackgroundImageHeight = 125;
optional, in pixels
|
0 |
| dropNodePanelBorder |
The css-styled string of the drop node panel border.
slateInstance.options.dropNodePanelBorder = '1px solid #00000';
|
none |
| dropNodePanelHeight |
The height in pixels of the drop node panel.
slateInstance.options.dropNodePanelHeight = 125;in pixels
|
500 |
| dropNodePanelHoverCssClass |
|
|
| dropNodePanelLeftMargin |
The margin (in pixels) between the template and drop panels.
slateInstance.options.dropNodePanelLeftMargin = 10;in pixels
|
10 |
| dropNodePanelViewPortTop |
The initial x-coordinate to position the slate viewport.
slateInstance.options.dropNodePanelViewPortTop = 1000;in pixels
|
1000 |
| dropNodePanelWidth |
The width in pixels of the drop node panel
slateInstance.options.dropNodePanelWidth = 800;in pixels
|
800 |
| isOffline |
Used internally as a flag to determine if a slate has been saved to the database.
slateInstance.options.isOffline;
|
[read only] |
| isTemplate |
Should this slate serve as a template for all SlateBox users?
slateInstance.options.isTemplate = false;
|
false |
| limitCollaborationToInstancesOnPage |
Limits any collaboration to the visible slates on the page.
slateInstance.options.limitCollaborationToInstancesOnPage = false;
|
false |
| minifyStatusText |
Provides a shorter summation of the collaboration updates in the status update panel
slateInstance.options.minifyStatusText = true;
|
false |
| name |
The name of the slate
slateInstance.options.name = 'my_slate_name'
|
[empty] |
| presentationMode |
When enabled, all collaboraters can adjust the current viewport position.
slateInstance.options.presentationMode = true;
|
false |
| requiresLoginForCollaboration |
Require all users to login prior to collaborating.
slateInstance.options.requiresLoginForCollaboration = true;
|
true |
| restrictUsersDuringPresentation |
If the slate is in presentation mode and this property is true, then only the owner can change the viewport position, but all collaborators still see the change.
slateInstance.options.restrictUsersDuringPresentation = false;
|
false |
| secretKey |
Provide your secret key for usage during authentication.
slateInstance.options.secretKey = 'your_secret_key';
|
[empty] |
| showStatusPanel |
Displays the yellow status panel to display collaboration updates in the slate.
slateInstance.options.showStatusPanel = true;
|
true |
| showTemplatePanel |
Displays the template panel on the right hand side of the drop node panel.
slateInstance.options.showTemplatePanel = true;
|
true |
| slaveToMaster |
Internal flag to define what slate.options.containerInstance is the master slate when presentation mode is set.
slateInstance.options.slaveToMaster;
|
[internal use only] |
| syncDuration |
The number of seconds it takes to move the viewport if NO determined duration is sent for the update.
slateInstance.options.syncDuration = 1;
|
1 |
| templateNodePanelBackgroundColor |
The background color of the template panel.
slateInstance.options.templateNodePanelBackgroundColor = 'ffff99';
no # sign in color
|
|
| templateNodePanelBackgroundImage |
The background image of the template panel.
slateInstance.options.templateNodePanelBackgroundImage
|
|
| templateNodePanelBackgroundImageHeight |
The height (in pixels) of the background image.
slateInstance.options.templateNodePanelBackgroundImageHeight = 125;
optional, in pixels
|
|
| templateNodePanelBackgroundImageIsStatic |
Is the background image static behind the template panel?
slateInstance.options.templateNodePanelBackgroundImageIsStatic = true
|
true |
| templateNodePanelBackgroundImageIsTiled |
Is the background image tiled behind the template panel?
slateInstance.options.templateNodePanelBackgroundImageIsTiled
|
false |
| templateNodePanelBackgroundImageWidth |
The width (in pixels) of the background image.
slateInstance.options.templateNodePanelBackgroundImageWidth = 125;
optional, in pixels
|
125 |
| templateNodePanelBorder |
The css-styled border for the template panel.
slateInstance.options.templateNodePanelBorder = '1px solid #000000';
|
|
| templateNodePanelHeight |
The height (in pixels) of the template panel.
slateInstance.options.templateNodePanelHeight = 500;
in pixels
|
500 |
| templateNodePanelPadding |
The padding (in pixels) between the template panel and its buttons
slateInstance.options.templateNodePanelPadding = 4;
in pixels
|
0 |
| templateNodePanelWidth |
The width (in pixels) of the template panel.
slateInstance.options.templateNodePanelWidth = 125;
in pixels
|
125 |
| templatePanelActiveButtonBackgroundColor |
The color of the actively pressed button in the template panel [coming soon].
slateInstance.options.templatePanelActiveButtonBackgroundColor = 'fff'
no # in color
|
[empty] |
| templatePanelButtonBackgroundColor |
no # in color
|
|
| templatePanelButtonBottomBorderColor |
The color of the bottom border under every template panel button
slateInstance.options.templatePanelButtonBottomBorderColor = 000000;
no # in color
|
000000 |
| templatePanelButtonFontFamily |
The css-font-family of the template panel buttons.
slateInstance.options.templatePanelButtonFontFamily = 'Trebechut MS'
|
Verdana |
| templatePanelButtonFontSize |
The point-size of the template panel button text.
slateInstance.options.templatePanelButtonFontSize = 10;
in points
|
10 |
| templatePanelButtonFontStyle |
The font style (underline, bold, or italics) of the template panel button font text.
slateInstance.options.templatePanelButtonFontStyle = 'italics';
|
normal |
| templatePanelButtonForegroundColor |
The color of the template panel button text.
slateInstance.options.templatePanelButtonForegroundColor = 'ffff99';
no # sign in color
|
|
| templatePanelButtonTextHorizontalAlign |
The horizontal alignment (left, center, right) of the template panel button text.
slateInstance.options.templatePanelButtonTextHorizontalAlign= 'center'
|
center |
| updateDatasourceOnChange |
Should the collaborative changes persist to the database?
slateInstance.options.updateDatasourceOnChange = true;
|
true |
| viewPortHeight |
The height (in pixels) of the viewport.
slateInstance.options.viewPortHeight = 2500;
in pixels
|
2500 |
| viewPortWidth |
The width (in pixels) of the viewport.
slateInstance.options.viewPortWidth = 2500;
in pixels
|
2500 |
| Slate Methods | ||
| Method Name | Usage | |
|---|---|---|
| addNode |
Adds a new node to the drop node panel
slateInstance.addNode(newSlateNodeInstance);
|
|
| addNodeTemplate |
Adds a new node to the template panel
slateInstance.addNodeTemplate(newSlateNodeInstance);
|
|
| auth |
Authenticates yourself using the slateInstance.options.apiKey and slateInstance.options.secretKey values.
slateInstance.auth();
|
|
| center |
Moves the viewport to the center of the slate.
slateInstance.center();
|
|
| confirmAuth |
After the auth() call succeeds, to finalize authorization, populate the slateInstance.options.authToken and call this method.
slateInstance.confirmAuth();
|
|
| createNewAccordionPanelFromTemplateNode |
Should not need to call explicitly; creates a new template panel button from an already-added template node.
slateInstance.createNewAccordionPanelFromTemplateNode(templateNode);
|
|
| endCollaboration |
Ends the slate collaboration.
slateInstance.endCollaboration();
|
|
| enqueueMessage |
Broadcasts a new update message to all collaborators for the specified duration.
slateInstance.enqueueMessage(messageText, duration);
|
|
| getCenterCoordinates |
Returns the x and y viewport center for this slate.
slateInstance.getCenterCoordinates();
|
|
| isStatusPanelPinned |
Returns true/false if the status panel is pinned (the user manually pinned the status panel to the slate so it cannot be changed)
slateInstance.isStatusPanelPinned();
|
|
| moveViewPort |
Moves the slate viewport to the specified position over the specified duration. If set to broadcast collaborative messages, the user provided will appear on collaborative slates.
slateInstance.moveViewPort(x, y, duration, user);
|
|
| refreshAccordion |
Refreshes all the buttons in the template node panel.
slateInstance.refreshAccordion();
|
|
| save |
Saves the current slate. This is NOT needed if the slate is wired for automatic updating.
slateInstance.save();
|
|
| startCollaboration |
Initializes collaboration for the slate.
slateInstance.startCollaboration();
|
|
| toggleStatusPanel |
Toggles the collaboration status panel that appears in the drop node panel during collaboration.
slateInstance.toggleStatusPanel();
|
|
| updateOptions |
Updates the slate options (refreshes its appearance if options change) and optionally broadcasts the changes to all collaborators.
slateInstance.updateOptions(doCollaboration, blnDrawLines);
|
|
| Slate Callbacks | ||
| Callback Name | Usage | |
|---|---|---|
| onAuthenticated |
Fires when confirmAuth() succeeds
slateInstance.onAuthenticated = function(containerInstance) { };
|
|
| onContainerLoaded |
|
|
| onModeChanged |
Fires when the slate presententation mode changes
slateInstance.onContainerLoaded = function(containerInstance) { };
|
|
| onSaved |
Saves the slate. If no options.containerIndex exists, then calling this method creates a new one.
slateInstance.onSaved = function(containerInstance) { };
|
|
| onSuccessfulLogin |
Fires when a user authenticates against an embedded slate. The login panel must be present for this event to fire.
slateInstance.onSuccessfulLogin = function(containerInstance, authenticatedUser) { };
|
|
| onViewPortBeginDrag |
Fires when the viewport dragging begins
slateInstance.onViewPortBeginDrag = function(containerInstance) { };
|
|
| onViewPortDragging |
Fires continuously as the viewport is being dragged
slateInstance.onViewPortDragging = function(containerInstance) { };
|
|
| onViewPortEndDrag |
Fires when the viewport dragging ends
slateInstance.onViewPortBeginDrag = function(containerInstance) { };
|
|
| Node Options | ||
| Option Name | Usage | Default |
|---|---|---|
| allowDrag |
Should this node be draggable?
nodeInstance.options.allowDrag = true;
|
true |
| allowDrop |
Should this node be allowed to have relationships with other nodes?
nodeInstance.options.allowDrop = true;
|
true |
| authToken |
Internally wired to match the slate authToken upon the success of the confirmAuth function.
nodeInstance.options.authToken
|
[internal use] |
| backgroundColor |
What background color should this node have?
nodeInstance.options.backgroundColor = '000000';
no # sign in color
|
|
| border |
What kind of border would you like this node to have?
nodeInstance.options.border = '1px solid #000000'
|
|
| categoryName |
What category does this node belong to in the left-hand template panel?
nodeInstance.options.categoryName = 'Button Panel 1'
|
|
| containerIndex |
Internal reference to the parent slate containerIndex
nodeInstance.options.containerIndex
|
|
| containerInstance |
Unique identifier for internal use
nodeInstance.options.containerInstance
|
|
| currentTemplateImage |
What image would you like to have inside this node?
nodeInstance.options.image = 'url_to_image'
|
[empty] |
| editTextType |
Either
nodeInstance.options.editTextType = 'text'
'html' is experimental
|
|
| endPointOfChildLines |
What kind of endpoint would you like to have on this node? (arrow, none)
nodeInstance.options.endPointOfChildLines = 'arrow';
|
|
| fontFamily |
What font family is the text?
nodeInstance.options.fontFamily = 'Verdana';
|
|
| fontSize |
What size is the text?
nodeInstance.options.fontSize = 10;
in points
|
|
| fontStyle |
What is the style of the text?
nodeInstance.options.fontStyle = 'normal';
|
|
| foregroundColor |
What color should the text have?
nodeInstance.options.foregroundColor = '000000'
no # sign in color
|
000000 |
| identifier |
Unique identifier to track nodes in addition to the nodeIndex
nodeInstance.options.identifier = 'unique_assigned_key';
|
[empty] |
| imageTiled |
Should the image be tiled in the background of this node?
nodeInstance.options.imageTiled = false;
|
false |
| isTemplate |
|
false |
| lineColor |
What should the color be of the connecting lines?
nodeInstance.options.lineColor = '000000';
no # sign in color
|
000000 |
| lineDecoration |
When connecting this node to other child nodes, how should the connecting line look? (solid, dotted, dashed)
nodeInstance.options.lineDecoration = 'solid';
|
|
| lineType |
Would you like the connecting lines to be direct (straight) or curvy?
nodeInstance.options.lineType = 'direct' or '43' (integer)
|
|
| lineWidth |
How thick are the connecting lines?
nodeInstance.options.lineWidth = 10;
in pixels
|
2 |
| lineWidthSlider |
How thick are the connecting lines?
nodeInstance.options.lineWidth = 10;
in pixels
|
2 |
| nodeDeleteImage |
Optional parameter to specify a different delete image
nodeInstance.options.nodeDeleteImage = 'url_to_delete_image';
optional, setting this will override default image
|
|
| nodeEditImage |
Optional parameter to specify a different edit image.
nodeInstance.options.nodeEditImage = 'url_to_edit_image';
optional, setting this will override default image
|
|
| nodeHandleImage |
Optional parameter to specify a different handle image.
nodeInstance.options.nodeHandleImage = 'url_to_handle_image';
optional, setting this will override default image
|
|
| nodeIndex |
Internally set unique integer
nodeInstance.options.nodeIndex
|
|
| nodeResizeImage |
Shows or hides the resize icon on node rollover
nodeInstance.options.nodeResizeImage = true;
|
true |
| showDelete |
Shows or hides the delete icon on node rollover
nodeInstance.options.showDelete = true;
|
true |
| showHandle |
Shows or hides the relationship handle icon on node rollover
nodeInstance.options.showHandle = true;
|
true; |
| showLinesOfChildren |
Do you want the lines connecting this node to its children to be visible?
nodeInstance.options.showLinesOfChildren = true;
|
true |
| snapNodePadding |
How much space should be in-between nodes that are "snapped" to each other?
nodeInstance.options.snapNodePadding = 4;
in pixels
|
2 |
| snapPositionOnDrop |
When you drop a node on top of this one, where would you like the dropped node to be positioned relative to this node? (top, bottom, left, right, topright, topleft, bottomright, bottomleft)
nodeInstance.options.snapPositionOnDrop = 'bottom'
|
|
| textHorizontalAlign |
How should the text be aligned inside the node?
nodeInstance.options.textHorizontalAlign = 'center';
|
|
| xPos |
The current x coordinate of the node
nodeInstance.options.xPos = 10;
in pixels
|
0 |
| yPos |
The current y coordinate of the node
nodeInstance.options.yPos = 20;
in pixels
|
0 |
| Node Methods | ||
| Method Name | Usage | |
|---|---|---|
| addNode |
Adds the otherNodeInstance as a child to the nodeInstance
nodeInstance.addNode(otherNodeInstance);
|
|
| container |
Gets a reference to the parent Slate of this node
nodeInstance.container()
|
|
| deleteDiagramNode |
Removes the nodeInstance from the slate and deletes all relationships
nodeInstance.deleteDiagramNode(blnProcessUpdates);
|
|
| drawLines |
Redraws the current relationship lines between this node and all children
nodeInstance.drawLines();
|
|
| moveNode |
Moves the nodeInstance per the arguments
nodeInstance.moveNode(x, y, duration, mode, updateUser);
|
|
| removeNode |
Removes the otherNodeInstance as a child from the nodeInstance
nodeInstance.removeNode(otherNodeInstance, shouldSync);
|
|
| resizeNode |
Puts the node in resizable mode
nodeInstance.resizeNode();
|
|
| updateOptions |
Refreshes the current node options and applies any new styles
nodeInstance.updateOptions(blnDoCollaboration, blnDrawLines);
|
|
| Node Callbacks | ||
| Callback Name | Usage | |
|---|---|---|
| onNodeIndexAssigned |
Fires when the node index is assigned to the node
nodeInstance.onNodeIndexAssigned= function { };
|
|