Changes in this version are:

• Fixed the bug that got introduced in the last version.
  (the ignored whitespace problem)

Go check out the changes yourself over at http://www.theboxoffice.be/

Reason the bug got fixed only now is that today actually is the first free (as in ‘no obligations’) Saturday I’ve had in a long time (and this due the fact that we had a scouting activity from 6 till 8 this morning – tnx to Mathias for calling me, or I would’ve kept on snoozing – instead of the normal from 2 till 5 in the afternoon).

Planned on doing some more (UX) changes in the future but that’ll be for the next Lazy Saturday (TM), if one should occur…

B!

Here’s what has been changed (not much though):

• Changed internal remote file handling after servermove
• This results in the fact that even GIF files are now valid to enter.
  Though, when having a gif with whitespace at its top (http://www.fredcrystal.com/circle.gif for example), the whitespace is misteriously ignored…

• 3 steps of separation : Define – Adjust – Result
• Drag support for manual adjustments
• Added extra padding option
• New and improved website

Go check it out yourself at http://www.bram.us/_theboxoffice/ http://www.theboxoffice.be/

B!

The Box Office 0.4 will feature a nifty 3 step system which will be extremely easy to use:

• Step 1 – define : enter parameters (like it is now)
• Step 2 – adjust : view what The Box Office spits out and adjust the generated stuff just by dragging and moving the elements around
• Step 3 – confirm : receive a piece of code which is easy to copy-n-paste for usage

Other minor improvements will also be implemented.

Expect this new version soon , but not that soon

cu

B!

Changes since last version:

• Added support for images with the content on the right
• Script now checks for approximations of the ignore color instead of an exact match

URL still is http://www.bram.us/_theboxoffice/ http://www.theboxoffice.be/

Enjoy!

B!

One URL to spread: http://www.bram.us/_theboxoffice/ http://www.theboxoffice.be/

Enjoy!

Bramus!

Hurray hurray … but why I am then talking about “the box office” and “automating a time-consuming job”?

Let me start at the beginning. At the iPod giveaway page Mike uses a nice trick: the usage of empty div’s so that the text is aligned next to the countour of the image:

You, you don’t see the divs cos’ they just are empty. Using a handy Bookmarklet called topo with borders we can make them visible though:

When looking at the source, you can see that Mike has put loads of work into it … always creating div’s with the height set to the line height of the text (17px in his case) and then stretching it out.

Since I am lame at doing stuff manually, the idea of creating a program that automates this popped up into my head.

1 hour and some cursing later, “The Box Office 0.1″ was put to the test and considered rather okay for a 0.1

The program reads in an image file that you specify, along with some parameters:

• the used line-height
• the color that is considered as ignorable
• the position where to float the divs

In Mike’s case the line-height is 17, the ignore-color is #FFFFFF and the position is left, cos that’s where the actual image is.

So I’ve created myself a (very ugly) test image and let “The Box Office” do it’s job.

And yes, the following code popped out:

<!-- BEGIN AUTO GENERATED BY "THE BOX OFFICE 0.1" - BY BRAMUS!- HTTP://BRAM.US/ -->
<div style="height: 20px; width: 233px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 241px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 241px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 241px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 241px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 233px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 177px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 121px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 97px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 89px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 73px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 73px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 89px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 97px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 137px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 185px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 201px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 209px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 209px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 209px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 209px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 201px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 177px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 153px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 121px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 113px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 105px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 95px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 95px; float: left; clear: left;"><span></span></div>
<div style="height: 20px; width: 97px; float: left; clear: left;"><span></span></div>
<!-- END AUTO GENERATED BY "THE BOX OFFICE 0.1" - BY BRAMUS!- HTTP://BRAM.US/ -->

When placing all that code into testpage, one can see that the result is quite the wanted effect!

Screenshot of the testpage, with the text highlighted.

So why is this program still 0.1 and not available for download?

Plain simple:

• the ignore color option doesn’t work yet (currently it is fixed to #FFFFFF)
• the float param doesn’t work yet (currently it is fixed to “left”), although it’s only a minor adaptation to make it accept “right” too (the loop just has to go backwards)
• Only works with images that don’t have the ignore color as first vertical row per bar

This last item can actually be ignored a bit, since the program does like over 90% of the job. You then can manually adjust it by messing in the generated code, or by using your favorite editor

So far my talking about this, expect more soon

cu

Bramus!