Unofficial JDA (Javascript Dataflow Architecture) Wiki

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