cloud.lzx

<!--
Publish:
- http://weblog.infoworld.com/udell/2005/12/20.html#a1357
- wiki page

Corners:
- empty data
- bad login
- check large tags
- verify old selector against new

Features:
- number of posts
- tooltips
- hover tags
- show empty days
- show number of posts, tags

Tuning:
- fix dragging bottom thumb
- rank sizes
- update during animation
- drag the selector itself

Visuals:
- skip rhs of left thumb
- grippers on thumbs
- mouseover graph
-->
<canvas proxied="false" title="expialidocio.us">
  <!--include href="incubator/tooltip/tooltip.lzx"/-->
  <include href="thumb.lzx"/>
  <script src="analyzer.js"/>
  <!--script src="base64.js"/-->
  <script src="colors.js"/>
  <splash/>
  
  <dataset name="ds" src="http:data.xml" ondata="canvas.processTags()"/>
  
  <script>
    function requestPosts() {
      if (source == 'staging')
        url = 'http://localhost/proxy.php';
      else if (source == 'proxy') {
        url = 'http:proxy.php';
      } else if (source) {
        url = 'http:tests/' + source + '.xml';
      }
      Debug.write(url);
      ds.setSrc(url);
      //credits.setAttribute('state', 'retrieving');
      ds.doRequest();
    }
    //ds.setHeader('authorization', 'Basic ' + base64(account+':'+password));
    if (_root['source'] == undefined) source = 'posts';
    requestPosts(source);
  </script>
  
  <method name="processTags"><![CDATA[
    TagData = new DataFrame;
    if (!(ds.data.childNodes||[]).length)
      return credits.setAttribute('state', 'empty');
    credits.setAttribute('state', 'running');
    
    TagData.processTags(ds.data);
    UserName = ds.data.attributes['user'];
    
    SortedTags = [].concat(TagData.rowNames);
    SortedTags.sort();
    TagSortInverse = [];
    for (var i = 0; i < SortedTags.length; i++) {
      var tagname = SortedTags[i];
      var j = 0;
      while (TagData.rowNames[j] != tagname) j++;
      TagSortInverse.push(j);
    }
    
    bars.drawGraph();
    allStart.setText(TagData.columnNames[0]);
    allEnd.setText(TagData.columnNames[TagData.columnNames.length - 1]);
    var cn = Math.floor(TagData.columns.length/3);
    bars.selector.setRange(cn, TagData.columns.length-cn);
    myview.animate('opacity', 1.0, 1000);
    credits.animate('y', myview.y+myview.height+40, 0);
  ]]></method>
  
  <class name="dateLabel" extends="text" resize="true"
         fontsize="24" fgcolor="#60ff60"/>
  
<view id="myview" width="100%" layout="axis: y" opacity="0.1">
  <view id="cloud" width="${parent.width-20}" x="10" height="200" bgcolor="#f0f0ff">
    <attribute name="rangeMin" value="null"/>
    <attribute name="rangeMax" value="null"/>
    <method name="setRange" args="a,b"><![CDATA[
      if (arguments.length < 1) a = 0;
      if (arguments.length < 2) b = TagData.columns.length;
      if (a == rangeMin && b == rangeMax) return;
      currentStart.setText(TagData.columnNames[a]);
      currentEnd.setText(TagData.columnNames[b-1]);
      this.rangeMin = a;
      this.rangeMax = b;
      var tagCounts = TagData.columnRangeSum(a, b);
      
      var max = 0;
      var min = 100;
      for (var i = 0; i < tagCounts.length; i++) {
        var c = tagCounts[i];
        if (c > max) max = c;
        if (c < min) min = c;
      }
      
      str = '';
      for (var i = 0; i < tagCounts.length; i++) {
        var tagname = SortedTags[i];
        var count = tagCounts[TagSortInverse[i]];
        if (!count) continue;
        var s = (count - min) / (max - min);
        var c = Math.floor(255*(1-1.0*s));
        var fontsize = 10+12*s;
        var color = long2css(scaleColor(cloud.bgcolor, 0x0000FF, 0.25+0.75*s));
        var label = '<font size=\"' + fontsize + '" color="' + color + '">' + tagname + ' </font>'
	var url = 'http://del.icio.us/' + UserName + '/tags/' + tagname
        str += '<a href=\"' + url + '\" target="_blank">' + label + '</a>'
      }
      tags.setText(str);
    ]]></method>
    <text name="tags" multiline="true" width="100%" height="100%"/>
  </view>
  
  <drawview id="funnel" x="${cloud.x}" width="${cloud.width}" height="50">
    <dateLabel id="currentStart" align="left" valign="bottom"/>
    <dateLabel id="currentEnd" align="right" valign="bottom"/>
    <method name="update" event="onx" reference="bars.selector">
      var h = 50;
      var r = 20;
      var x0 = cloud.getAttributeRelative('x', this)-10;
      var x1 = bars.selector.getAttributeRelative('x', this)-10;
      var x2 = x1+bars.selector.getAttributeRelative('width', this);
      var x3 = x0+cloud.getAttributeRelative('width', this);
      clear();
      beginPath();
      moveTo(x0, 0);
      quadraticCurveTo(x0, r, x0+r, r)
      lineTo(x1-r, h-r);
      quadraticCurveTo(x1, h-r, x1, h);
      lineTo(x2, h);
      quadraticCurveTo(x2, h-r, x2+r, h-r);
      lineTo(x3-r, r);
      quadraticCurveTo(x3, r, x3, 0);
      this.fillStyle = cloud.bgcolor;
      var g = this.createLinearGradient(0, 0, 0, h);
      g.addColorStop(0, cloud.bgcolor);
      g.addColorStop(1, bars.bgcolor);
      this.fillStyle = g;
      fill();
    </method>
    <method event="onwidth" reference="bars.selector">
      update();
    </method>
  </drawview>
  
  <drawview id="bars"
            y="210" x="25%" width="50%" height="100"
            bgcolor="#d0d0ff">
    <method name="drawGraph"><![CDATA[
      var sums = DatePosts;//TagData.getColumnSums();
      var w = this.step = width/sums.length;
      var max = 0;
      for (var i = 0; i < sums.length; i++)
        if (sums[i] > max) max = sums[i];
      beginPath();
      this.moveTo(0,100);
      for (var i = 0; i < sums.length; i++) {
        var x = i*w;
        var y = height - sums[i]*height/max;
        lineTo(x,y);
        lineTo(x+w,y);
      }
      this.lineTo(width,100);
      this.fillStyle = this.strokeStyle = 0x4040ff;
      this.fill();
      selector.setRange(0, sums.length);
    ]]></method>
    
    <!--method event="onclick">
      selector.setXRange(getMouse('x'), null);
    </method-->
    
    <view name="selector" height="100%">
      <method name="setRange" args="d0, d1"><![CDATA[
        if (d0 < 0) return;
        if (d1 > TagData.columns.length) return;
        if (d0 >= d1) return;
        var w = bars.step;
        animate('x', d0*w, 200);
        animate('width', (d1-d0)*w, 200);
        cloud.setRange(d0, d1);
      ]]></method>
      <method name="setXRange" args="x0, x1">
        var w = bars.step;
        if (x0 == null) x0 = this.x;
        if (x1 == null) x1 = x0 + this.width;
        var d0 = Math.floor(x0/w);
        var d1 = Math.floor(x1/w);
        this.setRange(d0, d1);
      </method>
      
      <!-- masks -->
      <view x="${-parent.x}" width="${parent.x}" height="100%"
            bgcolor="white" opacity="0.60"/>
      <view x="${parent.width}"
            width="${parent.parent.width-parent.x-parent.width}"
            height="100%"
            bgcolor="white" opacity="0.60"/>
      
      <!-- left thumb -->
      <thumb x="-10" width="10" height="20"
             valign="middle" side="left"
             onmousedown="this.x1 = parent.x+parent.width;
                          drag.apply()"
             onmouseup="drag.remove()">
        <state name="drag">
          <attribute name="x" value="${parent.setXRange(parent.parent.getMouse('x'), this.x1)}"/>
        </state>
      </thumb>
      
      <!-- right thumb -->
      <thumb width="10" height="20" x="${parent.width}"
             valign="middle" side="right"
             onmousedown="drag.apply()" onmouseup="drag.remove()">
        <state name="drag">
          <attribute name="x" value="${parent.setXRange(null, parent.parent.getMouse('x'))}"/>
        </state>
      </thumb>
      
      <!-- bottom thumb -->
      <thumb id="bd" width="40" height="10" y="${parent.height}"
             align="center"
             onmousedown="this.sx = parent.x - parent.parent.getMouse('x');
                          drag.apply()"
             onmouseup="drag.remove()"
             side="bottom"
             opacity="${parent.width==parent.parent.width ? 0.25 : 0.8}"
             tooltip="Drag to select a different range of dates">
        <state name="drag">
          <attribute name="x"
		     value="${parent.setXRange(this.sx+parent.parent.getMouse('x'), null)}"/>
        </state>
      </thumb>
    </view>
  </drawview>
  
  <view x="${bars.x}" width="${bars.width}">
    <dateLabel id="allStart" fontsize="18" align="left"/>
    <dateLabel id="allEnd" fontsize="18" align="right"/>
  </view>
</view>

<view x="25%" width="50%" y="${credits.height}" fontsize="24">

<text visible="${credits.state=='initial'}" width="100%" align="center" valign="middle" multiline="true">This page will display an interactive summary of your <a href="http://del.icio.us" target="_blank"><u><font color="#0000ff">de.licio.us activity</font></u></a>.  In order to retrieve this information, your browser will ask you for your de.licio.us name and password.  This information is only stored in your browser.</text>

<text visible="${credits.state=='retrieving'}" width="100%" align="center" valign="middle" multiline="true">Retrieving data...</text>

<text visible="${credits.state=='empty'}" width="100%" align="center" valign="middle" multiline="true"><a href="http://del.icio.us"><u><font color="#0000ff">de.licio.us</font></u></a> doesn't show any posts tagged with your account.  This could be because you haven't tagged any pages, in which case you should tag some and then come back here.  Or it could be because the del.icio.us server is responding null.</text>
</view>

<view id="credits" layout="axis: y">
<attribute name="state" type="string" value="initial"/>
<text id="logo" fgcolor="#ff4040" fontsize="48">expialidocio.us</text>
<text visible="${credits.state=='running'}" multiline="true" width="${logo.width}" fgcolor="#444">The bar chart displays the number of posts you've tagged, for each day that you've tagged any posts at all.  The tag cloud contains tags for the selected range of dates.  Drag the red slider to move the date range; drag the side handles to extend it.  Click on a tag name to visit your de.licio.us page for that tag.</text>
<text fgcolor="#222"><i>Copyright 2005 by <a href="http://osteele.com"><u><font color="#0000ff">Oliver Steele</font></u></a>.  All rights reserved.</i></text>
</view>

<debug/>
</canvas>