Skip to content

Instantly share code, notes, and snippets.

@sfentress

sfentress/classlist-shim-for-ie.js

Forked from stepheneb/README.md
Created May 21, 2012 19:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sfentress/2764264 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sfentress/2764264 to your computer and use it in GitHub Desktop.
Download ZIP
NetLogo Data for DG, using generic dgApi
Raw
readme.md

NetLogo Global Climate model and JavaScript grapher

This example displays a NetLogo model sending data to a JavaScript grapher

Raw
classlist-shim-for-ie.js
/*
* Minimal classList shim for IE 9
* By Devon Govett
* MIT LICENSE
*/
if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/\s+/),
index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
}
}
var ret = {
add: update(function(classes, index, value) {
~index || classes.push(value);
}),
remove: update(function(classes, index) {
~index && classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
~index ? classes.splice(index, 1) : classes.push(value);
}),
contains: function(value) {
return !!~self.className.split(/\s+/).indexOf(value);
},
item: function(i) {
return self.className.split(/\s+/)[i] || null;
}
};
Object.defineProperty(ret, 'length', {
get: function() {
return self.className.split(/\s+/).length;
}
});
return ret;
}
});
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>NetLogo Applet</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script src="classlist-shim-for-ie.js" type="text/javascript"></script>
<script src="https://raw.github.com/gist/2764196/610b262e9b266a6f71c58e0d2ad27a304475466c/dgApi.js" type="text/javascript"></script>
</head>
<body>
<h1>Simple Global Climate Change NetLogo Applet</h1>
<ul class="hlist">
<li>
<div id="appletwrapper">
<ul class="hlist">
<li><button id="run-button" class="nlogo">Run</button></li>
<li><button id="reset-button" class="nlogo">Reset</button></li>
<li><button id="watch-sunray-button" class="nlogo">Watch Sunray</button></li>
</ul>
<applet id="applet" code="org.nlogo.lite.Applet" archive="http://stepheneb.github.com/netlogo-gcc/NetLogoLite.jar" width="590" height="430">
<param name="DefaultModel" value="http://stepheneb.github.com/netlogo-gcc/GCCModel.v3.nlogo">
</applet>
</div>
</li>
<li>
<div id="chart" class="chart"></div>
</li>
</ul>
<script src="netlogo.js" type="text/javascript"></script>
</body>
</html>
Raw
netlogo.js
/*global browser:true */
var applet = document.getElementById("applet"),
run_button = document.getElementById("run-button"),
reset_button = document.getElementById("reset-button"),
watch_sunray_button = document.getElementById("watch-sunray-button"),
nl_obj_panel, // org.nlogo.lite.Applet object
nl_obj_workspace, // org.nlogo.lite.LiteWorkspace
nl_obj_world, // org.nlogo.agent.World
nl_obj_program, // org.nlogo.api.Program
nl_obj_state,
nl_obj_observer,
nl_obj_globals,
sw,
pw,
nlogo_elements,
globals = [], i,
data_array = [],
graph;
window.onload=function() {
disable_nlogo_elements();
dgApi.initGame("NetLogo Data", [ { name: "ticks", type: 'numeric', description: "Current tick", precision: 0 },
{ name: "temperature", type: 'numeric', description: "Global Climate Temperature", precision: 2 }
]);
dgApi.beginRun();
//
// NetLogo Applet Loading Handler
//
// Wait until the applet is loaded and initialized before enabling buttons
// and creating JavaScript variables for Java objects in the applet.
//
applet.ready = false;
applet.checked_more_than_once = false;
window.setTimeout (function() { isAppletReady(); }, 250);
function isAppletReady() {
try {
applet.ready = applet.panel();
} catch (e) {
// Do nothing--we'll try again in the next timer interval.
}
if(applet.ready) {
nl_setup_objects();
nl_obj_panel.commandLater("set done true");
sw = new applet.Packages.java.io.StringWriter();
pw = new applet.Packages.java.io.PrintWriter(sw);
enable_nlogo_elements();
if(applet.checked_more_than_once) {
clearInterval(applet.checked_more_than_once);
applet.checked_more_than_once = false;
}
} else {
if(!applet.checked_more_than_once) {
applet.checked_more_than_once = window.setInterval(function() { isAppletReady(); }, 250);
}
}
}
//
// Create these JavaScript objects to provide access to the
// corresponding Java objects in NetLogo.
//
function nl_setup_objects() {
nl_obj_panel = applet.panel();
nl_obj_workspace = nl_obj_panel.workspace();
nl_obj_world = nl_obj_workspace.org$nlogo$lite$LiteWorkspace$$world;
nl_obj_program = nl_obj_world.program();
nl_obj_observer = nl_obj_world.observer();
nl_obj_globals = nl_obj_program.globals();
}
//
// NetLogo command interface
//
function nl_cmd_start() {
nl_obj_panel.commandLater("set done false while [not done] [ execute ]");
}
function nl_cmd_stop() {
nl_obj_panel.commandLater("set done true");
}
function nl_cmd_execute(cmd) {
nl_obj_panel.commandLater(cmd);
}
function nl_cmd_save_state() {
nl_obj_world.exportWorld(pw, true);
nl_obj_state = sw.toString();
}
function nl_cmd_restore_state() {
if (nl_obj_state) {
var sr = new applet.Packages.java.io.StringReader(nl_obj_state);
nl_obj_workspace.importWorld(sr);
nl_obj_panel.commandLater("display");
}
}
function nl_cmd_reset() {
nl_cmd_stop();
nl_obj_panel.commandLater("startup");
}
//
// Managing the NetLogo data polling system
//
function startNLDataPoller() {
applet.data_poller = window.setInterval(function() { nlDataPoller(); }, 200);
}
function stopNLDataPoller() {
if (applet.data_poller) {
clearInterval(applet.data_poller);
applet.data_poller = false;
}
}
function nlDataPoller() {
data_array.push(nl_obj_observer.getVariable(3));
dgApi.addTick([ data_array.length, data_array[data_array.length-1] ]);
}
//
// button handlers
//
run_button.onclick = function() {
if (run_button.textContent == "Run") {
run_button_run();
} else {
run_button_stop();
}
};
reset_button.onclick = function() {
run_button_stop();
nl_cmd_reset();
data_array.length = 0;
dgApi.endRun();
dgApi.beginRun();
};
watch_sunray_button.onclick = function() {
nl_cmd_execute("watch one-of sunrays with [ycor > (max-pycor / 2 ) and heading > 90 ]");
};
//
// button/view helpers
//
function run_button_run() {
nl_cmd_start();
startNLDataPoller();
run_button.textContent = "Stop";
}
function run_button_stop() {
nl_cmd_stop();
stopNLDataPoller();
run_button.textContent = "Run";
}
//
// add the css class "inactive" to all dom elements that include the class "nlogo"
//
function disable_nlogo_elements() {
nlogo_elements = document.getElementsByClassName("nlogo");
for (i=0; i < nlogo_elements.length; i++) {
nlogo_elements[i].classList.add("inactive");
}
}
//
// add the css class "active" to all dom elements that include the class "nlogo"
//
function enable_nlogo_elements() {
nlogo_elements = document.getElementsByClassName("nlogo");
for (i=0; i < nlogo_elements.length; i++) {
nlogo_elements[i].classList.remove("inactive");
nlogo_elements[i].classList.add("active");
}
}
};
Raw
styles.css
body { font: 12px Verdana, Arial, Helvetica, sans-serif;
margin: 1.0em 2.0em;
background-color: white;}
h1 { font-size: 1.6em;
font-weight: bold; }
h2 { font-size: 1.4em;
font-weight: bold; }
h1 { font-size: 1.2em;
font-weight: bold; }
hr { margin: 2em 0em; }
p { max-width: 600px; }
#appletwrapper { border: 1px solid white;
padding: 10px;
width: 600px;
height: 490px;
background-color: white; }
applet { padding: 0px;
background-color: white; }
table { border: 1px solid gray;
border-spacing: 0px;
border-collapse: collapse;
font: 10px/24px Verdana, Arial, Helvetica, sans-serif; }
table th {
border: 1px solid gray;
padding: 0em 1em;
text-align: center; }
table td {
font-size: 0.9em;
border: 1px solid gray;
padding: 0em 1em;
text-align: right;
width: 14em; }
table td.left {
padding: 0em 1em 0em 2em;
text-align: left; }
ul {
list-style-type: none;
padding: 0em 0em;
margin: 0.5em 0em 0em 0.5em;
width: 100%; }
ul li {
margin: 0em;
padding: 0em 1em; }
ul.hlist li {
display: table-cell;
vertical-align: top;
margin: 0em;
padding: 0em 0.5em; }
button.active {
font-weight: bold;
font-color: black;
border-bottom: 2px solid black; }
button {
font-weight: normal;
font-color: gray;
border-bottom: 0px solid black; }
pre { font-size: 0.8em;
border: 1px solid gray;
padding: 1em;
background-color: #F0F0F0;
width: 80em;
height: 40em;
overflow: scroll; }
.chart {
border: 1px solid white;
background-color: #FAFAFA;
margin-top: 20px;
width: 580px;
height: 465px; }
circle, .line {
fill: none;
stroke: steelblue;
stroke-width: 1px; }
text.title { font-size: 1.2em;
font-weight: bold; }
text.axis { font-size: 1.0em;
font-weight: normal; }
circle {
fill: white;
fill-opacity: 0.2;
cursor: move; }
circle.selected {
fill: #ff7f0e;
stroke: #ff7f0e; }
circle:hover {
fill: #ff7f0e;
stroke: #707f0e; }
circle.selected:hover {
fill: #ff7f0e;
stroke: #ff7f0e; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment