Title for your model
Here is a suggested layout to get you started...
Introduction
Background, and purpose of the model.
Model description
Some text describing the main features of the model.
Insert the diagram widget, plus some explanatory text.
Insert the equation widget, plus some explanatory text.
Results
Insert the multiple_sliders widget to allow a visitor to your page to change model inputs.
Insert the plotter widget to plot the simulation results (as a graph of the stock values against time).
Notes
You can freely mix text and Systo widgets on this page
For text, just use like a normal WYSIWYG (what-you-see-is-what-you-get) editor. I.e. type in the text, then use the text formatting menu above to make headings, bold ec.
To insert a Systo widget, select the model and widget you want from the menus above, click where you want to insert the widget, then click on the Insert button.
To save your page as a complete, ready-to-use HTML page, just click on the Save button.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sysiwyg saved HTML</title>
<link type="text/css" rel="stylesheet" href="layout-default-latest.css" />
<!-- CSS -->
<link type="text/css" rel="stylesheet" href="jquery-ui.css"/>
<link type="text/css" rel="stylesheet" href="jquery-ui-1.9.2.custom.css"/>
<style>
.placeddiv {
background-color: white;
border: solid 1px black;
width: 300px;
height: 200px;
position: absolute;
}
.ui-front {
z-index:1000000 !important; /* The default is 100. !important overrides the default. */
</style>
<!-- Systo core - defines the SYSTO global variable and some core functions -->
<script type="text/javascript" src="systo.js"></script>
<!--script src="http://code.jquery.com/jquery-1.9.1.js"></script-->
<!--script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script-->
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.3.js"></script>
<script type="text/javascript" src="jquery.layout-latest.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.ui.widget.js"></script>
<script type="text/javascript" src="formatting.js"></script>
<script type="text/javascript" src="Blob.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<!-- Supplementary Systo code -->
<!--script type="text/javascript" src="generate_simulation_code_v1.js"></script-->
<script type="text/javascript" src="simulation.js"></script>
<script type="text/javascript" src="action.js"></script>
<script type="text/javascript" src="compact.js"></script>
<script type="text/javascript" src="equation.js"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="plugins/codeGenerator/euler1.js"></script>
<script type="text/javascript" src="plugins/codeGenerator/euler2.js"></script>
<script type="text/javascript" src="plugins/codeGenerator/rk41.js"></script>
<script type="text/javascript" src="plugins/codeGenerator/euler1animate.js"></script>
<!-- A model language definition, held as a Javascript object literal -->
<script type="text/javascript" src="languages/system_dynamics.js"></script>
<!-- Model(s), held as a Javascript object literal -->
<!-- None! - these are saved as SYSTO.models by sysiwyg! -->
<!-- The widgets used in this page -->
<script type="text/javascript" src="systo_widgets/jquery.audio_plotter.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.auto_layout.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.compare_models_text.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.diagram.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.dialog_diagram_options.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.dialog_sd_node.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.equation_listing.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.import_im.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.import_vensim.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.import_xmile.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.inline_value.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.keypad.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.local_open.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.local_save.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.messages.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.multi_plotter.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.multiple_sliders.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.node_panel.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.phase_plane.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.plotter.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.rich_text_editor.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.runcontrol.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.sketchgraph.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.slider1.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.table.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.technical.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.template.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.text_editor.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.text_plotter.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.toolbar.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.tutorial.js"></script>
<script type="text/javascript" src="systo_widgets/jquery.tutorial_step.js"></script>
<script>
$(document).ready(function() {
++++
SYSTO.state.currentPackageId = 'package1';
SYSTO.state.currentModelId = Object.keys(SYSTO.models)[0];
SYSTO.switchToModel(SYSTO.state.currentModelId);
----
SYSTO.trigger(
'sysiwyg_gen.html',
'main script',
'change_model_listener',
'click',
[{ packageId:SYSTO.state.currentPackageId,
oldModelId:'',
newModelId:SYSTO.state.currentModelId}]
);
SYSTO.trigger(
'sysiwyg.html',
'main script',
'display_listener',
'click',
[{ packageId:SYSTO.state.currentPackageId,
modelId:SYSTO.state.currentModelId
}]
);
});
</script>
</head>
<body style="margin:0px; padding:10px;">
####
</body>
</html>