Wednesday, December 17, 2008

Scratchpad... the new frontier

So, I have been working with EXT JS for several months now. At first their API was rough, and it was hard to deviate from the examples they provided. After implementing our new interface in EXT, though, I have found that their API isn't nearly as bad as I initially thought (although I still think there is a lot they could improve on), and I have determined that you could do almost anything inside of EXT.

So, that brings us to scratchpad...

The initial goal of the project was to replace an existing notepad like feature from another tool. The concept was simple: allow users to keep notes in a single place within the application. It was typically used to copy and paste items of interest during their workflow, so that they could then assemble the pieces together at the end of their shift to publish a report, or to pass on to the person replacing them.

It totally made sense. While I was in Iraq, I would do the same thing. I worked at a desk with one other person, and we would always have a notepad window open where we would capture relevant information while the other person was out of the office.

And so ScratchPad was born. It initially started out as a simple textarea; one with a high z-index, so that it could be toggled over the rest of the display. We added a "Save" button, and wrote the data out to a php script on our server to persist the data in our MySQL database.

Once we introduced EXT, we quickly realized that we could expand on the capabilities of ScratchPad:
  • Enable multiple scratchpad files through a tabbed interface
  • Enable the ability to rename files
  • Open files
  • Share files
Then we stumbled upon EXT's html editor (API). This opened a whole new world for us. This enabled users to have more than just plain text. They could change the font (color, size, background color, etc), highlight text, build lists, and even edit the raw html code behind it. We then added a "file browswer" using an EXT Tree. We added auto-save functionality, a 'file' menu for opening, saving, renaming, and closing files.

Just recently, we have talked about some of the additional capabilities that we would like to add, including the ability to have different text editors (wiki format, syntax highlighting, etc). The way the input box currently works, it uses an iframe behind the scenese to store the raw HTML, and then displays that data for the user to get a quick and dirty WYSIWYG editor.

So, we have several tasks that we are working on, but the possibilities are almost endless. Eventually we would like to create a ScratchPad widget, that can be included with an extremely lightweight javascript file, and several options for back-end data storage, or even cookies or google-gears to persist the data.

Tuesday, September 9, 2008

SIMILE Timeline

A co-worker sent me a link to the SIMILE Timeline. They now have a google project page, but I found that the documentation at their old site has proven to be quite helpful.

The overall concept is great: Display temporal information in a sliding window.

Unfortunately, their documentation has a lot to be desired. So, I have decided that I will start working on documenting their API (to get more familiar with it), and will hopefully become knowledgeable enough to extend it.

Here are some of the functions that I pulled out of their code. The goal is to expand this list, and enhance each of these items by providing the parameters, the return values, and a brief description.

For a given band:
(i.e. timeline = Timeline.create(blah blah);
timeline.getBand(0).


dispose
addOnScrollListener
removeOnScrollListener
setSyncWithBand
getLocale
getTimeZone
getLabeller
getIndex
getEther
getEtherPainer
getEventSource
getEventPainter
layout
paint
softLayout
softPaint
setBandShiftAndWidth
getViewWidth
setViewLength
getViewLength
getTotalViewLength
getViewOffset
getMinDate
getMaxDate
getMinVisibleDate
getMaxVisibleDate
getCenterVisibleDate
setMinVisibleDate
setMaxVisibleDate
setCenterVisibleDate
dateToPixelOffset
pixelOffsetToDate
createLayerDiv
removeLayerDiv
closeBubble
openBubbleForPoint
scrollToCenter
_onMouseDown
_onMouseMove
_onMouseUp
_onMouseOut
_onDblClick
_onKeyDown
_onKeyUp
_autoScroll
_moveEther
_onChanging
_fireOnScroll
_setSyncWithBandDate
_onHighlightBandScroll
_onAddMany
_onClear
_positionHighlight
_recenterDiv
_paintEvents
_softPaintEvents
_paintDecorators
_softPaintDecorators

Timeline.EventIndex
getUnit
removeAll
getCount
getIterator
getAllIterator
getEarliestDate
getLatestDate
_index

Feel free to provide your thoughts,
Chris