MindRetrieve Blog

MindRetrieve - an open source desktop search tool for your personal web

Wednesday, November 23, 2005

How do I find out this web page?

One of the puzzle I try to solve with this project is to find the trail that leads me to certain web page. Often time when I am researching on the web I find some interesting page but do not remember how I get there. Maybe it is a fruitful search result with certain search terms and I want to explore more. Or it maybe it is point out by some knowledgeable blogger and I want to know the him better and what more he has to offer.

One idea is to have a "always present back button". MindRetrieve keep enough information that you can find the source page of any page most of time. I probably have to experiment with various UI before I know how effective it can be.

I am not alone in having this problem. Marc Hedlund calls for a tool to find the tab history in his blog. This New York times article look at a similar issue in a larger context. Modern people are heavily multitasked. But once we are interrupted it often takes a lot of work to reestablish the context when we return to the original task.

posted by Tung Wai Yip @ 7:42 AM   0 comments

Tuesday, November 15, 2005

HTML 3-state checkbox

I have been experimenting with a 3-state checkbox GUI. When we edit the tags of multiple items, there would be some tags that is only used in some items. Just and on and off setting is not enough. We also need a "grey" state to mean leave the tag untouched rather than turning everything on or off.

Since HTML form does not support 3-state checkbox, I have experimented with various simulations using Javascript and CSS. While the widget work resaonble well, I find the "grey" state rather unintuitive. It is obvious what on or off will do. You have to stop to think what grey's action would be.

So I have decided against using 3-state checkbox after all and stick to simple widgets. I think the user in this case would have a strong intent to make properties common among all items. If they leave the checkbox untouched, the tag setting will be unchanged. Otherwise it will be on or off for all.







I have posted one version of the working HTML code here in case if there is any interest. It is tested in Firefox and Opera. Need some simple change to make it work in IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<html>
<head>
<style>
  #tagControl {
    line-height:200%;
  }

  #tagControl span {
      padding-left: 0.3em;
      padding-right: 0.5em;
      padding-top: 0.3ex;
      padding-bottom: 0.3ex;
      border: thin outset #777;
      font-weight: bold;
      color: #000;
  }

  #tagControl .tagSelect {
  }

  #tagControl .tagUnchange {
      color: #777;
  }

  #tagControl .tagDelete {
      color: #777;
      text-decoration: line-through;
  }

  #tagControl .tagSelectPressed {
      color: #fff;
      background-color: #777;
      border: thin inset #707;
  }

  #tagControl .tagUnchangePressed {
      color: #fff;
      background-color: #777;
      border: thin inset #707;
  }

  #tagControl .tagDeletePressed {
      color: #fff;
      background-color: #777;
      border: thin inset #707;
  }
</style>

<script>

function toggleTagSelect(e) {
    p = this.parentNode
    var cb = this;
    if (p.className == 'tagSelect') {
        p.className = 'tagDelete';
        cb.checked = false;
    }
    else if (p.className == 'tagDelete') {
        p.className = 'tagUnchange';
        cb.checked = true;
    }
    else if (p.className == 'tagUnchange') {
        p.className = 'tagSelect';
        cb.checked = true;
    }
}

function onload(e) {
    // attach event handlers
    var tc = document.getElementById('tagControl');
    var elems = tc.getElementsByTagName('input');
    for (var i=0; i < elems.length; i++) {
        var elem = elems[i];
        elem.addEventListener('click', toggleTagSelect, false);
    }
}

window.addEventListener('load', onload, false);
</script>
</head>

<body>
<table>
<tr>
    <td>Tags</td>
    <td>
    <div id='tagControl'>
    <span  class='tagSelect' node='rep:tag'>
        <input type='checkbox' />
        <a node='rep:tag'>
        Gas
        </a>
    </span>
     
    <span  class='tagUnchange' node='rep:tag'>
        <input type='checkbox' />
        <a node='rep:tag'>
        Food
        </a>
    </span>
     
    <span  class='tagDelete' node='rep:tag'>
        <input type='checkbox' />
        <a node='rep:tag'>
        Lodging
        </a>
    </span>
     
    </div>
    </td>
</tr>
</table>

</body>
</html>

posted by Tung Wai Yip @ 8:06 AM   0 comments

Friday, November 04, 2005

Progress on categorization

I have make a lot of progress designing the categorization for the tags. Once things are ready I plan to put an online version for people to get a feel.

This time I want to show the visualization of the category tree. The most common way to show it is the explorer style tree view. With tree view you can represent categories any level deep. User can navigate by expanding and collapsing the branches. I find the expanding and collapsing fairly cumbersome. So I put a twist to that idea by expanding all categories by default. I use different font size and color to represent different level of categories. It works quite well that all items are presented on a single webpage and you can do an incremental search (with Opera or Firefox) without going to the web server again.

Right now it can show reasonable well up to three levels. While I don't have categorization any deeper I would like to find solutions for deeper categorizations. Either a specific way to represent fourth or fifth level items or a scheme that can work at arbitrary level deep.

posted by Tung Wai Yip @ 1:20 PM   0 comments