Description of "showboard.cfm" and "boardimage.cfm"

The form data is POSTed to "showboard.cfm" which then constructs a URL which can pass the data into "boardimage.cfm". This data is then used by the csImageFile component to create the new image from predefined GIF images.

The relevant lines of "showboard.cfm" are listed below.

<cfset NewUrl="boardimage.cfm?s0=">
<cfloop index="I" from="0" to="63">
<cfset formname="sq" & I>
<cfset NewURL=NewURL & Form[formname] & "&s" & (I + 1) & "=">
</cfloop>

<img src="<cfoutput>#NewUrl#</cfoutput>">

The contents of each square on the chess board were assigned a form variable based on the name of the image displayed. The variable names were s0 through to s63. This data is written into the URL that calls the image creation script.

The image itself is created in "boardimage.cfm". This script is listed below.

<cfcache action="flush">
<cfobject action="create" name="image" class="csImageFile.Manage">
<cfset currentdir=ExpandPath("./")>
<cfset image.ReadFile(currentdir & "images\startboard.png")>
<cfset image.Transparent=true>
<cfset image.TransparentColor="397B7B">
<cfloop index="I" from="0" to="63">
 <cfset urlvar=url["s" & (I)]>
 <cfif urlvar EQ "e_" IS FALSE>
  <cfset x=(I MOD 8) * 32 + 1>
  <cfset y=(I\8) * 32 + 1>
  <cfset image.MergeBack(currentdir & "images\" & urlvar & ".png", x, y)>
 </cfif>
</cfloop>
<cfset image.Transparent=false>
<cfset tempfile=currentdir & CreateUUID() & ".gif">
<cfset image.WriteFile(#tempfile#)>
<cfcontent type="image/gif" deletefile="yes" file=#tempfile#>

The relevant points here are that the compound image is produced by starting with an empty board, "startboard.png" and then an image of each piece is placed at the appropriate coordinates. The URL variable representing each square contains the first two characters of the file name of the piece graphic, for example the square containing the white king has value "wk" and the graphic is called "wk.png". An empty square has the value "e_" and is ignored.

The graphics of the pieces each have a background colour #397B7B, and this is set as the transparent colour before calling the MergeBack method of csImageFile. This means that the same graphics can be used for both colour squares. The Transparent property must be set to false before streaming the file otherwise the dark squares will be transparent.

We are using cfcontent to stream the file to the browser so we save it in a temporary file first. To ensure the file name is unique we use the CreateUUID() function to produce a name. For an alternative method of streaming a file without using cfcontent or saving a temporary file Click Here.

Finally, we stream the image to the browser in GIF format. The cfcontent tag is used with deletefile="yes". This takes care of removing the temporary file. It is also important to set the content type to "image/gif".

The permissions on the directory containing the script must give the Internet Guest Account "Modify" permission. If it only has "Write" permission the cfcontent tag will not delete the file.

Click Here to return to the board set up form.