Client Code Update

I've just pushed a set of updates to the client files - the HTML, JavaScript, and CSS that makes up the pages. This affects the main page, the iframe page, and the touch page. These now all share common logic which will make updates easier. The visible changes are:

• Intermediate levels are used when zooming in with the mouse wheel. This may mean that the "Scale" field in the control panel will go blank, but if you're using the wheel you probably aren't using the drop-down.
• When zooming, the previous image tiles are used until the new tiles load. Combined with the previous, this means zooming is much smoother. 
• The credits display at the bottom of the page (which shows credits, sector data, world data, and one-click generators for LBBs and Posters) now [EDIT: Based on feedback in the comments]  tracks your mouse hover coordinates updates on click/doubleclick/drag rather than just what's centered on the page.
• When you zoom by double-clicking or using the wheel the mouse position is retained, so you can "zoom in" on something that isn't centered.
• Added Facebook and Twitter buttons next to the Google Plus buttons.
• The "you are here" and overlay URL parameters from the iframe API can be used on the main map page. 
• Tweaked the [-] and [+] buttons in the control panel to be the same size. Yay for −

Note: I only tested as far back as IE8. According to analytics, I have a small number of IE7 users. If they report problems I may be able to fix it, but only if they complain. My testing on browsers other than IE,  Chrome and Safari (iOS) has been limited, but Firefox and Opera are usually pretty well behaved.

As always, let me know what I broke and I'll try and fix it quickly.

EDIT: Remember to mention which browser+version and which operating system+version you're using, too.

...

In other news - no progress on the outages. I've found and fixed a couple of bugs with cached state handling but I still see the service going down when usage is high. I have monitoring set up now so that as I make changes I can have a higher confidence that they haven't made things worse.

Ω

PNG and DOM

Two hopefully invisible changes today, but scream if anything breaks:

• I've changed the map to generating PNGs by default instead of GIFs. This is to work around a bug in embedded WebKit (seen in the Second Life Viewer 2.0 Beta) where it may not display GIFs correctly.
• I've rewritten the event handling code for the map to more correctly manage DOM events, in both the W3C and IE models. This is to try and make dragging work correctly in the IE9 Platform Preview (I'll test tomorrow), clean up the code (this was my first interactive web site!), and as a side effect it fixes mouse wheel support in Chrome.

I've tested in IE8, Safari (Win), Firefox 3.6 (Win), Chrome 4 (Win), and Opera 10 (Win). Looks good, but I'm nervous and ready to roll back if anyone sees any issues.

Ω

LBB Generator

I played a bit more with the sector.htm page - adding a title page, tweaks to the layout, and so forth. The page code is also slightly more interesting to peruse - to make it easier to modify I wrote a JavaScript Template mechanism that defines the transform using XSLT-like constructs (if, foreach) embedded in the HTML as attributes (jt_if, jt_foreach) itself, and JSONT-like expression embedding sequences ({$.index}, {$.title}), and operates over a JavaScript data construct. The expression language is JavaScript itself and "$" is set to the current object as the parse descends. Check the page source for details.

It ended up working pretty well, once I sorted out some cross-browser issues (IE doesn't have a convenient mechanism for enumerating explicitly specified attributes, alas). Tested in Firefox 2, IE7, Opera 9 and Safari 3 on Windows XP. Ω

Mobile fixes

Mobile-related changes:

• Fixed searching in Mobile page - I'd accidentally broken it when doing some code cleanup
• Made Enter key in search box work on the Mobile page from within Firefox
  
• Added Mobile link to main page
• Added tooltips to Mobile page
• Slightly changed how you scroll (was a factor of 0.5 of the width/height, now it's 0.4)

Also, fixed a data error causing Hicongengiso to not appear, and fixed the IFRAME API docs Ω

Browser Compatibility Changes

Testing in Apple's new Safari 3 Beta for Windows*, I found some issues with the map. They turned out to be caused by some layout hacks I had in the page code to handle the dynamic layout of the page.

The page is composed of resizing (map) and docked (controls, footer) boxes containing other resizing elements (label controls, search results). Ideally, each element should be sized by the content - i.e. the area taken up by the footer is defined by the size of the elements in the footer, and so on. The page did that using old-school HTML <table> elements, but had some issues I'm still not sure of. (Short version: a relatively sized div set to overflow: scroll, inside a relatively sized table cell makes the cell expand if the content overflows, even if the cell and div size correctly with non-overflowing content.) To overcome the issues I had to have some script that would fix the sizes of some elements when the page size changed. These hacks - often browser specific - worked in IE6, IE7, Firefox 1.5 and Firefox 2.0, Opera 9, and Safari 2. But they caused Safari 3 to stop performing layout correctly - everything looked great, but you couldn't drag the map!

So... not wanting to layer on further hacks I redid the page entirely using modern CSS, and the end results were beautiful. Worked like a charm with IE7, Firefox 1.5 and 2.0, Opera 9 and Safari 2 and 3. Unfortunately, they didn't work in IE6. After much teeth gnashing I found a workaround. (Short version: even in standards compliance mode IE6 can't correctly size elements having top and bottom or left and right defined; however, you can use CSS expressions to compute the width or height.)

(Aside: when CSS was young and fresh, Microsoft took the interpretation of "width includes margins, borders and padding" whereas everyone else took the interpretation of "width excludes margins, borders and padding", and it was the latter which eventually became codified in the CSS standards. You can tell that Microsoft was in the "web developer" mindset rather than the "web designer" mindset. When you are designing for the look of content, you want to frame items (text, images, etc) so the exclusive width makes sense. However, when you are developing a UI, you often compose and nest relatively sized boxes. The CSS notion of "width: 100%" when nesting items is absolutely useless when combined with exclusive margins, padding or border, since the element will end up offset and overlapping its parent's right edge!)

Anyway, the map it all appears to work now... but it's probably broken in some obscure browser. If the map suddenly broke for you (boxes everywhere! oh the huge manatee!) I have the retro version available here: http://www.travellermap.com/index_classic.htm - I'll try to keep it working, but I might break it by accident with future changes to underlying shared components such as styles or code. And please let me know what platform and browser you're using - I might be able to bludgeon the page into shape.

* Safari for Windows is a subtle but effective ploy by Apple to encourage Windows-using web developers who haven't shelled out for a Macintosh to do more testing on their platform. Worked for me!

[Update: January 2008]
Given that the old version works in browsers as old as IE5 and no-one has screamed and complained, the "classic" version of the page is no longer available.
Ω

Far Frontiers! Borders! And more!

I've been working on a bunch of different pieces, some of which are "close enough" to roll out, others need additional work. But I need to get things out for users to try out and comment on, so here's an intermediate step.

Far Frontiers Sector

Before FASA lost its license to publish Traveller material, Dale Kemper was working on a manuscript for a supplement for the Far Frontiers, the setting for most of the FASA adventures like the Sky Raiders trilogy, Ordeal by Eshaar, etc. Didn't know that's where they took place? That's 'cause the supplement never came out! Parts were published in Ares magazine and somewhat more in the Traveller Chronicle, but those are hard to come by.

Dale has recently started selling copies of the manuscript on eBay (seller id: sbgames999) and I picked one up. Nice stuff, and it’s a shame it never saw the light of day. I asked Dale if I could include his Far Frontiers work in the map site, and he agreed!

(Note: Dale's manuscript covers just the lower half of the sector - the top half is mostly Zhodani space. For now I’ve just left the top half of the sector empty. Also note that the data is slightly inconsistent with other publications – Traveller Chronicle, Trail of the Sky Raiders, etc. – I’ve left it as close to Dale’s original manuscript as possible, rather than incorporating other sources or corrections. Those may come later.)

Borders

At long last (and thanks to pioneering work by J Greely over at http://dotclue.org/t20) accurate micro-scale borders are starting to see the light of day! Zoom in to 16 pixels/parsec or lower and the hand-drawn borders will disappear and (if you’re in the right place, e.g. near the Domain of Deneb or Gateway Domain) you’ll see hex-level borders. Yay!

Now for the down sides:

• The border generation is not complete. Although J Greely’s allygen is an amazing tool, it does only a single sector. Rather than modifying it to handle multiple sectors I’ve been adding outsector hex runs by hand. (And if that sentence made sense to you, please volunteer to help!) So it’s been slow – about 20 minutes per sector.
• Most of my resources are in storage – all of the DGP Travellers’ Digest issues I paid far too much for on eBay and classic sources are unavailable to me right now, so I have to go on guesswork and automated border generation.

But worst of all: the map is now a hideous amalgam of different eras:

• Some of the data files are Rebellion-era (1120 or so)
• Some of the data files are Classic-era (1100)
• Some of the data files are Gateway-era (M1000)
• Routes are whatever I could find, so mostly a mix of CT and RT
• Borders are based off of the data for the sector at hand

Data files from different eras aren’t immediately obvious – you have to drill in and notice that the Vargr really made a dent in Deneb but hardly touched Corridor! Even Routes are usually not obvious, unless there’s a gap. But mismatching borders stick out like sore thumbs. Bleah.

Poster

Someone on COTI mentioned that he stitched together the tiles for the whole Spinward Marches by doing screenshots of the site. Ouch! To prevent that necessity in the future, you can now ask for a render of a sector in one shot. Just do:

http://www.travellermap.com/Poster.aspx?sector=Spinward%20Marches

You’ll get a GIF of the whole thing at 64 pixels/parsec resolution. Change the sector name (replace spaces with %20 or +) or tack on &options=nnnn – use a permalink in the main map to figure out the combination you like. I like 833, which turns off the subsector names.

Other changes

• Added xboat routes for the Corridor sector from the map in FFE04 The Short Adventures - the Memory Alpha adventure reconstruction includes the routes on a hex grid of the sector (circa 1111), in addition to the Atlas of the Imperium sector copy - w00t! The Imperial xboat network now actually connects the Spinward Marches to the core!
• Since I was dorking around with Corridor, I used the data from FFE04 to "regress" the sector to the classic era. This makes the borders mismatch (especially with Deneb) but my goal for the map is Classic Era (or Second Survey) so I actually want the DoD connected!
• In Firefox/Safari/Opera, when dragging the map, you can now drag with the mouse over the non-map parts of the page and the mouse won't freeze. Just stay inside the page itself - there appears to a bug (feature?) afflicting all W3C event model browsers such that they stop giving you mouse events outside the page, if you started the drag over an image.
• I moved the Map Style options to the top, and slightly compressed the control options, to give more room for search results.
  

Ω

Fixed cache-control headers for images

If you use IE you may have noticed that when zooming in then back out the map image tiles would re-load from the server (that is, it'd be slow). Firefox (or another Mozilla-derived browser) were zippy. I was generating the HTTP headers incorrectly which caused IE (compliant) to re-request the images each time.

FYI, the fix was in the ASP.NET code for Tile.aspx:

Response.Cache.SetCacheability( HttpCacheability.Public ); // was doing this
Response.Cache.SetExpires( DateTime.Now.AddDays( 1 ) ); // was doing this
Response.Cache.SetValidUntilExpires( true ); // wasn't doing this

I was also misinterpreting the meaning of Response.Cache.VaryByParams (which populates the HTTP "Vary:" header). I was interpreting the semantics as "re-request if these params are different" rather than correct semantics: "re-request even if these params are the same". So I removed calls to that, and everything appears happier now.

So what does that mean? In IE, try zooming all the way in to 64 pixels/parsec then out to 1/32 pixels/parsec, using the mouse wheel. Then, once all the tiles are cached, you can repeat the zoom in/zoom out without waiting for the images to re-load. Makes a great demo! Ω

Fixed Search Display in Opera

I think I've fixed the search display in Opera. IE handles dynamic heights just fine, but Mozilla and Opera need special work. Mozilla needs to have the height calculated by script. That works in Opera too, but some layout calculations are done asynchronously so it needed a little more working around.

Also, Opera doesn't like xml elements for data islands, so the default search wasn't working.

Ω

Mouse Wheel in Mozilla

The mouse wheel should now work for zooming in Mozilla/Firefox; this uses the "DOMMouseScroll" event. I'm not sure if Safari implements this. Anyone out there want to be my volunteer Mac test buddy? (I can’t quite justify springing for a new box just to test this page.)

Also, I tossed in Alt+Double-click to zoom out.

Ω