• Menu begin
• > FR Version
  française
• See the Xiss web's features
• Download the Xiss web's packages
• See the detailed documentation
• See examples of slideshows
• Subscribe to the mailing list
• Menu end

Xiss web libraries

File library
This library enables process run along a hierarchy of directories exploration. See API.

Worker library
Swing worker to control (stop, pause, ...) long process (a customization of the Sun's one). See API

Preferences library
This library uses only files to make preferences persistent. It has not exactly the same functionalities as the Java's preferences. See API.

Xiss web 1.7 documentation

XML Interactive Slide show based on W3C standards: XML, XSLT, CSS, HTML/XHTML.

1 Start with Xiss web

1.1 Prerequisite

Xiss web requires at least a J2SE 1.4 (Java 2 Standard Edition, 1.4.2 or 1.5 version) or Java SE 6, cf. Oracle's Sun web site). The JAVA_HOME environment variable must be set to a JRE (Java Runtime Environment) home directory.

In this documentation the commands are in Windows syntax. If you use Linux you have to adapt the commands to Linux syntax.

1.2 Command line initialization

First you have to set the XISSWEB_HOME environment variable to the Xiss web root directory. Then you can add to the PATH system environment variable the %XISSWEB_HOME%\bin path.

You are ready to use Xiss web. All the commands are in the XISSWEB_HOME/etc/bin directory, see the sections xiss-sow , xiss-build .

1.3 GUI initialization

No initialization required.

Xiss web can be use directly by his GUI (Graphical User Interface) without any initialization. Xiss web is ready to be used by his GUI.

2 Use the examples

Two basic examples are ready to use: projet1-sport-mode and projet2-sport-mode. We suggest you to try these two examples to see differences and to understand how Xiss web works. If you are impatient to create your own slide show, go to the next section. The section The examples lists and descries all the Xiss web's examples.

In a file explorer you can navigate into the projet1-sport-mode/src directory and his subdirectories. Then you discover the images organization. If you repeat this navigation in the projet2-sport-mode example you will find some other files: xissweb.properties, layout.xml and skin.xml (these files will be described later). And you will find images stored in a dedicated photos subdirectory of each slide show directory.

You have two ways to generate slide shows of these examples:

• command line: In the root directory of one example (here projet1-sport-mode or projet2-sport-mode) you have just to run the xiss-web command. Some traces are displayed.
• GUI: choose one example in the Example item in the menu (help menu). After the open of the corresponding project, click successively on run sow... and run build... buttons.

Now a new directory build exists with the src directory. Navigate in this new directory with a file explorer, open with a web browser the index.html you find (or any other .html file). At this moment you can see a generated slide show by opening a HTML file with a web browser. You can also visualize the generated slide show from the GUI: click on the Show... button.

If you navigate again in the subdirectories of the src directory, you can see new files: slideshow.xml . Each one describes a slide show content (it can be edited to add image comment).

Below we explain the difference between the two examples:

• projet1-sport-mode:
  • this example uses the default parameters. These parameters are in two files: xissweb.properties copied from the %XISSWEB_HOME%\rsrc directory and layout.xml in %XISSWEB_HOME%\rsrc\layouts\default directory;
  • the images are directly in each slide show directory;
  • the generation mode is: web.
• projet2-sport-mode:
  • this example overloads the default parameters with the xissweb.properties file in the root directory of the project (see here after). And it uses two differents layout (one with an animation) in two subdirectories (see customized way part);
  • this project defines a new skin;
  • the images are in a "photos" directory of each slide show;
  • the generation mode is file system without local indexes (only a global index);
  • the navigation bar of the sport part of the slide show is in circular mode.

The differences of theses examples can be viewed in Xiss web Gui, especially with the filter show image files activated.

With the command line, the slide shows of the two examples are generated in one step by the xiss-web command. The slide show generation can be done in two steps with the following commands (as it is in the GUI):

1. The xiss-sow command: generates the slideshow.xml files. These files describe all the slide shows content in directories where there are some images. You can edit these files to add image comments, by example.
2. The xiss-build command: generates the thumbnails and all the HTML pages in the build directory. The slideshow.xml files are also modified to add thumbnail information.

3 Create your first slide show

Before creating your first project, it's better to take a look to the examples. We present two ways to create a slide show: in 3 steps and the customized way.

3.1 Slide show in 3 steps

Create your slide show in three steps. With this way you obtain a default presentation (layout and skin) for your slide show. The default presentation in designed for 600 pixels maximum image size. It is used by the first example (its result is visible here). Even if your images are larger than this maximum size, you can just test this way to obtain your first slide show. Then after, go deeper in the Xiss web's features (or simply go next section) to get your slide show as you like.

1. Create the root directory of your project. In it, create a src subdirectory.
2. Then organize images from the src directory by creating subdirectories: each one where there are some images (jpeg or gif) is a slide show directory.
   WARNING:

   Put your images in sub-directories of src and never directly in src. The src directory can't be a slide show directory.

3. For this third and last step two ways are available:
   • command line: first, copy the %XISSWEB_HOME%\rsrc\xissweb.properties file into the root directory of your project. Then, from this directory run xiss-web command.
   • GUI: open the Xiss web's GUI, open the new project dialog and set in it the root directory of your project as the project's location, and when your project is opened, click successively on run sow... and run build... buttons.

That's all! The slide show with the default look is generated in the build directory (like the example 1). It can be visualize with a web browser: open an index.html in build directory or click on the Show... button in the GUI.

3.2 Customized way

Here we add some steps at the three above. Each step below can be optional, it depends on the customization you need.

1. Parameters : You can change the default values of parameters in the xissweb.properties file in the root directory of your project. This file is auto documented; you will find in it the explanations to update his content (if not the case, take a look at the %XISSWEB_HOME%\rsrc\xissweb.properties file).
   More simply, the properties of a project are directly editable from the GUI.
2. Image organization : Some xissweb.properties parameters are dedicated to the slide show images organization. The images organization can be done by: directly put images in subdirectories, each one corresponding to a slide show; or put the images in a special subdirectory (for example named "photos") in each slide show directory. In this last case you have to change the image.directory.name and image.directory.filter in your copy of the xissweb.properties file done in step 1.
   In this step you have to choose if your images are directly in the project's directory organization (started by the src directory) or if they are in an external repository (see Import from image repository section for more details), and set the dedicated parameters. With Xiss web's GUI, a dialog box enables the creation of a project using a repository of original images.
3. Comments, sections, metadata, ... : After the run of the sow process, the generated slideshow.xml files in each slide show directory can be edited to add image comments, to add sections, to edit metadata, etc. A dedicated editor helps the slide show content edition.
4. Look : To define your slide shows presentation you have to put layout.xml files everywhere you need it: in the project's root directory, src directory or in any subdirectories (slide show directory or not). (This step can be done before the step 3 see the note below.) See look management section for more details.
5. Build : The run of the build process copies main images, generates the HTML pages and thumbnails for slide shows in the build directory. Then you have created slide shows immediately visible by a web browser: choose a HTML page in the build directory and open it with a when browser or choose the Show... button on the GUI.

4 Xiss web processes

4.1 Introduction

Xiss web has two distinct processes:

• One to inspect a hierarchy of directories to find images to be presented in slide shows. This process is an initialization pass called sow.
• Another called build process to generate the slide shows based on presentation templates.

Between these two processes, it is possible to:

• edit slide show and image information,
• add elements about presentation: layout and skin.

4.2 Sow (initialization)

See also run sow process from the GUI, run sow process from the command line.

The purpose of the sow process is to generate the initial information describing each slide show in a directory hierarchy or to update this information after some changes. It manages a slideshow.xml file in each directory corresponding to a slide show. This file describes one slide show its images. For each file it contains: file name, file extension (jpg, gif, ...), width, height, comment and metadata.

If you use a Photo Manager on your computer and if you add comment, caption or description, Xiss web can reuse this information as image comment. The sow process looks for a comment in the image metadata, first in the Exif data associated with the 'user comment' tag. If no value is found, it tries to get the value of the 'caption/description' tag in the IPTC data. If the image doesn't contain a comment, a default value is got in the slide show project's properties (image.default.comment).

For metadata, the sow process tests if the images came from a digital camera to extract some metadata in Exif data. If an image isn't a photo of a digital camera, then the image has an unknown type and the sow process extracts data-time and GPS data from Exif data. To know more about image type and metadata see the dedicated section.

The first sow process can reverse an existing slide show in HTML pages. In this case all the information about slide show and images are extracted in the HTML pages. The elements that enable the information extraction from HTML page are specified in the slide show project's properties.

The images of a slide show project can be imported from a repository of original images. The sow process is able to import images in a project, see this section.

The changes that require a new sow process to update the slideshow.xml file (and to take into account these changes for the next HTML pages generation by the build process) are:

• addition of new images (in existing slide shows or new slide shows),
• deletion of existing images.

The following modification actions don't need a new sow process:

• edition of the slideshow.xml files (image comment, metadata, sections, links);
• addition of layout.xml files;
• update of existing images.

In the last case, event if a sow process is needed, the image updates are directly taking into account by the build process.

The manual changes in content slide show file (by example via dedicated editor) aren't lost by the runs of sow process to take into account image changes.

4.3 Build

See also run build process from the GUI, run build from the command line.

The slide show build corresponds to the creation of HTML pages and thumbnails, and to the copy of main images, in the build directory. The whole of these elements makes slides shows displayable immediately in web browser and ready to be uploaded in a web site (or not, you have the choice). This process copies also skin files (CSS files and resources). It also copies your own files (see Web or not section) if they are in the source directory (src). During the generation it updates the slideshow.xml content to add thumbnail information and eventually the main image information if some images are changed after a previous sow or build process run.

All the generation and copy actions are made only if it is necessary. Xiss web takes into account the dependencies between files to produce or not a file in the build directory. All the generated files depend on project properties, and some other files as, for example it's describe here after, for thumbnail and HTML pages:

• a thumbnail depends on its main image and a layout (that contains thumbnail properties);
• an HTML slide show page depends on, the main image concerned, slide show description ( slideshow.xml ) and, a layout.

For the files simply copied no dependency are necessary. They are copied only if they change between two slide show builds.

As it's described for the sow process some changes can be done in the src directory and be taken into account directly by a build process.

5 Advanced features

Here we present the following advanced features: create a slide show from a repository of original images, image information, spacify a customizable local index (standard or Goole Maps), look management, animation between images, image numbering, page decoration management, creation of link between slide shows, customization of the navigation bar behavior, image organization in sections, generation of slide show in web mode or not and, inversion of an existing slide show.

For some features describe here, a corresponding example exists in the examples/features directory (see The examples). You can run these examples as an illustration of our explanation. The examples are directely accessible from the Xiss web's GUI, see how to open an example project.

5.1 Import form image repository

Since 0.8.2 version, enhanced in 0.9.0 version.

The main images of a slide shows project can be created by importation of original images from an external repository of this project. The repository organization is followed to create the slide show organization (images in directory hierarchy) in a project.

This functionality is useful, to create a Xiss web slide show with images from: a CDROM, a high resolution scan, a photo manager software, or a direct download from a digital camera. If these images are too large to be used directly in HTML pages they need to be reduced to be compatible to the screen size and/or the web band with to obtain a reasonable display time.

A set of parameters in the slide show project's properties are associated with this functionality. These parameters are in the original repository part (see properties editor and opening a project). They are:

• image repository location: the location of the original images repository have to be specified for his access. A file path to the repository must be set in the repository (repository.root.dir) parameter. The path can be a relative path from a project's root directory or an absolute path.
• importation time: the effective importation of images can be done during the sow process or during the build process. To choose the importation in the sow process time, set the parameter image import (import.image) to true. To choose the importation during the build process, set the parameter image import to false. The images are imported only if they don't already exist or if they changed since a previous import.
  WARNING:

  Important point about performance. If images in the repository are very large, then it's highly recommended to import (and resize) images during the sow process (image import set at true).
  In this case you obtain reasonable image size in your Xiss web project. These images are used for all the future process in place of the heavy images in the original repository.

• image size: a maximum size can be specified to obtain image with a wanted size. The original images from repository are resized during the import only if they size are larger than the maximum. The maximum size can be specified for the both two dimensions (width and height) in one parameter (max image size) or specified two values for each dimension in two parameters (max image width and max image height). A 0 value or no value indicates no resize.

A dialog box helps the creation of this kind of project. It creates a project and initializes some of above parameters in the slide show project properties. These parameters can be edited at any time to be adapted to your needs.

This feature corresponds to the -repository parameter of the xiss-sow command or by the selection of the repository radio button in the GUI associated with the sow button. No parameter or option is needed for the xiss-build command or the build button in the GUI.

See the example of this functionality.

5.2 Metadata

Since 1.1.0 version enhanced in 1.2.0, 1.3.0 and 1.3.3 version.

Xiss web extracts image information from JPEG file. The information is metadata stored by a digital camera in the image file at his creation. These data are normalized (see Exif format) and concern: camera manufacturer, model, date/time, shutting parameters, etc. This functionality enables the display of this kind of information with the image in generated slide shows.

For images coming from photos made by a camera using photographic films or a digital creation or processing, no metadata are available directly. Xiss web enables to add for these images some metadata. Then, 4 kinds of images and associated metadata are defined as the following:

1. [P] digital photo, made directly by a digital camera:
   • about the camera: maker and model;
   • date and time of the picture;
   • shutting parameters: exposure time, shutter speed, aperture, ISO speed, focal length, white balance and flash;
   • GPS parameters: latitude, longitude, altitude.
2. [F] film, digitalization of picture made by an camera using photographic film:
   • about the camera: maker and model,
   • date and time of the picture,
   • film support: film and ISO speed,
   • shutting parameters: exposure time, aperture, focal length and flash.
   • GPS parameters: latitude, longitude, altitude.
3. [C] digital creation: image made by a software from scratch or by a processing of images:
   • software,
   • date and time.
   • GPS parameters: latitude, longitude, altitude.
4. [U] unknown: default image type:
   • date and time.
   • GPS parameters: latitude, longitude, altitude.

Xiss web detects automatically the digital photo and extracts the associated metadata listed above. If the digital image type isn't recognized, then the unknown type is set and the associated metadata is extracted. The GPS data is always extracted if it exists in images.

The extraction of metadata occurs during the sow process and it is stored in the slide show content file. The slide show content editor displays metadata of a selected image.

For the photographic film and processing images, the metadata have to be explicitly added in the slide show content file, manually or by the slide show content editor. Some software stores information in Exif section of images: software name, date and time, GPS data. If an photographic film image or a digital creation image type is selected, Xiss web tries to extract some information in Exif metadata.

The metadata can be displayed in the main image area of generated HTML page (expect for GPS information). The layout (see layout file or layout editor) specifies witch data to display and where. The skins can specify a style for this display. The simple skin editor enables the definition of this style.

The GPS information is used only to localize the images on a map with Google Maps in an index page (see customizable local index, and the Google Maps index sub-section).

The example features/metadata is available to experiment this feature.

How to add metadata in an existing slide show?

If you have already generated slide shows with a previous version of the 1.1.0 of Xiss web and if your images came from a digital camera, then it is possible to add metadata in your slide shows. This procedure can be followed also, when an upgrade of Xiss web adds new metadata, to insert the new metadata in your slide show.

1. Sow again your project. If the images came from a repository, select the option repository. Open 'slideshow.xml' files to add and edit metadata for photographic film or digital creation images.
2. Edit slide show layout and skin. For each layout that organizes your slide shows add the wanted metadata elements for they display. The metadata elements are attached to the image area element (see layout editor). If you use a specific skin, add a CSS class .metaData. Or if you use a "simple skin", you can specify a font for metadata with the simple skin editor
3. Rebuild the slide shows. With slide show content, layout and skin updated re-generate you slide shows. If no image changed, only HTML pages are re generated. Then you can see the result by browsing updated HTML pages.

5.3 Customizable local index

Since 1.3.0 version, enhanced in version 1.3.4 and updated in version 1.3.6.

A local index is an index page dedicated to introduce one slide show. This page can be built by Xiss web. It presents all the slide show images by its thumbnails and some additional information.

Before the 1.3 version of Xiss web the only way to specify the build of a local index for a slide show was to set the local index property in the properties of a project. The scope of this property is the whole of a project (for all of the project's slide shows) and isn't customizable.

Now it is possible to specify the build of a customizable local index for a slide show or a set of slide show. A local index can be specified in a layout (see look management, layout editor, layout file). It is also possible to create your own local index pages at a slide show level, see web or not section. Then there is three kinds of local index:

1. personal: your own HTML index page (see also Web or not section and features/persinal-pages example),
2. layout: standard or Google Maps index built by Xiss web if specified in a layout,
3. default: index built by Xiss web if specified in projects's property.

The decreasing priority order between these kinds of local index is: personal, layout and default. It means that a personal index page overrides a layout index and a layout index overrides default index. The following of this section is about index specified in a layout.

For the two kinds of layout index (standard and Google Maps), a corresponding skin element exists (see next section and skin editor).

5.3.1 Standard local index

A standard local index enables the display or not and separately or not two types of information with the slide show's thumbnails:

• the slide show description contained in the slide show content,
• an explanation (the explanation is the same as in the default local index).

Here after an example of the display of both description and explanation:

If no description has displayed, check if a description has been filled in the slide show content file.

5.3.2 Google Maps local index

This kind of index uses the GPS metadata in images and the Google Maps API to display its localization on a map. The customizable elements are:

• Default map displayed: normal, satellite, hybrid, terrain.
• Map controls: zoom, map types and overview.
• Marker style: default Google Maps marker, marker with thumbnail.

Here after an example of the Google Maps local index with the result side by side of two kinds of customization:

On the Goole Maps local index, a click on a marker on the map shows the marker's information, as the Google Maps's standard behavior. The marker information is the comment and the thumbnail of the corresponding image. The marker's information is also displayed when the mouse is on a thumbnail outside the map. A click on a thumbnail in marker information shows the main image's page, just like the thumbnail outside the map.

A Google Maps local index has a sense if images are GPS localization in its metadata and if the final place of slide show is a web site (see web or not section, it's possible to test from the file system a generated Google Maps index page, if an internet connection is available). Each image with GPS localization is represented by a marker on a map. If no image has GPS localization, the generated index page displays a map without any maker.

Several ways are possible to obtain GPS location for an image:

• Some digital camera has GPS device (embedded chip or external antenna), then at the image creation the GPS coordinates are stored in the Exif metadata.
• Some software can add GPS information in Exif metadata on any existing image (by example, Apple's iPhoto'09 on Max OS X or Google's Picasa 3.5).
• With the slide show content editor, the GPS coordinates can be edited by hand. In this case the GPS data aren't stored in the Exif metadata but in the slide show content file.

5.4 Look management

Since 0.6 version.

The final look of a slide show depends on a layout and a skin . The layout defines the organization of the slide show components (thumbnails, main image, comment, and navigation bar). The skin defines the visual effect of these components (colors, fonts...). Several skins can be applied to one layout and, one skin can be used by different layouts.

A default layout can be specified in the properties of a Xiss web project. It is a file layout.xml . A layout file can be built and edited with a dedicated editor.

A layout file can be put in the directory hierarchy of images to be applied at one or more slide shows, or at the root directory of a project to be applied at all the slide shows of the project. The following rules are applied to select a layout:

1. if no layout is in your project the %XISSWEB_HOME%\rsrc\layouts\default\layout.xml is chosen;
2. at one level in the slide show subdirectories, the layout selected is the nearest in the path from this level to the project's root directory.

You can create a layout file from scratch or, copy one from the %XISSWEB_HOME%\rsrc\layouts\xxx or from the examples. From the GUI a menu in the file tree view enables to create a layout. The layout can be modifying with a dedicated editor. You can also choose a skin in association with one or more layouts. For more details, see look management

A skin is specified in the file xissweb.properties or in a layout file (layout.xml . Some skins are available in the directory %XISSWEB_HOME%\rsrc\skins. Some new skins can be defined in a Xiss we project, see Skin editor section. A Skin is a set of CSS (Cascading Style Sheet) files and images. It offers the following possibilities:

• the look is easy to change: you can change the default skin in slideshow.properties or in layout.xml , re-generate the HTML pages and see the result;
• A look is easy to define: you can define your own skin by following a skin example or (in a more advanced way) you can change the HTML rendering by changing the XSLT files after you have made a copy of the files from the %XISSWEB_HOME%\rsrc\skins\common\xsl directory.

The CSS style for the final look is composed of 3 files:

• page.css: top level CSS file to define the main styles,
• layout.css: defines styles for layout arrangement (see layout.xml ): horizontal and vertical,
• component.css: the component styles (thumbnails, navigation bar, main image ...) are defined here.

The XLST files define the transformation from the couple layout.xml and slideshow.xml files to build HTML pages. These XSLT files are divided in 3 groups:

1. Slide show: slideshow2html.xsl is the entry file of generation. This file is responsible of the page structure. And, for each presentation component there is an XSLT file for his rendering in accordance of the layout arrangement containing the component (horizontal or vertical): thumbnailRenderer.xsl, mainImageRenderer.xsl, navigationBarRenderer.xsl, builtWithRenderer.xsl.
2. Main index: one file (indexes2html.xsl) is dedicated to the main page index generation with a list of all the slide shows,
3. Properties: the properties.xsl file stores the text displayed in HTML pages. The text depends on language. Currently two languages are available: English and French.

If you want to change the HTML page generation by changing the XSLT files, you have to adapt in accordance the CSS files to obtain the final result you want.

One of the main characteristics of Xiss web is be to able to present always the thumbnails during the navigation of slide shows. For one slide show, all the associated thumbnails are displayed with each main image. Then it is important to have this characteristic in mind to obtain a pleasant result: for example, to avoid scrolling with a 1024 per 768 screen display, when each main image is displayed.

One basic rule can be followed to have a well display: no too much images in each directory. Don't hesitate to make more directories to dispatch images. For a 1024 per 768 display the maximum images in one directory is 24 with a size of 70 pixels max for thumbnails (organized in 4 columns of 6 thumbnails) and a size of 600 pixels max for large images. This is an example. If all the images are in landscape format it is possible to have more than 24 images. With Xiss web it is easy to adapt the look to your specific case by successive tests with slide show generation on different configurations of image organization and layout.

5.5 Animation

Since 1.6.0 version, updated in 1.6.5, 1.6.6, 1.6.7, 1.6.8 and 1.7.6 versions.

5.5.1 Principle

This feature allows animation on the transitions between images. More precisely, the animation is applied to the change of the whole content of the main image area. This area presents slide show index and main images with its comment and meta data. The animation can be set in a layout.

Three steps are considered in the animation to pass to an image to another: before loading, loading and display the new image. Animated transition occurs on these three steps and depends on the four animation kinds:

• fade: fades out the current image before loading the new image, shows a wait screen during the load and fades in the new image.
• superimposed fade: does nothing before loading the new image, shows a wait screen during the load and, simultaneously, fade in the new image on top of the current one, and fade out the current image.
• horizontal scroll: does nothing before loading the new image, shows a wait screen during the load and, scrolls right or left the current image to do appear the new image (right if the new image is a previous one, left if it is a next one).
• vertical scroll: does nothing before loading the new image, shows a wait screen during the load and, scrolls up or down the current image to do appear the new image (down if the new image is a previous one, up if it is a next one).

Different speeds of transition concerning image are possible: slow, medium, fast, and immediate.

Three sizes of wait screen are available: none, size of to the image area, size of the page (called 'full screen' too). The size none corresponds to no display of the wait screen.

5.5.2 Control

In association with animation, it is possible to have actions for the end user to control some slide show parameters. This possibility is an option in the animation part of a layout and adds actions on the slide show page to control:

• comment display: on top or on bottom of the main image;
• metadata display: no display or, on top or on bottom of the main image;
• transition animation speed.

The control elements are presented in a panel, near to the main image area, to show/hide as it's needed. The final look of the control elements depends on specific CSS styles.

5.5.3 Automatic show

Animation enables automatic play of a slide show. The images are successively displayed automatically following the navigation policy. At the design time some parameters can be set in a layout:

• three show modes:
  • manual: no automation (the default),
  • automatic: automatic play and manual start,
  • auto-start: automatic start and play;
• display time: display time of each image (in seconds).

At the show time, it is possible to control the show: pause/play the show and, change the image display time. It is also possible to use the navigation bar when an image is displayer (avoid to use it during an animation transition phase).

The automatic show control elements are presented near to the main image area. The final look of the control elements depends on specific CSS styles.

The animation feature is presents in the examples: projet2-sport-mode , features/metadata , features/html-comment and features/personal-pages .

5.6 Images numbering

Since 0.8 version.

In the slide show files ( slideshow.xml ) generated by Xiss web each image have a number. It is possible to display this number with the image comment. For this a display format has to be described in the layout file ( layout.xml ). The display format is based on the two following elements:

• @# indicates the image's number,
• %+ indicates the total image count of the current slide show.

In layout.xml file the attribute format-number of the element comment or in the layout editor associated with the image element, the image numbering is specified in a text as the following examples show:

• "@#" gives the numbering "1", "2", "3" ...
• "(@#/%+)" gives the numbering "(1/6)", "(2/6)", "(3/6)" ...
• "@#-%+ :" gives the numbering "1-6 :", "2-6 :", "3-6 :" ...

To have some numbering samples you can take a look to the Xiss web examples. In these examples some different formats are used.

5.7 Page decoration

Since 0.8 version.

In the layout definition of HTML page ( layout.xml file) it is possible to declare some decoration elements. The decoration elements define a frame around the slide show part in HTML pages. These elements are: header, footer, left and right margin. In a layout.xml file they correspond respectively to the following XML tags : <header>, <footer>, <left-margin> and <right-margin>. The location of these elements in a HTML page is the following:

            --------------------------------------
            |                header              |
            |------------------------------------|
            |  l   |                     |   r   |
            |  e   |                     |   i   |
            |  f   |                     |   g   |
            |  t   |                     |   h   |
            |      |     slide show      |   t   |
            |  m   |                     |       |
            |  a   |                     |   m   |
            |  r   |        part         |   a   |
            |  g   |                     |   r   |
            |  i   |                     |   g   |
            |  n   |                     |   i   |
            |  g   |                     |   n   |
            |      |                     |   g   |
            |------------------------------------|
            |               footer               |
            --------------------------------------

Each of these elements enables to add HTML code. The HTML code must be inside the beginning and the end tag of a decoration element then it is rewrite in the HTML pages of the slide show inside a corresponding HTML division element (div). These elements can be edited with the layout editor.

To have a use case of the page decoration you can take a look at the example features/page-decoration . Specially you can open and read the layout.xml files.

In the HTML code in the layout it is possible to add specific Xiss web elements. These predefined elements are:

• <link-to-home/>: generate a link to the root of the slide show where there is perhaps a home page (index.html). The link is generated with the associated CSS class home (see component.css). With this tag two optional attributes are possible:
  • text: text to display for the link,
  • title: title of the generated link.
• <title/>: generate a title text with the value of the title in the info element slideshow.xml file (if no title is found slide show name is used). The title text is also used for the title of the HTML page (plus the current image name);
• <description/>: generate a text with the value of description in the info element slideshow.xml file (if no description is found, title value is used and in if no title exists, slide show name is used);
• <built-with type="normal"/>: generate a "built with xiss-web" icon. The value of the attribute type can be 'normal' or 'negative'. The attribute is optional and the default value is normal;
• <copyright/>: generate a copyright text with the following values in properties file xissweb.properties:
  • copyright.years: one year or year interval,
  • copyright.organization: organization concerned.

5.8 Slide show links

Since 0.7 version, updated in version 1.6.0.

Slide shows can be linked together. These links allow an oriented navigation between slide shows with two link types: previous and next. These links are specified in slideshow.xml files and they are displayed in the navigation bar.

After a sow process run you can edit the generated slideshow.xml files in order to add links:

• previous link: <previous-show href="relative path to a slide show" text="text to be displayed"/>
• next link: <next-show href="relative path to a slide show" text="text to be displayed"/>

Tow ways are possible to manage links:

• with the slide show content editor, links can be inserted after the info element.
• with a dedicated dialog box witch enables links creation and edition between selected slideshows.

To be displayed a link; the navigation-bar element (in the layout file) must have the corresponding link component. The link components are the following:

• previous link: <previous/>
• next link: <next/>

A link is displayed only if there is a corresponding link in the slide show.xml file.

The example examples\features\links uses links between slideshows.

5.9 Navigation type

Since 0.9.1 version, updated in 1.5.0 and 1.6.0 versions.

A navigation bar allows stepping forward and backward through images of a slide show. It allows also going to a previous or a next slide show (see slide show links feature above). This navigation bar is customizable to change his behavior (see layout editor). Five types of navigation exist. A navigation type can be specified in a layout.xml file in the navigation-bar element with the type attribute. The possible values of attribute are:

• basic: navigation beginning with the first image and stopping with the last image (the default if nothing is specified).
• circular: the circular navigation allows to step backward from the first image to the last image and to step forward from the last image to the first image.
• previous: this type allows (with the backward arrow of the navigation bar) the navigation from the first image of the current slide show to the last image of a previous slide show if a link exists.
• next: this type allows (with the forward arrow of the navigation bar) the navigation from the last image of the current slide show to the first image of the next slide show if a link existes.
• links: this type combine the previous and the next type.

Several navigation bars are possible for one slide show. For have behavior coherence between the navigation bars, all bars in a layout must have the same type. (The layout editor garentees that.)

This feature is illustrated by three examples:

• projet2-sport-mode : uses the circular type;
• features/links : uses the links type.
• features/metadata : uses links with animated slide shows.

After the generation of the examples slide show you can change the navigation type in layout.xml file, rebuild slide show and see the changes.

5.10 Sections

Since 0.7 version.

This part explains how to use sections in a slide show. It offers the possibility to organize images in one slide show for thumbnails presentation.

A section is a subdivision of thumbnails in a slide show. By default one anonymous section (without a title then not displayed) is created by the sow process. After the sow process you can edit the content slide show file ( slideshow.xml ) to add sections and move images from one section to another with a dedicated editor of the Xiss web's GUI.

See an example of this feature..

5.11 Web or not

Since 0.6 version.

You can build your entire web site in the src directory. You can put in it all your own HTML pages and resources, except for the slide show parts managed by Xiss web. The example features/personal-pages illustrates this possibility. See also Customizable local index for the particular case of index.html pages.

The sow process doesn't take care of the non slide show parts. Your complete web site is obtained during the build process: your HTML pages are copied in the build directory and in the same time the slide show pages are generated in it. You can put links to slide show pages in your HTML pages. These links will be working after the build process in the build directory.

It is possible to let the generated pages in directories on a local disk (instead of internet) and consult locally the slide show with a web browser. Or the pages can be stored on an external storage (like a CDROM) and browsed with a web browser.

The slideshow.final.location property in slideshow.properties file defines the type of generation: web or file system. The difference of generation concerns only some the HTML links:

• Web generation: the links to index.html pages are implicit by exploiting the web server default page mechanism.
• File generation: all the links to index.html pages are explicit because the file systems haven't mechanism like web servers.

5.12 Reverser

Since 0.6 version

Xiss web can reverse existing slide shows in HTML even if they are not built by Xiss web. The reversible slide shows should not be to far from Xiss web HTML generation. The minimum is a slide show with a directory hierarchy of images with the same directory oriented image organization and; for more possibilities (information extraction) one HTML page per large image displayed, all pages with the same structure.

The reverser is the sow process launch with the 'reverse' mode. All the parameters related to the reverse process are in a section of the xissweb.properties file.

The reverser process copies in the src directory all the images (without the thumbnails) following the directory hierarchy from the source and generates the slideshow.xml files in the same time. The slideshow.xml files can include information extracted from the original HTML pages. The reverse process visits by default all directories in the source to reverse. It is possible to exclude unwanted directories. The reverse process copies also other file than images. For example, it copies HTML files found outside image repository. It is possible to define a filter to exclude file to the copy. All of these parameters are stored in project's properties.

After the inversion done you can add some layouts, edit some slideshow.xml files as it is describe in previous parts. It is possible to reverse and build the slide show in one step with the command xiss-web -reverse.

The features/reverse example reverses the slide show generated in the projet1-mode-sport example.

6 User manual

6.1 Xiss web's main frame overveiw

Since 0.10.0 version, updated in 1.7.0 version.

6.1.1 Launch Xiss web

Xiss web and its GUI are the xiss-web.jar executable file in the Xiss web's installation directory. To launch Xiss web you have just to double click on this file (or run the command java -jar xiss-web.jar). Scripts are also available to launch Xiss web:

• Windows: xiss-web.bat and a shortcut xiss-web.
• Mac OS X: xiss-web-mac.sh.
• Linux: xiss-web.sh.

The main frame of Xiss web is then displayed:

The GUI opens the last project used. On the image above it's the projet2-sport-mode example.

The main frame is composed in four parts:

1. An action part on the top which contains also the project localization.
2. A tree view on the left. This view displays the slide show organization of a project.
3. An area of editors on the right. All the files managed by Xiss web can be edited: slideshow.properties, slideshow.xml , layout.xml , skin.xml . Xiss web allows also the edition of text files (txt, html, xml, JavaScript, php) and the display if images.

6.1.2 File tree view

The file organization displayed is the one on the file system. Xiss web distinguishes tree kinds of file:

1. File managed by Xiss web: slide show content, layout, skin, etc. These files are editable with specific editor and are used to build the final result.
2. Slide show image file: the purpose of slide shows. It doesn't include the images outside slide shows as it is specified by the project's properties.
3. All other file: files that don't contribute in the creation of the final result, but are copied in the built result to be integrated in it (see example using personal files). The text files can be edited with Xiss web's text editor.

The file tree view can filter the two last kinds of file above (filters accessible in the root's popup menu): show or not the images in slide show folders, show or not all other files. By default image files in slide show and other files are hidden.

The file tree view provides file management like drag and drop, copy/cut/paste, deletion, creation. This management takes care of the specific Xiss web files and of its organization in a project. The drag and drop, and the copy/cut/paste can be started from the file manager of the current platform (Windows's explorer or MacOS X's finder). If some actions are done outside the Xiss web's GUI, the view can be re-synchronized with the file system (refresh menu item in the root's popup menu).

6.1.3 Action part

In addition to the menu bar, the action area is composed by a line of buttons organized in two groups. These two groups correspond to the two main steps to create slide shows: the first one is an initialization step and the second one is the build step. These actions are also availalbe in the Project menu.

The actions in this part are also available in popup menu in the file tree view or from the slide show content editor.

6.2 New project

Since version 1.1.2, enhance in version 1.2.2.

Two kinds of project can be creates from specific GUI: basic or using a repository of original images. These two kinds choice are available in the main file menu.

6.2.1 New basic project

The selection of the New basic project... item in the file menu opens the dialog box here after.

It helps you to select the location of your project (the project's root directory). Your new project must contain already a hierarchy of images, as it's explained in the "Create your own slide show" section. Click on the button at the right of the project location field or on the element "Choose a location..." in the main area. It opens a file chooser. Browse directories to find the location of your project. You can also drag and drop a directory from a file explorer of the current platform in the text field 'Location'.

First, the chosen location is analyzed to check the image organization.

This analyze can be stopped by a click on the red square. This cancels your choice for the new project.

If the image organization isn't valid, the dialog box indicates some way to resolve the problem by some options displayed. Once one option selected the OK button is enabled, then the creation of the project becomes possible.

The two kinds of manageable problem are the following:

• hierarchy of images isn't valid,
• unable to identify a unique directory as the "src" directory.

To resolve these problems options are suggested, depending on the current problem:

• creation of a "src" directory,
• move hierarchy of images in a "src" directory,
• set the root directory of image hierarchy to be the "src" directory,
• use the chosen location as the location of project using a original images,
• create a new project using original images with the chosen location as the repository of original images.

If the proposed solutions don't correspond to the way you want to solve the current problem, or if a special case isn't take into account, you have the possibility to force the project creation (with "Any case, create it!" button). It ignores the eventual selected option and creates you new project. Then, you have to manage your case with the project's properties after it creation.

If a problem occurs, even solving options are proposed, you have always the possibility to select another project location.

The validation on the OK button creates effectively the new project or performs action corresponding to the selected option. The two last options listed above open the dialog box to create a project using a repository of images. The project creation corresponds to put the xissweb.properties file in the root directory of the project. When the project is created, it's opened in the Xiss web's GUI. It opens also the properties editor to let you to finish the project configuration by changing the parameters you want.

6.2.2 New project using repository of original images

The item "New project using a repository..." in the file menu opens a dialog box dedicated to the creation of a new project associated with a repository of original images.

You must to choose two directories:

• one for the location the project. This location doesn't have to contain the images to be used to construct slide show. It can be an empty directory.
• one for the repository of original images. This location must contain the images organized in a hierarchy of directories corresponding to slide shows.

These two locations have to be choosing from a file selector activated from button at the right side of corresponding field or from corresponding node in the tree area (see the figure above). The two locations can be drag and dropped from a file explorer of the current platform in the respective text field.

Each location is analyzed, but only the result of the repository of original images is displayed. Because, this location contains the image organization for slide shows. If a problem is detected, an explanation is displayed. The analyses can be stopped just like in case of the basic project. Instead of basic project, here no option can help you, because several various solutions exist. So, you have to solve yourself the problems.

The OK button is enabled if the two locations are chosen and the image organization in the repository is valid. A click on the OK button creates the new project and opens it in the Xiss web's GUI. It opens the properties editor on the original repository section. It lets you to change the parameters you want to finish the project configuration.

6.2.3 Image preview

In the two dialog boxes to create a new project, the button / shows or hides a window to display image preview. When a location is chosen and his content displayed in the tree view area, you can browse the directories and display the images you find by a simple selection. See Image preview section for more details.

6.3 Open a project

Enhanced in version 1.2.0, 1.2.2 and 1.6.0.

Opening a new project close the current project. This action doesn't cause any damage to the current project.

6.3.1 Select a project

To open a project, select the Open project... item in the File menu.

This action opens a file chooser:

You can navigate trough directories to find the root directory of your project. The directory selected must be a directory of an existing Xiss web project. A project created with new project dialog box or by coping yourself xissweb.properties file in a project directory.

You can also simply drag and drop the root directory of you project from a file explorer of the current platform in the text field "Current project" of Xiss web's main window.

If the selected directory doesn't correspond to a Xiss web project one, then the following message is displayed:

It is possible to create a new project with the location selected: a simple project or a project with the location as a repository of original images.

6.3.2 Recent project

The recent projects are accessible in the file menu. It is easy to re-open an already opened project. The number of available recent projects is editable in the Xis web preferences.

6.3.3 Opening

The Xiss web's main frame initializes itself in accordance to the new current project and its properties. Then Xiss web is ready to process your project.

In particular, the GUI take into account the option repository and reverse as it is shown in the two figures below.

Setting the repository option while opening in accordance to the displayed properties.

Setting the 'reverse' option while opening in accordance to the displayed properties.

6.4 Initialization (sow)

Here we describe the GUI possibilities. To known what the sow process do; see the purpose of the sow process.

To run this process you have just to click on the button or select the 'Sow (initialize)... (Ctrl-I)' item in the 'Project' menu. It launches the sow process. The process progress is displayed in the window below.

During the process you can pause, restart and stop it. If a large image is processed (for example a resize of a large image during his importation, see Import from image repository section), an animated gear appears during this long process.

When the process is done (or stopped), some statistics are displayed.

A check box indicates if the window should be closed when the process is done or not. This parameter is managed as a user preference.

It is possible to run the sow process for one slide show, directely form the file tree view by opening a popup menu on a slide show folder.

The 'reverse' and 'repository' modes are available as they are with the xiss-sow command.

The 'repository' mode is accessible if a repository of original images is set in the current project's properties. The repository is visible in the file tree view. Then a radio button appears and it enables the selection of the 'repository' mode. Then, the sow process analyses images in the repository of original images and imports it if the import.image project's property is set to true.

The 'reverse' mode is accessible if a location to reverse is set in the current project's properties. Then a radio button reverse appears and it enables the selection of the 'reverse' mode. Then, the sow process analyses the images and HTML pages in the reverse location and initializes the images and slide shows information.

If the current option isn't in accordance to he project's properties, the sow button is disabled. The location processed by the sow command is overloaded with the icon, as it's shown in the figures above.

The equivalent of the -select option of the sow command exists here. You have just to select some directories in the tree view of the project (directories with check box). The next image shows the sport directory selected. The sow process will work on the sport directory and on his two gymnastique and handball subdirectories.

It is possible to select directories in a repository of original images to import only the wanted images. If a repository of originals image is specified in the project's properties, then it appears the file tree view. Directories in the repository are also selectable. The selection in repository is possible only if the 'repository' mode is on, by selecting the repository symbol near the swo button. The two images here after show directories selected in the repository and, without the 'repository' mode, no directory is selectable.

6.5 Generate slide show (build)

To know more about the build process, see its purpose here.

To run this process you have just to click on the button or the 'Build... (Ctrl-B)' item the 'Project' menu. If no sow process has ever been done on the project, the button is disabled. You have to run a sow process before running the build process.

This button launches the build process. The process progress is displayed in the window below.

During the process you can pause, restart and stop it. When the process is finished, some statistics are displayed.

Each visited directory is printed out with some characters: a '=' corresponds to an image copy; a '+' corresponds to a thumbnails creation; a '.' corresponds to an HTML page generation; and a 'i' corresponds to a local index creation. The trace like 's(simple)' correspond to the copy of a skin in the destination and the text in brackets is the skin name. The 'i' at the end of the directories visit corresponds to the creation of the top level index page (global index). Following the directories visit some statistics are printed.

A check box indicates if the window should be closed when the process is done or not. This parameter is managed as a user preference.

An equivalent of the -select argument of the build command exist here. You have just to select some directories in the tree view of the project (the selection actions with SHIFT and CTRL are possible). If files are selected, they directories will be in the final selection. Each directory is processed recursively. The next image shows the sport directory selected. The sow process will work on the sport directory and on his two gymnastique and handball subdirectories.

The built slide shows can be deleted with the button. If a election exists in the tree view, only selected directories are deleted. The deletion of one directory deletes his content and his complete sub-hierarchy. The build process doesn't clean the unused files. A deletion is needed before running a build, after some tests (like testing different skins) or after image removing or image reorganization in src directory. Then you obtain only useful generated files.

6.6 Show the generated slide show

The generated slide shows can be displayed in a web browser directly from the GUI. To visualize the slides show of the current project, click on the button. Note, if the slide show generation haven't be done, the button is disabled. To enable this button, process a build of the slide show.

By default the web browser is set to Internet Explorer on windows platform: C:\Program Files\Internet Explorer\IEXPLORE.EXE. You can set your favorite web browser or change the link to Internet Explorer on another platform. To set a web browser, edit the preferences and change the value of the Defaults/Web browser element.

6.7 Edition capability

Since version 0.10.3, update in 1.7.0 version.

The most slide show project's files displayed in the tree view can be edited with the Xiss web. The files managed by Xiss web have specific editors: project's properties, user preferences, slide show content, layout and skin. A basic text editor can be used for slideshox.xml, layout.xml, skins and the following files: txt, html, css, xml, js, php. Image file in the tree view can be shown in an editor but it cannot be modified. Here we describe the common edition functionalities.

To open an editor on a file, click right on a file in the tree view to open the file menu, then choose the Open item. Some file can be edited by several editors, then a Open with sub menu is available to choose an editor. In this case the Open item opens the file on the default editor (the first one in the Open with sub menu).

Then the editor is displayed and associated with a tab. Several files can be opened at the same time. A double click on a file in the tree view opens it in an editor if it's not or selects his editor. A selected (or a current) editor is the one with the blue tab and with a close button always displayed.

When a file is opened in an editor you can made changes in his content. When the content of a file in an editor is modified, a star (*) is displayed in the tab with the file name (the current file on the figure above). The possible common actions are:

• Save: save the changes in the file concerned by the edition.
• Cancel: ignore all changes and reset the editor content with the concerned file by the edition.
• Close: close the editor and eventually ask if you want to save the changes.

These actions are available from: main menu file, menu file in tree view, and tab in the edition area. For Xiss web's specific files some extra actions are possible. These actions are depending on the file type.

• main file menu: save changes for the current editor, save all files, cancel the changes for the current editor, close the current editor, close all editors.
• tree view menu: save, cancel, close on a selected file.
• tab menu: save, cancel, close, close others (relatively to the current editor), close all editors.

On the figure above, the menu associated to slide show present slide show specific extra actions.

Short cuts are available for some actions: by example on Windows, Ctrl-S to save current file. In an editor tab the button can directly close the corresponding editor.

The close action asks a confirmation if a file has changes.

During edition the text is processed to check its conformance to a grammar (W3C XML Schema) if one is wknown, or simply to XML syntax. If errors are detected a message is displayed and the file's icon changed.

To obtain information about errors, a window with errors description is displayed (see bellow). This window can be opened with a click on the error message in the main Xiss web's GUI.

6.8 Project properties editor

Since 0.10.0 version, enhanced in 0.10.3 version.

The properties of a project can be edited with a specific editor. The project's properties can be opened directly from the Edit the project's properties item in the Options menu. It can be opened like another file as it's explained in the Edition capability part.

Then the properties editor is displayed. The image below presents the Properties editor. It contains to main parts:

• in the left side a tree of all properties organized by categories and,
• in the right side an area of edition for a selected property with a short explanation text.

In the image below, the 'thumbnails directory' property is selected and ready to be edited on the edition area.

The edited properties are un bold. When the properties have saved, the changes are applied on the project.

See the Edition capability for details about edition actions.

You have also the possibility to set all the default values in your project's properties by a click on the Set to default values button. The default values are the one set by Xiss web for any new project.

6.9 Slide show content editor (slideshow.xml)

Since version 0.10.4 enhanced in 1.1.0, 1.1.2, 1.2.0, 1.3.0, 1.3.2, 1.3.3, 1.3.6 and 1.5.0 version.

6.9.1 General presentation

A graphical editor enables the following manual manipulations on slideshow.xml files:

• text: edition of element title or image comment.
• link: add links with another slide show.
• image organization: management of sections, moving images.

The slideshow.xml editor presents the file content in tree view. It enables also the display of a selected image:

• A property value table presents image's metadata, if they exist.
• An area displays the image itself with the image preview functionality.
• Below the image display area, a text editor enables the direct edition of image comment. Its also enables the edition of the other texts in a slide show content, like section name, slide show title or description.

In the tree view, the editable elements are the following:

• : the root element displaying the slide show's name.
• : slide show's information: title and description.
• : a previous link to another slide show.
• : a next link to another slide show.
• : a section of images.
• image: represented by a thumbnail like the one is generated for the HTML pages (same size and shape). With the thumbnail the information on the corresponding main image (file name, number in the slide show, metadata indicator ([P] digital photo, [F] film, [C] digital creation, [U] unknown), size) and the image comment are displayed.

Missing images are represented by the default image .

The texts associated with element are editable. Two ways are available for the edition of text:

1. Directly in the text editor below the image display area. This editor is always enabled (except if an element in the tree view is in edition mode).
2. From an element on the tree view: the edition mod is started by pressing the ENTER key. The edition is stopped by pressing the ENTER or ESCAPE key, or by selecting another element. The illustration here after presents a image text comment in edition.

It is possible to edit all the image comments by using only the key board. Select the first image, and then press ENTER to edit his comment. When the edition is done (after a type on ENTER or ESCAPE), use down arrow on the key board to select the next image, and then press ENTER again to edit the comment of the current image. Then repeat these actions until you reach the last image.

The text editor below the image area has a larger area than the edition area in the tree view. It's a more comfortable way for text edition. For comment and description it is possible to include HTML elements when the HTML mode is selected (HTML radio button). It enables, by example, hypertext link in image comment (see the example features/html-comment ). The HTML mode is associated with a text. It means that, in one slide show a comment for one image can be in HTML mode and in plain text for another image. In HTML mode, a right click in the editor opens a menu to insert quickly HTML element. If a piece of text is selected, the inserted element encloses it (with a start and end tag). The HTML here must be consistent with the XML syntax (each element must be closed).

On each element a popup menu is available, they propose the following actions:

• root element: add links (previous and next), add section (at the end)
• info element: edit title, edit description
• link element: change slide show pointed, edit title, remove, (for the links management see the next section)
• section: edit title, insert a new section, remove (if empty)
• image in three parts:
  1. image edition part: edit comment, reset the comment to the default as the sow process does it (from the image metadata or in the project's properties), and moving image in a section.
  2. image type part: set digital [P], film [F], digital creation [C] or unknown [U] image type, restore the metadata from the Exif data.
  3. action part: rebuild the corresponding HTML page, show the corresponding HTML page in a web browser (if it already generated).

6.9.2 Metadata edition

The images of digital type ([P]) are images coming from a digital camera. The sow process detects automatically this type of image and extracts the corresponding metadata. If an image isn't digital type, Xiss web set the unknown type ([U]) and tries to extract date, time and GPS information from the Exif data. Two more image types exist:

• [F] film: image coming from a digitalization of a photographic film photo,
• [C] digital creation: image coming from a digital creation or a digital processing of images.

It is always possible to change the type of an image by setting one of the 3 other possible types. At each type change, Xiss web extracts the corresponding information from the Exif data. In the table view presenting the image metadata, all the values are editable. It also possible to restore the default values contained in the image Exif data.

The values edited in the metadata table are free (ie no control is made on the entry), except for the latitude and longitude values. These two properties are processed to locate images on a map for the Google Maps local index. The other values are just displayed for information purpose. It's to your responsibility to respect (or not) the sense of each metadata property.

Two formats are available for the latitude and the longitude edition:

• latitude:
  1. [N|S] DD MM SS.SSSS with DD in [0, 90], MM in [0, 59] and SS.SSSS in [0, 60[, by example N 45 33 12.446521889
  2. (-)DD.DDDD in [-90, 90], by example 45.55345736719138889
• longitude:
  1. [E|W] DDD MM SS.SSSS with DDD in [0, 180], MM in [0, 59] and SS.SSSS in [0, 60[, by example W 3 55 41.976881
  2. (-)DD.DDDD in [-180, 180], by example -3.9283269113888889

When a latitude or a longitude is given in the second format, it is translated in the first format.

If a set of images of the same type are selected, then the common metadata is displays in the property value table. The properties with different values are displayed in italic and no value is displayed, as it's showed here after.

The edition is possible on a multiple selection of images of the same type. The edited values are set on each image in the selection. Then, if all images have common a property value it is possible to set for all of these by the edition of only one value.

6.9.3 Moving images

Drag and drop of images and sections is available to organize images in a slide show. Each drag and drop action corresponds of image or section move. More than one image or section can be moved by one drag and drop. A selection of images can be dropped on a section, and then it moves the images at the first position in the section. A selection of images can be dropped on another image, and then it moves the images after the target image. The behavior for section is similar (associated images with a section are moved with the section): a section can be dropped on the root element or on another section. A drag and drop action needs selected elements. The elements can be selected/unselected with simple click and with CTRL-click and SHIFT-click.

It is also possible to move one image from a section to another from its popup menu.

6.9.4 Actions

Form this editor you have a direct access at the build command to build the complete HTML pages corresponding to the current slide show or to rebuild only one HTML page for one image. It is also possible to see the slide show pages by the equivalent of the show command. This is useful when you made some changes (by example, comment editions) to generate quickly the slide show taking in account your changes, and see the result. The actions on one image are accessible by a popup menu on it or if it is selected by two short cuts: 'B' to build and 'S' to show. The actions on the whole slide show are accessible on the pop up menu on the editor's tab or by short cuts: 'CTRL-B' to build the complete slide show and 'ATL-S' to show the result.

6.10 Links between slide show

Since 0.10.7 version, updated in 1.6.0 version.

This section presents how to create, edit and delete easily links between slide shows and how to check and fix inconsistencies in sets of linked slide shows.

6.10.1 Links management

A dialog box helps the management of links between slide shows. To open this dialog, first select a set of slide shows in the main GUI's file tree. Slide shows can be directly selected or by a selection of directories. The selection of a directory selects all the slide shows contained by the sub directories hierarchy of the selection. If more than one slide show is selected then the GUI's Manage links... button becomes enabled. (The links management can be done after the initial sow process.) This button opens the links management dialog box, here after.

A tree view presents the set of slide shows selected and the eventual existent links. By default the slide shows are sorted in alphabetic order. The initial order can be changed by drag and drop actions. Only node representing slide show can be moved by drag and drop. A drop of a slide show on a node inserts the slide show after the target node. A type on 'A' key sorts slide shows to alphabetic order, and a type on 'Z' key sorts slide shows to alphabetic inverse order. The drag and drop and sort actions can be done at any time.

The dialog box's right hand side contains the links actions. These actions offer to create the kind of links wanted. The figure bellow presents the result after a click on the Next only button.

The Circular option enables to link together the first and the last slide shows. A click on the button Next only with this option selected gives the following result.

The links can be created one by one, using popup menu on the link and slide show elements in the tree view. These menus enable to perform actions of creation or deletion in accordance to the current context. Le following figure shows these two kinds of menu.

The text representing each link can be edited directly on the tree. First, select a link node, and then type ENTER to enter in the edit mode. Another type on ENTER, a type on ESCAPE or the selection of another node, finishes the edit mode.

6.10.2 Links check

A set of linked slide shows is inconsistent, if some slide shows depend on a layout without animation and, if others slide shows in the same set depend on a layout with animation. The sets of linked slide shows can be visualized by the Consult links menu item in the Project menu.

A set of linked slide shows is presented by the layout on which each slide show depends on. In the dialog box above, only one set of linked slide shows is presented (element in the tree). In this set, the first slide show depends on one layout, and the two other slide shows depend on another layout. The names of slide show and layout correspond to the names of they directory. Two different icons present layout: for layout without animation and for layout with animation. On the figure above, all the layouts are consistent (same type, here without animation).

If a set of linked slide show is inconsistent, then a warning message is displayed and the set element in the tree view is tagged with a warning icon: . The representation of the sets of linked slide shows can be opened directly from the warning message. The corresponding menu item in the Project menu is also tagged by a warning icon.

On the example above, the set is inconsistent because the first slide show depends on a layout with animation and the others slide shows depend on a layout without slide show.

On each element in the representation of a set of linked slide shows, an action is possible via a contextual menu:

• Set element or : open the links management dialog box for this set.
• Layout element or : open the layout editor.
• Slide show element : open slide show content editor.

These actions above allow editing quickly links between slide shows in a same set or a layout associated to slide show, and then fix eventually some problems detected. Two ways are possible to fix an inconsistent set: edit layout add or remove animation to obtain all layouts coherent; remove some links to get subsets consistent.

If a set of selected slide shows is inconsistent to form a set of linked slide shows, then a warning message is displayed and a warning icon is displayed on the Manage link button and menu item in Project menu. It doesn't disable the creation of links, it only inform on a potential problem for the HTML pages generation.

A click on the warning message opens the representation of the set of selected slide shows like a set of linked slide show.

6.11 Layout editor (layout.xml)

Since 0.10.5 version updated in 1.1.0, 1.2.0, 1.3.0, 1.3.5, 1.3.6, 1.5.0, 1.6.0, 1.6.6, 1.6.7 et 1.7.0 versions.

Presentation

A graphical editor dedicated to layout.xml files enables edition of all layout elements:

• skin information: add, remove, edit
• animation information: add, remove, edit
• thumbnails information: edition of thumbnails characteristic
• page decoration: add, remove, edit
• arrangement and his components (thumbnails, image area and navigation bar): add, remove, edit, move

The layout editor has three parts:

1. top left: a tree view of layout elements
2. bottom left: a graphical rendering to visualize the relative position of components present in generated HTML page
3. right: an editor area to edit the properties of a selected element

The editable elements and they properties are the following:

• represents the layout it self: a comment and page width
• name and location of the skin associated with the layout (see also skin editor)
• kind of transition animation between images, control panel and automation.
• global information about thumbnails: size, reduction quality and shape.
• , , , : page decoration elements respectively header, left margin, right margin and footer. They content HTML code.
• and are vertical and horizontal arrangement: width and orientation
• thumbnails component: number of range (line or column, depends on arrangement)
• navigation bar component: type of navigation and his elements: previous slide show, backward, init, forward and next slide show.
• image area component: size of the area, comment position, numbering format and, metadata elements to display (one tab per image type: digital, film, digital creation).
• image location on map: optional element to enable the show the location of one image on Google Maps directly from the image display.
• local index element: optional element can be standard or Google Maps (see section customizable local index).

The HTML text for page decoration must be consistent with the XML syntax (each element must be closed). In the text editor area, a right click opens a menu to insert quickly HTML element. If a piece of text is selected, the inserted element encloses it (with a start and end tag).

On each element (except thumbnails information) a popup menu is available and presents the possible actions. This menu is contextual and authorizes only the permit actions at a given time. The popup menus are accessible on element in the tree view and on elements in the graphical view. The images here after show the main image area popup menu in the tree view and in the graphical view.

Add and remove actions on element depends on the element type and his possible occurrence:

• skin: at most one
• animation: at most one
• thumbnails information: exactly one
• page decoration: at most one per type: header, left and right margin, footer
• arrangement: at least one
• thumbnails: many in many arrangements
• navigation bar: zero, one or more in arrangements
• image area: at most one and in an arrangement
• image location on map: at most one attached to image area
• local index: at most one attached to image area

Creation

Layout files can be created by copy and past availale on the file tree view, or from templates. A layout can be also deleted. The following figure shows the menus about layout files management.

Drag and drop

In arrangement, the elements can be organized by drag and drop actions. An arrangement is a container of components: image area, navigation bar, thumbnails and arrangement. Arrangement is a container and also a component. A component can be moved inside its arrangement or outside to another arrangement. A component dropped on an arrangement, moves the component from the initial location to the first position in the target arrangement. A component dropped on a non arrangement component, moves the component from the initial location to the position after the target component's location. An arrangement drag and dropped is moved with its content (its components). The components can be only drag and drop one by one.

For example: the first of the images bellow presents a layout before a drag and drop. The second image presents the result of the drag and drop of the navigation bar on the horizontal arrangement. As result, the navigation bar is in another arrangement and it's at the first position. The third image shows the result of the drop of the navigation bar on the image area component. As result, the navigation bar is in the same arrangement and inserted after the image area.

Google Maps

The elements using Google maps (Google Maps local index and image location on map) enable the edition of parameters to customize Google Maps in slide show. The figure, here after, presents the Google Maps edition part.

Each choice act on parameters is displayed on the Google Maps representation in the center. Then you have a preview of Google Maps as it will be in the HTML pages.

6.12 Simple skin editor

Since 0.10.8 version, enhance and updated in 1.3.0 and 1.6.5 version.

The skin editor enables the definition of new simple skins in a slide show project (see Look management part). The skin is qualified as simple because the editor uses restricted capabilities of CSS (Cascading Style Sheet). An editable skin is based on a template similar to the "simple" skin in the default skins of Xiss web.

To define a new skin, first add a skin from a template to your project. A right click on the file tree view opens the dedicated popup menu (click on background or on project root node or "skins" node).

Then choose a name for the new skin. The name must be a directory valid name.

Then the new skin is added in a directory "skins" (newly created if it doesn't exist). The new skin is editable like another slide show file.

The editor presents skin as follow (here the skin associated with the projet2-sport-mode example).

The left part corresponds to the editable part of his parameters. And the right part visualizes a graphical rendering dynamically updated after each parameter change in the left part

6.12.1 Rendering part.

This part is a preview of all possible elements that can be displayed in a slide show (event if some elements like main image and local index are never displayed at the same time). The rendering has its own layout and doesn't take into account a layout of a slide show layout to organize the presentation of the elements.

The rendering of the local index area corresponds of the rendering of the standard local index (see Customizable local index). The text displayed in it has the text comment look. For the Google Maps local index, this area is filled by a map (not rendering here) and, only the border is visible.

6.12.2 Editable part

Thee ditable parameters are organized in tree sections:

1. Colors: the global colors used by the generated CSS classes.
2. Page: parameters relative to the common elements: text and links.
3. Components: parameters of visible components corresponding to some Xiss web elements:
   • image area: comment, metadata, local index, animation (wait screen);
   • thumbnails;
   • copyright.

All the parameters have standard behavior to edit them, except for color and font.

6.12.2.1 Color

A double click on a color opens a color chooser to select a new wanted color.

A simple click on a color selects it. On the figure here after, the first color on the second row is in selected state. On a selected color it is possible to;

• Copy and past: a CTRL-C and CTRL-V commands transfer a selected color to another selected color.
• Brighter and darker: type on "B" key changes the selected color to a brighter color and type on "D" key changes the selected color to a darker color.

6.12.2.2 Font

To change a font name a simple click on it opens a font chooser. This dialog box presents only font family (like "Times New Roman") organized by generic family (like "serif").

The names in italic correspond to font without equivalent on the current platform, or unknown in the Java environment. On top of the dialog box a sample text is displayed in accordance to the selection as a preview. The bottom of the dialog shows the current font family name with his generic family.

6.13 Open an example project

Updated in 1.3.1 version.

To open an example project, open the help menu , then choose the Examples item to open the sub-menu of all available examples. In this list select the wanted example. It opens the corresponding project as another one.

If the examples are disabled in the menu is disabled as the it's showed bellow, you have to install the Xiss web examples in the directory (%XISSWEB_HOME%/examples).

The "Install examples..." menu item installs the examples automatically. It opens the dialog box here after. The installation selects the examples version corresponding to the Xiss web version. The installation is done by uploading examples archive (the default) or by the use of an archive already uploaded. If the local archive is chosen, the archive can be drag and dropped in the text field area or selected with a file chooser (button "...").

6.14 Image preview

Image preview is available from the new project dialog box, from the content slide show editor and, the image display from the file tree view. The image is displayed in an area with two possible modes: full size or size adapted at the area. It is possible to switch between these two modes. A simple click in the image area display shows a menu to set the full size mode if the image is in adapted size mode or to set the adapted size mode if the image is in the full size mode. The following figures illustrate the two modes and the menu of each one.

6.15 Solve problems

When a problem occurs, a description message is displayed. This text explains the origin of the problem, as shows the following image. A symbol is displayed with the text. The same symbol can be displayed with the origin element of the problem.

It is possible to obtain a help to solve problem. You have just to click on the problem text or on a symbol . A menu is displayed. It suggests some actions to solve problem. An action can be directly fired from this menu.

6.16 Preferences edition

Since version 0.10.6, enhanced in 1.0.4.

Some user preferences can be directly edited. The editable user preferences are parameters directly accessible by the user. For example: a check box representing a parameter about a GUI behavior. Window size and position are managed as user preferences but aren't directly editable. The preference of the window position is changed by moving the window, not by edition of his coordinates.

The preferences are project independent. For each slide show project the same preferences are used. To edit the preferences choose the Edit preferences item in the Options menu.

It open the preferences editor, see bellow.

A simple click on an element starts his edition.

If the current value is not equal to the default, a button enables to set the default value. The selection of a new value ends the edition. To abort the current edition, click on another preference or press ENTER or ESCAPE.

The figure just above presents an element in edition with the current value not equals to the default. Then the button to set the default is disabled.

The web browser used to present documentation and generated HTML pages, can be directly typed in a text field or choose by a file selector. The value must be a command that open a web browser: a program ('.exe' file on Windows), a full path of a program or just the program name if his path is in the PATH variable environment. On Mac OS X it is simply then open command (the default value on this platform) that open the default web browser. The figure here after shows the web browser preference in edition.

All the preferences changes are in bold in the editor. To apply these changes, save the preferences like another document: menu save or Ctrl-S (see edition capability).

6.17 xiss-sow command line

This section describes how to run the sow (initialization) process by a command line. To know more about this process go to here.

The sow process can be run from the GUI, see Initialize the slide show content section. The command must be launched in the root directory of your slide show project. It is a directory where a src subdirectory exists and contents a directory hierarchy with images. The command is the following:

xiss-sow [-version | -legal | -reverse | -repository | -usage] [-select directories]

The -reverse argument defines the reverser mod. This mode is used for an initial sow process from an existing slide show in HTML. The parameters for the reverse mod if defined in the xissweb.properties file. All the next sow processes don't need the argument.

The -repository arguments indicates the importation of original images from a repository. The images are resized if they size is larger than a maximum size specified in the xissweb.properties file. In this file the path the repository must be indicated. Another sow process with this argument is needed if changes made in the repository are needed to be imported. The parameter import.image in the xissweb.properties indicates if the images are imported with the sow process (true value) or with the build process (false value).

The -version argument displays the Xiss web's version.

The -legal argument displays the Xiss web's copyright.

The -version argument displays the command's arguments and they usage.

The -select argument can be used to select some directories to process instead of process all the project. The directories are listed following the argument. The directories are separated with a coma and without any space. The directories processed are the given directories and they subdirectories.

The sow process produces the following trace (without -reverse or -repository):

Sow in progress...
src
   mode......
   sport
         gymnastique....
         handball....
Sow done in 00:01.292
   5  directories visited
   3  slide shows updated
   0  new slide shows
   14  images found

Each visited directory is printed out. And for a directory a dot is printed for each image read. With the -repository argument a 'o' is printed for each image resizing (importation mod). After the directory visiting process done some statistics are printed.

It uses a local xissweb.properties file if it exists or the default file in the %XISSWEB_HOME%\rsrc directory. This file contains all the parameters for the command. It comprises also the reverse parameters.

6.18 xiss-build command line

This section describes how to run the build process by a command line. To know more about this process go to here.

The sow process can be run from the GUI, see Generate the slide show section. The command must be executed in the root directory of your slide show project after at least one sow process run. The command is the following:

xiss-build [-version | -legal | -select directories | -usage]

The -select argument can be used to select some directories to process instead of process all the project. The directories are listed following the argument. The directories are separated with a coma and without any space. The directories processed are the given directories and they subdirectories.

The -version argument displays the Xiss web's version.

The -legal argument displays the Xiss web's copyright.

The -version argument displays the command's arguments and they usage.

The build process produces the following trace:

Build in progress...
s(simple)src
   mode =+=+=+=+=+=+......
   sport s(violet)
         gymnastique =+=+=+=+....
         handball =+=+=+=+....
i
Build done in 00:19.018
   5 visited directories
   2 copied skins
   14 created thumbnails
   3 updated content files
   1 created index pages
   14 created image pages

Each visited directory is printed out with some characters: a '=' corresponds to an image copy; a '+' corresponds to a thumbnails creation; a '.' corresponds to an HTML page generation; and a 'i' corresponds to a local index creation. The trace like 's(simple)' correspond to the copy of a skin in the destination and the text in brackets is the skin name. The 'i' at the end of the directories visit corresponds to the creation of the top level index page (global index). Following the directories visit some statistics are printed.

6.19 xiss-web command

The command must be executed in the root directory of a slide show project. The command is the following:

xiss-web [-reverse]

This command chains a xiss-sow and xiss-build . The argument -reverse is the argument corresponding to the sow command. It's a short cut if you want to run in sequence a sow and a build process.

7 Reference Manual

7.1 Slide show content file slideshow.xml

This part describes the XML slide show content description language that defines slideshow.xml file structure. A W3C XML Schema slideshow-content.xsd of the slide show content file grammar is available in the %XISSWEB_HOME%\rsrc\xml directory. A slide show content file lists the images and information that describes a slide show.

Find here after an example of a slideshow.xml file content as it is generated by a sow process. It is also updated by a build process adding thumbnails information and main image size if they have changed:

<?xml version="1.0" encoding="ISO-8859-1"?>
<slideshow-content name="sample">
    <info description="" title=""/>
    <images images="." thumbnails="thumbnails">
        <section title="">
            <image comment="Film picture / Photo argentique" filename="anna005-02" number="1">
                <meta-data aperture="f5,6" date="-" exposure-time="1/125 sec" film="Kodakchrome" flash="no" focal-length="70 mm" iso="ISO 400" maker="Minolta" model="XGM" type="film"/>
                <main-image extention="jpg" height="396" width="607"/>
                <thumbnail extention="jpeg" height="45" width="70"/>
            </image>
            <image filename="MaroccoMarrakechKoutoubia" number="2">
                <htmlComment>Koutoubia, Marrakech, <a href="http://e.collain.free.fr/voyage/maroc">
                        <strong>Marocco</strong>
                    </a>.</htmlComment>
                <meta-data aperture="F7,1" date="2006/03/13 10:32:00" exposure-time="1/320 sec" flash="no" focal-length="8,462 mm" latitude="N 31 37 35.40001" longitude="W 7 59 43.200073" maker="Canon" model="Canon DIGITAL IXUS 40" shutter-speed="1/317 sec" type="digital" white-balance="Auto white balance"/>
                <main-image extention="jpg" height="375" width="500"/>
                <thumbnail extention="jpeg" height="60" width="60"/>
            </image>
           (...)
        </section>
    </images>
</slideshow-content>

The content can be edited with the text editor of the Xiss web's GUI. The elements that can be edited are: info attributes, links, sections, image comments, and metadata.

7.1.1 Title

The attributes title and description in the <info> element can be edited. The information here is used to display a title (see Page decoration) and a text description. The information is also used in the meta tags of HTML pages. The attribute description can be replaced by the <htmlDescription> sub-element of <info>. <htmlDescription> can contain a text with HTML elements. In this case the HTML elements must follow the XML syntax (each HTML element must be closed).

7.1.2 Image

An image description correspond to the elements between <image> and </image>. The open element <image> contains image name, number and comment. The comment is the text attribute comment or the <htmlComment> sub-element of <image>. In this case <htmlComment> can contain a text with HTML elements. In this case the HTML elements must follow the XML syntax (each HTML element must be closed).

An optional sub element <meta-data> describes the image's metadata. The image metadata depends on the image type indicated in the type attribute. The image types and the other possible attributes depending on the type are:

• digital: maker, model, date, shutter-speed, exposure-time, aperture, iso, focal-length, flash, white-balance, latitude, longitude, altitude.
• film: maker, model, date, film, iso, exposure-time, aperture, focal-length, flash, latitude, longitude, altitude.
• digital creation: software, date, latitude, longitude, altitude.
• unknown: date, latitude, longitude, altitude.

The metadata for the kind digital is extracted from image by the sow process. The other kinds must be created manually. If not metadata exists, the <meta-data> element can be omitted.

The two elements after (<main-image> and <thumbnail>) describe the size of respectively the main image and his thumbnail. The <thumbnail> element is created during the first slide show build process. If images come from an image repository, an extra <original-image> element describes the original image.

You can change the text comment of each image (the default text is "Think to change this comment!" or the default text set in the xissweb.properties file).

7.1.3 Section

The image description elements are organized in sections. A section begins by <section> and it finishes by a </section>. A section can have a title like: <section title="Part 2">. Then the title is displayed with thumbnails. The sections management corresponds to a feature explain here.

7.1.4 Link

In the slide show content file link between a previous and a next slide show can be specified. It corresponds to a <next-show> and a <previous-show> element inserted between the <info> and the <images> elements. The effective link is set in the href attribute with the relative path to a slide show directory. (For more details see the feature slide show links.) The example here after presents one next link:

(...)
<info description="sport gymnastique" title="Sport > Gym"/>
<next-show href="../handball" text="Hand"/>
<images images="." thumbnails="thumbnails">;
(...)

7.2 Layout file layout.xml

This part describes the XML layout language that defines layout.xml file structure. A W3C XML Schema slideshow-layout.xsd of the layout file grammar is available in the %XISSWEB_HOME%\rsrc\xml directory. A layout describes the organization of the slide show components displayed on a HTML page. Predefined layouts are available in the %XISSWEB_HOME%\rsrc\layouts directory. From this directory one subdirectory contains a layout.xml file. To use one of these files you can indicate it with his directory name in the xissweb.properties file.

The default layout is the following:

<?xml version="1.0" encoding="UTF-8"?>
<slideshow-layout comment="default layout: 4 columns of thumbnails, 2 on left side and 2 on right side" page-width="980">
	<thumbnails-info size="70" unit="px" shape="rectangle" quality="high"/>
	<header>
		<div>
			<link-to-home/>
			<br/>
			<title/>
		</div>
	</header>
	<arrangement orientation="vertical" width="980">
		<navigation-bar  type="circular">
			<previous/>
			<backward/>
			<init/>
			<forward/>
			<next/>
		</navigation-bar>
		<arrangement orientation="horizontal">
			<thumbnails range="2"/>
			<image-area width="650" height="650">
				<comment position="bottom" number-format="(@#/%+)"/>
			</image-area>
			<thumbnails range="2"/>
		</arrangement>
	</arrangement>
</slideshow-layout>

A layout file can be added in a directory. The layout is applied for the directory and all his sub-directories if no other layout exists in them. Add a new layout can be done by cut/copy/past actions or by a copy of one of the three default layouts (1row, 1column, default). It is possible to edit a layout file with a dedicated editor. For more details about layout edition see the layout.xml editor section.

A layout defines the skin to use (optional), the thumbnails information, the relative organization of the displayable components and some decoration.

7.2.1 Skin

The skin element identifies the skin associated with the layout. This element is optional. If it is omitted a default skin is used or the skin specified in the xissweb.properties file. An optional attribute path indicates the location of the skin. It can be a relative path from Xiss web home directory or from a project root directory, or an absolute path. The path attribute overloads the skins path defined in a project's properties. For more details about skin see look management feature and skin editor section.

7.2.2 Animation

After the skin element if one exists, the optional animation element indicates if the transitions during the slide show navigation are animated or not.

The animation element has the following 4 attributes:

• the type of the animation: kind with the possible values: fade, superimposed fade, scroll, horizontal scroll and vertical scroll (scroll corresponds to an horizontal scroll);
• the transition speed with the attribute transition and the values: slow, medium, fast, immediat;
• the image load wait sceen size is specified in the attriute wait-screen-size with the possible values: none, image area and full screen;
• the presence of an animation control panel: attrubte control-panel (true or false).

7.2.3 Thumbnails

The thumbnails are defined by information in the attributes of thumbnails-info element:

• size: size of the largest dimension: width or height;
• unit: unit used for the size: px for absolute size in pixels, % for relative size from main image;
• shape: shape of the thumbnails: rectangle respects the original main image proportion, square forces thumbnails to be a square;
• quality: the quality of the reduction used to create the thumbnails: high or low.

7.2.4 Decoration

The elements defining the page decoration take place between the thumbnails-info element and the first arrangement element. On the previous example of a layout.xml file a header element is present. It contains Xiss web specific elements and HTML elements. For more details see the page decoration feature.

7.2.5 Arrangement

An arrangement is defined by an arrangement element. It specifies how the contained components are displayed by the value of his orientation attribute:

• vertical: the components are displayed vertically from the top to the bottom;
• horizontal: the components are displayed horizontally from the left to the right.

The default layout used here as an example produces the following result:

            ------------------------------------------------
            |                    header                    |
            ------------------------------------------------
            ----vertical-arrangement------------------------
            | -------------------------------------------- |
            | |              navigation bar              | |
            | -------------------------------------------- |
            | --horizontal-arrangement-------------------- |
            | | -----  --------------------------  ----- | |
            | | | t |  |                        |  | t | | |
            | | | h |  |                        |  | h | | |
            | | | u |  |                        |  | u | | |
            | | | m |  |                        |  | m | | |
            | | | b |  |       image area       |  | b | | |
            | | | n |  |                        |  | n | | |
            | | | a |  |                        |  | a | | |
            | | | i |  |                        |  | i | | |
            | | | l |  |                        |  | l | | |
            | | | s |  |                        |  | s | | |
            | | -----  --------------------------  ----- | |
            | -------------------------------------------- |
            -----------------------------------------------

The possible components in an arrangement are: a navigation bar, thumbnails containers, image area and another arrangement. An embedded arrangement may have a different orientation. If not, the embedded arrangement is unnecessary. In the example above the embedded arrangement is used to organized thumbnails and image area horizontally inside a vertical arrangement.

7.2.6 Navigation bar

The navigation-bar element describes the parts wanted for the slide show navigation. Each part corresponds to a sub-element. The possible elements are:

• previous: go to a previous slide show if a link is set in a slideshow.xml file
• next: idem for a next slide show
• backward: backward arrow that displays the previous image
• forward: forward arrow that displays the next image
• init: go to the first image or the index page if it exists.

The type attribute in the navigation-bar element set navigation behavior (see navigation type feature). Five types are available:

• basic: navigation beginning with the first image and stopping with the last image (the default if nothing is specified).
• circular: the circular navigation allows to step backward from the first image to the last image and to step forward from the last image to the first image.
• previous: this type allows the navigation with the backward arrow from the first image to a previous slide show if a link to it exists (see slide show links feature).
• next: this type allows the navigation with the forward arrow from the last image to a next slide show if a link to it exists (see slide show links feature).
• links: this type combine the previous and the next type.

7.2.7 Thumbnails container

The thumbnails element defines a container displaying the thumbnails. If several containers are used, the thumbnails are equally dispatched in it. In a vertical arrangement the thumbnails are organized in lines and in a horizontal arrangement they are organized in columns. The attribute range indicates the number of lines or columns by container depending on the case.

7.2.8 Image area

The image-area element defines the display of each main image. A width and a height attributes indicate the size of this area. In this area is displayed the main image with a comment and eventually image metadata. The images are centered vertically and horizontally in it. The image area is also used to display slide show index. The possibles sub-elements of image-area are, in the following order:

• comment, comment characteristics define by two attributes:
  • position: indicates if the comment position relatively to main image by the values top and bottom.
  • number-format: defines the numbering display associated with the image comment (see image numbering feature for more details).
• image-location-on-map, an optional element to allow to show the main image location with Google Maps, if the image has GPS metadata (latitude and longitude). This element has three attributs:
  • map-type: the type of map displayed by default: plan (0), satellite (1), mixed (2)
  • map-control: true or false to display or not the control to change the map
  • zoom-control: true or false to display or not the control to zoom in/out the map.
  • fading: none, slow or fast indicates the behavior of the transition beetwen the main image and the map.
  • zoom-level: 2, 5, 10, 15, 18 default zoom factors when displaying the map (2 is the nearest level and 18 the farest).
• An optional element to define a customized local index.
• Four optional elements (meta-data, meta-data-film, meta-data-processing, meta-data-unknown) corresponding to the metadata diaplay.

7.2.9 Local index

Two kinds of local index is available (see Customizable local index section). Each kind of local index is represented by a specific element as follow:

• local-index-standard: enables the display of the slide show description (description attribute) and the display of an explanation (explanation attribute). The possible values are true or false.
• local-index-google-maps: describes the parameters to display on a map with Google Maps API the localization of the slide show images having GPS data on a map. The parameters are:
  • map-type: the type of map displayed by default: plan (0), satellite (1), mixed (2)
  • map-control: true or false to display or not the control to change the map
  • zoom-control: true or false to display or not the control to zoom in/out the map.

The two local index elements have the two common attributes: width and height to define the local index area inside the main image area.

7.2.10 Metadata

A sub element of image area element describes witch metadata to display and they position. This element is meta-data. The attribute position indicates if the metadata are displayed at the top or the bottom of the main image. Each metadata tag to be displayed is represented by a sub element of the meta-data's one. The possible elements are those of the possible attributes of the meta-data element in the content slide show file:

• maker, model, date, shutter-speed, exposure-time, aperture, iso, focal-length, flash, white-balance.

The sub elements after the meta-data-film element indicate the metadata to display for photographic film image. The possible sub elements are:

• maker, model, date, film, iso, exposure-time, aperture, focal-length, flash.

And the sub elements after the meta-data-processing element indicate the metadata to display for processing image. The possible sub elements are:

• software, date.

Only the meta-data element indicates the metadata position for all kinds of metadata. If only photographic film images are displayed with metadata, then the element meta-data must be present to indicate the position display film metadata.

7.3 Skin, CSS styles

This section describes the CSS styles that can be used to define a skin. The styles are organized in three files:

• page.css: styles for top level HTML elements and global style definitions (for links by example);
• layout.css: styles associated at the basic elements for page organization: decoration elements and arrangements.
• component.css: styles for all slide show components like navigation bar, thumbnails, main image...

This organization of styles in files is made so to facilitate the identification of elements which concern the styles and the definition of new skins by enabling the reuse of generic style. It's the case with the layout.css file, containing a sharable definition of styles in the skins/common directory.

The following describes the HTML elements on which CSS style can be associated.

7.3.1 Page

The top level elements of a HTML slide show page look like:

<body>
    <div id="page">
       (...)
    <div>
<body>

The "page" CSS file is dedicated to define styles for elements above. This file can also contain all styles you need like h1. For example if you add HTML elements in page decoration like header or footer. It can contain the style definition for the default look on usefull elements as link (a, a:hover).

7.3.2 Layout

The "layout" CSS file groups together styles for page content, decorations and arrangement. The page content and the page decorations are organized as the following:

<body>
    <div id="page">
        <div id="header">
            (...)
        </div>
        <div id="content">
            <!-- content -->
        </div>
        <div id="footer">
            (...)
        </div>
    <div>
<body>

If a left and/or a right margin are specified in a layout, then the content is:

<body>
    <div id="page">
        <div id="header">
            (...)
        </div>
        <div id="content">
            <div id="left-margin">
                (...)
            </div>
            <div id="content-with-margin">
                <!-- content -->
            </div>
            <div id="right-margin">
                (...)
            </div>
        </div>
    <div>
<body>

The "layout" CSS file defines also the styles for horizontal and vertical arrangement. Each component (thumbnails container, image area...) in an arrangement is contained in a div element of the type of this arrangement. For example, a horizontal arrangement with two components, each one in a div with the style horizontal is presented here after. For a vertical arrangement the style class is vertical. A component can be arrangement.

<div class="horizontal">
    <!-- component 1 -->
<div>
<div class="horizontal">
    <!-- component 2 -->
<div>

7.3.3 Component

The components are the direct constituent elements of slide show: thumbnails, navigation bar, main image area. It comprises also definition of styles for: local index, home link, copyright text.

Thumbnails

Three CSS classes define thumbnail styles: 'thumbnailRow' for thumbnail row, 'thumbnialLink' for main image link associated with thumbnail, and 'currentThumbnail' for the thumbnail corresponding of the current image displayed. The following example shows these three styles. This example presents two thumbnail row, each one with one image, but each row can contain more (in vertical arrangement or in horizontal arrangement with range > 1, see thumbnails container in layout).

<div class="thumbnailsRow">
    <a class="thumbnailLink" title="2. Moret sur Loing, France." href="FranceMoretSurLoing.html">
        <img src="thumbnails/FranceMoretSurLoing.jpeg" title="2" height="46" width="70" style="margin: 13px 1px;"/>
    </a>
</div>
<div class="thumbnailsRow">
    <img class="currentThumbnail" src="thumbnails/EquadorCotopaxi.jpeg" title="3" height="46" width="70" style="margin: 13px 1px;"/>
</div>

Navigation bar

The navigation bar is composed with three div> elements, each one with a dedicated styles: 'h-previous' or 'v-previous' for a previous slide show link, 'h-next' or 'v-next' for a next slide show link, and 'h-nav-bar' or 'v-nav-bar' as a container for backward, forward and init links. The prefix 'h' and 'v' correspond respectively to a horizontal and a vertical alignment of the navigation bar components. The bar components are align horizontally when the bar is in a vertical arrangement, and the components are align vertically when the bar is in a horizontal alignment.

<div class="h-previous">< <a href="../gymnastique/GYM-004.html" title="Go to previous slide show">slideshow p</a></div>
<div class="h-next"><a href="../gymnastique/GYM-001.html" title="Got to next slide show">slideshow n</a> ></div>
<div class="h-navbar-div">
    <ul class="h-nav-bar">
        <li>
            <a class="backward" href="NepalSwayambhunath.html" title="Go to backward"><span> < </span></a>
        </li>
        <li>
            <a href="./index.html" class="init" title="Return at the first page of the slide show"><span> o </span></a>
        </li>
        <li>
            <a class="forward" href="FranceMoretSurLoing.html" title="Go to forward"><span> > </span></a>
        </li>
    </ul>
</div>

Les forward, backward and init links are items of a list as it is shown above. The list and the links have a corresponding CSS class. Only the list has two classes for the two types of alignement (horizontal and vertical).

Main image area

The HTML elements of an main image area are the following:

<div style="width: 640px; height: 540px;" id="image-container">
    <div style="padding-top: 85px;">
        <div class="top-comment" id="image-comment">
            <div><span class="image-num">1/4</span>Cotopaxi (5897 m), Equador.</div>
        </div>
        <img height="330" width="500" class="mainImage" src="./EquadorCotopaxi.jpg" title="EquadorCotopaxi"/>
        <div class="bottom-metadata" id="metaData">
            <div>[ 2009:05:23 22:17:47 ]</div>
        </div>
    </div>
</div>

The main image area is organized to display a large image with a comment and eventually the image's metadata (see here after). The area corresponds to a div element with the id 'image-container'. The direct child element div is here to center the image vertically.

In these two div elements, there is the three components of the image area: a div element 'top-comment' or 'bottom-comment' for image's comment container, a img element 'mainImage' for the main image itself, and a div element 'top-metadata' or 'bottom-metadata' for the image's metadata container. The two prefix 'top-' and 'bottom-' indicate the relative position of the comment and the metadata with the main image. It enables different look for comment and metadata depending of they displayed position. The class 'image-num' defines the style for the image number its comment container.

Two div elements 'map' and 'map-action' can be present in association with the main image if the option display image position is set to true in the layout.

<div style="z-index:65555; width:200px; height:100px; position:absolute; top:0; left:0; display:none; background:white;" class="" id="map">
    <!-- area for maps -->
</div>
<div style="z-index:65557; position:absolute; top:0; left:0; display:block" id="map-action">
    <a id="open" href="#" title="Show/hide image location on a map."><span>Map</span></a>
</div>

The 'map' element is also used in local index page using Google Maps. It is not necessary to defined a style for this element. The width an height are adjust to the width and height to the image, because it's full content (except borders) is used by Google Maps to display in it maps.

Styles for 'map-action' and 'open' elements can be defined. The location of the 'map-action' element is computed to be located at the bottom right corner of the main image.

Local index

The HTML elements for local indexes are contained in the main image area to take the place of the main image. Three kinds of local index exist: default, standard and Google Maps.

The default index is built as follow. It corresponds to div 'default-index' element containing a paragraph 'explanation'. CSS styles can be defined for 'default-index' and 'explanation' class.

<div style="width: 640px; height: 540px;" id="image-container">
    <div id="default-index">
        <p class="explanation">Clic on a thumbnail or clic on arrows to navigate.
            <br />
            <br />
            <br />
            <a href="anna005-02.html">Clic here to start.</a>
        </p>
    </div>
</div>

The standard index is a div element 'standard-index'. A style can be attached to this element. Its position is computed to be aligned vertically with the width and height specified in a layout. Standard index enables the display or not of a slide show description and the explanation. The explanation is the same as the one for default index. The description is embedded in a div element 'description'.

<div style="width: 640px; height: 540px;" id="image-container">
    <div style="position:relative; width:550px; height:450px; top:45px; left:45px" id="standard-index">
        <div class="description">
           (...)
        </div>
        <p class="explanation">
           (...)
        </p>
    </div>
</div>

The Google maps index corresponds to two div elements: 'map-index' for the main index container and 'map' for maps displayed by Google Maps. As the standard index, 'map-index' can have a CSS style. The 'map' element is the one describe in the main image area. Here it as just a fixed size defined in a layout.

<div style="width: 640px; height: 540px;" id="image-container">
    <div style="position: relative; top:45px; left:95px; width:450px; height:450px;" id="map-index">
        <div style="width:450px; height:450px;" id="map">
            <!-- area for maps -->
        </div>
    </div>
</div>

Animation

A component is dynamically added when a slide show uses animation. This component is a wait screen displayed only during an image loading. It looks like:

<div id="load" style="...."></div>

The style attribute is dynamically changed to adapt the wait screen in position and size to the image area part or to the full page. The element style to define is essentially its background including by example an animated image.

Animation control

Some HTML elements are dynamically inserted before the main image area, when the animation control option has been chosen. The top level elements are three div as follow:

<div id="ctrl-wrapper">
    <div id="ctrl-action"><a style="cursor: pointer;" onclick="XWtoggleControlPanel()"><span>[+]</span></a></div>
    <div style="display: block;" id="ctrl-panel">
		...
    </div>
</div>

Styles can be defined for the div above including the elements embedded in the ctrl-action element. The ctrl-action element enables to show and hide of the ctrl-panel element that contains the parameters to modify.

The three parameters to control are represented by three lists inside the ctrl-panel element (see here after). For each list, the first item is the parameter name and the followed items are values or actions to change value. When a value is chosen, the elements dynamically change to take into account the new current value. For comment and metadata display parameters (comment-disp and mdata-disp lists) the current value is directly in a span element and the possible other values are embeded in a a element. For the animation speed parameter, two actions are possible to increase or decrease (increase and decrease items) the speed value (anim-speed-value item). For all of these elements CSS styles can be defined.

<div style="display: block;" id="ctrl-panel">
    <ul id="comment-disp">
        <li class="title">Comment:</li>
        <li id="disp-cmt-bottom"><a style="cursor: pointer;" onclick="XWchangeCommentDisp()"><span>bottom</span></a></li>
        <li id="disp-cmt-top" class="current-elt"><span>top</span></li>
    </ul>
    <ul id="mdata-disp">
        <li class="title">Meta data:</li>
        <li id="disp-mdata-none" class="current-elt"><span>none</span></li>
        <li id="disp-mdata-bottom"><a style="cursor: pointer;" onclick="XWchangeMetaDataDisp('bottom')"><span>bottom</span></a></li>
        <li id="disp-mdata-top"><a style="cursor: pointer;" onclick="XWchangeMetaDataDisp('top')"><span>top</span></a></li>
    </ul>
    <ul id="anim-speed"><li class="title">Animation speed:</li>
        <li id="decrease"><a style="cursor: pointer;" onclick="XWdecreaseSpeed()"><span>-</span></a></li>
        <li id="anim-speed-value" class="medium"><span>medium</span></li>
        <li id="increase"><a style="cursor: pointer;" onclick="XWincreaseSpeed()"><span>+</span></a></li>
    </ul>
</div>

Automatic show

The HTML elements defining the automatic show control are added dynamically if the corresponding option is chosen (see animation section). These elements are inserted between the animation control and the main image area. It corresponds to a play/pause action and, increase and decrease actions, as presented below:

<div id="play-ctrl">
    <ul>
        <li id="play-pause">
            <a id="play-action" onclick="XWplayPause()" style="cursor: pointer"><span>Play</span></a>
            <a id="pause-action" onclick="XWplayPause()" style="cursor: pointer"><span>Pause</span></a>
        </li>
        <li id="display-time">
            <a id="display-time-decr" onclick="XWdecrImageDisplayTime()" style="cursor: pointer"><span>-</span></a>
            <span id="display-time-value">3s.</span>
            <a id="display-time-incr" onclick="XWincrImageDisplayTime()" style="cursor: pointer"><span>+</span></a>
        </li>
    </ul>
</div>

A CSS style can be defined for each HTML element above. The elements play-action and pause-action are shown and hidden alternatively following the show state. If the show is playing, then only pause-action is visible, and if the show isn't playing, then only the paly-action is visible.

Other components

Two other components exist: home link and copyright. These components can be used in page decoration. They look like:

<a title="Index" class="home" href="../index.html"><span>Index</span></a>

<div class="copyright">Copyright © 2004-2010 Xiss web</div>

CSS styles can be defined for the two classes 'home' and 'copyright'.

7.4 Simple skin file skin.xml

An XML file exists to define a simple skin. Skin files can be associated with a slide show project (see simple skin editor). See here after the default skin.xml as an example of simple skin file.

<?xml version="1.0" encoding="UTF-8"?>
<skin name="simple-green">
    <colors>
        <body-background b="107" g="107" r="107"/>
        <page-background b="210" g="210" r="210"/>
        <foreground b="0" g="1" r="0"/>
        <link-foreground b="125" g="125" r="125"/>
        <link-hover b="180" g="180" r="180"/>
        <disabled-foreground b="153" g="153" r="153"/>
    </colors>
    <page center="yes">
        <font name="Arial,sans-serif" size="100" style="normal" unit="%" weight="normal"/>
        <link>
            <normal line="dashed" thin="1"/>
            <hover line="solid" thin="1"/>
        </link>
    </page>
    <component>
        <image-area margin="1">
            <color b="190" g="190" r="190"/>
            <background b="255" g="255" r="255"/>
            <font name=""Times New Roman",serif" size="105" style="italic" unit="%" weight="normal"/>
            <meta-data name="Arial,sans-serif" size="80" style="normal" unit="%" weight="normal"/>
            <border line="solid" thin="2"/>
            <local-index>
                <border-color b="153" g="153" r="153"/>
                <background b="107" g="107" r="107"/>
            </local-index>
            <animation background="white" icon-style="default" opacity="0.5"/>
        </image-area>
        <thumbnail>
            <link>
                <normal line="solid" thin="0"/>
                <hover line="solid" thin="3"/>
            </link>
            <current line="solid" thin="3"/>
        </thumbnail>
        <copyright>
            <font name="Times,serif" size="80" style="italic" unit="%" weight="normal"/>
        </copyright>
    </component>
</skin>

The simple skin is composed of tree parts: a colors part that defines the global colors; a page part that that contains main styles; and component part which describes the elements found in a layout.

7.4.1 Colors

The global colors (<colors>) are:

• body background: <body-background>
• page background: <page-background>
• text and line color: <foreground>
• color of hypertext link: <link-foreground>
• color of hypertext link when it's hover: <link-hover>
• color for element disabled: <disabled-foreground>

7.4.2 Page

The element <page> defines the global styles. An attribute center indicates if the page is centered or not. The sub-element <font> defines the text style (font, size...). The <link> section defines underlines for link and link hover.

7.4.3 Components

The element <component> is dedicated for styles of three components available:

• image area (<image-area>): colors can be redefined for text and line (<color>), and background (<background>) in image area. The border style (<border>) of the image area can be specified. The image area defines also the text style for comment (<font>) and metadata (<meta-data>). Associated with the image area, the local-index element defines the look of the local index area by two colors: border color (border-color) and background color (background). Associated to the image-area element; a animation element defines the style for a wait screen for the animation feature.
• thumbnails (<thumbnail>): the thumbnails are image links for slide show navigation. The border style of thumbnails can be defined: link border (<normal>) and link hover border (<hover>). The colors of border (link and link hover) are those defined in the colors section. This thumbnails section defines also a border style for the corresponding thumbnail of the current image (<current>, the color for current image is the global foreground color).
• copyright (<copyright>): text style for the copyright display.

8 The examples

This section presents the examples available with Xiss Web (delivered in a dedicated package). It's a short presentation of each example, with its purpose and the actions you have to do for having benefit for you. The examples are made to help you to get skill on Xiss web features.

The examples are Xiss web projects. So they can be used with Xiss web's GUI. It is also useful for each project to browse its directories with a file explorer to discover the organization of its images and files.

The section Use the examples details the two first examples.

8.1 projet1-sport-mode

This example is a simple project for a first use of Xiss web and to learn about the two basic processes of Xiss web: sow and build.

It illustrates a simple way to create slide shows using all the default parameters (without any customization).

See also the section Use examples.

8.2 projet2-sport-mode

This second example is also a project for a first use of Xiss web. It uses the same photos organized in same slide shows than the first example.

This example illustrates the ability of Xiss web to customize slide shows: taking into account the way of the images are storing in slide show directories, changing the default look and feel, choosing a navigation type and, using animation feature.

See also the section Use examples.

8.3 features/links

This example illustrates the links feature. This feature is the possibility to link slide shows together and to enable navigation between them.

The project of this example contains two slide shows. A sow process is already done and the slide shows are linked together. To see the result you have just to build the slide shows and display them with a web browser.

For this example, it is recommended to: consult the content file of the slide shows, change the links, change the navigation type in the layout file, build the slide shows again to see the changes.

8.4 features/metadata

The main pourpose of this example ist to show the Xiss web's capacity to extract metadata from images and how these information can be used in slide shows. This example uses also the animation feature in one of its slide shows.

The corresponding project to this example contains two slide shows: one called sample and the other one gsp. The first one is more dedicated to metadata extraction: the extractable metadata depends on the image origin (digital camera or not) and an eventually enrichment by a software. It's assiciated layout defines animation and automatic show. The second one is more dedicated to the use of GSP metadata in a slide show.

If you open this example project, you can see a layout for each slide show. The layouts are explained here after. The first action with this project is to initialize the slide show contents with the sow process. Open the sample slide show content to see the extracted metadata.

Now it is possible to generate the slide shows white the build process and see the result. (A web connection is needed for the gps slide show.)

The gps slide show uses the GPS metadata to display image localization with Google maps: directlly for all images from a local index and for one image from its large display. In the two slide shows, other metadata is displayed with the image comment. All of these possibilities can be set in a layout.

You can open the layouts, change some parameters and build again the slide shows to see the differences, specially the with the animation feature presents in the sample layout.

8.5 features/page-decoration

This example shows a use of decoration elements in a layout (header, footer, left and right margins).

The project of this example is already initialized and contains two slide shows, each one with a layout. In the slide show contents, title and/or description are filled and they be used in the layouts to define headers.

For this example, you have to build the project to generate the slide show and see the result. You are free to edit your self the titles and descriptions and the page decoration elements and after build again the slide show to see the result.

8.6 features/html-comment

The purpose of this example is to illustrate the possibility to have HTML code in slide show description and image comment.

The project of this example contains one slide show already initialized. In the slide show content, description and image comments have been wrote with the HTML mode to take into account the HTML elements at the build step. The HTML elements are also taking into account with animation feature.

For this example, you have just to build the project to generate the slide show and see the result. You are free to edit your self the comments and build again the slide show.

8.7 features/repository

This example illustrates the possibility to import into a project images from a repository.

The project of this example contains just a layout and its properties. The project hasn't any images yet (and no src directory). The images are in a repository (folder image-repository in the examples directory). We suggest you to take a look at the project's properties, specially the "Original repository" part.

The project must be initialized with the sow process. After the process run, the images in image-repository has imported and resized in the project as it is specified in its properties. The slide show contents are also created and can be enriched with comments.

For this example isn't the purpose, but if you want, you can run the build process to obtain the slide show and to be displayed.

8.8 features/sections

This example shows the use of the sections feature. The sections enable to organize the images in slide show for thumbnails presentation.

The project of this example contains two slide shows, each one with a different presentation of thumbnails: one with vertical presentation and another with horizontal presentation. The slide shows gare already initialized and the slide show contents have sections.

The project of this example needs a build process run to generate slide shows. Once generated, you can see the thumbnails presentations on these slide shows.

With this example, you can use slide show content editor to move images over sections, edit section titles, add or remove sections, as you want. After, build again slide shows to see the result.

8.9 features/personal-pages

This example shows the use of HTML personal pages in a project (see Web or not section). The personal pages can need some resources: images, CSS, etc. These pages can be any where the slide shows directory hierarchy in src. This example use index personal pages: a global index and two local indexes.

The project of this example contains two slide shows, each one with a layout, and three index.html pages. The index pages need some images as resources (in folder images folder).

Open the features/personal-pages project. The images folder is present but isn't recognized as a slide show as it's specified in the project's properties (in 'directory and image' section). Its recomanded to show all other files (filter in root's popup menu of the file tree view). Now you can generate the slide shows (initialize and build) to see the result.

8.10 features/reverse

This example illustrates the reverse feature. This functionality enables to fill slide shows in a project from images and comments in a set of existing HTML pages (to build a part of the src directory).

The properties of project of this example are set to reverse the slide shows generated by the example projet1-sport-mode. Before opening features/reverse example, build the slide shows of projet1-sport-mode . If it doesn't, then an error will occur because the location to reverse doesn't exist. Before build projet1-sport-mode , it is interesting to write you own image comments (for example in gymnastique slide show) to retrieve them in the new project.

Once features/reverse example opened, we suggest you to take a look at the project's properties, specially the "Reverse" part and to browse from the Xiss web's GUI the location to reverse. In the location to reverse, the pale folders will be ignored by the reverse process.

Initialize the project with the 'reverse' option set and follow by the build process. Then you can see the generated slide shows and compare to the slide shows from the inversed location.

© 2004 - 2012 Xiss web