Spiral demo

by lmeyerov

HTML

<script src="http://www.flapjax-lang.org/download/flapjax-2.1.js"></script>
<script src="http://ftl.eecs.berkeley.edu/src/render.js"></script>
<script src="http://ftl.eecs.berkeley.edu/src/runSelectors.js"></script>
<script src="http://ftl.eecs.berkeley.edu/src/DOMToRender.js"></script>
<script src="http://ftl.eecs.berkeley.edu/src/sizzle.js"></script>
<p><textarea id="input">schedule {
    /* optional */
  "P = [(_, td, _, _, _), (_, td, _, _, _), (_, bu, _, _, _)]"
}
type shapeType =  None | Rect | RoundedRect | Ellipse | Edge;

interface Root { 
  input radius : int;
  input centerRadius : int;
  input centerAlpha : int;
  var render : int;
  var subtreeWeight : int;
  
  input w : int;
  input h : int;
  input bgcolor : color;
}
interface Node { 
  input open : float;
  var show : float;


  var r : int;
  var parentTotR : int;
  var alpha : int;
  var sectorAng : int;
  var maxR : int;
  var level : int;
  var siblingNum : int;
  
  var x : int;
  var y : int;
  var parentX : float;
  var parentY : float;
   
  var render : int;
  var canvas : int;
  input bgcolor : color;
  

  var rootCenterX : int;
  var rootCenterY : int;
  
  var subtreeWeight : int;
  
}


class Top : Root { 
  children { 
    child : Node;
  }
  actions {
    child.alpha := 45;
    child.maxR := radius;
    child.parentTotR := 0;
    child.sectorAng := 360;

    child.siblingNum := 1;
    child.level := 1;
    
    child.show := 1.0;
    
    child.parentX := centerRadius * cos(PI() * centerAlpha / 180);
    child.parentY := centerRadius * sin(PI() * centerAlpha / 180);
    
    child.rootCenterX := centerRadius * cos(PI() * centerAlpha / 180);
    child.rootCenterY := centerRadius * sin(PI() * centerAlpha / 180);
    
    render := child.r + paintStart(radius * 2 * cos(PI() * 45 / 180), radius * 2 * cos(PI() * 45 / 180), 0) 
              + paintRect(0, 0, w, h, bgcolor, -1) + child.siblingNum;
    child.canvas := render;
    
    subtreeWeight := child.subtreeWeight;        
  } ...

CSS

textarea { width: 100%; height: 200px; }
    canvas { border: 1px dashed gray; width: 400px; height: 400px;  float: left }
    pre { float: left; margin-left: 1em }
    h2 { float: none; clear: both; }

JavaScript

/* init html extras */
(function () {
window.layout = function () {};
insertDomB(P(INPUT({type: "button", id: "compile", value: "synthesize script"}),
          SPAN({id: 'status'})), document.body, 'beginning');    
insertDomB(
    DIV(P(H2("Data"),
          CANVAS({id: "solution", width: 400, height: 400}),
          PRE({id:"dump"})),
        P(H2("Generated JavaScript"),
          PRE({id:"engine", style: {float: "none"}}))),
    document.body, 'end');

    var s = document.createElement('script');
    s.id = 'layoutEngine';
    document.body.appendChild(s);
    })();


console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\npage load");
logger = {
    log: function() {}
}; /* setup for sizzle */
state = undefined;

attrMap = {};
otherAttrs = [];

/* ajax */
var outE = receiverE();
$E('compile', 'click').snapshotE($B('input')).mapE(function(src) {

    var myRequest = new Request({
        url: 'http://ftl.eecs.berkeley.edu/response.php',
        method: 'post',
        data: {
            'src': src
        },
        onSuccess: function(text, xml) {
            console.log(text);
            console.log("received from server: " + text.length + " characters");
            if (text.substring(0, 6) == "error:") console.error("Synthesis error: " + text.substring(6));
            else outE.sendEvent(text);
        }
    }).send();
});

window.layoutE = receiverE();
outE.mapE(function(src) {
    var p = $('layoutEngine').parentNode;
    p.removeChild($('layoutEngine'));
    var s = document.createElement('script');
    s.text = src + "; window.layoutE.sendEvent(layout);";
    s.id = 'layoutEngine';
    insertDomB(s, p, 'beginning');
});

insertValueB(outE.startsWith("(synthesize first)"), 'engine', 'innerHTML');


var numRequestsB = $E('compile', 'click').collectE(0, function (_, acc) { return acc + 1; }).startsWith(0);
var numResponsesB = outE.collectE(0, function (_, acc) { return acc + 1; }).startsWith(0);
var isOffB = liftB(function (a,b) { return a != b; },...