C.a.R. > Documentation > HTML Export

HTML Export

One of the main design goals was to present constructions and assignments in the Internet. This is easily possible with Java. However, Java now has security restrictions, which prevent access to your local system. Thus the applets will only work, if you upload it to web server. If you want to test locally, you can install a local web server such as xampp.

C.a.R. can generate HTML pages for your constructions automatically. There are two types. You can either let C.a.R. generate the complete web page, or use a template page. We explain this in detail.

There is also a special applet type that displays as a perpetual demo.

HTML Export with Templates

By using templates, the user can easily generate HTML pages in the style he likes. Templates contain all necessary information like colors, applet size and others. The current construction and the values in the export dialog are used to replace placeholders in the template file, and to generate the HTML file.

When exporting with templates, one has to choose a template file first, then edit the export dialog, and finally to choose the HTML output file.

Some templates require sections in the construction comment, separated by a line "~". These sections can be used at different places in the web page.

You find the following sample templates in the folder "Templates" in the documentation files.

Template Description
Very simple Applet, followed by the construction comment.
Simple Applet, followed by the construction comment in C.a.R. colors and fonts.
Simple with header First section of the construction comment, followed by the applet and the second section of the construction comment.
Tutorial A table layout using two comment sections.

Here is a description of the lines of the export dialog.

Title of Page

This is the title of your page in <H1> style.


A relative path from the HTML file to the "zirkel.jar" file. An examples is "..", if the file is in the directory above the HTML file.

Construction File

The name of the file containing the construction, usually in the same directory as the HTML file. However, the file names must be given relative to the program archive "zirkel.jar"! Absolute URLs and paths are not allowed here. An example of a relative file is "folder/file.zir".

Applet Style



These two icon bars let you choose the tools, which should be displayed to the user. You can get more information on the tools in the tooltips which are displayed when the mouse remains over the icon for a while.

The icons with the question mark are switches for the object selection dialog, the question for points on objects and for intersections. Normally, all these dialogs and questions are turned off in applets. You might also want to enable the indicate button.

The non-visual mode, the icons help the user to find the syntax. In this mode, all construction tools work.


After the dialog, the user must choose a file in a file dialog, and one for the solution. Then you need to publish

Creating your own Templates

The user can create own templates with any editor. However, foreign language users will have to use an editor, capable of editing UTF-8, like Mozilla's HTML editor, Frontpage or JE (same author as C.a.R.). Template files should have the extension "*.template".

You can use the following placeholders in your template file.

Placeholder Result
#title Replaced by the title from the export dialog.
#comment1, #comment2, ... Replaced by the sections of the comment (separated by lines "~"). Each paragraph is wrapped in <p>...</p>
#comment All of the comment.
#text1, #text2, ... Replaced by the sections of the comment.
#text All of the comment.
#parameter The necessary applet parameters.
#color Additional parameters for colors.
#font Additional parameters for fonts.
#codebase Codebase from the export dialog. This parameter should be right after CODE="..."

Exporting without Templates

Exporting without templates is no longer recommended. However, we keep this option for a while, until users get used to templates.

Note that tracks and animations are saved with the construction. They will automatically reappear in constructions, which are displayed over the Net. In this case, there is no user interaction. So you should use the plain or border style for these applets.

Here is the export dialog.

CSS Style-Files

Cascading Style Sheets are useful to give several pages a common appearance. If you do not use them, leave the input empty. In the example above, the style file is in the parent directory of the construction (in this case the directory Demos).

Width, Height

The dimensions of the applet display.

Jar File

This is the archive that you should have or that you can download from the home page of C.a.R.


You can choose a color for the page background and for the applet background. The color can be chosen with the button below.

Moreover, there are switches to save the defined colors for the construction elements and for the construction background. The background of the construction can be different from the background of the applet and the background of the page.


There are some additional switches. You can save the digits you set for the precision of number display, or use the default values. You can save the comment. It will appear below the applet. If you changed the default colors of C.a.R., you must save them with the applet. If you used an image as the background of your construction, you should enable the switch to save a link to this image. The image must be in the same directory as the construction. You can also prevent the popup menu in simple applets, that lets you see the hidden elements and walk through the construction. Finally, you can prevent to zoom with the mouse.

Display as Assignment

Need to be checked to save the construction as an assignment.

Solution File - Jump - Save - Link

These settings allow the automatic generation of a solution page, which is a separate page to display the solution. After the user finishes the assignment, the browser can jump directly to the solution page. One can also set a link to this page below the construction.


Exports the assignment comment, of course. The construction comment is only shown on the solution page.

Applet Parameters

language Language shortcut ("de","en", etc.)
color Background color of applets. Form: "255,255,255" or "#FFFFFF"
colorbackground Background color of dialogs.
colorselect Color for selected objects.
colortarget Color for target objects in assignments.
font "bold" or "large"
style Applet style ("plain", "full", "3D", "nonvisual", "icons", "breaks")
edit Makes embeddes styles editable.
color1, color2 Colors.
arrowsize Sie of arrows.
tools Strings for the tools the applet show provide.
options Strings for the options.
intersection Ask before an intersection is generated.
pointon Ask, before a point on an object is generated.
choice Show the choice dialog if selection is not unique.
showhidden Show hidden points.
editdigits Digits in dialogs.
displaydigits Digits in display.
angledigits Digits for angles.
movename Show the names while moving.
movefixname Show the names only for fixed objects.
minpointsize Minimal point size.
minfontsize MInimal font size.
interactive Protects from editing and moving.
file File of the construction.
job File of the assignment.
demo Self running demo.
grid Style of grid ("none","coordinates","normal")
smallicons Use old style small icons.
snap "left" snaps with the left mouse button.
nomousezoom disables zoom or pan with mouse or mouse wheel.
nopopupmenu disables popup with right mouse click.
jumptostart Jump to the first break or to the start of the construction.
noconfirmation No confirmation when an assignment is solved.
restrictedmove Allows only movements where no points become invalid, like in the automatic track tool.
shadow Set the shadow ("true" or "false")
shadowcolor The color for the are the applet shadow falls on.

Auto Demo

It is possible to get an applet to load a series of constructions and display them to the user at a given rate. The applet syntax is quite different and there is no automatic export.

An example of the applet code looks like this.

<APPLET ARCHIVE="zirkel.jar" CODE="rene.zirkel.ZirkelApplet.class" 
WIDTH="500" HEIGHT="565" ALIGN="center">
<PARAM NAME="demo" VALUE="demo.xml">
<PARAM NAME="color" VALUE="244,244,242">

The file "demo.xml" contains the file list. It is an XML file with a straightforward syntax. Here is a sample.

<?xml version="1.0" encoding="utf-8"?>
<Demo delay="30">
<File name="Uhr.zir" delay="20">Clockwork</File>
<File name="Cindarella-Maschine.zir">Cindarella machine</File>

The delay parameters are in seconds.


C.a.R. > Documentation > HTML Export