Basic SuperCard to Web

There are many ways of publishing SuperCard content to the web this is just a simple tutorial that uses one method, there are lots of other ways, many of which will be a lot more elegantly scripted with better html. But this way works.

The Project

We are going to take a simple project with one window, each card has 2 background fields and optionally 1 graphic.

project screenshot

You cannot get much more simple than this. We have a field title and a field entry
If you really want to you can download the project here: download project

The HTML template

Next we need a basic template to feed the data from Supercard into

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style type="text/css">
<div class="main">

You can see what this page looks like here template. Use your browser's back button to get back here.

We will store the template in a userProp the uTemplate of the project.

To add a userprop with the RTE shift-control-P to bring up the UserProperty Editing dialog for the project. with MPI use the UserProps Module.


Once we have our userprop in place we can start to fill in the place holders from the project.

We will use the merge function. Here is what the SuperCard Help says about merge:


The merge function is used to merge static data with the dynamic results of evaluated expressions.


The data passed to this function in theData is sent through a process by which embedded SuperTalk expressions are evaluated and replaced, and certain characters are converted. Currently, there are two forms of evaluation/conversion that take place:

First, all gravè accent characters ( ` ) are converted into quote characters ( " ). Using the gravè accent character within the theData variable makes it much easier to create responses and build descriptors that include quotes.

Secondly, all text contained within surrounding pairs of double square brackets ("[[" and "]]") are evaluated in SuperTalk and replaced with the results of the evaluation.

So with merge we can do things like this:
put "John Johnston" into tname
put "" into temail
put merge("<a href=`mailto:[[temail]]`>Mail [[tname]]</a>") into tmaillink
Which results in <a href="">Mail John Johnston</a> beign placed in tmaillink.

Scripting the Export

The first thing we will do is give our page a title
put the short name of this wd into tTitle

That means [[tTitle]] in our template can be replaced by the name of the window.

Next we make a couple of folders, one two hold the html file and a sub folder for the images for the page.
put projPath(this proj)&"html:" into tfold
if not exists(folder, tfold) then new folder tfold
put tfold&"images:" into timagefold
if not exists (folder,timagefold) then new folder timagefold

Next we will loop through the cards.

repeat with x = 1 to the number of cds
go cd x
The we will deal with the graphics, by checking to see if there is one. If there is exporting a jpg and creating an image tag with merge.
if exists(cd grc 1) then   put lower(fld "title")&".jpg" into timagefileName
  put timagefold&timagefileName into tImageFilePath
  export card from topleft of cd grc 1 to bottomright of cd grc 1 to jpeg file tImageFilePath
  put merge("<img src=`images/[[timagefileName]]` alt=`[[fld title]]` width=`[[the width of cd grc 1]`] height=`[[the height of cd grc 1]]`>") into timagetag
else put "" into timagetag
We are using export from topleft of our graphic to bottom right as I scaled the picturedata, if the images are fullsized we could just have exported the pictureData of cd grc 1 to jpeg file tImageFilePath

This results in this sort of thing in the tImageTag variable:
<img src="images/bear.jpg" alt="Bear" width="150" height="119"> if there is a card graphic.

Now we get the text from the fields:

put fld "title" of cd x into theading
put replace(fld "entry" of cd x,CR,"<br>") into tdivbody
Replacing the returns with a <br> tag.

We then convert card data to a div with merge:

put CR&Merge( "<div class=`entry`><h2>[[theading]]</h2>[[timagetag]][[tdivbody]]</div>") after tDivs
We get this:
<div class="entry"><h2>Bear</h2><img src="images/bear.jpg" alt="Bear" width="150" height="119">A bear is a large mammal of the order Carnivora, family Ursidae. The adjective, ursine, is used to describe things of bearlike nature.<br>Common characteristics of bears include dense fur, a short tail, excellent senses of smell and hearing, five un-retractable claws, and long, shaggy fur.<br>Bears have a large body with powerful limbs. They are capable of standing up on their hind legs. They have broad paws, long snouts, and round ears. Their teeth are used for defense and tools and depend on the diet of the bear. Their claws are used for ripping, digging, and catching.</div>
after tDivs.

After we

end repeat
we have a list of divs one for each card and can merge this with our template:
put merge(the uTemplate of this proj) into tHtml
and export the tHtml variable to a html file
put tfold&"index.html" into tfile
open file tfile
write thtml to file tfile
close file tfile

The result

This is what our page should look like: Some of my Favourite animals
We can improve the look of the page by adding a style sheet to our template: Same page with style.
I didn't include the styles in the template above but would not really consider exporting from SC without them. See the template with styles

Going further

This is a very basic look at html export/conversion for SC, we could have made a series of linked pages instead of one long one. We could have made an effor to convert the text in the fields in a wysiwyg way and/or dealt with multiple images and fields. Links in fields can be converted to tags as in the mailto example above etc etc.

In all these cases merge and replace are our friends.

Uploading to Server

This can be done with shell and the commandline program curl, see the Curl project in the samples folder in your SC 4.1.2 application folder.


If you find any of this of user or interest. I'd love to hear about it, if you have any tips I could add, please send them along. Mail John Johnston

HowTo Index