Cacatoo - Serial transfer protocol

by bramvandijk88

HTML

<!-- 
  ###########################################################################################
    This is a JSFiddle example of "Cacatoo". This HTML page does not contain the code itself,
    but determines where the grids, graphs, buttons, etc are placed. The real code is in the 
    Javascript Tab. I recommend enabling "Tabs (Columns)" under the settings in the top-right. 
  ###########################################################################################
-->

<html>
  <script src="https://bramvandijk88.github.io/cacatoo/scripts/cacatoo.js"></script>
	  <script src="https://bramvandijk88.github.io/cacatoo/scripts/all.js"></script>  <!-- Dependencies
    <link rel="stylesheet" href="style.css">        <!-- Set style sheet -->

  <head>
    <title>Cacatoo examples</title>
  </head>


  <script>
    /*-------------------------End user-defined code ---------------------*/

  </script>

  <body onload="cacatoo()">
    <div class="header" id="header">
      <h2>Cacatoo (example project)</h2>
    </div>

    <div class="content" id="canvas_holder"> </div>
    <div class="content" id="graph_holder"> </div>
    <div class="content" id="form_holder"></div>
    <div class="footer" id="footer"></div>

  </body>

</html>

CSS

body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-color: #cccccc;
  margin: 10px;
  font-size: 13px;
}

/* Style the header */
.header {
  background-color: rgb(111, 146, 170);
  display: block;
  border: 0px solid #FFFFFF;
  box-shadow: 3px 1px 0px #24242444;
  border-radius: 15px 15px 0px 0px;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
}


.logos {
  z-index: -1;
  vertical-align: middle;
  display: inline-block;
  padding-left: 10px;
  padding-top: 10px;
}

.example_card {
  width: 220px;
  height: 220px;
  background-color: rgb(151, 183, 204);
  box-shadow: rgba(100, 100, 111, 0.1) 20px 7px 29px 0px;
  /* font-weight: bold; */
  color: rgb(229, 239, 245);
  font-size: 12px;
  line-height: 25px;
  margin: 25px;
  padding: 20px;
  padding-bottom: 40px;
  padding-top: 10px;
  border-radius: 0px 0px 0px 0px;
  display: inline-block;
  transition: all 100ms ease-out 200ms;
  transition-delay: 0s;
}

.example_card_img {
  width: 100%;
  height: 100%;
  border-radius: 0px 0px 0px 0px;
  background-position: 45% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.example_card:hover {
  background-color: rgb(151, 183, 204);
  font-size: 12px;
  color: black;
  border-radius: 30px 0px 30px 0px;
  box-shadow: rgba(100, 100, 111, 0.3) 0px 0px 29px 0px;
}

.example_card:active {
  background-color: rgb(151, 183, 204);
  font-size: 12px;
  padding-top: 11px;
  height: 199px;
  color: black;
  box-shadow: rgba(100, 100, 111, 0.3) 0px 0px 29px 0px;
}


/* Content (grid, graphs, sliders) */
.content {
  text-align: center;
  box-shadow: 3px 1px 0px #24242444;
  /*border-bottom: 1px dashed #88888844;*/
  background-color: #e2e2e2;
  padding: 10px;
}

/* Output div */
.output {
  border-radius: 8px 8px 8px 8px;
  margin: 30px;
  height: 300px;
  overflow-y: scroll;
  font-size: 11px;
  text-align: left;
 ...

JavaScript

/*-----------------------Start user-defined code ---------------------*/

    let sim;

    function cacatoo() {

        let config = {
            title: "Serial transfer protocol",
            description: "",
            maxtime: 100000,
            fastmode: true,             // If possible, fast-mode will update the sim with more than 60 FPS. 
            // Note: fastmode is only useful/recommended if the sim can readily run 
            // at 60FPS without fast-mode, and may actually reduce the reported FPS
            // Nevertheless, the final state of the grid is reaches sooner in real time. 
            ncol: 100,
            nrow: 60,		            // dimensions of the grid to build
            wrap: [true, true],       // Wrap boundary [COLS, ROWS]   
            scale: 3,				    // scale of the grid (nxn pixels per grid cell)
            statecolours: { 'alive': { 1: 'blue' } },   // The background state '0' is never drawn
            skipbg_state: true,                      // Don't draw 0-state on grid (faster)
            graph_interval: 1,
            graph_update: 5,
            show_gridname: true,

        }

        sim = new Simulation(config)

        let influx = 0.0                // Continuous influx of resource into external environment
        let uptake = 0.6                // Rate with which resources are taken up by cells
        let upkeep = 0.02               // Upkeep used to keep the cell alive
        let refresh_medium_every = 1440  // Interval for refreshing the medium ("minutes", 24h)
        let refresh_medium_conc = 0.1   // Conc for refreshing the medium

        sim.makeGridmodel("batchculture");
       
        sim.createDisplay_continuous({model:"batchculture", property:"internal_resources", label:"Internal resources", minval:0, maxval:100, num_colours:40, fill: 'viridis'}) 
        sim.createDisplay_continuous({model:"batchculture", property:"external_resources", label:"External resources", minval:0, maxval:100,...