Unofficial JDA (Javascript Dataflow Architecture) WikiPublic Space

Dispenses sticky notes every time a message arrives through the dispense input terminal. Each time a dispense happense, the total number of sticky notes dispensed is sent out through the dispense_complete output terminal. The size of individual sticky notes is non-configurable.

Demos that use it

• lazy_and_upfront_loading.html
• sticky_note.html

Input Terminals

• dispense: <type: array> or <type: dictionary>

<u>Output Terminals</u>

• dispense_complete: <type: number>

Properties

• num_rows: <type: number>
• num_cols: <type: number>

BLUEPRINT(
"~0156A080D85216430698DA1120F115F871", 
[
 ["dispense_request_in", "onDispense", 10]
],


[
 "dispense_count_out"
],

function () {
  var Blueprint = function(id, props, bp_uuid)
  {

this.__init__(id, bp_uuid);

this._d = this.dom_node.ownerDocument || __d;

this._COLORS = ["beige", "lightblue", "lime", "cyan",
       "lightsteelblue", "orange", "pink", "mistyrose",
       "yellow", "white"];
this._PADDING = 15;
this._WIDTH = 240;
this._HEIGHT = 215;
this._GAP = 10;
this._OFFSET = 5;
this._ROW_PER_LAYER = props["num_rows"] || 2;
this._COL_PER_LAYER = props["num_cols"] || 2;
this._POST_PER_LAYER = this._ROW_PER_LAYER * this._COL_PER_LAYER;
this._post_count = 0;
this._container = this._d.createElement("DIV");
this._use_img = props["uses_image_bg"] || false;
this._img_path = props["image_path"] || "/images/"
this._container.className = "Container";

this.dom_node.appendChild(this._container);


  };

  Blueprint.prototype = new Infotron;

Blueprint.prototype.onDispense = function(msg) {
var i, n, note;

if (typeof(msg) == "object" && msg.constructor == Array) {
    n = msg.length;

    for (i = 0; i < n; i ++) {
    this.onDispense(msg[i]);
    }

    return;
}

try {
    if (typeof(msg) != "object") {
        note = this._createNote("", msg);
    } else {
        note = this._createNote(msg["name"], 
               msg["text_content"]);
    }
} catch (ex) {
  this.error(ex, "Error creating sticky note");

  return;
  /*******************************************************************/
}

var ly = Math.floor(this._post_count / this._POST_PER_LAYER) + 1;
var x = this._post_count % this._POST_PER_LAYER;
var col = Math.floor(x / this._ROW_PER_LAYER);
var row = Math.floor(x % this._ROW_PER_LAYER);

//self.debug("#" + this._post_count + " @ " + ly + ", " + row + "," + col);
note.style.left = ((ly * this._OFFSET) + (col * (this._WIDTH + this._GAP))) + "px";
note.style.top = ((ly * this._OFFSET) + (row * (this._HEIGHT + this._GAP))) + "px";

this._container.appendChild(note);
this._post_count ++;

this.postMessage("dispense_count_out", this._post_count);
};

Blueprint.prototype._createNote = function(title, content)
{
var d = this._d.createElement("DIV");
var t = this._d.createElement("DIV");
var i = Math.floor((Math.random() * 10) % this._COLORS.length);

var w = this._WIDTH - (this._PADDING * 2);
var h = this._HEIGHT - (this._PADDING * 2);

d.style.position = "absolute";

if (this._use_img) {
    d.style.backgroundImage = "url('" + this._img_path + 
      this._COLORS[i] +".png')";
} else {
    d.style.backgroundColor = this._COLORS[i];
}

//self.debug("url('_images/" + this._COLORS[i] + "')");
d.style.backgroundRepeat = "no-repeat";
d.style.width = w + "px";
d.style.height = h + "px";
d.style.overflow = "hidden";
d.style.bottom = "0px";
//d.style.border = "1px inset #000000";
d.style.padding = this._PADDING + "px";
d.style.fontWeight = "bold";

t.style.overflow = "auto";
t.width = (w - 50) + "px";
t.height = (h - 50) + "px";
//t.style.border = "1px solid black";
t.innerHTML = content;
t.style.fontWeight = "normal";

d.innerHTML = title || "";
d.appendChild(t);

return d;
}

return Blueprint;


}, "Sticky Note Dispenser");