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.
Basic SuperCard to Web
The Project
We are going to take a simple project with one window, each card has 2 background fields and optionally 1 graphic.
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">
<html>
<head>
<title>
[[ttitle]]
</title>
<style type="text/css">
</style>
</head>"
<body>
<div class="main">
<h1>[[ttitle]]</h1>
[[tdivs]]
</div>
</body>
</html>
<html>
<head>
<title>
[[ttitle]]
</title>
<style type="text/css">
</style>
</head>"
<body>
<div class="main">
<h1>[[ttitle]]</h1>
[[tdivs]]
</div>
</body>
</html>
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.
Merge
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:
merge(theData)
The merge function is used to merge static data with the dynamic results of evaluated expressions.
COMMENTSThe 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.
put "John Johnston" into tname
put "john@littlefishsw.co.uk" into temail
put merge("<a href=`mailto:[[temail]]`>Mail [[tname]]</a>") into tmaillink
Which results in <a href="mailto:john@littlefishsw.co.uk">Mail John Johnston</a> beign placed in tmaillink.put "john@littlefishsw.co.uk" into temail
put merge("<a href=`mailto:[[temail]]`>Mail [[tname]]</a>") into 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
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.go cd x
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 tImageFilePathput 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
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.put replace(fld "entry" of cd x,CR,"<br>") into tdivbody
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
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 animalsWe 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.