Russian election 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/DOMToRender.js"></script>
<script src="http://ftl.eecs.berkeley.edu/src/runSelectors.js"></script>
<script src="http://ftl.eecs.berkeley.edu/src/sizzle.js"></script>
<script id="layoutEngine">
    
    /* hit "synthesize" to define */ function layout () {}

    /* rendering stubbed for now */  
    function paintStart () {console.log("paintStart", arguments); }
    function allocOutlineRect () {}
    function outlineRect () {}
    function lerpColor () {}
    function paintRect_cl () {}
    function allocSizeRect () {}
</script>
<style id="documentStyle">
    country, country * { refName: childs }
</style>

<p><input type="button" id="compile" value="synthesize"/><span id="status"/>
<p><textarea id="input">
schedule {
    
    "P=[(_,td,_,_,_), (_,bu,_,_,_), (_,td,_,_,_), (_,bu,_,_,_), (_,td,_,_,_)]"
}

interface Top{
    input width : float;
    input height : float;

    // Only show polling placee with turnout from (minTurnout, maxTurnout]
    input minTurnout : float;
    input maxTurnout : float;

    // Change color of fraudulent nodes to fraudColor
    input showFraud : float;

    // [0.0-1.0] When at 1.0, fraudulent nodes have color correspond to 
    // projected non-fradulent votes, instead of their actual value
    input showProjected : float;

    var renderSize : int;

    var votesUR : float;

    // If true, width as data resizes stays fixed (but height may vary); if false, width varies along with height.
    input fixWidth : int;

    // Tween value. When at 0, only shows Javascript simulation nodes; when at 1, all nodes shown as normal.
    input showJavascript : float;

    // Here in the top so we can easily read it in host code
    var totalMag : float;
}

interface Node{
    var canvas : int;
    var render : int;

    var totalMag : float;

    var...

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

/* Russian election demo */

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("received from server: " + text.length + " characters");
            if (text.substring(0, 6) == "error:") console.error("Synthesis error: " + text.substring(6));
            else outE.sendEvent(text);
        }
    }).send();
});



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; }, numRequestsB, numResponsesB);
insertValueB(isOffB, $("compile"),"disabled");
insertDomB(isOffB.liftB(function (v) { return !v ? "" : "Contacting server..."; }), $("status"));


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');

/* layout */
var docB =
layoutE.startsWith(function() {}).liftB(function(layout) {
    otherAttrs =
    $('input').value.match(/input [a-zA-Z0-9]+/g).map(function(v) {
        return v.substring(6);
    });
    otherAttrs.push('refName');
    runSelectors([$('documentStyle')], Sizzle("#document, #document *"));
    return coreDraw($('document'), $('solution'), true, true, false);
});
var rawO = {
   ...