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
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
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.COMMENTS
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.
put "firstname.lastname@example.org" into temail
put merge("<a href=`mailto:[[temail]]`>Mail [[tname]]</a>") into tmaillink
Scripting the ExportThe first thing we will do is give our page a title
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.
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.
go cd x
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
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 replace(fld "entry" of cd x,CR,"<br>") into tdivbody
We then convert card data to a div with merge:
open file tfile
write thtml to file tfile
close file tfile
The resultThis 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 furtherThis 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.