[End User]

I'm not sure how to describe what I'm trying to do, but let me give it a shot and see if anyone here has some sample code or can point me towards some resources on the web....

What I need to do is represent a 24-hour timeline with "on-off " states in it. Basically a long horizontal GIF with two colors, with one color representing the "on" state and one color representing the "off" state. There could be any number of "on/off" periods on the timeline, similar to the attached image. (The "on" and "off" text is just for illustration, there wouldn't be any text drawn on the actual image.) For example, I might need to draw a 3-hour "on" band, a 12-hour "off" band, a 4-hour "on" band, and so on across the full 24 hours of the timeline.

Does anyone have any sample code for creating images like this, or is there a web page or tutorial that covers something similar? Is there a script that already does something similar to this? (I'm aware of the Simile Timeline tool from MIT, but it's way more than what I need- using it would be like driving an aircraft carrier to the mini-market. I just need something basic, or some basic code to start with.)

[wirehopper]

ImageMagick commands.

This is a rating demo - but the basic idea is the same, assembly of an image from components.

Rating Demo

[wirehopper]

... after more thought ...

I'd create a sprite - an image consisting of ON and OFF, and use a series of <span> tags to indicate the state.

HTML Code:

<style type="text/css">
span {width:50px;height:50px;}
.on {background:yellow url('state.gif') no-repeat 0 0;}
.off {background:#000 url('state.gif') no-repeat -50px 0;}
</style>

<div id="state">
<?php
foreach ($aState as $k=>$v)
  echo '<span class="'.$v['state']?'on':'off'.'" style="width:'.$v['duration'].'">&nbsp;</span>';
?>
</div>

The basic idea is to use a single image (state.gif) and shift it to display the correct state. I don't know if the &nbsp; is actually required - but it won't do any harm (other than waste 6*state bytes of bandwidth).