|
|
|
tiling a plane with absolute DIVs
Friday, December 21 2007
Early autumn was warmer than normal, but November and December have been colder, windier, and cloudier than usual, meaning more snow, more wood burning, and less solar collection (both passive and active) than normal. With all the snow on the ground it's also been hard to scrounge additional firewood as the season has advanced. Today, though, I set out with the gas-powered chainsaw into the nearby woods to cut up some downed trees (one of which was a large oak). But cutting was the easy part. I couldn't imagine an easy way to transport it back across the snow, which is now in that difficult-to-traverse thin-crust phase.
I spent much of the day building a web-based system for displaying and interactively manipulating a map of a MySQL database, one similar in appearance to the database design view of Microsoft's Visual Studio (the way it looked when the term "Visual InterDev" meant something). Each table would be represented by a header with the table name, and then a list of column names in a stack beneath the header.
Most of the work today involved perfecting the algorithm that would fill a screen with these table representations. Since they all were of different heights and widths, it was hard to tile a plane with them without leaving vast empty spaces. So my algorithm actually kept an account of these blank spaces as it went along, attempting later in the process to fill them in with tables having fewer columns. It was similar, I imagine, to the algorithm a disk file system uses to reuse patches of empty sectors on a hard drive. In the end my algorithm seemed to work effectively, tiling a wide expanse of screen with 150+ different tables from my test database and only leaving token gaps here and there.
I've mentioned in the past that when it comes to HTML I'm old school, and this marked my first major break from the use of HTML tables as an HTML layout device. Laying out this odd jumble of shapes in HTML tables would have been essentially impossible, so instead I used absolutely-positioned DIVs.
A direct consequence of the use of DIVs as a layout device was that I could then easily implement a system allowing a user to interactively move the tables around the web page like windows on a desktop. All I needed to do was implement an existing free js script called dom-drag.js. But I still had much work to do, including the display of relations between tables, the saving of designs (the results of user interactions) and many other things I haven't even visualized yet.
For linking purposes this article's URL is:
http://asecular.com/blog.php?071221 feedback
previous | next |
