Capital Industry Calendar

The industry posts at Eve fail have inspired me to start producing Capitals and this has spawned some new requirements out of our Wallet Manager program.

Problem: Expensive Capital BPOs that are idle mean that they are not producing profitable items

Solution: Use the Corporation Industry Jobs API to display a visual aid of capital job production progress as to easily tell when BPOs will be idle

As always, James and I start off with a quick sketch on paper of what we think the final layout should look like. After some scribbling, debates about tables/CSS/javascript, and layout design we settled on a design.

Here is a shot of our paper sketch.

My knowledge of javascript is rather limited and James is usually the one spearheading new and innovative solutions when I present a design challenges.

Notes from James:

Blake often comes to me with a “I need this thing. Can you make this thing?”, to which I often pause and perform what I like to call shriveled programmer stare. This maneuver involves me scrunching my face as much as possible, raising one eyebrow, and giving a bit of a pained look. I’m quite sure I gave this look when the idea was first proposed. The basic idea actually is just a Gantt chart. I have x number of capital ships in production at any given time and I would like to know exactly, at a quick glance, when they come out of the oven so the next batch of parts will be ready. Simple enough, on paper. The real question is implementation.

A first idea was to use a table, and just change the background color if the job is still running on that day. However, we decided we would like to have the chart auto-scale, so that it would always display far enough out to have the end of the longest job on the chart. Doing this as a pure table would have been inelegant at best, with quite possibly a ludicrous amount of table columns needed for very long jobs. Instead, I took a more difficult, but ultimately more elegant approach; use a single row per job and utilize the margin-left and width css properties to control the positioning and length of each bar.

This, however, required that we have non-table-based vertical lines to delineate our days. For this I used Raphael. Raphael is a nifty little SVG canvas library with decent documentation and a good community base.


//Initialize our variables
var width = $this.width();
var height = $this.children('.industry-job-calendar-table').height();
var offset = globals.headerOffset;

var canvasDiv = $this.children('.industry-job-calendar-table').children('.industry-job-calendar-canvas')[0];

//Create the canvas
var paper = Raphael(canvasDiv, width, height + offset);

A lot of work went into getting our start and end dates, and anyone who’s worked with the JS Date object knows how painful operating in the non-native timezone (even if it is UTC) can be. After our fancy date math, we set the job bar properties, draw the canvas object behind the table rows, attach our tooltip hover() events to the bars, then do a pretty animation of the bars to their final widths.

All in all, a nice little idea that came in at around 325 lines of JS and 20 lines of PHP. And to use it is quite simple:

$('#industry-calendar').phdIndustryCalendar({url: './getCapitalJobs.php'});

And the final result is a clean looking display of our Capital production line.

Advertisements

8 Comments on “Capital Industry Calendar”

  1. davedr says:

    Long time fan, new time blogger. Thanks for the updates, I’m always in awe of your endeavors! o7

  2. Michael Smith says:

    That looks really good, well done!

  3. GrammatonCleric says:

    Nice. 🙂

  4. Ki'Toban says:

    Do you plan on being able to being able to add in “Proposed” jobs in the future?
    As you could have the job in local DB, and when it becomes due have it trigger a “ToDo” list until it shows up on the API which could clear that listing.
    Would make it easier to know what you need to get on at any given point (especially when it comes to component manufacture.)

  5. The X says:

    I would have thought Critical Path Analysis would have been a bit easier, but now I’m not so sure thats what you guys wanted to do in the first place.

  6. […] Blake on k162space have inspired me to take up arms again – specifically the post about the capital production calendar. I have a database, I’ve picked a framework to use, and now I’m just wondering how […]

  7. Iq says:

    Did this industry manager website ever get released to the general public?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s