cacatoo
Version:
Building, exploring, and sharing spatially structured models
3,897 lines (983 loc) • 95.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: Simulation</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: Simulation</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>Simulation<span class="signature">(config)</span><span class="type-signature"></span></h2>
<div class="class-description">Simulation is the global class of Cacatoo, containing the main configuration
for making a grid-based model and displaying it in either browser or with
nodejs.</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="Simulation"><span class="type-signature"></span>new Simulation<span class="signature">(config)</span><span class="type-signature"></span></h4>
<div class="description">
The constructor function for a @Simulation object. Takes a config dictionary.
and sets options accordingly.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>config</code></td>
<td class="type">
<span class="param-type">dictionary</span>
</td>
<td class="description last">A dictionary (object) with all the necessary settings to setup a Cacatoo simulation.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line3530">line 3530</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="addButton"><span class="type-signature"></span>addButton<span class="signature">(text, func)</span><span class="type-signature"></span></h4>
<div class="description">
addButton adds a HTML button which can be linked to a function by the user.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>text</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Text displayed on the button</td>
</tr>
<tr>
<td class="name"><code>func</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="description last">Function to be linked to the button</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4303">line 4303</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addCheckpointButton"><span class="type-signature"></span>addCheckpointButton<span class="signature">({@GridModel})</span><span class="type-signature"></span></h4>
<div class="description">
addCheckpointButton adds a button to the HTML environment which allows the user
to reload the grid to the state as found in a JSON file saved by save_grid. The JSON
file must of course match the simulation (nrows, ncols, properties in gps), but this
is the users own responsibility.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>{@GridModel}</code></td>
<td class="type">
</td>
<td class="description last">targetgrid The gridmodel containing the grid to reload the grid.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line5299">line 5299</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addCustomSlider"><span class="type-signature"></span>addCustomSlider<span class="signature">(func, min<span class="signature-attributes">opt</span>, max<span class="signature-attributes">opt</span>, step<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
addCustomSlider adds a HTML slider to the DOM-environment which allows the user
to add a custom callback function to a slider
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>func</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">The name of the (global!) parameter to link to the slider</td>
</tr>
<tr>
<td class="name"><code>min</code></td>
<td class="type">
<span class="param-type">float</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0
</td>
<td class="description last">Minimal value of the slider</td>
</tr>
<tr>
<td class="name"><code>max</code></td>
<td class="type">
<span class="param-type">float</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
2
</td>
<td class="description last">Maximum value of the slider</td>
</tr>
<tr>
<td class="name"><code>step</code></td>
<td class="type">
<span class="param-type">float</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0.01
</td>
<td class="description last">Step-size when modifying</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4389">line 4389</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addDarkModeToggle"><span class="type-signature"></span>addDarkModeToggle<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Automatically injects a dark-mode toggle button into the page.
Skipped if config.darkmode === false.
Uses Dygraphs' updateOptions() to set axisLabelColor so the colour
survives graph redraws rather than patching DOM elements.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line5146">line 5146</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addHTML"><span class="type-signature"></span>addHTML<span class="signature">(div, html)</span><span class="type-signature"></span></h4>
<div class="description">
Adds some html to an existing DIV in your web page.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>div</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">Name of DIV to add to</td>
</tr>
<tr>
<td class="name"><code>html</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">HTML code to add</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4565">line 4565</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addMovieButton"><span class="type-signature"></span>addMovieButton<span class="signature">({@Model}, property)</span><span class="type-signature"></span></h4>
<div class="description">
addMovieButton adds a standard button to record a video
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>{@Model}</code></td>
<td class="type">
</td>
<td class="description last">model (@Gridmodel of @Flockmodel) containing the canvas to be recorded.</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The name of the display (canvas) to be recorded</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4859">line 4859</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addObjectbrush"><span class="type-signature"></span>addObjectbrush<span class="signature">(gridmodel, obj, brushsize, brushflow, canvas)</span><span class="type-signature"></span></h4>
<div class="description">
Add an object-drawing posibility to this canvas
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>gridmodel</code></td>
<td class="type">
<span class="param-type"><a href="Gridmodel.html">Gridmodel</a></span>
</td>
<td class="description last">The gridmodel to which this canvas belongs</td>
</tr>
<tr>
<td class="name"><code>obj</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Replace current gp with this object</td>
</tr>
<tr>
<td class="name"><code>brushsize</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="description last">radius of the brush</td>
</tr>
<tr>
<td class="name"><code>brushflow</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="description last">amounts of substeps taken (1 by default)</td>
</tr>
<tr>
<td class="name"><code>canvas</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">alternative canvas name to draw on (first canvas by default)</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4679">line 4679</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addPatternButton"><span class="type-signature"></span>addPatternButton<span class="signature">({@GridModel}, property)</span><span class="type-signature"></span></h4>
<div class="description">
addPatternButton adds a pattern button to the HTML environment which allows the user
to load a PNG which then sets the state of 'proparty' for the @GridModel.
(currently only supports black and white image)
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>{@GridModel}</code></td>
<td class="type">
</td>
<td class="description last">targetgrid The gridmodel containing the grid to be modified.</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="description last">The name of the state to be set</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line5085">line 5085</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addPauseButton"><span class="type-signature"></span>addPauseButton<span class="signature">(start)</span><span class="type-signature"></span></h4>
<div class="description">
addButton adds a HTML button, in this case a default "pause button"
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>start</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="default">
true
</td>
<td class="description last">Whether the simulation should start in a paused state</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4316">line 4316</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addRecordControls"><span class="type-signature"></span>addRecordControls<span class="signature">(target_div, opts<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
addRecordControls — adds a "Record frames → PNG" panel to form_holder.
Uses the File System Access API (Chrome/Edge only).
Call sim.captureStep() unconditionally in your update loop;
it self-throttles by the chosen interval and does nothing when not recording.
Optional CSV: provide csvHeaders + csvCallback to also write stats.csv on Stop.
Example usage:
sim.addRecordControls('canvas_holder', {
every: 50,
csvHeaders: 'time,nA,nB',
csvCallback: () => `${sim.time},${nA},${nB}`
})
// in your update function:
sim.captureStep()
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>target_div</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last">ID of the div to screenshot each frame</td>
</tr>
<tr>
<td class="name"><code>opts</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last">
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>every</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
25
</td>
<td class="description last">Default capture interval in steps</td>
</tr>
<tr>
<td class="name"><code>csvHeaders</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">CSV header row (optional)</td>
</tr>
<tr>
<td class="name"><code>csvCallback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last">Returns one CSV data-row string per frame (optional)</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4891">line 4891</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addSlider"><span class="type-signature"></span>addSlider<span class="signature">(parameter, min<span class="signature-attributes">opt</span>, max<span class="signature-attributes">opt</span>, step<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
addSlider adds a HTML slider to the DOM-environment which allows the user
to modify a model parameter at runtime.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>parameter</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last">The name of the (global!) parameter to link to the slider</td>
</tr>
<tr>
<td class="name"><code>min</code></td>
<td class="type">
<span class="param-type">float</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0
</td>
<td class="description last">Minimal value of the slider</td>
</tr>
<tr>
<td class="name"><code>max</code></td>
<td class="type">
<span class="param-type">float</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
2
</td>
<td class="description last">Maximum value of the slider</td>
</tr>
<tr>
<td class="name"><code>step</code></td>
<td class="type">
<span class="param-type">float</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
0.01
</td>
<td class="description last">Step-size when modifying</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4337">line 4337</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addStatebrush"><span class="type-signature"></span>addStatebrush<span class="signature">(gridmodel, property, value_to_place, brushsize, brushflow)</span><span class="type-signature"></span></h4>
<div class="description">
Add a statedrawing posibility to this canvas
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>gridmodel</code></td>
<td class="type">
<span class="param-type"><a href="Gridmodel.html">Gridmodel</a></span>
</td>
<td class="description last">The gridmodel to which this canvas belongs</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">the property that should be shown on the canvas</td>
</tr>
<tr>
<td class="name"><code>value_to_place</code></td>
<td class="type">
</td>
<td class="description last">set @property to this value</td>
</tr>
<tr>
<td class="name"><code>brushsize</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="description last">radius of the brush</td>
</tr>
<tr>
<td class="name"><code>brushflow</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="description last">amounts of substeps taken (1 by default)</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4580">line 4580</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addToggle"><span class="type-signature"></span>addToggle<span class="signature">(parameter)</span><span class="type-signature"></span></h4>
<div class="description">
addToggle adds a HTML checkbox element to the DOM-environment which allows the user
to flip boolean values
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>parameter</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of the (global!) boolean to link to the checkbox</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line4538">line 4538</a>
</li></ul></dd>
</dl>
<h4 class="name" id="captureStep"><span class="type-signature">(async) </span>captureStep<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
captureStep — call unconditionally in your update loop.
Records a PNG frame and/or a CSV row (depending on addRecordControls options).
Does nothing when not recording or between intervals.
Requires addRecordControls() to have been called first.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line5031">line 5031</a>
</li></ul></dd>
</dl>
<h4 class="name" id="colourRamp"><span class="type-signature"></span>colourRamp<span class="signature">(arr1, arr2, n)</span><span class="type-signature"> → {dict}</span></h4>
<div class="description">
colourRamp interpolates between two arrays to get a smooth colour scale.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>arr1</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Array of R,G,B values to start fromtargetgrid The gridmodel containing the grid to be modified.</td>
</tr>
<tr>
<td class="name"><code>arr2</code></td>
<td class="type">
<span class="param-type">array</span>
</td>
<td class="description last">Array of R,B,B values to transition towards</td>
</tr>
<tr>
<td class="name"><code>n</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">number of steps taken</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line5396">line 5396</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
A dictionary (i.e. named JS object) of colours
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">dict</span>
</dd>
</dl>
<h4 class="name" id="createDisplay"><span class="type-signature"></span>createDisplay<span class="signature">(name, property, customlab, height, width, scale)</span><span class="type-signature"></span></h4>
<div class="description">
Create a display for a gridmodel, showing a certain property on it.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of an existing gridmodel to display</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of the property to display</td>
</tr>
<tr>
<td class="name"><code>customlab</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Overwrite the display name with something more descriptive</td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Number of rows to display (default = ALL)</td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Number of cols to display (default = ALL)</td>
</tr>
<tr>
<td class="name"><code>scale</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Scale of display (default inherited from @Simulation class)</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line3633">line 3633</a>
</li></ul></dd>
</dl>
<h4 class="name" id="createDisplay_continuous"><span class="type-signature"></span>createDisplay_continuous<span class="signature">(config, name, property, customlab, height, width, scale, minval, maxval, nticks, decimals, num_colours, fill)</span><span class="type-signature"></span></h4>
<div class="description">
Create a display for a gridmodel, showing a certain property on it.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>config</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Object with the keys name, property, label, width, height, scale, minval, maxval, nticks, decimals, num_colours, fill
These keys:value pairs are:</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of the model to display</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of the property to display</td>
</tr>
<tr>
<td class="name"><code>customlab</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Overwrite the display name with something more descriptive</td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Number of rows to display (default = ALL)</td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Number of cols to display (default = ALL)</td>
</tr>
<tr>
<td class="name"><code>scale</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Scale of display (default inherited from @Simulation class)</td>
</tr>
<tr>
<td class="name"><code>minval</code></td>
<td class="type">
<span class="param-type">numeric</span>
</td>
<td class="description last">colour scale is capped off below this value</td>
</tr>
<tr>
<td class="name"><code>maxval</code></td>
<td class="type">
<span class="param-type">numeric</span>
</td>
<td class="description last">colour scale is capped off above this value</td>
</tr>
<tr>
<td class="name"><code>nticks</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">how many ticks</td>
</tr>
<tr>
<td class="name"><code>decimals</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">how many decimals for tick labels</td>
</tr>
<tr>
<td class="name"><code>num_colours</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">how many steps in the colour gradient</td>
</tr>
<tr>
<td class="name"><code>fill</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">type of gradient to use (viridis, inferno, red, green, blue)</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="cacatoo.js.html">cacatoo.js</a>, <a href="cacatoo.js.html#line3878">line 3878</a>
</li></ul></dd>
</dl>
<h4 class="name" id="createDisplay_discrete"><span class="type-signature"></span>createDisplay_discrete<span class="signature">(config, name, property, customlab, height, width, scale, minval, maxval, nticks, decimals, num_colours, fill)</span><span class="type-signature"></span></h4>
<div class="description">
Create a display for a gridmodel, showing a certain property on it.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>config</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last">Object with the keys name, property, label, width, height, scale, minval, maxval, nticks, decimals, num_colours, fill
These keys:value pairs are:</td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of the model to display</td>
</tr>
<tr>
<td class="name"><code>property</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of the property to display</td>
</tr>
<tr>
<td class="name"><code>customlab</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Overwrite the display name with something more descriptive</td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Number of rows to display (default = ALL)</td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Number of cols to display (default = ALL)</td>
</tr>
<tr>
<td class="name"><code>scale</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">Scale of display (default inherited from @Simulation class)</td>
</tr>
<tr>
<td class="name"><code>minval</code></td>
<td class="type">
<span class="param-type">numeric</span>
</td>
<td class="description last">colour scale is capped off below this value</td>
</tr>
<tr>
<td class="name"><code>maxval</code></td>
<td class="type">
<span class="param-type">numeric</span>
</td>
<td class="description last">colour scale is capped off above this value</td>
</tr>
<tr>
<td class="name"><code>nticks</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last">how many ticks</td>
</tr>
<tr>
<td class="name"><code>decimals</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>