Perfect Picture

Here is another example created with the help of a well-known grpahics application, this time Adobe Illustrator, together with help from Photoshop and WIN-PROLOG, all three being used to create the visual components of the application interface. Again, the logic, written in Prolog, is independent of the graphic design.

As with the previous "Lunar Phase" program, the bulk of the HTML page that you see was created in Photoshop, and sliced into a number segments, this time to isolate the West Clock Face of the famous Elizabeth Tower at the Palace of Westminster.

Tempus Fugit

As with the Lunar Phase program you saw on the previous page, this application is based on a standard Prolog example, which displays randomly chosen phrases to represent, approximately, the current time. The example itself was inspired by broadcasters at BBC Radio 4, who routinely give time checks that are out by an hour or more, as they read an analogue or digital clock, and try to put the time into words.

Again, as with the Lunar Phase program, the interface is based on an original image, that was sliced in Photoshop to generate the main body of the HTML web page. This time, rather than isolating the moon, it was the West-facing clock face that was placed into its own slice, for runtime substitution.

This time, as well as displaying text phrases that approximate the current time, the idea was to display the time on the clock face, using outlines of the actual clock hands. The approach taken was to be to pre-compute an image for every minute of a 12-hour half day, and then generate the appropriate image file at run time. Unfortunately, this meant creating no fewer than 720 separate .PNG image files!

All Hands on Deck

One of the standard WIN-PROLOG examples, is an analogue lock display, "big_ben.pl", based on the face of the Westminster clock. This example contains a predicate, "show/2", which uses a background image of the blank clock face, which was created in Adobe Illustrator, onto which it draws the hour and minute hands, drawn by Prolog's "gfx/2" graphics predicate.

The outlines of the hands are also based on the Illustrator file, but were converted into Prolog coordinates: they are drawn rotated by the appropriate amounts for any given time.

In order to create the required 720 individual files, a WIN-PROLOG program was written to increment the hours from 0-11 inclusive, and for each such hour, to increment the minutes from 0-59. For each combination of the hands, the hands were displayed, without the clock face background, and a selective screenshot taken and dumped into a .BMP bitmap file, using WIN-PROLOG's "bdsbox/2" predicate.

Once the program had run through all the hour and minute combinations, the 720 resulting bitmap files were converted to .PNG files using a batch job in Photoshop, which replaced the white background with transparency, and then reduced the images from their initial 1100*1100 pixels size, to 200*200 pixels. It is one of the 720 "hands" files that is subsequently displayed on the blank, Illustrator-generated clockface on the sliced image of the Elizabeth Tower, with the file name being computed from the 12-hour time.

Tick Tock Timex

The "Broadcast Speak Clock" program, "timex.pl", is a standard, non-graphical Prolog example. All it does is read the current time, and then generate, randomly, different English phrases which represent the time. For example, from the Prolog console, you might type:

| ?- clock( Q, W ).
Q = `10:08:42` ,
W = `some time after eight past ten` ;

Q = `10:08:42` ,
W = `a while after ten oh eight` ;

Q = `10:08:42` ,
W = `heading towards ten oh nine`

Rock Around the Clock

Just as with the previous, "Lunar Phase" program, all this application requires to run on the Web, is a little bit of Weblog. Here is the contents of the file, "timex_0.pl":

% call the timex example and display the result

weblog :-
   (  repeat,                           % repeat so that cases never run out
      clock( Digits, Words ),           % generate time and a random phrase
      cat( List, Digits, [2,1,2] ),     % compute image file name from time
      List = [Hour24,_,Minute,_],
      fread( r, 2, 10, Int24 ) <~ Hour24,
      Int12 is Int24 mod 12,
      fwrite( r, 2, 10, Int12 ) ~> Hour12,
      submit( 'timex_1.htm',            % show the data on an html page
             [ (digits,Digits),
               (hour,Hour12),
               (minute,Minute),
               (words,Words)
             ]
           ),
      getarg( user, User ),             % see what the user wants to do next
      User \= `other words`             % fail if the user wants other words
   -> (  User = `update time`           % start over to update the time
      -> weblog
      ;  User = `done`,                 % quit program if all done
         submit( 'timex_2.htm', [] )    % show the goodbye message
      )
   ).

Graphic by Numbers

The main difference between this application and the Lunar Phase example, is that the file name is computed from the 12-hour time, rather than being looked up from a database relation, which would otherwise require 720 clauses! The computed data is combined with an HTML file with the usual call to submit/2.time itself; here is that file, "timex_1.htm":

<html>
<head>
<title>Big Ben Says</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="/timex.css"/>
</head>

<body bgcolor=#ffffff leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>

<table width=960 border=0 cellpadding=0 cellspacing=0>
  <tr>
    <td colspan=3 background="/images/timex_1.png" width=540 height=100></td>
    <td rowspan=3 background="/images/timex_2.png" width=420 height=720>

      <h2 align="center">at {:digits:} Big Ben says</h2>

      <h3 align="center">{:words:}</h3>

      <form align="center" name="timex" method="get" action="/weblog/timex.exe">
        <input type="submit" name="user" class="azure" value="update time"/>
        <input type="submit" name="user" class="azure" value="other words"/>
        <input type="submit" name="user" class="azure" value="done"/>
      </form>

    </td>
  </tr>
  <tr>
    <td rowspan=2 background="/images/timex_3.png" width=160 height=620></td>
    <td background="/images/timex_4.png" width=200 height=200>
      <img src="/images/tim_{:hour:}{:minute:}.png"/>
    </td>
    <td rowspan=2 background="/images/timex_5.png" width=180 height=620></td>
  </tr>
  <tr>
    <td background="/images/timex_6.png" width=200 height=420></td>
  </tr>
</table>

</body>
</html>

Click here to run the "Big Ben Time Check" example

Click on the buttons to find out more, or jump directly to any of these links: