Blog/Diary concept, notes on JEditorPane

For notes on projects and other stuff I'm working on a blog/diary application. As other blogs the app maintains entries, that can be marked with tags. In the following some concepts are described.

• 2 Renderers. Currently the blog has 2 renderers, which display the entries. Both are written in Java. The first ([1] in the picture) is completely self-written. Thus arbitrary concepts can be tested with this renderer, e.g. taglines (more about that below). The second renderer ([2] in the picture) uses html, which is displayed with the Java html component JEditorPane. This html frontend might be a starting point for a later online version of the blog.
• Sticky tags. For todo lists or important stuff to be rememberered always there are sticky entries ([3] in the picture). They are implemented using a 'Sticky' tag. The blog renderer draws all entries with a 'Sticky' tag highlighted and on top of other entries.
• Checkboxes. For todo-lists checkboxes in entries might be useful, that can be checked if a task is done ([4] in the picture). In this app checkboxes are implemented in the following way: The texts "[_]" and "[X]" within an entry make the blog-app render a unchecked/checked checkbox at this position within the text. If the checkbox is clicked the entry text is changed, "[_]" is replaced by "[X]", and a timestamp is added to the text. Clicking a checkbox thus is a special way of editing an entry. If the entry has a 'Todo' tag and if with a checkbox click all checkboxes of the entry are checked, the entry automatically looses the 'Todo' tag.
• Taglines. To visually distinguish entries of different topics (with different tags) there are taglines ([5] in the picture). This are lines between entries of specific tags with a special color for each tag. The tag-text is drawn besides the entry with the same color. The lines blend out if they are drawn behind entries that dont carry the tag of the line. An older version of taglines is described in this previous blogpost.

Some general notes on JEditorPane: This component is a part of the quite old Java Swing Api, hasnt changed in years and only supports Html 3.2. Nevertheless imho its a very useful lightweight html renderer (opposed to gecko/webkit bindings), useful for structured/formatted output or to render complex gui layouts. The standard approach to Gui layouts, LayoutManagers, is probably hard to implemented for this blog layout, with lots fonts, floating texts and tables.
JEditor renders html-checkboxes as Swing component JCheckbox. This checkboxes can be accessed via jEditorPane.getComponent(i). This will return a java.awt.Container whose first component is the checkbox:

JCheckbox jcb=(JCheckbox)((Container)jEditorPane.getComponent(i)).getComponent(0);

Now eg. listeners can be added to the Checkbox, that inform, if it is clicked. Following link helped to figure out checkbox access: http://www.thatsjava.com/java-swing/12595/

HistoryMaps: Migration period (Völkerwanderung) 150-500

On the left there is a first version of a HistoryMap. HistoryMaps are a concept to display historic developments, both in place and time. They combine traditional maps, which display places but no different times, and timelines, which show timepoints but no referring places. This first HistoryMap shows movement of tribes and battles during the migration period (Völkerwanderung) 150-500. Below the properties of HistoryMaps and its GUI are described in detail:

• Shapes and timeline: The content of HistoryMaps is made up of shapes (in this example there are bezier-curved shapes which represent tribes), which may be morphed between time-keyframes. The time is displayed in the upper timeline, a current time is highlighted. You can click or drag with the mouse the timeline to set the current time, the shapes will be morphed according to this time. Thus you can explore historic constellations at different times.
• Eventpoints: In addition to shapes there are eventpoints displayed, marking historic events (here battles). Eventpoints are drawn together with their corresponding times. If you move the mouse over a point additional information for that event is displayed. If you click an event point, the current time will be set to the corresponding time. Thus you see the global historic context of the event. This marks a virtue of the concept: In usual historic maps events are mostly drawn only with local context.
• Animation: At startup and when you click the animation-button an animation is running, where current time moves over the timeline. This gives an overview of the history shown.
• Timecolumns: When you click the timecolumn-button a static display is shown, where the shapes are drawn in columns of different times. Thus you see a picture of the historic content of all times at once. This gives insights on durations of historic developments, one can distinguish short processes that only appear in few columns from longlasting ones that are drawn in more columns.
• Completeness: HistoryMaps may display the complete history of all places and all times. For this the current programm must be extended with zoom facility. Thus you could zoom in and out places (like GoogleMaps) and you could also zoom within the timeline to set a time frame of interest.

Twitter client concept: Refer arcs

In my current twitter client, to follow conversations between users, I often have to scroll and search to find the corresponding tweets. To make this process more comfortable (especially the search part), I introduced refer arcs into a twitter client which visually connect tweets that probably refer to each other (replies, retweets).
On the right there is an animated gif, which demonstrates this technique. The updated twitter client ('Twaja') will be downloadable soon.

Thoughts on other stuff. Three recent (in my opinion) questionable developments in computation:

• Oracle sues Google over Java. Obviously the new owner has other priorities then the old one. Java might loose people working with it.
• Google and Verizon propose new policy to constrict net-neutrality. This might be a step toward the end of the open net.
• Google stops Google Wave. After just a year this innovative project is canceled. Thats quite few patience, reminds of canceled Google Lively.

End of rant. :)

Blog Concept with Taglines

Thinking about a new layout-concept for blogs with tags.
Problem: In a blog with multiple entries with multiple different tags its hard to view/distinguish entries that share same tags.
Solution:

• Colored lines, Taglines, each representing a tag, connect entries which have same tags.
• Taglines for different tags have different colors and different horizontal position.
• Entries are vertically ordered depending on creating time, newest entries above. Entries are horizontally shifted regarding their tags.

This concept improves the reading of blog-entries, wich belong together, while all entries remain visible. On the right side is an screenshot of an example-implementation.

Some concept-details:

• The sorting of the tags, i.e. and the horizontal position and color of their taglines, depends on creation time of entries. Thus taglines of newer entries appear on the left side. Since entry shifting also depends on the tags, newer entries will also appear on the left side. This results in a good read-flow. Alternatively tag-sorting might depend on other criteria like tag-importance, thus most entries with most important tags would appear on the left side.
• While taglines connect entries which share the corresponding tag, they may cross entries without that tag. Then they are displayed as if they lay under that entry, not connecting it.
• The screenshot also shows a minimap, which may improve overview, if there are a lot of entries. There could also be a legend showing the color of the tags, and corresponding entry-counts.