sandbox/jsBox/jsBox.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WireIt - jsBox example</title>
<!-- YUI -->
<link rel="stylesheet" href="https://yui-s.yahooapis.com/combo?3.6.0/build/cssreset/reset-min.css&3.6.0/build/cssfonts/fonts-min.css">
<script src="https://yui-s.yahooapis.com/3.6.0/build/yui/yui.js"></script>
<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../../../inputex/lib/inputex/css/inputEx.css' />
<!-- YUI-accordion CSS -->
<link rel="stylesheet" type="text/css" href="../../../editor/lib/accordionview/assets/skins/sam/accordionview.css" />
<!-- WireIt CSS -->
<link rel="stylesheet" type="text/css" href="../../../../assets/WireIt.css" />
<link rel="stylesheet" type="text/css" href="../../../editor/assets/WireItEditor.css" />
<style>
div.WireIt-Container {
width: 200px; /* Prevent the modules from scratching on the right */
/*height: 100px;*/
}
#WiringEditor-runButton button {
background: transparent url(../../../editor/assets/bullet_go.png) no-repeat scroll 10% 50%;
}
div.WireIt-Container div.inputEx-Group div.inputEx-label {
width: auto;
}
div.inputEx-TypeField-PropertiesPanel {
z-index: 7;
}
/* Comment Module */
div.WireIt-Container.WiringEditor-module-comment { width: 200px; }
div.WireIt-Container.WiringEditor-module-comment div.body { background-color: #EEEE66; }
div.WireIt-Container.WiringEditor-module-comment div.body textarea { background-color: transparent; font-weight: bold; border: 0; }
/* Composed Module */
div.ComposedModule { background-color: #DDDDAA; }
</style>
<!-- YUI -->
<script src="../../../editor/lib/accordionview/accordionview-min.js" type='text/javascript'></script>
<script type="text/javascript" src="../../../../lib/excanvas.js"></script>
<!-- WireIt -->
<script type="text/javascript" src="../../../../build/wireit-inputex-editor-composable-min.js"></script>
<script type="text/javascript" src="../../../editor/js/adapters/json-rpc.js"></script>
<script type="text/javascript" src="jsBox.js"></script>
<script type="text/javascript" src="ExecutionFrame.js"></script>
<script>
YUI_config.groups.wireit.base = '../../';
YUI({filter: 'raw', combine: false}).use('wire', 'bezier-wire', 'terminal', function(Y) {
// Init the jsBox editor with a default program
jsBox.init();
});
</script>
</head>
<body class="yui-skin-sam">
<div id="top">
<div class="logo">jsBox</a></div>
<div id="toolbar"></div>
<div class="topright">
<span>Hello there !</span> |
<a href="../..">back to WireIt</a>
</div>
</div>
<div id="left">
</div>
<div id="right">
<ul id="accordionView">
<li>
<h2>Properties</h2>
<div>
<div id="propertiesForm"></div>
</div>
</li>
<li>
<h2>Minimap</h2>
<div style='position: relative;'>
<div id="layerMap"></div>
</div>
</li>
<li>
<h2>Infos</h2>
<div>
<div style="padding: 10px;">
<p style="font-weight: bold;">What this example does :</p>
<ul style="margin-left: 20px;">
<li>* Define a visual language of 5 modules: input, output, jsBox, callback, comment</li>
<li>* Creates the "jsBox" container</li>
<li>* Creates the "Composed" container</li>
<li>* Hack the WiringEditor to handle the composed modules</li>
<li>* Provide a small virtual machine for executing this language</li>
</ul>
<br />
<p style="font-weight: bold;">How to use it :</p>
<ul style="margin-left: 20px;">
<li>* Drag and drop modules from the Module list to the working layer.</li>
<li>* Create a module with inputs, outputs and jsBox modules (or load an existing one)</li>
<li>* Press the "Run" button to run the code within the same window</li>
</ul>
<br />
<p><u><b>Warning:</b></u> Composed modules are shared anonymously. <br />Someone could change/delete your modules or create evil ones !</p>
<br />
<p>Sources: <a href="jsBox.js" target="_new">jsBox.js</a> and <a href="ExecutionFrame.js" target="_new">ExecutionFrame.js</a></p>
</div>
</div>
</li>
</ul>
</div>
<div id="center">
</div>
<!-- This is the content of the HELP panel -->
<div id="helpPanel">
<div class="hd">Welcome to jsBox</div>
<div class="bd" style="text-align: left;">
<p>This is an advanced example of the WiringEditor from the <a href="http://neyric.github.com/wireit">WireIt library</a>.</p>
<br />
<p style="font-weight: bold;">What this example does :</p>
<ul style="margin-left: 20px;">
<li>* Define a visual language of 5 modules: input, output, jsBox, callback, comment</li>
<li>* Creates the "jsBox" container</li>
<li>* Creates the "Composed" container</li>
<li>* Hack the WiringEditor to handle the composed modules</li>
<li>* Provide a small virtual machine for executing this language</li>
</ul>
<br />
<p style="font-weight: bold;">How to use it :</p>
<ul style="margin-left: 20px;">
<li>* Drag and drop modules from the Module list to the working layer.</li>
<li>* Create a module with inputs, outputs and jsBox modules (or load an existing one)</li>
<li>* Press the "Run" button to run the code within the same window</li>
</ul>
<br />
<p><u>Warning:</u> Composed modules are shared anonymously. <br />Someone could change/delete your modules or create evil ones !</p>
<br />
<p>Sources: <a href="jsBox.js" target="_new">jsBox.js</a> and <a href="ExecutionFrame.js" target="_new">ExecutionFrame.js</a></p>
</div>
</div>
</body>
</html>