A Picture is Worth ...

From a simple "Hello World!" example, through the essentials of basic input and output, and onto to a worked example, you have learnt about the philosophy behind Weblog. You can express your ideas in clean, genuine Prolog, and display them with whatever you can imagine on the Web.

The previous example, "Family Tree", went further than the initial few programs, incorporating a CSS style sheet for the first time, and generating entire HTML elements, such as "<table>" bodies and ""<option>" lists for forms. But as ever, there's more that you can do with Weblog!

... A Thousand Words

Just as you can generate HTML elements of your own, to "drop in" to your separately designed web pages, you can use similar techniques to embed appropriately chosen graphics diagrams and photographic images. It is no more complicated than figuring out, from within your Prolog program, which file(s) you want to display, and using "submit/2" to pass its name to a suitable placed Weblog label in your HTML page.

Loony Moony

One of the Prolog examples that has been around for many years, is a simple program that computes the dates and phases of the moon. When you run it, from the Prolog command line, it checks the current date, and then uses modulo arithmetic to compute the date of the next quarter phase, returning that date and the name of the phase. On backtracking, the program returns the following date and quarter phase, and so on.

The Original Program

Here is the entire source code of the original, Prolog example program, "lunar.pl":

% compute the quarter phase of the moon on or after the current date

lunar( Phase, Year, Month, Day ) :-
   time( 1, Time ),
   Time = (Date,_),
   time( From, 1900, 1, 1 ),
   lunar( From, Date, Phase, Year, Month, Day ).

% compute the quarter phase of the moon on or after the given date

lunar( From, Date, Phase, Year, Month, Day ) :-
   Lunar is 29.53059,
   Quart is Lunar / 4,
   Days is Date - From,
   Stage is Days mod Lunar,
   Moon is ip(Date + Quart - Stage mod Quart),
   Entry is ip(Stage * 4 / Lunar) + 1,
   (  time( Moon, Year, Month, Day ),
      mem( [  'First Quarter',
              'Full Moon',
              'Third Quarter',
              'New Moon'
           ], [Entry], Phase )
   ;  Next is Moon + 1,
      lunar( From, Next, Phase, Year, Month, Day )
   ).

Prolog Command Line

The program works from the knowledge that there was a full moon on the very first day of the 20th Century (01 Jan 1900), and that the lunar month is roughly 29.53059 days in length. Using Prolog's built-in time and date functions, it is easy to figure out where successive quarters fall. Here is how it looks when running from the Prolog command line:

| ?- lunar( P, Y, M, D ).
P = 'Full Moon' ,
Y = 2016 ,
M = 7 ,
D = 19 ;

P = 'Third Quarter' ,
Y = 2016 ,
M = 7 ,
D = 26 ;

P = 'New Moon' ,
Y = 2016 ,
M = 8 ,
D = 3 ;

P = 'First Quarter' ,
Y = 2016 ,
M = 8 ,
D = 10 

Driving the Moon

So the lunar phase program already exists, and has been part of the Prolog distribution for many years. All you now need, to run this on the Web, is a little bit of Weblog to wrap it up. Here goes, with the whole of the source file, "lunar_0.pl":

% call the lunar example and display the result

weblog :-
   (  lunar( Phase, Year, Month, Day ), % generate lunar phase and date
      lunar_image( Phase, Image ),      % compute image file phase name
      submit( 'lunar_1.htm',            % show the data on an html page
             [ (image,Image),
               (phase,Phase),
               (y,Year),
               (m,Month),
               (d,Day)
             ]
           ),
      getarg( user, User ),             % see what the user wants to do next
      User \= `next phase`              % fail if the user wants next phase
   -> (  User = `reset moon`            % start over to reset the moon
      -> weblog
      ;  User = `done`,                 % quit program if all done
         submit( 'lunar_2.htm', [] )    % show the goodbye message
      )
   ).

% list the lunar images by phase

lunar_image( 'New Moon',      'lunar_30.png' ).
lunar_image( 'First Quarter', 'lunar_31.png' ).
lunar_image( 'Full Moon',     'lunar_32.png' ).
lunar_image( 'Third Quarter', 'lunar_33.png' ).

Graphic Inserts

As you know, your program is always called "weblog", and here, all it does is call the lunar/4 predicate from the standard Prolog example, then look up the name of a PNG file that represents the phase graphically, before submitting a HTML web with the data from the example and the name of the matching image. And here is that page, "lunar_1.htm":

<html>
<head>
<title>Loony Moony</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="/lunar.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/lunar_1.png" width=960 height=117></td>
  </tr>
  <tr>
    <td rowspan=4 background="/images/lunar_2.png" width=193 height=563></td>
    <td background="/images/lunar_3.png" width=250 height=250><img src="/images/{:image:}" width=250 height=250/></td>
    <td rowspan=4 background="/images/lunar_4.png" width=517 height=563></td>
  </tr>
  <tr>
    <td background="/images/lunar_5.png" width=250 height=80>
      <h2 align="center">{:phase:}<br/>{:d:}/{:m:}/{:y:}</h2>
    </td>
  </tr>
  <tr>
    <td background="/images/lunar_6.png" width=250 height=45>

      <form align="center" name="lunar" method="get" action="/weblog/lunar.exe">
        <input type="submit" name="user" class="green" value="reset moon"/>
        <input type="submit" name="user" class="green" value="next phase"/>
        <input type="submit" name="user" class="green" value="done"/>
      </form>

    </td>
  </tr>
  <tr>
    <td background="/images/lunar_7.png" width=250 height=188></td>
  </tr>
</table>

</body>
</html>

Photo Chop

The "<table>" element that makes up the bulk of the above HTML file, was originally generated in Adobe Photoshop, by chopping up an original image into multiple slices, with the main purpose of isolating the area which displays the moon. Once this was done, four different versions of the "moon" slice were prepared, one for each of the four lunar phases.

The HTML output from Photoshop was hand-edited, both to replace the entry for "lunar_3.png" with the Weblog label, "{:image:}" and to add the all-important "<form>" element, which is what provides interaction with the Weblog application.

After this application calls lunar/4 to compute the next phase of the moon, it this program looks up the appropriate image file name in "lunar_image/2". This name is then passed to submit/2, along with values for date and phase name returned by the original example. As usual, the named HTML web page, "lunar_1.htm", is shown with the appropriate substitutions, this time, including the name of a .PNG file, within an "<img>" element, which displays the image in context.

Photoshop is just one of many well-established graphics design and publishing programs, which works very well alongside Weblog.

Click here to run the "Lunar Phase" example

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