<!-- YUI --> <link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/lib/yui/reset-fonts-grids/reset-fonts-grids.css')}" /> <link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/lib/yui/assets/skins/sam/skin.css')}" /> <!-- InputEx CSS --> <link type='text/css' rel='stylesheet' href="${tg.url('/scripts/wireit/lib/inputex/css/inputEx.css')}" /> <!-- YUI-accordion CSS --> <link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/lib/accordionview/assets/skins/sam/accordionview.css')}" /> <!-- WireIt CSS --> <link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/css/WireIt.css')}" /> <link rel="stylesheet" type="text/css" href="${tg.url('/scripts/wireit/css/WireItEditor.css')}" /> <style> html { background: #90887f; } body { overflow: hidden; } div.WireIt-Container { width: 200px; /* Prevent the modules from scratching on the right */ /*height: 100px;*/ } 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; } div.WireIt-Container { width: 300px; } div.WireIt-Container div.body { height: 180px; } div.WireIt-Container.WiringEditor-module-AdapterCode div.body, div.WireIt-Container.WiringEditor-module-ProducerCode div.body, div.WireIt-Container.WiringEditor-module-ConsumerCode div.body { height: 200px; } div.WireIt-Container div.body .inputEx-Field { float: none; } div.WireIt-Container div.body fieldset { height: 100%; } div.WireIt-Container div.body .inputEx-Field textarea { width: 100% !important; height: 90%; } div.WireIt-Container div.body .inputEx-Field input { width: auto; } div.WireIt-Container .CodeMirror-line-numbers { margin-top: 0.4em; line-height: normal; } /* Composed Module */ div.ComposedModule { background-color: #DDDDAA; } #header { z-index: 10; } .WireIt-LayerMap { width: 100%; } div.WireIt-Container-ddhandle { background: #90887f; } div.WireIt-Container div.body { border-color: #90887f; } </style> <script src="${tg.url('/scripts/codemirror/codemirror.js')}" type="text/javascript"></script> <!-- YUI --> <script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/utilities/utilities.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/resize/resize-min.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/layout/layout-min.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/container/container-min.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/json/json-min.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/lib/yui/button/button-min.js')}"></script> <!-- InputEx with wirable options (WirableField-beta) --> <script src="${tg.url('/scripts/wireit/lib/inputex/js/inputex.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/Field.js')}" type='text/javascript'></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/util/inputex/WirableField-beta.js')}"></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/Group.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/Visus.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/StringField.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/Textarea.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/SelectField.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/IntegerField.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/NumberField.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/EmailField.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/UrlField.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/ListField.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/CheckBox.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/InPlaceEdit.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/ColorField.js')}" type='text/javascript'></script> <script src="${tg.url('/scripts/wireit/lib/inputex/js/fields/TypeField.js')}" type='text/javascript'></script> <!-- YUI-Accordion --> <script src="${tg.url('/scripts/wireit/lib/accordionview/accordionview-min.js')}" type='text/javascript'></script> <!-- WireIt --> <!--[if IE]><script type="text/javascript" src="${tg.url('/scripts/wireit/lib/excanvas.js')}"></script><![endif]--> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/WireIt.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/CanvasElement.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/Wire.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/Terminal.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/util/DD.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/util/DDResize.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/Container.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/Layer.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/util/inputex/FormContainer-beta.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/LayerMap.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/designeditor.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/adapters/json-rpc.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/js/ImageContainer.js')}"></script> <script type="text/javascript" src="${tg.url('/scripts/wireit/designer.js')}"></script> <script type="text/javascript" src="${tg.url('/tubes/design_info', params=dict(tube_id=tube.id, jsonp='tube_content'))}"></script> <script type="text/javascript"> var tube_id = ${tube.id}; var resize_container = function() { var center = $('center'); pos = center.getPosition(); var content = $('centercontainer'); y = window.getSize().y - pos.y - content.getStyle('borderBottomWidth').toInt() - content.getStyle('paddingBottom').toInt() - content.getStyle('marginBottom').toInt() - $('footer').getHeight(); center.setStyle('height', y + 'px'); }; window.addEvent('resize', resize_container); window.addEvent('domready', function() { pythonBox.init(pythonBox); resize_container(); pythonBox.editor.loadPipeContent(tube_content); }); </script> </head> <body> <div id="sidebar" style="z-index: 1;"> <h3>Components</h3> <div id="left"></div> <div id="layerMap"></div> <h3>Controls</h3> <button id="save">Save</button> <button id="launch">Launch</button> </div> <div id="centercontainer" style="position: relative; margin-left: 250px; margin-top: 10px; height: 500px;"> <div id="center" style="position: relative;"></div> </div> </body> </html>