Nettango NPM | npm.io

0.16.4 • Published 2 years ago

Install

Weekly downloads

8

License

GPL-3.0

Repository

Last release

2 years ago

Building, Testing, and Publishing

If you have yarn installed you should be able to do:

yarn install
yarn build

And you'll get everything packaged up to the dist/ folder. nettango.js is the entry point.

To test run yarn test. To publish run yarn publish; you must have appropriate credentials configured for npm.

Getting Started with NetTango Modeling

NetTango is published as a package on the npm package directory. You can include it as a regular JavaScript dependency if your project uses a package.json file with the npm or yarn tools:

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "nettango": "0.11.1"
  }
}

To create a NetTango workspace, you will need to include the nettango.js file in your project, as well as the nettango.css file for styling.

A basic HTML example might them look like this:

<!DOCTYPE html>
<html>
<head>
  <title>NetTango Example</title>
  <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
  <link href="nettango.css" rel="stylesheet">
  <script src="nettango.js"></script>
</head>
<body>
  <div id="nt-containerish">
    <canvas id="nt-workspace" width="800" height="600" style="background: #fef9f6;"></canvas>
  </div>

<script>

document.body.onload = function() {

  // STEP 1: Define the blocks in the workspace
  var workspaceDefinition = {
    "blocks" : [
      {
        "action" : "test block"
      }
    ]
  };


  // STEP 2: Initialize the workspace (with the canvasId and the list of blocks)
  NetTango.restore("nt-workspace", workspaceDefinition);

  // STEP 3: Add a callback to catch program changed events
  NetTango.addProgramChangedCallback("nt-workspace", function(canvasId) {
    var code = NetTango.exportCode(canvasId, "NetLogo");
    console.log(code);

    // send code to NetLogo Web here!
  });
}
</script>
</body>
</html>

Load this file into a web browser (Chrome, Firefox, or Safari). If everything works, you should see a workspace with just one block available in the menu.

The next step is to try a more full-fledged block definition object. Try replacing workspaceDefinition with this object:

  var workspaceDefinition = {
    "blocks" : [
      {
        "action" : "\uD83D\uDC3A   wolf actions ",
        "type" : "nlogo:procedure",
        "start" : true,
        "limit" : 1,
        "format" : "to wolf-actions",
        "blockColor" : "#b55",
        "required" : true
      },

      {
        "action" : "\uD83D\uDC3A   forward",
        "format" : "forward {0}",
        "params" : [
          {
            "type" : "range",
            "min" : 0,
            "max" : 3,
            "step" : 0.1,
            "default" : 1,
            "name" : "steps"
          }
        ]
      },

      {
        "action" : "\uD83D\uDC3A   left",
        "format" : "left random {0}",
        "params" : [
          {
            "type" : "range",
            "min" : 0,
            "max" : 90,
            "step" : 1,
            "default" : 50,
            "random" : true,
            "name" : "amount",
            "unit" : "\u00B0"
          }
        ]
      },

      {
        "action" : "\uD83D\uDC3A   right",
        "format" : "right random {0}",
        "params" : [
          {
            "type" : "range",
            "min" : 0,
            "max" : 90,
            "step" : 1,
            "default" : 50,
            "random" : true,
            "name" : "amount",
            "unit" : "\u00B0"
          }
        ]
      },

      {
        "action" : "\uD83D\uDC3A   change energy",
        "format" : "set energy energy + {0}",
        "params" : [ { "type" : "range", "min" : -20, "max" : 20, "step" : 0.5, "default" : 1, "name" : "amount" }]
      },

      {
        "action" : "\uD83D\uDC3A   hatch",
        "format" : "hatch 1",
        "blockColor" : "#916da0",
        "params" : [
          { "type" : "int", "min" : 1, "name" : "child count", "default" : 1 }
        ]
      },

      {
        "action" : "die",
        "blockColor" : "#916da0",
      },

      {
        "action" : "\uD83D\uDC3A   if energy <= 0?",
        "format" : "if energy <= 0",
        "blockColor" : "#89a",
        "clauses" : [ ]
      },

      {
        "action" : "\uD83D\uDC11   if sheep-here?",
        "format" : "if any? sheep-here",
        "blockColor" : "#89a",
        "clauses" : [ ]
      },

      {
        "action" : "\uD83D\uDC11   ask sheep-here",
        "blockColor" : "#89a",
        "format" : "ask sheep-here",
        "clauses" : [ ]
      },

      {
        "action" : "chance",
        "blockColor" : "#89a",
        "format" : "if random 100 < {0}",
        "clauses" : [ ],
        "params" : [
          {
            "type" : "range",
            "min" : 0,
            "max" : 100,
            "step" : 0.5,
            "default" : 20,
            "unit" : "%",
            "name" : "percent"
          }
        ]
      }
    ]
  };

@everything-registry/sub-chunk-2260

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.14.10-hotfix1

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago