C.a.R. > Documentation > 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.
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.
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.
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".
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
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 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.
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).
The dimensions of the applet display.
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.
Need to be checked to save the construction as an assignment.
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.
| 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. |
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"> </APPLET>
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> ... </Demo>
The delay parameters are in seconds.
Konstruktionen/start.zir
C.a.R. > Documentation > HTML Export